/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#3a3a3a;
  --panel:#000;
  --accent:#e04a2f;
  --accent2:#f6c000;
  --text:#f2f2f2;
}
html,body{
  height:100%;
  background:
    radial-gradient(circle at 50% 0%, #4a4a4a 0%, #2c2c2c 60%, #1c1c1c 100%);
  color:var(--text);
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.hidden{ display:none !important; }
#app{
  width:100%;
  min-height:100%;
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.4vh,14px);
  padding:clamp(6px,1.2vw,16px);
}
#stage-wrap{
  position:relative;
  width:min(96vw,123.85vh,1280px);
}

canvas#game{
  display:block;
  background:#000;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border:clamp(5px,.55vw,8px) solid #7a7a7a;
  border-radius:8px;
  box-shadow:0 16px 54px rgba(0,0,0,.7), inset 0 0 0 2px #111;
  width:100%;
  height:auto;
  aspect-ratio:700/520;
  touch-action:none;
}

/* ---------- 覆盖层 / 菜单 ---------- */
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82);
  border-radius:6px;
}
.overlay.hidden{ display:none; }
.panel{ text-align:center; padding:clamp(18px,3vw,36px); width:min(84%,560px); }
.logo{
  font-size:clamp(30px,7vw,58px);
  letter-spacing:4px;
  color:var(--accent2);
  text-shadow:3px 3px 0 var(--accent), 6px 6px 0 rgba(0,0,0,.5);
}
.subtitle{ margin:6px 0 22px; color:#bbb; letter-spacing:3px; font-size:14px; }

.menu{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.btn{
  font-family:inherit; font-weight:700; letter-spacing:2px;
  font-size:18px; color:#111;
  background:linear-gradient(#ffd94a,#f6b800);
  border:none; border-radius:6px;
  padding:12px 30px; min-width:200px; cursor:pointer;
  box-shadow:0 4px 0 #a97400, 0 6px 10px rgba(0,0,0,.4);
  transition:transform .05s, box-shadow .05s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #a97400; }
.btn.ghost{
  background:transparent; color:#ffd94a;
  border:2px solid #ffd94a; box-shadow:none; font-size:15px; padding:9px 24px;
}
.btn.ghost:active{ transform:translateY(2px); }

/* 联机房间面板 */
.net{ text-align:center; color:#eee; }
.net.hidden{ display:none; }
#net-create.hidden,#net-join.hidden{ display:none; }
.netlabel{ font-size:14px; color:#bbb; letter-spacing:2px; margin-bottom:10px; }
.roomcode-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 14px; }
.roomcode{
  font-size:clamp(40px,10vw,64px); letter-spacing:10px; font-weight:700;
  color:var(--accent2); text-shadow:2px 2px 0 var(--accent);
  padding-left:10px;
}
.copy-room{
  flex:0 0 auto; padding:9px 12px; border:2px solid var(--accent2); border-radius:6px;
  background:#181818; color:var(--accent2); font:700 14px/1 "Courier New",monospace;
  letter-spacing:1px; cursor:pointer;
}
.copy-room:active{ transform:translateY(2px); }
.copy-room:disabled,.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
.joininput{
  font-family:inherit; font-weight:700; font-size:34px; letter-spacing:12px;
  text-align:center; text-transform:uppercase; width:min(80%,260px);
  padding:10px 8px 10px 20px; margin-bottom:14px; color:#111;
  background:#f4f4f4; border:3px solid #ffd94a; border-radius:8px; outline:none;
}
.netstatus{ font-size:14px; color:#9ad0ff; min-height:20px; letter-spacing:1px; margin:10px 0 16px; }

.help{ text-align:left; color:#eee; }
.help.hidden{ display:none; }
.help table{ width:100%; border-collapse:collapse; margin-bottom:10px; font-size:14px; }
.help th,.help td{ border:1px solid #555; padding:6px 8px; text-align:center; }
.help th{ color:var(--accent2); }
.tip{ font-size:12px; color:#9a9a9a; margin:8px 0 12px; text-align:center; }
.legend{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:14px; font-size:12px; }
.legend li{ display:flex; align-items:center; gap:8px; }
.sw{ width:16px; height:16px; display:inline-block; border-radius:2px; flex:0 0 auto; }
.sw.brick{ background:#b5502a; }
.sw.steel{ background:#cfcfcf; }
.sw.water{ background:#2f6fd6; }
.sw.tree{ background:#3aa02a; }
.sw.ice{ background:#bfe6f2; }
.sw.eagle{ background:#dcdcdc; }

/* ---------- 中央横幅 ---------- */
.banner{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.banner.hidden{ display:none; }
#banner-text{
  font-size:clamp(26px,6vw,46px); letter-spacing:4px;
  color:#fff; text-shadow:3px 3px 0 var(--accent), 0 0 20px rgba(0,0,0,.8);
  text-align:center; line-height:1.4; white-space:pre-line;
}

/* ---------- 顶部按钮 ---------- */
.topbar{ position:absolute; top:8px; right:10px; display:flex; gap:8px; }
.topbar.hidden{ display:none; }
.mini{
  font-size:16px; line-height:1; background:rgba(0,0,0,.5); color:#fff;
  border:1px solid #666; border-radius:6px; padding:6px 9px; cursor:pointer;
}
.mini.rejoin{ color:#111; background:linear-gradient(#ffd94a,#f6b800); border-color:#f6c000; font-weight:700; }
.mini:active{ background:rgba(255,255,255,.15); }

/* ---------- 移动端控制 ---------- */
.touch{
  display:flex; align-items:center; justify-content:space-between;
  width:min(96vw,960px); gap:20px;
}
.touch.hidden{ display:none; }
.dpad{ position:relative; width:168px; height:168px; flex:0 0 auto; }
.dbtn{
  position:absolute; width:56px; height:56px; font-size:22px;
  background:rgba(255,255,255,.10); color:#fff;
  border:2px solid #888; border-radius:10px; cursor:pointer;
}
.dbtn:active{ background:rgba(255,217,74,.4); }
.dbtn.up{ top:0; left:56px; }
.dbtn.down{ bottom:0; left:56px; }
.dbtn.left{ left:0; top:56px; }
.dbtn.right{ right:0; top:56px; }
.fire{
  width:110px; height:110px; border-radius:50%;
  font-size:22px; letter-spacing:2px;
  background:radial-gradient(circle at 40% 35%, #ff7a5c, #d0331b);
  color:#fff; border:4px solid #7a1a10; cursor:pointer;
  box-shadow:0 6px 0 #5a120a;
}
.fire:active{ transform:translateY(4px); box-shadow:0 2px 0 #5a120a; }

@media (max-width:820px){
  html,body{ overflow:auto; }
  #app{ justify-content:flex-start; padding-top:6px; height:auto; min-height:100dvh; overflow-y:auto; }
  #stage-wrap{ width:min(98vw,123.85vh); }
}