@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Bebas+Neue&display=swap";
:root{--bg-base:#0d0f14;--bg-surface:#161921;--bg-elevated:#1e2230;--border:#2a2f42;--border-subtle:#1e2230;--accent:#6c63ff;--accent-hover:#5a52e0;--accent-dim:#6c63ff26;--danger:#e05252;--danger-hover:#c44444;--danger-dim:#e0525226;--success:#4caf82;--success-dim:#4caf8226;--warning:#f0a04a;--text-primary:#f0f2f8;--text-secondary:#8890a8;--text-muted:#555e78;--role-killer:#e05252;--role-doctor:#4caf82;--role-cop:#5b9af5;--role-town:#8890a8;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--font:"Inter", system-ui, sans-serif;--text-xs:11px;--text-sm:13px;--text-base:15px;--text-md:17px;--text-lg:20px;--text-xl:26px;--text-2xl:34px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:999px;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 16px #00000080;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-right:env(safe-area-inset-right,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px);--app-height:100svh}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;min-height:100%}body{font-family:var(--font);font-size:var(--text-base);background-color:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:100svh;line-height:1.5;overflow-x:hidden}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-moz-text-size-adjust:100%;text-size-adjust:100%}html[data-shell=native] body{min-height:var(--app-height)}button,a,[role=button]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea,select{font:inherit;-webkit-user-select:text;user-select:text}img,svg,video{max-width:100%}h1{font-size:var(--text-2xl);font-weight:800;line-height:1.15}h2{font-size:var(--text-xl);font-weight:700;line-height:1.2}h3{font-size:var(--text-lg);font-weight:600}h4{font-size:var(--text-md);font-weight:600}p{color:var(--text-secondary);font-size:var(--text-base)}.page-shell{max-width:480px;min-height:100svh;padding:max(var(--sp-md), calc(var(--safe-area-top) + var(--sp-sm))) max(var(--sp-md), calc(var(--safe-area-right) + var(--sp-md))) 0 max(var(--sp-md), calc(var(--safe-area-left) + var(--sp-md)));flex-direction:column;margin:0 auto;display:flex}html[data-shell=native] .page-shell{min-height:var(--app-height)}.page-header{align-items:center;gap:var(--sp-sm);padding-bottom:var(--sp-md);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--sp-lg);display:flex}.page-content{gap:var(--sp-md);flex-direction:column;flex:1;display:flex}.page-footer{padding:var(--sp-md) var(--sp-md) calc(var(--sp-md) + var(--safe-area-bottom));background:var(--bg-base);border-top:1px solid var(--border-subtle);z-index:10;margin-top:auto;position:sticky;bottom:0}.btn{justify-content:center;align-items:center;gap:var(--sp-sm);width:100%;padding:14px var(--sp-md);border-radius:var(--radius-md);font-family:var(--font);font-size:var(--text-base);cursor:pointer;border:none;font-weight:600;transition:background .15s,opacity .15s,transform .1s;display:flex}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:active{transform:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-ghost{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);filter:brightness(1.15)}.btn-glass{-webkit-backdrop-filter:blur(12px);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;transition:all .2s}.btn-glass:hover{background:#ffffff1a;transform:translateY(-2px)}.btn-glass:active{transform:scale(.95)}.btn-sm{padding:8px var(--sp-md);font-size:var(--text-sm);border-radius:var(--radius-sm)}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-md)}.card-section{padding:var(--sp-md);border-radius:var(--radius-md);background:var(--bg-elevated)}.player-card{align-items:center;gap:var(--sp-md);padding:12px var(--sp-md);border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);transition:border-color .15s;display:flex}.player-card.selected{border-color:var(--accent);background:var(--accent-dim)}.player-card.eliminated{opacity:.4}.player-card.danger-selected{border-color:var(--danger);background:var(--danger-dim)}.player-avatar{background:var(--bg-base);border:2px solid var(--border);width:38px;height:38px;font-weight:700;font-size:var(--text-md);color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.player-name{font-weight:500;font-size:var(--text-base);flex:1}.player-status{font-size:var(--text-xs);color:var(--text-muted)}.role-badge{border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;font-weight:600;display:inline-block}.role-killer{color:var(--role-killer);background:#e0525226}.role-doctor{color:var(--role-doctor);background:#4caf8226}.role-cop{color:var(--role-cop);background:#5b9af526}.role-town{color:var(--role-town);background:#8890a81a}.timer-display{text-align:center;letter-spacing:0;color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:56px;font-weight:800;line-height:1}.timer-display.warning{color:var(--warning)}.timer-display.danger{color:var(--danger)}.timer-label{text-align:center;font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--sp-xs);text-transform:uppercase;letter-spacing:.08em}.phase-badge{align-items:center;gap:var(--sp-xs);border-radius:var(--radius-full);background:var(--accent-dim);color:var(--accent);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;font-weight:700;display:inline-flex}.input{width:100%;padding:12px var(--sp-md);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font);font-size:var(--text-base);outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text-muted)}.form-group{gap:var(--sp-xs);flex-direction:column;display:flex}.form-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.divider{background:var(--border-subtle);height:1px;margin:var(--sp-sm) 0}.info-box{padding:var(--sp-md);border-radius:var(--radius-md);background:var(--accent-dim);color:var(--text-primary);font-size:var(--text-sm);border:1px solid #6c63ff40}.info-box.success{background:var(--success-dim);border-color:#4caf8240}.info-box.danger{background:var(--danger-dim);border-color:#e0525240}.info-box.warning{background:#f0a04a1f;border-color:#f0a04a40}.text-center{text-align:center}.text-muted{color:var(--text-muted);font-size:var(--text-sm)}.text-accent{color:var(--accent)}.mt-sm{margin-top:var(--sp-sm)}.mt-md{margin-top:var(--sp-md)}.mt-lg{margin-top:var(--sp-lg)}.gap-sm{gap:var(--sp-sm)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.mode-option{padding:var(--sp-md);border-radius:var(--radius-md);background:var(--bg-elevated);border:2px solid var(--border);cursor:pointer;gap:var(--sp-xs);flex-direction:column;transition:border-color .15s,background .15s;display:flex}.mode-option:hover{border-color:var(--accent)}.mode-option.active{border-color:var(--accent);background:var(--accent-dim)}.mode-option-title{font-weight:700;font-size:var(--text-md)}.mode-option-desc{font-size:var(--text-sm);color:var(--text-secondary)}.loading-bar{background:var(--bg-base);border-radius:2px;height:4px;overflow:hidden}.loading-bar-progress{background:var(--accent);border-radius:2px;width:40%;height:100%;animation:1.4s ease-in-out infinite loadingSlide}.offline-notice{left:max(1rem, calc(var(--safe-area-left) + .75rem));right:max(1rem, calc(var(--safe-area-right) + .75rem));top:max(4.75rem, calc(var(--safe-area-top) + 4.75rem));z-index:9999;justify-content:space-between;align-items:center;gap:var(--sp-md);border-radius:var(--radius-md);max-width:480px;color:var(--text-primary);-webkit-backdrop-filter:blur(12px);background:#1a130af2;border:1px solid #f0a04a73;margin:0 auto;padding:.8rem .9rem;display:flex;position:fixed;box-shadow:0 14px 34px #00000061}.offline-notice-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.offline-notice-kicker{color:var(--warning);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:800}.offline-notice-text{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.35}.offline-notice-action{border-radius:var(--radius-sm);background:var(--warning);color:#111;min-height:40px;font-size:var(--text-sm);flex-shrink:0;justify-content:center;align-items:center;padding:0 .9rem;font-weight:800;text-decoration:none;display:inline-flex}@keyframes loadingSlide{0%{transform:translate(-150%)}to{transform:translate(350%)}}.anim-fade-in{animation:.5s both fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.anim-slide-up{animation:.45s cubic-bezier(.22,1,.36,1) both slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.anim-reveal{animation:.6s cubic-bezier(.22,1,.36,1) both revealCard}@keyframes revealCard{0%{opacity:0;transform:scale(.92)translateY(16px)}60%{opacity:1;transform:scale(1.02)translateY(-2px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}@keyframes pulseGlow{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.95)}to{transform:scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(32px)}to{opacity:1;transform:translate(0)}}@keyframes jingleProgress{0%{width:0%}to{width:100%}}@keyframes pulseDanger{0%,to{box-shadow:0 0 #e0525200}50%{box-shadow:0 0 0 12px #e0525200}}