:root {
  color-scheme: dark;
  --ink: #fff8dc;
  --ink-dark: #24133d;
  --muted: #d6c5e5;
  --plum-950: #11091f;
  --plum-900: #1d1035;
  --plum-800: #321650;
  --plum-700: #512476;
  --violet: #8e4ae8;
  --violet-bright: #c675ff;
  --gold: #ffc94f;
  --gold-light: #fff1a4;
  --gold-dark: #9d5717;
  --rose: #ff6d8f;
  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: 900px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--plum-950); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #fff4a8; 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; }
.workbench {
  position: relative;
  height: 100%;
  min-height: 626px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #6d3b91;
  border-radius: 28px;
  background: #1b0e31 url("art/vault-backdrop-01.webp") center / cover no-repeat;
  box-shadow: inset 0 0 80px rgba(14,6,25,.55), 0 10px 0 #0b0615, 0 28px 70px rgba(7,2,15,.5);
}
.world-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(12,5,24,.62) 0 13%,rgba(21,9,39,.12) 42%,rgba(13,6,25,.6) 100%); }
.magic-dust { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.magic-dust i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 12px 4px rgba(255,211,92,.65); animation: drift 3.8s ease-in-out infinite alternate; }
.magic-dust i:nth-child(1) { left: 17%; top: 18%; }.magic-dust i:nth-child(2) { left: 29%; top: 61%; animation-delay: -.8s; }
.magic-dust i:nth-child(3) { left: 51%; top: 16%; animation-delay: -1.7s; }.magic-dust i:nth-child(4) { right: 18%; top: 30%; animation-delay: -2.4s; }
.magic-dust i:nth-child(5) { right: 8%; top: 68%; animation-delay: -.4s; }.magic-dust i:nth-child(6) { left: 7%; top: 48%; animation-delay: -3s; }

.lesson-hud { position: absolute; z-index: 20; left: 22px; right: 22px; top: 18px; height: 68px; display: grid; grid-template-columns: 220px 1fr auto auto; align-items: center; gap: 14px; }
.mission-card,.seal-track,.difficulty-card,.scoreboard { border: 1px solid rgba(255,223,127,.32); background: rgba(27,12,48,.9); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 0 rgba(8,3,17,.55); backdrop-filter: blur(12px); }
.mission-card { height: 68px; display: flex; align-items: center; gap: 10px; padding: 7px 15px 7px 8px; border-radius: 19px; }
.mission-card img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.mission-card div { min-width: 0; }.mission-card span,.seal-track > span,.difficulty-card span,.scoreboard span { color: #c9afd9; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.mission-card strong { display: block; margin-top: 3px; overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }

.seal-track { justify-self: center; min-width: 320px; height: 68px; display: grid; place-content: center; gap: 7px; padding: 7px 18px; border-radius: 19px; text-align: center; }
.seal-track > div { display: flex; align-items: center; }
.seal-track i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #7a5392; border-radius: 50%; color: #b99acb; background: #2b1744; font-size: 12px; font-style: normal; font-weight: 1000; transition: transform 180ms ease-out,background 180ms ease-out,border-color 180ms ease-out; }
.seal-track b { width: 34px; height: 3px; background: #57376d; }
.seal-track i.is-current { transform: scale(1.15); border-color: var(--gold); color: var(--ink-dark); background: var(--gold); box-shadow: 0 0 0 5px rgba(255,201,79,.13),0 0 18px rgba(255,201,79,.5); }
.seal-track i.is-complete { border-color: #b878ff; color: white; background: var(--violet); }
.seal-track i.is-complete::before { content: "✓"; }.seal-track i.is-complete { font-size: 0; }.seal-track i.is-complete::before { font-size: 15px; }

.difficulty-card { width: 225px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 9px 14px; border-radius: 17px; }
.difficulty-card span b { color: var(--gold-light); font-size: 14px; }.difficulty-card strong { font-size: 11px; }
.difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #42245b; }
.difficulty-card > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9048e8,var(--gold)); transition: width 220ms ease-out; }
.scoreboard { height: 68px; display: flex; align-items: stretch; padding: 7px; border-radius: 19px; }
.scoreboard > div { min-width: 68px; display: grid; place-content: center; padding: 0 9px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(222,192,238,.18); }
.scoreboard strong { display: block; margin-top: 2px; font-size: 21px; line-height: 1; }
.scoreboard strong i { color: var(--gold); font-style: normal; font-size: 15px; }

.challenge-card { position: absolute; z-index: 3; left: 22px; right: 22px; top: 102px; bottom: 20px; display: grid; grid-template-columns: 230px minmax(600px,1fr); gap: 18px; }
.mascot-zone { position: relative; min-width: 0; display: flex; align-items: end; justify-content: center; overflow: visible; }
.wizard { position: relative; z-index: 3; width: min(245px,100%); height: auto; max-height: 74%; object-fit: contain; object-position: bottom; transform-origin: 50% 92%; filter: drop-shadow(0 14px 14px rgba(12,4,24,.48)); transition: transform 180ms ease-out,filter 180ms ease-out; }
.wizard-bubble { position: absolute; z-index: 5; left: 8px; right: 8px; top: 7%; min-height: 74px; display: grid; place-items: center; padding: 14px 16px; border: 3px solid var(--gold-dark); border-radius: 22px 22px 22px 8px; color: var(--ink-dark); background: #fff8d6; box-shadow: 0 6px 0 rgba(77,36,14,.55),0 12px 28px rgba(10,3,20,.25); font-size: 15px; font-weight: 900; line-height: 1.25; text-align: center; }
.wizard-bubble::after { position: absolute; left: 32px; bottom: -14px; width: 22px; height: 22px; content: ""; transform: rotate(45deg); border-right: 3px solid var(--gold-dark); border-bottom: 3px solid var(--gold-dark); background: #fff8d6; }
.mascot-zone.is-cheering .wizard { animation: wizard-cheer 650ms ease-out; filter: drop-shadow(0 0 22px rgba(255,218,94,.65)) drop-shadow(0 14px 14px rgba(12,4,24,.48)); }
.mascot-zone.is-thinking .wizard { animation: wizard-think 2.2s ease-in-out infinite; }
.mascot-zone.is-oops .wizard { animation: wizard-oops 420ms ease-out; }
.crystal-prop { position: absolute; z-index: 2; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(153,65,255,.65)); pointer-events: none; }
.crystal-prop-left { left: -18px; bottom: -18px; }.crystal-prop-right { z-index: 2; right: -27px; bottom: -28px; width: 145px; height: 145px; transform: scaleX(-1); }

.play-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(300px,1fr) 38px auto; align-content: stretch; gap: 8px; padding: 17px 20px 16px; border: 2px solid rgba(255,215,112,.46); border-radius: 28px; background: linear-gradient(180deg,rgba(37,16,62,.93),rgba(20,9,38,.96)); box-shadow: inset 0 1px rgba(255,255,255,.1),0 9px 0 rgba(8,3,17,.65),0 22px 48px rgba(5,2,12,.38); backdrop-filter: blur(10px); }
.challenge-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 4px; }
.challenge-copy { min-width: 0; }.challenge-copy > span { color: var(--gold); font-size: 10px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.challenge-copy h1 { margin: 4px 0 3px; font-size: clamp(27px,2.7vw,40px); line-height: 1; letter-spacing: -.035em; text-shadow: 0 3px 0 rgba(20,7,35,.65); }
.challenge-copy p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.notation-track { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(205,157,239,.2); border-radius: 999px; background: rgba(15,7,28,.52); }
.notation-track span { min-width: 48px; padding: 6px 8px; border-radius: 999px; color: #aa8dbd; font-size: 10px; font-weight: 900; text-align: center; transition: color 160ms ease-out,background 160ms ease-out; }
.notation-track span.is-active { color: var(--ink-dark); background: var(--gold); box-shadow: 0 2px 0 var(--gold-dark); }
.notation-track i { width: 14px; height: 2px; border-radius: 2px; background: #58356d; }

.scale-stage { position: relative; min-height: 300px; overflow: hidden; border: 2px solid #74469a; border-radius: 24px; background: radial-gradient(circle at 50% 60%,rgba(135,61,199,.28),transparent 48%),linear-gradient(180deg,rgba(19,8,34,.78),rgba(48,22,73,.82)); box-shadow: inset 0 0 46px rgba(5,2,12,.6),0 4px 0 #0f071c; }
.scale-stage::after { position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -19%; height: 48%; content: ""; transform: perspective(350px) rotateX(65deg); border: 2px solid rgba(224,171,255,.22); border-radius: 50%; background: radial-gradient(circle,rgba(145,69,211,.2),transparent 66%); box-shadow: 0 0 34px rgba(153,75,219,.24); }
.rune-ring { position: absolute; z-index: 0; left: 50%; bottom: -96px; width: 480px; height: 190px; transform: translateX(-50%); border: 3px solid rgba(238,190,255,.19); border-radius: 50%; box-shadow: inset 0 0 0 13px rgba(151,69,213,.08),0 0 30px rgba(151,69,213,.2); }
.equation-ribbon { position: absolute; z-index: 8; left: 50%; top: 12px; min-width: 196px; min-height: 40px; display: grid; place-items: center; padding: 7px 19px; transform: translateX(-50%); border: 2px solid #c882ff; border-radius: 14px; color: white; background: linear-gradient(180deg,#5f2c87,#3a1b5a); box-shadow: inset 0 1px rgba(255,255,255,.18),0 4px 0 #1d0c31,0 0 18px rgba(176,86,245,.28); font-size: 22px; font-weight: 1000; letter-spacing: .02em; }
.equation-ribbon.is-hidden { min-width: 215px; color: #ead8f6; font-size: 11px; letter-spacing: .07em; }
.scale { position: absolute; z-index: 3; inset: 52px 18px 0; }
.fulcrum { position: absolute; z-index: 2; left: 50%; bottom: 9px; width: 0; height: 0; transform: translateX(-50%); border-left: 62px solid transparent; border-right: 62px solid transparent; border-bottom: 153px solid #a5631d; filter: drop-shadow(0 7px 0 #5b2d0e) drop-shadow(0 0 12px rgba(255,195,61,.25)); }
.fulcrum::after { position: absolute; left: -33px; top: 116px; width: 66px; height: 18px; content: ""; border-radius: 10px; background: linear-gradient(180deg,#fff0a1,#d99020); box-shadow: inset 0 2px white,0 4px 0 #6d380e; }
.fulcrum i { position: absolute; left: -14px; top: 0; width: 28px; height: 28px; transform: rotate(45deg); border: 4px solid #6a360e; border-radius: 8px; background: linear-gradient(135deg,#fff29c,#e39820); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.beam { position: absolute; z-index: 5; left: 9%; right: 9%; top: 87px; height: 18px; transform-origin: 50% 50%; border: 3px solid #6a360e; border-radius: 11px; background: linear-gradient(180deg,#fff09a 0,#f4bd38 44%,#bd6c18 100%); box-shadow: inset 0 3px rgba(255,255,255,.45),0 5px 0 rgba(50,21,4,.52),0 0 14px rgba(255,194,55,.24); }
.beam::before,.beam::after { position: absolute; top: 7px; width: 3px; height: 66px; content: ""; background: #e2a32d; box-shadow: 0 0 0 1px #6a360e; }
.beam::before { left: 10%; }.beam::after { right: 10%; }
.beam-pin { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); border: 3px solid #6a360e; border-radius: 50%; background: var(--violet-bright); box-shadow: inset 0 0 0 4px #6d2aa0,0 0 12px rgba(202,112,255,.7); }
.pan { position: absolute; z-index: 6; top: 155px; width: 35%; min-height: 103px; display: grid; grid-template-rows: auto 1fr; padding: 9px 12px 12px; border: 3px solid #7b420f; border-top: 0; border-radius: 0 0 55px 55px; background: linear-gradient(180deg,#ffeaa0,#d99827); box-shadow: inset 0 -8px rgba(151,79,12,.22),0 7px 0 rgba(48,20,4,.48),0 0 18px rgba(255,193,55,.18); transform-origin: 50% -64px; }
.pan::before { position: absolute; left: -3px; right: -3px; top: -4px; height: 7px; content: ""; border-radius: 5px; background: linear-gradient(180deg,#ffef9b,#b96813); box-shadow: 0 2px 0 #71380d; }
.pan-left { left: 2.5%; }.pan-right { right: 2.5%; }
.pan-label { color: #65320d; font-size: 9px; font-weight: 1000; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.pan-items { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 5px; }
.mystery-tile,.x-tile { width: 57px; height: 57px; display: grid; place-items: center; flex: 0 0 auto; border: 3px solid #3a1755; border-radius: 15px; background: linear-gradient(145deg,#b967ff,#642596); box-shadow: inset 0 0 0 4px rgba(255,255,255,.14),0 5px 0 #32124e,0 0 14px rgba(151,57,224,.5); color: white; font-size: 29px; font-weight: 1000; }
.mystery-tile { position: relative; color: transparent; }.mystery-tile::after { position: absolute; content: "?"; color: var(--gold-light); font-size: 31px; text-shadow: 0 2px 0 #65320d,0 0 12px rgba(255,225,99,.75); }
.mystery-tile.has-mark { color: transparent; }.x-tile { color: var(--gold-light); }
.scale-stage.is-isolated .mystery-tile,.scale-stage.is-isolated .x-tile { animation: box-glow 850ms ease-out infinite alternate; }
.dot-cluster { max-width: 220px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.counter-dot { width: 23px; height: 23px; border: 2px solid #3d155e; border-radius: 50%; background: radial-gradient(circle at 34% 27%,#f1c5ff 0 10%,#b55afb 33%,#5b218f 75%); box-shadow: 0 3px 0 #351149,0 0 10px rgba(169,72,238,.55); animation: token-in 190ms ease-out both; }
.op-symbol { color: #6d330c; font-size: 24px; font-weight: 1000; }
.number-tile { min-width: 51px; height: 51px; display: grid; place-items: center; padding: 0 10px; border: 3px solid #492060; border-radius: 14px; background: linear-gradient(145deg,#efe1ff,#b48bdd); box-shadow: inset 0 2px white,0 4px 0 #6d448c; color: #321441; font-size: 24px; font-weight: 1000; }
.number-tile.is-negative { color: #661c39; background: linear-gradient(145deg,#ffdbea,#ec91b5); box-shadow: inset 0 2px white,0 4px 0 #a3486b; }
.empty-side { color: #5f3417; font-size: 13px; font-weight: 900; }

.scale-stage.is-balancing .beam { animation: beam-settle 570ms ease-out; }.scale-stage.is-balancing .pan-left { animation: pan-left-settle 570ms ease-out; }.scale-stage.is-balancing .pan-right { animation: pan-right-settle 570ms ease-out; }
.scale-stage.is-illegal .beam { animation: beam-tip 760ms ease-in-out; }.scale-stage.is-illegal .pan-left { animation: pan-left-tip 760ms ease-in-out; }.scale-stage.is-illegal .pan-right { animation: pan-right-tip 760ms ease-in-out; }
.scale-stage.is-pointing .pan { animation: pan-point 520ms ease-out 2; }

.reveal-card { position: absolute; z-index: 12; left: 50%; top: 50%; width: 154px; height: 112px; opacity: 0; transform: translate(-50%,-44%) rotateY(90deg) scale(.72); transform-style: preserve-3d; pointer-events: none; }
.reveal-card > div { height: 100%; display: grid; place-content: center; padding: 12px; border: 4px solid #fff1a2; border-radius: 21px; color: var(--ink-dark); background: linear-gradient(145deg,#fffbe1,#ffc94f); box-shadow: inset 0 0 0 5px rgba(155,83,15,.15),0 8px 0 #7a3d0d,0 0 36px rgba(255,215,83,.72); text-align: center; }
.reveal-card span { color: #70400f; font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.reveal-card strong { display: block; margin-top: 2px; font-size: 34px; line-height: 1; }
.reveal-card.is-revealed { opacity: 1; animation: card-reveal 650ms cubic-bezier(.2,.85,.25,1.25) both; }
.celebration-burst { position: absolute; z-index: 11; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.celebration-burst i { position: absolute; width: 12px; height: 12px; opacity: 0; background: var(--gold); clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); animation: burst 760ms ease-out both; }
.celebration-burst i:nth-child(2n) { background: var(--violet-bright); }.celebration-burst i:nth-child(3n) { width: 8px; height: 8px; background: white; }

.feedback { min-height: 38px; display: grid; place-items: center; padding: 3px 8px 0; color: #f5dbff; font-size: 14px; font-weight: 900; text-align: center; }
.feedback.is-error { color: #ffb1c3; }
.action-area { min-height: 72px; display: flex; align-items: end; justify-content: center; gap: 11px; }
.move-grid,.answer-grid,.explain-grid { width: min(780px,100%); display: grid; gap: 12px; }
.move-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.answer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.explain-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.move,.answer,.explain,.primary { position: relative; min-height: 62px; border: 2px solid #a76cce; border-radius: 17px; background: linear-gradient(180deg,#6d3397,#4a216d); box-shadow: inset 0 2px rgba(255,255,255,.13),0 6px 0 #241035; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out,filter 140ms ease-out; }
.move { padding: 8px 14px; }.move > span { display: block; color: var(--gold-light); font-size: 20px; line-height: 1.05; }.move small,.explain small { display: block; margin-top: 4px; color: #d8c2e8; font-size: 10px; font-weight: 800; }
.move::before { position: absolute; left: 12px; top: 50%; width: 25px; height: 25px; display: grid; place-items: center; content: "✦"; transform: translateY(-50%); border-radius: 50%; color: #5a2b08; background: var(--gold); box-shadow: 0 2px 0 #75400e; font-size: 12px; }
.move.is-risky { border-color: #b9657e; border-style: dashed; background: linear-gradient(180deg,#60304f,#402039); }.move.is-risky::before { content: "!"; color: white; background: #c44d72; box-shadow: 0 2px 0 #682039; }
.answer { color: var(--gold-light); font-size: 28px; }.explain { padding: 8px 12px; font-size: 13px; }
.move:hover,.answer:hover,.explain:hover { transform: translateY(-2px); border-color: #edc8ff; filter: brightness(1.12); box-shadow: inset 0 2px rgba(255,255,255,.13),0 8px 0 #241035; }
.move:active,.answer:active,.explain:active { transform: translateY(4px); box-shadow: inset 0 2px rgba(255,255,255,.13),0 2px 0 #241035; }
.primary { min-width: 255px; padding: 0 25px; border-color: #fff0a1; color: #321509; background: linear-gradient(180deg,#fff09b,#edae29); box-shadow: inset 0 2px white,0 6px 0 #7c3f0e; font-size: 16px; }
.primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 2px white,0 8px 0 #7c3f0e; }.primary:active { transform: translateY(4px); box-shadow: inset 0 2px white,0 2px 0 #7c3f0e; }
.primary.is-orange { color: white; border-color: #dca2ff; background: linear-gradient(180deg,#a957e3,#672792); box-shadow: inset 0 2px rgba(255,255,255,.2),0 6px 0 #321246; }

.toast { position: absolute; z-index: 40; left: 50%; bottom: 30px; max-width: 76%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border: 2px solid #ffe68a; border-radius: 999px; color: #2e1408; background: #ffdc6e; box-shadow: 0 5px 0 #6c350c,0 10px 24px rgba(5,2,12,.4); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.workbench.is-miss .play-panel { animation: gentle-shake 390ms ease-out; }
.workbench.is-celebrating .play-panel { box-shadow: inset 0 1px rgba(255,255,255,.1),0 9px 0 rgba(8,3,17,.65),0 0 55px rgba(255,208,75,.28); }

@keyframes drift { to { transform: translate(7px,-11px) scale(1.35); opacity: .45; } }
@keyframes token-in { from { opacity: 0; transform: translateY(9px) scale(.68) rotate(-9deg); } 70% { transform: translateY(-2px) scale(1.08); } }
@keyframes box-glow { to { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2),0 6px 0 #32124e,0 0 0 7px rgba(255,216,84,.16),0 0 24px rgba(255,216,84,.65); } }
@keyframes beam-settle { 0%{transform:rotate(0)} 28%{transform:rotate(-2.7deg)} 57%{transform:rotate(1.5deg)} 82%{transform:rotate(-.7deg)} 100%{transform:rotate(0)} }
@keyframes pan-left-settle { 28%{transform:translateY(-9px)} 57%{transform:translateY(4px)} 100%{transform:translateY(0)} }
@keyframes pan-right-settle { 28%{transform:translateY(9px)} 57%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@keyframes beam-tip { 0%,100%{transform:rotate(0)} 24%,72%{transform:rotate(8deg)} }
@keyframes pan-left-tip { 0%,100%{transform:translateY(0)} 24%,72%{transform:translateY(-27px)} }
@keyframes pan-right-tip { 0%,100%{transform:translateY(0)} 24%,72%{transform:translateY(27px)} }
@keyframes pan-point { 50% { box-shadow: inset 0 -8px rgba(151,79,12,.22),0 7px 0 rgba(48,20,4,.48),0 0 0 9px rgba(215,154,255,.22),0 0 30px rgba(199,113,255,.5); } }
@keyframes card-reveal { 0% { opacity: 0; transform: translate(-50%,-44%) rotateY(90deg) scale(.72); } 55% { opacity: 1; transform: translate(-50%,-52%) rotateY(-10deg) scale(1.08); } 100% { opacity: 1; transform: translate(-50%,-50%) rotateY(0) scale(1); } }
@keyframes burst { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.3); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x),var(--burst-y)) rotate(170deg) scale(1.2); } }
@keyframes wizard-cheer { 0%,100%{transform:translateY(0) rotate(0)} 32%{transform:translateY(-20px) rotate(-4deg) scale(1.05)} 62%{transform:translateY(-5px) rotate(4deg)} }
@keyframes wizard-think { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-5px) rotate(1deg)} }
@keyframes wizard-oops { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-5deg) translateX(-4px)} 65%{transform:rotate(4deg) translateX(4px)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

@media (max-width: 1120px) {
  .lesson-hud { grid-template-columns: 200px 1fr auto; }.difficulty-card { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); }.scoreboard > div { min-width: 60px; }.seal-track { min-width: 286px; }.seal-track b { width: 26px; }
  .challenge-card { grid-template-columns: 190px minmax(600px,1fr); }.wizard-bubble { font-size: 13px; }.wizard { width: 205px; }
}
@media (max-height: 760px) {
  .lesson-hud { top: 12px; height: 62px; }.mission-card,.seal-track,.scoreboard { height: 62px; }.challenge-card { top: 87px; bottom: 14px; }.play-panel { padding-top: 12px; grid-template-rows: auto minmax(270px,1fr) 32px auto; }.challenge-header { min-height: 70px; }.challenge-copy h1 { font-size: 29px; }.scale-stage { min-height: 270px; }.action-area { min-height: 63px; }.move,.answer,.explain,.primary { min-height: 56px; }.pan { top: 143px; }.beam { top: 78px; }.fulcrum { transform: translateX(-50%) scale(.9); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}