:root{--bg0:#06121a;--bg1:#0c2a33;--accent:#3fe0c5;--accent2:#ffd23f;--good:#34d399;--bad:#fb7185;--ink:#eefaf8;--muted:#8fb3b0;--card-border:#ffffff24}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{color:var(--ink);background:radial-gradient(130% 130% at 50% 0%, var(--bg1) 0%, var(--bg0) 65%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Meiryo,sans-serif;overflow-x:hidden}.wrap{flex-direction:column;max-width:560px;min-height:100vh;margin:0 auto;padding:16px 16px 40px;display:flex}.hud{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.streak{font-size:15px;font-weight:800}.streak .n{color:var(--accent);font-variant-numeric:tabular-nums;font-size:22px}.best{color:var(--accent2);font-weight:800}.cards{flex-direction:column;flex:1;justify-content:center;gap:12px;display:flex}.card{border:1px solid var(--card-border);text-align:center;background:#ffffff0d;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:150px;padding:22px 18px;animation:.3s pop;display:flex;position:relative;box-shadow:0 16px 36px #00000059}.card .label{letter-spacing:2px;color:var(--muted);font-size:11px}.card .ttl{font-size:19px;font-weight:800;line-height:1.55}.card .year{font-variant-numeric:tabular-nums;background:linear-gradient(135deg, var(--accent), var(--accent2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:900}.card .year small{-webkit-text-fill-color:var(--muted);font-size:18px}.card .qmark{color:var(--muted);font-size:40px;font-weight:900}.vs{letter-spacing:1px;color:var(--bg0);background:var(--accent);z-index:2;border-radius:99px;align-self:center;margin:-6px 0;padding:4px 12px;font-size:13px;font-weight:900}.ask{color:var(--muted);font-size:14px}.hl-buttons{grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;display:grid}.hl{appearance:none;border:1px solid var(--card-border);color:var(--ink);cursor:pointer;background:#ffffff0f;border-radius:14px;padding:16px 10px;font-family:inherit;font-size:16px;font-weight:800;transition:transform 80ms,background .15s,border .15s}.hl:active{transform:scale(.97)}@media (hover:hover){.hl:hover:not(:disabled){border-color:var(--accent);background:#3fe0c529}}.hl small{color:var(--muted);margin-top:2px;font-size:11px;font-weight:600;display:block}.verdict{text-align:center;min-height:32px;margin:6px 0;font-size:26px;font-weight:900}.verdict.ok{color:var(--good)}.verdict.ng{color:var(--bad)}.btn{appearance:none;cursor:pointer;color:#04211c;background:linear-gradient(135deg, var(--accent), #2bd0ff);border:none;border-radius:14px;padding:16px 22px;font-family:inherit;font-size:18px;font-weight:800;transition:transform 80ms;box-shadow:0 10px 24px #3fe0c54d}.btn:active{transform:translateY(2px)scale(.99)}.btn.ghost{color:var(--ink);border:1px solid var(--card-border);box-shadow:none;background:0 0}.center{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.logo{letter-spacing:3px;color:var(--muted);font-size:12px}.title{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:38px;font-weight:900;line-height:1.15}.lead{color:var(--muted);max-width:360px;font-size:15px;line-height:1.8}.rules{text-align:left;border:1px solid var(--card-border);background:#ffffff0d;border-radius:16px;max-width:400px;padding:16px 18px;font-size:14px;line-height:1.9}.bignum{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:80px;font-weight:900;line-height:1;animation:.5s cubic-bezier(.2,1.4,.4,1) pop}.subline{color:var(--muted);font-size:14px}.footer{text-align:center;color:var(--muted);margin-top:18px;font-size:11px;line-height:1.6}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:none}}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}