:root{--ink:#1b2838;--muted:#6b7a8a;--accent:#1a73e8;--danger:#d32f2f;--safe:#2e7d32;--paper:#fff;--bg:#eef2f7;--line:#dce1e8;--card:#ffffff;--stealth-bg:#e8ecf0;--stealth-text:#2c3e50}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--bg);min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer;border:0}
.hidden{display:none!important}
.home{min-height:100vh;display:grid;place-content:center;gap:24px;padding:24px}
.brand{text-align:center}
.brand span{font-size:48px}
.brand h1{font-size:34px;margin:4px;color:var(--ink)}
.brand p{color:var(--muted);font-size:14px}
.card{width:min(420px,92vw);padding:24px;border:1px solid var(--line);background:var(--card);border-radius:18px;box-shadow:0 4px 20px #00000012}
label{display:grid;gap:6px;margin:8px 0;font-weight:600;font-size:14px}
input,select{border:1px solid var(--line);background:#fff;padding:11px 13px;border-radius:10px;outline:none;font-size:15px}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #1a73e820}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;font-weight:500;gap:6px;margin:6px 0}
.check input{width:17px;height:17px;margin:0}
.primary{background:var(--accent);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;font-size:15px;width:100%;margin:8px 0;transition:opacity .15s}
.primary:hover{opacity:.9}
.primary:disabled{background:#b0bec5;cursor:default}
.join{display:grid;grid-template-columns:1fr 80px;gap:8px;margin-top:8px}
.join button,.chat button{background:var(--ink);color:white;border-radius:10px;padding:11px}

/* Game */
.game{height:100vh;padding:12px;overflow:hidden}
.game header{height:54px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px #00000008}
.game header>div:first-child{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.game header button{padding:6px 10px;border-radius:8px;font-size:13px;background:#f0f2f5;white-space:nowrap}
.timer{justify-self:end;font-size:22px;font-weight:800;color:var(--danger);min-width:40px;text-align:right}
#status{text-align:center;font-weight:700;font-size:14px;flex:1}
.layout{display:grid;grid-template-columns:190px 1fr 260px;gap:10px;height:calc(100vh - 76px);padding-top:10px}
.players,.board,.chat{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.players{padding:12px}
.players h3{margin:4px 0 10px;font-size:14px;color:var(--muted)}
.player{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:6px;padding:6px 2px;font-size:14px;border-radius:8px;margin:2px 0}
.player.dead{opacity:.4;text-decoration:line-through}
.player .score{color:var(--muted);font-size:13px}
.player .avatar{width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.players .primary{width:100%;margin-top:10px;font-size:13px;padding:10px}
.rename-btn{display:block;width:100%;margin-top:8px;padding:7px;background:#f0f2f5;border:none;border-radius:8px;cursor:pointer;font-size:13px;text-align:center}
.rename-btn:hover{background:#e5e8ec}

/* Board */
.board{display:flex;flex-direction:column;padding:12px;min-width:0}
#roundInfo{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px;gap:8px}
#phaseText{font-weight:800;font-size:16px}
#rangeDisplay{font-weight:700;font-size:15px;color:var(--accent);background:#e8f0fe;padding:4px 12px;border-radius:8px;white-space:nowrap}
#gameArea{flex:1;min-height:0;overflow:auto}
.lobby-wait{display:grid;place-content:center;text-align:center;height:100%;gap:8px}
.lobby-wait p{font-size:16px;color:var(--muted)}
.lobby-wait .hint{font-size:13px;color:#999}
#playArea{display:grid;grid-template-rows:auto 1fr;gap:8px;height:100%}
#guessPanel{text-align:center;padding:12px;background:#f8f9fb;border-radius:12px;min-height:100px;display:grid;place-content:center;gap:6px}
#yourTurn{color:var(--accent);font-weight:800;font-size:17px}
#notYourTurn{color:var(--muted);font-size:15px}
#guessForm{display:grid;grid-template-columns:1fr 80px;gap:8px;max-width:300px;margin:6px auto;width:100%}
#guessForm input{font-size:18px;font-weight:700;text-align:center}
#guessForm button{background:var(--accent);color:#fff;border-radius:10px;font-weight:700;padding:11px}
#resultArea{display:grid;place-content:center;gap:10px;padding:10px}
#resultText{font-size:18px;font-weight:700}
#resultText.win{color:var(--safe)}
#resultText.lose{color:var(--danger)}
#playAgain{background:var(--accent);color:#fff;border-radius:10px;padding:10px 24px;font-weight:700;margin:8px auto}

/* Timeline */
.timeline{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.timeline h4{font-size:13px;color:var(--muted);padding:6px 10px;margin:0;background:#f8f9fb;border-bottom:1px solid var(--line)}
#logs{overflow-y:auto;flex:1;min-height:0;max-height:250px;padding:4px 6px}
.log{font-size:13px;padding:4px 6px;margin:1px 0;border-radius:6px;display:flex;justify-content:space-between}
.log.mine{background:#ffebee;color:var(--danger)}
.log.safe{background:#e8f5e9;color:var(--safe)}
.log .num{font-weight:700}
.log .actor{color:var(--muted)}

/* Chat */
.chat{display:flex;flex-direction:column}
.chat #messages{flex:1;overflow:auto;padding:10px}
.msg{margin:4px 0;padding:7px 10px;background:#f0f2f5;border-radius:10px;overflow-wrap:anywhere;font-size:14px}
.msg.system{background:#fff8e1;color:#8a6d00;text-align:center;font-size:13px}
.chat form{display:grid;grid-template-columns:1fr 55px;gap:5px;padding:8px;border-top:1px solid var(--line)}
.chat input{min-width:0;font-size:14px;padding:8px 10px}

/* Boss key */
.boss{position:fixed;z-index:99;inset:0;background:#f0f2f5;color:#222;padding:24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
.sheet{max-width:780px;height:100%;margin:auto;background:#fff;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden}
.sheet .right-panel{display:none}
.sheet .main-panel{flex:1;padding:20px 28px;overflow:auto}
.sheet h2{font-size:17px;margin:0;display:flex;justify-content:space-between;align-items:center}
.sheet .date{font-size:12px;font-weight:400;color:#888}
.sheet .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.sheet .card{padding:10px 14px;background:#f8f9fa;border-radius:10px}
.sheet .card h4{margin:0 0 4px;font-size:13px}
.sheet .bar{height:5px;background:#e9ecef;border-radius:3px;margin:4px 0}
.sheet .bar .fill{height:100%;border-radius:3px;background:var(--accent)}
.sheet .card:nth-child(2) .fill{background:#f59f00}
.sheet .card:nth-child(3) .fill{background:#d32f2f}
.sheet .card:nth-child(4) .fill{background:#7048e8}
.sheet .card span{font-size:11px;color:#888}
.sheet .footer{margin-top:8px;padding:8px 28px;border-top:1px solid #e9ecef;display:flex;justify-content:space-between;font-size:12px;color:#888}
.sheet kbd{border:1px solid #ccc;border-radius:4px;padding:2px 6px;background:#f8f9fa;font-size:11px}
.boss>button{position:fixed;right:8px;bottom:8px;color:#aaa;background:transparent;font-size:22px}
.boss .right-panel{display:none}

#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#1b2838;color:#fff;padding:10px 18px;border-radius:99px;opacity:0;pointer-events:none;transition:.2s;z-index:200;font-size:14px}
#toast.show{opacity:1}

.auth-bar{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#888}
.auth-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;padding:0}
.auth-link:hover{text-decoration:underline}

/* Mobile */
@media(max-width:800px){
.game{padding:6px;height:auto;min-height:100vh}
.game header{position:sticky;top:5px;z-index:5;height:48px;gap:4px}
.game header #copy{display:none}
.game header #status{display:none}
.layout{height:auto;display:grid;grid-template-columns:1fr;gap:7px;padding-top:7px}
.board{order:1;min-height:55vh}
.players{order:2}
.players #players{display:grid;grid-template-columns:repeat(2,1fr)}
.chat{order:3;height:240px}
#playArea{grid-template-rows:auto 200px}
#logs{max-height:200px}
}