:root{--bg: #0b0f1a;--bg-soft: #10162a;--panel: #151c31;--panel-2: #1c2440;--border: #2a3352;--text: #e8ecf8;--muted: #8b93ab;--accent: #ffb347;--accent-dim: #b97f2d;--danger: #ff5566;--ok: #54d98c;--info: #6aa9ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#1a2342 0%,transparent 60%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}h1{font-size:1.5rem;letter-spacing:.02em}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.45rem .9rem;font-size:.95rem;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:600}button.danger{border-color:var(--danger);color:var(--danger)}input,select{background:var(--bg-soft);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.4rem .6rem;font-size:.95rem}fieldset{border:1px solid var(--border);border-radius:8px}code{background:var(--bg-soft);padding:0 .3em;border-radius:4px}.game{display:flex;flex-direction:column;gap:.6rem;max-width:1600px;margin:0 auto;padding:.6rem .8rem 5.5rem}.game-header{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.game-header .spacer{flex:1}.game-header .title{font-weight:700;font-size:1.05rem}.badge{display:inline-block;padding:.1rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--muted)}.badge.warn{color:var(--accent);border-color:var(--accent-dim)}.context-bar{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.5rem .8rem;cursor:pointer}.context-bar .line{display:flex;gap:.8rem;flex-wrap:wrap;align-items:baseline;font-size:.92rem}.context-bar .crisis-name{color:var(--accent);font-weight:600;flex-shrink:0}.context-bar .shelter-strip{flex:1 1 0;min-width:0;display:flex;justify-content:safe center;gap:.55rem;overflow-x:auto;scrollbar-width:none}.context-bar .shelter-strip::-webkit-scrollbar{display:none}.context-bar .shelter-strip>span{white-space:nowrap;flex-shrink:0}.context-bar .full{margin-top:.5rem;font-size:.9rem;color:var(--text);white-space:pre-wrap}.context-bar .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.3rem .8rem;margin-top:.5rem;font-size:.85rem}.panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}@media(max-width:900px){.panels{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.panels{grid-template-columns:repeat(2,minmax(0,1fr))}}.panel{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.55rem .65rem;min-height:120px;-webkit-user-select:none;user-select:none}.panel.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 14px #ffb34740}.panel.dead{opacity:.75;background:#12141f}.panel.offline{filter:grayscale(.6)}.panel.votable{cursor:pointer}.panel.votable:hover{border-color:var(--danger)}.panel.spotlit{border-color:var(--info);box-shadow:0 0 0 1px var(--info)}.panel .head{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.35rem}.panel .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel.dead .name{text-decoration:line-through;color:var(--muted)}.panel .num{color:var(--muted);font-size:.85rem}.panel .offline-mark{color:var(--danger);font-size:.75rem}.panel .end-turn-btn{margin-left:auto;flex:none;align-self:center;font-size:.72rem;padding:.15rem .5rem;white-space:nowrap}.panel .end-turn-btn.ready{background:var(--accent);border-color:var(--accent);color:#1a1205;font-weight:600;animation:end-turn-glow 1.4s ease-in-out infinite}@keyframes end-turn-glow{0%,to{box-shadow:0 0 6px #ffb34773}50%{box-shadow:0 0 15px #ffb347d9}}.trait{display:flex;gap:.4rem;font-size:.82rem;padding:.12rem .25rem;border-radius:5px;line-height:1.25}.trait .label{color:var(--muted);min-width:4.4rem;flex-shrink:0}.trait.hidden-trait .value{color:#39406033;background:repeating-linear-gradient(45deg,#232b47,#232b47 6px,#1a2138 6px,#1a2138 12px);border-radius:4px;flex:1;height:1em;align-self:center}.trait.mine-unrevealed .value{color:var(--muted);font-style:italic}.grade-mark{flex-shrink:0;font-size:.7rem;line-height:1;margin-right:.3rem;padding:.05rem .3rem;border-radius:3px;border:1px solid currentColor;opacity:.9}.trait.grade-1 .grade-mark{color:#d9534f}.trait.grade-2 .grade-mark{color:var(--muted)}.trait.grade-3 .grade-mark{color:#5cb85c}.trait.grade-4 .grade-mark{color:#5bc0de}.trait.grade-5 .grade-mark{color:#b06ee6}.trait.grade-6 .grade-mark{color:#e6a23c}.trait.grade-7 .grade-mark{color:#ffd257}.trait.grade-1 .value{text-decoration:line-through;text-decoration-color:#d9534f;opacity:.75}.trait .value,.ability-row .value{min-width:0;overflow-wrap:anywhere}.info-btn{margin-left:auto;flex-shrink:0;width:1.05rem;height:1.05rem;border-radius:50%;border:1px solid var(--muted);background:transparent;color:var(--muted);font-size:.7rem;line-height:1;cursor:pointer;padding:0}.info-btn:hover{border-color:var(--accent);color:var(--accent)}.trait-info{font-size:.75rem;color:var(--muted);padding:.15rem .4rem .3rem .65rem;border-left:2px solid var(--accent-dim);margin:0 .25rem .15rem}.trait.clickable{cursor:pointer;outline:1px dashed var(--accent-dim)}.trait.clickable:hover{background:#ffb3471f}.trait.revealed{background:#ffb3471a;box-shadow:inset 2px 0 0 var(--accent)}.trait.revealed .label:before{content:"✓ ";color:var(--accent)}.trait.revealed .value{color:var(--text);font-weight:500}.ability-row{display:flex;align-items:center;gap:.4rem;font-size:.82rem;line-height:1.25;padding:.12rem .25rem;margin-top:.15rem;border-radius:5px;border-top:1px dashed var(--border)}.ability-row .label{color:var(--muted);min-width:4.4rem;flex-shrink:0}.ability-row .label:before{content:"✦ ";color:var(--accent-dim)}.ability-row .value{flex:1}.ability-spent{flex-shrink:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:0 .25rem}.ability-row.ability-mine-ready{background:#6ea8ff1f;box-shadow:inset 2px 0 #6ea8ff}.ability-row.ability-mine-ready .value{color:var(--text);font-weight:500}.ability-row.ability-mine-ready .label:before{color:#6ea8ff}.ability-row.ability-mine-spent,.ability-row.ability-other-spent{opacity:.62}.ability-row.ability-mine-spent .value,.ability-row.ability-other-spent .value{color:var(--muted);text-decoration:line-through}.ability-row.ability-other-hidden .value{color:#39406033;background:repeating-linear-gradient(45deg,#232b47,#232b47 6px,#1a2138 6px,#1a2138 12px);border-radius:4px;height:1em;align-self:center}.ability-row.ability-other-revealed{background:#6ea8ff14;box-shadow:inset 2px 0 #6ea8ff}.ability-row.ability-other-revealed .value{color:var(--text)}.ability-row.clickable{cursor:pointer;outline:1px dashed #6ea8ff}.ability-row.clickable:hover{background:#6ea8ff38}.trait.target,.ability-row.target{position:relative;z-index:1;cursor:pointer;padding-top:.42rem;padding-bottom:.42rem;margin-top:-.3rem;margin-bottom:-.3rem;border-radius:6px;outline:1px solid var(--accent);background:#ffb34724}.trait.target:hover,.ability-row.target:hover{background:#ffb34742}.panel.target{cursor:pointer;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#ffb34714}.panel.target:hover{background:#ffb34729}.vote-mark,.voice-mark{margin-left:.3rem;font-size:.82em;opacity:.9;cursor:help;white-space:nowrap}.color-picker{position:relative;display:inline-flex}.color-swatch{width:20px;height:20px;padding:0;border-radius:5px;border:1px solid rgba(255,255,255,.35);cursor:pointer}.color-swatch:disabled{opacity:.28;cursor:not-allowed}.color-swatch.current{outline:2px solid #fff;outline-offset:1px}.color-menu{position:absolute;top:26px;right:0;z-index:20;display:grid;grid-template-columns:repeat(5,20px);gap:6px;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 20px #00000073}.voters{position:absolute;top:.4rem;right:-.15rem;display:flex;flex-direction:column;gap:2px;align-items:flex-end}.voters .voter{background:var(--danger);color:#fff;font-size:.7rem;padding:0 .35rem;border-radius:4px 0 0 4px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-bar{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.5rem .8rem;display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;min-height:2.4rem}.action-bar .msg{font-size:.95rem}.action-bar .timer{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;font-size:1.1rem;min-width:2.5rem;text-align:center}.plan-input{width:100%;box-sizing:border-box;resize:vertical;font:inherit;line-height:1.4;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.45rem .6rem}.plan-input:focus{outline:none;border-color:var(--accent)}.plan-input:disabled{opacity:.6}.plan-ready-btn{flex:none;font-size:.95rem;font-weight:600;padding:.4rem 1.2rem;white-space:nowrap}.plan-ready-btn.ready{background:var(--accent);border-color:var(--accent);color:#1a1205;animation:end-turn-glow 1.4s ease-in-out infinite}.mod-bar{position:fixed;left:0;right:0;bottom:0;background:#261a08f7;border-top:1px solid var(--accent-dim);padding:.45rem .9rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;z-index:21;font-size:.9rem}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050810d1;display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}.overlay .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.5rem;max-width:560px;width:100%;max-height:85vh;overflow-y:auto}.toasts{position:fixed;top:.8rem;right:.8rem;display:flex;flex-direction:column;gap:.4rem;z-index:60;max-width:320px}.toast{background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--info);border-radius:8px;padding:.5rem .7rem;font-size:.85rem}.toast.error{border-left-color:var(--danger)}.toast.dice{border-left-color:var(--accent)}.panel-menu{position:fixed;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;z-index:70;min-width:180px;overflow:hidden}.panel-menu button{display:block;width:100%;text-align:left;border:none;border-radius:0;background:transparent}.panel-menu button:hover{background:var(--bg-soft)}.chat-body{display:flex;flex-direction:column;height:100%;min-height:0;position:relative}.chat-jump{position:absolute;bottom:3.2rem;left:50%;transform:translate(-50%);z-index:5;border-radius:999px;padding:.3rem .8rem;font-size:.85rem;background:var(--panel-2);box-shadow:0 2px 8px #0006}.chat-controls{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;padding:.2rem .4rem 0}.chat-volume{width:90px;cursor:pointer;accent-color:var(--accent)}.chat-volume:disabled{opacity:.4;cursor:default}.chat-mute{background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;padding:.15rem .3rem;opacity:.75}.chat-mute:hover{opacity:1}.chat-replay{background:none;border:none;cursor:pointer;font-size:.7rem;color:var(--accent);padding:0 .2rem;opacity:.6}.chat-replay:hover{opacity:1}.chat-messages{flex:1;overflow-y:auto;padding:.5rem .6rem;display:flex;flex-direction:column;gap:.25rem}.chat-line{font-size:.85rem;line-height:1.3;word-break:break-word}.chat-line.sys{color:var(--accent);font-style:italic;font-size:.8rem;white-space:pre-wrap}.chat-error{color:var(--danger);font-size:.8rem;padding:.2rem .6rem}.chat-input{display:flex;gap:.3rem;padding:.4rem;border-top:1px solid var(--border)}.chat-input input{flex:1;min-width:0;caret-color:var(--accent)}.chat-sidebar{display:none}.chat-fab{position:fixed;right:.8rem;bottom:4.4rem;z-index:30;border-radius:999px;padding:.55rem .9rem;background:var(--panel-2);box-shadow:0 2px 10px #0006}.chat-drawer{position:fixed;left:0;right:0;bottom:0;top:30vh;background:var(--panel);border-top:1px solid var(--border);border-radius:12px 12px 0 0;z-index:40;display:flex;flex-direction:column}.chat-drawer .chat-body{flex:1}@media(min-width:1000px){.chat-sidebar{display:flex;flex-direction:column;position:fixed;right:.6rem;top:.6rem;bottom:4.2rem;width:280px;background:var(--panel);border:1px solid var(--border);border-radius:10px;z-index:15}.chat-fab,.chat-drawer{display:none}.room-shell{padding-right:300px}}
