:root{color-scheme:dark;--bg:#090b0e;--panel:#14171c;--panel2:#1a1e24;--panel3:#20252c;--line:#30343c;--muted:#8e96a3;--text:#f4f2ef;--red:#ed4b59;--red2:#a52d3c;--amber:#e5b779;--green:#83b8a6;--blue:#91accb;--font:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif}
*{box-sizing:border-box}html{height:100%;background:var(--bg)}body{margin:0;min-height:100%;font-family:var(--font);background:radial-gradient(ellipse 52% 40% at 50% -10%,#3e1720 0%,transparent 75%),#080a0d;color:var(--text);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.44}button:focus-visible,input:focus-visible{outline:2px solid #ef6572;outline-offset:3px}::selection{background:#a73542;color:#fff}
#app{min-height:100dvh;display:flex;justify-content:center}.shell{width:min(100%,470px);min-height:100dvh;position:relative;overflow:hidden;background:linear-gradient(180deg,#101318 0%,#0a0c10 52%,#080a0d 100%);border-left:1px solid #24262d;border-right:1px solid #24262d;box-shadow:0 0 120px #0009}.shell::before{content:'';pointer-events:none;position:absolute;inset:0;opacity:.17;background-image:radial-gradient(#7e8993 .55px,transparent .6px);background-size:8px 8px;mask-image:linear-gradient(180deg,#000,transparent 70%)}.shell::after{content:'';pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#000 5px 6px);opacity:.075}.app-content{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 22px) 23px calc(env(safe-area-inset-bottom,0px) + 24px)}.app-content.compact{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:12px}.brand{display:flex;align-items:center;gap:9px;font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:.15em;font-size:16px;color:#f2f1ed}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #78313b;background:#35171d;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%);color:#ff6874;font-size:19px;font-weight:900}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{height:36px;width:36px;border:1px solid #353943;background:#191c22;color:#c4c9d2;display:grid;place-items:center;border-radius:9px}.icon-btn:hover{background:#252a32}.icon{width:19px;height:19px;display:inline-block;flex-shrink:0;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}.icon.big{width:28px;height:28px}.icon.small{width:15px;height:15px}.icon.tiny{width:13px;height:13px}
.eyebrow{font-size:10px;letter-spacing:.28em;font-weight:800;color:#b5a0a4;text-transform:uppercase}.overline{font-size:10px;letter-spacing:.16em;font-weight:800;color:#9ba3ae}.page-title{font-size:34px;letter-spacing:-.065em;line-height:1.16;margin:13px 0 8px;font-weight:850}.page-title b{color:var(--red)}.subtext{color:#9ba1ab;font-size:13px;line-height:1.75}.muted{color:var(--muted)}.red{color:var(--red)}.amber{color:var(--amber)}.green{color:var(--green)}.blue{color:var(--blue)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.03em}.divider{height:1px;background:linear-gradient(90deg,transparent,#46404a,transparent);margin:21px 0}.section-label{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.17em;font-weight:850;color:#b5b9c2;margin-bottom:13px}.section-label:before{content:'';height:12px;width:3px;background:var(--red);border-radius:3px}.stack{display:flex;flex-direction:column;gap:12px}.flex-1{flex:1}.mt-auto{margin-top:auto}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-16{margin-bottom:16px}.center{text-align:center}.small{font-size:12px}.micro{font-size:10px}.strong{font-weight:750}
.hero{position:relative;min-height:350px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:12px -23px 3px;overflow:hidden}.hero::before{content:'';position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#9e2d3a18 0%,#9e2d3a0b 36%,transparent 70%);box-shadow:0 0 0 1px #862c3520,0 0 0 48px #89242c08;animation:hero-pulse 5s ease-in-out infinite}.hero-emblem{width:270px;height:270px;position:absolute;opacity:.7;filter:drop-shadow(0 0 24px #a72a3940);animation:slow-turn 35s linear infinite}.hero-content{position:relative;z-index:1;margin-top:28px}.hero-kicker{font-size:10px;letter-spacing:.5em;color:#c4a5aa;margin-bottom:10px}.hero-name{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(70px,20vw,100px);letter-spacing:.055em;line-height:.9;text-shadow:0 7px 20px #000;transform:scaleX(.93)}.hero-name span{display:block;color:var(--red);font-size:.38em;letter-spacing:.48em;margin-top:11px;transform:translateX(6px)}.hero-caption{margin-top:23px;color:#c7b4b7;font-size:11px;letter-spacing:.08em}.hero-serial{position:absolute;bottom:15px;left:25px;right:25px;display:flex;justify-content:space-between;color:#6e747e;font-size:9px;letter-spacing:.12em}
.btn{position:relative;width:100%;min-height:57px;padding:14px 17px;border-radius:10px;border:1px solid #41454e;background:linear-gradient(180deg,#22262d,#191d23);color:#f8f5f3;display:flex;justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:780;letter-spacing:-.015em;transition:transform .13s,background .13s,border-color .13s;overflow:hidden}.btn:active:not(:disabled){transform:scale(.98)}.btn:hover:not(:disabled){border-color:#6a6e79}.btn .icon{width:18px;height:18px}.btn-primary{border-color:#f65e6b;background:linear-gradient(145deg,#e84a58,#b92e40);box-shadow:0 8px 24px #a5273330,inset 0 1px #ff919a66}.btn-primary:hover:not(:disabled){background:linear-gradient(145deg,#f45a68,#c53948)}.btn-primary::before{content:'';position:absolute;left:-35px;top:0;height:100%;width:40px;background:#fff2;transform:skew(-25deg);transition:left .4s}.btn-primary:hover::before{left:110%}.btn-ghost{background:#15191e;border-color:#343942}.btn-outline-red{border-color:#8d3642;background:#351920;color:#ff9da5}.btn-danger{background:#3b1c23;border-color:#6e2c37;color:#ffa1aa}.btn-small{min-height:42px;font-size:12px;padding:9px 12px}.btn-inline{width:auto}.btn-row{display:flex;gap:9px}.btn-row>.btn{flex:1;min-width:0}.btn-quiet{border:none;background:transparent;color:#a4abb5;min-height:40px}.link-btn{border:0;background:transparent;color:#d3a5aa;font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:10px}.hint{display:flex;gap:9px;align-items:flex-start;padding:12px 13px;border:1px solid #363941;border-radius:9px;background:#171a1f;color:#a6aeb9;font-size:11px;line-height:1.7}.hint .icon{color:#d59d69;margin-top:1px}
.input-wrap{position:relative}.input-label{font-size:11px;letter-spacing:.1em;color:#aeb4bd;font-weight:700;margin:0 0 9px;display:block}.text-input{height:60px;width:100%;border-radius:10px;border:1px solid #45434a;background:#171b20;color:#fff;padding:0 18px;font-size:18px;font-weight:700;outline:none}.text-input:focus{border-color:#e44b58;box-shadow:0 0 0 3px #c6384930}.code-input{font-size:31px;letter-spacing:.23em;text-align:center;font-family:ui-monospace,monospace;font-weight:800;padding-left:28px}.field-help{font-size:11px;color:#8d95a0;margin-top:8px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{border:1px solid #343b44;background:linear-gradient(145deg,#1d2229,#14181e);border-radius:12px;padding:17px 14px;text-align:left;color:#e6e9ef;min-height:116px}.choice.selected{border-color:#de4c59;background:linear-gradient(135deg,#43232b,#1b1d24);box-shadow:inset 0 0 0 1px #a83d4a55}.choice .choice-icon{display:block;margin-bottom:12px;color:#d9b8bd}.choice.selected .choice-icon{color:#ff7480}.choice strong{font-size:14px;display:block}.choice small{display:block;color:#9099a6;margin-top:6px;line-height:1.4}.seat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.seat{height:79px;border-radius:10px;border:1px solid #393f48;background:#1a1e24;color:#f3f1f0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.seat span{font-family:Impact,'Arial Narrow',sans-serif;font-size:29px;line-height:1}.seat small{font-size:9px;letter-spacing:.06em;color:#87909c}.seat.selected{border-color:#e4515e;background:#54252e;box-shadow:inset 0 0 0 1px #8b3a46}.seat.taken{opacity:.33;cursor:not-allowed}
.panel{border:1px solid #343941;background:linear-gradient(165deg,#1b1f26,#13171c);border-radius:12px;padding:17px}.panel.dark{background:#11151a}.panel.red-panel{background:linear-gradient(145deg,#321d24,#16181e);border-color:#7c3540}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.panel-title{font-size:13px;font-weight:800}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:5px;background:#2b3038;color:#b7c0cb;font-size:10px;font-weight:750;white-space:nowrap}.chip.red-chip{background:#4c232d;color:#ffa6af}.chip.green-chip{background:#203a35;color:#a5d7c5}.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}.room-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:47px;letter-spacing:.12em;line-height:1.1;font-weight:850;color:#fff;text-align:center;margin:9px 0}.room-code-caption{text-align:center;font-size:10px;letter-spacing:.18em;color:#9aa1ac}.player-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.player-tile{border:1px solid #333943;background:#1a1f26;border-radius:9px;padding:12px 9px;min-height:76px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;position:relative}.player-tile .letter{font-family:Impact,'Arial Narrow',sans-serif;font-size:26px}.player-tile .status{font-size:9px;letter-spacing:.05em;color:#91a1af}.player-tile.dead{background:#191519;border-color:#4e2d35;color:#9e6f79}.player-tile.dead .letter{text-decoration:line-through;text-decoration-color:#e84b58}.player-tile.empty{border-style:dashed;opacity:.55}.player-tile.you{border-color:#b54b56}.player-tile .tiny-tag{position:absolute;top:5px;right:6px;color:#dba9af;font-size:8px}
.stage-head{margin:17px 0 19px}.stage-head .phase-num{font-size:10px;letter-spacing:.25em;color:#f0767f;font-weight:800}.stage-head h1{font-size:35px;line-height:1.13;letter-spacing:-.055em;margin:9px 0}.stage-head p{color:#a0a8b2;font-size:12px;line-height:1.6;margin:0}.status-line{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em;color:#9ba3ae}.status-line:before{content:'';width:7px;height:7px;border-radius:50%;background:#e45160;box-shadow:0 0 10px #e4516080}.progress{display:flex;gap:4px;margin:15px 0}.progress span{height:3px;flex:1;background:#353942;border-radius:3px}.progress span.done{background:#e54b59}.progress span.current{background:#f7a0a8;box-shadow:0 0 7px #ed5a68}.director-note{border-left:2px solid #d34856;padding:9px 12px;background:#311e2566;color:#c9b7bd;font-size:11px;line-height:1.7}.director-note strong{color:#ff909a}.event-card{display:flex;align-items:center;gap:14px;padding:18px 16px;border:1px solid #69323d;background:linear-gradient(135deg,#371e27,#18191f);border-radius:11px}.event-icon{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border:1px solid #a74451;background:#4d222d;border-radius:10px;color:#ff8993}.event-icon .icon{width:27px;height:27px}.event-card strong{display:block;font-size:17px;line-height:1.4}.event-card small{display:block;color:#d5a8af;font-size:11px;margin-top:5px}.action-list{display:flex;flex-direction:column;gap:9px}.action-choice{border:1px solid #3b404a;background:#1a1e24;border-radius:9px;min-height:55px;color:#f0f1f4;display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left}.action-choice .avatar{width:32px;height:32px;border-radius:7px;background:#30343c;display:grid;place-items:center;font-family:Impact,sans-serif;font-size:20px}.action-choice .check{margin-left:auto;color:#777f8b}.action-choice.selected{border-color:#ec5865;background:linear-gradient(90deg,#532731,#231e26)}.action-choice.selected .avatar{background:#9d3948}.action-choice.selected .check{color:#ff8b95}.action-choice:disabled{opacity:.35}.big-symbol{height:170px;display:grid;place-items:center;position:relative;margin:9px 0}.big-symbol::before{content:'';position:absolute;width:155px;height:155px;border-radius:50%;border:1px solid #863a43;box-shadow:0 0 0 15px #632b3312,0 0 0 34px #632b3309}.big-symbol svg{width:94px;height:94px;color:var(--red);filter:drop-shadow(0 0 24px #e7485950);position:relative}.role-card{padding:21px 18px 22px;border:1px solid #703843;background:radial-gradient(circle at 50% 23%,#51202b,#171920 60%);border-radius:15px;min-height:345px;position:relative;overflow:hidden;text-align:center}.role-card.police{background:radial-gradient(circle at 50% 23%,#25384c,#151920 60%);border-color:#42617b}.role-card.civilian{background:radial-gradient(circle at 50% 23%,#29403a,#151920 60%);border-color:#47675d}.role-card .role-name{font-size:33px;font-weight:900;letter-spacing:-.04em}.role-card .role-english{font-family:Impact,'Arial Narrow',sans-serif;font-size:11px;letter-spacing:.36em;margin-top:3px;color:#d7a5aa}.role-card.police .big-symbol svg,.role-card.police .role-name{color:#8dbbe0}.role-card.civilian .big-symbol svg,.role-card.civilian .role-name{color:#94c7b2}.role-card .role-desc{font-size:12px;color:#adb1b9;line-height:1.7;margin:13px auto 0;max-width:250px}.role-cover{min-height:300px;border:1px dashed #70404a;border-radius:12px;background:radial-gradient(circle at center,#341f26,#14171c 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}.role-cover .seal{width:95px;height:95px;border:1px solid #99434d;border-radius:50%;display:grid;place-items:center;color:#e65362;box-shadow:0 0 0 9px #5b2b331f}.role-cover .seal svg{width:45px;height:45px}
.timer-wrap{text-align:center;padding:23px 0 18px}.timer-ring{margin:auto;width:184px;height:184px;border-radius:50%;border:3px solid #70303a;box-shadow:inset 0 0 25px #e14b5910,0 0 0 12px #a7354212;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.timer-ring::after{content:'';position:absolute;inset:9px;border:1px dashed #5c3840;border-radius:50%}.timer-ring .timer{font-family:ui-monospace,monospace;font-size:42px;font-weight:850;letter-spacing:-.05em}.timer-ring small{color:#b4a0a5;font-size:10px;letter-spacing:.18em}.death-card{min-height:275px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;border:1px solid #632c36;background:radial-gradient(circle at center,#421a23,#171419 65%);border-radius:14px;text-align:center;padding:20px}.death-card .icon{width:62px;height:62px;color:#ef5967}.death-card .death-name{font-family:Impact,sans-serif;font-size:76px;color:#f1dfe2;line-height:1}.death-card .death-desc{font-size:12px;color:#bfa8ae}.dead-screen{filter:grayscale(.5)}.dead-label{display:inline-flex;align-items:center;gap:7px;color:#f27a87;font-size:11px;font-weight:850;letter-spacing:.15em}
.cue-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.cue-btn{border:1px solid #3c414b;background:#20232a;border-radius:9px;min-height:65px;padding:12px;color:#e8e9ee;display:flex;align-items:center;gap:9px;text-align:left}.cue-btn svg{color:#e9818b}.cue-btn span{font-size:11px;font-weight:750}.cue-btn small{display:block;font-size:9px;color:#8f98a5;margin-top:3px}.cue-btn.warning{border-color:#8b3a43;background:#382128}.director-timeline{display:flex;gap:5px;overflow:auto;padding:8px 0 4px;scrollbar-width:none}.director-timeline::-webkit-scrollbar{display:none}.director-timeline .timeline-dot{width:11px;height:11px;border-radius:50%;border:1px solid #616670;flex-shrink:0;background:#1a1d23}.director-timeline .timeline-dot.done{background:#d74654;border-color:#d74654}.director-timeline .timeline-dot.current{box-shadow:0 0 0 4px #a6364445;background:#ff7480;border-color:#ff7480}.director-timeline .timeline-line{height:1px;background:#4d515a;min-width:8px;flex:1;align-self:center}.director-timeline .timeline-line.done{background:#a7414c}.console-actions{display:flex;flex-direction:column;gap:10px}.mini-stat{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #30353c;font-size:11px;color:#aeb5bf}.mini-stat strong{color:#e5e6e9}.machine-view{min-height:calc(100dvh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px}.machine-lens{width:min(65vw,280px);height:min(65vw,280px);border-radius:50%;border:5px solid #3b3438;background:radial-gradient(circle,#fa586e 0 4%,#8c0c22 7%,#3c101b 17%,#110d14 39%,#1b141a 57%,#080b0e 60%);box-shadow:0 0 0 11px #202126,0 0 0 14px #4b3137,0 0 0 29px #1a1b21,0 0 0 30px #50343b,0 0 70px #d8304840,inset 0 0 50px #e21c4145;animation:lens-breathe 3s infinite}.machine-lens.warning{animation:lens-alarm .28s infinite}.machine-view .machine-label{font-size:11px;letter-spacing:.35em;color:#d8a9ae}.machine-view h1{font-family:Impact,sans-serif;font-size:43px;letter-spacing:.1em;margin:0}.machine-view p{color:#a5abb5;font-size:12px;max-width:300px;line-height:1.7}.machine-view .btn{max-width:340px}
.toast{position:fixed;z-index:100;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translate(-50%,30px);width:min(90vw,410px);background:#252b33;border:1px solid #69717d;color:#fff;padding:13px 16px;border-radius:10px;box-shadow:0 12px 45px #000a;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:90}.flash.active{animation:laser-flash .5s steps(1)}.flash.red-flash{background:#ff233c}.footer-note{color:#69727e;font-size:9px;text-align:center;letter-spacing:.12em;margin-top:19px}.loading-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px}.spinner{width:35px;height:35px;border:2px solid #6c303c;border-top-color:#f15d6a;border-radius:50%;animation:spin .8s linear infinite}.mode-tag{border:1px solid #67414a;color:#e6a6ae;background:#3d242b;border-radius:5px;padding:5px 7px;font-size:9px;letter-spacing:.07em;font-weight:750}.mode-tag.online{border-color:#3c6859;color:#b2d9c9;background:#233c33}.game-banner{margin-top:15px;padding:9px 12px;border:1px solid #463c43;background:#231a21;border-radius:7px;color:#c7aeb5;font-size:10px;line-height:1.55}.director-bottom{margin-top:auto;padding-top:18px}.scrollbox{max-height:220px;overflow:auto}.action-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #32353d;color:#b3bbc4;font-size:11px}.action-row strong{color:#f3ecee}.title-small{font-size:18px;letter-spacing:-.025em;font-weight:800}.confirm-box{background:#3b222a;border:1px solid #8b3a46;padding:15px;border-radius:10px;color:#e3bfc3;font-size:12px;line-height:1.6}
@keyframes hero-pulse{50%{transform:scale(1.07);opacity:.7}}@keyframes slow-turn{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes lens-breathe{50%{box-shadow:0 0 0 11px #202126,0 0 0 14px #4b3137,0 0 0 29px #1a1b21,0 0 0 30px #50343b,0 0 95px #d830486a,inset 0 0 65px #e21c4177}}@keyframes lens-alarm{50%{filter:brightness(2)}}@keyframes laser-flash{0%{opacity:0}15%{opacity:.97}25%{opacity:.1}38%{opacity:.88}50%{opacity:0}100%{opacity:0}}
@media(max-height:730px){.hero{min-height:280px}.hero-emblem{width:230px;height:230px}.hero-name{font-size:75px}.app-content{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}.stage-head{margin:10px 0 14px}.big-symbol{height:130px}.big-symbol::before{width:116px;height:116px}.big-symbol svg{width:74px;height:74px}.role-card{min-height:290px}}@media(min-width:650px){body{background:radial-gradient(ellipse at 50% 30%,#35171d,#090b0e 65%)}.shell{margin:20px auto;min-height:calc(100dvh - 40px);border-radius:16px}.app-content{min-height:calc(100dvh - 40px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}