:root {
  color-scheme: light;
  --navy: #102c46;
  --navy-2: #071b2d;
  --cream: #fff7df;
  --paper: #fffdf7;
  --cherry: #d9414f;
  --cherry-dark: #8d2132;
  --gold: #ffc94d;
  --gold-dark: #a86410;
  --turquoise: #38bfc1;
  --green: #42a66a;
  --purple: #8d62cc;
  --ink: #14283a;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1000px; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: var(--navy-2); font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
button { font: inherit; }
.lesson, .parade-world { width: 100%; height: 100%; }
.parade-world { position: relative; overflow: hidden; background: url("art/parade-street-01.webp") center 43% / cover no-repeat; }
.world-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,27,45,.34), rgba(7,27,45,.04) 27%, rgba(7,27,45,.5)); }
.world-wash::after { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 64% 48%, rgba(255,247,223,.27), transparent 48%); }

.parade-hud { position: absolute; z-index: 10; top: 18px; left: 50%; width: min(1320px, calc(100vw - 48px)); height: 74px; display: grid; grid-template-columns: 220px 1fr 200px 280px; gap: 14px; transform: translateX(-50%); }
.marquee, .route, .difficulty, .scoreboard { border: 2px solid rgba(255,255,255,.58); border-radius: 20px; background: rgba(16,44,70,.94); box-shadow: 0 7px 0 rgba(5,18,31,.64), 0 14px 28px rgba(6,21,35,.24); color: white; }
.marquee { display: grid; place-content: center; padding: 10px 18px; border-color: #ffdf78; background: linear-gradient(160deg, #d9414f, #a92c3e); }
.marquee span, .route > span, .difficulty > span, .scoreboard span { color: #ffeda8; font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.marquee strong { margin-top: 2px; font-size: 19px; }
.route { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 10px 21px; }
.route > div { display: flex; align-items: center; }
.route i { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #7a91a3; border-radius: 50%; color: #b9cad5; font-style: normal; font-size: 12px; font-weight: 1000; }
.route i.is-current { border-color: var(--gold); color: var(--navy); background: var(--gold); box-shadow: 0 0 0 5px rgba(255,201,77,.16); }
.route i.is-complete { border-color: #73e3bc; color: var(--navy); background: #73e3bc; }
.route b { height: 3px; flex: 1; background: #536d81; }
.difficulty { display: grid; align-content: center; padding: 9px 16px; }
.difficulty > span { display: flex; justify-content: space-between; }.difficulty > span b { color: white; }
.difficulty > i { height: 8px; margin: 6px 0 4px; overflow: hidden; border-radius: 9px; background: #456176; }.difficulty > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--turquoise), var(--gold), var(--cherry)); transition: width 260ms ease-out; }
.difficulty > strong { font-size: 11px; }
.scoreboard { display: grid; grid-template-columns: repeat(3,1fr); padding: 8px; }
.scoreboard > div { display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.14); }.scoreboard > div:first-child { border-left: 0; }
.scoreboard strong { color: white; font-size: 25px; line-height: 1; }

.game-card { position: absolute; z-index: 3; top: 110px; bottom: 24px; left: 50%; width: min(1320px, calc(100vw - 48px)); display: grid; grid-template-columns: 250px minmax(0,1fr); overflow: hidden; transform: translateX(-50%); border: 3px solid rgba(255,247,223,.83); border-radius: 30px; background: rgba(255,250,236,.92); box-shadow: 0 11px 0 rgba(74,30,22,.48), 0 25px 55px rgba(6,20,32,.34); backdrop-filter: blur(7px); }
.mascot-zone { position: relative; min-width: 0; overflow: hidden; border-right: 3px solid #e8c986; background: linear-gradient(180deg, #ffe9a5 0 52%, #e4b457 52% 55%, #a82f43 55%); }
.mascot-zone::before { position: absolute; inset: 55% 0 0; content: ""; opacity: .28; background: repeating-linear-gradient(90deg, transparent 0 19px, rgba(255,255,255,.3) 20px 21px); }
.speech { position: relative; z-index: 3; margin: 22px 20px 0; padding: 14px 15px; border: 3px solid var(--navy); border-radius: 18px 18px 18px 5px; color: var(--navy); background: white; box-shadow: 0 5px 0 rgba(16,44,70,.2); font-size: 14px; font-weight: 900; line-height: 1.35; }
.mascot { position: absolute; z-index: 2; left: 50%; bottom: 6px; width: 245px; max-height: 72%; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 10px 9px rgba(52,18,15,.28)); }
.band-props { position: absolute; z-index: 1; left: -38px; bottom: -33px; width: 155px; transform: rotate(-8deg); filter: drop-shadow(0 8px 6px rgba(42,22,12,.24)); }
.mascot-zone.is-cheering .mascot { animation: mascot-cheer 680ms cubic-bezier(.2,.85,.25,1.2); }
.mascot-zone.is-thinking .mascot { animation: mascot-march 1.6s ease-in-out infinite; }
.mascot-zone.is-oops .mascot { animation: mascot-oops 380ms ease-out; }

.play-panel { min-width: 0; display: grid; grid-template-rows: auto 116px minmax(235px,1fr) 30px 68px; gap: 8px; padding: 24px 30px 20px; }
.challenge-copy { text-align: center; }
.challenge-copy > span { color: var(--cherry-dark); font-size: 11px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.challenge-copy h1 { margin: 3px 0 4px; color: var(--navy); font-size: clamp(27px, 3vw, 40px); line-height: 1; letter-spacing: -.04em; }
.challenge-copy p { margin: 0; color: #5f6770; font-size: 14px; font-weight: 700; }

.sentence-stage { position: relative; display: grid; place-content: center; min-height: 110px; padding: 26px 22px 14px; border: 2px solid #dfc58e; border-radius: 21px; background: linear-gradient(180deg, #fffef8, #fff5d9); box-shadow: inset 0 -5px rgba(173,107,22,.08); }
.sentence-label { position: absolute; top: 8px; left: 12px; color: #9a6925; font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.word-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; }
.word-token { min-height: 46px; padding: 8px 15px; border: 2px solid #b6c5d0; border-radius: 13px; color: var(--navy); background: white; box-shadow: 0 5px 0 #aab8c2; font-size: 18px; font-weight: 1000; cursor: grab; transition: transform 130ms ease-out, border-color 130ms ease-out, box-shadow 130ms ease-out; }
.word-token:hover { transform: translateY(-2px); border-color: var(--turquoise); box-shadow: 0 7px 0 #83aeb2; }.word-token:active { cursor: grabbing; transform: translateY(3px); box-shadow: 0 2px 0 #83aeb2; }
.word-token.is-selected { border-color: var(--cherry); background: #fff0f0; box-shadow: 0 0 0 4px rgba(217,65,79,.15), 0 5px 0 #a62e3d; }
.word-token.is-placed { color: #4c5964; border-style: dashed; background: #eee8dd; box-shadow: none; cursor: default; opacity: .57; }
.word-token.is-locked { color: #76818a; background: #f6f0e5; box-shadow: 0 3px 0 #cfc5b3; cursor: default; opacity: .7; }
.word-token.is-punctuation { min-width: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: default; }
.selection-hint { min-height: 16px; margin: 8px 0 0; color: #7b6a50; text-align: center; font-size: 11px; font-weight: 800; }

.float-yard { min-height: 235px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: center; gap: 12px; }
.float-card { position: relative; min-height: 205px; padding: 12px 10px 9px; overflow: hidden; border: 3px solid var(--float-dark); border-radius: 22px; color: var(--navy); background: var(--float-bg); box-shadow: 0 7px 0 var(--float-dark), inset 0 2px rgba(255,255,255,.75); cursor: pointer; transition: transform 150ms ease-out, filter 150ms ease-out, box-shadow 150ms ease-out; }
.float-card:hover, .float-card.is-over { transform: translateY(-3px); filter: brightness(1.04); box-shadow: 0 10px 0 var(--float-dark), 0 0 0 5px rgba(255,255,255,.55); }
.float-card.is-pop { animation: float-pop 480ms cubic-bezier(.2,.85,.25,1.35); }
.float-card.is-wrong { animation: gentle-shake 350ms ease-out; }
.float-card[data-pos="noun"] { --float-bg:#d9f5f1; --float-dark:#23878a; }.float-card[data-pos="verb"] { --float-bg:#ffe3c1; --float-dark:#c56c21; }.float-card[data-pos="adjective"] { --float-bg:#f0e2ff; --float-dark:#7652ae; }.float-card[data-pos="adverb"] { --float-bg:#ffe1e5; --float-dark:#b6384b; }.float-card[data-pos="pronoun"] { --float-bg:#def0ff; --float-dark:#397bad; }.float-card[data-pos="preposition"] { --float-bg:#e8f4cf; --float-dark:#668f30; }
.float-label { position: relative; z-index: 3; display: block; font-size: 17px; font-weight: 1000; letter-spacing: .03em; text-transform: uppercase; }.float-job { position: relative; z-index: 3; display: block; margin-top: 1px; color: #52606b; font-size: 10px; font-weight: 900; }
.float-art { position: absolute; z-index: 1; left: 50%; top: 42px; width: 172px; height: 118px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 7px 5px rgba(57,31,20,.17)); }
.float-card:nth-child(2n) .float-art { transform: translateX(-50%) scaleX(-1); }
.float-cargo { position: absolute; z-index: 4; left: 9px; right: 9px; bottom: 10px; min-height: 35px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 5px 7px; border: 2px solid rgba(16,44,70,.22); border-radius: 10px; background: rgba(255,255,255,.92); }
.float-cargo:empty::after { content: "Drop word here"; color: #74808a; font-size: 9px; font-weight: 900; text-transform: uppercase; }.float-cargo b { padding: 3px 7px; border-radius: 7px; color: white; background: var(--float-dark); font-size: 11px; }
.feedback { min-height: 30px; display: grid; place-items: center; color: #267154; font-size: 13px; font-weight: 900; text-align: center; }.feedback.is-error { color: var(--cherry-dark); }
.action-area { min-height: 64px; display: grid; place-items: center; }
.primary, .explain { min-height: 54px; border: 2px solid #ffe28e; border-radius: 16px; color: white; background: linear-gradient(180deg,#e7505b,#b62f42); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 6px 0 #761c2c; font-weight: 1000; cursor: pointer; transition: transform 130ms ease-out, box-shadow 130ms ease-out; }
.primary { min-width: 245px; padding: 10px 22px; }.primary:hover, .explain:hover { transform: translateY(-2px); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 8px 0 #761c2c; }.primary:active, .explain:active { transform: translateY(4px); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 2px 0 #761c2c; }
.explain-grid { width: min(780px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.explain { padding: 8px 10px; color: var(--navy); border-color: #c4a75f; background: linear-gradient(180deg,#fff8d7,#f1cc6e); box-shadow: inset 0 2px white,0 6px 0 #9d671e; font-size: 12px; }.explain small { display:block; margin-top:3px; color:#6f5d43; font-size:9px; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 32px; max-width: 70%; padding: 11px 19px; opacity: 0; transform: translate(-50%,12px); border: 2px solid #ffe38a; border-radius: 999px; color: var(--navy); background: var(--gold); box-shadow: 0 5px 0 #8b5410,0 11px 24px rgba(7,27,45,.33); font-size: 13px; font-weight: 1000; pointer-events:none; transition: 160ms ease-out; }.toast.is-showing { opacity:1; transform:translate(-50%,0); }
.confetti-sky { position:absolute; z-index:20; inset:0; pointer-events:none; }.confetti-sky i { position:absolute; left:50%; top:45%; width:10px; height:16px; opacity:0; background:var(--gold); animation:confetti 920ms ease-out both; }.confetti-sky i:nth-child(3n) { background:var(--turquoise); }.confetti-sky i:nth-child(3n+1) { background:var(--cherry); }
.game-card.is-miss .play-panel { animation: gentle-shake 350ms ease-out; }
.word-token:focus-visible, .float-card:focus-visible, .primary:focus-visible, .explain:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes mascot-cheer { 0%,100%{transform:translateX(-50%)} 35%{transform:translateX(-50%) translateY(-18px) rotate(-4deg) scale(1.05)} 65%{transform:translateX(-50%) translateY(-4px) rotate(4deg)} }
@keyframes mascot-march { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-5px)} }
@keyframes mascot-oops { 0%,100%{transform:translateX(-50%) rotate(0)} 30%{transform:translateX(calc(-50% - 5px)) rotate(-4deg)} 65%{transform:translateX(calc(-50% + 5px)) rotate(4deg)} }
@keyframes float-pop { 0%{transform:scale(1)} 45%{transform:translateY(-8px) scale(1.05) rotate(-1deg)} 100%{transform:scale(1)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 55%{transform:translateX(5px)} 78%{transform:translateX(-3px)} }
@keyframes confetti { 0%{opacity:1; transform:translate(0,0) rotate(0)} 75%{opacity:1} 100%{opacity:0; transform:translate(var(--x),var(--y)) rotate(300deg)} }
@media (max-height: 760px) { .parade-hud{top:10px;height:64px}.game-card{top:88px;bottom:14px}.play-panel{padding:14px 24px 12px;grid-template-rows:auto 98px minmax(205px,1fr) 26px 58px}.float-card{min-height:185px}.float-art{height:100px}.challenge-copy h1{font-size:30px}.mascot{width:218px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }