/* ============================================================
   CATZ vs DOGZ: ROCKET PAWS ARENA — styles.css
   Look: "Saturday-morning arcade sticker" — chunky rounded
   cards, thick outlines, big type readable on a classroom TV.

   Organized as a small design system:
     1. tokens          5. cards & grids      9. game screen / HUD
     2. base & bg       6. team select       10. overlays & fx
     3. type & sticker  7. store tabs        11. results
     4. buttons         8. badges            12. panels / idea lab
                                             13. responsive & a11y
   ============================================================ */

/* ---------- 1. design tokens ---------- */
:root{
  /* world */
  --bg:#120c2e;            /* deep arcade night */
  --bg2:#1c1448;
  --panel:#2c2166;         /* card / panel surface */
  --panel-hi:#372a7e;      /* surface top sheen */
  --panel-lo:#241b52;
  --panel-edge:#4a3aa8;
  --shadow-drop:#0d0826;   /* chunky offset shadows */

  /* ink */
  --ink:#fff7ee;
  --ink-dim:#bcb3e8;

  /* teams */
  --cat:#ff7847;           /* team cats — tangerine */
  --cat-hi:#ffa15e;
  --cat-dark:#c94f23;
  --dog:#4aa8ff;           /* team dogs — sky blue */
  --dog-hi:#7cc1ff;
  --dog-dark:#2a6cc0;

  /* accents */
  --coin:#ffd34d;
  --good:#7affb0;
  --danger:#ff5a8a;
  --legend:#ff5a2b;

  /* shape */
  --radius:22px;
  --radius-sm:14px;
  --font: "Trebuchet MS", ui-rounded, "Arial Rounded MT Bold", "Comic Sans MS", system-ui, sans-serif;
}

/* ---------- 2. base & background ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  /* layered arena lighting: team glows at the top corners, a stage
     glow rising from the bottom, and a faint dot grid for texture */
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1.5px, transparent 2px) 0 0/44px 44px,
    radial-gradient(1000px 540px at 12% -12%, rgba(255,120,71,.16), transparent 62%),
    radial-gradient(1000px 540px at 88% -12%, rgba(74,168,255,.17), transparent 62%),
    radial-gradient(1100px 720px at 50% 118%, rgba(124,108,255,.22), transparent 62%),
    var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;
}

/* keyboard focus is always loud and gold */
:focus-visible{ outline:4px solid var(--coin); outline-offset:2px; }

/* ---------- screens ---------- */
.screen{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center;
  padding:24px; overflow-y:auto; overflow-x:hidden;
}
.screen.active{ display:flex; }
.screen-inner{ width:min(1100px,100%); display:flex; flex-direction:column; align-items:center; gap:18px; }
.screen-inner.center{ justify-content:center; min-height:100%; }

/* decorative layer (title screen): soft team glows + ghost pitch rings */
.bg-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.glow{ position:absolute; width:62vmax; height:62vmax; border-radius:50%; }
.glow-cat{ background:radial-gradient(circle, rgba(255,120,71,.22), transparent 64%); top:-28vmax; left:-20vmax; }
.glow-dog{ background:radial-gradient(circle, rgba(74,168,255,.22), transparent 64%); bottom:-28vmax; right:-20vmax; }
.pitch-lines{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
  width:min(620px,86vw); aspect-ratio:1/1; border-radius:50%;
  border:3px solid rgba(255,255,255,.05);
}
.pitch-lines::before{
  content:""; position:absolute; inset:20%; border-radius:50%;
  border:3px solid rgba(255,255,255,.05);
}
.pitch-lines::after{
  content:""; position:absolute; left:50%; top:-30vh; bottom:-30vh; width:3px;
  background:rgba(255,255,255,.04);
}

/* ---------- 3. sticker headings (the signature) ---------- */
.sticker{
  font-weight:900; text-transform:uppercase; letter-spacing:1px;
  color:#fff;
  text-shadow:
    3px 3px 0 #120c2e, -3px 3px 0 #120c2e, 3px -3px 0 #120c2e, -3px -3px 0 #120c2e,
    0 7px 0 rgba(0,0,0,.35);
  transform:rotate(-1.5deg);
}
h1.sticker{ font-size:clamp(2.6rem,7.5vw,5rem); line-height:1; text-align:center; }
h2.sticker{ font-size:clamp(1.6rem,4vw,2.4rem); }
.section-title{ font-size:clamp(1.2rem,3vw,1.5rem) !important; margin-top:10px; }

/* --- CSS game logo --- */
.title-hero{ position:relative; }
.title-hero::before{                      /* spotlight behind the logo */
  content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:min(760px,95vw); height:380px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,108,255,.32), transparent);
}
.game-logo{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.logo-row{ display:flex; align-items:center; gap:.22em; }
h1 .line-cats{
  color:var(--cat); display:inline-block; transform:rotate(-3deg);
  text-shadow:
    3px 3px 0 #120c2e, -3px 3px 0 #120c2e, 3px -3px 0 #120c2e, -3px -3px 0 #120c2e,
    0 8px 0 var(--cat-dark), 0 14px 22px rgba(255,120,71,.4);
}
h1 .line-dogs{
  color:var(--dog); display:inline-block; transform:rotate(2.5deg);
  text-shadow:
    3px 3px 0 #120c2e, -3px 3px 0 #120c2e, 3px -3px 0 #120c2e, -3px -3px 0 #120c2e,
    0 8px 0 var(--dog-dark), 0 14px 22px rgba(74,168,255,.4);
}
.logo-vs{
  font-size:.3em; background:linear-gradient(180deg,#ffe27a,var(--coin));
  color:#120c2e; padding:.4em .55em; border-radius:.6em;
  border:3px solid #fff; transform:rotate(8deg);
  text-shadow:none; box-shadow:0 4px 0 rgba(0,0,0,.35);
}
h1 .line-sub{
  display:block; font-size:.4em; color:var(--coin); letter-spacing:6px;
  margin-top:10px; transform:rotate(1deg);
}

.tagline{ color:var(--ink-dim); font-size:1.1rem; text-align:center; }
.tagline.small{ font-size:.9rem; }

/* ---------- 4. buttons ---------- */
.btn{
  font-family:var(--font); font-weight:900; font-size:1.15rem;
  color:var(--ink);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 60%);
  border:4px solid var(--panel-edge); border-radius:var(--radius);
  padding:14px 26px; cursor:pointer;
  box-shadow:0 6px 0 var(--shadow-drop);
  transition:transform .08s, box-shadow .08s, filter .08s;
  text-transform:uppercase; letter-spacing:.5px;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 0 var(--shadow-drop); filter:brightness(1.08); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--shadow-drop); }
.btn:focus-visible{ outline:4px solid var(--coin); outline-offset:3px; }
.btn.primary{
  background:linear-gradient(180deg,#ffb05e,var(--cat) 70%);
  border-color:#ffd9ad; font-size:1.35rem; padding:16px 40px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.btn.blue{ background:linear-gradient(180deg,#7cc1ff,var(--dog) 70%); border-color:#bfe0ff; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn.small{ font-size:.9rem; padding:8px 16px; border-width:3px; box-shadow:0 4px 0 var(--shadow-drop); }
.btn.ghost{ background:rgba(255,255,255,.04); border-color:var(--panel-edge); color:var(--ink-dim); }
.btn.ghost:hover{ color:var(--ink); }
.btn.danger{ background:linear-gradient(180deg,#ff8ab0,var(--danger) 70%); border-color:#ffc2d6; }
.btn:disabled{
  opacity:.45; cursor:not-allowed; transform:none; filter:saturate(.4);
  box-shadow:0 6px 0 var(--shadow-drop);
}

/* the one big call-to-action on the title screen */
.btn.mega{
  font-size:clamp(1.6rem,3.6vw,2.1rem); padding:20px 70px; border-radius:999px;
  box-shadow:0 8px 0 var(--shadow-drop), 0 0 40px rgba(255,154,61,.45);
  animation:playGlow 1.6s ease-in-out infinite alternate;
}
.btn.mega:hover{ box-shadow:0 10px 0 var(--shadow-drop), 0 0 56px rgba(255,154,61,.65); }
.btn.mega:active{ box-shadow:0 2px 0 var(--shadow-drop), 0 0 40px rgba(255,154,61,.45); }
@keyframes playGlow{
  from{ box-shadow:0 8px 0 var(--shadow-drop), 0 0 28px rgba(255,154,61,.35); }
  to  { box-shadow:0 8px 0 var(--shadow-drop), 0 0 52px rgba(255,154,61,.6); }
}

.menu-stack{ display:flex; flex-direction:column; gap:16px; align-items:center; margin-top:10px; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* confirm buttons stay visible while the grid scrolls */
.confirm-btn{
  position:sticky; bottom:14px; z-index:6; min-width:min(320px,90%);
  box-shadow:0 8px 0 var(--shadow-drop), 0 16px 32px rgba(0,0,0,.5);
}

/* ---------- top bar on menu screens ---------- */
.topbar{
  width:min(1100px,100%); display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.coin-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 70%);
  border:3px solid var(--coin); border-radius:999px;
  padding:8px 18px; font-weight:900; font-size:1.2rem; color:var(--coin);
  box-shadow:0 4px 0 var(--shadow-drop);
}
.coin-pill.title-coins{ position:absolute; top:18px; right:18px; z-index:2; }

/* ---------- 5. card grids (characters, store, arenas, modes) ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:16px; width:100%; padding:4px;
}
.grid-modes{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid-arenas{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

.card{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 55%);
  border:4px solid var(--panel-edge); border-radius:var(--radius);
  padding:16px 12px 14px; text-align:center; cursor:pointer; position:relative;
  box-shadow:0 6px 0 var(--shadow-drop), 0 12px 24px rgba(0,0,0,.22);
  transition:transform .08s, box-shadow .08s, border-color .08s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.card:hover{ transform:translateY(-4px) rotate(-.5deg); box-shadow:0 9px 0 var(--shadow-drop), 0 16px 28px rgba(0,0,0,.3); }
.card:focus-visible{ outline:4px solid var(--coin); outline-offset:2px; }

/* selected = gold ring + lift + corner check (unmissable from across a room) */
.card.selected{
  border-color:var(--coin); transform:translateY(-4px);
  box-shadow:0 0 0 4px rgba(255,211,77,.3), 0 0 30px rgba(255,211,77,.35), 0 6px 0 var(--shadow-drop);
}
.card.selected::after{
  content:"✓"; position:absolute; top:-12px; right:-10px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--coin); color:#120c2e; font-size:1.2rem; font-weight:900;
  border:3px solid #120c2e; border-radius:50%;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}

/* locked = dashed edge + dimmed art, but text stays readable */
.card.locked{
  cursor:not-allowed; border-style:dashed; border-color:#3b2f86;
  background:linear-gradient(180deg,var(--panel-lo),#1d1545 60%);
}
.card.locked:hover{ transform:none; box-shadow:0 6px 0 var(--shadow-drop), 0 12px 24px rgba(0,0,0,.22); }
.card.locked .big-emoji{ filter:grayscale(.85) brightness(.75); }
.card.locked h3{ color:var(--ink-dim); }

.card.legendary{
  border-color:var(--legend);
  background:linear-gradient(180deg,#46204a,#311c4e 60%);
  box-shadow:0 0 22px rgba(255,90,43,.35), 0 6px 0 var(--shadow-drop);
}
.card.legendary.locked{ border-style:dashed; }

.card .big-emoji{
  font-size:3rem; line-height:1; width:86px; height:86px; flex:none;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, rgba(255,255,255,.16), rgba(13,8,38,.45) 75%);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.4));
}
.card h3{ font-size:1.05rem; margin-top:4px; line-height:1.2; }
.card .flavor{ font-size:.78rem; color:var(--ink-dim); min-height:2.1em; line-height:1.3; }

/* price / owned / equipped read as little status pills */
.card .price{
  display:inline-block; margin-top:auto; padding:4px 12px;
  font-weight:900; font-size:.85rem; color:var(--coin);
  background:rgba(13,8,38,.55); border:2px solid var(--coin); border-radius:999px;
}
.card .owned-tag{
  display:inline-block; margin-top:auto; padding:4px 12px;
  font-weight:900; font-size:.85rem; color:var(--good);
  background:rgba(13,8,38,.55); border:2px solid var(--good); border-radius:999px;
}
.card .lock-icon{
  position:absolute; top:10px; right:10px; font-size:.95rem; line-height:1;
  background:rgba(13,8,38,.85); border:2px solid #3b2f86; border-radius:999px;
  padding:5px 8px;
}

/* stat bars */
.stats{ display:flex; flex-direction:column; gap:4px; margin-top:6px; text-align:left; width:100%; }
.stat{ display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:900; letter-spacing:1px; color:var(--ink-dim); }
.stat span{ width:30px; flex:none; }
.stat .bar{ flex:1; height:9px; background:rgba(13,8,38,.7); border-radius:99px; overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,.4); }
.stat .fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--dog),var(--good)); }

/* ---------- 6. team select ---------- */
.team-split{ display:flex; gap:24px; width:100%; flex-wrap:wrap; justify-content:center; }
.team-card{
  flex:1; min-width:260px; max-width:440px; text-align:center; padding:32px 28px;
  border-radius:28px; border:5px solid; cursor:pointer;
  box-shadow:0 9px 0 var(--shadow-drop), 0 18px 36px rgba(0,0,0,.3);
  transition:transform .1s, box-shadow .1s;
}
.team-card:hover{ transform:translateY(-5px) scale(1.02); }
.team-card:focus-visible{ outline:4px solid var(--coin); outline-offset:4px; }
.team-card.cats{
  background:radial-gradient(110% 90% at 50% 0%, rgba(255,120,71,.3), transparent 55%),
             linear-gradient(180deg,#54271a,#3a1d3a);
  border-color:var(--cat);
}
.team-card.dogs{
  background:radial-gradient(110% 90% at 50% 0%, rgba(74,168,255,.3), transparent 55%),
             linear-gradient(180deg,#1a3a5a,#1d2a55);
  border-color:var(--dog);
}
.team-card .team-emoji{ font-size:5rem; display:block; filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.team-card h2{ font-size:2rem; }
.team-card ul{ list-style:none; margin-top:12px; color:var(--ink-dim); font-size:1rem; display:flex; flex-direction:column; gap:6px; }

/* ---------- 7. store tabs ---------- */
.tabs{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  background:rgba(13,8,38,.5); border:3px solid var(--panel-edge);
  border-radius:24px; padding:6px;
}
.tab{
  font-family:var(--font); font-weight:900; font-size:.95rem; text-transform:uppercase;
  background:transparent; color:var(--ink-dim); border:3px solid transparent;
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:color .08s, background .08s;
}
.tab:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.tab:focus-visible{ outline:4px solid var(--coin); outline-offset:1px; }
.tab.active{
  background:linear-gradient(180deg,#ffe27a,var(--coin));
  color:#120c2e; box-shadow:0 3px 0 rgba(0,0,0,.35);
}

/* ---------- 8. badge gallery — BIG rectangular cards ---------- */
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; width:100%; padding:4px; }
.badge-card{
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:18px; border:4px solid;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 60%);
  box-shadow:0 6px 0 var(--shadow-drop), 0 10px 20px rgba(0,0,0,.2);
}
.badge-card .badge-emoji{
  font-size:2.6rem; width:70px; height:70px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.1), rgba(13,8,38,.9) 80%);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5);
}
.badge-card h3{ font-size:1.15rem; }
.badge-card p{ font-size:.85rem; color:var(--ink-dim); margin-top:2px; }
.badge-card.locked{
  border-color:#3b2f86; border-style:dashed;
  background:linear-gradient(180deg,var(--panel-lo),#1d1545 60%);
}
.badge-card.locked .badge-emoji{ filter:grayscale(1); opacity:.6; }
.badge-card.locked h3{ color:var(--ink-dim); }

/* ---------- 9. GAME SCREEN ---------- */
#screen-game{ padding:0; overflow:hidden; }
#game-wrap{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; }

/* scoreboard HUD: chips left · score + timer center stage · arena + pause right */
#hud{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:10px 16px; z-index:5; font-weight:900;
  background:linear-gradient(180deg, rgba(28,20,72,.96), rgba(18,12,46,.9));
  border-bottom:3px solid var(--panel-edge);
}
.hud-left{ display:flex; align-items:center; gap:8px; justify-self:start; flex-wrap:wrap; }
.hud-center{ display:flex; align-items:center; gap:14px; justify-content:center; }
.hud-right{ display:flex; align-items:center; gap:8px; justify-self:end; flex-wrap:wrap; }

.hud-score{
  display:flex; align-items:center; gap:12px; font-size:1.7rem;
  background:rgba(13,8,38,.7); border:3px solid var(--panel-edge);
  border-radius:16px; padding:4px 20px;
}
.hud-score .cats{ color:var(--cat); } .hud-score .dogs{ color:var(--dog); }
#hud-timer{
  font-size:2rem; background:rgba(13,8,38,.9); border:3px solid var(--coin); color:var(--coin);
  border-radius:14px; padding:2px 16px; min-width:110px; text-align:center;
  font-variant-numeric:tabular-nums;
}
#hud-timer.urgent{ border-color:var(--danger); color:var(--danger); animation:pulse .5s infinite alternate; }
@keyframes pulse{ to{ transform:scale(1.08); } }
.hud-chip{
  background:rgba(13,8,38,.7); border:3px solid var(--panel-edge); border-radius:999px;
  padding:5px 14px; font-size:.95rem; color:var(--ink-dim); white-space:nowrap;
}
.hud-chip b{ color:var(--ink); }
#hud-powerup{ border-color:var(--good); }
#hud-powerup b{ color:var(--good); }

/* the arena gets a real stage: vignette floor + framed canvas */
#canvas-holder{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0;
  background:
    radial-gradient(900px 520px at 50% 42%, rgba(124,108,255,.14), transparent 70%),
    #0d0826;
}
#game-canvas{
  display:block; max-width:100%; max-height:100%;
  border-radius:14px; border:4px solid var(--panel-edge);
  box-shadow:0 0 0 3px rgba(13,8,38,.9), 0 0 50px rgba(124,108,255,.22), 0 18px 40px rgba(0,0,0,.5);
}

/* boost meter */
#boost-wrap{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:min(320px,60%);
  height:20px; background:rgba(13,8,38,.85); border:3px solid var(--panel-edge);
  border-radius:99px; overflow:hidden; z-index:5;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
}
#boost-fill{ height:100%; width:100%; background:linear-gradient(90deg,#ffd34d,#ff9a3d); transition:width .08s linear; }
#boost-wrap::after{
  content:"BOOST"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:900; letter-spacing:3px; color:rgba(18,12,46,.65);
  pointer-events:none;
}

/* announcer ribbon */
#announcer{
  position:absolute; top:16%; left:50%; transform:translateX(-50%) rotate(-2deg) scale(0);
  font-size:clamp(1.6rem,5vw,3.2rem); pointer-events:none; z-index:8; white-space:nowrap;
  padding:8px 30px; border-radius:18px;
  background:rgba(13,8,38,.85); border:4px solid var(--coin);
  box-shadow:0 0 30px rgba(255,211,77,.3), 0 8px 0 rgba(0,0,0,.35);
  transition:transform .18s cubic-bezier(.2,2,.4,1);
}
#announcer.show{ transform:translateX(-50%) rotate(-2deg) scale(1); }

/* ---------- 10. pause / countdown overlays ---------- */
.overlay{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; background:rgba(13,8,38,.84); z-index:10; text-align:center; padding:20px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.overlay.show{ display:flex; }
.overlay h2.sticker{ font-size:clamp(2.2rem,6vw,3.4rem); }
#countdown-num{
  font-size:clamp(5.5rem,16vw,8rem); color:var(--coin);
  text-shadow:
    4px 4px 0 #120c2e, -4px 4px 0 #120c2e, 4px -4px 0 #120c2e, -4px -4px 0 #120c2e,
    0 10px 0 rgba(0,0,0,.4), 0 0 60px rgba(255,211,77,.45);
}

/* how-to-play overlay */
#overlay-tutorial{
  position:fixed; inset:0; z-index:45; display:none; align-items:center; justify-content:center;
  background:rgba(13,8,38,.84); padding:20px;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
#overlay-tutorial.show{ display:flex; }
.tut-card{
  width:min(560px,100%); display:flex; flex-direction:column; gap:16px; align-items:center;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 55%);
  border:4px solid var(--coin); border-radius:var(--radius); padding:26px 24px;
  box-shadow:0 10px 0 var(--shadow-drop), 0 0 50px rgba(255,211,77,.25);
}
.tut-list{ display:flex; flex-direction:column; gap:10px; width:100%; }
.tut-row{ display:flex; align-items:center; gap:12px; font-size:1rem; text-align:left; }
.tut-key{
  flex:none; min-width:150px; text-align:center; font-weight:900; letter-spacing:1px;
  background:rgba(13,8,38,.7); border:2px solid var(--panel-edge); border-radius:10px;
  padding:7px 10px; color:var(--coin); font-size:.85rem;
}

/* held powerup chip: loud, pulsing, clickable */
#hud-powerup.has-power{
  border-color:var(--coin); cursor:pointer;
  animation:powerPulse .9s infinite alternate;
}
#hud-powerup.has-power b{ color:var(--coin); }
#hud-powerup.has-power::after{ content:" · PRESS E"; color:var(--ink); font-size:.78em; font-weight:900; }
body.touch-on #hud-powerup.has-power::after{ content:" · TAP POWER"; }
@keyframes powerPulse{
  from{ box-shadow:0 0 0 0 rgba(255,211,77,0); }
  to  { box-shadow:0 0 16px 4px rgba(255,211,77,.45); }
}

/* test mode banner (teacher panel toggle) */
#test-banner{
  position:fixed; bottom:10px; left:10px; z-index:50; display:none;
  font-weight:900; font-size:.8rem; letter-spacing:2px; color:#120c2e;
  background:repeating-linear-gradient(45deg,var(--coin) 0 10px,#ffe27a 10px 20px);
  border:3px solid #120c2e; border-radius:10px; padding:6px 12px;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
body.test-mode #test-banner{ display:block; }
body.touch-on #test-banner{ bottom:186px; }   /* clear the joystick zone */

/* badge popup toast */
#badge-popup{
  position:fixed; left:50%; bottom:-200px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; padding:16px 22px; z-index:60;
  border-radius:18px; border:4px solid var(--coin);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 70%);
  box-shadow:0 0 40px rgba(255,211,77,.4), 0 8px 0 var(--shadow-drop);
  transition:bottom .35s cubic-bezier(.2,1.6,.4,1);
  max-width:90vw;
}
#badge-popup.show{ bottom:30px; }
#badge-popup .badge-emoji{ font-size:2.4rem; }
#badge-popup small{ color:var(--coin); font-weight:900; letter-spacing:2px; }
#badge-popup h3{ font-size:1.2rem; }

/* confetti canvas sits over everything */
#fx-canvas{ position:fixed; inset:0; pointer-events:none; z-index:55; }

/* ---------- touch controls ---------- */
#touch-controls{ display:none; position:absolute; inset:0; z-index:6; pointer-events:none; }
body.touch-on #touch-controls{ display:block; }
#joy-zone{
  position:absolute; left:12px; bottom:12px; width:160px; height:160px;
  border-radius:50%; border:3px dashed rgba(255,255,255,.3);
  background:rgba(13,8,38,.25); pointer-events:auto;
  touch-action:none;   /* stop the browser turning joystick drags into scroll gestures */
}
#joy-knob{
  position:absolute; left:50%; top:50%; width:64px; height:64px; border-radius:50%;
  background:rgba(255,211,77,.85); border:4px solid #fff; transform:translate(-50%,-50%);
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.touch-btn{
  position:absolute; width:86px; height:86px; border-radius:50%; pointer-events:auto;
  font-family:var(--font); font-weight:900; font-size:.85rem; color:#120c2e;
  border:4px solid #fff; box-shadow:0 5px 0 rgba(0,0,0,.4); cursor:pointer;
  touch-action:none;
}
.touch-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.4); }
#btn-boost{ right:18px; bottom:110px; background:var(--coin); }
#btn-power{ right:118px; bottom:24px; background:var(--good); }
#btn-pause-touch{ right:18px; top:70px; width:56px; height:56px; background:var(--ink-dim); font-size:1.2rem; }

/* ---------- 11. results ---------- */
#result-title.result-win{ color:var(--coin); }
#result-title.result-lose{ color:var(--dog-hi); }
#result-title.result-draw{ color:var(--ink); }
#result-score{
  font-size:clamp(2.6rem,8vw,4.2rem);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 70%);
  border:4px solid var(--panel-edge); border-radius:24px; padding:10px 36px;
  box-shadow:0 8px 0 var(--shadow-drop), 0 16px 32px rgba(0,0,0,.35);
}
.result-stats{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.result-chip{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 65%);
  border:3px solid var(--panel-edge); border-radius:16px; padding:14px 22px;
  text-align:center; min-width:120px;
  box-shadow:0 5px 0 var(--shadow-drop);
}
.result-chip .num{ font-size:2rem; font-weight:900; color:var(--coin); }
.result-chip .lbl{ font-size:.78rem; font-weight:900; color:var(--ink-dim); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

/* ---------- 12. idea lab, settings & teacher panel ---------- */
.panel-box{
  width:100%; background:linear-gradient(180deg,var(--panel-hi),var(--panel) 55%);
  border:4px solid var(--panel-edge);
  border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 6px 0 var(--shadow-drop);
}
.panel-box.narrow{ max-width:640px; }
.panel-box label{ font-weight:900; font-size:.85rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:1px; }
.panel-box select,.panel-box input,.panel-box textarea{
  font-family:var(--font); font-size:1rem; color:var(--ink);
  background:rgba(13,8,38,.7); border:3px solid var(--panel-edge); border-radius:12px; padding:12px;
}
.panel-box select:focus-visible,.panel-box textarea:focus-visible{ outline:4px solid var(--coin); outline-offset:1px; }
.panel-box textarea{ resize:vertical; min-height:80px; }
.divider{ border:none; border-top:3px dashed var(--panel-edge); opacity:.5; margin:4px 0; }

.idea-list{ width:100%; max-width:640px; display:flex; flex-direction:column; gap:10px; }
.idea-item{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 70%);
  border:3px solid var(--panel-edge); border-radius:14px; padding:12px 16px;
  display:flex; gap:12px; align-items:baseline;
  box-shadow:0 4px 0 var(--shadow-drop);
}
.idea-item .idea-type{
  font-weight:900; color:#120c2e; font-size:.72rem; text-transform:uppercase; flex:none;
  background:var(--coin); border-radius:999px; padding:3px 10px; letter-spacing:1px;
}

/* teacher access stays tucked away in the corner */
#teacher-toggle{
  position:fixed; right:10px; bottom:10px; z-index:50; opacity:.3; font-size:1rem;
  background:transparent; border:none; cursor:pointer; padding:6px;
}
#teacher-toggle:hover, #teacher-toggle:focus-visible{ opacity:1; }

/* ---------- 13. responsive & accessibility ---------- */
.hidden{ display:none !important; }

@media (max-width:900px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .grid-modes{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
  .team-card{ padding:22px 18px; }
}

@media (max-width:640px){
  .screen{ padding:14px; }
  .screen-inner{ gap:14px; }
  .btn.mega{ width:100%; padding:18px 20px; }
  .confirm-btn{ width:100%; }
  .coin-pill.title-coins{ top:10px; right:10px; padding:6px 14px; font-size:1rem; }
  /* HUD collapses to a centered wrap */
  #hud{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px 10px; }
  .hud-left,.hud-right,.hud-center{ justify-content:center; gap:8px; }
  .hud-chip{ font-size:.75rem; padding:4px 10px; }
  .hud-score{ font-size:1.2rem; padding:2px 14px; gap:8px; }
  #hud-timer{ font-size:1.4rem; min-width:84px; }
}

/* shorter classroom screens (e.g. 1366x768 with browser chrome) */
@media (max-height:760px){
  .screen-inner{ gap:12px; }
  .menu-stack{ gap:10px; margin-top:4px; }
  .title-hero::before{ height:280px; }
}

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