/* Wild League: GBA-style look. 1180x820 design stage, scaled to fit the iPad screen. */
@font-face { font-family: 'DotGothic'; src: url('../fonts/dotgothic16-latin-400-normal.woff2') format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  --ink: #383848;
  --txt: #404050;
  --shade: #d0d0c8;
  --box: #f8f8f8;
  --ring: #6880c0;
  --ring2: #a8c0e8;
  --gold: #f8d030;
  --gold-d: #c8a020;
  --good: #48b860;
  --bad: #e84838;
  --blue: #4878c8;
  --muted: #787890;
  --font: 'DotGothic', ui-rounded, system-ui, sans-serif;
  --ui: ui-rounded, -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #202038;
  overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  font-family: var(--font); color: var(--txt); font-synthesis: none;
}
body { position: fixed; inset: 0; }
#stage { position: absolute; left: 50%; top: 50%; width: 1180px; height: 820px; transform-origin: center center; overflow: hidden; background: #202038; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.row.center { justify-content: center; }
.row.between { justify-content: space-between; }
.gap { gap: 14px; }
.gap-lg { gap: 50px; }
.muted { color: var(--muted); font-size: 15px; }
h1, h2, h3 { margin: 0 0 10px; font-weight: 700; letter-spacing: .5px; }
p { margin: 0 0 12px; }
b { font-weight: 700; }
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.flip { transform: scaleX(-1); }
input, select, textarea, button { font-family: inherit; }

/* ---------- the GBA text box frame ---------- */
.panel {
  background: var(--box); border: 4px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 7px var(--ring2), inset 0 0 0 9px var(--ring), 0 5px 0 rgba(0,0,0,.3);
  padding: 18px 22px;
}
.bubble {
  position: relative; background: var(--box); border: 4px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--ring2), 0 4px 0 rgba(0,0,0,.25);
  padding: 14px 20px; font-size: 24px; line-height: 1.3; color: var(--txt); text-shadow: 2px 2px 0 var(--shade);
}
.bubble::before { content: ''; position: absolute; left: -18px; top: 24px; border: 9px solid transparent; border-right: 12px solid var(--ink); }
.bubble.big { font-size: 30px; max-width: 540px; }
.bubble.pop { animation: bpop .25s steps(3); }
@keyframes bpop { 0% { transform: scale(.94); } }

/* ---------- buttons ---------- */
.btn {
  font-weight: 700; font-size: 26px; color: var(--txt); letter-spacing: .5px; text-transform: uppercase;
  border: 4px solid var(--ink); border-radius: 10px; background: var(--box);
  padding: 12px 24px; min-height: 64px; min-width: 64px; cursor: pointer;
  box-shadow: inset 0 -6px 0 #d8d8e0, 0 5px 0 var(--ink); text-shadow: 2px 2px 0 var(--shade);
}
.btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 #d8d8e0, 0 1px 0 var(--ink); }
.btn-go { background: var(--gold); box-shadow: inset 0 -6px 0 var(--gold-d), 0 5px 0 var(--ink); text-shadow: 2px 2px 0 #f8f0a0; }
.btn-go:active { box-shadow: inset 0 -3px 0 var(--gold-d), 0 1px 0 var(--ink); }
.btn-ghost { background: var(--box); }
.btn-red { background: var(--bad); color: #fff; text-shadow: 2px 2px 0 #a02818; box-shadow: inset 0 -6px 0 #b83020, 0 5px 0 var(--ink); }
.btn-big { font-size: 34px; padding: 14px 40px; }
.btn-huge { font-size: 40px; padding: 18px 54px; }
.btn-small { font-size: 20px; padding: 8px 16px; min-height: 60px; }
.btn-tiny { font-size: 16px; padding: 6px 12px; min-height: 44px; border-width: 3px; box-shadow: inset 0 -4px 0 #d8d8e0, 0 3px 0 var(--ink); border-radius: 8px; }
.btn-tiny.btn-go { box-shadow: inset 0 -4px 0 var(--gold-d), 0 3px 0 var(--ink); }
.btn.disabled { opacity: .45; pointer-events: none; }
.pulse { animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
.icon-btn {
  width: 64px; height: 64px; border-radius: 10px; border: 4px solid var(--ink); background: var(--box);
  font-size: 28px; font-weight: 700; box-shadow: inset 0 -5px 0 #d8d8e0, 0 4px 0 var(--ink); color: var(--txt); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; font-family: var(--ui);
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.icon-btn.off { opacity: .45; text-decoration: line-through; }
.icon-btn.speak { width: 52px; height: 52px; font-size: 22px; }

.coin { display: inline-block; width: 24px; height: 24px; background: var(--gold); border: 3px solid #986800; box-shadow: inset -3px -3px 0 var(--gold-d), inset 3px 3px 0 #fff8b0; vertical-align: middle; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.coin-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--box); border: 4px solid var(--ink); border-radius: 10px; padding: 6px 16px 6px 10px; font-size: 28px; font-weight: 700; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--ring2), 0 4px 0 rgba(0,0,0,.3); }

.topbar { position: absolute; top: 12px; left: 20px; right: 20px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 5; }
.topbar-title { flex: 1; text-align: center; font-size: 30px; color: #fff; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { min-width: 64px; display: flex; justify-content: flex-end; }

.progress-dots { display: flex; gap: 8px; justify-content: center; }
.pdot { width: 20px; height: 20px; background: #d8d8e0; border: 3px solid var(--ink); clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.pdot.good { background: var(--good); }
.pdot.miss { background: #f8a090; }
.pdot.now { background: var(--gold); }
.prog-slot { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 4; }

.big-pop {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 30;
  font-size: 92px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; letter-spacing: 2px;
  text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848, -4px 0px 0 #383848, 4px 0px 0 #383848, 0px -4px 0 #383848, 0px 4px 0 #383848, -4px -4px 0 #383848, 4px 4px 0 #383848, -4px 4px 0 #383848, 4px -4px 0 #383848, -5px 0px 0 #383848, 5px 0px 0 #383848, 0px -5px 0 #383848, 0px 5px 0 #383848, -5px -5px 0 #383848, 5px 5px 0 #383848, -5px 5px 0 #383848, 5px -5px 0 #383848, 0 11px 0 #383848;
  animation: bigpop 1.4s steps(14) forwards;
}
.big-pop.gold { color: var(--gold); }
.big-pop.red { color: #f87858; }
@keyframes bigpop { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; } 15% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } 25% { transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%,-70%); opacity: 0; } }
.confetti { position: absolute; top: -20px; width: 12px; height: 12px; z-index: 40; pointer-events: none; animation: fall steps(24) forwards; }
@keyframes fall { to { top: 110%; transform: rotate(360deg) translateX(40px); } }
.toast {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%); z-index: 45;
  background: var(--box); color: var(--txt); font-size: 24px; font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--gold), 0 4px 0 rgba(0,0,0,.3);
  animation: toast 2.6s forwards; white-space: nowrap;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.bob { animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ---------- pixel balls ---------- */
.ball { width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; }
.ball-baseball { background-image: var(--t-baseball); }
.ball-football { background-image: var(--t-football); width: 64px; }
.ball-hockey { background-image: var(--t-puck); }
.ball-soccer { background-image: var(--t-soccer); }

/* ---------- tiled backgrounds ---------- */
.bg { position: absolute; inset: 0; overflow: hidden; image-rendering: pixelated; }
.bg-stadium { background: linear-gradient(#78b8f0 0 90px, #90c8f8 90px 180px, #a8d8f8 180px 250px, transparent 250px), var(--t-grass) 0 0/48px; }
.bg-stadium .crowd { position: absolute; left: 0; right: 0; top: 250px; height: 110px; background: var(--t-crowd) 0 0/48px 24px; border-top: 8px solid #585880; border-bottom: 8px solid #f8f8f8; box-shadow: 0 8px 0 var(--ink); }
.bg-stadium .field { position: absolute; left: 0; right: 0; top: 376px; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 96px, rgba(0,60,0,.1) 96px 192px); }
.bg-camp { background: linear-gradient(#f8b878 0 120px, #f8d098 120px 240px, #f8e0b0 240px 330px, transparent 330px), var(--t-grass) 0 0/48px; }
.bg-locker { background: var(--t-wood) 0 0/48px; }
.bg-locker .lockers { position: absolute; inset: 0 0 26% 0; background:
  linear-gradient(90deg, transparent 0 8px, rgba(40,48,96,.55) 8px 12px, transparent 12px) 0 0/120px 100%,
  var(--t-wall) 0 0/48px; border-bottom: 10px solid #485890; box-shadow: 0 6px 0 var(--ink); }
.team-banner { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); padding: 6px 40px; font-size: 30px; font-weight: 700; border: 4px solid var(--ink); z-index: 1; }
.bg-weigh { background: var(--t-gym) 0 0/48px; }
.bg-weigh::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px; background: var(--t-wall) 0 0/48px; border-bottom: 6px solid var(--ink); }
.bg-office { background: #e8ecf4; }

/* ---------- title ---------- */
.title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.logo { display: flex; gap: 34px; font-size: 150px; line-height: 1; letter-spacing: 4px; color: var(--gold); }
.logo-1 { text-shadow: -1px 0px 0 #f8d030, 1px 0px 0 #f8d030, 0px -1px 0 #f8d030, 0px 1px 0 #f8d030, -1px -1px 0 #f8d030, 1px 1px 0 #f8d030, -1px 1px 0 #f8d030, 1px -1px 0 #f8d030, -2px 0px 0 #f8d030, 2px 0px 0 #f8d030, 0px -2px 0 #f8d030, 0px 2px 0 #f8d030, -2px -2px 0 #f8d030, 2px 2px 0 #f8d030, -2px 2px 0 #f8d030, 2px -2px 0 #f8d030, -3px 0px 0 #f8d030, 3px 0px 0 #f8d030, 0px -3px 0 #f8d030, 0px 3px 0 #f8d030, -3px -3px 0 #f8d030, 3px 3px 0 #f8d030, -3px 3px 0 #f8d030, 3px -3px 0 #f8d030, -4px 0px 0 #3060b8, 4px 0px 0 #3060b8, 0px -4px 0 #3060b8, 0px 4px 0 #3060b8, -4px -4px 0 #3060b8, 4px 4px 0 #3060b8, -4px 4px 0 #3060b8, 4px -4px 0 #3060b8, -5px 0px 0 #3060b8, 5px 0px 0 #3060b8, 0px -5px 0 #3060b8, 0px 5px 0 #3060b8, -5px -5px 0 #3060b8, 5px 5px 0 #3060b8, -5px 5px 0 #3060b8, 5px -5px 0 #3060b8, -6px 0px 0 #3060b8, 6px 0px 0 #3060b8, 0px -6px 0 #3060b8, 0px 6px 0 #3060b8, -6px -6px 0 #3060b8, 6px 6px 0 #3060b8, -6px 6px 0 #3060b8, 6px -6px 0 #3060b8, -7px 0px 0 #3060b8, 7px 0px 0 #3060b8, 0px -7px 0 #3060b8, 0px 7px 0 #3060b8, -7px -7px 0 #3060b8, 7px 7px 0 #3060b8, -7px 7px 0 #3060b8, 7px -7px 0 #3060b8, -8px 0px 0 #3060b8, 8px 0px 0 #3060b8, 0px -8px 0 #3060b8, 0px 8px 0 #3060b8, -8px -8px 0 #3060b8, 8px 8px 0 #3060b8, -8px 8px 0 #3060b8, 8px -8px 0 #3060b8, 0 14px 0 #203878; }
.logo-2 { color: #f8f8f8; text-shadow: -1px 0px 0 #f8f8f8, 1px 0px 0 #f8f8f8, 0px -1px 0 #f8f8f8, 0px 1px 0 #f8f8f8, -1px -1px 0 #f8f8f8, 1px 1px 0 #f8f8f8, -1px 1px 0 #f8f8f8, 1px -1px 0 #f8f8f8, -2px 0px 0 #f8f8f8, 2px 0px 0 #f8f8f8, 0px -2px 0 #f8f8f8, 0px 2px 0 #f8f8f8, -2px -2px 0 #f8f8f8, 2px 2px 0 #f8f8f8, -2px 2px 0 #f8f8f8, 2px -2px 0 #f8f8f8, -3px 0px 0 #f8f8f8, 3px 0px 0 #f8f8f8, 0px -3px 0 #f8f8f8, 0px 3px 0 #f8f8f8, -3px -3px 0 #f8f8f8, 3px 3px 0 #f8f8f8, -3px 3px 0 #f8f8f8, 3px -3px 0 #f8f8f8, -4px 0px 0 #3060b8, 4px 0px 0 #3060b8, 0px -4px 0 #3060b8, 0px 4px 0 #3060b8, -4px -4px 0 #3060b8, 4px 4px 0 #3060b8, -4px 4px 0 #3060b8, 4px -4px 0 #3060b8, -5px 0px 0 #3060b8, 5px 0px 0 #3060b8, 0px -5px 0 #3060b8, 0px 5px 0 #3060b8, -5px -5px 0 #3060b8, 5px 5px 0 #3060b8, -5px 5px 0 #3060b8, 5px -5px 0 #3060b8, -6px 0px 0 #3060b8, 6px 0px 0 #3060b8, 0px -6px 0 #3060b8, 0px 6px 0 #3060b8, -6px -6px 0 #3060b8, 6px 6px 0 #3060b8, -6px 6px 0 #3060b8, 6px -6px 0 #3060b8, -7px 0px 0 #3060b8, 7px 0px 0 #3060b8, 0px -7px 0 #3060b8, 0px 7px 0 #3060b8, -7px -7px 0 #3060b8, 7px 7px 0 #3060b8, -7px 7px 0 #3060b8, 7px -7px 0 #3060b8, -8px 0px 0 #3060b8, 8px 0px 0 #3060b8, 0px -8px 0 #3060b8, 0px 8px 0 #3060b8, -8px -8px 0 #3060b8, 8px 8px 0 #3060b8, -8px 8px 0 #3060b8, 8px -8px 0 #3060b8, 0 14px 0 #203878; }
.logo-sub { font-size: 30px; color: #fff; background: var(--ink); border: 4px solid #f8f8f8; border-radius: 8px; padding: 6px 24px; margin: 26px 0 6px; }
.title-cats { display: flex; align-items: flex-end; gap: 14px; margin: 26px 0 30px; }
.vs-tag { font-size: 44px; font-weight: 700; color: #f87858; text-shadow: 3px 3px 0 var(--ink); margin: 0 10px 50px; }

/* ---------- camp ---------- */
.camp-body { position: absolute; inset: 26px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.camp-head { text-align: center; }
.camp-head h1 { font-size: 56px; color: #fff; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848, -4px 0px 0 #383848, 4px 0px 0 #383848, 0px -4px 0 #383848, 0px 4px 0 #383848, -4px -4px 0 #383848, 4px 4px 0 #383848, -4px 4px 0 #383848, 4px -4px 0 #383848, 0 8px 0 #383848; }
.camp-step { display: inline-block; background: var(--ink); color: #fff; padding: 4px 16px; border-radius: 6px; font-weight: 700; margin-bottom: 8px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 250px); gap: 18px; }
.cat-grid.small { grid-template-columns: repeat(3, 190px); gap: 14px; margin: 10px 0 18px; }
.cat-pick { display: flex; flex-direction: column; align-items: center; padding: 12px; cursor: pointer; }
.cat-pick.sel { background: #fff4b8; box-shadow: inset 0 0 0 3px #fff4b8, inset 0 0 0 7px var(--gold), inset 0 0 0 9px var(--gold-d), 0 5px 0 rgba(0,0,0,.3); }
.cat-name { font-size: 26px; font-weight: 700; margin-top: 6px; text-shadow: 2px 2px 0 var(--shade); }
.camp-nav { position: absolute; bottom: 0; display: flex; gap: 20px; }
.name-preview { font-size: 64px; color: #fff; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848, -4px 0px 0 #383848, 4px 0px 0 #383848, 0px -4px 0 #383848, 0px 4px 0 #383848, -4px -4px 0 #383848, 4px 4px 0 #383848, -4px 4px 0 #383848, 4px -4px 0 #383848, 0 8px 0 #383848; max-width: 760px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: center; justify-content: center; background: var(--box); border: 3px solid var(--ink); border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 22px; min-width: 40px; color: var(--txt); }
.chips.big { max-width: 900px; }
.chips.big .chip { font-size: 26px; padding: 8px 18px; min-height: 60px; cursor: pointer; box-shadow: inset 0 -4px 0 #d8d8e0, 0 3px 0 var(--ink); }
.chip.hi { background: var(--gold); }
.chip.shared { background: #c8dcf8; }
.name-input { font-size: 28px; font-weight: 700; padding: 12px 18px; border: 4px solid var(--ink); border-radius: 10px; width: 440px; text-align: center; -webkit-user-select: text; user-select: text; color: var(--txt); }
.jersey-grid { display: grid; grid-template-columns: repeat(4, 96px); gap: 16px; }
.jersey-sw { width: 96px; height: 96px; border-radius: 10px; border: 4px solid var(--ink); cursor: pointer; box-shadow: 0 5px 0 var(--ink); }
.jersey-sw.sel { outline: 6px solid #fff; transform: translateY(-4px); }
.coach-intro { display: flex; align-items: center; gap: 36px; margin-top: 30px; }

/* ---------- locker room ---------- */
.locker-top { position: absolute; top: 16px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.team-badge { display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 12px; }
.team-name { font-size: 30px; font-weight: 700; text-shadow: 2px 2px 0 var(--shade); }
.team-sub { font-size: 18px; color: var(--muted); }
.locker-main { position: absolute; top: 118px; left: 30px; right: 30px; display: flex; gap: 24px; z-index: 2; }
.plan { flex: 1; padding: 20px 28px 24px; }
.plan-head { display: flex; align-items: center; gap: 24px; margin-bottom: 10px; }
.plan h2 { font-size: 36px; text-shadow: 2px 2px 0 var(--shade); }
.plan-list { font-size: 26px; margin: 0 0 20px; padding-left: 34px; line-height: 1.55; text-shadow: 2px 2px 0 var(--shade); }
.plan-btns { justify-content: space-between; }
.side-col { width: 330px; display: flex; flex-direction: column; gap: 14px; }
.week { padding: 14px 16px; text-align: center; }
.week-title { font-weight: 700; font-size: 18px; }
.week-dots { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.badge-slot { width: 40px; height: 40px; background: #d8d8e0; border: 3px solid #a8a8b8; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.badge-slot.on.b0 { background: #f85858; } .badge-slot.on.b1 { background: #58a0f8; } .badge-slot.on.b2 { background: #58c870; } .badge-slot.on.b3 { background: var(--gold); }
.badge-slot.on { border-color: var(--ink); box-shadow: inset 4px 4px 0 rgba(255,255,255,.6), inset -4px -4px 0 rgba(0,0,0,.2); }
.start-menu { padding: 16px 12px; display: flex; flex-direction: column; }
.menu-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: none; border: none; font-size: 28px; font-weight: 700; color: var(--txt); cursor: pointer; text-align: left; min-height: 60px; text-shadow: 2px 2px 0 var(--shade); letter-spacing: .5px; }
.menu-btn .cur, .menu-opt .cur { color: var(--bad); visibility: hidden; font-family: var(--ui); font-size: .8em; }
.menu-btn:active .cur, .menu-btn:hover .cur, .menu-opt:active .cur, .menu-opt:hover .cur, .menu-opt.right .cur { visibility: visible; }
.menu-btn:active { background: #eef0f8; border-radius: 6px; }
.new-tag { background: var(--bad); color: #fff; font-size: 16px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 8px; text-shadow: none; animation: pulse 1s steps(2) infinite; }
.locker-floor { position: absolute; left: 60px; right: 40px; bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; z-index: 1; }
.rival-peek { transform: scaleX(-1); }

/* ---------- training board ---------- */
.board-list { position: absolute; top: 96px; left: 40px; right: 40px; bottom: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; z-index: 2; padding: 4px 4px 20px; }
.skill-row { display: flex; align-items: center; gap: 18px; padding: 14px 20px; }
.skill-row.locked { background: #e0e0e8; box-shadow: inset 0 0 0 3px #e0e0e8, inset 0 0 0 7px #c8c8d8, 0 5px 0 rgba(0,0,0,.3); }
.skill-lock { font-size: 34px; width: 120px; text-align: center; font-family: var(--ui); }
.skill-info { flex: 1; }
.skill-name { font-size: 27px; font-weight: 700; text-shadow: 2px 2px 0 var(--shade); }
.skill-sub { font-size: 18px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stars span { color: #c8c8d8; font-size: 20px; font-family: var(--ui); } .stars span.on { color: #e8a800; }
.lvl-badge { display: inline-block; width: 120px; text-align: center; padding: 6px 0; border-radius: 6px; font-weight: 700; font-size: 19px; border: 3px solid var(--ink); background: #fff; text-transform: uppercase; }
.lvl-new { background: #b8d8f8; } .lvl-learning { background: #f8e088; } .lvl-solid { background: #98e0a8; } .lvl-mastered { background: var(--gold); } .lvl-locked { background: #d8d8e0; }
.board-note { color: #fff; font-size: 21px; text-align: center; padding: 8px; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848; }

/* ---------- number pad ---------- */
.numpad { display: flex; flex-direction: column; gap: 10px; width: 290px; }
.numpad.locked { opacity: .6; pointer-events: none; }
.np-display { height: 76px; background: var(--box); border: 4px solid var(--ink); border-radius: 10px; font-size: 50px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--ring2); }
.np-prefix { color: var(--muted); margin-right: 6px; }
.np-ph { color: #c8c8d8; }
.np-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-key { height: 70px; border: 4px solid var(--ink); border-radius: 10px; background: var(--box); font-size: 36px; font-weight: 700; color: var(--txt); box-shadow: inset 0 -5px 0 #d8d8e0, 0 4px 0 var(--ink); cursor: pointer; }
.np-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.np-key.ok { background: var(--good); color: #fff; box-shadow: inset 0 -5px 0 #308848, 0 4px 0 var(--ink); font-family: var(--ui); }
.np-key.del { background: #e0e4f0; font-family: var(--ui); }
.shake { animation: shake .4s steps(4); }
@keyframes shake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* ---------- overlays / hints ---------- */
.overlay { position: absolute; inset: 0; z-index: 50; background: rgba(32, 32, 56, .55); display: flex; align-items: center; justify-content: center; }
.overlay-box { padding: 28px 34px; max-width: 900px; max-height: 760px; overflow-y: auto; animation: bpop .2s steps(2); }
.hint { display: flex; flex-direction: column; gap: 10px; min-width: 540px; }
.hint-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hint-title { font-size: 48px; font-weight: 700; text-shadow: 3px 3px 0 var(--shade); }
.hint-text { font-size: 28px; line-height: 1.35; margin: 0; text-shadow: 2px 2px 0 var(--shade); }
.hint-tip { font-size: 24px; background: #fff4b8; border: 3px solid var(--gold-d); border-radius: 8px; padding: 10px 14px; margin: 0; }
.hint-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.confirm { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; max-width: 640px; font-size: 26px; text-shadow: 2px 2px 0 var(--shade); }
.confirm h2 { font-size: 34px; }

.vis { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.vis-label { font-size: 22px; color: var(--muted); }
.vis-note { font-size: 24px; }
.dot-grid { display: grid; gap: 4px; }
.dot { background: var(--blue); display: block; border: 2px solid #283878; }
.dot.alt { background: #f88838; border-color: #a04808; }
.list-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-name { font-weight: 700; font-size: 22px; width: 160px; }
.steps { align-items: flex-start; background: var(--box); border: 4px solid var(--ink); border-radius: 10px; padding: 10px 20px; }
.step-line { font-size: 34px; font-weight: 700; color: var(--muted); }
.step-line.last { color: var(--good); }

/* ---------- ask panel (warm-up / test-out) ---------- */
.ask { display: flex; align-items: center; justify-content: center; gap: 40px; }
.ask-q { display: flex; align-items: center; gap: 16px; }
.ask-text { font-size: 92px; font-weight: 700; white-space: nowrap; text-shadow: 4px 4px 0 var(--shade); }
.ask-text.small { font-size: 48px; white-space: normal; max-width: 460px; }
.ask-choices { display: grid; grid-template-columns: repeat(2, 170px); gap: 16px; }
.choice { height: 104px; border: 4px solid var(--ink); border-radius: 10px; background: var(--box); font-size: 50px; font-weight: 700; color: var(--txt); box-shadow: inset 0 -6px 0 #d8d8e0, 0 5px 0 var(--ink); cursor: pointer; }
.choice:active { transform: translateY(3px); }
.choice.right, .menu-opt.right { background: #98e0a8; }
.choice.wrong, .menu-opt.wrong { background: #f8a090; }
.quiz-coach { position: absolute; top: 96px; left: 40px; right: 40px; display: flex; align-items: center; gap: 26px; z-index: 2; }
.quiz-slot { position: absolute; top: 290px; left: 40px; right: 40px; bottom: 60px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.quiz-slot > .ask { background: var(--box); border: 4px solid var(--ink); border-radius: 12px; padding: 26px 40px; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 7px var(--ring2), inset 0 0 0 9px var(--ring), 0 5px 0 rgba(0,0,0,.3); }
.result { padding: 22px 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 24px; max-height: 100%; }
.result .res-row { display: flex; align-items: center; gap: 30px; text-align: left; }
.result .res-text { max-width: 560px; }

/* ---------- GBA battle layout (matches + batting cage) ---------- */
.battle { position: absolute; inset: 0; overflow: hidden; image-rendering: pixelated; }
.b-sky { position: absolute; left: 0; right: 0; top: 0; height: 230px; background: linear-gradient(#78b8f0 0 70px, #90c8f8 70px 140px, #a8d8f8 140px); }
.cloud { position: absolute; width: 144px; height: 36px; background: var(--t-cloud) 0 0/144px 36px no-repeat; animation: drift 40s linear infinite; }
.cloud.c1 { top: 30px; left: 10%; } .cloud.c2 { top: 80px; left: 60%; animation-duration: 60s; width: 96px; height: 24px; background-size: 96px 24px; }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(1300px); } }
.b-crowd { position: absolute; left: 0; right: 0; top: 150px; height: 80px; background: var(--t-crowd) 0 0/48px 24px; border-top: 6px solid #585880; border-bottom: 6px solid #f8f8f8; box-shadow: 0 6px 0 var(--ink); }
.b-field { position: absolute; left: 0; right: 0; top: 242px; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 96px, rgba(0,60,0,.08) 96px 192px), var(--t-grass) 0 0/48px; }
.field-football .b-field { background: repeating-linear-gradient(90deg, transparent 0 150px, rgba(255,255,255,.9) 150px 156px), var(--t-grass) 0 0/48px; }
.field-baseball .b-field::after { content: ''; position: absolute; left: 14%; right: 14%; top: 36%; height: 120%; background: var(--t-dirt) 0 0/48px; border-radius: 50%; border: 6px solid #c89858; }
.field-hockey .b-field { background: linear-gradient(90deg, transparent 49.5%, #e85050 49.5%, #e85050 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 28%, #5078d0 28%, #5078d0 29%, transparent 29%, transparent 71%, #5078d0 71%, #5078d0 72%, transparent 72%), var(--t-ice) 0 0/48px; }
.field-hockey .b-crowd { border-bottom-color: #e8f0f8; }
.field-cage .b-crowd { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.35) 14px 17px), repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.35) 14px 17px), #3a7a48; }
.field-cage .b-field { background: var(--t-dirt) 0 0/48px; }
.battle.lights .b-sky { background: linear-gradient(#182050 0 70px, #203068 70px 140px, #304080 140px); }
.battle.lights .b-sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff 1.5px, transparent 2px) 0 0/60px 40px; opacity: .7; }
.plat { position: absolute; border-radius: 50%; background: #98d880; box-shadow: inset 0 -10px 0 #78b860, 0 0 0 5px #508840; }
.plat-foe { left: 700px; top: 300px; width: 360px; height: 72px; }
.plat-me { left: 50px; top: 452px; width: 440px; height: 86px; }
.field-cage .plat, .field-baseball .plat { background: #e8c890; box-shadow: inset 0 -10px 0 #d0a868, 0 0 0 5px #a07840; }
.field-hockey .plat { background: #f0f8ff; box-shadow: inset 0 -10px 0 #c8e0f0, 0 0 0 5px #88a8c8; }
.b-foe, .b-me { position: absolute; width: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 2; }
.b-foe { left: 880px; bottom: 484px; }
.b-me { left: 270px; bottom: 322px; }
.b-foe > .sprite, .b-me > .sprite { flex: none; }
.b-foe.attack, .b-me.attack { animation: lunge .45s steps(3); }
@keyframes lunge { 50% { transform: translate(30px, -16px); } }
.b-foe.attack { animation-name: lungeback; }
@keyframes lungeback { 50% { transform: translate(-30px, 16px); } }
.b-foe.hit, .b-me.hit { animation: blink .6s steps(1) 1; }
@keyframes blink { 0%, 34%, 68% { opacity: 0; } 17%, 51%, 85% { opacity: 1; } }
.b-foe.faint { animation: faint .8s steps(6) forwards; }
@keyframes faint { to { transform: translateY(80px); opacity: 0; } }
.b-foe.windup { animation: windup .5s steps(3); }
@keyframes windup { 40% { transform: translateY(-10px) rotate(-6deg); } }

.info { position: absolute; width: 430px; padding: 12px 20px 10px; z-index: 3;
  background: #f8f8e0; border: 4px solid var(--ink); border-radius: 18px 6px 18px 6px;
  box-shadow: inset 0 0 0 3px #f8f8e0, inset 0 0 0 6px #c8c8a0, 0 5px 0 rgba(0,0,0,.3); }
.info-foe { left: 40px; top: 36px; }
.info-me { right: 40px; top: 346px; }
.battle.deluxe .info { background: #fff4b8; box-shadow: inset 0 0 0 3px #fff4b8, inset 0 0 0 6px var(--gold), 0 5px 0 rgba(0,0,0,.3); }
.info-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.info-name { font-size: 26px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 2px 2px 0 var(--shade); }
.info-num { font-size: 40px; font-weight: 700; text-shadow: 2px 2px 0 var(--shade); }
.info-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.info-label { background: #505068; color: var(--gold); font-weight: 700; font-size: 15px; padding: 1px 6px; border-radius: 4px; }
.bar { flex: 1; height: 16px; background: #506070; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: #58d080; box-shadow: inset 0 -4px 0 #38a860; transition: width .6s steps(8); }
.field-cage .info-foe .bar-fill.yellow { background: var(--gold); box-shadow: inset 0 -4px 0 var(--gold-d); }
.field-cage .info-foe .bar-fill.red { background: #f86050; box-shadow: inset 0 -4px 0 #c83828; }
.info-sub { font-size: 18px; color: var(--muted); margin-top: 4px; min-height: 22px; }
.b-quit { position: absolute; right: 20px; top: 20px; z-index: 4; }

.b-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 276px; z-index: 5; padding: 12px; display: flex; gap: 12px;
  background: #485878; border-top: 6px solid var(--ink); box-shadow: inset 0 6px 0 #6878a0; }
.b-dialog { flex: 1; position: relative; background: var(--box); border: 4px solid var(--ink); border-radius: 12px; padding: 18px 28px;
  box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 7px #e0a050, inset 0 0 0 9px #b86828; display: flex; align-items: center; }
.d-text { font-size: 36px; line-height: 1.35; color: var(--txt); text-shadow: 3px 3px 0 var(--shade); white-space: pre-wrap; }
.d-text.big { font-size: 46px; font-weight: 700; }
.d-text.q { width: 100%; }
.q-row { display: flex; align-items: center; gap: 18px; }
.q-text { font-size: 92px; font-weight: 700; white-space: nowrap; text-shadow: 4px 4px 0 var(--shade); }
.q-text.small { font-size: 46px; white-space: normal; }
.b-menu { display: none; }
.battle.has-menu .b-menu { display: grid; width: 470px; background: var(--box); border: 4px solid var(--ink); border-radius: 12px; padding: 14px;
  box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 7px var(--ring2), inset 0 0 0 9px var(--ring); }
.b-menu.grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.b-menu.pad { display: flex; align-items: center; justify-content: center; padding: 8px; }
.menu-opt { display: flex; align-items: center; gap: 6px; padding: 0 16px; background: #eef0f8; border: 3px solid #c8d0e8; border-radius: 8px; font-size: 54px; font-weight: 700; color: var(--txt); cursor: pointer; text-shadow: 3px 3px 0 var(--shade); min-height: 100px; }
.menu-opt:active { background: #fff4b8; border-color: var(--gold-d); }
.b-menu.pad .numpad { width: 420px; flex-direction: row; gap: 10px; align-items: stretch; }
.b-menu.pad .np-display { width: 130px; height: auto; font-size: 34px; flex-direction: column; flex: none; }
.b-menu.pad .np-keys { flex: 1; gap: 6px; }
.b-menu.pad .np-key { height: 50px; font-size: 28px; }
.b-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.b-fx .ball { position: absolute; }
.shot-me { animation: shotme 1s steps(12) forwards; }
@keyframes shotme { 0% { left: 330px; top: 360px; } 50% { left: 600px; top: 110px; } 100% { left: 860px; top: 250px; opacity: 0; } }
.shot-foe { animation: shotfoe 1s steps(12) forwards; }
@keyframes shotfoe { 0% { left: 860px; top: 250px; } 50% { left: 560px; top: 140px; } 100% { left: 280px; top: 380px; opacity: 0; } }
.pitch-hit { animation: pitchhit 1.3s steps(16) forwards; }
@keyframes pitchhit { 0% { left: 840px; top: 250px; } 30% { left: 360px; top: 380px; } 100% { left: 1100px; top: -60px; } }
.pitch-miss { animation: pitchmiss .9s steps(10) forwards; }
@keyframes pitchmiss { 0% { left: 840px; top: 250px; } 100% { left: 60px; top: 470px; } }
.pitch-clock { position: absolute; left: 28px; right: 28px; bottom: 16px; height: 16px; border: 3px solid var(--ink); border-radius: 8px; background: #506070; overflow: hidden; display: none; }
.pitch-clock.on { display: block; }
.pc-fill { height: 100%; background: var(--gold); transition: width .1s linear; }

/* ---------- weigh-in ---------- */
.wi-left { position: absolute; top: 84px; left: 20px; width: 790px; bottom: 10px; display: flex; flex-direction: column; align-items: center; }
.eq-lines { padding: 10px 28px; min-width: 460px; display: flex; flex-direction: column; align-items: center; position: relative; min-height: 90px; justify-content: center; }
.eq-lines .speak { position: absolute; right: -70px; top: 14px; }
.eq-line { font-size: 58px; font-weight: 700; white-space: nowrap; line-height: 1.1; text-shadow: 3px 3px 0 var(--shade); }
.eq-line.old { font-size: 28px; color: var(--muted); text-shadow: none; }
.screen-weighin .topbar-title { font-size: 26px; }
.wi-right { position: absolute; top: 84px; right: 20px; width: 340px; bottom: 50px; display: flex; flex-direction: column; gap: 16px; }
.coach-row { display: flex; align-items: flex-start; gap: 20px; }
.coach-row .bubble { font-size: 21px; }
.pad-slot { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.lineman { margin-bottom: 20px; }
.lineman.cheer { animation: bob .3s steps(2) 4; }
.screen-weighin .prog-slot { bottom: 12px; left: auto; right: 30px; transform: none; }
.screen-weighin .pdot { width: 18px; height: 18px; }

.scale { position: relative; width: 760px; height: 400px; flex: none; transition: opacity .3s; }
.scale.faded { opacity: .22; }
.scale.wobble { animation: wobble .6s steps(4); }
@keyframes wobble { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
.scale .post { position: absolute; left: 50%; top: 66px; bottom: 28px; width: 24px; margin-left: -12px; background: linear-gradient(90deg, #8890a8 0 30%, #d8e0f0 30% 55%, #a8b0c8 55%); border: 4px solid var(--ink); }
.scale .base { position: absolute; left: 50%; bottom: 6px; width: 220px; height: 32px; margin-left: -110px; background: #6870a0; box-shadow: inset 0 6px 0 #8890c0; border: 4px solid var(--ink); border-radius: 8px 8px 4px 4px; }
.beam-wrap { position: absolute; top: 58px; left: 50%; width: 400px; height: 22px; transform: translateX(-50%) rotate(0deg); transition: transform .5s steps(6); z-index: 2; }
.beam { position: absolute; inset: 0; background: var(--gold); box-shadow: inset 0 5px 0 #f8f0a0, inset 0 -5px 0 var(--gold-d); border: 4px solid var(--ink); border-radius: 6px; }
.pivot { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--box); border: 4px solid var(--ink); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pan { position: absolute; top: 68px; width: 300px; height: 320px; margin-left: -150px; transition: transform .5s steps(6); z-index: 3; }
.pan-left { left: 180px; } .pan-right { left: 580px; }
.pan .chains { position: absolute; left: 50%; top: 0; bottom: 60px; width: 4px; margin-left: -2px; background: var(--ink); z-index: 0; }
.pan .plate { position: absolute; bottom: 38px; left: 6px; right: 6px; height: 24px; background: #d8e0f0; box-shadow: inset 0 -6px 0 #98a0c0; border: 4px solid var(--ink); border-radius: 4px 4px 150px 150px / 4px 4px 24px 24px; z-index: 1; }
.pan-stack { position: absolute; left: 0; right: 0; bottom: 60px; height: 240px; display: flex; align-items: flex-end; justify-content: center; z-index: 2; }
.pan-stack.swap-out { animation: swapout .26s steps(3) forwards; }
.pan-stack.swap-in { animation: swapin .3s steps(3); }
@keyframes swapout { to { opacity: 0; transform: translateY(-30px); } }
@keyframes swapin { from { opacity: 0; transform: translateY(-40px); } }
.pan-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 32px; color: #fff; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848; }
.pan.drop-hot .plate { background: var(--gold); box-shadow: 0 0 0 8px rgba(248,208,48,.6); }
.tokens { display: flex; align-items: flex-end; justify-content: center; gap: 10px; max-width: 290px; }
.box-col { display: flex; flex-direction: column; align-items: center; }
.tok-boxes { display: flex; flex-wrap: wrap-reverse; gap: 5px; justify-content: center; max-width: 170px; }
.xbox { width: 64px; height: 64px; background: #d08848; box-shadow: inset 5px 5px 0 #e8a868, inset -5px -5px 0 #a06030; border: 4px solid var(--ink); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; text-shadow: 3px 3px 0 var(--ink); position: relative; }
.tok-boxes.many .xbox { width: 42px; height: 42px; font-size: 26px; }
.xbox.open { background: var(--good); box-shadow: inset 5px 5px 0 #78d890, inset -5px -5px 0 #308848; }
.xbox.frac { width: 110px; padding: 0; gap: 0; background: transparent; box-shadow: none; }
.slice { flex: 1; height: 100%; border-right: 3px dashed var(--ink); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.slice:last-child { border-right: none; }
.slice.on { background: #d08848; box-shadow: inset 4px 4px 0 #e8a868; }
.frac-label { font-size: 20px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.balloons { display: flex; gap: 2px; margin-bottom: 2px; flex-wrap: wrap; justify-content: center; max-width: 150px; }
.balloon { width: 30px; height: 36px; border-radius: 50% 50% 46% 46%; background: #f85858; box-shadow: inset 5px 5px 0 #f8a8a0; border: 3px solid var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative; animation: float 1.2s steps(2) infinite; animation-delay: calc(var(--i) * .15s); }
.balloon::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 10px; background: var(--ink); }
.balloon.big { width: 60px; height: 70px; font-size: 24px; }
@keyframes float { 50% { transform: translateY(-5px); } }
.tok-ones { display: flex; flex-wrap: wrap-reverse; gap: 3px; justify-content: center; max-width: 150px; align-items: flex-end; }
.one { width: 24px; height: 24px; background: var(--gold); box-shadow: inset 3px 3px 0 #f8f0a0, inset -3px -3px 0 var(--gold-d); border: 3px solid var(--ink); }
.ten { display: flex; border: 3px solid var(--ink); background: var(--gold); }
.ten i { width: 12px; height: 22px; border-right: 2px solid var(--gold-d); background: var(--gold); box-shadow: inset 0 3px 0 #f8f0a0; }
.ten i:last-child { border-right: none; }
.hund { width: 72px; height: 72px; border: 3px solid var(--ink); background: repeating-linear-gradient(0deg, var(--gold) 0 6px, var(--gold-d) 6px 7px); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: var(--ink); }
.scale.compact { width: 440px; height: 270px; }
.scale.compact .beam-wrap { width: 240px; top: 40px; }
.scale.compact .post { top: 46px; }
.scale.compact .base { width: 160px; margin-left: -80px; }
.scale.compact .pan { width: 200px; margin-left: -100px; top: 48px; height: 214px; }
.scale.compact .pan-left { left: 100px; } .scale.compact .pan-right { left: 340px; }
.scale.compact .pan-stack { height: 140px; }
.scale.compact .pan-label { font-size: 22px; }

.move-cards { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.cards-label { color: #fff; font-size: 20px; width: 150px; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848; }
.move-card { width: 150px; height: 112px; background: var(--box); border: 4px solid var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--ring2), 0 6px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; cursor: grab; position: relative; z-index: 10; transition: opacity .2s; }
.move-card.lift { box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--gold), 0 14px 0 rgba(0,0,0,.35); z-index: 20; transition: none; }
.move-card.used { opacity: .35; pointer-events: none; }
.move-card.nope { background: #f8c8c0; animation: shake .4s steps(4); }
.move-card.good { background: #b8f0c8; opacity: .6; }
.mc-op { font-size: 54px; font-weight: 700; line-height: 1; text-shadow: 3px 3px 0 var(--shade); }
.mc-sub { font-size: 16px; color: var(--muted); margin-top: 4px; }

/* ---------- lesson ---------- */
.lesson-head { position: absolute; top: 20px; left: 40px; display: flex; align-items: center; gap: 22px; z-index: 2; }
.lesson-head h1 { font-size: 50px; color: #fff; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848, -4px 0px 0 #383848, 4px 0px 0 #383848, 0px -4px 0 #383848, 0px 4px 0 #383848, -4px -4px 0 #383848, 4px 4px 0 #383848, -4px 4px 0 #383848, 4px -4px 0 #383848, 0 7px 0 #383848; }
.lesson-kicker { display: inline-block; background: var(--bad); color: #fff; font-weight: 700; padding: 3px 12px; border-radius: 4px; border: 3px solid var(--ink); }
.lesson-card { position: absolute; top: 190px; left: 90px; right: 90px; bottom: 40px; padding: 26px 36px; display: flex; flex-direction: column; z-index: 2; }
.lesson-card h2 { font-size: 42px; text-shadow: 3px 3px 0 var(--shade); }
.lesson-text { font-size: 30px; line-height: 1.35; text-shadow: 2px 2px 0 var(--shade); }
.lesson-vis { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--t-gym) 0 0/48px; border-radius: 8px; border: 4px solid var(--ink); margin-bottom: 14px; }
.lesson-vis .vis { background: var(--box); border: 4px solid var(--ink); border-radius: 10px; padding: 14px 20px; }
.lesson-vis .steps { padding: 10px 24px; }

/* ---------- post-game ---------- */
.post { position: absolute; inset: 26px 30px; display: flex; gap: 26px; z-index: 2; }
.post-left { flex: 1; padding: 22px 30px; display: flex; flex-direction: column; gap: 12px; }
.post-result { font-size: 70px; font-weight: 700; color: var(--txt); line-height: 1; text-shadow: 4px 4px 0 var(--shade); }
.post-result.win { color: var(--gold); text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848, -3px 0px 0 #383848, 3px 0px 0 #383848, 0px -3px 0 #383848, 0px 3px 0 #383848, -3px -3px 0 #383848, 3px 3px 0 #383848, -3px 3px 0 #383848, 3px -3px 0 #383848, -4px 0px 0 #383848, 4px 0px 0 #383848, 0px -4px 0 #383848, 0px 4px 0 #383848, -4px -4px 0 #383848, 4px 4px 0 #383848, -4px 4px 0 #383848, 4px -4px 0 #383848, 0 8px 0 #383848; }
.post-score { font-size: 28px; font-weight: 700; }
.post-stats { display: flex; gap: 14px; }
.stat-box { flex: 1; background: #f8f8e0; border: 3px solid var(--ink); border-radius: 8px; padding: 10px 14px; text-align: center; }
.stat-label { color: var(--muted); font-size: 18px; }
.stat-big { font-size: 42px; font-weight: 700; }
.stat-small { font-weight: 700; color: var(--good); }
.post-events { margin: 0; padding-left: 24px; font-size: 23px; line-height: 1.5; }
.post-coach { display: flex; align-items: center; gap: 22px; }
.post-week { font-size: 21px; color: var(--muted); }
.post-right { width: 380px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pack-slot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pack { width: 250px; height: 340px; border: 4px solid var(--ink); border-radius: 12px; background: repeating-linear-gradient(45deg, #e85848 0 20px, #d04838 20px 40px); box-shadow: inset 0 0 0 6px #f8d030, 0 8px 0 var(--ink); color: #fff; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px 10px; animation: packwiggle 1.6s steps(1) infinite; }
.pack-top { font-size: 32px; text-shadow: 3px 3px 0 var(--ink); }
.pack-tap { font-size: 22px; background: var(--ink); padding: 6px 16px; border-radius: 6px; }
@keyframes packwiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-3deg); } 88% { transform: rotate(3deg); } }
.card-reveal { animation: reveal .5s steps(5); }
@keyframes reveal { from { transform: scaleX(0); } }
.pack-note { color: #fff; font-size: 22px; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848; text-align: center; }

/* ---------- cards ---------- */
.pcard { width: 150px; height: 210px; border-radius: 10px; border: 4px solid var(--ink); background: #f0f0f8; box-shadow: inset 0 0 0 5px var(--rar, #c8c8d8), 0 5px 0 rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; padding: 10px 8px; position: relative; cursor: pointer; }
.pcard.big { width: 260px; height: 380px; padding: 16px 12px; }
.pcard.r-legendary { background: #fff0a8; }
.pcard.r-epic { background: #ecd8ff; }
.pcard.r-rare { background: #d8e8ff; }
.pcard.locked { background: repeating-linear-gradient(45deg, #c8c8d8 0 8px, #b8b8cc 8px 16px); box-shadow: 0 5px 0 rgba(0,0,0,.2); cursor: default; }
.pcard-q { margin: auto; font-size: 60px; font-weight: 700; color: #fff; text-shadow: 3px 3px 0 #9898b0; }
.pcard-rar { font-size: 14px; font-weight: 700; color: #fff; background: var(--rar); border-radius: 4px; padding: 1px 8px; border: 2px solid var(--ink); text-transform: uppercase; }
.pcard.big .pcard-rar { font-size: 18px; }
.pcard-art { flex: 1; display: flex; align-items: center; justify-content: center; }
.pcard-name { font-weight: 700; font-size: 18px; text-align: center; line-height: 1.05; }
.pcard.big .pcard-name { font-size: 28px; }
.pcard-pos { font-size: 14px; color: var(--muted); text-align: center; }
.pcard.big .pcard-pos { font-size: 18px; }
.pcard-stats { display: flex; gap: 8px; margin-top: 8px; }
.stat { background: var(--box); border: 2px solid var(--ink); border-radius: 4px; padding: 2px 8px; text-align: center; font-size: 13px; font-weight: 700; }
.stat b { display: block; font-size: 22px; }
.pcard-count { position: absolute; top: -10px; right: -10px; background: var(--bad); color: #fff; font-weight: 700; border: 3px solid var(--ink); border-radius: 6px; padding: 0 6px; }
.scroll-area { position: absolute; top: 96px; left: 30px; right: 30px; bottom: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 2; padding: 4px 4px 30px; }
.card-grid { display: grid; grid-template-columns: repeat(6, 150px); gap: 26px 30px; justify-content: center; padding: 10px; }
.card-zoom { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 24px; }
.note { color: #fff; font-size: 22px; text-align: center; text-shadow: -1px 0px 0 #383848, 1px 0px 0 #383848, 0px -1px 0 #383848, 0px 1px 0 #383848, -1px -1px 0 #383848, 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -2px 0px 0 #383848, 2px 0px 0 #383848, 0px -2px 0 #383848, 0px 2px 0 #383848, -2px -2px 0 #383848, 2px 2px 0 #383848, -2px 2px 0 #383848, 2px -2px 0 #383848; }

/* ---------- shop / trophies ---------- */
.shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shop-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.shop-ico { font-size: 40px; width: 60px; text-align: center; font-family: var(--ui); }
.shop-info { flex: 1; }
.shop-name { font-size: 24px; font-weight: 700; text-shadow: 2px 2px 0 var(--shade); }
.shop-desc { font-size: 18px; color: var(--muted); }
.owned { font-weight: 700; color: var(--good); font-size: 22px; }
.bests { padding: 14px 20px; font-size: 21px; margin-bottom: 18px; }
.trophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trophy { text-align: center; background: var(--box); border: 4px solid var(--ink); border-radius: 12px; padding: 14px; box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--ring2), 0 5px 0 rgba(0,0,0,.3); }
.trophy.gold { box-shadow: inset 0 0 0 3px var(--box), inset 0 0 0 6px var(--gold), 0 5px 0 rgba(0,0,0,.3); }
.trophy.empty { opacity: .55; }
.cup { font-size: 52px; line-height: 1.2; font-family: var(--ui); }
.trophy.silver .cup { filter: grayscale(1) brightness(1.3); }
.trophy.empty .cup { color: var(--muted); }
.tr-name { font-weight: 700; font-size: 20px; }
.tr-sub { color: var(--muted); font-size: 17px; }

/* ---------- front office (plain, readable font for parents) ---------- */
.screen-office { font-family: var(--ui); }
.screen-office .btn, .screen-office h1, .screen-office h2, .screen-office .pin h2 { font-family: var(--font); }
.office-gate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.office-back { position: absolute; top: 20px; left: 20px; }
.pin { padding: 26px 34px; width: 380px; text-align: center; }
.pin p { color: var(--muted); }
.pin .np-keys { margin-top: 18px; }
.pin-dots { display: flex; justify-content: center; gap: 16px; }
.pin-dots span { width: 26px; height: 26px; border: 4px solid var(--ink); }
.pin-dots span.on { background: var(--ink); }
.office { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 24px 34px 60px; display: flex; flex-direction: column; gap: 18px; -webkit-user-select: text; user-select: text; }
.office-head { display: flex; justify-content: space-between; align-items: center; }
.office-head h1 { font-size: 42px; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi { padding: 12px; text-align: center; }
.kpi-v { font-size: 34px; font-weight: 800; }
.kpi-l { font-weight: 700; color: var(--muted); font-size: 15px; }
.osec { padding: 18px 24px; font-size: 18px; }
.osec h2 { font-size: 26px; }
.osec h3 { font-size: 19px; margin-top: 12px; }
.osec ul { margin: 0; padding-left: 22px; line-height: 1.6; }
.osec .chip { font-family: var(--ui); font-size: 18px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 17px; }
.tbl th { text-align: left; font-size: 14px; color: var(--muted); border-bottom: 3px solid var(--ink); padding: 6px; }
.tbl td { padding: 8px 6px; border-bottom: 1px solid #dde; vertical-align: middle; font-weight: 600; }
.tbl .lvl-badge { width: 100px; font-size: 14px; padding: 3px 0; font-family: var(--font); }
.tbl .actions { display: flex; gap: 6px; justify-content: flex-end; }
.bars { display: flex; gap: 18px; align-items: flex-end; height: 170px; padding-top: 10px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 50px; }
.bar-col .bar { width: 36px; flex: none; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; border: none; }
.bar-val { font-weight: 800; font-size: 14px; }
.bar-day { font-weight: 700; color: var(--muted); }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid #eee; font-weight: 700; }
.office-sel { font-size: 18px; padding: 8px 12px; border-radius: 8px; border: 3px solid var(--ink); background: #fff; font-weight: 600; font-family: var(--ui); }
.ctl input[type=checkbox] { width: 30px; height: 30px; }
.code { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 13px; border: 3px solid var(--ink); border-radius: 8px; padding: 8px; margin: 8px 0; -webkit-user-select: text; user-select: text; }
.roadmap li { font-weight: 600; }

/* ---------- rotate prompt ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 999; background: #202038; color: #fff; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; text-align: center; padding: 30px; font-family: var(--font); }
.rotate-ico { font-size: 90px; animation: spin 2s steps(4) infinite; }
@keyframes spin { 50% { transform: rotate(90deg); } }
body.portrait #rotate { display: flex; }

/* ---------- generated art (art/manifest.json) ---------- */
.battle.has-art { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.battle.has-art .b-sky, .battle.has-art .b-crowd, .battle.has-art .b-field { display: none; }
.battle.has-art .plat { opacity: .85; }
body.art-title .bg-stadium { background: var(--art-title) center/cover no-repeat; }
body.art-title .bg-stadium .crowd, body.art-title .bg-stadium .field { display: none; }
body.art-camp .bg-camp { background: var(--art-camp) center/cover no-repeat; }
body.art-locker .bg-locker { background: var(--art-locker) center/cover no-repeat; }
body.art-locker .bg-locker .lockers, body.art-locker .bg-locker::after { display: none; }
body.art-gym .bg-weigh { background: var(--art-gym) center/cover no-repeat; }
body.art-gym .bg-weigh::before { display: none; }
.sprite.art { filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }

/* ---------- generated icons ---------- */
.icon-img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: auto; }
.emoji-icon { font-family: var(--ui); }
.icon-btn .icon-img { margin: 0; }
.menu-ico { display: inline-flex; width: 40px; justify-content: center; }
.menu-ico:empty { display: none; }
.shop-ico .icon-img, .cup .icon-img { margin: 0 auto; }
body.art-coin .coin { background: var(--art-coin) center/contain no-repeat; border: none; box-shadow: none; clip-path: none; width: 30px; height: 30px; image-rendering: pixelated; }
body.art-cardback .pcard.locked { background: var(--art-cardback) center/100% 100% no-repeat; border-color: transparent; box-shadow: 0 5px 0 rgba(0,0,0,.25); image-rendering: pixelated; }
body.art-cardback .pcard.locked .pcard-q { display: none; }
body.art-pack .pack { background: var(--art-pack) center/contain no-repeat; border: none; box-shadow: none; image-rendering: pixelated; justify-content: flex-end; }
body.art-pack .pack .pack-top { display: none; }

.trophy.empty { opacity: 1; background: #e6e8f0; box-shadow: inset 0 0 0 3px #e6e8f0, inset 0 0 0 6px #c8ccd8, 0 5px 0 rgba(0,0,0,.2); }
.trophy.empty .cup .icon-img { filter: brightness(0); opacity: .18; }
.trophy.empty .tr-name { color: var(--muted); }