/* ============================================================
   上岸模拟器 — 「深夜出租屋的老式终端」CRT × 系统流
   主导色：磷光绿；辅色：琥珀（检定/警告）、红（扎心）
   ============================================================ */
:root {
  --bg: #07090b;
  --bg2: #0a0f0d;
  --panel: #0c1210;
  --panel2: #101915;
  --line: #1e2f27;
  --line-glow: #2d4a3c;
  --phos: #6dffb8;
  --phos-dim: #2e8f66;
  --amber: #ffb454;
  --red: #ff5470;
  --cyan: #58e6d9;
  --text: #cfe3d8;
  --dim: #6f8579;
  --font-mono: "Courier New", "Sarasa Mono SC", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: .02em;
}

/* CRT 扫描线 + 暗角 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

img.pixel { image-rendering: pixelated; }

#app { max-width: 1120px; margin: 0 auto; padding: 18px 16px 60px; }

/* ===== 屏幕切换 ===== */
.screen { display: none; animation: fadein .3s ease; }
.screen.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== 终端面板 ===== */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 0 1px rgba(109,255,184,.04);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--phos-dim), transparent);
  opacity: .6;
}
.panel-title {
  color: var(--phos);
  font-size: .85rem; letter-spacing: .2em; font-weight: bold;
  text-shadow: 0 0 8px rgba(109,255,184,.5);
  margin-bottom: 10px;
}
.panel-title::before { content: "【 "; color: var(--phos-dim); }
.panel-title::after { content: " 】"; color: var(--phos-dim); }

.dim { color: var(--dim); }
.small { font-size: .78rem; }
.glow { color: var(--phos); text-shadow: 0 0 8px rgba(109,255,184,.55); }
.amber { color: var(--amber); }
.red { color: var(--red); }

/* ===== 按钮（终端指令风）===== */
.btn {
  display: inline-block;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 16px;
  font-size: .92rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  position: relative;
}
.btn::before { content: "> "; color: var(--phos-dim); }
.btn:hover { border-color: var(--phos); color: var(--phos); box-shadow: 0 0 12px rgba(109,255,184,.18), inset 0 0 8px rgba(109,255,184,.06); }
.btn:active { transform: translate(1px, 1px); }
.btn.primary { border-color: var(--phos); color: var(--phos); text-shadow: 0 0 8px rgba(109,255,184,.5); }
.btn.gold { border-color: var(--amber); color: var(--amber); }
.btn.gold:hover { box-shadow: 0 0 12px rgba(255,180,84,.2); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.btn.block { display: block; width: 100%; text-align: left; margin-bottom: 8px; }

/* ===== 启动引导屏 ===== */
.boot { white-space: pre-wrap; line-height: 2; font-size: .95rem; min-height: 220px; }
.boot .cursor { display: inline-block; width: .6em; background: var(--phos); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.title-hero { text-align: center; padding: 26px 0 8px; }
.title-hero h1 {
  font-size: 2.6rem; letter-spacing: .3em; color: var(--phos);
  text-shadow: 0 0 24px rgba(109,255,184,.6), 0 0 4px rgba(109,255,184,.9);
  animation: crt-flicker 4s infinite;
}
.title-hero .sub { color: var(--amber); margin-top: 10px; letter-spacing: .42em; font-size: .9rem; text-shadow: 0 0 10px rgba(255,180,84,.4); }
.title-hero img {
  max-width: min(680px, 92vw); margin: 20px auto 0; display: block;
  border: 1px solid var(--line-glow);
  box-shadow: 0 0 30px rgba(109,255,184,.12);
  filter: saturate(1.1) contrast(1.05);
}
@keyframes crt-flicker { 0%,100% { opacity: 1; } 96% { opacity: 1; } 97% { opacity: .72; } 98% { opacity: .95; } 99% { opacity: .82; } }

.menu-list { max-width: 460px; margin: 22px auto 0; }
.meta-line { text-align: center; color: var(--dim); font-size: .78rem; margin-top: 26px; letter-spacing: .12em; }

/* ===== 资源栏 ===== */
.statbar { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 110px;
  background: var(--panel2); border: 1px solid var(--line); padding: 8px 10px;
}
.stat .label { font-size: .7rem; color: var(--dim); letter-spacing: .15em; }
.stat .value { font-size: 1.2rem; margin-top: 2px; color: var(--phos); text-shadow: 0 0 8px rgba(109,255,184,.35); }
.stat .value.amber { color: var(--amber); text-shadow: 0 0 8px rgba(255,180,84,.35); }
.stat .value.red { color: var(--red); text-shadow: 0 0 8px rgba(255,84,112,.35); }
.bar { height: 7px; background: var(--bg); border: 1px solid var(--line); margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--phos); box-shadow: 0 0 6px rgba(109,255,184,.6); transition: width .35s; }
.bar.sanity > i { background: var(--cyan); box-shadow: 0 0 6px rgba(88,230,217,.6); }
.bar.sanity.low > i { background: var(--red); box-shadow: 0 0 6px rgba(255,84,112,.6); }
.bar.money > i { background: var(--amber); box-shadow: 0 0 6px rgba(255,180,84,.6); }

/* ===== 系统旁白流（主角）===== */
.sys-log {
  background: #05080a;
  border: 1px solid var(--line-glow);
  box-shadow: inset 0 0 40px rgba(0,0,0,.7), 0 0 18px rgba(109,255,184,.06);
  padding: 12px 14px;
  height: 300px;
  overflow-y: auto;
  font-size: .86rem;
  line-height: 1.9;
}
.sys-log .line { animation: linein .25s ease; }
@keyframes linein { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.sys-log .sys { color: var(--phos); }
.sys-log .sys::before { content: "叮！系统："; color: var(--amber); }
.sys-log .bad { color: var(--red); }
.sys-log .bad::before { content: "✗ "; }
.sys-log .good { color: var(--cyan); }
.sys-log .good::before { content: "✓ "; }
.sys-log .roll { color: var(--amber); }
.sys-log .roll::before { content: "🎲 "; }
.sys-log .dim { color: var(--dim); }
.sys-log .dim::before { content: "·· "; }
.sys-log .week { color: var(--dim); font-size: .75rem; margin-right: 6px; }

/* ===== 标签 ===== */
.tag {
  display: inline-block; font-size: .68rem; padding: 2px 7px; margin: 2px 3px 2px 0;
  border: 1px solid var(--line); color: var(--dim); letter-spacing: .05em;
}
.tag.buff { border-color: var(--cyan); color: var(--cyan); }
.tag.debuff { border-color: var(--red); color: var(--red); }
.tag.neon { border-color: var(--phos); color: var(--phos); }
.tag.gold { border-color: var(--amber); color: var(--amber); }
.tag.hidden-attr { border-style: dashed; }

/* ===== 卡片 ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card {
  background: var(--panel2); border: 1px solid var(--line); padding: 10px 12px;
  transition: all .12s; position: relative;
}
.card:hover { border-color: var(--phos-dim); box-shadow: 0 0 10px rgba(109,255,184,.1); }
.card .name { color: var(--amber); font-size: .92rem; }
.card .meta { color: var(--dim); font-size: .72rem; margin: 4px 0; }
.card .desc { font-size: .8rem; line-height: 1.6; }
.card .stage-pips { letter-spacing: .2em; font-size: .75rem; margin-top: 4px; }

/* ===== 主循环布局 ===== */
.game-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .game-grid { grid-template-columns: 1fr; } }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.action-row .btn { flex: 1 1 44%; padding: 10px 8px; font-size: .85rem; }
.ap-cost { color: var(--dim); font-size: .7rem; }

.week-banner {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 12px;
}
.week-banner .wk { font-size: 1.3rem; color: var(--phos); text-shadow: 0 0 10px rgba(109,255,184,.5); }
.week-banner .phase { color: var(--amber); letter-spacing: .3em; font-size: .8rem; }

/* ===== 模态 ===== */
.modal-mask {
  position: fixed; inset: 0; background: rgba(3,5,4,.86); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: fadein .2s ease;
}
.modal {
  width: min(580px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--phos-dim);
  box-shadow: 0 0 40px rgba(109,255,184,.15), inset 0 0 30px rgba(0,0,0,.6);
  padding: 20px 22px;
}
.modal { position: relative; }
.modal-close {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  background: none; border: 1px solid transparent; color: var(--dim);
  font-family: var(--font-mono); font-size: 1rem; cursor: pointer; padding: 2px 6px;
}
.modal-close:hover { color: var(--phos); border-color: var(--phos-dim); }
.modal h3 { color: var(--phos); font-size: 1rem; margin-bottom: 12px; letter-spacing: .15em; text-shadow: 0 0 8px rgba(109,255,184,.5); }
.modal h3::before { content: "【"; color: var(--phos-dim); }
.modal h3::after { content: "】"; color: var(--phos-dim); }
.modal .body { font-size: .9rem; line-height: 1.9; margin-bottom: 16px; white-space: pre-wrap; }
.modal .opt { display: block; width: 100%; text-align: left; margin-bottom: 8px; }

/* ===== 检定行 ===== */
.check-line {
  font-size: .86rem; padding: 8px 10px; margin: 8px 0;
  background: var(--bg2); border-left: 3px solid var(--amber);
  animation: linein .3s ease;
}
.check-line .d20 { color: var(--amber); font-weight: bold; }
.check-line .pass { color: var(--phos); font-weight: bold; }
.check-line .fail { color: var(--red); font-weight: bold; }
.check-line.bigwin { border-left-color: var(--cyan); box-shadow: 0 0 14px rgba(88,230,217,.3); }
.check-line.bigfail { border-left-color: var(--red); box-shadow: 0 0 14px rgba(255,84,112,.3); }

/* ===== 雷达图 ===== */
.radar-wrap { display: flex; justify-content: center; padding: 6px 0; }
canvas.radar { background: transparent; }

/* ===== 捏人屏简历 ===== */
.resume-line { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; line-height: 1.7; }
.resume-line b { color: var(--phos); }
.alloc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.alloc-row .aname { width: 90px; color: var(--dim); }
.alloc-row .aval { width: 40px; text-align: center; color: var(--phos); font-size: 1.1rem; }
.alloc-row .btn { padding: 2px 10px; }

/* ===== 结局报告（档案/收据风）===== */
.report {
  max-width: 640px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line-glow);
  padding: 30px 34px; position: relative;
  box-shadow: 0 0 40px rgba(109,255,184,.1);
}
.report::before, .report::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--panel) 0 8px, transparent 8px 16px);
}
.report::before { top: -4px; } .report::after { bottom: -4px; transform: scaleY(-1); }
.report .rpt-head { text-align: center; border-bottom: 2px dashed var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.report .rpt-ending { font-size: 2rem; letter-spacing: .25em; color: var(--phos); text-shadow: 0 0 16px rgba(109,255,184,.6); }
.report .rpt-grade {
  display: inline-block; margin-top: 10px; padding: 2px 18px;
  border: 2px solid var(--amber); color: var(--amber); font-size: 1.4rem; font-weight: bold;
  transform: rotate(-4deg); text-shadow: 0 0 10px rgba(255,180,84,.5);
}
.report .rpt-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .85rem; border-bottom: 1px dashed var(--line); }
.report .rpt-row .k { color: var(--dim); }
.report .rpt-timeline { max-height: 240px; overflow-y: auto; font-size: .8rem; line-height: 1.9; color: var(--dim); }
.report .rpt-timeline b { color: var(--text); font-weight: normal; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--phos-dim); }

/* ===== Boss 战（P5 风全屏战斗层）===== */
#battle-root { position: fixed; inset: 0; z-index: 900; background: rgba(4,6,8,.96); overflow-y: auto; animation: fadein .25s ease; }
#battle-root.shake { animation: btshake .3s; }
.bt-stage { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; min-height: 100vh; }
.bt-boss { border: 1px solid var(--line-glow); background: var(--panel); padding: 14px 18px; transform: skewX(-2deg); box-shadow: 8px 8px 0 rgba(0,0,0,.4); }
.bt-boss-title h2 { color: var(--phos); letter-spacing: .2em; text-shadow: 0 0 14px rgba(109,255,184,.6); display: inline; font-size: 1.3rem; }
.bt-stage-tag { color: var(--amber); font-size: .75rem; letter-spacing: .2em; margin-right: 12px; }
.bt-boss-body { display: flex; gap: 16px; margin-top: 10px; }
.bt-img { width: 148px; height: 148px; object-fit: cover; border: 1px solid var(--line-glow); background: var(--bg2); flex: none; }
.bt-boss-info { flex: 1; min-width: 0; }
.bt-taunt { color: var(--dim); font-size: .85rem; min-height: 2.4em; line-height: 1.6; }
.bt-hp-label { font-size: .75rem; color: var(--dim); margin: 6px 0 4px; }
.bt-bar { height: 12px; background: var(--bg); border: 1px solid var(--line); }
.bt-bar > i { display: block; height: 100%; transition: width .35s; }
.bt-bar.boss > i { background: var(--amber); box-shadow: 0 0 8px rgba(255,180,84,.6); }
.bt-bar.player > i { background: var(--cyan); box-shadow: 0 0 8px rgba(88,230,217,.6); }
.bt-bar.player.low > i { background: var(--red); box-shadow: 0 0 8px rgba(255,84,112,.6); }
.bt-status { margin-top: 6px; min-height: 20px; }
.bt-mid { border: 1px solid var(--line); background: #05080a; padding: 10px 14px; }
.bt-logbox { overflow-y: auto; height: 200px; font-size: .85rem; line-height: 1.9; }
.bt-log.weak { color: var(--phos); font-weight: bold; }
.bt-log.bad { color: var(--red); }
.bt-log.good { color: var(--cyan); }
.bt-log.sys { color: var(--dim); }
.bt-log.onemore { color: var(--amber); font-weight: bold; letter-spacing: .2em; }
.bt-log.impress { color: #ffd166; font-weight: bold; }
.bt-player { border: 1px solid var(--line-glow); background: var(--panel); padding: 12px 16px; box-shadow: 8px 8px 0 rgba(0,0,0,.4); }
.bt-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin-top: 10px; }
.bt-skill { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 10px; cursor: pointer; font-family: var(--font-mono); text-align: left; transform: skewX(-3deg); transition: all .1s; }
.bt-skill:hover { border-color: var(--phos); box-shadow: 0 0 12px rgba(109,255,184,.2); transform: skewX(-3deg) translateY(-2px); }
.bt-skill .sk-name { display: block; font-size: .9rem; }
.bt-skill .sk-tag { display: block; font-size: .7rem; margin-top: 4px; }
.sk-tag.weak { color: var(--phos); text-shadow: 0 0 6px rgba(109,255,184,.7); }
.sk-tag.resist { color: var(--red); }
.sk-tag.unknown, .sk-tag.normal { color: var(--dim); }
.bt-items { display: flex; gap: 8px; margin-top: 8px; }
.bt-item { background: var(--panel2); border: 1px solid var(--line); color: var(--cyan); padding: 6px 12px; font-family: var(--font-mono); cursor: pointer; font-size: .8rem; }
.bt-item.gold { color: var(--amber); }
.bt-item span { color: var(--dim); margin-left: 6px; font-size: .7rem; }
.bt-item:disabled, .bt-skill:disabled { opacity: .35; pointer-events: none; }
@keyframes btshake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.anim-weak { animation: weakflash .6s; display: inline-block; }
@keyframes weakflash { 0% { transform: scale(1.5); color: #fff; text-shadow: 0 0 22px rgba(109,255,184,1); } 100% { transform: none; } }
.anim-onemore { animation: onemorebanner .8s; display: inline-block; }
@keyframes onemorebanner { 0% { letter-spacing: .8em; opacity: 0; } 30% { opacity: 1; } 100% { letter-spacing: .2em; } }
.anim-impress { animation: impressgold .9s; display: inline-block; }
@keyframes impressgold { 0% { color: #fff; text-shadow: 0 0 26px rgba(255,209,102,1); } 100% { color: #ffd166; } }