/* ========== 龙虎斗翻翻棋 · 怀旧版 ========== */
:root {
  --cream: #f6efdd;
  --cream-deep: #eddec6;
  --ink: #4a3226;
  --red: #c0392b;
  --red-deep: #8f2b20;
  --blue: #2c5f96;
  --blue-deep: #1f4468;
  --gold: #d4a017;
  --wood1: #8a3a2a;
  --wood2: #6f2c1f;
  --board-line: rgba(246, 236, 214, .5);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,252,240,.9), rgba(255,252,240,0) 60%),
    radial-gradient(900px 500px at 50% 115%, rgba(120,80,40,.18), rgba(120,80,40,0) 60%),
    repeating-linear-gradient(0deg, rgba(160,120,70,.035) 0 2px, rgba(0,0,0,0) 2px 4px),
    var(--cream-deep);
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 620px; margin: 0 auto; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); }
.screen { min-height: 96vh; display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }

/* ---------- 主页 ---------- */
#screen-home { justify-content: center; }
.home-box {
  width: min(92vw, 420px);
  text-align: center;
  background: linear-gradient(rgba(255,250,235,.6), rgba(255,250,235,.25));
  border: 3px solid var(--red);
  border-radius: 18px;
  padding: 26px 22px 30px;
  box-shadow: 0 10px 30px rgba(90,50,20,.25), inset 0 0 0 6px rgba(255,255,255,.35);
}
.title-art { width: 100%; max-width: 360px; mix-blend-mode: multiply; }
.home-sub { margin: 2px 0 18px; letter-spacing: 2px; color: #7a5b3a; font-size: 15px; }
.home-tip { margin: 14px 0 0; font-size: 13px; color: #96754d; }
.big-btn {
  display: block; width: 100%; margin: 10px 0 0; padding: 12px 0;
  font-family: inherit; font-size: 20px; letter-spacing: 4px; color: var(--red-deep);
  background: linear-gradient(#fff8e8, #f3e3bd);
  border: 2px solid var(--red); border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(143,43,32,.45);
  transition: transform .08s ease, box-shadow .08s ease;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(143,43,32,.45); }
.big-btn.primary { color: #fff8e8; background: linear-gradient(#d95340, #b03325); border-color: #7e2015; }

/* ---------- 顶部 HUD ---------- */
#screen-game { gap: 8px; padding-top: 8px; }
.hud {
  width: min(94vw, 480px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
.camp { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.camp-img { height: 34px; display: flex; align-items: center; }
.camp-img img { height: 34px; }
.camp-img.unknown {
  width: 92px; height: 32px; align-items: center; justify-content: center;
  border: 2px dashed #a58a5e; border-radius: 8px; color: #a58a5e; font-size: 18px;
  background: rgba(255,250,235,.5);
}
.camp-count { font-size: 12px; color: #7a5b3a; letter-spacing: 1px; }
.hud-mid img { height: 42px; display: block; }
.hud-mid img.thinking { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); filter: brightness(1.12); } }

#message {
  margin: 0; min-height: 22px; font-size: 15px; letter-spacing: 1px; text-align: center;
  color: #6d4a26;
}

/* ---------- 棋盘：4×4 线交点式 ---------- */
#board {
  position: relative;
  width: min(94vw, 480px);
  aspect-ratio: 430 / 524;
  /* 列间距 / 行间距 / 棋子宽 / 棋子高（均为棋盘百分比） */
  --sx: 24.32%;
  --sy: 25%;
  --pw: 19.2%;
  --ph: 21%;
  perspective: 900px;
  background: linear-gradient(160deg, var(--wood1), var(--wood2));
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(60,25,8,.45), inset 0 2px 6px rgba(255,220,180,.25), inset 0 -3px 8px rgba(0,0,0,.3);
  touch-action: manipulation;
}
/* 棋盘线：4 横 4 竖，交点即棋位 */
.line { position: absolute; background: var(--board-line); border-radius: 2px; }
.line.v {
  top: 12.5%; bottom: 12.5%; width: 2px;
  left: calc(50% + (var(--k) - 1.5) * var(--sx));
  margin-left: -1px;
}
.line.h {
  left: 12.5%; right: 12.5%; height: 2px;
  top: calc(50% + (var(--k) - 1.5) * var(--sy));
  margin-top: -1px;
}

.cell {
  position: absolute;
  left: calc(50% + (var(--k) - 1.5) * var(--sx));
  top: calc(50% + (var(--r) - 1.5) * var(--sy));
  width: var(--pw);
  height: var(--ph);
  transform: translate(-50%, -50%);
  background: transparent; border: none; padding: 0; cursor: pointer;
  border-radius: 10px;
}
.cell.empty::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,230,190,.26); border-radius: 50%;
}
.cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- 棋子（卡牌，常驻棋盘层，靠 left/top 滑动） ---------- */
.card {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--pw);
  height: var(--ph);
  transform: translate(-50%, -50%) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform, left, top;
  pointer-events: none;               /* 点击全部落在格子上 */
  transition: left .3s ease, top .3s ease;
  animation: deal-in .45s backwards;
  border-radius: 10px;
  z-index: 2;
}
.card.moving { z-index: 30; }
@keyframes deal-in { from { opacity: 0; transform: translate(-50%, -50%) translateY(-26px) scale(.85); } }
.card.revealed { transform: translate(-50%, -50%) rotateY(180deg); }

/* 翻牌动画：抬起 → 翻转 → 落定 */
.card.reveal-anim { animation: flip-reveal .62s cubic-bezier(.3, .1, .25, 1) backwards; }
@keyframes flip-reveal {
  0%   { transform: translate(-50%, -50%) translateY(0) rotateY(0deg) scale(1); }
  50%  { transform: translate(-50%, -50%) translateY(-9%) rotateY(90deg) scale(1.14); }
  100% { transform: translate(-50%, -50%) translateY(0) rotateY(180deg) scale(1); }
}

.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
.face img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
}
.face.back img { box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.face.front { transform: rotateY(180deg); }
.face.front img { box-shadow: 0 4px 10px rgba(0,0,0,.45); }

.card.dying { animation: die .38s forwards; z-index: 5; }
@keyframes die {
  to { transform: translate(-50%, -50%) rotateY(180deg) scale(.2) rotate(70deg); opacity: 0; }
}

/* 选中与提示 */
.cell.selected { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
.cell.hint-move::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2.5px dashed var(--gold); border-radius: 50%;
  animation: hint-pulse .9s ease-in-out infinite;
}
.cell.hint-capture { outline: 3px dashed #ff5b45; outline-offset: 3px; border-radius: 12px; }
.cell.hint-capture::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(255,91,69,.45) inset;
  animation: hint-pulse .7s ease-in-out infinite;
  pointer-events: none; z-index: 3;
}
@keyframes hint-pulse { 50% { opacity: .35; } }
.cell.shake { animation: shake .38s; }
@keyframes shake {
  20% { transform: translate(-50%, -50%) translateX(-5px); }
  40% { transform: translate(-50%, -50%) translateX(5px); }
  60% { transform: translate(-50%, -50%) translateX(-4px); }
  80% { transform: translate(-50%, -50%) translateX(3px); }
}

/* ---------- 阵亡托盘 ---------- */
.trays {
  width: min(94vw, 480px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.tray {
  background: rgba(255,250,235,.55);
  border: 1.5px solid rgba(140,100,55,.4); border-radius: 10px;
  padding: 4px 8px 6px; min-height: 52px;
}
.tray h3 {
  margin: 2px 0 3px; font-size: 12px; letter-spacing: 2px; color: #8a6a42; font-weight: 600;
}
.tray-list { display: flex; flex-wrap: wrap; gap: 2px; min-height: 34px; }
.tray-list img {
  height: 34px; border-radius: 4px; margin-right: -10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.tray .none { font-size: 12px; color: #b09a76; align-self: center; }

/* ---------- 工具栏 ---------- */
.toolbar {
  margin-top: 2px;
  display: flex; gap: 6px; justify-content: center;
}
.toolbar button {
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit; color: #6d4a26; font-size: 12px; letter-spacing: 1px;
  padding: 4px 8px; border-radius: 10px;
}
.toolbar button img { width: 44px; height: 44px; transition: transform .12s; }
.toolbar button:hover img { transform: scale(1.08); }
.toolbar button:active img { transform: scale(.95); }
.toolbar #btn-sound.muted img { filter: grayscale(1) brightness(1.1); opacity: .6; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(45, 25, 8, .58);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  position: relative; width: min(92vw, 520px); max-height: 82vh; overflow: auto;
  background: var(--cream); border: 3px solid var(--red); border-radius: 16px;
  padding: 18px 22px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4), inset 0 0 0 5px rgba(255,255,255,.4);
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-box h2 {
  margin: 2px 0 10px; text-align: center; letter-spacing: 6px; color: var(--red-deep);
}
.modal-close {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--red); background: #fff6e6; color: var(--red-deep);
  font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.rules-list { margin: 0; padding-left: 20px; line-height: 1.75; font-size: 15px; }
.rules-list li { margin-bottom: 8px; }
.rules-list b { color: var(--red-deep); }
.rules-list ul { margin: 4px 0 0; padding-left: 18px; }
.result-box { text-align: center; }
#result-badge { width: 120px; margin: 8px auto 2px; display: block; }
#result-text { font-size: 19px; letter-spacing: 2px; margin: 6px 0 12px; color: #6d4a26; }
.result-box .row { display: flex; gap: 10px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
  background: rgba(50, 30, 12, .88); color: #ffe9c8;
  padding: 9px 18px; border-radius: 22px; font-size: 14px; letter-spacing: 1px;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 200;
  max-width: 86vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 420px) {
  .hud-mid img { height: 36px; }
  .camp-img img { height: 30px; }
  .toolbar button img { width: 38px; height: 38px; }
}