:root {
  color-scheme: dark;
  --night: #052934;
  --night-deep: #02181f;
  --paper: #fff8df;
  --ink: #122c38;
  --muted: #58717a;
  --teal: #0d8090;
  --teal-dark: #07515e;
  --coral: #ff6658;
  --coral-dark: #aa302e;
  --gold: #ffc94f;
  --gold-dark: #9c5d13;
  --violet: #7042a6;
  font-family: "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 1000px; min-height: 660px; overflow: hidden; }
body { margin: 0; color: var(--paper); background: var(--night-deep); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #fff3a4; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { height: 100%; padding: 12px; }
.comic-city {
  position: relative;
  height: 100%;
  min-height: 636px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #156879;
  border-radius: 28px;
  background: #073d4c url("art/comic-city-01.webp") center / cover no-repeat;
  box-shadow: inset 0 0 100px rgba(1,18,24,.42), 0 9px 0 #011116, 0 28px 70px rgba(0,11,15,.55);
}
.world-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(2,27,34,.8) 0 12%,rgba(3,31,38,.12) 43%,rgba(1,18,24,.55) 100%); }
.halftone { position: absolute; z-index: 0; inset: 0; opacity: .16; pointer-events: none; background-image: radial-gradient(#fff 1px,transparent 1px); background-size: 9px 9px; mask-image: linear-gradient(90deg,#000,transparent 32%,transparent 68%,#000); }

.hero-hud { position: absolute; z-index: 30; left: 20px; right: 20px; top: 16px; height: 70px; display: grid; grid-template-columns: 190px minmax(280px,1fr) 300px; align-items: center; gap: 13px; }
.issue-card,.mission-track,.difficulty-card,.scoreboard { border: 2px solid rgba(255,219,111,.35); background: rgba(3,35,45,.91); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 5px 0 rgba(1,15,21,.65); backdrop-filter: blur(12px); }
.issue-card { height: 70px; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; border-radius: 16px 8px 16px 8px; }
.issue-card span,.mission-track > span,.difficulty-card span,.scoreboard span,.beacon-label span { color: #a9d6da; font-size: 10px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.issue-card strong { margin-top: 3px; font-size: 17px; }
.mission-track { justify-self: center; min-width: 310px; height: 70px; display: grid; place-content: center; gap: 6px; padding: 7px 22px; border-radius: 10px 18px 10px 18px; text-align: center; }
.mission-track > div { display: flex; align-items: center; }
.mission-track i { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #6e8990; border-radius: 50%; color: #a7c1c6; background: #103e49; font-size: 12px; font-style: normal; font-weight: 1000; transition: transform 180ms ease-out, background 180ms ease-out; }
.mission-track i.is-active { color: var(--ink); border-color: #fff0a0; background: var(--gold); box-shadow: 0 0 18px rgba(255,201,79,.7); transform: scale(1.14); }
.mission-track i.is-done { color: white; border-color: #6ee5d9; background: var(--teal); }
.mission-track b { width: 45px; height: 3px; background: #526e75; }
.difficulty-card { justify-self: center; width: min(390px,100%); height: 70px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-content: center; padding: 9px 16px; border-radius: 10px 18px; }
.difficulty-card span b { color: var(--gold); font-size: 16px; }.difficulty-card strong { font-size: 12px; }
.difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #315661; }
.difficulty-card > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#55d8ca,var(--gold),var(--coral)); transition: width 250ms ease-out; }
.scoreboard { height: 70px; display: flex; justify-self: end; padding: 7px; border-radius: 18px 9px 18px 9px; }
.scoreboard > div { min-width: 76px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(186,220,221,.24); }
.scoreboard strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1; }.scoreboard strong i { color: var(--gold); font-size: 14px; font-style: normal; }

.hero-deck { position: absolute; z-index: 6; left: 14px; top: 100px; bottom: 14px; width: 240px; pointer-events: none; }
.mascot { position: absolute; z-index: 3; left: -40px; top: 13%; width: 285px; height: 285px; object-fit: contain; filter: drop-shadow(0 13px 8px rgba(0,15,20,.42)); transform: rotate(-4deg); transition: transform 180ms ease-out, filter 180ms ease-out; }
.sidekick { position: absolute; z-index: 5; right: -9px; top: 5px; width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(0,15,20,.35)); animation: hover 2.3s ease-in-out infinite alternate; }
.wrecker { position: absolute; z-index: 2; left: -42px; bottom: -48px; width: 190px; height: 190px; object-fit: contain; opacity: .82; filter: drop-shadow(0 9px 6px rgba(0,15,20,.45)); transform: rotate(5deg); transition: transform 180ms ease-out, opacity 180ms ease-out; }
.hero-bubble { position: absolute; z-index: 8; left: 79px; bottom: 110px; width: 166px; min-height: 72px; display: grid; place-items: center; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 22px 22px 22px 4px; color: var(--ink); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); font-size: 12px; font-weight: 900; line-height: 1.25; text-align: center; }
.burst { position: absolute; z-index: 1; left: -18px; top: 0; padding: 5px 10px; transform: rotate(-9deg); color: var(--ink); background: var(--gold); clip-path: polygon(4% 29%,19% 26%,20% 5%,34% 22%,48% 2%,57% 24%,82% 11%,78% 34%,100% 42%,80% 54%,95% 76%,68% 74%,63% 98%,49% 77%,30% 96%,29% 72%,4% 79%,17% 55%); font-size: 20px; font-weight: 1000; }

.mission-panel { position: absolute; z-index: 12; left: 250px; right: 245px; top: 102px; bottom: 22px; display: grid; grid-template-rows: auto auto auto minmax(92px,1fr) minmax(126px,1.2fr) 31px 84px; align-content: start; padding: 23px 30px 25px; overflow: hidden; border: 3px solid var(--ink); border-radius: 15px 28px 15px 28px; color: var(--ink); background: rgba(255,248,223,.97); box-shadow: 9px 9px 0 var(--ink), 0 22px 45px rgba(0,18,24,.35); }
.mission-panel::before { position: absolute; top: 0; left: 0; right: 0; height: 9px; content: ""; background: repeating-linear-gradient(90deg,var(--coral) 0 70px,var(--gold) 70px 140px,var(--teal) 140px 210px); }
.panel-topline { display: flex; align-items: center; justify-content: center; gap: 10px; }
.panel-topline > span:first-child { color: var(--coral-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.rematch-chip { padding: 4px 8px; border: 2px solid var(--gold-dark); border-radius: 999px; color: #6a3e07; background: var(--gold); font-size: 10px; font-weight: 1000; text-transform: uppercase; transform: rotate(2deg); }
.mission-panel h1 { margin: 5px 0 3px; font-size: clamp(28px,3.1vw,45px); line-height: .96; letter-spacing: -.05em; text-align: center; }
.mission-panel > p { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.cue-card { align-self: center; justify-self: center; min-width: 300px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 9px 18px; border: 2px solid #d49a27; border-radius: 999px; background: #fff0b4; box-shadow: 0 4px 0 #ddb967; }
.cue-picture { font-size: 35px; line-height: 1; filter: drop-shadow(0 2px rgba(47,37,20,.18)); }.cue-card small { display: block; color: #876221; font-size: 9px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }.cue-card strong { display: block; margin-top: 2px; font-size: 14px; }
.sentence-card { position: relative; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 10px; min-height: 126px; padding: 20px 30px; overflow: hidden; border: 3px solid var(--ink); border-radius: 9px 20px 9px 20px; background: white; box-shadow: 5px 5px 0 #bdd5d5; text-align: center; }
.sentence-card p { position: relative; z-index: 2; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px,3vw,42px); font-weight: 700; line-height: 1.14; letter-spacing: -.025em; }
.sentence-card mark { display: inline-block; min-width: 100px; padding: 0 8px 2px; border-bottom: 4px solid var(--coral); color: var(--coral-dark); background: #fff1a5; animation: blank-pulse 1.4s ease-in-out infinite alternate; }
.sentence-card mark.is-filled { animation: word-pop 300ms cubic-bezier(.2,.9,.3,1.25) both; }
.sentence-card mark.is-wrong { color: #6d388d; background: #efd8ff; text-decoration: line-through 3px var(--coral); }
.sentence-card > span { position: relative; z-index: 2; padding: 4px 10px; border-radius: 999px; color: #285965; background: #dbf2f0; font-size: 11px; font-weight: 900; }
.signal-lines { position: absolute; inset: 0; opacity: .08; }.signal-lines i { position: absolute; left: 50%; top: 50%; border: 4px solid var(--teal); border-radius: 50%; transform: translate(-50%,-50%); }.signal-lines i:nth-child(1){width:180px;height:180px}.signal-lines i:nth-child(2){width:300px;height:300px}.signal-lines i:nth-child(3){width:440px;height:440px}
.feedback { min-height: 31px; display: grid; place-items: center; color: var(--teal-dark); font-size: 13px; font-weight: 1000; text-align: center; }.feedback.is-error { color: var(--coral-dark); }
.action-area { min-height: 84px; display: flex; align-items: center; justify-content: center; }
.word-choices { width: min(610px,100%); display: grid; grid-template-columns: repeat(var(--choice-count,3),1fr); gap: 12px; }
.word-choice,.primary { min-height: 64px; border: 3px solid var(--ink); border-radius: 10px 18px 10px 18px; font-weight: 1000; transition: transform 130ms ease-out, box-shadow 130ms ease-out, background 130ms ease-out; }
.word-choice { position: relative; color: var(--ink); background: white; box-shadow: 0 6px 0 var(--ink); font-size: 25px; }
.word-choice::after { position: absolute; right: 7px; top: 5px; content: "✦"; color: var(--gold); font-size: 10px; }
.word-choice:hover { transform: translateY(-3px) rotate(-1deg); color: #063c48; background: #dff8f5; box-shadow: 0 9px 0 var(--ink); }.word-choice:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.primary { min-width: 245px; padding: 0 28px; color: white; background: var(--teal); box-shadow: 0 7px 0 var(--teal-dark); font-size: 16px; }.primary:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--teal-dark); }.primary:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--teal-dark); }
.primary.is-coral { background: var(--coral); box-shadow: 0 7px 0 var(--coral-dark); }.primary.is-gold { color: var(--ink); background: var(--gold); box-shadow: 0 7px 0 var(--gold-dark); }

.beacon-deck { position: absolute; z-index: 7; right: 16px; top: 104px; bottom: 17px; width: 216px; overflow: hidden; border: 2px solid rgba(255,225,126,.28); border-radius: 24px 12px 24px 12px; background: linear-gradient(rgba(4,46,57,.54),rgba(2,25,32,.82)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.beacon-label { position: absolute; z-index: 3; left: 13px; right: 13px; top: 13px; padding: 10px 12px; border-radius: 13px 7px; background: rgba(2,31,40,.9); text-align: center; }.beacon-label strong { display: block; margin-top: 2px; font-size: 13px; }
.beacon { position: absolute; z-index: 2; left: -4px; top: 85px; width: 224px; height: 224px; object-fit: contain; filter: drop-shadow(0 10px 7px rgba(0,14,18,.4)); transition: transform 180ms ease-out, filter 180ms ease-out; }
.power-ring { position: absolute; left: 29px; right: 29px; top: 315px; height: 18px; overflow: hidden; border: 3px solid #061f29; border-radius: 99px; background: #153d47; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }.power-ring i { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#54dfd2,var(--gold),var(--coral)); transition: width 280ms ease-out; }
.sound-rule { position: absolute; left: 15px; right: 15px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 13px; border: 2px solid rgba(255,223,122,.45); border-radius: 14px; background: rgba(2,30,39,.88); }.sound-rule > span { color: var(--gold); font-size: 29px; }.sound-rule p { margin: 0; color: #c9e5e5; font-size: 11px; line-height: 1.45; }.sound-rule strong { color: white; }

.comic-city.is-celebrating .mascot { transform: translate(18px,-12px) rotate(4deg) scale(1.08); filter: drop-shadow(0 0 18px rgba(255,210,72,.75)); }
.comic-city.is-celebrating .beacon { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 24px rgba(255,207,80,.92)); }
.comic-city.is-missing .mission-panel { animation: panel-shake 330ms ease-out; }.comic-city.is-missing .wrecker { opacity: 1; transform: translate(25px,-12px) rotate(-3deg) scale(1.08); }
.comic-burst { position: absolute; z-index: 50; left: 188px; top: 42%; width: 100px; height: 100px; opacity: 0; pointer-events: none; }.comic-burst b { position: absolute; z-index: 2; inset: 20px 0; display: grid; place-items: center; transform: rotate(-9deg); clip-path: polygon(0 45%,18% 35%,8% 12%,34% 22%,48% 0,60% 23%,91% 9%,82% 38%,100% 51%,77% 62%,91% 90%,61% 78%,49% 100%,36% 76%,8% 90%,18% 61%); color: var(--ink); background: var(--gold); font-size: 24px; font-weight: 1000; }.comic-burst i { position: absolute; left: 47px; top: 48px; width: 11px; height: 11px; border-radius: 2px; background: var(--coral); }.comic-city.is-celebrating .comic-burst { animation: burst-in 650ms ease-out both; }.comic-city.is-celebrating .comic-burst i { animation: confetti 650ms ease-out both; }.comic-burst i:nth-of-type(1){--x:-90px;--y:-65px}.comic-burst i:nth-of-type(2){--x:80px;--y:-80px;animation-delay:40ms}.comic-burst i:nth-of-type(3){--x:112px;--y:10px;animation-delay:80ms}.comic-burst i:nth-of-type(4){--x:-78px;--y:70px;animation-delay:120ms}.comic-burst i:nth-of-type(5){--x:45px;--y:92px;animation-delay:160ms}.comic-burst i:nth-of-type(6){--x:-28px;--y:-112px;animation-delay:200ms}
.level-up { position: absolute; z-index: 55; left: 50%; top: 92px; padding: 9px 17px; opacity: 0; transform: translate(-50%,-12px) rotate(-2deg); border: 3px solid var(--ink); border-radius: 7px; color: var(--ink); background: var(--gold); box-shadow: 4px 4px 0 var(--ink); pointer-events: none; font-size: 14px; font-weight: 1000; transition: opacity 150ms ease-out, transform 150ms ease-out; }.level-up.is-showing { opacity: 1; transform: translate(-50%,0) rotate(-2deg); }
.toast { position: absolute; z-index: 60; left: 50%; bottom: 34px; max-width: 72%; padding: 10px 18px; opacity: 0; transform: translate(-50%,12px); border: 2px solid #8ad9d4; border-radius: 999px; color: white; background: #062b36; box-shadow: 0 5px 0 rgba(0,13,18,.7); pointer-events: none; font-size: 13px; font-weight: 900; text-align: center; transition: opacity 150ms ease-out, transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes hover { to { transform: translateY(8px) rotate(3deg); } }
@keyframes blank-pulse { to { box-shadow: 0 0 0 5px rgba(255,102,88,.12); } }
@keyframes word-pop { 0% { transform: scale(.7) rotate(-4deg); } 70% { transform: scale(1.14) rotate(2deg); } }
@keyframes panel-shake { 20%,60% { transform: translateX(-7px) rotate(-.3deg); } 40%,80% { transform: translateX(7px) rotate(.3deg); } }
@keyframes burst-in { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 35% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes confetti { from { opacity: 1; } to { opacity: 0; transform: translate(var(--x),var(--y)) rotate(240deg); } }

@media (max-height: 750px) {
  .hero-hud { top: 11px; height: 62px; }.issue-card,.mission-track,.difficulty-card,.scoreboard { height: 62px; }
  .hero-deck,.beacon-deck { top: 87px; }.mission-panel { top: 88px; bottom: 17px; padding-top: 19px; grid-template-rows: auto auto auto minmax(78px,1fr) minmax(108px,1.1fr) 27px 72px; }
  .mascot { top: 8%; width: 255px; height: 255px; }.cue-card { padding-block: 6px; }.sentence-card { min-height: 108px; padding-block: 13px; }.word-choice,.primary { min-height: 56px; }.action-area { min-height: 72px; }
  .beacon { top: 70px; }.power-ring { top: 285px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }