:root{--color-bg: oklch(97.5% .01 95);--color-surface: oklch(100% 0 0);--color-ink: oklch(22% .02 270);--color-ink-soft: oklch(45% .02 270);--color-line: oklch(88% .015 95);--color-accent: oklch(58% .23 275);--color-accent-ink: oklch(99% 0 0);--color-accent-soft: oklch(93% .05 275);--color-accent-shadow: oklch(44% .2 275);--candy-1: oklch(70% .19 25);--candy-2: oklch(75% .16 85);--candy-3: oklch(72% .17 155);--candy-4: oklch(70% .15 230);--candy-5: oklch(68% .19 330);--color-positive: oklch(62% .17 150);--color-danger: oklch(58% .21 25);--color-live: var(--color-positive);--color-frame: oklch(30% .03 270);--color-frame-text: oklch(70% .02 270);--color-topbar-bg: color-mix(in oklch, var(--color-bg) 88%, white);--color-cover-dot: oklch(100% 0 0 / .28);--color-cover-shadow: oklch(0% 0 0 / .15);--color-muted-dot: color-mix(in oklch, var(--color-ink-soft) 30%, white);--color-row-alt: color-mix(in oklch, var(--color-bg) 45%, white);--color-overlay-scrim: oklch(22% .02 270 / .36);--color-skeleton-block: color-mix(in oklch, var(--color-line) 65%, white);--color-skeleton-line: color-mix(in oklch, var(--color-line) 70%, white);--color-google-red: #ea4335;--color-google-yellow: #fbbc05;--color-google-green: #34a853;--color-google-blue: #4285f4;--color-discord: #5865f2;--font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--text-hero: 3.25rem;--text-title: 1.625rem;--text-card: 1.0625rem;--text-base: 1rem;--text-small: .8125rem;--radius-card: 16px;--radius-control: 12px;--radius-pill: 999px;--shadow-sticker: 0 2px 0 var(--color-line), 0 6px 16px oklch(22% .02 270 / .06);--shadow-sticker-hover: 0 4px 0 var(--color-line), 0 10px 24px oklch(22% .02 270 / .1);--shadow-accent: 0 2px 0 var(--color-accent-shadow), 0 6px 16px oklch(58% .23 275 / .25);--shadow-accent-hover: 0 4px 0 var(--color-accent-shadow), 0 10px 24px oklch(58% .23 275 / .3);--shadow-live-ring: 0 0 0 4px oklch(62% .17 150 / .18);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-section: 4rem;--duration-fast: .14s;--duration-normal: .24s;--ease-pop: cubic-bezier(.2, .9, .3, 1.15);--ease-out: cubic-bezier(.16, 1, .3, 1)}@media(max-width:720px){:root{--text-hero: 2.25rem;--text-title: 1.375rem;--text-base: .9375rem;--space-section: 2.75rem}}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/bricolage-grotesque-latin-500-800-Cre6nC2_.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/inter-latin-400-700-Dx4kXJAl.woff2) format("woff2")}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,.wordmark,.card-name,.detail-title,.section-head,.stat-num,.tab,.name{font-family:var(--font-display);letter-spacing:0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;padding:0}body{background:var(--color-bg);color:var(--color-ink)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.64}.app-shell{min-height:100vh}.topbar{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--color-topbar-bg);border-bottom:1px solid var(--color-line);display:flex;height:56px;justify-content:space-between;padding:0 var(--space-6);position:sticky;top:0;z-index:10}.topbar-right{align-items:center;display:flex;gap:var(--space-3)}.wordmark{align-items:center;background:transparent;border:0;color:var(--color-ink);display:flex;font-size:1.375rem;font-weight:800;gap:2px;padding:0}.wordmark .c{color:var(--color-accent)}.wordmark-button:focus-visible,.card:focus-visible,.tab:focus-visible,.provider-btn:focus-visible,.account-chip:focus-visible,.menu-item:focus-visible,.room-pill button:focus-visible{outline:3px solid var(--color-accent-soft);outline-offset:2px}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-control);display:inline-flex;font-size:var(--text-base);font-weight:700;gap:var(--space-2);justify-content:center;min-height:44px;padding:10px 20px;transition:transform var(--duration-fast) var(--ease-pop),box-shadow var(--duration-fast) var(--ease-out)}.btn:hover{transform:translateY(-1px)}.btn:focus-visible{outline:3px solid var(--color-accent-soft);outline-offset:1px}.btn-accent{background:var(--color-accent);box-shadow:var(--shadow-accent);color:var(--color-accent-ink)}.btn-accent:hover{box-shadow:var(--shadow-accent-hover)}.btn-outline{background:var(--color-surface);border-color:var(--color-line);box-shadow:var(--shadow-sticker);color:var(--color-ink)}.btn-ghost{background:transparent;color:var(--color-ink-soft);font-weight:700}.btn-big{border-radius:14px;font-size:1.125rem;min-height:52px;padding:14px 28px}.btn-compact{min-height:36px;padding:6px 12px}.icon-only{aspect-ratio:1;min-width:36px;padding:6px}.page{margin:0 auto;max-width:1280px;padding:0 var(--space-6) var(--space-section)}.section-head{font-size:var(--text-title);font-weight:700;margin:var(--space-8) 0 var(--space-4)}.hero-signedout{margin:var(--space-section) 0;text-align:center}.hero-signedout h1{font-size:var(--text-hero);font-weight:800;line-height:1.05;margin:0 0 var(--space-2)}.hero-signedout .pop{color:var(--color-accent)}.hero-signedout p{color:var(--color-ink-soft);font-size:1.125rem;margin:0 0 var(--space-6)}.resume{align-items:center;background:var(--color-surface);border:1px solid var(--color-line);border-left:6px solid var(--color-positive);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker);display:flex;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4) var(--space-6)}.resume .dot,.live-dot{background:var(--color-positive);border-radius:50%;box-shadow:var(--shadow-live-ring);flex-shrink:0;height:10px;width:10px}.resume-text{flex:1}.resume-text strong{font-family:var(--font-display);font-weight:700}.resume-text .sub{color:var(--color-ink-soft);font-size:var(--text-small)}.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker);display:block;overflow:hidden;transition:transform var(--duration-fast) var(--ease-pop),box-shadow var(--duration-fast) var(--ease-out)}.card:hover{box-shadow:var(--shadow-sticker-hover);transform:translateY(-2px)}.card:hover .cover-mark{transform:scale(1.06) rotate(-3deg)}.cover,.detail-cover{background-image:radial-gradient(var(--color-cover-dot) 1.5px,transparent 1.5px);background-size:14px 14px;display:grid;overflow:hidden;place-items:center;position:relative}.cover{aspect-ratio:16 / 10}.detail-cover{aspect-ratio:16 / 11;border-radius:var(--radius-card);box-shadow:var(--shadow-sticker)}.cover-art{background-image:none}.cover-art img{height:100%;object-fit:cover;width:100%}.cover-mark{color:var(--color-surface);font-family:var(--font-display);font-size:3.5rem;font-weight:800;text-shadow:0 3px 0 var(--color-cover-shadow);transform:rotate(-3deg);transition:transform var(--duration-normal) var(--ease-pop);-webkit-user-select:none;user-select:none}.detail-cover .cover-mark{font-size:6rem}.candy-1{background-color:var(--candy-1)}.candy-2{background-color:var(--candy-2)}.candy-3{background-color:var(--candy-3)}.candy-4{background-color:var(--candy-4)}.candy-5{background-color:var(--candy-5)}.card-body{padding:var(--space-3) var(--space-4) var(--space-4)}.card-name{color:var(--color-ink);font-size:var(--text-card);font-weight:700}.card-meta{color:var(--color-ink-soft);display:flex;flex-wrap:wrap;font-size:var(--text-small);font-weight:500;gap:var(--space-3);margin-top:var(--space-1)}.card-meta span{align-items:center;display:inline-flex;gap:var(--space-1);white-space:nowrap}.card-meta .live{color:var(--color-positive);font-weight:700}.meta-dot{background:var(--color-positive);border-radius:50%;display:inline-block;height:.5em;width:.5em}.detail-header{align-items:center;display:grid;gap:var(--space-8);grid-template-columns:minmax(260px,380px) 1fr;margin:var(--space-8) 0}.detail-title{font-size:var(--text-hero);font-weight:800;line-height:1.02;margin:0 0 var(--space-3)}.chip-row,.cta-row,.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.pill{align-items:center;background:var(--color-accent-soft);border-radius:var(--radius-pill);color:var(--color-ink);display:inline-flex;font-size:var(--text-small);font-weight:600;gap:6px;padding:4px 14px}.dots{display:inline-flex;gap:3px;margin-left:2px}.dots i{background:var(--color-muted-dot);border-radius:50%;height:7px;width:7px}.dots i.on{background:var(--color-ink)}.cta-stack,.stat-row{margin-top:var(--space-6)}.stat{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker);min-width:128px;padding:var(--space-3) var(--space-6)}.stat-num{align-items:center;display:flex;font-size:var(--text-title);font-weight:800;gap:var(--space-2)}.stat-label{color:var(--color-ink-soft);font-size:var(--text-small);font-weight:600}.tabs{border-bottom:2px solid var(--color-line);display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}.tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--color-ink-soft);font-weight:700;margin-bottom:-2px;padding:10px 18px;white-space:nowrap}.tab.active{border-bottom-color:var(--color-accent);color:var(--color-ink)}.copy-panel,.join-card,.empty-state,.error-screen{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker);padding:var(--space-6)}.copy-panel{max-width:760px;line-height:1.6}.copy-panel p{margin:0 0 var(--space-3)}.copy-panel p:last-child{margin-bottom:0}.rules-heading{font-family:var(--font-display);font-size:var(--text-card);font-weight:700;margin:var(--space-4) 0 var(--space-2)}.rules-heading:first-child{margin-top:0}.rules-list{margin:0 0 var(--space-3);padding-left:var(--space-6)}.rules-list li{margin-bottom:var(--space-1)}.lb{background:var(--color-surface);border-collapse:collapse;border-radius:var(--radius-card);box-shadow:var(--shadow-sticker);overflow:hidden;width:100%}.lb th{border-bottom:1px solid var(--color-line);color:var(--color-ink-soft);font-size:var(--text-small);padding:var(--space-3) var(--space-4);text-align:left}.lb th:first-child,.lb td:first-child{padding-left:var(--space-3);padding-right:0;text-align:center;width:64px}.lb th:nth-child(3),.lb td:nth-child(3),.lb th:nth-child(4),.lb td:nth-child(4){width:18%}.lb td{padding:var(--space-3) var(--space-4)}.lb tr:nth-child(2n) td{background:var(--color-row-alt)}.rank-medal{border-radius:50%;color:var(--color-surface);display:inline-grid;font-family:var(--font-display);font-weight:800;height:30px;place-items:center;width:30px}.rank-1{background:var(--candy-2)}.rank-2{background:var(--candy-4)}.rank-3{background:var(--candy-1)}.status-block,.join-card,.empty-state,.error-screen,.play-wait{align-items:center;display:grid;gap:var(--space-3);justify-items:center;margin:var(--space-8) auto;max-width:560px;text-align:center}.status-block p,.empty-state p,.error-screen p,.join-card p{color:var(--color-ink-soft);margin:0}.form-error,.play-error{color:var(--color-danger);font-size:var(--text-small);font-weight:700}.login-wrap{display:grid;min-height:calc(100vh - 56px);padding:var(--space-6);place-items:center}.login-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:20px;box-shadow:var(--shadow-sticker-hover);max-width:400px;padding:var(--space-8);text-align:center;width:100%}.login-card .wordmark{font-size:1.75rem;justify-content:center;margin-bottom:var(--space-2)}.login-card .pitch{color:var(--color-ink-soft);margin:0 0 var(--space-8)}.provider-btn{align-items:center;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-control);box-shadow:var(--shadow-sticker);display:flex;font-size:var(--text-base);font-weight:700;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-3);min-height:46px;padding:13px;transition:transform var(--duration-fast) var(--ease-pop);width:100%}.provider-btn:hover{transform:translateY(-1px)}.provider-dev{font-size:var(--text-small);opacity:.65;padding:10px}.mark{align-items:center;border-radius:4px;color:var(--color-surface);display:inline-grid;font-size:.7rem;font-weight:800;height:20px;place-items:center;width:20px}.mark-google{background:conic-gradient(from -45deg,var(--color-google-red) 0 25%,var(--color-google-yellow) 0 50%,var(--color-google-green) 0 75%,var(--color-google-blue) 0);border-radius:50%}.mark-discord{background:var(--color-discord);border-radius:6px}.mark-dev{background:var(--color-ink-soft)}.login-fineprint{color:var(--color-ink-soft);font-size:var(--text-small);margin-top:var(--space-4)}.account-menu{position:relative}.account-chip{align-items:center;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-pill);box-shadow:var(--shadow-sticker);display:flex;font-size:var(--text-small);font-weight:600;gap:var(--space-2);min-height:42px;padding:6px 14px 6px 6px}.avatar{background:var(--candy-4);border-radius:50%;color:var(--color-surface);display:grid;font-family:var(--font-display);font-size:.8rem;font-weight:700;height:28px;place-items:center;width:28px}.account-popover{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker-hover);min-width:240px;padding:var(--space-2);position:absolute;right:0;top:calc(100% + var(--space-2));z-index:20}.menu-item{align-items:center;background:transparent;border:0;border-radius:var(--radius-control);color:var(--color-ink);display:flex;gap:var(--space-2);min-height:40px;padding:var(--space-2) var(--space-3);text-align:left;width:100%}.menu-item:hover{background:var(--color-accent-soft)}.menu-item.danger{color:var(--color-danger)}.api-settings{border-top:1px solid var(--color-line);display:grid;gap:var(--space-2);margin:var(--space-2) 0;padding:var(--space-3)}.api-settings label{color:var(--color-ink-soft);font-size:var(--text-small);font-weight:700}.api-settings input{border:1px solid var(--color-line);border-radius:var(--radius-control);min-height:40px;padding:0 var(--space-3)}.ingame-bar{align-items:center;background:var(--color-surface);border-bottom:1px solid var(--color-line);display:flex;gap:var(--space-4);height:48px;padding:0 var(--space-4)}.ingame-bar .name{font-weight:700}.room-pill{align-items:center;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-pill);display:inline-flex;font-size:var(--text-small);font-weight:600;gap:var(--space-2);min-height:34px;padding:4px 6px 4px 14px}.room-code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-pill button{align-items:center;background:var(--color-accent);border:0;border-radius:var(--radius-pill);color:var(--color-accent-ink);display:inline-flex;font-size:.75rem;font-weight:700;gap:var(--space-1);min-height:26px;padding:4px 12px}.copy-short{display:none}.conn-dot{background:var(--color-positive);border-radius:50%;height:8px;margin-left:auto;width:8px}.play-view{min-height:calc(100vh - 56px)}.play-frame{background:var(--color-frame);border:0;display:block;height:calc(100vh - 104px);width:100%}.play-error{background:var(--color-surface);border-bottom:1px solid var(--color-line);margin:0;padding:var(--space-2) var(--space-4)}.room-over{background:var(--color-overlay-scrim);display:grid;top:56px;right:0;bottom:0;left:0;place-items:center;position:fixed;z-index:30}.room-over-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-sticker-hover);padding:var(--space-8)}.skeleton-card,.skeleton-block,.skeleton-line{animation:skeleton-pulse 1.2s var(--ease-out) infinite alternate}.skeleton-block{background:var(--color-skeleton-block)}.skeleton-line{background:var(--color-skeleton-line);border-radius:var(--radius-pill);display:block;height:12px;margin-top:var(--space-2);width:46%}.skeleton-line.wide{width:72%}.skeleton-line.inline{display:inline-block;height:1em;margin:0;width:90px}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes skeleton-pulse{0%{opacity:.55}to{opacity:1}}@media(max-width:720px){.page{padding-left:var(--space-4);padding-right:var(--space-4)}.topbar{padding:0 var(--space-4)}.grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.resume{flex-wrap:wrap;padding:var(--space-4)}.resume-text{flex:1 1 calc(100% - 10px - var(--space-4))}.resume .btn-accent{margin-left:calc(10px + var(--space-4))}.detail-header{gap:var(--space-4);grid-template-columns:1fr}.detail-cover .cover-mark{font-size:5rem}.tabs{overflow-x:auto}.tab{padding-left:12px;padding-right:12px}.room-pill{flex:1 1 auto;max-width:none;min-width:0;padding-left:10px}.room-pill button{flex:0 0 auto;padding-left:10px;padding-right:10px}.ingame-bar{gap:var(--space-2);padding:0 var(--space-3)}.copy-full{display:none}.copy-short{display:inline}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}