/* ============================================================
   classic.css —— 90 年代指令选择式 ADV 皮肤
   只在 <body class="classic"> 时生效；不覆盖任何默认样式。
   现代界面（默认）完全不受影响。
   ============================================================ */
body.classic {
  --cl-bg:#080d24;
  --cl-panel:#101a44;
  --cl-btn:#1b2c66;
  --cl-edge:#c9a86a;
  --cl-txt:#f4ecd8;
  --cl-dim:#9aa8cc;
  --cl-hi:#ffd76b;
}

/* ---------- 全局：复古配色 + 明朝体感 ---------- */
body.classic, body.classic #top, body.classic #side, body.classic .modal .box {
  font-family:"MS Mincho","SimSun","Songti SC","Noto Serif CJK SC",serif;
}
body.classic #app { background:var(--cl-bg); }
body.classic #top {
  background:linear-gradient(180deg,#18265c,#0c1436);
  border-bottom:2px solid var(--cl-edge);
  box-shadow:0 2px 0 #060a1c;
  padding:6px 12px;
}
body.classic #top .logo { color:var(--cl-edge); letter-spacing:2px; }
body.classic .chip {
  background:#0d1740; border:1px solid #40569c; border-radius:0;
  color:var(--cl-dim); font-size:11.5px;
}
body.classic .chip b { color:var(--cl-txt); }
body.classic button {
  background:linear-gradient(180deg,#22377e,#152457);
  border:1px solid #5c72bd; border-radius:0;
  color:#e8e4f2; box-shadow:inset 1px 1px 0 rgba(255,255,255,.16),1px 1px 0 #060a1c;
  font-family:inherit; letter-spacing:.5px;
}
body.classic button:hover { background:linear-gradient(180deg,#2c469a,#1b2e6c); border-color:var(--cl-edge); }
body.classic button.primary {
  background:linear-gradient(180deg,#a9863c,#6f5522);
  border-color:var(--cl-edge); color:#fff8e6;
}

/* ---------- 侧栏：人物录窗口 ---------- */
body.classic #side {
  background:linear-gradient(180deg,#0e1840,#080e28);
  border-left:2px solid var(--cl-edge); width:228px;
}
body.classic .sidesec { border-bottom:1px solid #33468a; }
body.classic .sidetitle { color:var(--cl-edge); letter-spacing:3px; }
body.classic .cast { border-radius:0; }
body.classic .cast:hover { background:#1b2c66; }
body.classic .ava { border-radius:0; border:1px solid #5c72bd; }

/* ---------- 顶部 HUD ---------- */
#clHud {
  position:absolute; left:0; right:0; top:0; z-index:16;
  display:flex; align-items:center; gap:12px;
  height:34px; padding:0 14px;
  background:linear-gradient(180deg,rgba(10,18,52,.96),rgba(8,14,38,.88));
  border-bottom:1px solid #5c72bd;
  box-shadow:0 1px 0 #040818;
  color:var(--cl-txt); font-size:13px; letter-spacing:1px;
  pointer-events:none;
}
#clHud b { color:var(--cl-hi); font-size:15px; }
#clHud i { font-style:normal; color:var(--cl-edge); }
.cl-hud-sep { color:#4a5da0; }
.cl-hud-slot { color:var(--cl-edge); }
.cl-hud-place { color:#fff2cf; }
.cl-hud-sp { flex:1; }
.cl-hud-hint { color:var(--cl-dim); font-size:11.5px; }
body:not(.classic) #clHud { display:none !important; }

/* ---------- 指令栏（右侧竖排） ---------- */
#clCmd {
  position:absolute; right:10px; top:48px; z-index:15;
  display:flex; flex-direction:column; gap:5px;
  width:88px;
}
.cl-cmd {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:52px; padding:3px 0 !important; gap:0;
  background:linear-gradient(180deg,#22377e,#141f52) !important;
  border:1px solid #6a80c8 !important; border-radius:0 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2),2px 2px 0 #050a1e !important;
  cursor:pointer;
}
.cl-cmd:hover { border-color:var(--cl-hi) !important; }
.cl-cmd:active { transform:translate(1px,1px); box-shadow:inset 1px 1px 0 rgba(0,0,0,.3) !important; }
.cl-cmd-ic { font-size:15px; line-height:1.1; }
.cl-cmd-jp { font-size:13px; font-weight:700; color:#fff4d8; letter-spacing:2px; line-height:1.25; }
.cl-cmd-cn { font-size:9.5px; color:#a9b8e6; letter-spacing:1px; }
.cl-cmd.cl-off { opacity:.42; }
.cl-cmd-back { margin-top:8px; border-color:var(--cl-edge) !important; }
body:not(.classic) #clCmd { display:none !important; }
/* 对话中让指令栏退到后面，不抢画面 */
body.classic #talk.show ~ #clCmd { opacity:.25; pointer-events:none; }

/* ---------- 对话框：深蓝金边 + 姓名牌 + 竖排选择肢 ---------- */
body.classic #talk {
  left:3.5%; right:3.5%; bottom:3%; min-height:30%;
  background:linear-gradient(180deg,rgba(10,20,58,.96),rgba(6,12,36,.98));
  border:2px solid var(--cl-edge); border-radius:0;
  box-shadow:0 0 0 3px #050a1e,inset 0 0 0 1px rgba(201,168,106,.35),0 6px 22px rgba(0,0,0,.6);
  padding:30px 26px 20px;
}
body.classic #talkhead {
  position:absolute; top:-15px; left:14px; margin:0;
  background:linear-gradient(180deg,#22377e,#101a44);
  border:1px solid var(--cl-edge); padding:3px 14px;
  box-shadow:2px 2px 0 #050a1e;
}
body.classic #face { display:none; }
body.classic #who { font-size:15px; color:var(--cl-hi); letter-spacing:2px; }
body.classic #who small { color:#b9c6ea; font-size:10.5px; letter-spacing:0; }
body.classic #line {
  font-size:16px; line-height:2; color:var(--cl-txt);
  letter-spacing:1px; text-shadow:0 1px 2px #000;
}
body.classic #opts { flex-direction:column; gap:6px; margin-top:10px; }
body.classic .opt {
  border-radius:0 !important; font-size:14px; padding:6px 13px;
  background:rgba(27,44,102,.9) !important;
  border:1px solid #6a80c8 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12);
}
body.classic .opt::before { content:"▶ "; color:var(--cl-hi); }
body.classic .opt:hover { border-color:var(--cl-hi) !important; background:rgba(40,64,140,.95) !important; }
body.classic .opt.unlocked { border-color:var(--cl-hi) !important; }
body.classic #thint { color:var(--cl-hi); }
body.classic #talk.view #line { color:#dbe4ff; }

/* ---------- 提示 / 转场 ---------- */
body.classic #help { display:none; }
body.classic #toast { top:44px; }
body.classic .tst {
  background:rgba(12,22,58,.96); border:1px solid #6a80c8; border-radius:0;
  color:var(--cl-txt); box-shadow:2px 2px 0 #050a1e;
}
body.classic #transit { background:#060b20; }
body.classic #transit .big { color:var(--cl-edge); }

/* ---------- 城镇 MAP ---------- */
#clMap {
  position:absolute; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,8,24,.82); padding:18px;
}
#clMap.show { display:flex; }
.cl-map-box {
  width:min(760px,94%); max-height:92%; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#111c46,#080e28);
  border:2px solid var(--cl-edge);
  box-shadow:0 0 0 4px #050a1e,0 10px 40px rgba(0,0,0,.7);
}
.cl-map-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid #5c72bd;
  color:var(--cl-hi); font-size:15px; letter-spacing:2px;
}
.cl-map-sub { color:var(--cl-dim); font-size:11.5px; letter-spacing:0; }
.cl-map-head button { padding:3px 10px !important; font-size:12px; }
.cl-map-canvas {
  position:relative; flex:1; min-height:340px; margin:12px;
  border:1px solid #33468a;
  background-color:#0b1436;
  background-image:
    linear-gradient(rgba(90,116,190,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,116,190,.13) 1px,transparent 1px);
  background-size:32px 32px;
  overflow:hidden;
}
.cl-map-place {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:96px; padding:7px 9px !important;
  background:linear-gradient(180deg,#1d2f6e,#101a44) !important;
  border:1px solid #6a80c8 !important; border-radius:0 !important;
  box-shadow:2px 2px 0 #050a1e !important;
  cursor:pointer;
}
.cl-map-place:hover { border-color:var(--cl-hi) !important; }
.cl-map-place.cur {
  border-color:var(--cl-hi) !important;
  background:linear-gradient(180deg,#4a3c18,#2a2110) !important;
}
.cl-map-pin { color:var(--cl-hi); font-size:14px; line-height:1; }
.cl-map-nm { color:#fff4d8; font-size:13px; letter-spacing:1px; white-space:nowrap; }
.cl-map-n { color:#a9b8e6; font-size:10px; }
.cl-map-foot {
  padding:8px 14px 12px; border-top:1px solid #33468a;
  color:var(--cl-dim); font-size:11.5px; text-align:center;
}
body:not(.classic) #clMap { display:none !important; }

/* ---------- 弹层 / 规则包卡片重皮 ---------- */
body.classic .box { border:2px solid var(--cl-edge); border-radius:0; background:#101a44; }
body.classic .box h2 { color:var(--cl-hi); }
body.classic .pk, body.classic .endcard, body.classic .rules { border-radius:0; }
body.classic .pk.on { border-color:var(--cl-hi); background:#2a2110; }

@media (max-width:820px){
  #clCmd { width:64px; right:6px; }
  .cl-cmd { height:44px; }
  .cl-cmd-ic { font-size:12px; }
  .cl-cmd-jp { font-size:11px; letter-spacing:0; }
  .cl-cmd-cn { display:none; }
  body.classic #talk { left:2%; right:2%; padding:26px 14px 16px; }
}