:root{--brand: #7c3aed;--brand-mid: #9333ea;--brand-light: #a78bfa;--brand-glow: rgba(124, 58, 237, .28);--hot: #e11d48;--hot-glow: rgba(225, 29, 72, .28);--gold: #f59e0b;--gold-glow: rgba(245, 158, 11, .28);--emerald: #22c55e;--emerald-glow: rgba(34, 197, 94, .22);--sky: #38bdf8;--orange: #f97316;--purple: #a855f7;--bg: #0b0d17;--bg-alt: #0f1120;--panel: rgba(255, 255, 255, .05);--panel-raised: rgba(255, 255, 255, .085);--panel-hover: rgba(255, 255, 255, .12);--input-bg: rgba(255, 255, 255, .055);--border: rgba(255, 255, 255, .09);--border-mid: rgba(255, 255, 255, .15);--border-bright: rgba(255, 255, 255, .26);--text: #f1f5f9;--text-soft: #94a3b8;--text-muted: #64748b;--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-pill: 999px;--font-brand: "BPMF IANSUI", "Iansui", ui-rounded, "Trebuchet MS", system-ui, sans-serif;--font-ui: "BPMF IANSUI", "Iansui", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";color-scheme:dark;font-family:var(--font-ui);background:var(--bg);color:var(--text)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;touch-action:pan-x pan-y;height:100%;overflow:hidden}#root{height:100%;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}body{font-size:15px;line-height:1.5;background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(124,58,237,.14) 0%,transparent 60%),radial-gradient(ellipse 60% 30% at 80% 100%,rgba(225,29,72,.07) 0%,transparent 50%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,textarea,select{font-size:16px;font-family:inherit}a{color:inherit;text-decoration:none}button{font-family:inherit}.display{font-size:clamp(26px,7vw,38px);font-weight:900;line-height:1.05;letter-spacing:-.025em}.h1{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.015em;margin-bottom:8px}.h2{font-size:19px;font-weight:700;line-height:1.2;margin-bottom:6px}.h3{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:4px}.label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}.muted{color:var(--text-soft);font-size:13.5px;line-height:1.55}.small{font-size:12px}.brand{font-family:var(--font-brand);letter-spacing:.03em}.oopBrand{font-family:var(--font-brand);letter-spacing:.04em}.brand-mark{font-family:var(--font-brand);font-size:30px;font-weight:900;letter-spacing:.02em;background:linear-gradient(135deg,#c084fc,#a855f7 45%,#e11d48);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;display:inline-block}.oopTopBrand{text-align:center;line-height:1;margin:6px 0 16px;font-size:28px}.container{max-width:1100px;margin:0 auto;padding:20px}.row{display:flex;gap:12px;flex-wrap:wrap}.col{flex:1;min-width:0}.stack{display:grid;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.oopPhoneShell{max-width:540px;margin:0 auto}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.card-raised{background:var(--panel-raised);border-color:var(--border-mid);box-shadow:0 4px 24px #00000047}.oopTopCard{display:grid;gap:10px}.oopInfoRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.oopInfoLabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:3px}.oopValue{font-size:17px;font-weight:800;line-height:1.1}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 20px;border-radius:var(--r-md);border:1.5px solid var(--border-mid);background:var(--panel-raised);color:var(--text);font-size:15px;font-weight:700;font-family:var(--font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;line-height:1.2;transition:transform 80ms ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease}.btn:not(:disabled):active{transform:scale(.96)}.btn:not(:disabled):hover{background:var(--panel-hover);border-color:var(--border-bright)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-mid));border-color:transparent;box-shadow:0 4px 20px var(--brand-glow);color:#fff}.btn-primary:not(:disabled):hover{background:linear-gradient(135deg,var(--brand-light),var(--brand));box-shadow:0 6px 28px var(--brand-glow);border-color:transparent}.btn-selected{background:#ffffff2e!important;border-color:#ffffffa6!important;box-shadow:0 0 0 3px #ffffff14 inset!important}.btn-danger{background:#e11d4824;border-color:#e11d487a;color:#fb7185}.btn-danger:not(:disabled):hover{background:#e11d4838;border-color:#e11d48ad}.btn-success{background:#22c55e24;border-color:#22c55e7a;color:#4ade80}.btn-block{width:100%}.input{width:100%;padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--border-mid);background:var(--input-bg);color:var(--text);font-size:16px;font-family:var(--font-ui);line-height:1.4;outline:none;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}.input:focus{border-color:var(--brand-light);box-shadow:0 0 0 3px var(--brand-glow)}.input::placeholder{color:var(--text-muted)}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:var(--r-pill);background:var(--panel-raised);border:1px solid var(--border-mid);font-size:12px;font-weight:600;white-space:nowrap;vertical-align:middle}.badge-brand{background:#7c3aed33;border-color:#a78bfa61;color:#c4b5fd}.badge-gold{background:#f59e0b2e;border-color:#f59e0b61;color:#fde68a}.badge-emerald{background:#22c55e2e;border-color:#22c55e61;color:#86efac}.badge-hot{background:#e11d482e;border-color:#e11d4861;color:#fda4af}.badge-sky{background:#38bdf82e;border-color:#38bdf861;color:#7dd3fc}.progress-track{height:8px;border-radius:var(--r-pill);background:#ffffff14;overflow:hidden}.progress-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),var(--brand-light));transition:width .25s ease}.progress-fill-vote{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#8b5cf6,#ec4899);transition:width .2s ease}.role-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:800;letter-spacing:.04em;border:1.5px solid transparent}.role-mafia{background:#e11d482e;border-color:#e11d4873;color:#f87171}.role-healer{background:#22c55e2e;border-color:#22c55e73;color:#4ade80}.role-investigator{background:#3b82f62e;border-color:#3b82f673;color:#60a5fa}.role-town{background:#94a3b81f;border-color:#94a3b847;color:#94a3b8}.lb-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--border)}.lb-row-first{background:#f59e0b14;border-color:#f59e0b40}.lb-row-second{background:#94a3b812;border-color:#94a3b833}.lb-row-third{background:#b4530914;border-color:#b4530938}.lb-rank{font-size:11px;font-weight:800;color:var(--text-muted);width:26px;text-align:center;flex-shrink:0}.lb-rank-1{color:var(--gold);font-size:14px}.lb-rank-2{color:#94a3b8}.lb-rank-3{color:#b45309}.lb-name{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{font-weight:800;font-size:15px;white-space:nowrap}.vote-btn{appearance:none;display:block;width:100%;padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--border-mid);background:var(--panel-raised);color:var(--text);font-size:14px;font-weight:600;font-family:var(--font-ui);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,background .1s ease,border-color .1s ease}.vote-btn:not(:disabled):hover{background:var(--panel-hover);border-color:var(--border-bright)}.vote-btn:not(:disabled):active{transform:scale(.97)}.vote-btn:disabled{opacity:.42;cursor:not-allowed}.vote-btn.selected{background:#ffffff29;border-color:#fff9}.result-card-win{background:#22c55e1a;border:1.5px solid rgba(34,197,94,.38);border-radius:var(--r-lg);padding:18px}.result-card-loss{background:#e11d481a;border:1.5px solid rgba(225,29,72,.35);border-radius:var(--r-lg);padding:18px}.result-card-neutral{background:#38bdf817;border:1.5px solid rgba(56,189,248,.32);border-radius:var(--r-lg);padding:18px}.result-card-elim{background:#00000073;border:1.5px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:18px}.result-card-dup{background:#a855f721;border:1.5px solid rgba(168,85,247,.42);border-radius:var(--r-lg);padding:18px}.result-card-over{background:#e11d4821;border:1.5px solid rgba(225,29,72,.42);border-radius:var(--r-lg);padding:18px}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.22);border-top-color:var(--text);border-radius:var(--r-pill);animation:spin .72s linear infinite;flex-shrink:0}.btnRow{display:inline-flex;align-items:center;gap:8px}.cell{width:100%;aspect-ratio:1 / 1;border-radius:var(--r-md);border:1.5px solid var(--border-mid);background:var(--panel-raised);font-size:42px;display:grid;place-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform 80ms ease,background .1s ease}.cell:hover{background:var(--panel-hover)}.cell:active{transform:scale(.93)}.text-gold{color:var(--gold)}.text-emerald{color:var(--emerald)}.text-hot{color:#f87171}.text-sky{color:var(--sky)}.text-brand{color:var(--brand-light)}.text-bold{font-weight:800}.text-center{text-align:center}.space{height:12px}.space-sm{height:6px}.space-lg{height:20px}.space-xl{height:30px}.flex-center{display:flex;align-items:center;justify-content:center;gap:8px}.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 0 0 var(--brand-glow)}50%{box-shadow:0 0 16px 4px var(--brand-glow)}}.anim-pop{animation:pop-in .2s ease forwards}.anim-slide{animation:slide-up .2s ease forwards}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px var(--emerald-glow);animation:pulse 2.2s ease-in-out infinite}.pcTheme{min-height:100vh;min-height:100dvh;color:#f3f4f8;background:radial-gradient(120% 70% at 50% 0%,var(--pc-bg1) 0%,var(--pc-bg2) 78%) fixed,var(--pc-bg2);font-family:Oswald,Segoe UI,system-ui,sans-serif}.pcTheme.pcJoinBg,.pcTheme.pcRoomBg{background:linear-gradient(180deg,#0c07166b,#0c07169e),url(/oop-bg.jpg) center / cover no-repeat,var(--pc-bg2)}.pcTheme.pcJoinBg{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:none}.pc-oop{--pc-accent: #f7c948;--pc-accent-2: #7c5cbf;--pc-accent-ink: #241505;--pc-bg1: #2a1c46;--pc-bg2: #120b20;--pc-card: rgba(22, 13, 40, .72);--pc-line: rgba(148, 108, 216, .45);--pc-line-hot: #f7c948}.pc-betcha{--pc-accent: #f5920b;--pc-accent-2: #f5920b;--pc-accent-ink: #211102;--pc-bg1: #122048;--pc-bg2: #060b1e;--pc-card: rgba(6, 12, 32, .78);--pc-line: rgba(245, 146, 11, .45);--pc-line-hot: #f5920b}.pc-outed{--pc-accent: #ffa51f;--pc-accent-2: #a9cf3c;--pc-accent-ink: #231402;--pc-bg1: #33200a;--pc-bg2: #050403;--pc-card: rgba(12, 8, 3, .78);--pc-line: rgba(255, 165, 31, .42);--pc-line-hot: #ffa51f}.pc-nailed{--pc-accent: #3b82f6;--pc-accent-2: #3b82f6;--pc-accent-ink: #071022;--pc-bg1: #131a2e;--pc-bg2: #0a0e1c;--pc-card: rgba(6, 9, 20, .8);--pc-line: rgba(59, 130, 246, .45);--pc-line-hot: #3b82f6}.pc-busted{--pc-accent: #ffc53d;--pc-accent-2: #ffc53d;--pc-accent-ink: #241502;--pc-bg1: #0c1a3e;--pc-bg2: #040817;--pc-card: rgba(8, 14, 36, .72);--pc-line: rgba(197, 168, 96, .5);--pc-line-hot: #ffc53d}.pc-mafia{--pc-accent: #e5323e;--pc-accent-2: #e5323e;--pc-accent-ink: #fff2f2;--pc-bg1: #221018;--pc-bg2: #0d0509;--pc-card: rgba(24, 10, 16, .75);--pc-line: rgba(229, 50, 62, .5);--pc-line-hot: #e5323e}.pc-lockedin{--pc-accent: #35e0d0;--pc-accent-2: #35e0d0;--pc-accent-ink: #04211e;--pc-bg1: #12262a;--pc-bg2: #070f11;--pc-card: rgba(9, 20, 22, .8);--pc-line: rgba(53, 224, 208, .42);--pc-line-hot: #35e0d0}.pcWordmark{font-family:Bungee,Oswald,sans-serif;font-size:20px;line-height:1;letter-spacing:.01em;color:var(--pc-accent);text-transform:uppercase;-webkit-font-smoothing:antialiased}.pcKicker{font-family:Oswald,sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.28em;text-align:center;color:#ffffffb8}.pcKicker b,.pcKicker .accent{color:var(--pc-accent);font-weight:600}.pcTitle{font-family:Oswald,sans-serif;font-weight:700;font-size:24px;line-height:1.25;text-align:center;color:#fff}.pcHint{font-family:Oswald,sans-serif;font-weight:400;font-size:12.5px;text-align:center;color:#ffffff8c}.pcName{font-family:Oswald,sans-serif;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#fff}.pcHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}.pcIdentity{display:flex;align-items:center;gap:8px;min-width:0}.pcIdentity .pcName{font-size:14px}.pcIdentity .pcScore{font-family:Bungee,sans-serif;font-size:14px;color:#fff}.pcCard{background:var(--pc-card);border:1.5px solid var(--pc-line);border-radius:18px;padding:18px 16px}.pcCard--accent{border-color:var(--pc-line-hot)}.pcRow{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 16px;border-radius:16px;border:1.5px solid var(--pc-line);background:var(--pc-card);color:#fff;font-family:Oswald,sans-serif;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,border-color .12s ease,background .12s ease,box-shadow .12s ease,opacity .12s ease}.pcRow:not(:disabled):active{transform:scale(.98)}.pcRow:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.85)}.pcRow.selected{border-width:2px;border-color:var(--pc-line-hot);background:linear-gradient(0deg,#ffffff0f,#ffffff0f),var(--pc-card);box-shadow:0 0 16px color-mix(in srgb,var(--pc-line-hot) 35%,transparent)}.pcRow .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pcRow .tick{color:var(--pc-line-hot);font-size:18px;font-weight:700;flex-shrink:0}.pcGrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pcGrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pcChip{appearance:none;min-height:50px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--pc-line);background:var(--pc-card);color:#fff;font-family:Oswald,sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 80ms ease,border-color .12s ease,box-shadow .12s ease,opacity .12s ease}.pcChip:not(:disabled):active{transform:scale(.97)}.pcChip:disabled{opacity:.45;cursor:not-allowed}.pcChip.selected{border-width:2px;border-color:var(--pc-line-hot);box-shadow:0 0 14px color-mix(in srgb,var(--pc-line-hot) 35%,transparent)}.pcChip--solid{background:var(--chip-c);border-color:transparent;color:#14161f;font-weight:700}.pcChip--solid.selected{border:2.5px solid #fff;box-shadow:0 0 16px #ffffff59}.pcCtaWrap{position:sticky;bottom:0;padding:14px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,var(--pc-bg2) 55%)}.pcCta{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:12px 18px;border-radius:18px;border:none;background:var(--pc-accent);color:var(--pc-accent-ink);font-family:Bungee,Oswald,sans-serif;font-size:17px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 26px color-mix(in srgb,var(--pc-accent) 40%,transparent);transition:transform 80ms ease,opacity .12s ease,filter .12s ease}.pcCta:not(:disabled):active{transform:scale(.98)}.pcCta:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}.pcCta--danger{background:#e5323e;color:#fff2f2;box-shadow:0 6px 26px #e5323e66}.pcCta--ghost{background:transparent;color:var(--pc-accent);border:1.5px solid var(--pc-line);box-shadow:none}.pcPill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-family:Oswald,sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.pcPill--accent{background:var(--pc-accent);color:var(--pc-accent-ink)}.pcPill--red{background:#e5323e;color:#fff}.pcPill--gray{background:#94a3b847;color:#cbd5e1}.pcPill--dark{background:#00000073;color:#fffc;border:1px solid var(--pc-line)}.pcTrack{height:7px;flex:1;border-radius:999px;background:#ffffff24;overflow:hidden}.pcFill{height:100%;border-radius:999px;background:var(--pc-accent);transition:width .3s ease}.pcInput{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--pc-line);background:#0a06148c;color:#fff;font-family:Oswald,sans-serif;font-weight:600;font-size:17px;outline:none;transition:border-color .14s ease,box-shadow .14s ease;-webkit-appearance:none;appearance:none}.pcInput:focus{border-color:var(--pc-line-hot);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc-line-hot) 22%,transparent)}.pcInput::placeholder{color:#ffffff4d}.pcInput--code{border-color:var(--pc-accent);font-family:Bungee,sans-serif;font-size:24px;text-align:center;letter-spacing:.35em;text-transform:uppercase}.pcFieldLabel{font-family:Oswald,sans-serif;font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#ffffff9e;margin-bottom:8px}.pcKeypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pcKey{appearance:none;min-height:58px;border-radius:14px;border:1.5px solid var(--pc-line);background:var(--pc-card);color:#fff;font-family:Bungee,Oswald,sans-serif;font-size:19px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 70ms ease,border-color .12s ease,opacity .12s ease}.pcKey:not(:disabled):active{transform:scale(.94)}.pcKey:disabled{opacity:.4;cursor:not-allowed}.pcBigNumber{font-family:Bungee,sans-serif;font-size:64px;line-height:1;color:var(--pc-accent);text-align:center}.pcQuote{font-family:Georgia,Times New Roman,serif;font-style:italic;font-weight:700;font-size:20px;line-height:1.45;text-align:center;color:#fff}.pcError{padding:10px 14px;border-radius:12px;background:#e5323e29;border:1px solid rgba(229,50,62,.45);color:#fda4af;font-family:Oswald,sans-serif;font-weight:600;font-size:13px;text-align:center}.pcScreen{display:flex;flex-direction:column;gap:14px;padding:4px 16px 0;max-width:480px;margin:0 auto;min-height:calc(100dvh - 64px)}.pcScreen>.pcCtaWrap{margin-top:auto}.pcStack{display:grid;gap:10px}.pcResultRow{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border-radius:16px;border:2px solid var(--res-c);background:var(--pc-card)}.pcResultRow .right{margin-left:auto;font-family:Oswald,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--res-c);white-space:nowrap}
