/* ===== 像素追忆 样式 ===== */
:root{
  --bg:#0c1020; --panel:rgba(12,16,32,.88); --line:#2a3550;
  --tx:#e8ecf8; --dim:#9aa7c0; --gold:#ffd87a; --red:#ff5a6a; --blue:#4ac8ff;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--tx);
  font-family:"PingFang SC","Noto Sans CJK SC",monospace;
  overflow:hidden; user-select:none;
  image-rendering:pixelated;
}
#app{ position:fixed; inset:0; }
section{ position:absolute; inset:0; display:flex; flex-direction:column; }
.hidden{ display:none !important; }
button{
  font-family:inherit; color:var(--tx); background:#1a2440;
  border:2px solid var(--line); cursor:pointer; font-size:15px;
}

/* ---- 标题 ---- */
#ui-title{ align-items:center; justify-content:center; }
#titleCv{ position:absolute; inset:0; width:100%; height:100%; }
.tbox{
  position:relative; z-index:2; text-align:center; width:min(92%,420px);
  background:var(--panel); border:2px solid var(--line); padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 0 0 4px rgba(0,0,0,.35);
}
.tsub{ letter-spacing:4px; color:var(--dim); font-size:11px; }
.tmain{ font-size:40px; letter-spacing:6px; margin:2px 0 4px; text-shadow:3px 3px 0 #000; }
.tmain span{ color:var(--gold); }
.tsub2{ color:var(--blue); font-size:12px; margin-bottom:10px; }
#titleStats{ color:var(--dim); font-size:12px; margin:6px 0 14px; }
#titleBadge{ color:var(--gold); font-size:12px; }
.bigbtn{
  display:block; width:100%; margin:8px 0; padding:13px 10px;
  background:#243358; font-size:16px; letter-spacing:2px;
}
.bigbtn:active{ transform:translateY(2px); }
.bigbtn.dim{ background:#182038; color:var(--dim); font-size:13px; }
.tf{ margin-top:14px; color:#5a6a8a; font-size:10px; line-height:1.7; }

/* ---- 章节地图 ---- */
.mhead,.mhead2{
  display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:#101830; border-bottom:2px solid var(--line);
}
.mhead2{ padding-top:10px; justify-content:space-between; font-size:13px; color:var(--dim); }
.mtitle{ font-size:17px; letter-spacing:2px; flex:1; text-align:center; }
.backbtn{ padding:8px 10px; font-size:13px; background:#1a2440; border-radius:0; white-space:nowrap; }
.chaps{ max-height:26vh; overflow-y:auto; padding:8px 12px; }
.chapitem .chmeta{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 12px; margin:6px 0; background:#141d38; border:2px solid var(--line);
  font-size:14px;
}
.chapitem .chmeta small{ color:var(--dim); }
.chapitem.cur .chmeta{ border-color:var(--gold); box-shadow:0 0 8px rgba(255,216,122,.25); }
.chapitem.locked .chmeta{ opacity:.45; }
.acts{
  flex:1; overflow-y:auto; padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start;
}
.actcard{
  text-align:left; padding:10px; background:#141d38; border:2px solid var(--line);
  display:flex; flex-direction:column; gap:5px; min-height:74px;
}
.actcard b{ font-size:13px; }
.actcard small{ color:var(--dim); font-size:11px; line-height:1.4; }
.actcard.done{ border-color:#3a6a4a; }
.actcard.next{ border-color:var(--gold); }
.actcard.locked{ opacity:.4; }
.roster{
  display:flex; gap:8px; overflow-x:auto; padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top:2px solid var(--line); background:#101830;
}
.rolabel{ font-size:11px; color:var(--dim); white-space:nowrap; align-self:center; }
.rochip{
  min-width:74px; padding:8px 6px; text-align:center; background:#141d38;
  display:flex; flex-direction:column; gap:2px;
}
.rochip small{ color:var(--dim); font-size:10px; }
.rochip.on{ border-color:var(--blue); box-shadow:0 0 8px rgba(74,200,255,.3); }

/* ---- 场景 ---- */
#scene{ position:absolute; inset:0; width:100%; height:100%; }
.shead{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  font-size:12px; color:var(--gold);
  text-shadow:1px 1px 0 #000;
}
#objText{ flex:1; }
#dlg{
  position:absolute; left:8px; right:8px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:4;
  background:var(--panel); border:2px solid var(--line);
  padding:14px 14px 20px; min-height:120px; cursor:pointer;
}
#dlgName{ font-size:14px; margin-bottom:6px; letter-spacing:1px; min-height:18px; }
#dlgText{ font-size:16px; line-height:1.75; min-height:56px; }
#dlgHint{ position:absolute; right:10px; bottom:4px; color:var(--blue); font-size:11px; animation:blink 1.2s infinite; }
@keyframes blink{ 50%{ opacity:.2; } }
.skipbtn{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:5;
  padding:8px 12px; font-size:13px; background:rgba(12,16,32,.7);
}

/* ---- 战斗 ---- */
#ui-battle{ background:#101830; }
.foerow{ display:flex; gap:6px; overflow-x:auto; padding:calc(8px + env(safe-area-inset-top)) 10px 6px; }
.foebtn{
  padding:8px 10px; font-size:12px; background:#182038; border:2px solid var(--line);
  white-space:nowrap; flex:0 0 auto;
}
.foebtn.sel{ border-color:var(--red); color:var(--red); }
.foebtn.dead{ opacity:.3; text-decoration:line-through; }
#battle{ width:100%; height:25vh; flex:0 0 25vh; }
.batlog{
  flex:1; overflow-y:auto; font-size:12px; line-height:1.6; color:#b8c4dc;
  padding:5px 12px; background:#0c1428; border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  min-height:44px;
}
.partyrow{ display:flex; gap:6px; padding:5px 10px; }
.pcard{ flex:1; background:#141d38; border:2px solid var(--line); padding:6px; min-width:0; }
.pcard.dead{ opacity:.4; }
.pnm{ font-size:12px; margin-bottom:4px; white-space:nowrap; overflow:hidden; }
.pnm small{ color:var(--dim); }
.hpb{ position:relative; height:12px; background:#0a0f1e; border:1px solid #2a3550; }
.hpb i{ display:block; height:100%; }
.hpb b{ position:absolute; inset:0; font-size:9px; font-weight:normal; text-align:center; line-height:12px; color:#fff; text-shadow:1px 1px 0 #000; }
.gauge{ font-size:11px; color:var(--gold); letter-spacing:2px; margin-top:3px; }
.actrow{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px;
  padding:8px 10px calc(12px + env(safe-area-inset-bottom));
  background:#101830;
}
.actgrp{ display:flex; flex-direction:column; gap:4px; border:2px solid var(--line); padding:5px; }
.actname{ font-size:11px; color:var(--dim); text-align:center; }
.abtn{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 6px; font-size:12px; background:#243358;
}
.abtn small{ color:var(--dim); font-size:10px; }
.abtn:disabled{ opacity:.4; }
.abtn.spec{ background:#3a2a58; }
.abtn.spec.glow{ border-color:var(--gold); animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 10px rgba(255,216,122,.6); } }
.abtn.pot{ grid-column:span 2; background:#1a3a2a; }

/* ---- 弹层 ---- */
#ui-overlay{ background:rgba(4,6,14,.72); align-items:center; justify-content:center; z-index:20; }
.ovcard{
  position:relative; width:min(92%,440px); max-height:78vh; overflow-y:auto;
  background:#101830; border:2px solid var(--gold); padding:20px 16px;
}
.ovcard h3{ color:var(--gold); font-size:16px; margin-bottom:10px; }
.ovcard p{ font-size:14px; line-height:1.8; color:#c8d4e8; }
.ovclose{ position:absolute; top:8px; right:8px; padding:6px 10px; background:none; border:none; color:var(--dim); font-size:16px; }
.ovbtns{ margin-top:14px; }
.hint{ color:var(--dim); font-size:12px; }
.rresult{ margin-top:12px; text-align:center; min-height:28px; }
.rr{ font-size:18px; animation:pop .4s; }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.codex .coitem{ margin:10px 0; padding:10px; background:#141d38; border-left:3px solid var(--gold); }
.codex .coitem b{ font-size:14px; display:block; margin-bottom:4px; }
.codex .coitem p{ font-size:12px; color:var(--dim); line-height:1.7; }

@media (min-width:560px){
  .acts{ grid-template-columns:repeat(3,1fr); }
  .actrow{ grid-template-columns:repeat(4,1fr); }
  .abtn.pot{ grid-column:span 4; }
}