:root {--bg:#031007;--panel:rgba(7,28,14,.82);--green:#38f465;--lime:#bcff39;--mint:#98ffc1;--text:#f0fff4;--muted:#a4bdab;--danger:#ff6276;--line:rgba(146,255,180,.20);--shadow:0 24px 70px rgba(0,0,0,.48)}
*{box-sizing:border-box} html{min-height:100%} body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 12% 8%,rgba(56,244,101,.20),transparent 29rem),radial-gradient(circle at 88% 88%,rgba(188,255,57,.13),transparent 28rem),linear-gradient(145deg,#020d05,#061b0d 50%,#020f06);overflow-x:hidden} button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid rgba(188,255,57,.75);outline-offset:3px}.background-grid{position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(131,255,168,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(131,255,168,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,black,transparent 82%)}.particles{position:fixed;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green);animation:drift linear infinite}@keyframes drift{from{transform:translateY(108vh) scale(.7);opacity:0}10%{opacity:.7}to{transform:translateY(-13vh) scale(1.7);opacity:0}}.glass-card{background:linear-gradient(145deg,rgba(20,58,31,.78),rgba(4,20,10,.86));border:1px solid var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px)}.eyebrow{margin:0 0 .35rem;color:var(--mint);font-size:.72rem;letter-spacing:.18em;font-weight:850}h1,h2,p{margin-top:0}h1{margin-bottom:0;letter-spacing:.04em;font-size:clamp(2rem,5vw,4.3rem);line-height:.96}h1 span{color:var(--lime);text-shadow:0 0 30px rgba(188,255,57,.42)}h2{margin-bottom:.55rem}.name-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:rgba(1,12,6,.74);backdrop-filter:blur(8px);transition:.4s}.name-screen.hidden{opacity:0;visibility:hidden}.intro-card{width:min(520px,100%);padding:clamp(28px,6vw,52px);border-radius:28px;text-align:center}.brand-mark{font-size:4rem;margin-bottom:1rem;filter:drop-shadow(0 0 18px var(--green))}.intro-text{color:var(--muted);line-height:1.6}.intro-card label{display:block;text-align:left;margin:1.45rem 0 .48rem;color:var(--mint);font-weight:700}.intro-card input{width:100%;border:1px solid rgba(139,255,187,.32);color:var(--text);background:rgba(1,15,7,.75);padding:.95rem 1rem;border-radius:13px}.small-note{margin:1rem 0 0;color:var(--muted);font-size:.83rem}.primary-btn,.ghost-btn,.corner-btn,.name-chip,.close-btn{border:0;border-radius:12px;transition:.16s}.primary-btn{margin-top:1.2rem;width:100%;padding:.98rem 1.1rem;color:#00280e;font-weight:900;background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 10px 28px rgba(56,244,101,.22)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(56,244,101,.34)}.compact{width:auto;margin:0}.primary-btn span{margin-left:.35rem}.ghost-btn{padding:.82rem 1rem;border:1px solid rgba(151,255,192,.25);color:var(--text);background:rgba(5,30,15,.62)}.ghost-btn:hover{background:rgba(56,244,101,.13)}.ghost-btn:disabled{opacity:.45;cursor:not-allowed}.danger{color:#ffd2d8;border-color:rgba(255,98,118,.35)}.corner-btn{position:fixed;top:18px;z-index:10;padding:.66rem .85rem;color:var(--text);background:rgba(6,29,14,.84);border:1px solid rgba(124,255,174,.24);box-shadow:0 8px 24px rgba(0,0,0,.26);backdrop-filter:blur(9px);font-weight:800}.history-btn{left:18px}.sound-btn{right:18px}.corner-btn:hover{transform:translateY(-2px);background:rgba(56,244,101,.18)}.app-shell{position:relative;width:min(1040px,calc(100% - 34px));margin:0 auto;padding:90px 0 36px;z-index:1}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}.name-chip{padding:.68rem .85rem;border:1px solid var(--line);color:var(--mint);background:rgba(4,28,13,.62)}.score-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:20px;padding:20px;border-radius:20px;margin-bottom:22px}.score-metric span{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.13em;font-weight:800}.score-metric strong{display:block;margin:.32rem 0;font-size:clamp(1.3rem,4vw,2.15rem)}.score-metric small{color:var(--mint)}.divider{width:1px;height:55px;background:var(--line)}.stars{color:#f3ff64;text-shadow:0 0 15px rgba(239,255,90,.28);letter-spacing:.06em}.game-card{border-radius:26px;padding:clamp(20px,4vw,38px)}.game-copy{max-width:700px}.game-copy p:last-child{color:var(--muted);line-height:1.55}.reaction-zone{position:relative;display:grid;place-content:center;gap:10px;width:100%;min-height:min(42vw,330px);margin:25px 0 18px;padding:28px;border-radius:22px;overflow:hidden;color:var(--text);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 50px rgba(255,255,255,.03),0 15px 42px rgba(0,0,0,.26);transition:.18s}.reaction-zone:hover{transform:translateY(-2px)}.reaction-zone::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px);mix-blend-mode:overlay}.zone-icon,.zone-title,.zone-subtitle{position:relative;z-index:1}.zone-icon{font-size:clamp(2.4rem,7vw,4.7rem);filter:drop-shadow(0 0 14px currentColor)}.zone-title{font-size:clamp(1.35rem,4vw,2.5rem);font-weight:950;letter-spacing:.08em}.zone-subtitle{color:rgba(255,255,255,.78)}.state-idle{background:linear-gradient(135deg,#0d2b19,#06150c)}.state-waiting{background:linear-gradient(135deg,#663408,#281300);color:#fff0ce}.state-go{background:radial-gradient(circle at center,#4dff94,#00a64f 55%,#005526);color:#001d0b;box-shadow:0 0 48px rgba(56,244,101,.58),inset 0 0 65px rgba(255,255,255,.30)}.state-false{background:linear-gradient(135deg,#7a1023,#26040d);color:#ffe2e7}.result-area{min-height:105px;display:grid;place-items:center;text-align:center;border:1px dashed rgba(154,255,193,.20);border-radius:16px;padding:16px}.result-placeholder{color:var(--muted)}.result-box .result-ms{font-size:clamp(2.6rem,9vw,5.2rem);font-weight:950;line-height:1;color:var(--lime);text-shadow:0 0 30px rgba(188,255,57,.30)}.result-box .result-rank{margin-top:.45rem;color:var(--mint);font-weight:900;letter-spacing:.08em}.result-box .result-stars{color:#f4ff70;margin-top:.2rem;font-size:1.2rem}.game-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:17px}.rank-guide{border-radius:20px;padding:20px;margin-top:22px}.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.rank-grid div{padding:12px;border:1px solid rgba(151,255,192,.13);background:rgba(1,17,8,.38);border-radius:13px}.rank-grid b,.rank-grid span{display:block}.rank-grid b{color:var(--lime)}.rank-grid span{margin-top:4px;color:var(--mint);font-size:.78rem}.recent-card{border-radius:22px;padding:22px;margin-top:22px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-head h2{margin-bottom:0}.attempt-count{color:var(--muted);font-size:.85rem}.recent-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:11px;margin-top:16px}.attempt-chip{padding:13px;border-radius:14px;border:1px solid rgba(151,255,192,.15);background:rgba(1,17,8,.47)}.attempt-chip strong{display:block;color:var(--lime);font-size:1.18rem}.attempt-chip span{display:block;margin-top:.23rem;color:var(--mint);font-size:.75rem}.empty-attempts{color:var(--muted);padding:12px 0}.history-panel{position:fixed;z-index:30;inset:0 auto 0 0;width:min(380px,92vw);padding:24px;background:rgba(3,18,8,.97);border-right:1px solid var(--line);box-shadow:22px 0 65px rgba(0,0,0,.42);transform:translateX(-105%);transition:.26s;overflow-y:auto}.history-panel.open{transform:translateX(0)}.panel-overlay{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.48);opacity:0;visibility:hidden;transition:.22s}.panel-overlay.visible{opacity:1;visibility:visible}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel-head h2{font-size:2rem;margin-bottom:0}.close-btn{width:38px;height:38px;color:var(--text);background:rgba(255,255,255,.08);font-size:1.8rem;line-height:1}.close-btn:hover{background:rgba(255,98,118,.25)}.history-summary{margin:18px 0;padding:14px;border-radius:14px;color:var(--mint);background:rgba(56,244,101,.08);border:1px solid rgba(56,244,101,.14)}.history-list{display:grid;gap:10px}.history-item{padding:13px;border-radius:14px;background:rgba(20,53,30,.45);border:1px solid rgba(151,255,192,.12)}.history-item strong{font-size:1.25rem;color:var(--lime)}.history-item span{display:block;margin-top:.25rem;color:var(--mint);font-size:.82rem}.history-empty{color:var(--muted);padding:18px 0}.history-panel .danger{width:100%;margin-top:18px}footer{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px;padding:30px 5px 0;color:var(--muted);font-size:.88rem}footer a{color:var(--mint)}#confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}.record-pop{animation:recordPulse .62s ease both}@keyframes recordPulse{0%{transform:scale(.84);opacity:0}58%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}.certificate-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.64);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.2s}.certificate-modal.open{opacity:1;visibility:visible}.modal-card{position:relative;width:min(640px,100%);padding:clamp(24px,5vw,38px);border-radius:24px}.modal-close{position:absolute;top:16px;right:16px}.modal-subtitle{color:var(--muted);line-height:1.5}.certificate-options{display:grid;gap:12px;margin-top:18px}.certificate-choice{width:100%;text-align:left;padding:16px;border:1px solid rgba(151,255,192,.20);border-radius:16px;color:var(--text);background:rgba(1,17,8,.5)}.certificate-choice:hover{border-color:var(--lime);background:rgba(56,244,101,.10)}.certificate-choice b,.certificate-choice span{display:block}.certificate-choice b{color:var(--lime);font-size:1.1rem}.certificate-choice span{margin-top:5px;color:var(--mint)}.modal-actions{display:flex;justify-content:flex-end;margin-top:18px}@media(max-width:700px){.corner-btn{top:11px;padding:.58rem .7rem;font-size:.82rem}.history-btn{left:11px}.sound-btn{right:11px}.app-shell{width:min(100% - 22px,1040px);padding-top:74px}.topbar{align-items:flex-start;flex-direction:column}.score-strip{grid-template-columns:1fr;gap:13px}.divider{width:100%;height:1px}.reaction-zone{min-height:280px}.rank-grid{grid-template-columns:1fr 1fr}.game-actions .primary-btn,.game-actions .ghost-btn{width:100%}}