:root {
  color-scheme: light;
  --ink: #10263d;
  --navy: #0b3555;
  --navy-dark: #08263f;
  --teal: #18b7b0;
  --teal-dark: #087a7c;
  --coral: #ff735f;
  --coral-dark: #c84238;
  --gold: #ffd34d;
  --paper: #fffaf0;
  --muted: #5b6976;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: #d9e8ec; font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
button { color: inherit; font: inherit; }
button, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #0b6a79; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { width: 100%; height: 100%; padding: 14px; }
.arena { position: relative; width: min(1380px,100%); height: 100%; min-height: 620px; margin: auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(10,42,68,.3); border-radius: 30px; background: var(--navy); box-shadow: 0 9px 0 rgba(8,37,60,.25), 0 28px 70px rgba(10,42,68,.24); }
.world-art { position: absolute; z-index: -5; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.76) contrast(.92); transform: scale(1.01); }
.world-wash { position: absolute; z-index: -4; inset: 0; background: radial-gradient(ellipse at 52% 51%,rgba(8,43,70,.02) 0 22%,rgba(7,36,62,.35) 72%,rgba(4,25,45,.72) 100%),linear-gradient(180deg,rgba(7,35,60,.28),rgba(6,30,50,.12) 55%,rgba(5,27,46,.48)); }

.score-strip { position: absolute; z-index: 20; left: 22px; right: 22px; top: 18px; height: 70px; display: grid; grid-template-columns: 205px minmax(280px,420px) auto; align-items: center; justify-content: space-between; gap: 20px; }
.round-chip,.timer-card,.score-pods { border: 1px solid rgba(255,255,255,.42); background: rgba(255,250,240,.94); box-shadow: 0 6px 0 rgba(5,30,49,.25),0 12px 25px rgba(5,28,47,.16); backdrop-filter: blur(10px); }
.round-chip { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 17px; border-radius: 17px; }
.round-chip span,.score-pods span,.timer-card span,.power-copy span,.difficulty span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.round-chip strong { margin-top: 3px; font-size: 16px; }
.timer-card { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 10px 14px; border-radius: 17px; }
.timer-card > div { display: flex; align-items: center; justify-content: space-between; }
.timer-card b { color: var(--teal-dark); font-size: 12px; }
.timer-track { height: 10px; overflow: hidden; border-radius: 99px; background: #dce5e5; box-shadow: inset 0 2px 3px rgba(13,46,58,.14); }
.timer-track b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),var(--gold),var(--coral)); transform-origin: left; transition: width 90ms linear; }
.timer-card.is-low .timer-track b { background: var(--coral); }
.score-pods { height: 70px; display: flex; align-items: stretch; padding: 7px; border-radius: 17px; }
.score-pods > div { min-width: 76px; display: grid; place-content: center; padding: 0 11px; text-align: center; }
.score-pods > div + div { border-left: 1px solid #d7dfdd; }
.score-pods strong { display: block; margin-top: 2px; font-size: 23px; line-height: 1; }
#comboValue { color: var(--coral-dark); }

.host-zone { position: absolute; z-index: 10; left: 29px; bottom: 30px; width: 220px; display: grid; justify-items: center; }
.sticker-art { overflow: hidden; padding: 7px; border: 1px solid rgba(17,50,67,.12); border-radius: 27px; background: #fff; box-shadow: 0 11px 0 rgba(6,30,49,.2),0 20px 32px rgba(5,28,45,.22); }
.sticker-art img { display: block; width: 100%; border-radius: 20px; }
.mascot-sticker { width: 202px; transform: rotate(-2deg); transform-origin: center bottom; transition: transform 150ms ease-out,filter 150ms ease-out; }
.host-zone.is-happy .mascot-sticker { transform: rotate(2deg) translateY(-8px) scale(1.04); filter: saturate(1.12); }
.host-zone.is-thinking .mascot-sticker { transform: rotate(-5deg) translateX(-3px); }
.host-zone.is-power .mascot-sticker { transform: rotate(4deg) translateY(-16px) scale(1.08); }
.speech-bubble { position: relative; z-index: 2; max-width: 210px; margin-top: -10px; padding: 10px 15px; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 0 5px 0 rgba(6,29,48,.22); font-size: 13px; font-weight: 900; text-align: center; }
.speech-bubble::before { position: absolute; left: 39px; bottom: 100%; width: 15px; height: 15px; content: ""; transform: translateY(8px) rotate(45deg); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); background: var(--paper); }

.game-card { position: absolute; z-index: 12; left: 265px; right: 240px; top: 106px; bottom: 29px; display: grid; grid-template-rows: auto auto auto minmax(88px,1fr) auto minmax(28px,auto) auto; align-content: start; justify-items: center; padding: 25px 34px 27px; border: 1px solid rgba(255,255,255,.65); border-radius: 27px; background: rgba(255,250,240,.965); box-shadow: 0 9px 0 rgba(5,29,48,.25),0 26px 55px rgba(4,25,43,.24); }
.bout-kicker { min-height: 18px; color: var(--coral-dark); font-size: 11px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.game-card h1 { margin: 9px 0 5px; font-size: clamp(58px,7.2vw,94px); line-height: .92; letter-spacing: -.055em; }
.one-goal { margin: 3px 0 0; color: var(--muted); font-size: 15px; font-weight: 750; }
.hint-stage { width: 100%; min-height: 105px; display: grid; place-items: center; padding: 12px 0 7px; }
.array-card { display: grid; grid-template-columns: repeat(var(--cols),18px); gap: 7px; padding: 13px 17px; border: 2px dashed #8fa9aa; border-radius: 18px; background: #edf7f4; box-shadow: 0 4px 0 #d2e2dd; }
.array-dot { width: 18px; height: 18px; border: 2px solid #0b6670; border-radius: 6px; background: var(--teal); box-shadow: inset 0 2px rgba(255,255,255,.45); animation: dot-pop 180ms ease-out both; }
.hint-empty { display: flex; align-items: center; gap: 9px; color: #71808b; font-size: 12px; font-weight: 800; }
.hint-empty i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 14px 0 var(--teal),28px 0 var(--coral); }
.answer-grid { width: min(660px,100%); display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.answer-grid.three { grid-template-columns: repeat(3,1fr); }
.answer-tile,.explain-tile { position: relative; min-height: 84px; overflow: hidden; border: 2px solid #aabdc0; border-radius: 19px; background: #fff; box-shadow: 0 7px 0 #cfdadb,0 11px 18px rgba(19,53,65,.08); font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.answer-tile { font-size: 36px; }
.answer-tile::before { position: absolute; inset: 6px; content: ""; border: 2px solid rgba(20,183,176,.1); border-radius: 13px; pointer-events: none; }
.answer-tile:nth-child(2n) { background: #fff8df; }
.answer-tile:hover,.explain-tile:hover { transform: translateY(-3px); border-color: var(--teal-dark); box-shadow: 0 10px 0 #bad2d1,0 14px 20px rgba(19,53,65,.08); }
.answer-tile:active,.explain-tile:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 #bad2d1; }
.answer-tile.is-missed { opacity: .38; transform: scale(.93); box-shadow: 0 3px 0 #d2d8d8; }
.answer-tile.is-smashing { z-index: 3; border-color: var(--gold); background: var(--gold); animation: tile-smash 430ms ease-out forwards; }
.explain-grid { grid-template-columns: repeat(3,1fr); }
.explain-tile { min-height: 74px; padding: 10px 12px; font-size: 13px; line-height: 1.22; }
.feedback { min-height: 29px; display: grid; place-items: center; padding-top: 9px; color: var(--teal-dark); font-size: 14px; font-weight: 950; text-align: center; }
.feedback.is-miss { color: var(--coral-dark); }
.next-button { min-width: 225px; min-height: 58px; margin-top: 9px; padding: 0 24px; border: 2px solid #85382f; border-radius: 16px; color: #fff; background: var(--coral); box-shadow: 0 7px 0 #993f35; font-size: 16px; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }
.next-button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #993f35; }
.next-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #993f35; }

.power-zone { position: absolute; z-index: 10; right: 28px; bottom: 31px; width: 190px; display: grid; justify-items: center; gap: 9px; }
.trophy-sticker { width: 128px; border-radius: 22px; transform: rotate(2deg); transition: transform 160ms ease-out; }
.trophy-sticker img { border-radius: 15px; }
.arena.is-leveling .trophy-sticker { transform: rotate(-4deg) translateY(-9px) scale(1.08); }
.power-copy { width: 100%; padding: 9px 12px; border-radius: 13px; background: rgba(255,250,240,.95); box-shadow: 0 5px 0 rgba(4,27,45,.2); text-align: center; }
.power-copy strong { display: block; margin-top: 2px; font-size: 16px; }
.power-meter { position: relative; width: 52px; height: 210px; overflow: hidden; border: 4px solid #fff7dc; border-radius: 24px; background: rgba(5,35,57,.82); box-shadow: 0 0 0 3px var(--ink),0 8px 0 rgba(4,25,42,.28); }
.power-meter i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 0; border-radius: 15px; background: linear-gradient(0deg,var(--coral),var(--gold)); box-shadow: 0 0 16px rgba(255,211,77,.75); transition: height 260ms ease-out; }
.bolt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: white; font-size: 30px; text-shadow: 0 2px 0 #8a5432; }
.table-chip { min-width: 120px; padding: 7px 12px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--teal-dark); box-shadow: 0 4px 0 rgba(4,26,43,.26); font-size: 12px; font-weight: 1000; text-align: center; }
.difficulty { width: 100%; padding: 9px 11px; border-radius: 13px; background: rgba(255,250,240,.95); box-shadow: 0 5px 0 rgba(4,27,45,.2); }
.difficulty > span { display: flex; justify-content: space-between; }
.difficulty > span b { color: var(--ink); font-size: 12px; }
.difficulty > i { display: block; height: 7px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #d9e1df; }
.difficulty > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),var(--coral)); transition: width 240ms ease-out; }

.burst { position: absolute; z-index: 40; left: 52%; top: 59%; pointer-events: none; }
.burst i { position: absolute; width: 15px; height: 15px; opacity: 0; border-radius: 4px; background: var(--gold); }
.arena.is-bursting .burst i { animation: burst 620ms ease-out both; }
.burst i:nth-child(1){--x:-120px;--y:-65px}.burst i:nth-child(2){--x:-55px;--y:-115px;animation-delay:35ms}.burst i:nth-child(3){--x:35px;--y:-120px;animation-delay:70ms}.burst i:nth-child(4){--x:115px;--y:-55px;animation-delay:100ms}.burst i:nth-child(5){--x:125px;--y:35px;animation-delay:130ms}.burst i:nth-child(6){--x:45px;--y:85px;animation-delay:160ms}.burst i:nth-child(7){--x:-60px;--y:85px;animation-delay:190ms}.burst i:nth-child(8){--x:-125px;--y:25px;animation-delay:220ms}
.level-banner { position: absolute; z-index: 60; left: 50%; top: 48%; min-width: 300px; padding: 19px 28px; opacity: 0; transform: translate(-50%,-35%) scale(.82); border: 4px solid white; border-radius: 22px; color: white; background: var(--coral); box-shadow: 0 9px 0 #963d34,0 24px 50px rgba(5,25,42,.32); pointer-events: none; text-align: center; transition: opacity 150ms ease-out,transform 150ms ease-out; }
.level-banner span { display: block; color: #fff0aa; font-size: 12px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.level-banner strong { display: block; margin-top: 2px; font-size: 27px; }
.power-props { position: absolute; left: -69px; top: 50%; width: 88px; padding: 5px; transform: translateY(-50%) rotate(-8deg); border-radius: 18px; background: white; box-shadow: 0 6px 0 rgba(80,33,29,.26); }
.arena.is-leveling .level-banner { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.game-card.is-shaking { animation: gentle-shake 260ms ease-out; }

@keyframes dot-pop { from { opacity: 0; transform: scale(.45) translateY(7px); } }
@keyframes tile-smash { 0%{transform:scale(1)}35%{transform:scale(1.16) rotate(-2deg)}70%{opacity:1;transform:scale(.9) rotate(2deg)}100%{opacity:0;transform:scale(.15) rotate(12deg)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}55%{transform:translateX(6px)}78%{transform:translateX(-3px)} }
@keyframes burst { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(210deg) scale(1.2)} }

@media (max-height: 760px) {
  .lesson { padding: 9px; }.arena { border-radius: 24px; }.score-strip { top: 12px; }.game-card { top: 94px; bottom: 19px; padding-top: 18px; padding-bottom: 18px; }.game-card h1 { font-size: 62px; }.hint-stage { min-height: 80px; padding-top: 6px; }.answer-tile { min-height: 68px; }.host-zone,.power-zone { bottom: 21px; transform: scale(.88); transform-origin: bottom center; }.host-zone { left: 18px; }.power-zone { right: 17px; }.power-meter { height: 170px; }
}
@media (max-width: 1150px) { .game-card { left: 235px; right: 215px; }.host-zone { left: 15px; transform: scale(.9); transform-origin: left bottom; }.power-zone { right: 14px; transform: scale(.9); transform-origin: right bottom; }.score-strip { grid-template-columns: 180px minmax(240px,360px) auto; }.score-pods > div { min-width: 65px; padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }