:root{--accent:#0a84ff;--accent-text:#fff;--bg:#fff;--bg-quiet:#f2f2f7;--bubble-recv:#e9e9eb;--bubble-recv-text:#111;--text:#111;--text-dim:#8e8e93;--bar-bg:#ffffffd1;--compose-bg:#fff;--compose-border:#d1d1d6;--win:#30d158;--loss:#ff453a}@media (prefers-color-scheme:dark){:root{--bg:#0a0a0f;--bg-quiet:#0a0a0f;--bubble-recv:#26252a;--bubble-recv-text:#f2f2f7;--text:#f2f2f7;--text-dim:#8e8e93;--bar-bg:#0a0a0fd1;--compose-bg:#16161c;--compose-border:#3a3a3f}}*{box-sizing:border-box}html,body{background:var(--bg-quiet);color:var(--text);-webkit-font-smoothing:antialiased;height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#root{height:100%}.app{display:flex;background:var(--bg);flex-direction:column;max-width:520px;height:100dvh;margin:0 auto}@media (min-width:560px){.app{box-shadow:0 0 0 1px #80808026}}.topbar{position:sticky;z-index:10;display:flex;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--bar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:.5px solid #80808040;align-items: center;gap:10px;top:0}.avatar{color:#fff;display:flex;user-select:none;background:linear-gradient(#5e5e63,#3a3a3f);border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:38px;height:38px;font-size:15px;font-weight:600}.avatar.revealed{background:linear-gradient(180deg,var(--accent),#0060df)}.topbar-titles{flex:1;min-width:0}.topbar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600;line-height:1.2}.topbar-sub{color:var(--text-dim);font-size:12px;line-height:1.3}.nav-btns{display:flex;gap:4px}.nav-btn{appearance:none;color:var(--accent);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:6px 8px;font-size:19px;line-height:1}.nav-btn:active{opacity:.5}.chat{overflow-y:auto;display:flex;overscroll-behavior:contain;flex-direction:column;flex:1;gap:2px;padding:14px 12px 8px}.sysline{text-align:center;color:var(--text-dim);margin:12px 24px;font-size:11.5px;line-height:1.5}.sysline strong{color:var(--text);font-weight:600}.sysline.win strong{color:var(--win)}.sysline.loss strong{color:var(--text-dim)}.bubble{white-space:pre-wrap;word-wrap:break-word;border-radius:18px;max-width:78%;margin-bottom:1.5px;padding:8px 13px;font-size:16px;line-height:1.35}.bubble.sent{background:var(--accent);color:var(--accent-text);border-bottom-right-radius:5px;align-self: flex-end}.bubble.recv{background:var(--bubble-recv);color:var(--bubble-recv-text);border-bottom-left-radius:5px;align-self: flex-start}.bubble.group-gap{margin-top:8px}.bubble.winning{box-shadow:0 0 0 2px var(--win),0 0 18px #30d1588c;animation:slam .45s cubic-bezier(.2,1.6,.4,1)}@keyframes slam{0%{transform:scale(1.6)}to{transform:scale(1)}}.typing{background:var(--bubble-recv);display:flex;border-radius:18px 18px 18px 5px;align-self: flex-start;gap:4.5px;margin-top:8px;padding:12px 14px}.typing span{background:var(--text-dim);animation:blink 1.2s infinite both;border-radius:50%;width:8px;height:8px}.typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}@keyframes blink{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2.5px)}}.compose{display:flex;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:.5px solid #80808033;align-items: flex-end;gap:8px}.compose textarea{resize:none;border:1px solid var(--compose-border);background:var(--compose-bg);color:var(--text);font:inherit;outline:none;border-radius:18px;flex:1;max-height:120px;padding:8px 14px;font-size:16px;line-height:1.3}.compose textarea::placeholder{color:var(--text-dim)}.send-btn{appearance:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:34px;height:34px;transition:opacity .15s;font-size:18px;font-weight:700}.send-btn:disabled{opacity:.35;cursor:default}.gameover-bar{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;border-top:.5px solid #80808033}.gameover-bar .come-back{color:var(--text-dim);margin-bottom:10px;font-size:14px}.peek-btn{appearance:none;background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:22px;padding:10px 22px;font-size:15px;font-weight:600}.hero{display:flex;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items: center;gap:14px;padding:32px 28px}.hero h1{letter-spacing:-.5px;margin:0;font-size:28px}.hero h1 .vs{color:var(--text-dim);font-weight:400}.hero p{color:var(--text-dim);max-width:320px;margin:0;font-size:15px;line-height:1.55}.gh-btn{display:inline-flex;background:var(--text);color:var(--bg);text-decoration:none;border-radius:24px;align-items: center;gap:9px;margin-top:10px;padding:12px 24px;font-size:15px;font-weight:600}.hero .record{color:var(--text-dim);font-size:13px}.panel{overflow-y:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));flex:1}.panel h2{letter-spacing:-.3px;margin:4px 2px 16px;font-size:21px}.global-score{display:flex;background:var(--bubble-recv);border-radius:16px;justify-content:center;align-items: center;gap:18px;margin-bottom:22px;padding:22px 12px}.global-side{text-align:center;flex:1}.global-side .num{letter-spacing:-1px;font-size:36px;font-weight:700}.global-side .lbl{color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-top:2px;font-size:12px}.global-vs{color:var(--text-dim);font-size:14px}.global-side.humans .num{color:var(--win)}.row{display:flex;border-bottom:.5px solid #8080802e;align-items: center;gap:12px;padding:11px 4px;font-size:15px}.row:last-child{border-bottom:0}.row .rank{color:var(--text-dim);font-variant-numeric:tabular-nums;width:22px;font-size:13px}.row img.pfp{border-radius:50%;width:30px;height:30px}.row .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.row .who .sub{display:block;color:var(--text-dim);font-size:12px}.row .stat{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:14px}.row .stat b{color:var(--text)}.sort-toggle{display:flex;gap:6px;margin-bottom:14px}.sort-toggle button{appearance:none;border:1px solid var(--compose-border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:14px;padding:5px 12px;font-size:12.5px}.sort-toggle button.on{background:var(--accent);border-color:var(--accent);color:#fff}.empty-note{color:var(--text-dim);text-align:center;padding:28px 0;font-size:14px}.confetti{position:fixed;pointer-events:none;overflow:hidden;z-index:100;inset:0}.confetti i{position:absolute;opacity:.95;animation:fall linear forwards;width:9px;height:14px;top:-12px}@keyframes fall{to{transform:translateY(110vh)rotate(720deg);opacity:.7}}