:root {
  --ink: #fff;
  --navy: #11143f;
  --navy-2: #25205f;
  --pink: #ff4fa6;
  --blue: #32b9ff;
  --gold: #ffd75e;
  --cream: #fff7dc;
  --green: #48db9b;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090b26; }
body { color: var(--ink); font-family: Trebuchet MS, Arial, sans-serif; }
button { font: inherit; }

.game-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(10,7,34,.64), rgba(13,9,39,.78)),
    url('../assets/coconut-shy-stall-v2.png') center / cover no-repeat,
    #11143f;
}

.safe-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #11143f;
}
.topbar { position: absolute; z-index: 20; top: 3.5%; left: 4%; right: 4%; display: flex; align-items: center; justify-content: space-between; }
.game-shell.is-playing .topbar { display: none; }
.brand { width: 11.5%; min-width: 112px; display: block; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(7,5,34,.42)); }
.icon-button { color: #fff; border: 2px solid rgba(255,255,255,.4); background: rgba(4,8,35,.7); border-radius: 999px; padding: .7em 1.1em; }
.game-badge { position: absolute; left: 50%; transform: translateX(-50%); color: #fff; padding: .52rem 1.35rem; border: 2px solid #ff8fda; border-radius: 999px; background: rgba(23,8,63,.82); box-shadow: 0 0 24px rgba(255,52,191,.46); font-weight: 1000; letter-spacing: .13em; white-space: nowrap; }

.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: clamp(68px, 9vh, 104px) 5vw clamp(24px, 4vh, 46px); }
.screen.active { display: flex; }
.hero-card, .panel { text-align: center; padding: 2.4rem 3.3rem; border: 4px solid rgba(255,215,94,.78); border-radius: 34px; background: linear-gradient(160deg, rgba(38,19,30,.96), rgba(30,20,77,.96)); box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 0 40px rgba(255,255,255,.06), 0 0 0 8px rgba(79,35,23,.58); }
.hero-card { width: 58%; max-width: 960px; }
.panel.wide { width: 74%; max-width: 1120px; }
.panel.compact { width: 48%; max-width: 760px; }
.eyebrow { margin: 0 0 .4rem; color: var(--gold); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: .05em 0; font-size: clamp(3rem, 6vw, 6.6rem); line-height: .95; color: #fff; text-shadow: 0 6px 0 #8e2679, 0 10px 30px rgba(0,0,0,.5); }
h2 { margin: .25em 0 .4em; font-size: clamp(2rem, 3vw, 3.3rem); }
.tagline { font-size: clamp(1.2rem, 2vw, 2rem); margin: .7rem 0 1.2rem; }
.equal-note { margin: -.2rem 0 1rem; color: #c8eaff; }

.primary, .secondary, .text-button { display: block; min-width: 52%; margin: .75rem auto 0; border-radius: 999px; padding: .75em 1.5em; font-weight: 900; font-size: clamp(1rem, 1.4vw, 1.4rem); cursor: pointer; }
.primary { color: #1b1040; border: 3px solid #fff0b3; background: linear-gradient(#ffe783, #ffbb3d); }
.secondary { color: #fff; border: 3px solid #7edcff; background: #234aa7; }
.text-button { color: #fff; border: 2px solid transparent; background: transparent; }
.focusable:focus { outline: 5px solid #fff; outline-offset: 5px; box-shadow: 0 0 0 10px rgba(255,215,94,.42), 0 0 36px rgba(255,215,94,.8); transform: scale(1.025); }

.character-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.4rem auto; width: 80%; }
.character-card { position: relative; height: min(35vh, 310px); overflow: hidden; border: 4px solid rgba(255,255,255,.6); border-radius: 28px; padding: 0; color: #fff; background: radial-gradient(circle at 50% 35%, #304b98, #10152f 76%); cursor: pointer; }
.character-card img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.character-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: .65em; background: linear-gradient(transparent, rgba(4,7,28,.95) 45%); font-size: clamp(1.5rem, 2.4vw, 2.6rem); font-weight: 900; }

.instruction-list { text-align: left; margin: 1.4rem auto; max-width: 520px; }
.instruction-list p { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; }
kbd { display: inline-grid; place-items: center; min-width: 2.4em; min-height: 2.4em; border: 2px solid #fff; border-radius: .55em; background: #2b4aaa; font-weight: 900; box-shadow: 0 .18em 0 #101c55; }

.play-screen { padding: 0; flex-direction: column; background: #16255d; }
.hud { position: absolute; z-index: 4; top: 2.2%; left: 19%; right: 4%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.hud span { padding: .48rem .9rem; border: 3px solid #ffd75e; border-radius: 16px; background: linear-gradient(#3c1d68, #1a174e); text-align: center; font-size: .84rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 5px 0 #6f2d68, 0 8px 18px rgba(0,0,0,.35); }
.hud strong { display: block; color: #fff4a3; font-size: 1.45rem; letter-spacing: 0; }
#combo-hud.inactive { opacity: .62; }
#game-canvas { width: 100%; height: 100%; display: block; }
.overlay-screen { z-index: 12; background: rgba(3,5,24,.76); backdrop-filter: blur(6px); }
.result-score { width: 62%; margin: 1rem auto; padding: .8rem; border-radius: 24px; background: linear-gradient(145deg, #ec3f96, #7438bb); }
.result-score span, .result-score strong { display: block; }
.result-score strong { color: var(--gold); font-size: clamp(3rem, 5vw, 5rem); }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 86%; margin: .7rem auto; }
.result-stats span { padding: .55rem; border-radius: 14px; background: rgba(255,255,255,.09); font-size: .9rem; }
.result-stats strong { display: block; margin-top: .15rem; color: var(--gold); font-size: 1.35rem; }
.results-panel { position: relative; }
.result-character { position: absolute; z-index: -1; left: -235px; bottom: 8px; width: 270px; height: 390px; object-fit: contain; object-position: center bottom; border: 0; filter: drop-shadow(0 16px 20px rgba(0,0,0,.48)); }

.coconut-cluster { height: 74px; margin: .8rem auto; }
.coconut-cluster span { display: inline-block; width: 64px; height: 64px; margin: 0 -5px; border-radius: 50%; border: 5px solid #7d451e; background: radial-gradient(circle at 36% 28%, #cf9456 0 6%, #9d5f2c 7% 10%, #673515 45%, #3a1c0b 100%); transform: rotate(-8deg); }
.coconut-cluster span:nth-child(2) { transform: translateY(-10px) rotate(8deg); }
.coconut-cluster span:nth-child(3) { transform: rotate(14deg); }

@media (max-height: 650px) {
  .hero-card, .panel { padding: 1.2rem 2rem; }
  .character-card { height: 230px; }
  .primary, .secondary, .text-button { margin-top: .45rem; padding: .55em 1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}