*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--c-bg: #0a0a0a;--c-surface: #111111;--c-border: #1e1e1e;--c-text: #e0e0e0;--c-text-muted: #666666;--c-accent: #ff2a2a;--c-accent-glow: rgba(255, 42, 42, .25);--c-success: #00ff88;--c-success-glow: rgba(0, 255, 136, .2);--c-warning: #ff9500;--c-climax: #ff0040;--c-climax-glow: rgba(255, 0, 64, .3);--c-result-gold: #ffd700;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;--font-sans: "Inter", "Helvetica Neue", sans-serif}html{font-size:16px;-webkit-font-smoothing:antialiased}body{background:var(--c-bg);color:var(--c-text);font-family:var(--font-sans);min-height:100dvh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}#app{position:relative;width:100%;max-width:560px;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem}.scanlines{pointer-events:none;position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px);z-index:1000}.header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.header__badge{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.3em;color:var(--c-accent);border:1px solid var(--c-accent);padding:.2em .8em;border-radius:2px;animation:pulse-border 2s ease-in-out infinite}.header__title{font-family:var(--font-mono);font-size:clamp(2rem,8vw,3.5rem);font-weight:700;letter-spacing:.15em;color:#fff;text-shadow:0 0 30px var(--c-accent-glow),0 0 60px var(--c-accent-glow)}.header__sub{font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-muted);letter-spacing:.1em}.status-bar{display:flex;justify-content:center;gap:1.5rem;font-family:var(--font-mono);font-size:.65rem;color:var(--c-text-muted);letter-spacing:.1em}.status-bar__item{display:flex;align-items:center;gap:.4rem}.status-bar__dot{width:6px;height:6px;border-radius:50%;background:var(--c-text-muted);transition:background .3s,box-shadow .3s}.status-bar__dot--online{background:var(--c-success);box-shadow:0 0 6px var(--c-success)}.status-bar__dot--connecting{background:var(--c-warning);animation:blink 1s step-end infinite}.status-bar__dot--offline{background:var(--c-accent);animation:blink 1s step-end infinite}.phase{display:none}.phase--active{display:block;animation:fade-in .4s ease-out}.panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:6px;padding:1.25rem 1.5rem;transition:border-color .4s ease,box-shadow .4s ease}.panel--online{border-color:var(--c-success);box-shadow:0 0 20px var(--c-success-glow),inset 0 0 20px var(--c-success-glow)}.panel--error{border-color:var(--c-accent);box-shadow:0 0 20px var(--c-accent-glow),inset 0 0 20px var(--c-accent-glow)}.panel__header{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}.panel__dot{width:8px;height:8px;border-radius:50%;background:var(--c-text-muted);transition:background .3s ease,box-shadow .3s ease}.panel__dot--online{background:var(--c-success);box-shadow:0 0 8px var(--c-success)}.panel__dot--error{background:var(--c-accent);box-shadow:0 0 8px var(--c-accent);animation:blink 1s step-end infinite}.panel__label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--c-text-muted);text-transform:uppercase}.panel__message{font-family:var(--font-mono);font-size:.95rem;font-weight:600;letter-spacing:.05em}.panel__message--online{color:var(--c-success)}.panel__message--error{color:var(--c-accent)}.panel__detail{font-family:var(--font-mono);font-size:.7rem;color:var(--c-text-muted);margin-top:.4rem}.phase__hint{font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-muted);text-align:center;margin-top:1rem;animation:pulse-border 3s ease-in-out infinite}.climax{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}.climax__label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.3em;color:var(--c-climax);animation:pulse-border 1s ease-in-out infinite}.climax__counter{font-family:var(--font-mono);font-size:clamp(3rem,12vw,5rem);font-weight:800;color:#fff;text-shadow:0 0 40px var(--c-climax-glow),0 0 80px var(--c-climax-glow);line-height:1}.climax__unit{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;color:var(--c-text-muted)}.click-btn{width:140px;height:140px;border-radius:50%;border:3px solid var(--c-climax);background:#ff004014;color:#fff;font-family:var(--font-mono);font-size:1.4rem;font-weight:700;letter-spacing:.15em;cursor:pointer;transition:transform .08s,box-shadow .08s,background .08s;box-shadow:0 0 30px var(--c-climax-glow),inset 0 0 30px var(--c-climax-glow);animation:pulse-glow 2s ease-in-out infinite;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.click-btn:active{transform:scale(.92);background:#ff004040;box-shadow:0 0 50px var(--c-climax-glow),inset 0 0 50px var(--c-climax-glow)}.click-btn--flash{transform:scale(.95);background:#ff004033}.climax__hint{font-family:var(--font-mono);font-size:.8rem;color:var(--c-text-muted);letter-spacing:.05em}.result{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;padding:2rem 0}.result__label{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;color:var(--c-result-gold)}.result__count{font-family:var(--font-mono);font-size:clamp(3rem,12vw,5rem);font-weight:800;color:var(--c-result-gold);text-shadow:0 0 40px rgba(255,215,0,.3),0 0 80px rgba(255,215,0,.15);line-height:1}.result__unit{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;color:var(--c-text-muted)}.result__message{font-family:var(--font-mono);font-size:.85rem;color:var(--c-text);margin-top:1rem}.banner{display:flex;align-items:center;gap:.6rem;background:#ff95001a;border:1px solid var(--c-warning);border-radius:6px;padding:.8rem 1.2rem;font-family:var(--font-mono);font-size:.8rem;color:var(--c-warning);animation:slide-in .3s ease-out}.banner--hidden{display:none}.banner__icon{font-size:1.1rem}.footer{text-align:center;font-size:.65rem;color:var(--c-text-muted);font-family:var(--font-mono);letter-spacing:.05em}@keyframes pulse-border{0%,to{opacity:1}50%{opacity:.4}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes slide-in{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 30px var(--c-climax-glow),inset 0 0 30px var(--c-climax-glow)}50%{box-shadow:0 0 50px var(--c-climax-glow),inset 0 0 50px var(--c-climax-glow)}}body[data-phase=CLIMAX]{background:#050005}body[data-phase=CLIMAX] .scanlines{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,0,64,.02) 2px,rgba(255,0,64,.02) 4px)}body[data-phase=RESULT] .header__title{text-shadow:0 0 30px rgba(255,215,0,.3),0 0 60px rgba(255,215,0,.15)}