[hidden]{display:none!important}
:root{color-scheme:dark;font:15px Inter,system-ui,-apple-system,Segoe UI,sans-serif;--bg:#080b16;--panel:#11182a;--line:#293655;--text:#f4f7ff;--muted:#a7b2ce;--cyan:#61e9ed;--violet:#b497ff}*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 15% -5%,#274e7955,transparent 40%),radial-gradient(ellipse at 90% 20%,#58337d35,transparent 35%),var(--bg);min-height:100vh}button{font:inherit;cursor:pointer}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px clamp(18px,4vw,65px);border-bottom:1px solid #29344e;background:#0b1020e8;position:sticky;top:0;z-index:8;backdrop-filter:blur(16px)}header a{color:#cbd7f3;text-decoration:none}.back{padding:10px 14px;border:1px solid #33415f;border-radius:12px;font-size:13px;font-weight:650}.back:hover{background:#1e2b47}.brand{font-size:16px;font-weight:900;letter-spacing:.12em;text-align:center}.brand b{color:var(--cyan)}.brand small{display:block;color:#778eaf;font-size:9px;letter-spacing:.26em;margin-top:4px}main{max-width:1400px;margin:auto;padding:35px clamp(16px,4vw,56px) 65px}.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.eyebrow{color:#8ccefa;font-size:11px;letter-spacing:.18em;font-weight:800}.hero h1{font-size:clamp(34px,5vw,63px);line-height:1.08;letter-spacing:-.065em;margin:12px 0}.hero h1 em{font-style:normal;color:#79e5ec}.hero p{color:var(--muted);max-width:600px;line-height:1.6}.hero-badge{min-width:185px;padding:20px;border:1px solid #35597d;border-radius:18px;background:linear-gradient(130deg,#1a3d5a,#211e3f);text-align:center}.hero-badge strong{display:block;font-size:33px;color:#89f5f4}.hero-badge span{font-size:10px;color:#afc2d9;letter-spacing:.12em;font-weight:750}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 28px}.game-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:7px;padding:0 17px 17px;border:1px solid #303b5c;border-radius:18px;background:#111827;color:var(--text);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.game-card:hover{transform:translateY(-5px);border-color:#7297ce;box-shadow:0 15px 40px #0005}.game-card.selected{border-color:#70d9f0;box-shadow:0 0 0 1px #70d9f044,0 12px 40px #1ba2b31b}.art{display:grid;place-items:center;width:calc(100% + 34px);margin:0 -17px 9px;height:110px;font-size:62px;text-shadow:0 0 26px #fff7;position:relative;overflow:hidden}.art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#0002 50%);background-size:100% 7px;pointer-events:none}.snake-art{background:radial-gradient(circle at 45% 50%,#125c5c,#102336)}.orbit-art{background:radial-gradient(circle at 45% 50%,#31469e,#151e45);color:#b2c7ff;animation:pulse 3s infinite}.breakout-art{background:radial-gradient(circle at 50% 50%,#69328e,#26183b);color:#ffa8ff}.reaction-art{background:radial-gradient(circle at 50% 50%,#8d5d15,#292112);color:#fff0a0}@keyframes pulse{50%{filter:brightness(1.3)}}.game-tag{font-size:10px;color:#80cbdc;letter-spacing:.13em;font-weight:800}.game-card strong{font-size:21px;letter-spacing:-.04em}.game-card small{color:var(--muted);font-size:12px;min-height:34px}.card-best{margin-top:auto;font-size:11px;font-weight:800;color:#e2cc86}.stage{border:1px solid #344460;border-radius:22px;background:linear-gradient(150deg,#111c32,#111526);overflow:hidden;box-shadow:0 25px 65px #0006}.stage-top{padding:23px 27px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #2a3651}.stage-top h2{font-size:28px;letter-spacing:-.05em;margin:7px 0}.stage-top p{color:var(--muted);margin:0;font-size:13px}.scores{display:flex;gap:12px}.scores>div{background:#0a1224;border:1px solid #2b3a59;border-radius:12px;min-width:102px;padding:11px;text-align:center}.scores small{display:block;color:#92a2c2;font-size:10px;letter-spacing:.09em}.scores strong{display:block;font-size:25px;color:#9ff3f2;margin-top:4px}.play-area{position:relative;max-width:900px;margin:22px auto 0;aspect-ratio:3/2;border:1px solid #354968;border-radius:17px;overflow:hidden;background:#080f20}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#090e20dc;backdrop-filter:blur(7px);padding:20px}.overlay[hidden],.reflex[hidden]{display:none}.overlay-icon{font-size:60px;color:#a6f8f2;text-shadow:0 0 30px #43e9d8}.overlay h2{font-size:clamp(23px,4vw,40px);margin:13px 0 4px;letter-spacing:-.04em}.overlay p{max-width:390px;color:#b2c1da;line-height:1.6}.overlay button,.reflex button{padding:15px 30px;background:linear-gradient(120deg,#39c5d3,#7e74e9);border:0;color:#091325;border-radius:12px;font-weight:900;letter-spacing:.08em;margin-top:10px}.overlay button:hover,.reflex button:hover{filter:brightness(1.16)}.reflex{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle,#18264c,#0a1023)}.reflex.ready{background:radial-gradient(circle,#145d47,#0b1c25)}.reflex.early{background:radial-gradient(circle,#642a37,#1d111d)}.reflex-light{font-size:70px;filter:drop-shadow(0 0 20px #ffd66a)}.reflex h2{font-size:36px;margin:9px}.reflex p{color:#bcc9e2}.stage-bottom{padding:19px 25px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.controls button,.touch-controls button{background:#1e2e4c;border:1px solid #38547b;border-radius:10px;color:#e3eeff;padding:11px 16px;font-weight:750}.controls button:hover,.touch-controls button:hover{background:#35537e}.controls span{color:#91a3c3;font-size:12px}.touch-controls{text-align:center;display:flex;flex-direction:column;gap:4px}.touch-controls button{min-width:46px;min-height:42px;padding:8px}.touch-controls>div{display:flex;gap:4px}.footnote{color:#7f91af;font-size:12px;text-align:center;margin-top:19px}@media(max-width:900px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-badge{display:none}.stage-top{flex-wrap:wrap}.scores{width:100%}.scores>div{flex:1}}@media(max-width:520px){header{padding:11px}.brand{font-size:12px}.back{padding:8px;font-size:11px}main{padding:23px 12px}.game-grid{gap:9px}.game-card{padding:0 11px 12px}.art{width:calc(100% + 22px);margin:0 -11px 8px;height:90px;font-size:45px}.game-card strong{font-size:18px}.stage-top{padding:17px}.scores{gap:5px}.scores>div{min-width:0;padding:8px 3px}.scores strong{font-size:21px}.play-area{margin:10px 7px 0;aspect-ratio:3/2}.stage-bottom{padding:12px}.touch-controls{margin:auto}.overlay-icon{font-size:40px}.overlay p{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* v4: visual hierarchy, separated library and arena, CSS-drawn artwork */
.arcade-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:30px 0 14px}
.arcade-section-head h2{font-size:25px;letter-spacing:-.045em;margin:7px 0 0}
.arcade-count{font-size:10px;letter-spacing:.14em;color:#9db1d3;font-weight:850;background:#192740;border:1px solid #304966;border-radius:100px;padding:9px 12px;white-space:nowrap}
.stage-heading{margin-top:40px}
.game-card{border-radius:20px;box-shadow:inset 0 1px #ffffff08}
.game-card.selected{background:#182b40}
.art{height:145px;font-size:65px}
.snake-art{background:radial-gradient(circle at 50% 50%,#12756c,#0c2a37 65%,#0c192d)}
.orbit-art{background:radial-gradient(circle at 50% 50%,#405db3,#202655 60%,#121a38)}
.breakout-art{background:radial-gradient(circle at 50% 50%,#7938a2,#3a1b59 60%,#1a1431)}
.reaction-art{background:radial-gradient(circle at 50% 50%,#b4781d,#503119 65%,#211b19)}
.snake-pixel{font-family:monospace;font-size:48px;letter-spacing:-.2em;color:#8df8db;text-shadow:0 0 30px #53ffe8;transform:rotate(-12deg);animation:snakeFloat 3.2s ease-in-out infinite}
.snake-pixel i{font-size:27px;font-style:normal;color:#ff83b6;letter-spacing:0;display:inline-block;transform:translate(13px,-20px)}
.orbit-icon{position:relative;color:#d0e5ff;font-size:88px;text-shadow:0 0 25px #98bfff;animation:orbitFloat 4s ease-in-out infinite}
.orbit-icon i{position:absolute;right:-30px;top:-5px;font-size:29px;font-style:normal;color:#fff1a0;animation:orbitSpin 5s linear infinite}
.brick-icon{font-size:32px;line-height:.85;letter-spacing:.04em;font-weight:950;text-align:center;color:#ffb5ed;text-shadow:0 0 25px #ff8add;transform:rotate(-8deg);animation:brickFloat 3s ease-in-out infinite}
.flash-icon{font-size:125px;color:#fff0a5;text-shadow:0 0 30px #ffca4f;animation:flashPulse 2s ease-in-out infinite}
@keyframes snakeFloat{50%{transform:rotate(-6deg) translateY(-10px)}}
@keyframes orbitFloat{50%{transform:translateY(-9px)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes brickFloat{50%{transform:rotate(-3deg) translateY(-7px)}}
@keyframes flashPulse{50%{filter:brightness(1.6);transform:scale(1.1)}}
@media(max-width:520px){.art{height:105px}.snake-pixel{font-size:31px}.orbit-icon{font-size:65px}.brick-icon{font-size:23px}.flash-icon{font-size:85px}.arcade-count{font-size:9px;padding:7px}.arcade-section-head h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.snake-pixel,.orbit-icon,.orbit-icon i,.brick-icon,.flash-icon{animation:none!important}}