@charset "UTF-8";
:root { font-family: "Trebuchet MS", "Segoe UI", "Nirmala UI", sans-serif; color: #fff; background: #20134a; --teal: #6df5d4; --coral: #ff75c4; --ink: #291454; --muted: #d0c7ed; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 50% 15%, #6435ad 0, transparent 60%), radial-gradient(ellipse at 5% 90%, #34328a, transparent 55%), #20134a; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle, #fff7 1px, transparent 2px), radial-gradient(circle, #af92ff50 3px, transparent 4px); background-size: 91px 107px, 203px 179px; background-position: 13px 21px, 45px 61px; mask-image: linear-gradient(#000, #0004); }
button, select { font: inherit; } button, a, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button { cursor: pointer; } button:disabled { cursor: default; } a { color: inherit; text-decoration: none; } button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #fff58c; outline-offset: 5px; } [hidden] { display: none !important; }
.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; }
.header { position: relative; max-width: 1200px; margin: auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; font-size: 21px; font-weight: 900; letter-spacing: -.5px; } .brand img { width: 85px; height: 43px; object-fit: contain; background: white; padding: 5px; border-radius: 10px; } .brand small { display: block; font-size: 8px; letter-spacing: 1.3px; color: #c1b3e7; margin-top: 4px; }
.controls { display: flex; align-items: center; gap: 10px; font-size: 12px; } .controls select, .sound, .controls a { min-height: 38px; border: 1px solid #9b7cce70; border-radius: 12px; background: #170d38a8; color: white; padding: 9px 11px; } .controls select option { background: #28154b; } .sound[aria-pressed=true] { color: #80ffdb; border-color: #5ceac1; }
main { max-width: 1100px; margin: auto; padding: 10px 26px 25px; position: relative; } footer { color: #a699cc; text-align: center; font-size: 11px; padding: 12px 20px 22px; position: relative; }
.panel { position: relative; padding: 30px 36px; border-radius: 35px; background: linear-gradient(145deg,#533183a8,#21143cc2); border: 2px solid #9572c65c; box-shadow: inset 0 2px 0 #ffffff17, 0 10px 0 #130b2c66, 0 25px 80px #120a3166; animation: enter .35s ease both; }
.center { text-align: center; } .eyebrow { display: block; color: #d0b8ff; font-size: 10px; letter-spacing: 2px; font-weight: 900; margin: 0 0 16px; }
h1 { font-size: clamp(36px,5.8vw,72px); font-weight: 950; letter-spacing: -2.3px; line-height: 1.06; margin: 0 0 20px; text-shadow: 0 4px 0 #180c3560; } h1 em { font-family: inherit; font-style: normal; color: #ffde70; text-shadow: 0 4px 0 #a95d3c70; }
p { max-width: 590px; margin: 14px auto; color: #dfd5f7; font-size: 15px; line-height: 1.7; }
.primary, .secondary { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 52px; border-radius: 18px; padding: 15px 25px; font-size: 16px; font-weight: 900; transition: transform .15s, box-shadow .15s; }
.primary { background: linear-gradient(#ffe994,#ffc543); color: #4a275a; border: 2px solid #fff0ac; box-shadow: 0 6px 0 #b86b25, 0 9px 0 #1f103d, 0 12px 26px #0c051d60; } .primary:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 0 #b86b25, 0 12px 0 #1f103d; } .primary:active { transform: translateY(5px); box-shadow: 0 1px 0 #b86b25, 0 4px 0 #1f103d; } .primary span { font-size: 22px; }
.secondary { background: #6947a5; color: white; border: 2px solid #ac8ce3; box-shadow: 0 4px 0 #31195e; } .secondary:hover { transform: translateY(-2px); } .actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 23px; }
.intro { padding-top: 25px; padding-bottom: 35px; overflow: hidden; } .intro .eyebrow { display: inline-block; border: 1px solid #9976c9; border-radius: 30px; padding: 9px 15px; color: #e5d8ff; } .intro h1 { position: relative; z-index: 1; } .intro p { max-width: 560px; } .intro-note { font-size: 12px; }
.hero-orbit { position: relative; width: min(100%,500px); height: 218px; margin: 0 auto 15px; display: grid; place-items: center; }
.hero-orbit::before { content: ''; position: absolute; inset: -55px -15px; background: repeating-conic-gradient(from 9deg,#c89cff0e 0 12deg,transparent 12deg 28deg); border-radius: 50%; animation: orbit 45s linear infinite; mask-image: radial-gradient(#000,transparent 68%); }
.hero-orbit::after { content: '✦'; position: absolute; right: 12%; top: 24px; color: #ffe578; font-size: 40px; filter: drop-shadow(0 0 14px #ffdf7955); animation: star-bob 2.2s ease-in-out infinite; }
.hero-pill { position: relative; display: flex; width: fit-content; transform: rotate(-17deg); filter: drop-shadow(0 28px 16px #08021a66); animation: hero-float 3.5s ease-in-out infinite; }
.hero-pill span { position: relative; display: grid; place-items: center; width: 154px; height: 105px; padding: 15px; color: #073f57; border-radius: 65px 5px 5px 65px; font-size: 22px; font-weight: 950; background: linear-gradient(180deg,#b0fff3 0%,#49eadc 12%,#22c9d1 48%,#13849d 87%,#26a6b6 100%); box-shadow: inset 0 4px 3px #fff9,inset 0 -5px 5px #08295555; border: 1px solid #85fff0; text-shadow: 0 1px #b0f5f3; }
.hero-pill span+span { color: #632251; border-color: #ffc0e3; border-radius: 5px 65px 65px 5px; background: linear-gradient(180deg,#ffe4f3,#ffb3e1 12%,#f677c0 48%,#bb459a 87%,#e171b9); margin-left: -2px; text-shadow: 0 1px #ffd7ef; }
.hero-pill span::before { content: ''; position: absolute; top: 10%; left: 20%; right: 10%; height: 17%; background: linear-gradient(#ffffffe0,#fff0); border-radius: 50%; filter: blur(1px); }
.hero-pill::after { content: '✦'; position: absolute; left: -38px; bottom: 5px; color: #75ffe1; font-size: 28px; text-shadow: none; }
.steps { display: flex; justify-content: center; gap: 25px; margin: 25px 0; font-size: 13px; color: #e7ddfa; } .steps span { display: flex; gap: 8px; align-items: center; } .steps b { display: grid; place-items: center; width: 27px; height: 27px; background: #825ac4; border: 1px solid #b08ce9; border-radius: 9px; color: white; box-shadow: 0 3px 0 #281446; }
.facts { display: flex; justify-content: center; gap: 15px; margin: 28px 0; } .facts>span { min-width: 95px; padding: 17px 20px; border-radius: 18px; background: #251441; border: 1px solid #855dc0; font-size: 12px; color: #ddd0f6; } .facts strong { display: block; color: #ffdf75; font-size: 31px; margin-bottom: 4px; }
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; } .lesson-top .eyebrow { margin: 0; } .lesson-top>.helper { font-weight: 800; color: #ffe484; padding: 6px 12px; background: #261342; border-radius: 12px; }
.lesson h1, .game h1 { font-size: clamp(25px,3.5vw,42px); letter-spacing: -1px; line-height: 1.2; }
.dots { display: flex; justify-content: center; gap: 12px; } .dots i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #8861b5; background: #281344; color: #a988d1; font-style: normal; font-size: 13px; font-weight: 900; } .dots i.done { color: #143a43; background: #78edc9; border-color: #b8ffe4; animation: pop .45s both; } .dots i.current { border-color: #ffdf78; box-shadow: 0 0 0 4px #ffdf7820; color: #ffdf78; }
.capsule-stage { position: relative; --half-width: clamp(120px,24vw,204px); --separation: 85px; max-width: 730px; height: 260px; margin: 22px auto 15px; display: flex; align-items: center; justify-content: center; gap: var(--separation); border: 3px solid #af93de; border-radius: 32px; background: radial-gradient(ellipse at 50% 40%,#efe7ff,#c2afe6); box-shadow: inset 0 6px 0 #fff7,inset 0 -8px 0 #8769b830,0 9px 0 #140a2c55; }
.capsule-stage::before { content: ''; position: absolute; inset: 22px; border: 2px dashed #8965b444; border-radius: 24px; pointer-events: none; } .capsule-stage::after { content: '→'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #845daf; font-size: 34px; font-weight: 900; pointer-events: none; } .capsule-stage.is-joined::after { display: none; }
.half { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px 14px 14px 26px; border-radius: 100px 7px 7px 100px; border: 1px solid #0b7d9b; color: #063e57; background: linear-gradient(180deg,#b4fff5 0%,#65f5e5 9%,#2edfd5 25%,#20c8cc 48%,#1399ad 77%,#096f94 94%,#1d9baa 100%); box-shadow: inset 0 3px 2px #ffffffc4,inset 0 -5px 4px #073e6940,0 8px 3px -3px #27205d38,0 15px 19px -7px #21174866; text-shadow: 0 1px 0 #b5ffff77; user-select: none; -webkit-user-select: none; touch-action: none; font: 900 16px/1.2 "Trebuchet MS","Segoe UI","Nirmala UI",sans-serif; text-align: center; overflow-wrap: anywhere; isolation: isolate; cursor: grab; }
.half.meaning { padding: 14px 26px 14px 14px; border-radius: 7px 100px 100px 7px; color: #641447; border-color: #b34791; background: linear-gradient(180deg,#ffe4f2,#ffc3e7 9%,#ff9bd7 25%,#f577c2 48%,#d74ca5 77%,#a8368a 94%,#cf5aa6); text-shadow: 0 1px 0 #ffe1f777; }
.half::before { content: ''; position: absolute; top: 8%; left: 20%; right: 11%; height: 17%; border-radius: 50%; background: linear-gradient(#ffffffc4,#ffffff08); filter: blur(.6px); pointer-events: none; z-index: -1; }
.half.selected { outline: 3.5px solid #fff6a0; outline-offset: 5px; filter: brightness(1.12) drop-shadow(0 0 14px #ffdd6888); }
.half.hover-target { outline: none !important; box-shadow: 0 0 0 3px #6df5d4aa, 0 0 28px #6df5d4cc, 0 0 45px #ffe07566, inset 0 0 16px #6df5d455 !important; filter: brightness(1.22) drop-shadow(0 0 14px #6df5d4) !important; animation: magnet-hum 0.45s ease-in-out infinite alternate !important; }
.half.hover-target::after { box-shadow: 0 0 24px 8px #6df5d4, 0 0 12px 3px #fff; }
.half:active { cursor: grabbing; }
.capsule-stage .half { width: var(--half-width) !important; flex: 0 0 var(--half-width) !important; max-width: var(--half-width) !important; height: clamp(68px, 11dvh, 98px); font-size: clamp(14px, 2vw, 20px); z-index: 2; box-sizing: border-box; }
.capsule-stage.is-joined { gap: 0; transition: gap .32s cubic-bezier(.18,1.3,.35,1); }
.is-joined .half { animation: snap .48s .17s both; }
.is-joined .half::after { opacity: 0; }
.is-joined .half.parameter { border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-right: 2px solid #207d9633; }
.is-joined .half.meaning { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.demo-running .half.parameter { animation: demo-drag 2.6s ease-in-out both; } .demo-running .half.meaning { animation: demo-target 2.6s ease both; }
.demo-steps { display: flex; justify-content: center; gap: 9px; margin: 16px 0; } .demo-steps span { font-size: 12px; font-weight: 800; background: #2a1749; border: 1px solid #8863bf; padding: 9px 14px; border-radius: 12px; color: #d9c6f5; } .demo-steps span.active { background: #ffe081; border-color: #fff0b4; color: #4c2860; transform: translateY(-3px); box-shadow: 0 4px 0 #a66d32; }
.equation { font-size: clamp(21px,3vw,33px); font-weight: 950; line-height: 1.3; color: #fff294; min-height: 43px; text-shadow: 0 3px 0 #241240; } .equation.pop { animation: pop .55s cubic-bezier(.2,1.6,.4,1) both; }
    .helper { font-size: 12px; min-height: 23px; } .demo-controls { min-height: 56px; }
.legend { display: flex; justify-content: center; gap: 23px; font-size: 11px; color: #ded0f9; margin: 14px 0; } .legend span { display: flex; align-items: center; gap: 8px; } .legend i { display: inline-block; width: 17px; height: 10px; border-radius: 7px 2px 2px 7px; background: #52e5dc; box-shadow: inset 0 2px #bbfff3; } .legend span+span i { background: #ff90ce; border-radius: 2px 7px 7px 2px; box-shadow: inset 0 2px #ffd4eb; }
.game { padding: 23px; } .game-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; } .game-top .eyebrow { margin-bottom: 8px; } .game-top h1 { margin: 0; max-width: 760px; font-size: clamp(26px,3.5vw,39px); }
.clock { min-width: 86px; text-align: center; background: linear-gradient(#6446a0,#392264); padding: 10px 12px; border: 3px solid #a78adc; border-radius: 24px; box-shadow: 0 5px 0 #190d36; flex-shrink: 0; transform: rotate(3deg); } .clock strong { font-size: 34px; color: #fff0a1; font-variant-numeric: tabular-nums; } .clock span { display: block; font-size: 9px; color: #e1d4fc; } .clock.urgent { border-color: #ff9bac; background: #8c2e6a; animation: heartbeat .8s ease-in-out infinite; }
.timer-track { height: 10px; background: #1c1037; border: 2px solid #755098; border-radius: 12px; overflow: hidden; margin-top: 20px; } .timer-track>div { height: 100%; border-radius: 10px; background: linear-gradient(90deg,#ff7bcb,#c48aff,#7cffe0); box-shadow: 0 0 12px #c5afff; transform-origin: left; transition: transform .1s linear; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; font-size: 12px; color: #dfd3f5; } .status-row strong { background: #2a1849; padding: 7px 12px; border: 1px solid #8a6ab4; border-radius: 10px; color: #8affdc; }
.board { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-rows: 115px; gap: 20px 26px; padding: 28px 25px; margin: 12px 0 18px; background: radial-gradient(ellipse at 50% 40%,#e8deff,#b9a1dd); border: 4px solid #dabdf5; border-radius: 28px; box-shadow: inset 0 6px 0 #fff6,inset 0 -7px 0 #6d4d9220,0 8px 0 #180a3460; align-items: center; }
.board::before { content: ''; position: absolute; inset: 14px; border: 2px dashed #8c6eb24a; border-radius: 20px; pointer-events: none; }
.board .half {
  width: 100%;
  height: 83px;
  font-size: 14px;
  transform: translateY(0) !important;
  border-radius: 40px 3px 3px 40px !important;
  border-right: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 0 3px 2px rgba(255, 255, 255, 0.85), inset 0 -4px 4px rgba(7, 62, 105, 0.3), 0 6px 14px rgba(18, 8, 40, 0.4) !important;
  animation: board-pill-float 3.2s ease-in-out infinite alternate !important;
  animation-delay: var(--delay, 0s) !important;
}
.board .half.meaning {
  border-radius: 3px 40px 40px 3px !important;
  border-right: 1px solid #b34791 !important;
  border-left: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 0 3px 2px rgba(255, 255, 255, 0.85), inset 0 -4px 4px rgba(100, 20, 71, 0.3), 0 6px 14px rgba(18, 8, 40, 0.4) !important;
}
.board .half::after { display: none !important; }
.board .half.selected, .board .half.hover-target { animation-play-state: paused !important; }
@keyframes board-pill-float {
  0% { transform: translateY(-2px); }
  100% { transform: translateY(2px); }
}
.half.used { visibility: hidden; pointer-events: none; } .half.drag-source { opacity: .15; animation-play-state: paused; }
.drag-ghost { position: fixed !important; z-index: 80 !important; pointer-events: none !important; margin: 0 !important; animation: none !important; transform: scale(1.06) translateY(-4px) !important; filter: drop-shadow(0 16px 22px rgba(10, 3, 30, 0.65)) brightness(1.08); transition: transform .08s ease-out, filter .15s ease-out; }
.drag-ghost.magnet-attracted { box-shadow: 0 0 24px #6df5d4bb, inset 0 0 14px rgba(255,255,255,0.7) !important; filter: drop-shadow(0 0 16px #6df5d4aa) brightness(1.18) !important; }
.flying-half { position: fixed; z-index: 85; pointer-events: none; animation: none !important; margin: 0; transform-origin: center; } .flying-half::after { animation: rim-close .3s .17s forwards; }
.wrong { animation: shake .4s !important; outline: 3px solid #b33875; outline-offset: 3px; } .board.impact,.capsule-stage.impact { animation: board-hit .25s ease-out; }
.tray { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 15px; background: #140c2ba3; border: 2px solid #6b4b94; border-radius: 20px; min-height: 66px; } .tray-label { font-size: 10px; color: #bca4db; font-weight: 900; letter-spacing: 1px; margin-right: 9px; }
.mini-pill { display: inline-flex; max-width: 100%; font-size: 10px; font-weight: 900; filter: drop-shadow(0 4px 2px #0c042d66); animation: pop .45s both; } .mini-pill span { display: grid; place-items: center; padding: 10px 12px; background: linear-gradient(#a5fff1,#31d6cb 45%,#168ca8); color: #073e54; border-radius: 30px 2px 2px 30px; box-shadow: inset 0 2px 1px #fff9; } .mini-pill span+span { background: linear-gradient(#ffcfed,#f686c9 45%,#c14a9b); color: #631d4d; border-radius: 2px 30px 30px 2px; }
.empty-slot { display: grid; place-items: center; width: 56px; height: 29px; border-radius: 20px; border: 2px dashed #7c5caa; background: #331c554d; font-size: 11px; color: #997abd; } .game-feedback { font-size: 15px; text-align: center; color: #fff09b; font-weight: 900; margin: 16px 0 0; min-height: 25px; }
.match-flash { position: fixed; z-index: 95; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; transform: translate(-50%,-50%); text-align: center; animation: praise-burst 1.05s both; } .match-flash strong { display: block; font-size: clamp(24px,3.8vw,38px); color: #fff1a0; font-weight: 950; letter-spacing: -1px; text-shadow: 0 3px 0 #863780,2px 0 #602773,-2px 0 #602773,0 5px 12px #2b104c; transform: rotate(-5deg); } .match-flash small { display: inline-block; margin-top: 6px; padding: 5px 14px; border-radius: 20px; color: #402050; background: #fff0b1; font-weight: 900; box-shadow: 0 3px 0 #b48a51; }
.spark { position: fixed; z-index: 90; width: 10px; height: 15px; border-radius: 3px; pointer-events: none; animation: confetti 1s cubic-bezier(.1,.65,.3,1) forwards; box-shadow: 0 0 8px #fff3; } .spark:nth-child(3n) { clip-path: polygon(50% 0,61% 34%,100% 38%,70% 61%,79% 100%,50% 78%,20% 100%,30% 61%,0 38%,39% 34%); width: 20px; height: 20px; }
.shockwave { position: fixed; width: 110px; height: 110px; border: 7px solid #fff5ad; border-radius: 50%; pointer-events: none; z-index: 84; transform: translate(-50%,-50%); animation: shockwave .65s ease-out forwards; box-shadow: 0 0 25px #ffe99b,inset 0 0 25px #ffe99b; } #effects { pointer-events: none; }
.report-icon { display: grid; place-items: center; width: 112px; height: 112px; margin: 5px auto 28px; color: #ffe980; font-size: 75px; text-shadow: 0 6px 0 #ac6832; background: radial-gradient(#a173d0,transparent 70%); animation: trophy 2.6s ease-in-out infinite; }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 650px; margin: 24px auto 20px; } .metrics>div { padding: 18px 10px; border: 2px solid #9876c6; border-radius: 21px; background: #342052; box-shadow: 0 6px 0 #190d34; } .metrics strong { display: block; font-size: 28px; color: #ffe98c; } .metrics span { display: block; margin-top: 6px; font-size: 11px; color: #daccf1; }
.lives-box { display: flex; align-items: center; gap: 6px; background: #2a1849; padding: 5px 11px; border: 1px solid #8a6ab4; border-radius: 12px; font-size: 11px; font-weight: 800; color: #ffd4e5; }
.lives-label { letter-spacing: 0.5px; font-size: 11px; }
.lives-icons { display: flex; gap: 3px; font-size: 13px; line-height: 1; }
.life-heart { font-style: normal; display: inline-block; transition: transform .25s ease, opacity .25s ease; }
.life-heart.lost { opacity: .25; filter: grayscale(1); transform: scale(.8); }
.answers { max-width: 670px; text-align: left; margin: 16px auto 24px; padding: 18px 16px; border-radius: 23px; background: #1c103466; border: 1px solid #775597; }
.answers summary { font-size: 15px; font-weight: 900; color: #ffe578; cursor: pointer; padding: 4px 8px; user-select: none; }
.answers-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.answer { display: flex; flex-direction: column; gap: 10px; padding: 15px 16px; background: rgba(30, 16, 56, 0.7); border: 1px solid rgba(135, 100, 185, 0.45); border-radius: 18px; box-shadow: 0 4px 12px rgba(10, 4, 25, 0.35); text-align: left; }
.answer.is-correct { border-color: rgba(109, 245, 212, 0.5); background: linear-gradient(135deg, rgba(30, 16, 56, 0.75), rgba(16, 55, 62, 0.35)); }
.answer.is-missed { border-color: rgba(255, 140, 163, 0.4); }
.answer-header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.answer-header .check { font-size: 16px; font-weight: 900; color: #7affe0; line-height: 1; }
.answer.is-missed .answer-header .check { color: #ff8ca3; }
.connection-label { font-size: 14px; font-weight: 900; color: #fff294; letter-spacing: 0.2px; }
.status-pill-badge { margin-left: auto; font-size: 10px; font-weight: 900; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.4px; }
.badge-match { background: rgba(109, 245, 212, 0.2); color: #7affe0; border: 1px solid rgba(109, 245, 212, 0.5); }
.badge-wrong { background: rgba(255, 100, 130, 0.2); color: #ff9bb5; border: 1px solid rgba(255, 100, 130, 0.5); }
.badge-missed { background: rgba(180, 160, 220, 0.2); color: #d8c7f7; border: 1px solid rgba(180, 160, 220, 0.4); }
.report-pill-compare { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: rgba(16, 8, 32, 0.65); border-radius: 14px; border: 1px solid rgba(135, 100, 185, 0.25); }
.compare-col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.compare-tag { font-size: 9px; font-weight: 900; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; }
.compare-tag.correct-tag { color: #6df5d4; background: rgba(109, 245, 212, 0.16); }
.compare-tag.wrong-tag { color: #ff75c4; background: rgba(255, 117, 196, 0.16); }
.compare-arrow { font-size: 18px; font-weight: 900; color: #c9b3ea; }
.pill-preview { display: inline-flex; align-items: stretch; border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.pill-preview.wrong { outline: 2px dashed rgba(255, 117, 196, 0.7); outline-offset: 2px; }
.pill-half { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; font-size: 12px; font-weight: 900; text-align: center; min-height: 32px; }
.pill-half.param { background: linear-gradient(180deg, #b4fff5, #20c8cc 48%, #096f94); color: #063e57; border-radius: 16px 2px 2px 16px; border-right: 1.5px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 2px 1px #fff9; }
.pill-half.mean { background: linear-gradient(180deg, #ffe4f2, #f577c2 48%, #a8368a); color: #641447; border-radius: 2px 16px 16px 2px; border-left: 1.5px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 2px 1px #fff9; }
.pill-half.mean.mismatch { background: linear-gradient(180deg, #ffc0cb, #e63973 48%, #850b32); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.answer-desc { font-size: 12px; line-height: 1.5; color: #d7c9f3; margin: 0; }
@keyframes enter { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes hero-float { 50% { transform:translateY(-10px) rotate(-10deg); } }
@keyframes star-bob { 50% { transform:scale(1.2) rotate(18deg); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes float { 50% { transform:translateY(calc(var(--offset) - 7px)) rotate(calc(var(--tilt) + 2deg)); } }
@keyframes pop { 0% { opacity:0; transform:scale(.55) translateY(12px); } 65% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
@keyframes snap { 0% { transform: scale(1); filter: brightness(1); } 22% { transform: scaleX(0.84) scaleY(1.22); filter: brightness(1.6) drop-shadow(0 0 25px #ffffff); } 46% { transform: scaleX(1.16) scaleY(0.88); filter: brightness(1.25) drop-shadow(0 0 16px #ffd768); } 68% { transform: scaleX(0.96) scaleY(1.05); filter: brightness(1.08); } 85% { transform: scaleX(1.02) scaleY(0.99); } 100% { transform: scale(1); filter: brightness(1); } } 22% { transform: scaleX(0.84) scaleY(1.22); filter: brightness(1.6) drop-shadow(0 0 25px #ffffff); } 46% { transform: scaleX(1.16) scaleY(0.88); filter: brightness(1.25) drop-shadow(0 0 16px #ffd768); } 68% { transform: scaleX(0.96) scaleY(1.05); filter: brightness(1.08); } 85% { transform: scaleX(1.02) scaleY(0.99); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes demo-drag { 0%,20% { transform:none; } 32% { transform:translateY(-12px) rotate(-5deg); filter:drop-shadow(0 14px 7px #39186144); } 72%,88% { transform:translateX(var(--separation)) translateY(-3px) rotate(0); } 100% { transform:translateX(var(--separation)); } }
@keyframes demo-target { 0%,48% { filter:none; } 65%,100% { filter:drop-shadow(0 0 10px #fff29d); } }
@keyframes shake { 20%,60% { translate:-8px; rotate:-4deg; } 40%,80% { translate:8px; rotate:4deg; } 100% { translate:0; rotate:0deg; } }
@keyframes confetti { to { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); opacity:0; } }
@keyframes shockwave { to { transform:translate(-50%,-50%) scale(2.4); opacity:0; border-width:1px; } }
@keyframes praise-burst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.35); } 22% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 35%,70% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,calc(-50% - 16px)) scale(1.04); } }
@keyframes board-hit { 30% { translate:0 4px; } 65% { translate:0 -2px; } }
@keyframes heartbeat { 50% { transform:rotate(-3deg) scale(1.06); } }
@keyframes trophy { 50% { transform:translateY(-7px) rotate(8deg); } }
@keyframes rim-close { to { opacity:0; } }
@media(max-width:850px) { .board { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:100px; gap:19px 25px; } .header { padding:16px 22px; } .brand img { width:72px; } .brand { font-size:18px; } }
@media(max-width:560px) {
 .header { padding:13px 15px; flex-wrap:wrap; gap:12px; } .brand img { width:67px; height:35px; } .brand small { font-size:7px; } .controls { width:100%; gap:8px; } .controls a { margin-left:auto; } .controls select,.sound,.controls a { min-height:34px; padding:7px 9px; font-size:11px; }
 main { padding:6px 10px 20px; } .panel { padding:23px 16px; border-radius:27px; } h1 { font-size:43px; letter-spacing:-1.5px; } p { font-size:13px; } .intro .eyebrow { font-size:8px; letter-spacing:1.3px; } .hero-orbit { height:185px; } .hero-pill span { width:122px; height:86px; font-size:18px; } .hero-orbit::after { right:7%; top:17px; font-size:29px; } .steps { gap:16px; font-size:11px; } .facts { gap:9px; } .facts>span { min-width:0; padding:14px 17px; } .facts strong { font-size:28px; }
 .lesson h1,.game h1 { font-size:25px; } .lesson-top { gap:8px; margin-bottom:17px; } .lesson-top .eyebrow { font-size:9px; letter-spacing:1px; } .lesson-top>.helper { font-size:10px; padding:6px 9px; }
 .capsule-stage { --half-width:calc((100% - 45px)/2); --separation:25px; height:216px; border-radius:24px; margin:20px auto; } .capsule-stage .half { height:83px; font-size:14px; padding:12px 9px 12px 18px; } .capsule-stage .half.meaning { padding:12px 18px 12px 9px; } .capsule-stage::before { inset:12px; } .capsule-stage::after { font-size:21px; } .demo-steps { gap:6px; } .demo-steps span { font-size:10px; padding:8px 10px; }
 .equation { font-size:23px; min-height:32px; }    .primary,.secondary { font-size:14px; padding:13px 20px; min-height:49px; }
 .game { padding:18px 12px; } .game-top { align-items:flex-start; gap:10px; } .game-top h1 { font-size:24px; } .game-top .eyebrow { font-size:8px; letter-spacing:1px; } .clock { min-width:67px; border-radius:18px; padding:8px; } .clock strong { font-size:29px; } .clock span { font-size:8px; }
 .board { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:88px; gap:13px 23px; padding:18px 15px; border-width:3px; border-radius:23px; } .board .half { height:74px; font-size:13px; padding:12px 8px 12px 18px; } .board .half.meaning { padding:12px 18px 12px 8px; } .board::before { inset:8px; border-radius:17px; } .legend { margin:12px 0; font-size:10px; gap:18px; } .status-row { font-size:10px; }
 .tray { gap:8px; padding:12px; } .tray-label { width:100%; font-size:9px; } .empty-slot { width:43px; height:24px; } .mini-pill { font-size:9px; } .mini-pill span { padding:8px 9px; } .game-feedback { font-size:13px; } .metrics { gap:8px; } .metrics>div { padding:17px 5px; border-radius:16px; } .metrics strong { font-size:24px; } .metrics span { font-size:10px; } .answers { padding:15px; } .answer strong { font-size:13px; }
}
@media(max-width:360px) { .board { gap:12px 17px; padding:16px 10px; } .board .half { font-size:12px; } .capsule-stage .half { font-size:12px; } .hero-pill span { width:105px; } .primary,.secondary { padding:13px 15px; } }
@media(prefers-reduced-motion:reduce) { body { scroll-behavior: auto; } }

/* Viewport-sized game shell: content can overflow for zoom/accessibility;
   primary actions never leave the bottom dock. */
body { height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.header { width: 100%; padding-top: 10px; padding-bottom: 10px; }
main { height: 100%; min-height: 0; width: 100%; padding: 6px 20px max(12px,env(safe-area-inset-bottom)); overflow: hidden; }
body>footer { display: none; }
.panel { height: 100%; min-height: 0; padding: 20px 26px 12px; display: flex; flex-direction: column; overflow: hidden; }
.screen-content { min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9c77c5 transparent; padding: 3px 4px 7px; -webkit-overflow-scrolling: touch; }
.panel>.actions { flex: 0 0 auto; position: relative; z-index: 10; min-height: 66px; margin: 0; padding: 12px 4px 8px; align-items: center; border-top: 1px solid #a687ce33; background: linear-gradient(#29184800,#29184870); }
.actions .primary:disabled { background: #5c477d; color: #c5b2e0; border-color: #82659f; box-shadow: 0 4px 0 #1c0f32; transform: none; cursor: default; }
.actions.is-ready .primary { animation: unlock-button .48s cubic-bezier(.2,1.3,.4,1) both; }
.actions .primary:not(:disabled)::after { content: ''; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg,transparent 25%,#ffffff66 45%,transparent 65%); background-size: 250% 100%; opacity: 0; }
.actions.is-ready .primary::after { animation: button-shine .8s .25s ease-out both; }
.primary { position: relative; }
.intro .screen-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.intro .eyebrow { margin: 0 0 7px; padding: 6px 12px; }
.hero-orbit { flex: 0 1 auto; min-height: 92px; height: clamp(95px,22dvh,190px); margin: 0 auto 8px; }
.hero-pill span { width: clamp(105px,17vw,145px); height: clamp(66px,12dvh,98px); font-size: clamp(16px,2vw,21px); }
.intro h1 { font-size: clamp(32px,6.5dvh,60px); margin: 0 0 10px; }
.intro p { margin: 5px auto; line-height: 1.55; }
.steps { margin: 15px 0 6px; }
.facts { margin: 16px 0; }
.report-icon { width: 75px; height: 75px; font-size: 57px; margin: 0 auto 14px; }
.lesson .screen-content { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.lesson-top { margin: 0; flex-shrink: 0; }
.lesson h1 { font-size: clamp(22px,3.5dvh,34px); margin: 0; line-height: 1.18; flex-shrink: 0; }
.lesson .dots { flex-shrink: 0; gap: 10px; }
.dots i { width: 28px; height: 28px; font-size: 12px; transition: background .2s, border-color .2s, color .2s; }
.capsule-stage { width: 100%; height: auto; min-height: 108px; max-height: 240px; flex: 1 1 160px; margin: 4px auto 2px; }
.capsule-stage .half { width: var(--half-width) !important; flex: 0 0 var(--half-width) !important; max-width: var(--half-width) !important; height: clamp(64px,11dvh,94px); }
.lesson-message { flex: 0 0 auto; min-height: 156px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 2px 0; }
.lesson-message .equation { display: flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; border: 2px solid rgba(168, 142, 208, 0.45); border-radius: 16px; background: rgba(24, 14, 45, 0.45); font-size: clamp(18px,2.8dvh,25px); font-weight: 950; line-height: 1.3; margin: 0 auto; width: 100%; max-width: 520px; box-sizing: border-box; color: #fff294; text-shadow: 0 2px 8px rgba(33, 14, 60, 0.8); }
.lesson-message .equation:empty { display: flex !important; border: 2px dashed rgba(185, 160, 230, 0.45); background: rgba(255, 255, 255, 0.04); }
.lesson-message .equation:empty::before { content: '✦  · · ·  =  · · ·  ✦'; color: rgba(200, 180, 235, 0.5); letter-spacing: 4px; font-size: 14px; font-weight: 800; }
.lesson-message .helper:empty,#lesson-feedback:empty { display: none; }
.lesson-message .helper { min-height: 0; margin: 0 auto; line-height: 1.5; max-width: 550px; }




.demo-steps { flex-shrink: 0; margin: 4px 0; }
body[data-phase=demo] .capsule-stage { max-height: 300px; }
.game .screen-content { display: flex; flex-direction: column; gap: 7px; }
.game-top,.timer-track,.status-row,.game .legend,.tray,.game-feedback { flex-shrink: 0; }
.game-top h1 { font-size: clamp(21px,3.1dvh,34px); }
.game-top .eyebrow { margin-bottom: 5px; }
.clock { padding: 5px 10px; min-width: 68px; border-width: 2px; border-radius: 18px; }
.clock strong { font-size: 29px; }
.timer-track { margin: 3px 0 0; height: 8px; }
.status-row { margin: 0; }
.status-row strong { padding: 4px 9px; }
.game .legend { margin: 0; }
.board { flex: 1 1 auto; min-height: 170px; grid-template-rows: repeat(2,minmax(48px,1fr)); grid-auto-rows: auto; gap: 16px 25px; margin: 0 0 5px; padding: 18px 23px; }
.board .half { height: clamp(52px,9dvh,83px); max-height: 100%; }
.game .tray { min-height: 44px; margin: 0; padding: 8px 13px; flex-wrap: nowrap; justify-content: center; gap: 11px; }
.game .tray-label { width: auto; font-size: 9px; }
.game .tray .mini-pill { width: 52px; height: 24px; flex-shrink: 0; }
.game .tray .mini-pill span { font-size: 0; width: 50%; padding: 0; }
.game .empty-slot { width: 52px; height: 24px; flex-shrink: 0; }
.game-feedback { margin: 0; min-height: 22px; font-size: 13px; }
.game .screen-content>.helper { display: none; }
body[data-phase=results] .screen-content>.eyebrow { margin-bottom: 10px; }
body[data-phase=results] h1 { font-size: clamp(28px,4.6dvh,46px); margin-bottom: 10px; }
body[data-phase=results] .screen-content>p { margin: 6px auto; }
.metrics { margin: 17px auto; }
.metrics>div { padding: 14px 10px; }
.answers { width: 100%; margin: 12px auto; padding: 12px 17px; }
.answers summary { font-size: 15px; font-weight: 800; cursor: pointer; padding: 4px 0; color: #ffeba1; }
.answers[open] .answer { animation: enter .25s ease-out both; }
.snap-ray { position: fixed; z-index: 92; width: var(--ray-length); height: 4px; border-radius: 6px; transform-origin: left center; pointer-events: none; background: linear-gradient(90deg,#fff,#ffe882); box-shadow: 0 0 8px #fff19c; animation: snap-ray .55s cubic-bezier(.15,.6,.3,1) both; }
@keyframes snap-ray { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(18px) scaleX(.15); } 20% { opacity: 1; } 65% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(108px) scaleX(1.15); } }
@keyframes unlock-button { 0% { transform: translateY(4px) scale(.97); } 55% { transform: translateY(-3px) scale(1.025); } 100% { transform: none; } }
@keyframes button-shine { 0% { opacity: 0; background-position: 140% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: -50% 0; } }
@media(max-width:850px) { .board { grid-template-rows: repeat(4,minmax(48px,1fr)); min-height: 270px; gap: 12px 24px; padding: 15px 22px; } }
@media(max-width:560px) {
 .header { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; min-height: 49px; }
 .brand { gap: 0; } .brand>span { display: none; } .brand img { width: 57px; height: 32px; }
 .controls { width: auto; margin-left: auto; gap: 5px; }
 .controls a { margin-left: 0; } .controls select { max-width: 92px; }
 .controls select,.sound,.controls a { padding: 7px; font-size: 10px; }
 main { padding: 4px 8px max(8px,env(safe-area-inset-bottom)); }
 .panel { padding: 13px 12px 7px; border-radius: 23px; }
 .screen-content { padding: 2px 2px 5px; }
 .panel>.actions { min-height: 65px; gap: 8px; padding: 10px 2px 7px; }
 .actions .primary { flex: 1 1 auto; }
 .actions .primary,.actions .secondary { min-height: 46px; padding: 10px 13px; font-size: 13px; }
 .intro .screen-content { justify-content: space-evenly; }
 .intro .eyebrow { font-size: 8px; }
 .hero-orbit { height: clamp(85px,20dvh,165px); min-height: 85px; }
 .hero-orbit::after { font-size: 25px; }
 .intro h1 { font-size: clamp(31px,6dvh,46px); }
 .intro p { font-size: 13px; }
 .steps { margin: 10px 0 4px; gap: 13px; }
 .facts { margin: 12px 0; }
 .facts>span { padding: 10px 14px; }
 .lesson .screen-content { gap: 7px; }
 .lesson h1 { font-size: clamp(21px,3.4dvh,27px); }
 .lesson-top { margin: 0; }
 .lesson-top>.helper { font-size: 10px; padding: 4px 8px; }
 .lesson .capsule-stage { min-height: 108px; max-height: 210px; flex-basis: 130px; }
 .lesson .capsule-stage .half { height: clamp(62px,10.5dvh,83px); font-size: 13px; }
 .lesson-message { min-height: 146px; gap: 7px; }
 .lesson-message .equation { font-size: clamp(18px,2.9dvh,23px); }
 
 
 
 .game .screen-content { gap: 5px; }
 .game-top h1 { font-size: clamp(20px,3dvh,25px); line-height: 1.15; }
 .game-top .eyebrow { font-size: 7px; }
 .clock { min-width: 60px; padding: 4px 7px; }
 .clock strong { font-size: 26px; }
 .game .legend { font-size: 9px; gap: 14px; }
 .board { min-height: 272px; grid-template-rows: repeat(5,minmax(44px,1fr)); gap: 8px 22px; padding: 12px 14px; border-radius: 21px; }
 .board .half { height: clamp(48px,8dvh,73px); font-size: 12px; padding: 7px 7px 7px 15px; }
 .board .half.meaning { padding: 7px 15px 7px 7px; }
 .game .tray { min-height: 35px; padding: 5px 8px; gap: 9px; }
 .game .tray-label { display: none; }
 .game .tray .mini-pill,.game .empty-slot { width: 43px; height: 23px; }
 .game-feedback { font-size: 11px; line-height: 1.25; }
 .metrics { margin: 14px auto; }
 .metrics>div { padding: 12px 5px; }
 .metrics strong { font-size: 23px; }
}
@media(max-height:620px) {
 .header { padding-top: 5px; padding-bottom: 5px; }
 .panel { padding-top: 10px; }
 .intro .screen-content { justify-content: flex-start; }
 .hero-orbit { height: 82px; min-height: 82px; }
 .hero-pill span { height: 59px; }
 .intro h1 { font-size: 30px; margin-bottom: 5px; }
 .intro .eyebrow { margin-bottom: 3px; }
 .intro p { font-size: 12px; }
 .steps { margin: 9px 0 0; }
 .report-icon { width: 49px; height: 49px; font-size: 40px; margin-bottom: 8px; }
 .facts { margin: 9px 0; }
 .lesson h1 { font-size: 20px; }
 .lesson-message { min-height: 128px; }
 .lesson .capsule-stage { min-height: 94px; }
 .game-top h1 { font-size: 19px; }
 .game-top .eyebrow { display: none; }
 .game .board { min-height: 264px; padding-top: 8px; padding-bottom: 8px; }
}
/* Landscape has ample width: use two rows of pills and less vertical decoration. */
@media(max-height:500px) and (min-width:600px) {
 .board { grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(44px,1fr)); min-height: 125px; gap: 10px 18px; }
 .game .board { min-height: 125px; }
 .board .half { font-size: 11px; height: 49px; }
 .hero-orbit { display: none; }
 .lesson .screen-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(94px,1fr); gap: 5px 18px; }
 .lesson-top,.lesson h1,.lesson .dots,.demo-steps { grid-column: 1 / -1; }
 .lesson .capsule-stage { grid-column: 1; grid-row: 4; --half-width: calc((100% - 45px)/2); --separation: 25px; height: 100%; min-height: 94px; margin: 0; }
 .lesson .capsule-stage .half { height: 61px; font-size: 12px; }
 .lesson-message { grid-column: 2; grid-row: 4; min-height: 0; }
 .lesson-message .equation { font-size: 18px; }
 
 
}
@media(prefers-reduced-motion:reduce) { .snap-ray { display: none; } .actions.is-ready .primary,.actions.is-ready .primary::after,.answers[open] .answer { animation: none !important; } }

/* A small success accent, with the learning sentence directly on the stage. */
.lesson-reward { max-width: 440px; margin: 0 auto; padding: 0 9px; }
.reward-caption { display: flex; justify-content: center; align-items: center; gap: 7px; color: #8ef5d2; margin: 1px 0 8px; animation: reward-arrive .28s ease-out both; }
.reward-caption strong { font-size: 13px; font-weight: 800; line-height: 1.35; }
.reward-check { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; background: #8ef5d21c; border: 1px solid #8ef5d255; font-size: 11px; }
.lesson-reward p { margin: 0; color: #e2d8f2; font-size: 14px; font-weight: 400; line-height: 1.55; text-wrap: pretty; }
.lesson-reward .reward-next { margin-top: 6px; color: #c4b4df; font-size: 12px; }
@keyframes reward-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media(max-height:500px) and (min-width:600px) { .lesson-reward p { font-size: 12px; } .reward-caption { margin-bottom: 5px; } }
/* Guided demonstration: the pointer and capsule share the measured motion path. */
body[data-phase=demo] .capsule-stage { --separation: 110px; }
body[data-phase=demo] .demo-running .half { animation: none; }
.demo-grab { outline: 3.5px solid #ffe76a; outline-offset: 5px; filter: brightness(1.18) drop-shadow(0 0 16px #ffe268b8); box-shadow: 0 0 0 4px #ffe76a44, 0 0 24px #ffe76a66; animation: demo-highlight-pulse 1.4s ease-in-out infinite alternate; }
.demo-magnet { outline: none !important; filter: brightness(1.22) drop-shadow(0 0 20px #6df5d4); box-shadow: 0 0 0 3px #6df5d4aa, 0 0 28px #6df5d4cc, 0 0 45px #ffe07566, inset 0 0 16px #6df5d455; animation: magnet-hum 0.45s ease-in-out infinite alternate; }
@keyframes demo-highlight-pulse { 0% { filter: brightness(1.12) drop-shadow(0 0 10px #ffe26888); box-shadow: 0 0 0 3px #ffe76a33, 0 0 16px #ffe76a44; } 100% { filter: brightness(1.25) drop-shadow(0 0 24px #ffe268dd); box-shadow: 0 0 0 6px #ffe76a77, 0 0 30px #ffe76a99; } }
@keyframes demo-target-pulse { 0% { filter: brightness(1.1) drop-shadow(0 0 12px #7bf6d588); box-shadow: 0 0 0 3px #7bf6d533; } 100% { filter: brightness(1.25) drop-shadow(0 0 25px #7bf6d5ee); box-shadow: 0 0 0 6px #7bf6d588; } }
@keyframes magnet-hum { 0% { transform: scale(1); filter: brightness(1.15) drop-shadow(0 0 10px #6df5d4aa); } 100% { transform: scale(1.025); filter: brightness(1.28) drop-shadow(0 0 24px #6df5d4ee); } }
.magnetic-field-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 82; }
.magnetic-flux-pulse { position: fixed; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(109,245,212,0.45) 0%, rgba(255,224,117,0.25) 45%, transparent 75%); filter: drop-shadow(0 0 14px #6df5d4); animation: magnet-pulse-ring 0.6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes magnet-pulse-ring { 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } }
.magnetic-flux-svg { position: fixed; pointer-events: none; overflow: visible; }
.mag-arc { stroke-dasharray: 8 4; animation: flux-dash 0.5s linear infinite; stroke-width: 2.5; }
.mag-arc.arc-center { stroke-width: 3.5; stroke-dasharray: none; animation: center-spark 0.3s ease-in-out infinite alternate; }
.mag-arc.arc-outer-top, .mag-arc.arc-outer-bot { stroke-width: 2; opacity: 0.85; }
@keyframes flux-dash { to { stroke-dashoffset: -24; } }
@keyframes center-spark { 0% { stroke-opacity: 0.75; stroke-width: 2.5; } 100% { stroke-opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 8px #ffffff); } }
.magnetic-pole-flare { position: fixed; width: 6px; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent 0%, #ffffff 25%, #6df5d4 50%, #ffffff 75%, transparent 100%); border-radius: 4px; box-shadow: 0 0 14px 4px #6df5d4, 0 0 25px 8px #ffe07588; animation: pole-crackle 0.25s ease-in-out infinite alternate; pointer-events: none; }
@keyframes pole-crackle { 0% { opacity: 0.8; transform: translate(-50%, -50%) scaleY(0.9); } 100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.15); filter: brightness(1.4); } }
.demo-trail { position: absolute; left: calc(50% - var(--separation)/2); top: 50%; width: var(--separation); border-top: 3px dashed #79579f; opacity: 0; transition: opacity .2s; pointer-events: none; }
.demo-trail::after { content: ''; position: absolute; right: 2px; top: -7px; width: 10px; height: 10px; border-top: 3px solid #79579f; border-right: 3px solid #79579f; transform: rotate(45deg); }
.capsule-stage[data-step=drag] .demo-trail, .capsule-stage[data-step=release] .demo-trail { opacity: .85; }
body[data-phase=demo] .capsule-stage::after { display: none; }
body[data-phase=demo] #helper { font-size: 15px; font-weight: 650; line-height: 1.5; color: #f0e7ff; }
body[data-phase=demo] .demo-steps span { transition: background .2s, color .2s, transform .2s; }
@media(max-width:560px) { body[data-phase=demo] .capsule-stage { --half-width: calc((100% - 82px)/2); --separation: 62px; } body[data-phase=demo] .capsule-stage .half { font-size: 12px; padding-left: 10px; padding-right: 10px; } body[data-phase=demo] #helper { font-size: 14px; } }
@media(max-height:500px) and (min-width:600px) { body[data-phase=demo] .capsule-stage { --half-width: calc((100% - 72px)/2); --separation: 52px; } body[data-phase=demo] #helper { font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { .demo-grab, .demo-magnet { animation: none; } }
/* Reserved destinations keep the lesson still while its connection arrives. */
.lesson-message { min-height: 176px; gap: 9px; }
#lesson-feedback, #lesson-feedback:empty { display: flex; align-items: center; justify-content: center; min-height: 80px; border-radius: 13px; padding: 10px 13px; background: #ffffff05; border: 1px dashed #a88ed03d; }
#lesson-feedback:empty::before { content: ''; display: block; width: 70%; height: 22px; opacity: .3; background: linear-gradient(#9e87bb40,#9e87bb40) top center / 100% 5px no-repeat, linear-gradient(#9e87bb40,#9e87bb40) bottom center / 65% 5px no-repeat; }
.connection-explanation { color: #eee7fa; font-size: 16px; line-height: 1.5; font-weight: 500; text-align: center; text-wrap: pretty; animation: reward-arrive .4s ease-out both; }
.connection-explanation small { display: block; margin-top: 6px; color: #cfbddf; font-size: 12px; }
.equation-flight { position: fixed; z-index: 96; display: flex; align-items: center; justify-content: center; font: 900 clamp(16px,2.7dvh,23px)/1.2 'Trebuchet MS','Segoe UI','Nirmala UI',sans-serif; text-align: center; color: #3e1b52; background: linear-gradient(135deg, #fff7b8 0%, #ffd859 38%, #ffa826 100%); border: 2.5px solid #ffffff; border-radius: 18px; box-shadow: 0 0 0 3px #ffd85955, 0 12px 32px rgba(255,175,30,0.6), inset 0 2px 3px #ffffff, 0 0 22px #ffe268cc; text-shadow: 0 1px 0 rgba(255,255,255,0.8); pointer-events: none; padding: 8px 18px; will-change: transform, opacity; isolation: isolate; }
.equation-flight::before { content: '✦'; display: inline-block; color: #fff; font-size: 16px; margin-right: 8px; text-shadow: 0 0 8px #ffe575; }
.equation-flight::after { content: ''; position: absolute; top: 2px; left: 8%; right: 8%; height: 38%; background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.08) 100%); border-radius: 20px 20px 60px 60px; pointer-events: none; }
.equation.landed { animation: equation-land-bounce 0.55s cubic-bezier(0.18, 1.3, 0.32, 1) both; }
@keyframes equation-land-bounce { 0% { transform: scale(1.16); box-shadow: 0 0 35px #ffe075ee, inset 0 0 15px #ffe07588; border-color: #ffe075; filter: brightness(1.3); } 38% { transform: scale(0.94); box-shadow: 0 0 22px #ffe075aa; } 68% { transform: scale(1.04); } 100% { transform: scale(1); box-shadow: 0 0 14px #ffe07544; border-color: #a88ed088; filter: brightness(1); } }
.candy-seam-flash { position: fixed; z-index: 92; width: 10px; height: 120px; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent 0%, #ffffff 30%, #ffffff 70%, transparent 100%); box-shadow: 0 0 22px 10px #ffffff, 0 0 45px 16px #ffe678; border-radius: 50%; pointer-events: none; animation: seam-flash .42s ease-out forwards; }
@keyframes seam-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.3) scaleY(0.5); } 25% { opacity: 1; transform: translate(-50%, -50%) scaleX(2.8) scaleY(1.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2) scaleY(1.8); } }
.candy-sunburst { position: fixed; z-index: 83; width: 180px; height: 180px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,230,110,0.7) 28%, rgba(109,245,212,0.35) 55%, transparent 72%); animation: sunburst-pop .55s cubic-bezier(0.1, 0.8, 0.25, 1) forwards; }
@keyframes sunburst-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(25deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(60deg); } }
.pill-shimmer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 4; }
.pill-shimmer::before { content: ''; position: absolute; top: -50%; left: -60%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%); transform: rotate(25deg); animation: shimmer-sweep 0.75s ease-out forwards; }
@keyframes shimmer-sweep { 0% { transform: translateX(0%) rotate(25deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(380%) rotate(25deg); opacity: 0; } }
.slot-ring { animation: slot-ring-expand 0.65s cubic-bezier(0.12, 0.75, 0.35, 1) forwards; }
@keyframes slot-ring-expand { 0% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; border-width: 5px; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-width: 1px; } }
body[data-phase=demo] .lesson-message { min-height: 176px; }
@media(max-width:560px) { .lesson-message { min-height: 165px; } .lesson-message .equation { font-size: 20px; } .connection-explanation { font-size: 15px; } }
@media(max-height:620px) { .lesson-message,body[data-phase=demo] .lesson-message { min-height: 150px; gap: 6px; } .connection-explanation { font-size: 14px; } #lesson-feedback,#lesson-feedback:empty { min-height: 72px; padding: 8px 10px; } }
@media(max-height:500px) and (min-width:600px) { .lesson-message,body[data-phase=demo] .lesson-message { min-height: 0; } .connection-explanation { font-size: 13px; } }

/* Watch What To Do Panel Overlay */
/* Watch What To Do Panel Overlay */
.watch-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  background: radial-gradient(circle at 50% 45%, rgba(35, 18, 70, 0.95), rgba(18, 10, 38, 0.98));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.38s ease;
}

.watch-panel-overlay.fade-out {
  opacity: 0;
  transform: scale(1.04);
  visibility: hidden;
  pointer-events: none;
}

.watch-panel-card {
  width: 100%;
  max-width: 370px;
  background: linear-gradient(145deg, rgba(42, 24, 73, 0.95), rgba(20, 12, 40, 0.98));
  border: 2px solid rgba(175, 147, 222, 0.4);
  border-radius: 24px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.65), 0 0 35px rgba(109, 245, 212, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  animation: watch-card-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.watch-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.85rem;
  background: rgba(109, 245, 212, 0.15);
  border: 1px solid rgba(109, 245, 212, 0.45);
  border-radius: 9999px;
  color: #6df5d4;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.watch-panel-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.watch-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.watch-pill {
  padding: 0.38rem 0.75rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.watch-pill.param {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #e0f2fe;
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
}

.watch-arrow {
  color: #fbbf24;
  font-size: 1.15rem;
  font-weight: 900;
  animation: watch-arrow-pulse 1.2s ease-in-out infinite;
}

.watch-pill.mean {
  background: linear-gradient(135deg, #d946ef, #a21caf);
  color: #fdf4ff;
  border: 1px solid rgba(244, 114, 182, 0.5);
  box-shadow: 0 4px 10px rgba(217, 70, 239, 0.35);
}

.watch-panel-desc {
  color: #ddd4f5;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
  max-width: 320px;
}

.watch-card-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.4rem;
}

.watch-continue-btn {
  width: 100%;
  max-width: 250px;
  padding: 13px 24px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 18px;
}

.watch-btn-arrow {
  font-size: 19px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.watch-continue-btn:hover .watch-btn-arrow {
  transform: translateX(4px);
}

@keyframes watch-card-pop {
  0% {
    transform: scale(0.92) translateY(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes watch-arrow-pulse {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(5px);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-panel-card {
    animation: none;
  }
  .watch-arrow {
    animation: none;
  }
  .watch-panel-overlay.fade-out {
    transition: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* Keep pill labels readable, including the compact mobile layouts above. */
.half,
.board .half,
.lesson .capsule-stage .half,
body[data-phase=demo] .capsule-stage .half {
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width:560px) {
  .game .board {
    grid-template-rows: repeat(5,minmax(80px,1fr));
    min-height: 456px;
  }
  .board .half,
  .lesson .capsule-stage .half {
    min-height: 80px;
  }
}


.practice-video {
  display: block;
  width: 100%;
  max-height: 55dvh;
  object-fit: contain;
  background: #000;
  border-radius: 16px;
}

.video-lesson h1 { font-size: clamp(24px, 5vw, 40px); }
.video-lesson #video-status { font-size: 16px; }