:root{color-scheme:dark;--bg:#071522;--ink:#f7fbff;--muted:#a9c2d2;--cyan:#43d9ff;--green:#4ee39a;--yellow:#ffd166;--red:#ff6275;--line:#ffffff1a}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Segoe UI,Arial,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 15% 0%,#43d9ff22,transparent 45%),radial-gradient(ellipse at 95% 30%,#b785ff19,transparent 35%),linear-gradient(160deg,#06131f,#0a2233 56%,#071522)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;touch-action:manipulation;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}button:disabled{cursor:default;opacity:.5}a{color:var(--muted);text-underline-offset:4px}[hidden]{display:none!important}
.app{width:min(1000px,94%);margin:auto;padding:10px 0 22px}.back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none}.back:hover{color:var(--cyan)}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}.brand{display:flex;align-items:center;gap:12px}.logo{width:52px;height:52px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(145deg,var(--cyan),#9cf0ff);border-radius:16px;color:#042333;font-size:21px;font-weight:900;box-shadow:0 8px 24px #43d9ff22}h1{margin:0;font-size:clamp(26px,4vw,40px);letter-spacing:-1px}.subtitle{margin:2px 0 0;font-size:13px;color:var(--muted)}.tools{display:flex;gap:8px}.tool{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#ffffff0d;color:white;padding:9px}
.hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}.stat{background:#0b1f2ecc;border:1px solid var(--line);border-radius:13px;text-align:center;padding:9px 4px}.stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}.stat strong{display:block;margin-top:3px;font-size:23px;font-variant-numeric:tabular-nums}#lives{color:var(--red)}
.mission{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:linear-gradient(100deg,#17455a,#142e47);border:1px solid #43d9ff30;border-radius:16px 16px 0 0}.mission small{display:block;text-transform:uppercase;letter-spacing:1.6px;font-size:10px;color:var(--cyan);margin-bottom:4px}.mission h2{margin:0;font-size:clamp(18px,3vw,25px)}.multiplier{white-space:nowrap;color:var(--yellow);border:1px solid #ffd16650;background:#ffd16612;padding:8px 12px;border-radius:99px;font-size:17px;font-weight:800}
.track{height:5px;background:#ffffff14}.track>div{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--cyan))}
.arena{position:relative;isolation:isolate;height:clamp(300px,48dvh,510px);overflow:hidden;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:linear-gradient(#43d9ff05,#43d9ff00),repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),#ffffff05 calc(16.666% - 1px),#ffffff05 16.666%),#081d2d;box-shadow:0 18px 50px #0003}.arena:after{content:"CATCH THE CORRECT NUMBERS BEFORE THIS LINE";pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:26px;border-top:1px dashed #ff627580;background:#ff62750b;color:#b5a9b2;text-align:center;font-size:9px;letter-spacing:1px;line-height:25px;z-index:0}.arena.flash-red{animation:danger .28s ease}.arena-hint{position:absolute;inset:30% 15% auto;text-align:center;color:#a9c2d280;font-size:20px;line-height:1.6}
.target{position:absolute;left:0;top:0;width:68px;height:62px;z-index:1;border:2px solid var(--tile-color,#43d9ff);border-radius:17px 10px 17px 10px;background:linear-gradient(145deg,#20465e,#0b293e);color:white;box-shadow:inset 0 0 15px #43d9ff0a,0 4px 0 #03101c,0 0 16px #43d9ff12;font-size:26px;font-weight:850;font-variant-numeric:tabular-nums;will-change:transform;user-select:none}.target:before{content:"";position:absolute;top:5px;left:10px;right:10px;height:2px;background:var(--tile-color);opacity:.35}.target:hover{filter:brightness(1.2)}.burst{position:absolute;z-index:3;pointer-events:none;font-size:22px;font-weight:900;color:var(--green);text-shadow:0 2px 8px #000;animation:burst .55s ease-out forwards}.burst.bad{color:var(--red)}.feedback{min-height:26px;margin:12px 0 4px;text-align:center;font-size:14px;font-weight:700;color:var(--muted)}.tips{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;margin:0}footer{color:#7995a7;font-size:11px;text-align:center;margin-top:12px}
.overlay{position:fixed;inset:0;z-index:20;background:#020b12e8;display:grid;place-items:center;padding:16px}.modal{width:min(650px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;border:1px solid var(--line);border-radius:23px;background:linear-gradient(160deg,#16384f,#0b2436);box-shadow:0 18px 60px #0006;padding:24px;text-align:center}.modal h2{font-size:clamp(28px,5vw,40px);margin:6px 0 10px}.modal p{color:var(--muted);line-height:1.6;margin:8px 0;font-size:14px}.big-icon{font-size:38px;color:var(--cyan)}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.modes{border:0;padding:0;margin:20px 0}.modes legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:10px;text-align:left}.mode-options label{position:relative;cursor:pointer}.mode-options input{position:absolute;opacity:0;width:1px;height:1px}.mode-options span{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:100px;padding:12px 8px;border:1px solid var(--line);border-radius:13px;background:#ffffff06}.mode-options small{font-size:11px;color:var(--muted)}.mode-options input:checked+span{background:#43d9ff15;border-color:var(--cyan)}.mode-options input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:3px}.primary{border:0;border-radius:13px;background:linear-gradient(135deg,var(--cyan),#86edff);color:#052334;font-weight:900;font-size:17px;padding:15px 24px;min-height:52px}.rules{padding:12px;border:1px solid var(--line);border-radius:12px;margin:14px 0;font-size:12px!important}.results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.result{background:#ffffff08;padding:14px;border-radius:12px}.result span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.result strong{font-size:28px;display:block;margin-top:4px}.countdown{z-index:30;font-size:clamp(80px,20vw,150px);font-weight:900;color:var(--cyan)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes burst{to{opacity:0;transform:translateY(-28px) scale(1.15)}}@keyframes danger{50%{box-shadow:inset 0 0 100px #ff62754d}}
@media(max-width:540px){.app{width:94%}.subtitle{font-size:11px}.logo{width:42px;height:42px;font-size:18px}.brand{gap:8px}.tools{gap:5px}.tool{padding:8px}header{gap:8px}.stat strong{font-size:19px}.stat span{font-size:8px;letter-spacing:0}.hud{gap:4px}.mission{padding:12px}.mission h2{font-size:18px}.arena{height:clamp(320px,49dvh,440px)}.target{width:60px;height:58px;font-size:24px}.modal{padding:18px}.mode-options{gap:5px}.mode-options span{padding:10px 4px;min-height:94px}.mode-options strong{font-size:13px}.mode-options small{font-size:10px}.arena:after{font-size:8px;letter-spacing:0}.multiplier{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.burst,.arena.flash-red{animation:none}.target{box-shadow:0 2px 0 #03101c}}

/* Fraction Frenzy: horizontal lanes and stacked mathematical notation. */
.game-links{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hud{grid-template-columns:repeat(5,minmax(0,1fr))}
.brand img{width:125px;height:auto;border-radius:10px}
.mission{min-height:106px}.mission h2{display:flex;align-items:center;gap:16px;font-size:18px}
.fraction{display:inline-flex;flex-direction:column;align-items:stretch;text-align:center;line-height:1.05;vertical-align:middle;min-width:1.2em;font-variant-numeric:tabular-nums}
.numerator{padding:0 .13em .08em;border-bottom:2px solid currentColor}.denominator{padding:.08em .13em 0}
#targetFraction{font-size:34px;color:var(--yellow)}
.target{width:76px;height:82px;font-size:26px;display:flex;align-items:center;justify-content:center}
.arena{height:clamp(330px,48dvh,450px);background:repeating-linear-gradient(0deg,transparent 0,transparent 99px,#ffffff05 99px,#ffffff05 100px),#081d2d}
.arena:after{content:'EQUIVALENT? CATCH IT. OTHERWISE, LET IT PASS.'}
.target-cue{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#081d2de8;z-index:5;pointer-events:none;color:var(--yellow);font-size:24px;text-align:center}
.target-cue .fraction{font-size:42px}
#combo{color:var(--yellow)}.combo-pop{animation:combo-pop .35s ease}.pop-disc{position:absolute;width:76px;height:82px;border:3px solid var(--green);background:#4ee39a22;border-radius:16px;pointer-events:none;z-index:2;animation:burst .5s ease-out forwards}
.results{grid-template-columns:repeat(3,minmax(0,1fr))}
@keyframes combo-pop{50%{transform:scale(1.15);text-shadow:0 0 15px #ffd16690}}
@media(max-width:540px){.brand img{width:76px}h1{font-size:25px}.target{width:64px;height:82px;font-size:25px}.brand{gap:8px}.tools{gap:4px}.app{width:94%}.modal .results{grid-template-columns:repeat(2,minmax(0,1fr))}.mission h2{font-size:16px}.stat strong{font-size:18px}.mode-options span{min-height:105px}.game-links .back{font-size:12px}}
@media(max-width:360px){.brand img{width:56px}h1{font-size:22px}.subtitle{font-size:10px}}
@media(max-width:540px){.mission .multiplier{font-size:11px;padding:8px;white-space:normal;max-width:115px}}
@media(prefers-reduced-motion:reduce){.combo-pop,.pop-disc{animation:none}}