:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#f8fbff; background:#02050c; font-synthesis:none; --cyan:#62eaff; --mint:#64efae; --pink:#ff4a88; --violet:#9569ff; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 12% 6%,rgba(24,217,255,.18),transparent 30rem),radial-gradient(circle at 90% 4%,rgba(149,75,255,.18),transparent 34rem),linear-gradient(145deg,#030712,#090d20 58%,#02040b); }
body::before { position:fixed; inset:0; pointer-events:none; content:""; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(#000,transparent 76%); }
button { font:inherit; }
.game-shell { width:min(1160px,100%); max-width:100vw; margin:0 auto; padding:clamp(14px,3vw,30px); overflow:hidden; }
.game-header,.score-strip,footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-lockup { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(76,225,255,.28)); }
.brand-lockup h1 { margin:-1px 0 0; font-size:clamp(1.3rem,4vw,2rem); font-style:italic; letter-spacing:.13em; text-shadow:0 0 25px rgba(79,227,255,.16); }
.eyebrow,.panel-tag { color:#72eaff; font-size:.65rem; font-weight:900; letter-spacing:.2em; }
.utility-button { padding:9px 13px; border:1px solid rgba(113,222,255,.32); border-radius:9px; color:#d9faff; background:linear-gradient(180deg,rgba(19,30,57,.92),rgba(7,14,33,.92)); box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.24); font-size:.7rem; font-weight:900; letter-spacing:.09em; cursor:pointer; }
.utility-button[aria-pressed="false"] { color:#7e899f; border-color:rgba(126,137,159,.22); }
.score-strip { position:relative; margin:18px 0 12px; padding:12px clamp(10px,2vw,24px); overflow:hidden; border:1px solid rgba(106,222,255,.2); border-radius:14px; background:linear-gradient(180deg,rgba(13,23,47,.92),rgba(5,10,26,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 38px rgba(0,0,0,.24); }
.score-strip::after { position:absolute; inset:auto 0 0; height:1px; content:""; background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent); opacity:.64; }
.score-strip div { position:relative; display:grid; flex:1 1 0; min-width:68px; text-align:center; }
.score-strip div+div::before { position:absolute; left:0; top:16%; width:1px; height:68%; content:""; background:linear-gradient(transparent,rgba(103,228,255,.18),transparent); }
.score-strip span { color:#7e8ca4; font-size:.59rem; font-weight:850; letter-spacing:.15em; }
.score-strip strong { margin-top:2px; font-size:clamp(1.05rem,3vw,1.65rem); font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(98,234,255,.16); }
.console-wrap { position:relative; isolation:isolate; width:100%; min-width:0; overflow:hidden; border:1px solid rgba(89,217,255,.36); border-radius:22px; background:#030714; box-shadow:0 30px 95px rgba(0,0,0,.58),0 0 58px rgba(35,185,255,.08),inset 0 0 0 1px rgba(255,255,255,.025); }
.console-wrap::before { position:absolute; inset:0; z-index:2; pointer-events:none; content:""; border-radius:inherit; box-shadow:inset 0 0 70px rgba(0,2,10,.65),inset 0 0 0 4px rgba(4,10,24,.35); }
.console-wrap::after { position:absolute; inset:0; z-index:2; pointer-events:none; content:""; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(117,226,255,.1) 4px); mix-blend-mode:screen; }
canvas { display:block; width:100%; max-width:100%; height:auto; touch-action:none; user-select:none; }
.console-chrome { position:absolute; inset:0; z-index:3; pointer-events:none; }
.console-corner { position:absolute; width:28px; height:28px; border-color:rgba(105,235,255,.75); filter:drop-shadow(0 0 7px rgba(79,226,255,.4)); }.top-left{left:12px;top:12px;border-left:2px solid;border-top:2px solid}.top-right{right:12px;top:12px;border-right:2px solid;border-top:2px solid}.bottom-left{left:12px;bottom:12px;border-left:2px solid;border-bottom:2px solid}.bottom-right{right:12px;bottom:12px;border-right:2px solid;border-bottom:2px solid}
.console-label { position:absolute; bottom:16px; color:rgba(142,226,245,.54); font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.14em; }.left-label{left:48px}.right-label{right:48px}
.status-line { position:absolute; z-index:4; top:15px; left:50%; transform:translateX(-50%); color:#75eaff; font-size:.6rem; font-weight:900; letter-spacing:.18em; text-shadow:0 0 12px rgba(68,222,255,.5); pointer-events:none; white-space:nowrap; }
.launch-button { position:absolute; z-index:5; right:22px; bottom:20px; display:grid; width:92px; height:92px; place-items:center; align-content:center; gap:2px; border:2px solid rgba(255,108,150,.9); border-radius:50%; color:#fff; background:radial-gradient(circle at 40% 28%,#ff789d,#f02c69 32%,#8f103d 72%); box-shadow:0 0 0 6px rgba(255,54,121,.1),0 0 0 11px rgba(255,54,121,.035),0 12px 34px rgba(0,0,0,.52),inset 0 2px 10px rgba(255,255,255,.35); font-size:.58rem; font-weight:950; letter-spacing:.07em; cursor:pointer; touch-action:manipulation; }
.launch-button::after { position:absolute; inset:9px; content:""; border:1px solid rgba(255,255,255,.2); border-radius:inherit; }
.launch-button span { font-size:1rem; letter-spacing:.12em; text-shadow:0 2px 8px rgba(80,0,30,.6); }.launch-button:active { transform:scale(.94); }
.game-panel { position:absolute; z-index:6; inset:50% auto auto 50%; width:min(600px,calc(100% - 30px)); transform:translate(-50%,-50%); padding:clamp(22px,4.5vw,38px); border:1px solid rgba(103,218,255,.34); border-radius:20px; text-align:center; background:linear-gradient(135deg,rgba(63,222,255,.055),transparent 28%),linear-gradient(315deg,rgba(144,82,255,.08),transparent 36%),rgba(4,8,22,.93); box-shadow:0 30px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.065); backdrop-filter:blur(14px); }
.game-panel::before,.game-panel::after { position:absolute; top:13px; width:54px; height:1px; content:""; background:linear-gradient(90deg,transparent,#6feaff); }.game-panel::before{left:13px}.game-panel::after{right:13px;transform:scaleX(-1)}
.broadcast-seal { position:relative; display:grid; grid-template-columns:44px auto; align-items:center; width:118px; height:48px; margin:-5px auto 12px; overflow:hidden; border:1px solid rgba(101,234,255,.38); border-radius:9px; background:linear-gradient(135deg,rgba(97,235,255,.14),rgba(125,74,255,.12)); box-shadow:0 0 28px rgba(72,219,255,.14); }
.broadcast-seal span { display:grid; height:100%; place-items:center; border-right:1px solid rgba(111,232,255,.22); color:#fff; font-size:20px; font-weight:1000; font-style:italic; text-shadow:-2px 0 #734fff,2px 0 #25e8ff; }.broadcast-seal b { color:#ff75a4; font:950 10px/1 ui-monospace,monospace; letter-spacing:.12em; }.broadcast-seal.compact{height:42px;margin-bottom:9px}.broadcast-seal.compact span{font-size:17px}
.game-panel h2 { margin:10px 0 12px; font-size:clamp(1.5rem,5vw,2.55rem); line-height:1.05; letter-spacing:-.04em; }.game-panel h2 em { color:#6deaff; font-style:normal; text-shadow:0 0 26px rgba(103,234,255,.25); }
.game-panel>p { max-width:480px; margin:0 auto 19px; color:#aebacf; font-size:.9rem; line-height:1.55; }
.legend { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 19px; margin-bottom:21px; color:#cbd6e8; font-size:.7rem; font-weight:760; }.legend span { display:flex; align-items:center; gap:7px; }.legend i { display:block; width:25px; height:10px; border-radius:999px; }.legend .perfect{background:#eaffff;box-shadow:0 0 10px #fff}.legend .good{background:#5ff09c;box-shadow:0 0 9px rgba(95,240,156,.4)}.legend .miss{background:#ef3f78}
.primary-button { position:relative; padding:14px 21px; overflow:hidden; border:0; border-radius:11px; color:#041018; background:linear-gradient(105deg,#6bf48f,#5ee9ed 50%,#6898ff); box-shadow:0 12px 34px rgba(65,208,239,.22),inset 0 1px rgba(255,255,255,.5); font-size:.77rem; font-weight:950; letter-spacing:.08em; cursor:pointer; }.primary-button::after{position:absolute;inset:0;content:"";transform:translateX(-125%) skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);transition:transform .45s ease}.primary-button:hover::after{transform:translateX(125%) skewX(-22deg)}.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.primary-button:focus-visible,.utility-button:focus-visible,.launch-button:focus-visible{outline:3px solid #fff;outline-offset:3px}.game-panel small{display:block;margin-top:12px;color:#69758c;font-size:.65rem}.hidden{display:none}
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 22px; }.result-grid div { display:grid; gap:2px; padding:10px 5px; border:1px solid rgba(104,218,255,.15); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); }.result-grid strong{color:#6ae9ff;font-size:1.3rem}.result-grid span{color:#7f8da3;font-size:.62rem}
.callout { position:absolute; z-index:8; left:50%; top:18%; opacity:0; transform:translate(-50%,-8px) scale(.94); color:#fff; font-size:clamp(1.05rem,4vw,1.9rem); font-style:italic; font-weight:1000; letter-spacing:.06em; text-shadow:0 0 18px var(--callout,#59e9ff),0 3px 0 rgba(0,0,0,.42); pointer-events:none; transition:opacity .14s ease,transform .18s ease; white-space:nowrap; }.callout.show{opacity:1;transform:translate(-50%,0) scale(1)}
.how-to { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }.how-to div{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid rgba(105,220,255,.11);border-radius:11px;background:linear-gradient(180deg,rgba(11,20,43,.78),rgba(5,10,25,.78))}.how-to strong{color:#66eaff;font-size:.76rem}.how-to span{color:#8794aa;font-size:.69rem}
footer{padding:14px 3px 0;color:#758299;font-size:.7rem}footer p{margin:0}footer strong{color:#aebacd}
@media(max-width:680px){.game-shell{padding:10px}.brand-mark{width:42px;height:42px}.game-header{gap:8px}.utility-button{padding:8px 9px;font-size:.61rem}.score-strip{gap:2px;margin-top:12px;padding-inline:7px}.score-strip div{min-width:0}.score-strip span{font-size:.47rem;letter-spacing:.06em}.score-strip strong{font-size:.93rem}.console-wrap{height:min(470px,calc(100vh - 215px));min-height:370px;border-radius:16px}canvas{width:100%;height:100%;object-fit:cover;object-position:center}.game-active .console-wrap{height:auto;min-height:0;aspect-ratio:960/500}.game-active canvas{height:auto;object-fit:contain}.game-panel{width:calc(100% - 18px);padding:14px 12px}.broadcast-seal{width:105px;height:39px;margin-bottom:8px;grid-template-columns:38px auto}.broadcast-seal span{font-size:16px}.game-panel h2{margin:6px 0 8px;font-size:1.31rem}.game-panel>p{margin-bottom:10px;font-size:.71rem;line-height:1.35}.legend{gap:6px 10px;margin-bottom:11px;font-size:.56rem}.primary-button{padding:10px 14px;font-size:.67rem}.game-panel small{margin-top:7px;font-size:.52rem}.launch-button{right:10px;bottom:10px;width:66px;height:66px;font-size:.46rem}.launch-button span{font-size:.75rem}.result-grid{margin-bottom:12px}.result-grid strong{font-size:1.08rem}.console-label{font-size:6px;bottom:9px}.left-label{left:34px}.right-label{right:34px}.console-corner{width:19px;height:19px}.top-left,.top-right{top:8px}.bottom-left,.bottom-right{bottom:8px}.top-left,.bottom-left{left:8px}.top-right,.bottom-right{right:8px}.how-to{grid-template-columns:1fr;gap:5px}.how-to div{padding:8px 11px}footer{align-items:flex-start;flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}