:root{--bg: #14211f;--bg2: #1b2c29;--panel: rgba(255, 255, 255, .06);--line: rgba(255, 255, 255, .12);--text: #eef2ee;--muted: #a9b8b2;--card: #efe4c8;--card-edge: #d4c49e;--card-text: #2b2417;--green: #3fae6a;--green-d: #1f6e40;--assassin: #101312;--tan: #c9b48a;--accent: #f2c14e;--danger: #e2574c;--radius: 12px}*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;background:radial-gradient(1200px 600px at 20% -10%,#24403a 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#2a2f22 0%,transparent 60%),var(--bg);color:var(--text);font-family:Zen Kaku Gothic New,system-ui,sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit;color:inherit}#app{max-width:1180px;margin:0 auto;padding:16px 16px 48px}.logo{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.04em;font-size:1.05rem}.logo b{color:var(--green);margin-left:4px}.logo-mark{color:var(--accent)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.label{margin:0 0 10px;font-size:.82rem;color:var(--muted);font-weight:700;letter-spacing:.06em}.label small{font-weight:500;margin-left:6px;letter-spacing:0}.hint{color:var(--muted);font-size:.85rem;margin:10px 0 0;line-height:1.6}.err{color:#ffb4ab;background:#e2574c26;border-radius:8px;padding:8px 12px;margin:10px 0 0;font-size:.9rem}.btn{border:1px solid var(--line);background:#ffffff17;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700;transition:background .15s,transform .1s}.btn:hover:not(:disabled){background:#ffffff29}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--green);border-color:var(--green);color:#06150c}.btn.primary:hover:not(:disabled){background:#52c27d}.btn.ghost{background:transparent}.btn.big{width:100%;padding:14px;font-size:1.05rem}.btn.small{padding:6px 12px;font-size:.85rem}input,select{background:#00000040;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}input:focus,select:focus{outline:2px solid var(--green);outline-offset:1px}select option{color:#111}.dot{display:inline-block;width:.8em;height:.8em;border-radius:3px;vertical-align:-1px;margin-right:2px}.dot.g{background:var(--green)}.dot.a{background:var(--assassin);border:1px solid #555}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.topbar .logo{margin-right:auto}.center-msg{min-height:70vh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted)}.spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#0d1715;border:1px solid var(--line);padding:10px 18px;border-radius:999px;font-weight:700;transition:.25s;z-index:50;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 10px 30px #0006}#toast.show{opacity:1;transform:translate(-50%)}.home{max-width:560px;margin:0 auto}.hero{padding:32px 0 20px}.hero h1{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.35;margin:22px 0 12px;font-weight:900}.lead{color:var(--muted);line-height:1.8;margin:0}.home-form{display:grid;gap:12px}.field{display:grid;gap:6px;font-size:.85rem;color:var(--muted);font-weight:700}.field input{font-size:1rem;color:var(--text)}.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:.2em;font-family:Oswald,sans-serif}.invite{margin:0;text-align:center}.invite b{font-family:Oswald,sans-serif;letter-spacing:.15em;color:var(--accent)}.rules summary{cursor:pointer;font-weight:700}.rules ol{padding-left:1.3em;line-height:1.8;margin:12px 0 0}.rules li{margin-bottom:6px}.rules .note{color:var(--muted);font-size:.85rem;margin:8px 0 0}.room{max-width:620px;margin:0 auto}.code-big{font-family:Oswald,sans-serif;font-size:3rem;letter-spacing:.3em;color:var(--accent);line-height:1;margin-bottom:14px}.share{display:flex;gap:8px}.share input{flex:1;font-size:.85rem;color:var(--muted)}.players{display:grid;gap:10px}.player{display:flex;align-items:center;gap:10px}.player.waiting b{color:var(--muted);font-weight:500}.badge{font-size:.72rem;padding:3px 8px;border-radius:999px;background:#3fae6a33;color:#8fe0ad;font-weight:700}.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}.settings label span{font-size:.92rem}.settings select{min-width:120px}.center-note{text-align:center;color:var(--muted)}.conn{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700}.conn i{width:9px;height:9px;border-radius:50%;background:var(--danger)}.conn.on i{background:var(--green);box-shadow:0 0 8px var(--green)}.room-code{font-family:Oswald,sans-serif;letter-spacing:.1em;color:var(--muted);font-size:.85rem}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.status{padding:4px 2px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-height:64px}.status-text{margin:0;font-weight:900;font-size:1.1rem;flex:1 1 260px}.status.sudden .status-text{color:#ffb4ab}.status.won .status-text{color:#8fe0ad}.status.lost .status-text{color:#ffb4ab}.clue-show{display:flex;align-items:baseline;gap:10px;background:var(--card);color:var(--card-text);border-radius:10px;padding:8px 16px;box-shadow:0 6px 18px #0000004d;animation:pop .35s ease}.clue-from{font-size:.72rem;font-weight:700;color:#7a6a48}.clue-word{font-size:1.4rem;font-weight:900}.clue-num{font-family:Oswald,sans-serif;font-size:1.6rem;color:var(--green-d)}@keyframes pop{0%{transform:scale(.85);opacity:0}}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px;perspective:800px}.card{position:relative;aspect-ratio:1.55;border:none;border-radius:9px;padding:6px;background:linear-gradient(180deg,#f6edd5,var(--card));color:var(--card-text);box-shadow:0 2px 0 var(--card-edge),0 6px 14px #00000059;display:grid;place-items:center;overflow:hidden;cursor:default;transition:transform .15s,box-shadow .15s}.card:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid rgba(120,96,50,.25);border-radius:6px;pointer-events:none}.card .word{position:relative;font-weight:900;font-size:clamp(.72rem,1.9vw,1.12rem);line-height:1.2;text-align:center;word-break:break-all;z-index:1}.card.can{cursor:pointer}.card.can:hover{transform:translateY(-3px);box-shadow:0 2px 0 var(--card-edge),0 12px 20px #0006}.card.selected{outline:3px solid var(--accent);outline-offset:2px;transform:translateY(-3px)}.card.pointed{outline:3px dashed #7fc8ff;outline-offset:2px}.point-tag{position:absolute;top:4px;right:4px;font-size:.62rem;background:#7fc8ff;color:#062033;padding:1px 6px;border-radius:6px;font-weight:700;z-index:3}.card.key-g{box-shadow:inset 0 -6px 0 var(--green),0 2px 0 var(--card-edge),0 6px 14px #00000059}.card.key-a{box-shadow:inset 0 -6px 0 var(--assassin),0 2px 0 var(--card-edge),0 6px 14px #00000059}.card.key-g:after,.card.key-a:after{content:"";position:absolute;left:7px;top:7px;width:9px;height:9px;border-radius:2px}.card.key-g:after{background:var(--green)}.card.key-a:after{background:var(--assassin)}.bt{position:absolute;left:0;right:0;height:30%;display:grid;place-items:center;font-size:.62rem;font-weight:700;letter-spacing:.1em;color:#4a3d22;z-index:2;background:repeating-linear-gradient(135deg,#c9b48a 0,#c9b48a 6px,#bea87c 6px,#bea87c 12px)}.bt.top{top:0}.bt.bottom{bottom:0}.card.byst-both{background:repeating-linear-gradient(135deg,#c9b48a 0,#c9b48a 8px,#bea87c 8px,#bea87c 16px)}.card.byst-both .bt{display:none}.card.byst-both .word{opacity:.55}.cover{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:2px;z-index:2}.cover svg{width:36%;max-width:46px;fill:currentColor}.cover .word{font-size:clamp(.6rem,1.3vw,.78rem);opacity:.8}.cover.agent{background:linear-gradient(160deg,#4cc07b,var(--green-d));color:#eafff1}.cover.skull{background:radial-gradient(circle at 50% 30%,#333 0%,var(--assassin) 70%);color:#f0e6d0}.card.found,.card.assassin{box-shadow:0 6px 14px #00000059}.card.found:after,.card.assassin:after{display:none}.card.flip{animation:flip .6s ease}@keyframes flip{0%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.reveal{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.rv{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff8}.rv:first-child{left:6px;top:6px}.rv:last-child{right:6px;bottom:6px}.rv.g{background:var(--green)}.rv.a{background:var(--assassin)}.rv.n{background:var(--tan)}.ended .card.key-g,.ended .card.key-a{box-shadow:0 2px 0 var(--card-edge),0 6px 14px #00000059}.ended .card:after{display:none}.action .label{margin-bottom:12px}.clue-form{display:grid;gap:10px}.clue-form input{font-size:1.1rem;font-weight:700}.nums{display:flex;flex-wrap:wrap;gap:6px}.num{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#ffffff0f;cursor:pointer;font-family:Oswald,sans-serif;font-size:1.1rem}.num.on{background:var(--accent);color:#2a1f00;border-color:var(--accent)}.row{display:flex;flex-wrap:wrap;gap:8px}.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#f2c14e1f;border:1px solid rgba(242,193,78,.35);border-radius:10px;padding:10px 12px;margin-bottom:10px}.confirm span{flex:1 1 160px}.action.waiting p{margin:0;color:var(--muted)}.action.sudden{border-color:#e2574c80;background:#e2574c14}.result{text-align:center}.result-title{font-family:Oswald,sans-serif;font-size:2rem;letter-spacing:.12em;margin:0 0 6px}.result.won .result-title{color:#8fe0ad}.result.lost .result-title{color:#ffb4ab}.result .row{justify-content:center;margin-top:12px}.counters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.counter span{display:block;font-size:.72rem;color:var(--muted);font-weight:700}.counter b{font-family:Oswald,sans-serif;font-size:1.7rem}.counter small{font-size:.9rem;color:var(--muted)}.tokens{display:flex;flex-wrap:wrap;gap:6px}.tok{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#d9a21f);box-shadow:0 2px 4px #0006}.tok.used{background:#ffffff14;box-shadow:inset 0 0 0 1px var(--line)}.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.label-row .label{margin:0}.toggle{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);cursor:pointer}.toggle input{accent-color:var(--green)}.keycard{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px;background:#2b2b27;border-radius:10px;border:3px solid #45443d;max-width:220px;margin:0 auto}.kc{aspect-ratio:1.4;border-radius:3px;background:var(--tan);position:relative}.kc.g{background:var(--green)}.kc.a{background:var(--assassin);box-shadow:inset 0 0 0 1px #555}.kc.done:after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:900}.kc.nb{opacity:.45}.kc.hit{outline:2px solid var(--danger)}.keys-both{display:grid;grid-template-columns:1fr 1fr;gap:10px}.keys-both small{display:block;text-align:center;color:var(--muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keys-both .keycard{padding:6px;gap:3px}.log ol{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:.82rem;line-height:1.6}.log li{padding:3px 0;border-bottom:1px dashed var(--line)}.log li.sys{color:var(--muted)}.log li.g{color:#8fe0ad}.log li.n{color:#e3d2a8}.log li.a{color:#ffb4ab}.lc{background:var(--card);color:var(--card-text);padding:0 6px;border-radius:4px;font-weight:900}@media(max-width:860px){.layout{grid-template-columns:1fr}.side-col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.side-col .counters,.side-col .log{grid-column:1 / -1}}@media(max-width:560px){#app{padding:12px 10px 40px}.board{gap:5px}.card{border-radius:6px;padding:3px;aspect-ratio:1.15}.card:before{top:3px;right:3px;bottom:3px;left:3px}.card .word{font-size:clamp(.62rem,3.3vw,.9rem)}.card.key-g:after,.card.key-a:after{left:4px;top:4px;width:6px;height:6px}.bt{font-size:.5rem;letter-spacing:0}.counters{grid-template-columns:repeat(4,1fr);gap:6px}.counter b{font-size:1.3rem}.counter span{font-size:.62rem}.side-col{grid-template-columns:1fr}.room-code{display:none}.code-big{font-size:2.4rem}.settings label{flex-wrap:wrap}.num{width:38px;height:38px}}