/* ============================================================
   UNCLAIMED — 矿道图
   ============================================================ */

:root{
  --ink:      #0b0906;
  --ink-2:    #131009;
  --ink-3:    #1a150e;
  --line:     #2e281e;
  --paper:    #ddd2b8;
  --rust:     #b4552a;
  --rust-2:   #d06a34;
  --text:     #e8dfc9;
  --muted:    #9c9077;
  --muted-2:  #6b6150;
  --serif:    "Georgia","Times New Roman","Songti SC","SimSun",serif;
  --sans:     "Courier New","Consolas","Microsoft YaHei",monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--serif);
  overflow:hidden;
}

/* ---------- 工具栏 ---------- */
.toolbar{
  display:flex;
  align-items:center;
  gap:20px;
  height:44px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--muted);
  flex-shrink:0;
}
.toolbar .doc{ color:#c9bda1; letter-spacing:.16em; }
.toolbar .prog b{ color:var(--paper); font-weight:normal; }
.toolbar .spacer{ flex:1; }
.toolbar a{ color:var(--muted); text-decoration:none; }
.toolbar a:hover{ color:var(--paper); }

/* ---------- 主区 ---------- */
.stage{
  display:flex;
  height:calc(100vh - 44px);
  min-height:0;
}

.mapwrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:18px 18px 0;
  gap:12px;
}

.zoom{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
  transition:transform .16s ease-out;
  overflow:hidden;
}

.sheet{
  position:relative;
  width:100%;
  max-width:1000px;
  aspect-ratio:900/640;
  max-height:100%;
  background:
    radial-gradient(120% 100% at 30% 20%, #e4dabf 0%, #d9cdae 45%, #c9bb98 100%);
  box-shadow:0 18px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(90,74,48,.5) inset;
  border-radius:2px;
  overflow:hidden;
}
.sheet::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(90,70,40,.045) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 80% 85%, rgba(120,90,50,.18) 0%, transparent 55%);
  pointer-events:none;
  mix-blend-mode:multiply;
}

.plan{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:opacity .35s ease;
}

.adit{
  fill:none;
  stroke:#3a2c1f;
  stroke-width:6;
  stroke-linecap:square;
  stroke-linejoin:round;
  opacity:.9;
}
.drift{
  fill:none;
  stroke:#4a3a28;
  stroke-width:3;
  stroke-linecap:square;
  opacity:.75;
}
.dot{
  fill:#5a4a34;
  opacity:.55;
}

.mark{ cursor:pointer; }
.mark .hit{ fill:transparent; }
.mark .ring{
  fill:rgba(180,85,42,.06);
  stroke:#8c3f1c;
  stroke-width:2.2;
  transition:fill .2s, stroke-width .2s;
}
.mark .no{
  fill:#7a3516;
  font-family:var(--sans);
  font-size:15px;
  text-anchor:middle;
  font-weight:bold;
  pointer-events:none;
}
.mark:hover .ring{ fill:rgba(180,85,42,.18); }
.mark.on .ring{
  fill:rgba(180,85,42,.3);
  stroke:#b4552a;
  stroke-width:3.4;
}
.mark.solved .ring{
  fill:rgba(58,44,31,.5);
  stroke:#2a2015;
}

/* 背面 */
.back{
  position:absolute;
  inset:0;
  padding:7% 8%;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.back.on{ opacity:1; pointer-events:auto; }
.back-title{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.24em;
  color:#7a6242;
  margin:0 0 10px;
}
.back-lead{
  font-size:13px;
  color:#6b5236;
  margin:0 0 26px;
  letter-spacing:.04em;
}
.back-dots{
  position:relative;
  height:56%;
  margin:0 0 22px;
}
.back-dots i{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4a3a28;
  opacity:.72;
  transform:translate(-50%,-50%);
}
.back-note{
  font-size:13px;
  line-height:2;
  color:#5c4529;
  margin:0;
  max-width:34em;
}

.mapbar{
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 0 14px;
  flex-shrink:0;
}
.mapbar button{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.14em;
  color:#c9bda1;
  background:transparent;
  border:1px solid #4a3f2c;
  padding:9px 18px;
  cursor:pointer;
  transition:all .2s;
}
.mapbar button:hover{
  border-color:var(--rust);
  color:#e8dfc9;
}
.mapbar .hint{
  font-size:11.5px;
  color:var(--muted-2);
  letter-spacing:.06em;
}

/* ---------- 右侧面板 ---------- */
.panel{
  width:330px;
  flex-shrink:0;
  border-left:1px solid var(--line);
  background:var(--ink-2);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted);
}
.panel-head b{ color:var(--paper); font-size:13px; }
.panel-sub{ color:#4f4636; font-size:9.5px; }

.panel-body{
  flex:1;
  overflow-y:auto;
  padding:20px;
  min-height:0;
}
.panel-empty{
  color:var(--muted-2);
  font-size:12.5px;
  line-height:2;
  margin:0;
}
.p-desc{
  margin:0 0 18px;
  font-size:14px;
  line-height:2.05;
  color:#ddd2b8;
  letter-spacing:.03em;
}
.p-result{
  margin:0;
  font-size:13px;
  line-height:2;
  color:#c9a87a;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.p-result b{
  color:var(--rust-2);
  font-size:22px;
  font-family:var(--sans);
  letter-spacing:.1em;
}

.panel-foot{
  border-top:1px solid var(--line);
  padding:16px 20px;
}
.sel-label{
  display:block;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:8px;
}
#pSelect{
  width:100%;
  background:var(--ink-3);
  color:var(--text);
  border:1px solid #3d3527;
  padding:10px 12px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.06em;
  cursor:pointer;
}
#pSelect:focus{ outline:1px solid var(--rust); }

#confirmBtn{
  width:100%;
  margin-top:10px;
  padding:11px;
  background:transparent;
  border:1px solid #4a3f2c;
  color:#c9bda1;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  cursor:pointer;
  transition:all .2s;
}
#confirmBtn:hover{ border-color:var(--rust); color:#e8dfc9; }

.foot-msg{
  margin:12px 0 0;
  font-size:11.5px;
  color:var(--muted-2);
  letter-spacing:.05em;
  min-height:1.6em;
}

/* 答案 */
.answer{
  border-top:1px solid var(--line);
  padding:16px 20px 20px;
  display:none;
}
.answer.on{ display:block; }
.ans-label{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--muted);
  margin:0 0 10px;
}
#ansInput{
  width:100%;
  background:var(--ink-3);
  border:1px solid #3d3527;
  color:var(--text);
  padding:10px 12px;
  font-family:var(--sans);
  font-size:15px;
  letter-spacing:.3em;
  text-transform:uppercase;
}
#ansInput:focus{ outline:1px solid var(--rust); }

#ansBtn{
  width:100%;
  margin-top:10px;
  padding:11px;
  background:transparent;
  border:1px solid var(--rust);
  color:var(--rust-2);
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  cursor:pointer;
}
#ansBtn:hover{ background:rgba(180,85,42,.12); }

.ans-msg{
  margin:10px 0 0;
  font-size:11.5px;
  color:#c0704a;
  min-height:1.6em;
}

/* ---------- 结论层 ---------- */
.verdict{
  position:fixed;
  inset:0;
  background:rgba(5,4,3,.97);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:40px;
}
.verdict.on{ display:flex; }
.verdict-inner{
  max-width:520px;
  text-align:center;
}
.verdict-tag{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.3em;
  color:#7a6242;
  margin:0 0 34px;
}
.verdict-jp{
  font-size:19px;
  line-height:2.2;
  color:#e8dfc9;
  margin:0;
  letter-spacing:.06em;
}
.verdict-jp .hl{
  color:var(--rust-2);
  font-family:var(--sans);
  letter-spacing:.24em;
  font-size:23px;
}
#toShrine{
  margin-top:48px;
  padding:13px 38px;
  background:transparent;
  border:1px solid #5a4a30;
  color:#c9bda1;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.24em;
  cursor:pointer;
  transition:all .25s;
}
#toShrine:hover{ border-color:var(--rust); color:#e8dfc9; }
.verdict-foot{
  margin:34px 0 0;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.2em;
  color:#3d3527;
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  body{ overflow:auto; }
  .stage{ flex-direction:column; height:auto; }
  .mapwrap{ padding:12px; }
  .panel{ width:100%; border-left:0; border-top:1px solid var(--line); }
  .panel-body{ max-height:40vh; }
}