:root{--bg: #0e0f13;--bg-grad: radial-gradient(1200px 600px at 50% -10%, #1a1c26 0%, #0e0f13 55%);--surface: #17191f;--surface-2: #1f222b;--border: #2a2e39;--text: #f3f4f7;--muted: #9aa0ad;--faint: #6b7280;--accent: #7c5cff;--accent-2: #9d84ff;--accent-ink: #ffffff;--danger: #ff5470;--success: #37d19a;--warn: #ffb454;--radius: 18px;--radius-sm: 12px;--shadow: 0 10px 40px rgba(0, 0, 0, .45);--shadow-sm: 0 4px 16px rgba(0, 0, 0, .3);--ring: 0 0 0 3px rgba(124, 92, 255, .35);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}@media (prefers-color-scheme: light){:root{--bg: #f6f7fb;--bg-grad: radial-gradient(1200px 600px at 50% -10%, #eae7ff 0%, #f6f7fb 55%);--surface: #ffffff;--surface-2: #f1f2f7;--border: #e3e5ee;--text: #16181f;--muted: #5b6270;--faint: #949aa6;--shadow: 0 10px 40px rgba(40, 30, 90, .12);--shadow-sm: 0 4px 16px rgba(40, 30, 90, .08)}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);color:var(--text);background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit}.app{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}.screen{width:100%;max-width:460px;margin:auto 0;display:flex;flex-direction:column;gap:18px;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:10px;align-items:center}.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}.grow{flex:1}.center{text-align:center}.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}.brand .logo{font-size:40px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--danger));-webkit-background-clip:text;background-clip:text;color:transparent}.brand .tag{color:var(--muted);font-size:14px}h1,h2,h3{margin:0;letter-spacing:-.02em}h1{font-size:26px}h2{font-size:20px}.muted{color:var(--muted)}.faint{color:var(--faint);font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--accent-2)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}.card.pad-lg{padding:26px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:15px 18px;font-size:16px;font-weight:650;color:var(--text);background:var(--surface-2);cursor:pointer;transition:transform .08s ease,background .15s ease,opacity .15s ease,box-shadow .15s;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.98)}.btn:focus-visible{outline:none;box-shadow:var(--ring)}.btn.primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 8px 24px #7c5cff59}.btn.danger{background:linear-gradient(120deg,#ff4d6d,#ff7a5c);color:#fff}.btn.ghost{background:transparent;border-color:var(--border)}.btn.subtle{background:transparent;color:var(--muted);min-height:44px;font-weight:600}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.sm{min-height:40px;padding:9px 14px;font-size:14px;width:auto}.input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 16px;font-size:16px;color:var(--text);transition:box-shadow .15s,border-color .15s}.input::placeholder{color:var(--faint)}.input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}.input.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700;font-size:22px}label.field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--muted)}.segmented{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;gap:4px}.segmented button{flex:1;border:none;background:transparent;color:var(--muted);padding:10px 8px;border-radius:9px;font-size:14px;font-weight:650;cursor:pointer;transition:background .15s,color .15s}.segmented button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 13px;font-size:14px;font-weight:600}.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}.chip.off .dot{background:var(--faint)}.chip.you{border-color:var(--accent);box-shadow:var(--ring)}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none}.player-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.player-row .name{font-weight:650}.player-row .meta{margin-left:auto;display:flex;align-items:center;gap:8px}.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}.badge.host{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}.badge.done{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,var(--border))}.badge.turn{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.word-card{border-radius:var(--radius);padding:34px 24px;text-align:center;border:1px solid var(--border);background:linear-gradient(160deg,var(--surface-2),var(--surface));position:relative;overflow:hidden}.word-card .word{font-size:38px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px}.word-card.impostor{background:linear-gradient(160deg,#2a1620,#1a1016);border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}.word-card.impostor .word{color:var(--danger);font-size:30px}.reveal-flip{animation:flipIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes flipIn{0%{transform:rotateX(85deg);opacity:0}}.pass-cover{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:28px;background:var(--bg-grad),var(--bg);animation:fade .25s ease both}@keyframes fade{0%{opacity:0}}.pass-cover .big{font-size:30px;font-weight:800}.pass-cover .who{font-size:22px;color:var(--accent-2);font-weight:700}.clue-list{display:flex;flex-direction:column;gap:8px}.clue{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);animation:rise .3s ease both}.clue .clue-word{font-weight:700;margin-left:auto;font-size:16px}.clue .rnd{font-size:11px;color:var(--faint)}.tally{display:flex;flex-direction:column;gap:10px}.tally-row .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:6px}.tally-row .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}.tally-row.accused .fill{background:linear-gradient(90deg,var(--danger),#ff7a5c)}.banner{border-radius:var(--radius);padding:24px;text-align:center;border:1px solid var(--border)}.banner.crew{background:linear-gradient(160deg,color-mix(in srgb,var(--success) 22%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--success) 40%,var(--border))}.banner.impostor{background:linear-gradient(160deg,color-mix(in srgb,var(--danger) 22%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}.banner .title{font-size:26px;font-weight:800}.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%);background:var(--danger);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow);z-index:60;animation:rise .25s ease both;max-width:90vw}.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px}.divider:before,.divider:after{content:"";height:1px;background:var(--border);flex:1}.code-box{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:16px;font-size:30px;font-weight:800;letter-spacing:.28em;text-indent:.28em}.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}.turn-indicator{text-align:center;padding:8px;font-weight:650}.spin{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.reaction-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:55;overflow:hidden}.reaction-float{position:absolute;bottom:12%;font-size:34px;animation:floatUp 2.4s ease-out forwards}@keyframes floatUp{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-10vh) scale(1.15)}to{transform:translateY(-55vh) scale(1);opacity:0}}
