:root { --ink:#15171b; --cream:#f3eee3; --red:#ef2b26; --yellow:#f6d54a; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--ink); color:var(--cream); font-family:Arial,Helvetica,sans-serif; -webkit-tap-highlight-color:transparent; }
button,input,select { font:inherit; }
button { color:inherit; }
.game { min-height:100svh; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.065),transparent 32%),repeating-linear-gradient(135deg,transparent 0 24px,rgba(255,255,255,.018) 25px 26px),#16181d; }
.game::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(rgba(255,255,255,.2) .55px,transparent .55px); background-size:5px 5px; }
.topbar { min-height:74px; position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:max(16px,env(safe-area-inset-top)) clamp(20px,5vw,56px) 14px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand { border:0; background:none; padding:8px 0; justify-self:start; cursor:pointer; display:flex; align-items:center; gap:10px; font-weight:1000; letter-spacing:.12em; font-size:clamp(12px,2.8vw,15px); }
.brand-dot { width:11px; height:11px; border-radius:50%; background:var(--red); box-shadow:0 0 16px var(--red); }
.tabs { display:flex; background:#0c0d10; border:1px solid rgba(255,255,255,.09); border-radius:99px; padding:4px; }
.tabs button,.segmented button { border:0; background:transparent; color:#7d7f85; padding:8px 16px; border-radius:99px; cursor:pointer; font-size:11px; font-weight:900; letter-spacing:.08em; }
.tabs button.active,.segmented button.active { background:#292c32; color:#fff; }
.sound-toggle { justify-self:end; color:#aeb0b5; background:transparent; border:0; display:flex; gap:8px; align-items:center; cursor:pointer; padding:8px; font-size:11px; letter-spacing:.1em; }
.sound-toggle span { color:var(--yellow); font-size:18px; letter-spacing:-.16em; }
.stage { min-height:calc(100svh - 74px); position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,2.6vh,28px); padding:20px 20px max(24px,env(safe-area-inset-bottom)); }
.today-counter { text-align:center; display:grid; justify-items:center; gap:2px; }
.today-counter span,.stats-heading>div>span { color:#777a80; font-size:10px; font-weight:900; letter-spacing:.2em; }
.today-counter strong { font-size:clamp(36px,9vw,58px); line-height:1; font-weight:1000; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.today-counter small { color:#777a80; font-size:11px; }
.status { max-width:680px; text-align:center; display:flex; align-items:center; justify-content:center; gap:9px; color:#bbbcc0; font-size:clamp(10px,2.6vw,12px); line-height:1.4; font-weight:900; letter-spacing:.12em; text-transform:uppercase; transition:color .2s; }
.status-light { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#62da83; box-shadow:0 0 12px #62da83; }
.is-pressed .status { color:var(--cream); }
.is-pressed .status-light { background:var(--yellow); box-shadow:0 0 20px var(--yellow); }
.button-area { width:min(58vh,76vw,390px); height:min(58vh,76vw,390px); flex:0 0 auto; position:relative; display:grid; place-items:center; }
.pulse-ring { position:absolute; width:72%; height:72%; border-radius:50%; border:1px solid rgba(239,43,38,.18); opacity:0; }
.is-pressed .pulse-ring { animation:pulse .62s ease-out; }
.is-pressed .pulse-ring-two { animation-delay:.1s; }
.buzzer-base { width:84%; height:84%; flex:0 0 auto; border-radius:50%; padding:7%; background:linear-gradient(145deg,#3a3d44,#111217 48%,#07080a); box-shadow:0 30px 38px rgba(0,0,0,.6),inset 0 3px 3px rgba(255,255,255,.12),inset 0 -7px 10px #000; }
.buzzer { position:relative; width:100%; height:100%; border:0; border-radius:50%; cursor:pointer; touch-action:manipulation; display:grid; place-items:center; background:radial-gradient(circle at 38% 28%,#ff7770,#f13c35 25%,#d51816 57%,#8e0b0a); box-shadow:inset 0 9px 16px rgba(255,255,255,.25),inset 0 -18px 24px rgba(79,0,0,.5),0 10px 0 #640908,0 18px 24px rgba(0,0,0,.6),0 0 60px rgba(239,43,38,.18); transform:translateY(-7px); transition:transform .07s,box-shadow .07s,filter .2s; }
.buzzer:active,.is-pressed .buzzer { transform:translateY(3px) scale(.985); box-shadow:inset 0 5px 16px rgba(255,255,255,.18),inset 0 -9px 18px rgba(79,0,0,.55),0 2px 0 #640908,0 8px 14px rgba(0,0,0,.55),0 0 110px rgba(239,43,38,.75); filter:brightness(1.12); }
.buzzer:focus-visible { outline:5px solid var(--yellow); outline-offset:9px; }
.buzzer-shine { position:absolute; inset:7% 15% 54%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.38),transparent 72%); filter:blur(5px); }
.rat { position:relative; z-index:1; width:72%; height:72%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 4px 1px rgba(115,0,0,.3)); transition:transform .12s; }
.is-pressed .rat { transform:scale(.94); }
.hint { margin:0; text-align:center; color:#d9d4ca; font-size:14px; line-height:1.5; }
.hint span { display:block; color:#73757b; font-size:11px; }
.error { min-height:16px; margin:0; color:#ff7d77; font-size:12px; text-align:center; }
.stats-page { position:relative; z-index:1; width:min(1120px,100%); margin:0 auto; padding:clamp(32px,6vw,68px) clamp(20px,5vw,56px) 48px; }
.stats-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.stats-heading h1 { margin:5px 0 0; font-size:clamp(38px,7vw,72px); letter-spacing:-.06em; line-height:.95; }
.stats-heading>strong { color:var(--red); font-size:clamp(34px,6vw,60px); line-height:.9; text-align:right; letter-spacing:-.04em; }
.stats-heading>strong small { color:#85878c; display:block; font-size:10px; letter-spacing:.12em; margin-top:10px; text-transform:uppercase; }
.filters { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.segmented { display:flex; background:#0c0d10; padding:4px; border:1px solid rgba(255,255,255,.09); border-radius:99px; }
.filters input,.filters select { color:#eee; color-scheme:dark; background:#22252a; border:1px solid rgba(255,255,255,.11); border-radius:10px; padding:10px 12px; min-height:40px; }
.date-range { display:flex; align-items:center; gap:8px; color:#777a80; }
.chart-card { position:relative; min-height:360px; background:rgba(10,11,14,.72); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:28px 22px 44px; overflow:hidden; transition:opacity .2s; }
.chart-card.loading { opacity:.48; }
.chart-grid { position:absolute; inset:28px 22px 44px; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid i { height:1px; background:rgba(255,255,255,.07); }
.chart { position:absolute; inset:28px 22px 18px; display:flex; align-items:stretch; gap:clamp(2px,.7vw,8px); }
.bar-column { min-width:0; flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; padding-bottom:26px; }
.bar { width:100%; min-width:2px; max-width:36px; border-radius:6px 6px 2px 2px; background:linear-gradient(#ff5d55,var(--red)); box-shadow:0 0 18px rgba(239,43,38,.16); transition:height .25s; }
.bar-column small { position:absolute; bottom:0; color:#666970; font-size:9px; white-space:nowrap; }
.bar-value { color:#a9abb0; font-size:9px; min-height:13px; margin-bottom:4px; }
.bar-column>span { color:#a9abb0; font-size:9px; min-height:13px; margin-bottom:4px; }
.empty-chart { position:absolute; inset:0; display:grid; place-items:center; color:#73757b; font-size:13px; }
.period-note { color:#73757b; font-size:11px; margin:13px 4px 0; }
.hidden { display:none!important; }
@keyframes pulse { 0%{opacity:.8;transform:scale(.8)} 100%{opacity:0;transform:scale(1.6)} }
@media (max-width:700px) { .topbar { grid-template-columns:1fr auto; gap:8px; } .tabs { grid-column:1/-1; grid-row:2; justify-self:center; } .sound-toggle b { display:none; } .stats-heading { align-items:start; } .stats-heading>strong small { max-width:100px; margin-left:auto; } .chart-card { min-height:310px; padding-inline:12px; } .chart-grid,.chart { left:12px; right:12px; } }
@media (max-height:700px) and (min-width:701px) { .stage { gap:10px; padding-block:12px; } .button-area { width:min(48vh,330px); height:min(48vh,330px); } .hint { display:none; } .today-counter strong { font-size:36px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }