:root{--ink: #060817;--panel: rgba(12, 16, 40, .72);--panel-strong: rgba(10, 13, 34, .9);--line: rgba(120, 200, 255, .28);--cyan: #4ff7ff;--amber: #ffb35c;--pink: #ff5fb3;--text: #eaf2ff;--muted: #9fb3d9;--danger: #ff5d6c}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:PingFang SC,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;inset:0;width:100%;height:100%;display:block}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px #00000059}button{font:inherit;cursor:pointer;color:var(--text);border:1px solid var(--line);background:#ffffff0f;border-radius:12px;padding:10px 18px;transition:transform .08s ease,filter .2s ease,opacity .2s ease}button:active:not(:disabled){transform:scale(.96)}button:disabled{opacity:.45;cursor:default}button.primary{width:100%;font-size:18px;font-weight:800;letter-spacing:.08em;color:#1a0d05;border:none;background:linear-gradient(135deg,var(--amber),#ff7a5c);box-shadow:0 8px 24px #ff965059;padding:14px 18px}button.primary:not(:disabled):hover{filter:brightness(1.08)}button.ghost{background:#0a0d2299;font-size:14px;padding:8px 14px}#hud{position:fixed;inset:0;pointer-events:none}#hud-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}#score-box{min-width:96px;padding:8px 14px}#score-box .label,#board-title{font-size:11px;color:var(--muted);letter-spacing:.14em}#score{font-size:34px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums;line-height:1.1;text-shadow:0 0 18px rgba(79,247,255,.5)}#timer{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;padding:6px 18px;letter-spacing:.06em}#timer.urgent{color:var(--danger);text-shadow:0 0 16px rgba(255,93,108,.7)}#board{min-width:128px;max-width:200px;padding:8px 12px;font-size:13px}#board .row{display:flex;align-items:center;gap:8px;padding:3px 0;white-space:nowrap}#board .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}#board .name{flex:1;overflow:hidden;text-overflow:ellipsis;max-width:100px}#board .pts{font-variant-numeric:tabular-nums;font-weight:700}#board .me .name{color:var(--cyan);font-weight:700}#leave{position:absolute;left:12px;bottom:max(14px,env(safe-area-inset-bottom));pointer-events:auto}#dash{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;pointer-events:auto;font-size:17px;font-weight:800;letter-spacing:.06em;color:#1a0d05;border:2px solid rgba(255,220,170,.8);background:radial-gradient(circle at 35% 30%,#ffe2b0,var(--amber) 55%,#ff7a5c);box-shadow:0 0 0 6px #ffb35c1f,0 10px 30px #ff8c5066}#dash.cooling{opacity:.4;filter:saturate(.4)}#dash.active{transform:scale(.94)}#banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.9);font-size:clamp(30px,7vw,68px);font-weight:900;letter-spacing:.08em;white-space:nowrap;color:var(--text);text-shadow:0 0 28px rgba(79,247,255,.65),0 4px 0 rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#banner.go{color:var(--amber);text-shadow:0 0 32px rgba(255,179,92,.8)}#lobby,#results{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(180deg,#06081759,#060817d9);background-color:var(--ink);background-size:cover;background-position:center;overflow-y:auto}#lobby .card,#results .card{width:min(92vw,400px);padding:28px 26px 22px;text-align:center;background:var(--panel-strong)}.title{margin:0;font-size:clamp(56px,14vw,76px);font-weight:900;line-height:1;letter-spacing:.1em;background:linear-gradient(90deg,var(--cyan),#9fd8ff 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(79,247,255,.35))}.subtitle{margin:6px 0 4px;font-size:12px;letter-spacing:.42em;color:var(--cyan);opacity:.85}.tagline{margin:0 0 22px;color:var(--muted);font-size:15px}.field{display:block;text-align:left;margin-bottom:16px}.field span{display:block;font-size:12px;color:var(--muted);letter-spacing:.1em;margin-bottom:6px}.field input{width:100%;font:inherit;font-size:16px;color:var(--text);background:#ffffff0f;border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none}.field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #4ff7ff26}.status{min-height:20px;margin:14px 0 0;font-size:13px;color:var(--muted)}.rules{list-style:none;padding:14px 0 0;margin:18px 0 0;text-align:left;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}.rules li{padding:4px 0}.rules b{color:var(--text);margin-right:6px}#results h2{margin:0 0 14px;font-size:30px;letter-spacing:.1em;color:var(--amber)}#ranking{list-style:none;padding:0;margin:0;text-align:left}#ranking li{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:#ffffff0d;font-size:16px;animation:rise .4s ease both}#ranking li:nth-child(1){background:linear-gradient(90deg,#ffb35c4d,#ffffff0d)}#ranking .rank{width:26px;font-weight:900;color:var(--amber)}#ranking .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#ranking .pts{font-weight:800;font-variant-numeric:tabular-nums}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}#toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%) translateY(8px);padding:10px 16px;border-radius:12px;background:var(--panel-strong);border:1px solid var(--line);font-size:14px;max-width:88vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:10}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 640px){#hud-top{flex-wrap:wrap}#board{max-width:150px;min-width:110px;font-size:12px}#board .name{max-width:70px}#score{font-size:26px}#timer{font-size:20px;padding:4px 12px}#dash{width:84px;height:84px;font-size:15px}}@media (max-height: 520px) and (orientation: landscape){#lobby .card{padding:16px 20px}.title{font-size:44px}.rules{display:none}}