/* 僵尸危机 · 盒子头 —— 像素风 UI */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0b0d10; }
body { font-family:'Press Start 2P','Courier New',monospace; color:#cfd6dd; user-select:none; }

#wrap { position:relative; width:100vw; height:100vh; }
#game {
  position:absolute; inset:0; width:100%; height:100%;
  image-rendering:pixelated;
  cursor:crosshair; background:#0b0d10;
}
/* 扫描线氛围 */
#wrap::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}

.overlay {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,9,.82);
}
.hidden { display:none !important; }

.menu-box {
  width:min(560px, 92vw); text-align:center;
  border:3px solid #3a4550; background:#14181d;
  box-shadow:0 0 0 3px #0b0d10, 0 0 40px rgba(0,0,0,.8) inset;
  padding:34px 28px 24px;
}
.title {
  font-size:clamp(26px,5vw,44px); letter-spacing:.18em; color:#e8eef4;
  text-shadow:4px 4px 0 #7a1f1f, 8px 8px 0 rgba(0,0,0,.55);
  margin-bottom:10px;
}
.title.small { font-size:clamp(20px,4vw,30px); }
.subtitle { font-size:13px; color:#8fa3b3; letter-spacing:.5em; margin-bottom:26px; }
.danger-text { text-shadow:4px 4px 0 #4a1010; color:#ff6b5e; }

.btn {
  display:block; width:100%;
  font-family:inherit; font-size:14px; color:#e8eef4;
  background:#22303c; border:3px solid #48586a; padding:13px 10px;
  margin:9px auto; cursor:pointer; letter-spacing:.15em;
}
.btn:hover { background:#2e4150; border-color:#6f88a3; transform:translateY(-1px); }
.btn:active { transform:translateY(1px); }
.btn-big { max-width:340px; }
.btn-small { max-width:200px; font-size:11px; padding:9px; }
.btn.danger { border-color:#7a3030; background:#33201f; }
.btn.danger:hover { background:#4a2624; border-color:#a34a44; }

.join-hint { font-size:10px; color:#78909c; letter-spacing:.2em; margin:18px auto 0; max-width:340px; }
.join-row { display:flex; align-items:stretch; gap:10px; max-width:380px; margin:14px auto 0; }
.join-row input {
  flex:1 1 160px; min-width:120px; width:100%;
  font-family:inherit; font-size:18px; text-align:center;
  letter-spacing:.35em; text-transform:uppercase; color:#ffd76a;
  background:#0f1317; border:3px solid #48586a; border-radius:2px;
  padding:13px 12px 13px 18px; outline:none; cursor:text;
  user-select:text; -webkit-user-select:text;
}
.join-row input::placeholder { color:#5c7080; letter-spacing:.1em; text-transform:none; }
.join-row input:focus { border-color:#6f88a3; box-shadow:0 0 0 2px rgba(111,136,163,.35); }
/* 关键修复：加入按钮在 flex 行内必须按内容宽度排布，
   否则 .btn 的 width:100% 会反客为主把输入框压成 0 宽度（导致"无法输入"） */
.join-row .btn { flex:0 0 auto; width:auto; margin:0; padding:13px 16px; white-space:nowrap; font-size:13px; }

.room-label { font-size:11px; color:#8fa3b3; letter-spacing:.4em; margin-top:6px; }
.room-code {
  font-size:clamp(30px,6vw,46px); color:#ffd76a; letter-spacing:.35em;
  text-shadow:3px 3px 0 #000; margin:12px 0 6px;
}
.hint { font-size:10px; color:#78909c; line-height:1.9; margin-bottom:14px; }

.net-msg {
  margin-top:12px; font-size:11px; color:#ff8a7d;
  border:2px solid #6a3030; background:#241416; padding:9px;
}

.help-panel {
  margin-top:22px; padding-top:16px; border-top:2px dashed #33404c;
  font-size:10px; line-height:2.1; color:#93a7b7;
}
.help-panel b { color:#cfe0ee; letter-spacing:.2em; }
.key { color:#ffd76a; border:1px solid #6a5a2a; padding:1px 5px; background:#181410; }
.footnote { margin-top:14px; font-size:9px; color:#5c7080; line-height:1.9; }

.score-line { font-size:14px; color:#e8eef4; margin:14px 0 6px; }
.score-line span { color:#ffd76a; font-size:20px; }
.score-line.sub { font-size:10px; color:#93a7b7; }
.score-line.sub span { font-size:12px; }

/* ====== 开发者控制台 ====== */
#devconsole {
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  background:rgba(10,14,10,.92); border-top:2px solid #3fae5a;
  font-family:'Courier New',monospace;
}
#devlog {
  max-height:180px; overflow-y:auto; padding:8px 12px;
  font-size:13px; line-height:1.65; color:#9fe0af; white-space:pre-wrap;
}
#devlog .cmd { color:#ffe08a; }
#devlog .err { color:#ff8a7d; }
#devinput {
  display:block; width:100%; border:none; outline:none;
  background:rgba(20,30,20,.95); color:#c9ffd6;
  font-family:inherit; font-size:14px; padding:8px 12px;
  border-top:1px solid #2c4a34; cursor:text;
  user-select:text; -webkit-user-select:text;
}

/* ====== 地图编辑器（功能2） ====== */
/* 编辑器不遮挡画布：仅底部工具栏 + 提示条，画布全屏渲染地图 */
.editor { position:absolute; left:0; right:0; bottom:0; z-index:30; pointer-events:none; }
.ed-bar {
  pointer-events:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  padding:10px 14px; background:rgba(10,14,18,.92); border-top:2px solid #3a4550;
}
.ed-title { color:#ffd76a; font-size:11px; letter-spacing:.2em; margin-right:6px; }
.ed-btn {
  font-family:inherit; font-size:11px; color:#e8eef4; background:#22303c;
  border:2px solid #48586a; padding:8px 12px; cursor:pointer; letter-spacing:.1em;
}
.ed-btn:hover { background:#2e4150; border-color:#6f88a3; }
.ed-btn.primary { border-color:#6f88a3; background:#2c4250; color:#ffd76a; }
.ed-sep { width:1px; height:22px; background:#33404c; margin:0 4px; }
.ed-hint { pointer-events:none; text-align:center; font-size:9px; color:#78909c; background:rgba(10,14,18,.7); padding:5px; letter-spacing:.05em; }

/* ====== 语言切换（i18n） ====== */
.lang-switch { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:10px; }
.lang-label { color:#78909c; font-size:11px; letter-spacing:.2em; margin-right:2px; }
.ed-btn.active { background:#2c4250; border-color:#ffd76a; color:#ffd76a; }