*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f7f8fc;color:#17181c}
body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
button{font:inherit;border:0;cursor:pointer}
.app{width:min(760px,100%);min-height:100vh;padding:22px 18px 34px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.logo{font-weight:900;font-size:24px;letter-spacing:-1.3px;color:#17181c;background:none;padding:4px 0}
.logo span{font-weight:500;color:#777}
.home{padding:9px 13px;border-radius:12px;background:#fff;border:1px solid #e4e6eb;color:#555;font-weight:700}
.card{background:#fff;border:1px solid #e4e6eb;border-radius:24px;box-shadow:0 10px 35px rgba(20,25,35,.06)}
.intro{padding:30px;text-align:center}
.badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#f0f2f6;color:#666;font-size:12px;font-weight:800;margin-bottom:12px}
h1{margin:0;font-size:38px;letter-spacing:-2px}
.sub{margin:10px 0 0;color:#737782;line-height:1.6}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.rule{padding:16px 10px;border-radius:16px;background:#f7f8fa}
.rule b{display:block;font-size:15px;margin-bottom:5px}
.rule span{font-size:12px;color:#858994}
.primary{width:100%;padding:15px;border-radius:15px;background:#17181c;color:#fff;font-weight:800}
.primary:hover{opacity:.92}
.game{display:none;padding:16px}
.game-top{display:flex;justify-content:space-between;align-items:center;padding:5px 7px 14px;color:#747781;font-size:13px;font-weight:700}
.stage{height:min(62vh,520px);min-height:360px;border-radius:20px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;text-align:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .12s}
.stage .big{font-size:clamp(38px,9vw,70px);font-weight:900;letter-spacing:-3px}
.stage .small{margin-top:9px;color:#777;font-weight:600}
.stage.wait{background:#f0f2f5;color:#17181c}
.stage.ready{background:#e9edf3;color:#17181c}
.stage.go{background:#17181c;color:#fff}
.stage.go .small{color:#c9cbd0}
.stage.early{background:#f1dfe1;color:#7b232b}
.stage.done{background:#e9edf3}
.result{display:none;padding:28px;text-align:center}
.result .label{color:#777;font-size:13px;font-weight:800}
.result .time{font-size:72px;letter-spacing:-4px;font-weight:900;margin:5px 0}
.result .unit{font-size:18px;color:#777;font-weight:700}
.rank{display:inline-block;margin:12px 0 20px;padding:8px 13px;border-radius:999px;background:#f0f2f6;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 22px}
.stat{background:#f7f8fa;border-radius:15px;padding:14px 8px}
.stat b{display:block;font-size:18px}
.stat span{font-size:11px;color:#858994}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.secondary{padding:14px;border-radius:14px;background:#f0f1f4;color:#25272c;font-weight:800}
.note{margin-top:14px;text-align:center;color:#92959d;font-size:11px}
@media(max-width:520px){
 .app{padding:16px 12px 25px}
 .intro{padding:25px 18px}
 h1{font-size:34px}
 .rules{gap:7px}
 .rule{padding:13px 7px}
 .stage{min-height:340px}
 .result .time{font-size:60px}
}

/* GO signal: the entire solo-game viewport turns dark immediately. */
body.reflex-go-active,body.reflex-go-active .app{background:#090a0d;color:#fff}
body.reflex-go-active .game{background:#090a0d;border-color:#090a0d;box-shadow:none}
body.reflex-go-active .game-top,body.reflex-go-active .note{color:#d3d5dd}
body.reflex-go-active .stage.go{background:#090a0d;color:#fff;transition:none}
body.reflex-go-active .header .logo,body.reflex-go-active .header .logo span{color:#fff}
body.reflex-go-active .header .home{background:#22242a;border-color:#454751;color:#fff}