/* ===========================================================
 * 《微·危》样式 —— 古风暖色调
 * =========================================================== */
:root {
  --paper: #f5ecd7;       /* 仿古纸底色 */
  --border: #8b7355;      /* 边框 */
  --gold: #c9a84c;        /* 金色 */
  --own: #4f8a4f;         /* 己方 绿 */
  --own-bg: #e3f0e3;
  --enemy: #b23a3a;       /* 敌方 红 */
  --enemy-bg: #f3e0e0;
  --neutral: #8a8170;     /* 中立 灰 */
  --neutral-bg: #e8e4da;
  --ink: #3a3026;
  --fog: #cabfa6;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: KaiTi, "楷体", "STKaiti", serif;
  font-size: 16px;
}
#app { min-height: 100%; }

/* 屏幕切换 */
.screen { display: none; padding: 18px; max-width: 1100px; margin: 0 auto; }
.screen.active { display: block; }

/* 标题 */
.game-title {
  text-align: center; font-size: 48px; letter-spacing: 12px;
  color: var(--border); margin: 28px 0 4px;
  font-family: LiSu, "隶书", KaiTi, serif;
}
.subtitle { text-align: center; color: var(--neutral); margin: 0 0 16px; letter-spacing: 2px; }
.welcome {
  max-width: 640px; margin: 0 auto 24px; text-align: center; line-height: 1.7;
  background: #fbf4e2; border: 2px solid var(--border); border-radius: 10px;
  padding: 14px 18px; color: var(--ink);
}
.section-title { text-align: center; color: var(--border); font-size: 28px; }
.hint { text-align: center; color: var(--neutral); }

/* 剧本 / 英雄 网格 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.script-card {
  background: linear-gradient(160deg, #fbf4e2, #efe2c4);
  border: 2px solid var(--border); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.script-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(139,115,85,.3); }
.script-card h3 { margin: 0 0 6px; color: var(--border); font-size: 22px; }
.script-card .rec { color: var(--gold); font-weight: bold; }
.script-card .desc { color: var(--neutral); font-size: 14px; }
.script-card.tutorial-flag { border-color: var(--own); box-shadow: 0 0 0 2px var(--own) inset; }
.script-card .lock-note { color: var(--enemy); font-size: 13px; margin-top: 4px; }

.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.hero-card {
  background: #fbf4e2; border: 2px solid var(--border); border-radius: 10px;
  padding: 12px; cursor: pointer; transition: transform .12s;
}
.hero-card:hover { transform: translateY(-3px); }
.hero-card.recommend { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.hero-card.locked { opacity: .4; cursor: not-allowed; }
.hero-card h3 { margin: 0 0 4px; color: var(--border); }
.hero-card .traits { color: var(--neutral); font-size: 13px; }
.hero-card .trait-tag { display: inline-block; background: var(--neutral-bg); border-radius: 4px; padding: 1px 6px; margin: 2px 3px 0 0; }

.back-btn { display: block; margin: 20px auto 0; }

/* 顶栏 */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.hud-chip { background: var(--border); color: var(--paper); border-radius: 14px; padding: 4px 12px; margin-right: 6px; font-size: 14px; }
.hud-portrait { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; margin-right: 8px; background: var(--neutral-bg); }

/* 选英雄头像 */
.hero-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-portrait { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; margin-bottom: 6px; background: var(--neutral-bg); }
.hero-card.recommend .hero-portrait { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }

/* 对局区 */
.play-area { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }

/* 实时实力条 */
.power-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fbf4e2; border: 2px solid var(--border); border-radius: 10px;
  padding: 8px 14px; margin-bottom: 12px;
}
.pw { display: flex; align-items: baseline; gap: 8px; }
.pw-label { font-size: 14px; color: var(--neutral); }
.pw-num { font-size: 30px; font-weight: bold; font-family: LiSu, "隶书", KaiTi, serif; line-height: 1; }
.pw-own .pw-num { color: var(--own); }
.pw-enemy .pw-num { color: var(--enemy); }
.pw-note { font-size: 12px; color: var(--neutral); }

.board-wrap { flex: 1 1 420px; }
.board {
  display: grid; gap: 4px; background: var(--border); padding: 4px; border-radius: 8px;
  width: 100%; max-width: 480px; margin: 0 auto;
}
.cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; transition: outline .1s;
  font-size: 13px; line-height: 1.1;
}
.cell .icon { font-size: 22px; }
.cell .lv { position: absolute; bottom: 2px; right: 4px; font-size: 13px; font-weight: bold; }
.cell.benign { background: var(--own-bg); color: var(--own); border: 1px solid var(--own); }
.cell.malign { background: var(--enemy-bg); color: var(--enemy); border: 1px solid var(--enemy); }
.cell.neutral { background: var(--neutral-bg); color: var(--neutral); border: 1px solid var(--neutral); }
.cell.void { background: repeating-linear-gradient(45deg, #efe7d2, #efe7d2 6px, #e7dcc1 6px, #e7dcc1 12px); color: var(--neutral); }
.cell.fog { background: var(--fog); color: #8a7f63; }
.cell.fog::after { content: "雾"; font-size: 18px; opacity: .7; }
.cell.selectable { outline: 3px solid var(--gold); outline-offset: -2px; }
.cell.targetable { outline: 3px solid var(--gold); cursor: crosshair; }
.cell.delusion-disguised { /* 伪装妄念显示为绿色实力 */ }
/* 天时光芒（文档 2.1：闪耀时牌发光） */
.cell.shine { box-shadow: 0 0 0 2px #f2c64b inset, 0 0 12px 3px rgba(242,198,75,.75); animation: shinePulse 1.2s ease-in-out infinite; }
@keyframes shinePulse { 0%,100% { box-shadow: 0 0 0 2px #f2c64b inset, 0 0 10px 2px rgba(242,198,75,.55); } 50% { box-shadow: 0 0 0 2px #f2c64b inset, 0 0 16px 5px rgba(242,198,75,.9); } }

/* 侧栏 */
.side { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.panel { background: #fbf4e2; border: 2px solid var(--border); border-radius: 8px; padding: 10px; }
.traits-panel h4 { margin: 0 0 6px; color: var(--border); }
.trait-row { display: flex; flex-wrap: wrap; gap: 4px; }
.trait-pill { background: var(--neutral-bg); border-radius: 12px; padding: 2px 8px; font-size: 13px; }
.log-panel { max-height: 220px; overflow-y: auto; }
.log-panel h4 { margin: 0 0 6px; color: var(--border); }
.log-line { font-size: 13px; padding: 2px 0; border-bottom: 1px dashed #ddd3bd; }
.log-line .turn-tag { color: var(--gold); font-weight: bold; }

/* 手牌与按钮 */
.handbar { margin-top: 16px; }
.hand { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-height: 96px; }
.hand-card {
  background: linear-gradient(160deg, #fbf4e2, #ece0c2);
  border: 2px solid var(--border); border-radius: 8px;
  padding: 8px; width: 92px; cursor: pointer; text-align: center;
  transition: transform .1s; position: relative;
}
.hand-card:hover { transform: translateY(-4px); }
.hand-card.selected { outline: 3px solid var(--gold); transform: translateY(-6px); }
.hand-card .cname { font-weight: bold; color: var(--border); }
.hand-card .cdesc { font-size: 11px; color: var(--neutral); margin-top: 3px; line-height: 1.2; }
.hand-card.disabled { opacity: .45; cursor: not-allowed; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-action, .btn-primary, .btn-ghost {
  font-family: inherit; cursor: pointer; border-radius: 8px; font-size: 15px;
}
.btn-action { background: var(--paper); border: 2px solid var(--border); color: var(--border); padding: 8px 16px; }
.btn-action:hover { background: var(--border); color: var(--paper); }
.btn-action:disabled { opacity: .4; cursor: not-allowed; }
.btn-danger { border-color: var(--enemy); color: var(--enemy); }
.btn-danger:hover { background: var(--enemy); color: var(--paper); }
.btn-home { margin-left: auto; }
.btn-primary { background: var(--gold); border: none; color: #4a3a10; padding: 10px 24px; font-weight: bold; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: none; border: none; color: var(--border); text-decoration: underline; }

/* 浮动说明 */
.tooltip {
  position: fixed; z-index: 50; background: #2c241a; color: #f5ecd7;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; max-width: 240px;
  pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tooltip.hidden { display: none; }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(40,32,22,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal.hidden { display: none; }
.modal-box { background: var(--paper); border: 3px solid var(--border); border-radius: 12px; padding: 22px; max-width: 460px; width: 100%; text-align: center; }
.modal-box.wide { max-width: 560px; text-align: left; }
.modal-box h3 { color: var(--border); margin-top: 0; text-align: center; }
.showdown-body { font-size: 14px; max-height: 60vh; overflow-y: auto; }
.showdown-body .step { padding: 6px 0; border-bottom: 1px dashed #ddd3bd; }
.showdown-body .num { color: var(--gold); font-weight: bold; }
.showdown-body .final { font-size: 18px; font-weight: bold; margin-top: 8px; }
.showdown-body .win { color: var(--own); }
.showdown-body .lose { color: var(--enemy); }
.end-text { font-size: 20px; color: var(--border); }

/* 报错弹窗 */
.error-hint { font-size: 13px; color: var(--neutral); text-align: center; margin: 4px 0 10px; }
.error-text {
  background: #2c241a; color: #f5ecd7; border-radius: 6px; padding: 12px;
  font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.5;
  max-height: 44vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; text-align: left;
}
.error-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* 响应式：移动端 */
@media (max-width: 640px) {
  .play-area { flex-direction: column; }
  .side { width: 100%; }
  .board { max-width: 96vw; }
  .hand-card { width: 80px; }
  .game-title { font-size: 38px; }
}