:root{--bg:#0a0c0b;--panel:#111513;--panel-2:#171b18;--paper:#d0c4a4;--cream:#e8dfc9;--faded:#968c79;--muted:#7c8078;--red:#b73538;--red-bright:#e14b4b;--line:rgba(217,206,177,.13);--green:#83b78c;--blue:#80a8ea;--white:#e8e9e3;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--serif:'Gowun Batang',Georgia,serif;--sans:'Noto Sans KR',sans-serif;--display:'Black Han Sans',var(--sans)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:var(--sans);font-size:14px;min-height:100vh;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.35}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}a{color:inherit;text-decoration:none}::selection{background:#a32a31;color:#fff}.hidden{display:none!important}.page{display:none;min-height:calc(100vh - 76px)}.page.active{display:block}.grain{pointer-events:none;z-index:70;position:fixed;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:screen}.blood-corner{position:absolute;right:-150px;top:420px;width:460px;height:440px;z-index:-1;opacity:.23;background:radial-gradient(circle at 25% 28%,#5b1619 0 4%,transparent 5%),radial-gradient(circle at 65% 31%,#4e1116 0 2%,transparent 3%),radial-gradient(ellipse at 43% 52%,#4c0d13 0 21%,transparent 45%);filter:blur(18px)}.topbar{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 max(32px,calc((100vw - 1380px)/2));border-bottom:1px solid var(--line);background:#0b0d0c}.brand{border:0;background:none;color:var(--white);display:flex;align-items:center;gap:10px;padding:0}.brand-emblem{font-size:30px;color:var(--red);font-family:Georgia}.brand-text{font-size:21px;font-weight:800;letter-spacing:-1px}.brand-text span{color:var(--red-bright);margin-left:2px}.brand-file{font:10px var(--mono);letter-spacing:1.5px;color:#898479;padding-left:14px;margin-left:5px;border-left:1px solid #4a453c}.top-actions{display:flex;align-items:center;gap:18px}.status-dot{display:flex;align-items:center;gap:8px;font:10px var(--mono);letter-spacing:.9px;color:#9aa69b}.status-dot i,.chat-live i,.tiny-indicator{width:6px;height:6px;display:inline-block;border-radius:50%;background:#82bf84;box-shadow:0 0 10px #62b267}.status-dot i{animation:online 2s infinite}.status-dot.off i,.tiny-indicator.off{background:#b44b46;box-shadow:0 0 7px #b44b46}.icon-btn{border:0;background:transparent;color:#aaa89d;font-size:14px;display:flex;align-items:center;gap:7px;padding:8px}.icon-btn span{font:10px var(--mono)}.nav-auth,.profile-btn{height:34px;padding:0 16px;border:1px solid #6c2e31;color:#e0bebd;background:#281416;font-size:12px;letter-spacing:1px}.nav-auth span{color:#cc6464;margin-left:8px}.profile-btn{background:#242621;border-color:#56574e;color:#ded8c7}.page{max-width:1380px;padding:0 34px;margin:auto}.eyebrow,.modal-kicker{font:10px var(--mono);letter-spacing:2.1px;color:#ae9f87}.eyebrow .line{display:inline-block;width:21px;border-top:1px solid var(--red);vertical-align:middle;margin-right:10px}.hero-frame{position:relative;min-height:636px;border:1px solid #373932;border-top:0;overflow:hidden;background:radial-gradient(ellipse at 66% 40%,#2e2420 0%,#131615 36%,#0f1110 66%),repeating-linear-gradient(45deg,transparent 0 1px,#ffffff02 1px 3px);display:grid;grid-template-columns:57% 43%}.hero-frame:before{content:'';position:absolute;inset:15px;border:1px solid #d7be8c12;pointer-events:none}.hero-copy{z-index:3;padding:92px 0 65px 68px}.hero-overline{color:#c1b59c;margin:40px 0 4px;font:18px var(--serif);letter-spacing:1px}.hero-copy h1{font:clamp(76px,8vw,128px)/1.08 var(--display);letter-spacing:-8px;margin:12px 0 6px;text-shadow:3px 3px #18120e;color:#e8dfcc;position:relative}.hero-copy h1>span{color:#b83138;text-shadow:1px 1px #381012}.hero-copy h1>b{display:block;font:11px var(--mono);letter-spacing:7px;color:#b09e88;margin-top:20px}.hero-sentence{font:clamp(22px,2.9vw,39px) var(--serif);letter-spacing:-2px;color:#e0d2b6;margin:39px 0 20px}.hero-sentence em,.page-intro em,.room-heading em,.modal h2 em{font-style:normal;color:var(--red-bright)}.hero-body{color:#9e9b8e;line-height:2.1;font-size:13px}.hero-body strong{font-weight:500;color:#d4ccbb}.hero-cta{display:flex;gap:13px;margin-top:42px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:47px;border:1px solid #646257;padding:0 24px;background:#1c211e;color:#e5decb;font-size:12px;font-weight:700;letter-spacing:.35px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}.button:not(:disabled):hover{transform:translateY(-2px);border-color:#c8b696;box-shadow:0 7px 22px #0008}.button-red{background:#9f272c;border-color:#b53b3f;color:#fff;box-shadow:inset 0 1px #d36b6d44}.button-red:not(:disabled):hover{background:#bf3035;border-color:#db5959;box-shadow:0 7px 30px #8f1a2544}.button-ghost{background:#24272033;border-color:#67625799}.button-outlined{background:transparent;border-color:#696052}.button-small{min-height:34px;padding:0 14px;font-size:11px}.wide{width:100%}.hero-metadata{display:flex;gap:18px;margin-top:65px;color:#716c5f;font:9px var(--mono);letter-spacing:.7px;flex-wrap:wrap}.hero-metadata i{display:inline-block;width:5px;height:5px;background:#a83b3b;border-radius:50%;margin-right:5px}.hero-art{position:relative;min-height:100%;overflow:hidden;pointer-events:none}.hero-ring{position:absolute;aspect-ratio:1;border:1px solid #c9af6c14;border-radius:50%;left:8%;top:5%;width:86%}.ring-two{width:69%;left:16%;top:12%;border-style:dashed}.moon{position:absolute;left:36%;top:17%;width:208px;height:208px;border-radius:50%;background:radial-gradient(circle at 43% 44%,#e9c9aa 0%,#ae8a77 45%,#4e3431 70%,transparent 74%);opacity:.42;filter:blur(2px);box-shadow:0 0 120px #c66b6220}.hero-art:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 59%,transparent 2%,#0e1110 75%);z-index:2}.hero-figure{position:absolute;left:9%;bottom:-2%;width:400px;height:530px;z-index:1;filter:drop-shadow(0 0 45px #000);opacity:.91}.figure-head{width:128px;height:176px;background:linear-gradient(90deg,#030404,#171918 52%,#020303);border-radius:47% 47% 45% 45%;position:absolute;left:136px;top:51px;transform:rotate(-3deg);box-shadow:inset -20px 5px 26px #050606}.figure-neck{position:absolute;width:82px;height:95px;background:#090a0a;top:193px;left:157px}.figure-body{position:absolute;bottom:-80px;left:0;width:400px;height:335px;border-radius:46% 46% 0 0 / 24% 24% 0 0;background:linear-gradient(105deg,#020303 0%,#1a1a19 48%,#070808 70%,#000 100%);clip-path:polygon(0 31%,22% 6%,37% 1%,50% 18%,65% 1%,84% 7%,100% 32%,100% 100%,0 100%)}.figure-shirt{position:absolute;left:148px;top:35px;width:103px;height:204px;background:linear-gradient(90deg,#c1bbae,#5d5954 47%,#dad0be);clip-path:polygon(0 0,50% 20%,100% 0,73% 100%,35% 100%)}.figure-tie{position:absolute;left:190px;top:70px;width:24px;height:160px;background:#771c23;clip-path:polygon(0 0,100% 0,80% 16%,100% 80%,50% 100%,0 80%,20% 16%);filter:brightness(.65)}.eye{position:absolute;width:18px;height:5px;background:#c92c35;border-radius:50%;top:82px;box-shadow:0 0 12px 4px #ec1c324e,0 0 27px #d4151d}.eye-left{left:27px;transform:rotate(-9deg)}.eye-right{right:27px;transform:rotate(9deg)}.crime-stamp{z-index:3;position:absolute;right:40px;bottom:120px;transform:rotate(-13deg);border:4px double #922f34;color:#8d3335;width:128px;height:128px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:.75;text-align:center;font:9px var(--mono);letter-spacing:1px}.crime-stamp strong{font:52px var(--display);line-height:1.1}.crime-stamp small{font:8px var(--mono)}.art-caption{position:absolute;top:38px;right:38px;z-index:3;text-align:right;color:#867d70;font:10px/1.8 var(--mono);letter-spacing:2px}.hero-bottom-rip{position:absolute;bottom:-1px;height:13px;left:0;right:0;background:var(--bg);clip-path:polygon(0 50%,2% 26%,4% 58%,6% 17%,8% 58%,11% 32%,14% 69%,18% 30%,21% 57%,25% 19%,28% 45%,32% 20%,35% 50%,38% 21%,43% 65%,48% 24%,50% 50%,55% 24%,59% 55%,64% 35%,69% 58%,72% 18%,77% 52%,81% 28%,86% 61%,92% 18%,97% 54%,100% 30%,100% 100%,0 100%)}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-top:0}.feature{padding:30px 38px;min-height:146px;border-right:1px solid var(--line);background:#101311}.feature:last-child{border:0}.feature-index{display:block;color:#a34b4a;font:10px var(--mono);letter-spacing:1px;margin-bottom:12px}.feature b{font:21px var(--serif);color:#e4dcc6}.feature p{color:#888b7e;font-size:12px;line-height:1.7;margin:9px 0 0}.footer-banner{display:flex;align-items:center;justify-content:space-between;color:#575b54;font:10px var(--mono);letter-spacing:2px;padding:29px 0 45px}.footer-banner i{color:#7f3136;font-size:20px}
/* archive */
.page-intro{display:flex;align-items:end;justify-content:space-between;padding:60px 0 30px;gap:24px}.page-intro h2{font:52px var(--serif);margin:15px 0 8px;color:#eadfc7}.page-intro p{margin:0;color:#9b988c;font-size:13px}.archive-toolbar{display:flex;align-items:center;justify-content:space-between;background:#171a17;padding:19px 26px;border:1px solid var(--line);border-bottom:2px solid #6d2529}.archive-title{display:flex;align-items:center;gap:13px}.archive-seal{font-size:27px;color:#b94b4d}.archive-title strong{font:20px var(--serif);display:block}.archive-title small{font:9px var(--mono);letter-spacing:1.5px;color:#807a6a;display:block;margin-top:4px}.archive-tools{display:flex;align-items:center;gap:15px}.archive-tools>span{color:#9e9784;font:11px var(--mono)}.rooms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 38px}.room-card{position:relative;background:linear-gradient(130deg,#1c211d,#111512);border:1px solid #393a33;padding:24px;min-height:215px;transition:transform .2s,border-color .2s}.room-card:hover{transform:translateY(-3px);border-color:#96715f}.room-card:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:#913138}.card-id{font:10px var(--mono);letter-spacing:1.8px;color:#a28f7c}.room-card h3{font:23px var(--serif);margin:17px 0 6px;overflow-wrap:anywhere}.card-meta{display:flex;align-items:center;gap:15px;font-size:11px;color:#a7a08e;margin:14px 0 24px}.card-meta span:before{content:'◦';color:#b94b4d;margin-right:5px}.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-foot small{font:10px var(--mono);color:#7d877a}.card-foot button{padding:8px 14px;border:1px solid #855151;background:#382022;color:#edc6c5;font-size:11px}.card-foot button:hover{background:#74272a}.card-lock{position:absolute;right:23px;top:23px;color:#a5a28f}.room-empty{grid-column:1/-1;min-height:264px;border:1px dashed #555549;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8e9083}.room-empty strong{font:23px var(--serif);color:#c9c1aa}.room-empty span{font-size:45px;color:#923c3d}.paper-panel{position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:34px 40px;border:1px solid #675b46;background:linear-gradient(115deg,#2c2b23,#1b1d19)}.paper-panel:after{position:absolute;content:"";height:5px;bottom:0;left:0;right:0;background:repeating-linear-gradient(90deg,#aa8c5144 0 3px,transparent 3px 8px)}.subhead{color:#bb6f66;font:10px var(--mono);letter-spacing:2px}.paper-panel h3{font:24px var(--serif);margin:10px 0}.paper-panel p{font-size:12px;color:#aca28d;margin:0}.code-inline{display:flex;gap:8px}.code-inline input{width:205px}.code-inline input,.modal input,.modal select{outline:none;background:#161816;color:#e5ddcb;border:1px solid #4e5148;min-height:46px;padding:0 14px;border-radius:0;min-width:0}.code-inline input:focus,.modal input:focus,.modal select:focus{border-color:#bf6464}.code-inline input{font:14px var(--mono);letter-spacing:2px}
/* room */
.room-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0 19px;border-bottom:1px solid var(--line)}.back-link{background:none;border:0;padding:3px 0;color:#aaa89c;font-size:12px}.back-link:hover{color:#e6d0bd}.case-number{color:#80796f;font:11px var(--mono);letter-spacing:1.5px}.case-number b{color:#c8b99c;font-weight:400}.case-number button{color:#a69d84;background:transparent;border:0;font-size:19px;vertical-align:middle;padding:0 7px}.room-top-status{font:10px var(--mono);color:#95aa99;letter-spacing:1px;white-space:nowrap}.room-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:31px 0 22px}.room-heading h2{font:36px var(--serif);margin:8px 0 0;color:#eadbc3;overflow-wrap:anywhere}.room-badges{display:flex;gap:8px;align-items:center}.room-badges>span{border:1px solid #5c5145;background:#25241f;color:#cbbba0;padding:7px 12px;font:11px var(--mono)}.role-tag.role-mafia{color:#fb7979;border-color:#97373f;background:#2b1619}.role-tag.role-doctor{color:#f2eee2;border-color:#a7a48f}.role-tag.role-detective{color:#9ec4ff;border-color:#476eaa;background:#111c2a}.role-tag.role-citizen{color:#a1d69c;border-color:#557850;background:#17291c}.role-tag.role-moderator{color:#d8c69b;border-color:#8a7650}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:18px;padding-bottom:42px}.game-main,.game-side{min-width:0}.game-stage{position:relative;border:1px solid #484337;background:#171a17;min-height:390px;overflow:hidden}.game-stage.night{border-color:#273847}.game-stage.death{border-color:#8d3038}.stage-top{position:relative;z-index:3;display:flex;justify-content:space-between;padding:27px 28px 15px;gap:12px}.stage-label{font:9px var(--mono);letter-spacing:1.5px;color:#c46a68}.stage-top h3{font:31px var(--serif);color:#e8dbc7;margin:9px 0 2px}.stage-top p{font-size:11px;color:#a7a392;margin:0}.timer{position:relative;width:80px;height:80px;flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center}.timer-svg{position:absolute;inset:0;transform:rotate(-90deg)}.timer-svg circle{fill:none;stroke-width:2}.timer-svg .track{stroke:#ffffff1c}.timer-svg .progress{stroke:#a73c3e;stroke-dasharray:213.63;stroke-dashoffset:0;transition:stroke-dashoffset .65s linear}.timer span{font:28px var(--mono);color:#efe4d2;line-height:1}.timer small{color:#8e897b;font:8px var(--mono);margin-top:4px}.stage-scene{height:205px;position:relative;margin:0 23px;border:1px solid #383b35;background:radial-gradient(ellipse at 48% 30%,#484237 0%,#171f20 35%,#11191c 65%,#0b0f10 100%);overflow:hidden;display:flex;align-items:center;justify-content:center}.stage-scene.night{background:radial-gradient(ellipse at 48% 24%,#1f2e3b 0%,#101620 46%,#080d11 100%)}.stage-scene:before{content:'';position:absolute;top:20px;left:15%;width:2px;height:2px;background:#fff8;border-radius:50%;box-shadow:55px 35px #fff5,120px -9px #fff5,200px 45px #fff5,260px 19px #fff8,380px 0 #fff4,440px 30px #fff8,500px 2px #fff5,580px 40px #fff6}.stage-scene-moon{position:absolute;width:92px;height:92px;top:26px;left:46%;border-radius:50%;background:radial-gradient(circle at 34% 42%,#b9ada0 0 25%,#8b7a71 63%,#403e42 78%);opacity:.38;box-shadow:0 0 60px #d3b7991d}.stage-building{position:absolute;bottom:-5px;background:#090d0e;height:75px;width:180px;clip-path:polygon(0 100%,0 55%,10% 55%,10% 35%,22% 35%,22% 55%,40% 55%,40% 15%,54% 15%,54% 49%,75% 49%,75% 0,87% 0,87% 40%,100% 40%,100% 100%)}.b1{left:-25px}.b2{left:34%;height:52px;transform:scaleX(1.4);background:#0a0e0e}.b3{right:-20px;height:88px}.stage-vignette{position:absolute;inset:0;box-shadow:inset 0 0 75px 40px #080c0d;z-index:1;pointer-events:none}.stage-headline{z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:0 16px}.stage-headline .stage-icon{font-size:26px;color:#b53f43}.stage-headline strong{font:23px var(--serif);color:#ebe2cd;text-shadow:0 4px 10px #000}.stage-headline>span:last-child{font:9px var(--mono);letter-spacing:3px;color:#a7a091}.spotlight{position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse 32% 98% at 50% 77%,#efd9a335 0%,transparent 100%),linear-gradient(180deg,#000a,#0000);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.spotlight:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffe4a91b 47%,#ffe4a915 54%,transparent 62%);animation:spotlight 4s ease-in-out infinite alternate;pointer-events:none}.spotlight span,.spotlight small{font:9px var(--mono);letter-spacing:3px;color:#beae8e}.spotlight strong{font:35px var(--serif);color:#fff3d0;text-shadow:0 0 24px #e8ad5d8a}.stage-foot{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#a29a88;padding:17px 25px 21px}.stage-foot span:last-child{font:10px var(--mono);color:#9d9788;white-space:nowrap}.suspect-panel{margin-top:18px;background:#151915;border:1px solid var(--line);padding:24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:23px}.section-heading>span{display:none}.section-heading h3{font:23px var(--serif);color:#dfd4bc;margin:0}.section-heading small{font:10px var(--mono);color:#837f72}.players-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.player-card{position:relative;min-height:109px;border:1px solid #48483d;background:#20241f;padding:15px 12px 11px;overflow:hidden;transition:border-color .2s,background .2s}.player-card.speaking{border-color:#cfb074;box-shadow:0 0 0 1px #cfb07450,0 0 28px #dbb16b1d;background:#342d21}.player-card.me{border-color:#82694f}.player-card.dead{filter:grayscale(1);opacity:.51}.player-card.moderator{background:#24251e}.player-card:before{content:'CASE-42';position:absolute;right:6px;top:7px;color:#55564b;font:8px var(--mono);letter-spacing:1px}.player-avatar{border:1px solid #8a81704d;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#383e36,#151c18);font:20px var(--serif);color:#c9bda2}.player-card.dead .player-avatar:after{content:'×';position:absolute;top:10px;left:22px;color:#9f3339;font:28px var(--serif)}.player-card-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:11px}.player-card-meta{font-size:10px;color:#929080;margin-top:4px}.player-card-meta .online{color:#78ad79}.player-card-meta .offline{color:#9e6761}.player-card .badge{position:absolute;top:48px;right:7px;font:9px var(--mono);color:#ccc0a8}.player-card.speaking:after{content:'◉';position:absolute;top:10px;right:10px;color:#e1bd71;font-size:11px}.action-panel{border:1px solid #4c4036;background:linear-gradient(145deg,#27231e,#161a18);margin-top:18px;padding:23px 26px;min-height:130px}.action-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.action-heading strong{font:23px var(--serif);color:#efe5ce}.action-heading span{font:10px var(--mono);color:#ab6967;letter-spacing:1px}.action-description{font-size:12px;color:#aaa397;line-height:1.8}.target-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:17px 0}.target-btn{background:#151816;border:1px solid #555348;padding:12px 8px;color:#d4c9b0;font-size:11px;min-height:42px}.target-btn:hover{border-color:#b38e6f;background:#2c2822}.target-btn.selected{border-color:#c44649;background:#462426;color:#fff}.target-btn .tiny-tag{font:9px var(--mono);margin-left:6px;opacity:.8}.small-note{font-size:11px;color:#858679;line-height:1.8}.action-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:17px}.action-tools select,.role-plan select{background:#151714;border:1px solid #545047;color:#e4dac5;padding:8px;min-height:38px;max-width:100%}.action-tools .button{min-height:39px;padding:0 14px}.ready-ready{color:#9ac39a}.ready-wait{color:#d2a08c}.mod-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.mod-row label{font-size:12px;color:#c9c0a8}.mod-row select{min-width:150px}.role-plan{border-top:1px solid var(--line);margin-top:15px;padding-top:15px}.role-plan>div{display:flex;align-items:center;justify-content:space-between;padding:5px 0;gap:12px}.role-plan label{font-size:12px}.result-line{color:#d3cbb9;font:16px/1.8 var(--serif)}.result-line.danger{color:#e79b95}.result-line.safe{color:#a2d8b1}.report-card{background:#101a1d;border-left:3px solid #749bd9;padding:14px 15px;margin:12px 0;color:#bcd6f4}.end-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}.end-role{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:9px 11px;background:#141917;border:1px solid var(--line);font-size:12px}.end-role b{font-weight:500}.history-row{padding:12px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.9;color:#aaa89b}.history-row strong{color:#e1d4b9;display:block;font-size:12px}
/* chat / evidence */
.chat-panel{display:flex;flex-direction:column;height:616px;min-height:420px;background:#1a1e1a;border:1px solid #454238}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 20px;border-bottom:1px solid #4c483e;background:linear-gradient(90deg,#282720,#1b1e19)}.chat-heading span,.log-heading span{font:9px var(--mono);letter-spacing:1.7px;color:#c27870}.chat-heading h3{font:22px var(--serif);margin:5px 0 0;color:#e0d5bb}.chat-heading .chat-live{display:flex;align-items:center;gap:6px;color:#95ad90;font-size:9px}.chat-messages{padding:18px 15px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:#555144 transparent}.chat-message{display:flex;gap:8px;align-items:flex-start}.chat-initial{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #56574d;background:#363931;color:#c7c3b2;font:14px var(--serif);display:grid;place-items:center}.chat-msg-body{min-width:0;flex:1}.chat-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.chat-meta strong{color:#d7ccb5;font-size:11px}.chat-meta time{color:#777a72;font:9px var(--mono)}.chat-text{font-size:12px;line-height:1.75;margin-top:3px;color:#aaa99b;word-break:break-word;white-space:pre-wrap}.chat-message.own .chat-meta strong{color:#e3a8a0}.chat-message.mafia .chat-meta strong{color:#f48283}.chat-message.ghost .chat-meta strong{color:#8d8e91}.chat-system{font-size:11px;color:#a7a092;text-align:center;border-top:1px solid #4b443933;border-bottom:1px solid #4b443933;padding:12px 6px;line-height:1.7}.chat-system:before{content:'✣';color:#bc5553;margin-right:9px}.chat-context{font-size:10px;color:#a6a08a;background:#252721;padding:10px 15px;border-top:1px solid #44473d}.chat-form{display:flex;padding:11px;background:#1a1e1a}.chat-form input{flex:1;border:1px solid #4a4d44;color:#e4ddc8;background:#101411;min-width:0;outline:none;padding:0 13px;font-size:12px;height:42px}.chat-form input:disabled{color:#666;background:#171b18}.chat-form button{background:#a02d31;color:#f7eae0;border:0;font-size:22px;width:46px}.chat-form button:disabled{background:#393d35}.log-panel{margin-top:18px;background:#151916;border:1px solid var(--line);padding:20px}.log-heading span{display:block}.log-heading strong{display:block;font:20px var(--serif);color:#d9cfb8;margin:6px 0 13px}.event-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}.log-item{border-left:2px solid #81544a;padding:6px 10px;color:#9a9688;font-size:11px;line-height:1.6;background:#ffffff04}.log-item.death{border-color:#bd4749}.log-item.save{border-color:#7aa386}.log-item small{color:#716e62;font:9px var(--mono);display:block;margin-bottom:3px}
/* modals */
.modal-backdrop{position:fixed;z-index:90;inset:0;background:#030404d9;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.modal{position:relative;width:min(100%,490px);max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-color:#746958 transparent;background:#201f1b;border:1px solid #75634c;padding:37px 42px 33px;box-shadow:0 30px 100px #000c,0 0 0 7px #141714;isolation:isolate}.paper-modal:before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(-14deg,transparent 0 31px,#cfb48705 32px 33px),radial-gradient(ellipse at 85% 10%,#76583d25,transparent 50%)}.paper-modal:after{content:'';position:sticky;display:block;height:8px;bottom:-34px;pointer-events:none;background:var(--bg);clip-path:polygon(0 60%,3% 28%,6% 48%,11% 10%,15% 57%,19% 21%,24% 56%,28% 16%,33% 53%,40% 21%,48% 58%,52% 16%,61% 57%,69% 25%,78% 59%,86% 15%,94% 58%,100% 33%,100% 100%,0 100%)}.modal .close-modal{position:absolute;right:18px;top:14px;border:0;color:#b3a995;background:transparent;font:27px var(--serif)}.modal h2{font:30px var(--serif);margin:12px 0;color:#e9ddc6}.modal-description{color:#aba18d;font-size:12px;line-height:1.8;margin:8px 0 25px}.modal-symbol{font:50px Georgia;display:block;text-align:center;color:#a3353b;margin:6px}.auth-modal h2,.auth-modal .modal-description,.auth-modal .modal-kicker{text-align:center}.modal form{display:flex;flex-direction:column;gap:14px}.modal label{color:#d6c8ac;font-size:12px;display:flex;flex-direction:column;gap:8px}.modal label small{color:#938976;font-size:10px}.modal input,.modal select{width:100%;font-size:12px}.modal label:focus-within{color:#f2d9be}.modal .button.wide{margin-top:8px}.switch-tabs{display:flex;margin-bottom:25px;border-bottom:1px solid #5a5246}.switch-tabs button{flex:1;border:0;background:transparent;color:#9a9383;padding:12px;font-size:12px}.switch-tabs button.selected{border-bottom:2px solid #c94749;color:#efe0c2}.fine-print{font:10px var(--mono);text-align:center;color:#716d62;margin-top:21px}.create-modal{width:min(100%,610px)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-section-label{display:block;font:10px var(--mono);letter-spacing:1px;color:#bb7370;margin:7px 0 13px}.role-controls{padding:11px 0 3px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:5px 0 8px}.role-controls p{color:#969183;font-size:10px;margin:10px 0 13px}.input-tip{align-self:center;font-size:11px;color:#b4a18a;line-height:1.7}.rules-content{max-height:360px;overflow:auto;border-top:1px solid var(--line);margin:26px 0;padding-right:12px}.rules-content p{font:13px/2 var(--serif);border-bottom:1px solid var(--line);padding:7px 0 13px;color:#b9b19e}.rules-content strong{color:#e4c2a5}
/* cinematic UI */
.cinema-overlay,.transition-overlay{position:fixed;z-index:100;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:#030405}.reveal-static{position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff1 4px 5px),radial-gradient(ellipse,#3d1c1e,transparent 69%);animation:static 4s steps(10) infinite}.reveal-figure{position:absolute;top:6%;height:78%;width:350px;opacity:.72;filter:drop-shadow(0 10px 60px #000)}.reveal-hat{position:absolute;width:144px;height:15px;left:102px;top:65px;background:#050707;border-radius:45%;box-shadow:0 -22px #080a0b,0 -42px 0 -1px #0d0d0d}.reveal-head{position:absolute;left:122px;top:83px;width:108px;height:134px;background:linear-gradient(110deg,#020303,#1a1a19,#020303);border-radius:44%}.reveal-head i{position:absolute;width:13px;height:4px;border-radius:50%;top:66px;background:#ce2930;box-shadow:0 0 16px 4px #d92f345b;left:24px}.reveal-head i+i{left:75px}.reveal-shoulders{position:absolute;left:0;top:211px;width:350px;height:300px;background:linear-gradient(90deg,#040505,#191919,#050505);clip-path:polygon(0 33%,25% 10%,43% 0,50% 27%,58% 0,75% 10%,100% 33%,100% 100%,0 100%)}.reveal-shoulders:after{content:'';position:absolute;top:38px;left:153px;width:40px;height:195px;background:#6f1820;clip-path:polygon(15% 0,85% 0,100% 77%,50% 100%,0 77%)}.reveal-content{position:relative;z-index:2;margin-top:12%;display:flex;flex-direction:column;align-items:center;text-align:center;width:calc(100% - 24px);padding:24px;background:linear-gradient(transparent,#03040596,transparent)}.reveal-content>span{font:10px var(--mono);letter-spacing:3px;color:#92877b}.reveal-content h3{font:clamp(24px,4.2vw,40px) var(--serif);color:#dfd4c5;margin:23px 0 7px}.revealed-role{font:clamp(42px,8vw,92px) var(--display);letter-spacing:2px;line-height:1.4;opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s;color:#b32f36;text-shadow:0 0 28px #9e25394a}.revealed-role.show{opacity:1;transform:translateY(0)}.revealed-role.mafia{color:#e24449}.revealed-role.doctor{color:#f3f2ec}.revealed-role.detective{color:#86baff}.revealed-role.citizen{color:#95cfa2}.revealed-role.moderator{color:#e3c58d}.reveal-content p{color:#b1afa5;font:14px/1.8 var(--serif)}.reveal-content small{margin-top:10px;color:#707067;font:9px var(--mono);letter-spacing:3px}.reveal-skip{position:absolute;bottom:7%;z-index:5;border:1px solid #696156;color:#c9c3b5;background:#1b1e1a;padding:12px 26px}.transition-overlay{background:#070a0e;animation:fadeIn .8s}.transition-overlay:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#202b39a8,transparent 58%)}.transition-moon{position:absolute;width:195px;height:195px;border-radius:50%;top:18%;background:radial-gradient(circle at 35% 45%,#b8bbbe,#747c84 62%,#26353d 76%);filter:blur(.4px);opacity:.5;box-shadow:0 0 180px #8d9ba83c}.transition-overlay>span,.transition-overlay>small{z-index:2;color:#9fa9b4;font:11px var(--mono);letter-spacing:4px}.transition-overlay>strong{z-index:2;color:#e9e6df;font:clamp(33px,7vw,70px) var(--serif);margin:25px 0;text-align:center;padding:0 10px}.transition-overlay.death{background:#180a0c}.transition-overlay.death .transition-moon{background:#753035;opacity:.66}.transition-overlay.death>strong{color:#f1d7d1}.transition-overlay.death .transition-ink{position:absolute;inset:0;opacity:.3;background:radial-gradient(ellipse at 20% 75%,#9a262a 0 11%,transparent 25%),radial-gradient(ellipse at 75% 22%,#a32933 0 8%,transparent 19%),radial-gradient(circle at 66% 72%,#b12e32 0 3%,transparent 4%)}.toast{position:fixed;z-index:120;bottom:28px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;max-width:min(90vw,440px);padding:14px 20px;color:#f4dfd1;background:#322020;border:1px solid #b34b4c;box-shadow:0 12px 40px #000b;text-align:center;font-size:12px;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes online{50%{box-shadow:0 0 0 5px #508a5340}}@keyframes spotlight{to{transform:translateX(25px)}}@keyframes static{50%{transform:translate(1px,-2px)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:1150px){.hero-copy{padding-left:45px}.hero-copy h1{font-size:96px}.hero-figure{left:-10%}.game-layout{grid-template-columns:minmax(0,1fr) 320px}.players-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rooms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.topbar{padding:0 18px}.brand-file{display:none}.top-actions{gap:8px}.status-dot{display:none}.page{padding:0 16px}.hero-frame{display:block;min-height:660px}.hero-copy{padding:70px 30px 35px}.hero-art{position:absolute;inset:0 0 0 25%;opacity:.45}.hero-copy h1{font-size:100px}.hero-copy,.hero-copy>*{position:relative;z-index:4}.hero-metadata{margin-top:56px}.feature{padding:23px}.feature b{font-size:18px}.game-layout{display:block}.game-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:17px}.chat-panel{height:485px}.log-panel{margin-top:0}.players-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.page-intro{padding-top:35px}}
@media(max-width:600px){body{font-size:12px}.topbar{height:61px}.brand-text{font-size:17px}.brand-emblem{font-size:24px}.top-actions{gap:2px}.icon-btn.compact{display:none}.icon-btn span{display:none}.nav-auth,.profile-btn{height:31px;font-size:11px;padding:0 9px}.page{min-height:calc(100vh - 61px);padding:0 10px}.hero-frame{min-height:670px}.hero-copy{padding:65px 23px 24px}.hero-overline{font-size:13px;margin-top:45px}.hero-copy h1{font-size:clamp(65px,17vw,100px);letter-spacing:-5px}.hero-copy h1 b{font-size:8px;letter-spacing:4px;margin-top:12px}.hero-sentence{font-size:25px;margin-top:33px}.hero-body{font-size:12px}.hero-art{left:4%;top:10%;opacity:.32}.hero-figure{left:-10%;bottom:-14%;transform:scale(.85)}.moon{left:54%;top:18%}.crime-stamp{right:17px;bottom:68px}.hero-cta{gap:9px;margin-top:38px}.hero-cta .button{padding:0 14px;min-height:43px;font-size:11px}.hero-metadata{gap:10px;margin-top:80px;font-size:8px}.feature-strip{grid-template-columns:1fr}.feature{min-height:auto;border-right:0;border-bottom:1px solid var(--line);padding:17px 20px}.feature-index{margin-bottom:5px}.feature b{font-size:18px}.feature p{font-size:11px;margin-top:4px}.footer-banner{font-size:8px;letter-spacing:.2px}.page-intro{flex-direction:column;align-items:start;gap:17px;padding:32px 0 25px}.page-intro h2{font-size:39px}.page-intro .button{width:100%}.archive-toolbar{padding:13px}.archive-title strong{font-size:16px}.archive-tools{gap:6px}.archive-tools>span{font-size:9px}.archive-tools .button{padding:0 9px;font-size:10px}.rooms-grid{grid-template-columns:1fr}.room-card{min-height:auto}.paper-panel{display:block;padding:25px 16px}.code-inline{margin-top:17px}.code-inline input{width:100%}.room-topline{padding:16px 3px 12px}.room-top-status{display:none}.case-number{font-size:9px}.room-heading{margin:21px 0 13px;align-items:start;gap:14px}.room-heading h2{font-size:28px}.room-badges{flex-direction:column;align-items:flex-end;gap:5px}.room-badges>span{font-size:9px;padding:5px 7px}.stage-top{padding:18px 16px 11px}.stage-top h3{font-size:25px}.stage-top p{font-size:10px;max-width:235px}.timer{width:62px;height:62px}.timer span{font-size:22px}.stage-scene{margin:0 10px;height:188px}.stage-headline strong{font-size:20px}.stage-foot{padding:14px;gap:10px;font-size:10px}.stage-foot span:last-child{font-size:9px}.suspect-panel{padding:17px 12px}.section-heading{margin-bottom:15px}.section-heading h3{font-size:20px}.section-heading small{font-size:8px}.players-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.player-card{min-height:104px;padding:11px 7px}.player-card-name{font-size:11px}.player-card-meta{font-size:9px}.action-panel{padding:18px 15px}.target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-side{display:block}.chat-panel{height:540px}.log-panel{margin-top:15px}.modal{padding:34px 22px 25px}.modal h2{font-size:26px}.form-grid{gap:8px}.modal label{font-size:11px}.modal input,.modal select{padding:0 8px}.form-grid.cols3 label{font-size:10px}.form-grid.cols3 select{padding:0 5px}.hero-cta,.archive-toolbar,.room-heading{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation:none!important;transition:none!important}


/* ===== 신성율42 V2 / Director's Cut: CSS 기반 촬영·종이·잉크·스포트라이트 ===== */
:root{--film-noir:#070708;--ink-red:#af2b36;--paper-gold:#ccb592}
body{background-image:radial-gradient(ellipse 95% 80% at 50% -20%,#1b1c19 0%,transparent 80%)}
.hero-frame,.paper-modal,.game-stage,.player-card,.action-panel{isolation:isolate}
.hero-frame:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:2;opacity:.25;background:repeating-linear-gradient(0deg,transparent 0 2px,#1a1619 2px 3px,transparent 3px 6px);mix-blend-mode:screen}
.game-stage{background:linear-gradient(150deg,#1b1c19,#090d0e 70%);transition:box-shadow 2.4s,border-color 2.4s}
.game-stage.night{border-color:#4c475c;box-shadow:inset 0 0 95px #000b,0 0 30px #11162b44}
.stage-scene{transition:background 2.8s ease,filter 2.8s ease,border-color 1.8s;isolation:isolate}
.stage-scene.phase-night{background:radial-gradient(ellipse at 52% 12%,#131f30 0,#080d14 52%,#030507 100%);border-color:#343c51}
.stage-scene.phase-night_result{background:radial-gradient(ellipse at 47% 3%,#544a43 0,#1f2425 39%,#0f0c0e 85%)}
.stage-scene.phase-intro{background:radial-gradient(ellipse at 50% 35%,#4b3b26 0,#161513 54%,#080b0c 100%)}
.stage-scene.phase-vote,.stage-scene.phase-vote_result{background:radial-gradient(ellipse at 51% 10%,#39201e 0,#171113 52%,#060809 90%)}
.stage-scene.phase-discussion{background:radial-gradient(ellipse at 54% 25%,#344047 0,#1b2425 49%,#0b1113 90%)}
.stage-scene.phase-ended{background:radial-gradient(ellipse at 50% 8%,#605144 0,#18191a 65%,#080a0b 100%)}
.stage-scene:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;background:repeating-linear-gradient(to bottom,#ffffff09 0 1px,transparent 1px 5px);animation:filmJitter 8s steps(6,end) infinite}
.stage-fog{position:absolute;z-index:2;width:130%;height:66%;left:-30%;bottom:-28%;border-radius:60%;background:radial-gradient(ellipse,#b2a89a12 0,#7889950d 35%,transparent 65%);filter:blur(25px);animation:driftFog 15s ease-in-out infinite alternate;pointer-events:none}
.stage-fog.fog-two{left:8%;bottom:-20%;height:40%;animation-duration:19s;animation-direction:alternate-reverse;opacity:.7}
.stage-scene.phase-night .stage-fog{background:radial-gradient(ellipse,#9ca5c81a 0,#34435915 35%,transparent 70%)}
.stage-scene-moon{transition:opacity 3s,transform 4s,box-shadow 2s}
.stage-scene.phase-night .stage-scene-moon{opacity:.85;transform:scale(1.1);box-shadow:0 0 100px #738fbb38,0 0 20px #d1d1db22}
.stage-scene.phase-night_result .stage-scene-moon{opacity:.17;transform:translateY(25px)}
.stage-cinema-bars:before,.stage-cinema-bars:after{content:"";position:absolute;z-index:5;left:0;right:0;height:7px;background:#080908b0;pointer-events:none}
.stage-cinema-bars:before{top:0}.stage-cinema-bars:after{bottom:0}
.stage-weather{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity 1.7s;background:repeating-linear-gradient(112deg,transparent 0 17px,#b5c8df08 17px 18px,transparent 19px 57px);animation:fallingRain 3s linear infinite}
.stage-scene.phase-night .stage-weather{opacity:.8}
.stage-scene.phase-night_result.death-state:before{opacity:0}
.stage-scene.phase-night_result.death-state{box-shadow:inset 0 0 80px #5013156b}
.scene-mood-line{display:flex;justify-content:space-between;margin:0 23px;padding:9px 1px 0;color:#928476;font:9px var(--mono);letter-spacing:2.4px}
.scene-mood-line span:last-child{color:#813b3d}
.spotlight{background:radial-gradient(ellipse 25% 100% at 50% 85%,#f9d89938 0%,transparent 100%),linear-gradient(180deg,#000b,#0004);overflow:hidden}
.spotlight:after{content:"";position:absolute;bottom:-50px;width:min(50%,260px);height:82px;border-radius:50%;background:radial-gradient(ellipse,#e8bf793b,transparent 67%);filter:blur(20px);animation:spotPulse 3s ease-in-out infinite}
.spotlight strong{position:relative;z-index:2;letter-spacing:2px;animation:spotNameIn .7s ease both}
.spotlight .speaker-counter{position:absolute;top:16px;left:18px;color:#9e896c;letter-spacing:2px}
.stage-scene.speaker-change .spotlight strong{animation:spotNameIn .7s cubic-bezier(.2,1.2,.3,1)}
.player-card.speaking{animation:playerSpot 2.3s ease-in-out infinite alternate}
.player-card.removed{opacity:.45;filter:grayscale(1);border-style:dashed}
.player-card.removed:after{content:"ACCESS REVOKED";position:absolute;left:7px;bottom:3px;transform:rotate(-7deg);color:#ca666a;font:9px var(--mono);letter-spacing:1px;z-index:2}
.player-card .kick-btn{position:absolute;right:6px;bottom:7px;z-index:4;padding:5px 7px;border:1px solid #833a3f;background:#301719;color:#eebdb9;font:10px var(--sans);border-radius:2px;transition:background .2s,transform .2s}
.player-card .kick-btn:hover{background:#8d2731;transform:translateY(-2px)}
.player-card .badge{pointer-events:none}
.player-card:has(.kick-btn){padding-bottom:31px}
.timer.urgent{animation:countdownAlarm 1s ease-in-out infinite}
.timer.urgent .progress{stroke:#e54a51;filter:drop-shadow(0 0 5px #da3338)}
.timer.urgent #timerNum{color:#ff989a}
.target-btn.selected{box-shadow:inset 0 0 19px #982c3640,0 0 16px #942c2525}
/* 신분 공개: 실제 2초간 암전 후 신분증이 봉인 해제됨 */
.cinema-overlay{isolation:isolate}
#roleReveal{background:radial-gradient(ellipse at 50% 42%,#261617 0,#060708 55%,#000 100%);overflow:hidden}
#roleReveal.role-mafia{--reveal-light:#cb303c;--reveal-glow:#bd222c}
#roleReveal.role-doctor{--reveal-light:#e9dfcd;--reveal-glow:#d4ccbb}
#roleReveal.role-detective{--reveal-light:#80b6fb;--reveal-glow:#305cac}
#roleReveal.role-citizen{--reveal-light:#8fd4a0;--reveal-glow:#458650}
#roleReveal.role-moderator{--reveal-light:#d9c08b;--reveal-glow:#af8b4c}
#roleReveal .reveal-figure{filter:drop-shadow(0 0 35px #000);animation:figureAppear 2s ease-out both}
#roleReveal .reveal-head i{background:#c6313b;box-shadow:0 0 10px #cf3336,0 0 26px #b21d2b;animation:eyesAwake 3s ease-in-out infinite alternate}
#roleReveal .reveal-static{animation:static .2s steps(2,end) infinite;opacity:.14}
.reveal-eye-beam{pointer-events:none;position:absolute;z-index:1;inset:0;background:radial-gradient(ellipse at 50% 52%,#a8323114,transparent 62%);animation:darkPulse 4s ease-in-out infinite}
.reveal-ornament{position:absolute;z-index:4;left:5%;top:6%;color:#a18a7c;letter-spacing:2px;font:10px var(--mono)}
.reveal-sigil{position:absolute;z-index:4;right:6%;top:7%;font:58px var(--serif);color:var(--reveal-light,#b6383b);opacity:.4;text-shadow:0 0 45px var(--reveal-glow,#a12a2f)}
.reveal-content{z-index:5;filter:drop-shadow(0 5px 25px #000)}
.reveal-content>span{letter-spacing:3px}
.identity-divider{font:10px var(--mono);color:#ad7b72;letter-spacing:2px;margin:13px 0 5px}
#roleReveal .revealed-role.show{animation:identityBurn .9s cubic-bezier(.18,.85,.25,1.2) both;text-shadow:0 0 30px var(--reveal-glow,#9c2228)}
#roleReveal .revealed-role:not(.show){visibility:hidden}
#roleReveal .reveal-skip{z-index:7;animation:buttonLift .5s .1s both}
/* 시네마틱 장면 전환 */
.transition-overlay{overflow:hidden;isolation:isolate;opacity:1;animation:shutterOpen .55s cubic-bezier(.2,.6,.22,1) both;background:radial-gradient(ellipse at 50% 50%,#18212b,#08090c 65%)}
.transition-overlay:before{z-index:0;pointer-events:none}
.transition-overlay>span,.transition-overlay>strong,.transition-overlay>small{position:relative;z-index:6;text-shadow:0 4px 32px #000}
.transition-overlay>span{animation:cinemaTextEnter .85s .18s both;letter-spacing:5px!important;color:#bdad98}
.transition-overlay>strong{animation:cinemaTextEnter 1s .34s both;font-weight:700;letter-spacing:-1px}
.transition-overlay>small{animation:cinemaTextEnter .85s .58s both;max-width:min(540px,86vw);text-align:center;line-height:1.8;letter-spacing:2px!important}
.transition-overlay.scene-night{background:linear-gradient(120deg,#10192c,#010207 85%)}
.transition-overlay.scene-daybreak{background:radial-gradient(ellipse at 50% 16%,#5b5950,#1e1a1b 59%,#090809)}
.transition-overlay.scene-death{background:radial-gradient(ellipse at 50% 30%,#38151c,#0a070a 67%,#020203)}
.transition-overlay.scene-save{background:radial-gradient(ellipse at 50% 20%,#273f38,#111919 59%,#060909)}
.transition-overlay.scene-discussion{background:radial-gradient(ellipse at 50% 20%,#293a3b,#0a1114 75%)}
.transition-overlay.scene-vote{background:radial-gradient(ellipse at 50% 40%,#3a2c27,#0d0b0b 72%)}
.transition-overlay.scene-ending{background:radial-gradient(ellipse at 50% 22%,#37322b,#0b090b 74%)}
.transition-overlay.scene-intro{background:radial-gradient(ellipse at 50% 40%,#4c3321,#0b0908 75%)}
.transition-overlay .transition-moon{z-index:2;top:10%;width:clamp(170px,23vw,310px);height:clamp(170px,23vw,310px);box-shadow:0 0 120px #ced3c232;animation:moonRise 4s ease-out both;opacity:.3}
.transition-overlay.scene-night .transition-moon{opacity:.75;box-shadow:0 0 140px #7898bd50}
.transition-overlay.scene-daybreak .transition-moon{background:#edc9a0;opacity:.5;box-shadow:0 0 200px #dbbb9055}
.transition-overlay.scene-death .transition-moon,.transition-overlay.scene-vote .transition-moon{background:#732b30;opacity:.32;box-shadow:0 0 130px #b22c3b45}
.transition-overlay.scene-save .transition-moon{background:#b8d0bd;opacity:.22}
.transition-mist{pointer-events:none;position:absolute;z-index:3;left:-20%;bottom:6%;width:150%;height:42%;border-radius:50%;filter:blur(38px);background:radial-gradient(ellipse,#acb6ad1f,transparent 62%);animation:driftFog 6s ease-in-out infinite alternate}
.cinematic-scratches{pointer-events:none;position:absolute;z-index:9;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 5px,#eee6d007 5px 6px),repeating-linear-gradient(90deg,transparent 0 140px,#f6d7a908 141px 142px);mix-blend-mode:screen;animation:filmJitter .28s steps(2,end) infinite}
.cinema-shutter{position:absolute;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 160px #000, inset 0 0 55px #000}
.transition-silhouette{position:absolute;width:220px;height:350px;bottom:-110px;left:calc(50% - 110px);z-index:2;opacity:.24;filter:blur(2px);animation:silhouetteSlide 5s ease-out both}
.silhouette-head{position:absolute;left:78px;top:5px;width:70px;height:91px;border-radius:50% 50% 45% 45%;background:#030406;box-shadow:0 0 70px #000}
.silhouette-head i{position:absolute;top:45px;width:7px;height:4px;border-radius:50%;background:#d4343d;box-shadow:0 0 14px #bb2737}
.silhouette-head i:first-child{left:16px}.silhouette-head i:last-child{right:16px}
.silhouette-coat{position:absolute;top:89px;left:8px;width:205px;height:235px;background:#030406;clip-path:polygon(40% 0,60% 0,78% 10%,100% 50%,95% 100%,5% 100%,0 50%,24% 10%)}
.transition-overlay.scene-daybreak .transition-silhouette,.transition-overlay.scene-save .transition-silhouette{opacity:.08}
.transition-overlay.scene-death .transition-silhouette{opacity:.38}
.transition-seal{position:absolute;z-index:5;top:7%;left:5%;padding:7px 10px;border:1px solid #8a595454;color:#b57f7d;font:9px var(--mono);letter-spacing:2px;transform:rotate(-6deg);opacity:.7}
.cinema-frame{position:absolute;z-index:5;width:70px;height:70px;opacity:.3;pointer-events:none}.cinema-frame-tl{top:5%;left:3%;border-left:1px solid #a3937c;border-top:1px solid #a3937c}.cinema-frame-br{bottom:5%;right:3%;border-right:1px solid #a3937c;border-bottom:1px solid #a3937c}
.cinematic-progress{position:absolute;z-index:8;left:0;right:0;bottom:0;height:3px;background:#57413d5e}
.cinematic-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9e4547,#d6b494);box-shadow:0 0 12px #a44043;animation:cinemaProgress var(--cinema-ms,3200ms) linear both}
.transition-overlay.scene-death .transition-ink{z-index:3;opacity:.28;background:radial-gradient(circle at 18% 30%,#ac2935 0 2%,transparent 3%),radial-gradient(ellipse at 73% 80%,#9e2732 0 9%,transparent 27%),radial-gradient(ellipse at 40% 14%,#7c1c25 0 4%,transparent 17%);animation:inkSpread 2.4s ease-out both}
.transition-overlay.scene-vote:after{content:'GUILTY?';position:absolute;z-index:4;right:6%;bottom:12%;transform:rotate(-13deg);font:clamp(28px,7vw,88px) var(--display);color:#8f2c3344;border:4px double #8f2c3344;padding:6px 14px}
/* 희미한 기밀 보고서 */
.secret-report{position:fixed;z-index:95;right:clamp(12px,3vw,40px);bottom:24px;width:min(365px,calc(100vw - 24px));padding:21px 25px 20px;background:linear-gradient(160deg,#d5c3a3,#a89a80);color:#29221d;box-shadow:0 22px 50px #000d,0 0 0 1px #d9c6a0;transform:rotate(-1deg);clip-path:polygon(0 0,98% 0,100% 6%,100% 100%,1% 100%,0 95%);animation:paperArrival .65s cubic-bezier(.18,.8,.22,1.2) both}
.secret-report:before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(20deg,#0000 0 4px,#31271b0c 5px 6px)}
.secret-report>span{font:10px var(--mono);color:#a13335;letter-spacing:2.5px;display:block;margin-bottom:12px}
.secret-report>strong{font:24px var(--serif);display:block;margin-bottom:8px}.secret-report>p{font:14px/1.8 var(--serif);color:#3b2d22;margin:0 0 14px}.secret-report>small{font:10px var(--sans);color:#6d5a47}
.secret-report-close{position:absolute;right:9px;top:6px;font-size:24px;line-height:1;color:#695649;background:none;border:0}
.secret-report[data-role=mafia]{border-top:5px solid #a42b32}.secret-report[data-role=doctor]{border-top:5px solid #e8e5dd}.secret-report[data-role=detective]{border-top:5px solid #4c82c2}
/* 방장 강퇴 확인 */
.kick-modal{max-width:440px;border:1px solid #923b41;box-shadow:0 20px 90px #000d,0 0 70px #65151e37}
.kick-warning-symbol{font-size:55px;color:#b8494e;text-shadow:0 0 30px #d335393b;padding:9px 0}
.kick-modal .modal-description strong{color:#d64c53}
.kick-description{line-height:1.8;color:#b9a28a;font-size:12px;border-left:2px solid #963a40;padding-left:12px;margin:20px 0}
.kick-choices{display:flex;gap:9px;margin-top:23px}.kick-choices>*{flex:1;white-space:normal}
/* 강퇴된 사용자를 위한 전용 출입 금지 화면 */
.kicked-screen{z-index:130;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#2e171c,#070708 68%)}
.revoked-stamp{position:absolute;top:12%;color:#b34348;border:3px solid #9d3339;padding:9px 19px;transform:rotate(-13deg);letter-spacing:7px;font:clamp(12px,2vw,22px) var(--mono);opacity:.6}
.kicked-file{padding:35px;max-width:550px;text-align:center;z-index:2}.kicked-file>span{font:10px var(--mono);letter-spacing:3px;color:#9d978a}.kicked-file h2{font:clamp(34px,6vw,66px)/1.25 var(--serif);margin:30px 0;color:#efdfc5}.kicked-file em{font-style:normal;color:#c4444a}.kicked-file p{color:#aaa396;font-size:13px;margin:0 0 35px}
.action-stamp{position:fixed;z-index:90;right:clamp(12px,5vw,75px);top:38%;transform:rotate(-18deg);pointer-events:none;border:4px double #9d3235;border-radius:2px;color:#ce666b;padding:14px 20px;background:#171013cc;box-shadow:0 0 40px #8c2c3335;font:clamp(22px,5vw,43px) var(--display);letter-spacing:3px;animation:stampAction 1.2s both}
@keyframes shutterOpen{0%{opacity:0;filter:brightness(0);clip-path:inset(48% 0)}25%{opacity:1;filter:brightness(.2);clip-path:inset(15% 0)}100%{opacity:1;filter:brightness(1);clip-path:inset(0)}}
@keyframes moonRise{from{transform:translateY(58px) scale(.7);opacity:0}to{transform:translateY(0) scale(1)}}
@keyframes cinematicProgress{from{width:0}to{width:100%}}
@keyframes cinemaTextEnter{0%{opacity:0;transform:translateY(23px);filter:blur(12px);letter-spacing:10px}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes darkPulse{50%{opacity:.3}}
@keyframes driftFog{from{transform:translateX(-12%) scale(1)}to{transform:translateX(20%) scale(1.2)}}
@keyframes fallingRain{from{background-position:0 -80px}to{background-position:0 150px}}
@keyframes filmJitter{30%{transform:translate(1px,-1px)}65%{transform:translate(-1px,1px)}}
@keyframes spotPulse{50%{opacity:.6;transform:scaleX(1.13)}}
@keyframes spotNameIn{0%{opacity:0;transform:translateY(12px) scale(.91);filter:blur(12px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes playerSpot{to{box-shadow:0 0 0 1px #daba6f80,0 0 28px #b8a16a50}}
@keyframes countdownAlarm{50%{transform:scale(1.08)}}
@keyframes eyesAwake{50%{opacity:.42;box-shadow:0 0 22px #de454e,0 0 45px #dc3c42}}
@keyframes figureAppear{0%{filter:brightness(0);transform:translateY(35px)}100%{filter:brightness(1);transform:translateY(0)}}
@keyframes identityBurn{0%{opacity:0;filter:blur(20px);transform:scale(1.35);letter-spacing:15px}68%{opacity:1;filter:blur(0);transform:scale(.95)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes silhouetteSlide{from{transform:translateY(60px);opacity:0}to{transform:translateY(0)}}
@keyframes inkSpread{from{opacity:0;transform:scale(.7)}to{opacity:.28;transform:scale(1)}}
@keyframes buttonLift{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes paperArrival{0%{opacity:0;transform:translate(20px,120px) rotate(8deg) scale(.8)}100%{opacity:1;transform:translate(0,0) rotate(-1deg) scale(1)}}
@keyframes stampAction{0%{opacity:0;transform:rotate(-18deg) scale(2.5)}25%{opacity:1;transform:rotate(-18deg) scale(.9)}40%{transform:rotate(-18deg) scale(1)}75%{opacity:1}100%{opacity:0}}
@media(max-width:600px){.scene-mood-line{font-size:7px;margin:0 10px;letter-spacing:1px}.transition-overlay>strong{font-size:clamp(33px,9vw,55px)!important}.transition-seal{font-size:7px}.reveal-ornament{font-size:8px}.reveal-sigil{font-size:41px}.spotlight .speaker-counter{font-size:8px}.player-card .kick-btn{padding:4px;font-size:9px}.kick-choices{flex-wrap:wrap}.secret-report{bottom:15px}}
@media(prefers-reduced-motion:reduce){.stage-fog,.stage-weather,.cinematic-scratches,.reveal-eye-beam,.stage-scene:after{animation:none!important}}
body.reduce-motion .stage-fog,body.reduce-motion .stage-weather,body.reduce-motion .cinematic-scratches,body.reduce-motion .reveal-eye-beam,body.reduce-motion .stage-scene:after{animation:none!important}

/* V3 / TRANSMISSION INTERRUPTION & REPLAY */
.disconnect-alert{position:relative;display:flex;gap:20px;align-items:center;padding:21px 25px;margin:0 0 20px;border:1px solid #a34d48;background:linear-gradient(100deg,#251216,#150e11 55%,#21181b);box-shadow:inset 0 0 42px #6b151c24,0 8px 30px #0008;overflow:hidden;animation:reconnectAppear .36s ease-out}
.disconnect-alert.hidden{display:none!important}.disconnect-alert:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#c94b4d44 4px)}
.disconnect-icon{font:50px var(--serif);color:#ad494d;text-shadow:0 0 18px #bd2228;animation:reconnectBlink 2s infinite}
.disconnect-content{min-width:0;flex:1}.disconnect-content>span{font:10px var(--mono);letter-spacing:2.3px;color:#e29893}.disconnect-content>strong{display:block;margin:8px 0;font:clamp(15px,2.3vw,21px) var(--serif);color:#efdfd2}.disconnect-content strong b{color:#ef9591}.disconnect-content p{font-size:12px;color:#bba9a3;line-height:1.65;margin:2px 0 10px}
.disconnect-track{height:4px;background:#4d3033;border:1px solid #6b383b;overflow:hidden}.disconnect-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#d58d87,#ab3c43);transition:width .4s linear;box-shadow:0 0 12px #e36269}
.disconnect-count{min-width:87px;text-align:center;border-left:1px solid #643539;padding-left:20px}.disconnect-count b{display:block;font:clamp(32px,5vw,54px)/1 var(--display);color:#e49d90;font-variant-numeric:tabular-nums}.disconnect-count small{display:block;margin-top:7px;font:9px var(--mono);color:#b3827e;letter-spacing:1.3px}
.player-card.reconnect-pending{outline:1px dashed #be6a60;box-shadow:0 0 17px #af31232b;animation:reconnectGlow 2s infinite}.reconnect-player-time{display:block;margin:6px 0 0;font:10px var(--mono);color:#dc8b7c}
.rematch-offer{position:relative;margin:20px 0;border:1px solid #70514c;background:radial-gradient(circle at 85% 10%,#6d2c2d28,transparent 60%),#171313;padding:24px 26px;box-shadow:inset 0 1px #ffffff06}.rematch-offer h3{margin:14px 0 10px;color:#e9dbc1;font:clamp(22px,3.5vw,31px) var(--serif)}.rematch-offer p{color:#b9aca0;line-height:1.7;font-size:13px;max-width:520px}.rematch-offer button{margin-top:12px}.past-rounds{margin:20px 0;padding:16px;border:1px solid #55483e;background:#1a1715}.past-rounds .history-row{margin:9px 0 0;color:#bdad9b}
@keyframes reconnectBlink{50%{opacity:.35;filter:brightness(.6)}}@keyframes reconnectGlow{50%{box-shadow:0 0 21px #bf35354c}}@keyframes reconnectAppear{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.disconnect-alert{gap:10px;padding:14px}.disconnect-icon{font-size:29px}.disconnect-content>span{letter-spacing:1px;font-size:8px}.disconnect-content p{font-size:11px}.disconnect-count{min-width:54px;padding-left:10px}.disconnect-count small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.disconnect-icon,.player-card.reconnect-pending{animation:none!important}}
body.reduce-motion .disconnect-icon,body.reduce-motion .player-card.reconnect-pending{animation:none!important}

/* V4 / VOICE DIRECTOR - dark radio transmission, independent audio controls */
.voice-btn{border:1px solid #80554e!important;background:linear-gradient(125deg,#26191b,#16191a)!important;color:#dba9a3!important}
.voice-btn.voice-active{border-color:#bc7e6e!important;box-shadow:0 0 17px #b5524735!important;color:#ffdfca!important}
.voice-mark{display:flex;align-items:center;justify-content:center;gap:4px;color:#b54c49;margin:15px 0 20px;height:60px}
.voice-mark span{font:44px var(--serif);margin-right:17px;color:#db9b84;text-shadow:0 0 27px #a33a3855}
.voice-mark i{width:3px;background:#b36458;height:20px;border-radius:10px;box-shadow:0 0 14px #e78b816e;animation:voiceEqualizer 1.25s infinite alternate}
.voice-mark i:nth-child(3n){height:36px;animation-delay:.3s}.voice-mark i:nth-child(2n){height:12px;animation-delay:.6s}
.voice-modal{max-width:545px!important;max-height:min(92vh,920px);overflow-y:auto}
.voice-master{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(125deg,#291c1d,#141817);border:1px solid #6d4b44;padding:17px 15px;margin:23px 0 16px}
.voice-master strong{display:block;font-size:14px;color:#eee0cf}.voice-master small{display:block;margin-top:5px;color:#b69c96;font-size:10px}
.voice-master button{white-space:nowrap;font-size:11px!important;padding:0 12px!important;min-height:41px!important}
.voice-master button.on{background:#45413b!important;color:#f2e9d9!important}
.voice-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:15px 0;border-bottom:1px solid #51423e}
.voice-controls label{display:flex;flex-direction:column;gap:8px;color:#cfb9ac;font-size:11px;letter-spacing:.15px}
.voice-controls label:first-child{grid-column:span 2}
.voice-controls label b{display:inline;color:#f4dac4;font:11px var(--mono)}
.voice-controls select{height:39px;width:100%;background:#181717;color:#ede0d1;border:1px solid #675449;padding:0 10px;font-size:11px}
.voice-controls input[type=range]{width:100%;height:22px;cursor:pointer;accent-color:#bd5147}
.private-voice-option{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:12px;margin:16px 0!important;cursor:pointer!important}
.private-voice-option input{width:17px!important;height:17px!important;flex-shrink:0;margin:3px 0 0!important;accent-color:#bf6a59}
.private-voice-option strong{display:block;color:#edd8c7;font-size:12px}.private-voice-option small{display:block;color:#ac958c;font-size:10px;line-height:1.65;margin-top:4px}
.voice-status{margin:9px 0 16px;color:#a8ada7;font-size:10px;line-height:1.5}
.voice-footer{display:flex;align-items:center;gap:13px;justify-content:space-between}
.voice-footer button{font-size:11px;white-space:nowrap}.voice-footer small{font-size:10px;color:#aa9990;line-height:1.6}
.narrator-stage-control{display:flex;justify-content:space-between;align-items:center;margin:0 14px 2px;min-height:24px}
.narrator-stage-control button{border:0;background:transparent;color:#c2a297;font:10px var(--mono);cursor:pointer;padding:4px 7px;text-align:left}
.narrator-stage-control button:hover{color:#f5d6b5}
.narrator-stage-control span{font:8px var(--mono);letter-spacing:1px;color:#68625e}
.narrator-hud{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));display:flex;gap:14px;align-items:center;z-index:250;border:1px solid #7a5b4d;background:linear-gradient(135deg,#211919ed,#0d1012f5);box-shadow:0 10px 55px #000b,0 0 35px #792d2d24,inset 0 1px #ffffff0b;padding:13px 16px;animation:narratorSlide .35s ease-out;backdrop-filter:blur(12px)}
.narrator-hud.hidden{display:none!important}.narrator-hud[data-private=true]{border-color:#6c779c}
.narrator-hud-seal{width:39px;height:39px;flex-shrink:0;border:1px solid #8d5d51;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 14px #ab514429}
.narrator-hud-seal span{font:20px var(--display);color:#bb8976}
.narrator-hud-content{flex:1;min-width:0}.narrator-hud-content>span{display:block;color:#b18f7c;font:9px var(--mono);letter-spacing:2px}
.narrator-hud-content strong{display:block;margin-top:6px;color:#ead5bd;font:clamp(12px,2vw,18px) var(--serif);font-weight:700;line-height:1.5}
.narrator-hud>button{align-self:flex-start;flex-shrink:0;color:#b5a099;border:0;background:transparent;cursor:pointer;font-size:24px;line-height:1}
.narrator-bars{display:flex;align-items:end;gap:3px;margin-top:7px;height:8px}
.narrator-bars i{display:block;width:3px;height:3px;background:#bf6653;opacity:.6}
.narrator-hud.speaking .narrator-bars i{animation:voiceEqualizer .4s ease-in-out infinite alternate}
.narrator-hud.speaking .narrator-bars i:nth-child(2n){animation-delay:.2s}.narrator-hud.speaking .narrator-bars i:nth-child(3n){animation-delay:.12s}
@keyframes voiceEqualizer{from{height:3px;opacity:.3}to{height:10px;opacity:1}}
@keyframes narratorSlide{from{transform:translate(-50%,15px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(max-width:600px){.voice-modal{max-height:90vh}.voice-master{flex-direction:column;align-items:stretch}.voice-controls{grid-template-columns:1fr 1fr;gap:12px}.voice-footer{align-items:start;flex-direction:column}.narrator-hud{bottom:10px;padding:11px;gap:10px}.narrator-hud-content>span{font-size:7px;letter-spacing:1px}.narrator-hud-seal{width:32px;height:32px}.narrator-hud-seal span{font-size:17px}}
@media(prefers-reduced-motion:reduce){.narrator-hud,.narrator-hud.speaking .narrator-bars i,.voice-mark i{animation:none!important}}
body.reduce-motion .narrator-hud,body.reduce-motion .narrator-bars i,body.reduce-motion .voice-mark i{animation:none!important}

/* V6 원본 사용자 제공 이미지 : 직업 소개/개인 공개/로딩 화면 */
.boot-screen{position:fixed;inset:0;z-index:300;background:#050506;display:flex;align-items:end;justify-content:center;
 transition:opacity .52s ease,visibility .52s ease;overflow:hidden}
.boot-screen.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.boot-scene{position:absolute;inset:0;background-image:linear-gradient(180deg,#0002 0%,#0001 54%,#000b 95%),url('/assets/logo.jpg');
 background-size:cover;background-repeat:no-repeat;background-position:center;animation:bootZoom 9s ease-out both}
.boot-footer{z-index:2;position:relative;width:min(550px,85vw);display:grid;grid-template-columns:1fr auto;gap:8px 16px;
 margin:0 0 max(5vh,25px);text-align:left;align-items:center;color:#dbc7ba;text-shadow:0 2px 5px #000;font:11px var(--sans)}
.boot-footer>span:first-child{grid-column:1/-1;letter-spacing:1.8px;color:#e6c6bf}
.boot-track{grid-column:1/-1;width:100%;height:5px;background:#180b0d;border:1px solid #70373c;overflow:hidden}
.boot-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#41171c,#fb5656,#82212c);box-shadow:0 0 15px #f1444a;animation:bootActualProgress var(--boot-duration, 3000ms) linear both}
.boot-footer #bootStatus{color:#e2d1c9;font-size:11px}
#skipBoot{border:1px solid #ad6262;padding:6px 11px;background:#1a0b0dbf;color:#f0d7d3;font-size:11px}
#skipBoot:hover{background:#6b242a}
@keyframes bootLoading{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes bootZoom{from{transform:scale(1.055)}to{transform:scale(1)}}
.role-gallery{max-width:1250px;margin:40px auto 28px;padding:0 28px}
.role-gallery-title{text-align:center;padding:18px 0 21px}
.role-gallery-title span{color:#c8837d;letter-spacing:3px;font:10px var(--mono)}
.role-gallery-title h2{font:clamp(26px,3vw,38px) var(--serif);color:#e6dac6;margin:9px 0}
.role-gallery-title h2 em{font-style:normal;color:#c64247}
.role-gallery-title p{font-size:12px;color:#8f908a}
.role-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.role-card{height:330px;position:relative;overflow:hidden;border:1px solid #593b38;background:#0c0d0f;isolation:isolate;box-shadow:0 14px 28px #0008}
.role-card:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 10%,#0c0b0a33 48%,#09090af7 100%);z-index:1}
.role-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(.32) saturate(.73) brightness(.8);transition:transform .4s ease,filter .4s ease}
.role-card:hover img{transform:scale(1.04);filter:grayscale(.1) saturate(.8) brightness(.95)}
.role-card>div{position:absolute;inset:auto 16px 18px;z-index:2}
.role-card small{font:9px var(--mono);color:#da8580;letter-spacing:2px}
.role-card h3{margin:5px 0 7px;color:#f1e5d4;font:27px var(--serif)}
.role-card p{color:#c0bbb3;font-size:11px;line-height:1.6;margin:0}
.role-card.role-detective{border-color:#38536c}.role-card.role-doctor{border-color:#77746a}
#roleReveal .reveal-role-art{position:absolute;inset:0;z-index:0;opacity:.47;background-position:center 32%;background-size:cover;
 background-repeat:no-repeat;filter:saturate(.85) brightness(.61)}
#roleReveal.role-mafia .reveal-role-art{background-image:linear-gradient(180deg,#1004084d,#030405a8 88%),url('/assets/mafia.jpg')}
#roleReveal.role-detective .reveal-role-art{background-image:linear-gradient(180deg,#06121b55,#030405bf 88%),url('/assets/detective.jpg')}
#roleReveal.role-doctor .reveal-role-art{background-image:linear-gradient(180deg,#12161a55,#030405be 88%),url('/assets/doctor.jpg')}
#roleReveal:is(.role-mafia,.role-detective,.role-doctor) .reveal-figure{display:none}
#roleReveal .reveal-content{background:linear-gradient(transparent,#030405e0,#030405ce);text-shadow:0 2px 8px #000}
@media(max-width:650px){
 .role-gallery{padding:0 16px}.role-gallery-grid{grid-template-columns:1fr;gap:12px}
 .role-card{height:220px}.role-card img{object-position:center 30%}
 .boot-scene{background-position:53% center}.boot-footer{margin-bottom:max(4vh,18px)}
}
@media(prefers-reduced-motion:reduce){.boot-scene,.boot-track i,.role-card img{animation:none!important;transition:none!important}}

/* V7 · 시네마틱 방 관리, 즉각 반응하는 홈 */
@keyframes bootActualProgress{from{width:0}to{width:100%}}
.boot-footer{grid-template-columns:1fr!important}
.room-topline{flex-wrap:wrap;gap:12px}
.room-delete{color:#f4a9a7!important;border:1px solid #a34b50!important;padding:7px 14px!important;background:#2b1114!important;border-radius:4px}
.room-delete:hover{background:#87252c!important;color:#fff!important}
button,.room-card,.feature,.role-card,.hero-cta .button{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .hero-cta .button:hover,.nav-auth:hover,.room-delete:hover{transform:translateY(-3px);box-shadow:0 12px 27px #b71e263f}
 .feature:hover,.room-card:hover{transform:translateY(-4px);box-shadow:0 14px 35px #0009}
 .role-card:hover img{transform:scale(1.055);filter:contrast(1.12) saturate(1.1)}
 .hero-art{transform:translate3d(calc(var(--hero-x,0)*1px),calc(var(--hero-y,0)*1px),0);transition:transform .35s ease-out}
}
/* 형벌 장면은 암시적 연출만 사용하며 구체적인 폭력 묘사가 없습니다. */
.trial-stage{position:fixed;inset:0;z-index:81;overflow-y:auto;isolation:isolate;display:flex;align-items:center;flex-direction:column;
 background:#06070a;color:#f1e7da;padding:20px 28px 26px;overscroll-behavior:contain}
.trial-stage.hidden{display:none!important}
.trial-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:
 radial-gradient(ellipse 35% 35% at 50% 25%,#8f423b70,transparent 72%),
 linear-gradient(90deg,#080607,#181114 50%,#080607);pointer-events:none}
.trial-backdrop{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,#a8846d08 0 2px,transparent 2px 30px);box-shadow:inset 0 0 180px #000}
.trial-upper{width:min(100%,1200px);display:flex;justify-content:space-between;align-items:center;gap:16px;font:10px var(--mono);letter-spacing:3px;color:#c5a299;z-index:2}
.trial-upper button{color:#efc4b7;background:#2b171a;border:1px solid #9f5556;padding:10px 14px;cursor:pointer}
.trial-spotlight{position:absolute;top:0;left:50%;width:clamp(300px,46vw,700px);height:72%;transform:translateX(-50%);background:linear-gradient(180deg,#edc39a5b,#aa6d5970 70%,transparent);clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);filter:blur(17px);pointer-events:none}
.trial-figure{position:relative;z-index:2;width:min(340px,57vw);height:clamp(220px,36vh,335px);margin:12px auto 0;filter:drop-shadow(0 8px 30px #000a)}
.trial-head{position:absolute;z-index:3;top:5%;left:36%;width:28%;height:32%;border-radius:46%;background:#010203;box-shadow:0 0 0 2px #4b1a1d}
.trial-head i{position:absolute;top:46%;width:10%;height:5%;background:#ff3141;box-shadow:0 0 13px 8px #ed172b,0 0 25px 14px #e6132880;border-radius:50%}
.trial-head i:first-child{left:25%}.trial-head i:last-child{right:25%}
.trial-torso{position:absolute;left:18%;top:34%;width:64%;height:69%;clip-path:polygon(0 23%,20% 5%,45% 0,55% 0,80% 5%,100% 23%,100% 100%,0 100%);background:linear-gradient(90deg,#000,#050608 45%,#010203 100%)}
.trial-chain{position:absolute;top:50%;width:25%;z-index:4;font:clamp(50px,7vw,85px) Georgia;color:#9a9190;text-shadow:0 4px 10px #000;opacity:.83}
.trial-chain.left{left:8%;transform:rotate(-31deg)}.trial-chain.right{right:8%;transform:rotate(31deg)}
.trial-body-tag{position:absolute;z-index:6;top:63%;left:50%;transform:translateX(-50%);min-width:130px;max-width:85%;padding:10px 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#281012;border:1px solid #bd645c;box-shadow:0 0 20px #b3353b7a;text-align:center;font:700 clamp(15px,2vw,22px) var(--serif)}
.trial-bottom{z-index:3;width:min(780px,100%);text-align:center;margin:0 auto;display:flex;align-items:center;flex-direction:column;gap:11px}
.trial-bottom>span{color:#ce6b67;font:10px var(--mono);letter-spacing:3px}.trial-bottom h2{font:700 clamp(35px,5.4vw,70px) var(--serif);margin:0;color:#f2e2d0;text-shadow:0 4px 22px #aa42488f}.trial-bottom>p{color:#dbbbac;font-size:clamp(12px,1.6vw,17px);line-height:1.6;margin:0}
.trial-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(590px,100%);margin:12px auto 0}
.trial-choice button{border:1px solid #6c6660;background:#171a1e;color:#eee3d5;padding:10px 14px;display:flex;gap:4px;flex-direction:column;align-items:center;border-radius:7px;cursor:pointer;font:700 20px var(--serif)}
.trial-choice button span{font-size:clamp(42px,6vw,64px);line-height:1.2;filter:drop-shadow(0 3px 6px #0009)}.trial-choice button small{font:9px var(--mono);letter-spacing:2px;color:#999}
.trial-choice .trial-spare{border-color:#4b8d66;background:linear-gradient(#192820,#121715)}.trial-choice .trial-eliminate{border-color:#ae3d4b;background:linear-gradient(#32161e,#161015)}
.trial-choice button:hover,.trial-choice button.chosen{transform:translateY(-5px);box-shadow:0 0 25px #da6b6b48;outline:2px solid #e1c5a6}
.trial-argument{width:min(590px,100%);margin:8px auto 0}.trial-argument form{display:flex;gap:9px;flex-wrap:wrap}.trial-argument input{flex:1;min-width:150px;background:#191618;border:1px solid #8a494d;padding:13px;color:#f5e7de}.trial-argument button{background:#902931;border:1px solid #d56b66;color:#fff;padding:10px 17px;cursor:pointer}
.trial-progress{height:6px;border:1px solid #704042;background:#120b0e;width:min(370px,85%);overflow:hidden}.trial-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#531f26,#f15858)}
.trial-stage.trial-enter .trial-figure{animation:trialEnter 1s cubic-bezier(.15,.7,.25,1) both}
@keyframes trialEnter{from{opacity:0;transform:translateY(65px) scale(.82)}to{opacity:1;transform:none}}
@media(max-height:750px){.trial-stage{padding-top:10px;gap:0}.trial-figure{height:195px;margin:0}.trial-bottom{gap:7px}.trial-choice button span{font-size:36px}}
@media(max-width:600px){.trial-stage{padding:15px 12px 20px}.trial-figure{height:clamp(210px,36vh,320px)}.trial-choice{gap:9px}.trial-choice button{font-size:16px}.trial-bottom>span{letter-spacing:1px}.trial-upper{letter-spacing:.5px;font-size:8px}.room-topline .room-delete{font-size:10px}}
@media(prefers-reduced-motion:reduce){.trial-stage.trial-enter .trial-figure{animation:none!important}}

.trial-dialogue{width:min(580px,100%);max-height:18vh;min-height:35px;overflow:auto;border:1px solid #5f3434;background:#0a090bcf;padding:8px 14px;text-align:left;font-size:clamp(11px,1.2vw,14px);line-height:1.5}
.trial-dialogue p{margin:4px 0;color:#eee0d5}.trial-dialogue b{color:#e5a4a3}.trial-dialogue .trial-empty{color:#988987;text-align:center}