/* ===== draw-game · AI Coding 主题 (VSCode Dark+ / Cursor 风) ===== */
:root{
  --bg:#1e1e1e;--bg2:#252526;--bg3:#2d2d30;--bg4:#333338;
  --line:#3c3c3c;--line2:#474747;
  --fg:#cccccc;--fg-dim:#858585;--fg-bright:#e8e8e8;
  --accent:#007acc;--accent2:#3794ff;
  --green:#6a9955;--green2:#4ec9b0;
  --red:#f44747;--yellow:#dcdcaa;--orange:#ce9178;--purple:#c586c0;--blue:#569cd6;
  --mono:'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--mono);font-size:13px;color:var(--fg);background:var(--bg);min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.hidden{display:none!important}
::selection{background:#264f78}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#424242;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#4f4f4f}
::-webkit-scrollbar-track{background:transparent}

/* ===== mac 风格窗口圆点 ===== */
.dots{display:inline-flex;gap:7px;align-items:center}
.dots i{width:12px;height:12px;border-radius:50%;background:#3c3c3c}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}

/* ===== IDE 骨架（游戏 & 老板键共用） ===== */
.ide{display:flex;flex-direction:column;height:100vh;background:var(--bg)}
.ide-titlebar{height:38px;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--bg3);border-bottom:1px solid var(--line);user-select:none;flex:none}
.ide-title{color:var(--fg-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ide-title b{color:var(--fg);font-weight:600}
.ide-badge{margin-left:auto;color:var(--green2);font-size:11px}
.titlebar-actions{margin-left:auto;display:flex;gap:6px}
.titlebar-actions button{padding:4px 10px;border-radius:4px;color:var(--fg-dim);font-size:12px;border:1px solid transparent}
.titlebar-actions button:hover{background:var(--bg4);color:var(--fg)}
.ide-body{flex:1;display:flex;min-height:0}
.ide-activity{width:44px;background:var(--bg3);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:8px;gap:4px;flex:none}
.ide-activity span{width:36px;height:36px;display:grid;place-items:center;font-size:16px;border-radius:5px;cursor:pointer;opacity:.5;border-left:2px solid transparent}
.ide-activity span.on,.ide-activity span:hover{opacity:1;background:var(--bg4)}
.ide-activity span.on{border-left-color:var(--accent)}
.ide-side{width:210px;background:var(--bg2);border-right:1px solid var(--line);padding:10px 8px;overflow-y:auto;flex:none;display:flex;flex-direction:column}
.ide-side-h{margin:4px 6px 8px;font-size:10px;letter-spacing:1px;color:var(--fg-dim)}
.ide-folder{margin:2px 0;padding:2px 6px;font-size:12px;color:var(--fg)}
.ide-file{margin:1px 0;padding:2px 6px 2px 18px;font-size:12px;color:var(--fg);cursor:pointer}
.ide-file:hover{background:var(--bg3)}
.ide-file.dim{color:var(--fg-dim)}
.ide-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.ide-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--line);flex:none;overflow-x:auto}
.ide-tab{padding:8px 14px;font-size:12px;color:var(--fg-dim);border-right:1px solid var(--line);white-space:nowrap;background:var(--bg2)}
.ide-tab.on{color:var(--fg-bright);background:var(--bg);border-top:1px solid var(--accent);box-shadow:inset 0 1px 0 var(--accent)}
.ide-tab-status{margin-left:auto;border-right:0;border-left:1px solid var(--line);color:var(--green2)}
.ide-tab-timer{border-right:0;border-left:1px solid var(--line);color:var(--orange);font-weight:700}
.ide-status{height:24px;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--accent);color:#fff;font-size:11px;flex:none}
.ide-status .sp{flex:1}

/* ===== 登录页 ===== */
.home{min-height:100vh;display:grid;place-items:center;padding:20px;background:
  radial-gradient(800px 400px at 20% 0%,#007acc14,transparent 60%),
  radial-gradient(600px 300px at 85% 90%,#c586c010,transparent 60%),var(--bg)}
.login-window{width:min(560px,94vw);background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 24px 70px #0009}
.win-titlebar{height:36px;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--bg3);border-bottom:1px solid var(--line)}
.win-title{color:var(--fg-dim);font-size:12px}
.login-body{padding:22px 26px 26px}
.brand{text-align:center;margin-bottom:16px}
.brand-logo{font-size:34px;font-weight:700;color:var(--blue)}
.brand h1{font-size:24px;margin:6px 0 2px;color:var(--fg-bright);font-weight:600;letter-spacing:.5px}
.brand-sub{color:var(--green);margin:0;font-size:12px}
.card{display:block}
label{display:grid;gap:6px;margin:10px 0}
.label-cmd{color:var(--green2);font-size:11px}
input,select{background:var(--bg3);border:1px solid var(--line);color:var(--fg);padding:9px 11px;border-radius:var(--radius);outline:none}
input::placeholder{color:#6a6a6a}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
select option{background:var(--bg3)}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);cursor:pointer}
.check span{color:var(--green2)}
.check input{width:15px;height:15px;accent-color:var(--accent);padding:0}
.primary{display:block;width:100%;margin:12px 0 6px;padding:11px;background:var(--accent);color:#fff;border-radius:var(--radius);font-weight:600;font-size:13px;text-align:center}
.primary:hover{background:var(--accent2)}
.primary:disabled{opacity:.45;cursor:not-allowed}
.join{display:grid;grid-template-columns:1fr 86px;gap:8px;margin-top:8px}
.join button{background:var(--bg4);border:1px solid var(--line);color:var(--green2);border-radius:var(--radius)}
.join button:hover{border-color:var(--green2)}
#error{color:var(--red);min-height:16px;margin:6px 0 0;font-size:12px;text-align:center}
.auth-bar{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--fg-dim)}
.auth-link{color:var(--accent2);cursor:pointer}
.auth-link:hover{text-decoration:underline}

/* ===== 游戏主界面 ===== */
.game{height:100vh;overflow:hidden}
.players #players{flex:1;overflow-y:auto;min-height:0}
.player{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;padding:4px 6px;border-radius:4px;font-size:12px}
.player:hover{background:var(--bg3)}
.avatar{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;color:#1e1e1e;font-weight:700;font-size:11px}
.player small{color:var(--fg-dim);font-size:11px}
.player.guessed{opacity:.5}
.player.guessed small::after{content:' ✓';color:var(--green2)}
.players .primary{margin-top:10px;padding:9px;font-size:12px}
.rename-btn{display:block;width:100%;margin-top:8px;padding:6px;background:var(--bg3);border:1px solid var(--line);border-radius:4px;color:var(--fg-dim);font-size:11px;text-align:center}
.rename-btn:hover{color:var(--fg);border-color:var(--fg-dim)}
.rename-btn.host-action{color:var(--yellow)}
.rename-btn.danger-action{color:var(--red)}

/* 画布区：编辑器本体 */
.board{flex:1;display:flex;flex-direction:column;min-height:0;padding:8px}
.word-bar{padding:4px 10px;font-size:13px;color:var(--fg-bright);min-height:26px;flex:none}
.code-comment{color:var(--green)}
.canvasWrap{position:relative;flex:1;min-height:0;background:#ffffff;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 8px 30px #0006}
canvas{width:100%;height:100%;display:block;touch-action:none}
.tools{display:flex;align-items:center;justify-content:center;gap:7px;padding-top:8px;flex-wrap:wrap;flex:none}
.tools button{background:var(--bg3);border:1px solid var(--line);color:var(--fg);padding:6px 10px;border-radius:4px;font-size:12px}
.tools button:hover{border-color:var(--accent)}
.tools button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tools input[type=color]{padding:1px;width:38px;height:30px;background:var(--bg3);cursor:pointer}
.tools input[type=range]{padding:0;width:90px;accent-color:var(--accent)}
.palette{display:flex;align-items:center;gap:5px}
.tools .swatch{width:22px;height:22px;min-width:22px;padding:0;border:2px solid transparent;border-radius:4px;background:var(--swatch);box-shadow:inset 0 0 0 1px #0006}
.tools .swatch.active{border-color:var(--accent2);box-shadow:0 0 0 1px var(--bg),0 0 0 3px var(--accent2)}

/* 选词弹层：像命令面板 */
.choose{position:absolute;inset:0;display:grid;place-content:center;background:#1e1e1ecc;backdrop-filter:blur(4px);text-align:center;z-index:5}
.choose h3{color:var(--green);font-weight:400;font-size:14px}
.choose div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.choose button{padding:12px 22px;border-radius:6px;background:var(--bg3);border:1px solid var(--accent);color:var(--accent2);font-weight:600;font-size:15px}
.choose button:hover{background:var(--accent);color:#fff}

/* AI 聊天面板 */
.ide-chat{width:290px;background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;flex:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1px;color:var(--fg);flex:none}
.chat-model{color:var(--purple);font-size:10px;letter-spacing:0}
.chat #messages{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}
.msg{margin:6px 0;padding:8px 10px;background:var(--bg3);border-radius:6px;overflow-wrap:anywhere;font-size:12px;line-height:1.5;border-left:2px solid var(--line2)}
.msg.system{background:transparent;border-left:2px solid var(--green);color:var(--green);font-size:11px;padding:4px 8px}
.msg.wrong{color:var(--fg-dim);font-size:11px;opacity:.85;border-left-color:var(--red)}
.msg.wrong span{color:var(--red)}
.chat form{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--line);flex:none;background:var(--bg2)}
.chat-prompt{color:var(--green2);font-weight:700}
.chat input{flex:1;min-width:0;background:var(--bg3);border-color:var(--line)}
.chat button{background:var(--accent);color:#fff;border-radius:4px;padding:8px 12px}
.chat button:hover{background:var(--accent2)}

/* 投票区 */
.vote-btn{display:inline-block;padding:4px 12px;background:#3a3d41;border:1px solid var(--line);border-radius:4px;color:var(--yellow);font-size:12px;cursor:pointer;vertical-align:middle;margin-left:6px}
.vote-btn:hover{border-color:var(--yellow)}
.vote-hint{font-size:11px;color:var(--fg-dim);margin-left:6px}
.vote-result{font-size:11px;color:var(--green2);margin-left:6px}

/* 猜对横幅 */
#guessBanner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:10;transition:.3s;pointer-events:none}
#guessBanner.hidden{opacity:0;transform:translateX(-50%) translateY(-20px)}
.correct-banner{background:#0e639c;color:#fff;padding:7px 18px;border-radius:4px;font-weight:600;font-size:13px;box-shadow:0 4px 14px #0008;white-space:nowrap;border-left:3px solid var(--green2)}
.correct-banner .avatar{display:inline-flex;width:20px;height:20px;border-radius:3px;vertical-align:middle;margin-right:5px;font-size:11px}

/* toast */
#toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:var(--bg4);color:var(--fg);border:1px solid var(--line2);padding:8px 16px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:200;box-shadow:0 6px 20px #0009}
#toast.show{opacity:1}

/* ===== 老板键：假 IDE ===== */
.boss{position:fixed;z-index:99;inset:0;background:var(--bg)}
.boss>button{position:fixed;right:6px;bottom:28px;color:#555;background:transparent;font-size:20px;z-index:100}
.boss>button:hover{color:#999}
.ide-code{flex:1;overflow:hidden;position:relative;background:var(--bg);min-height:0}
.code-scroll{padding:12px 0;font-size:13px;line-height:1.6;white-space:pre;color:var(--fg)}
.code-scroll .ln{display:flex}
.code-scroll .ln-no{width:48px;text-align:right;padding-right:14px;color:#5a5a5a;user-select:none;flex:none}
.c-k{color:var(--blue)}.c-s{color:var(--orange)}.c-f{color:var(--yellow)}.c-c{color:var(--green)}.c-n{color:#b5cea8}.c-t{color:var(--green2)}.c-p{color:var(--purple)}
.ide-term{height:110px;flex:none;background:#181818;border-top:1px solid var(--line);padding:10px 14px;font-size:12px;overflow:hidden}
.t-green{color:var(--green2)}.t-red{color:var(--red)}.t-dim{color:var(--fg-dim)}.t-path{color:var(--blue)}
.t-cursor{animation:blink 1s steps(1) infinite;color:var(--fg)}
@keyframes blink{50%{opacity:0}}

/* 低调模式：进一步降饱和 */
.stealth{--accent:#3d5875;--accent2:#5a7a99;--green2:#6a8a7a;--purple:#8a7a8a}

/* ===== 移动端 ===== */
@media(max-width:850px){
  .ide-activity,.ide-status{display:none}
  .ide-side.players{width:100%;order:2;border-right:0;border-top:1px solid var(--line);max-height:170px}
  .ide-chat{width:100%;order:3;border-left:0;border-top:1px solid var(--line);height:230px;flex:none}
  .ide-body{flex-direction:column;overflow-y:auto}
  .ide-main{order:1;min-height:62vh;flex:none}
  .ide-tab-status{display:none}
  .players #players{display:grid;grid-template-columns:repeat(2,1fr)}
  .titlebar-actions #copy{display:none}
  .tools{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}
  .canvasWrap{min-height:300px}
  .boss .ide-activity,.boss .ide-status{display:flex}
  .boss .ide-body{flex-direction:row}
  .boss .ide-side{display:none}
  .boss .ide-main{min-height:0}
}