/* ============================================================
   《小小棋靈王：象棋冒險大挑戰》 style.css
   可愛、明亮、童趣、東方奇幻風
   ============================================================ */

:root {
  --bg: #FFF6E5;
  --bg2: #FFE9C7;
  --panel: #FFFFFF;
  --ink: #4A3728;
  --primary: #FF8A3D;
  --primary-dk: #E86A1A;
  --teal: #2EC4B6;
  --red: #D63031;
  --black-p: #2D3436;
  --wood: #F6DCA8;
  --wood-line: #A0713F;
  --gold: #FFC531;
  --danger: #FF5252;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(160, 113, 63, .18), 0 10px 24px rgba(160, 113, 63, .15);
}

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

body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #FFE3B3 0 12%, transparent 13%),
    radial-gradient(circle at 85% 15%, #FFDDE1 0 10%, transparent 11%),
    radial-gradient(circle at 80% 85%, #D9F7F0 0 12%, transparent 13%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-user-select: none; user-select: none;
}

/* ---------------- 畫面切換 ---------------- */
.screen { display: none; min-height: 100vh; padding: 20px; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ---------------- 通用按鈕 ---------------- */
.btn {
  font-family: inherit; font-weight: 800; color: var(--ink);
  background: #fff; border: 3px solid var(--wood-line);
  border-radius: 999px; padding: 10px 22px; font-size: 17px;
  cursor: pointer; box-shadow: 0 4px 0 rgba(160, 113, 63, .25);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(160, 113, 63, .25); }
.btn.primary { background: var(--primary); border-color: var(--primary-dk); color: #fff; }
.btn.teal { background: var(--teal); border-color: #1FA396; color: #fff; }
.btn.big { font-size: 21px; padding: 14px 30px; width: 320px; }
.btn.small { font-size: 14px; padding: 7px 16px; }
.btn.ghost { background: #FFF8EC; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------------- 首頁 ---------------- */
.home-inner { text-align: center; margin-top: 4vh; }
.mascot { font-size: 72px; }
.bounce { animation: bounce 1.6s ease-in-out infinite; display: inline-block; }
@keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }

.game-title {
  font-size: 56px; letter-spacing: 6px; color: var(--primary-dk);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(160,113,63,.2);
  margin: 6px 0 2px;
}
.game-subtitle {
  font-size: 22px; font-weight: 800; color: var(--teal);
  letter-spacing: 10px; margin-bottom: 26px;
}
.menu { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.home-profile { margin-top: 22px; font-size: 15px; font-weight: 700; color: #8a6d4f; }

/* ---------------- 標題列（子畫面） ---------------- */
.page-head {
  width: 100%; max-width: 980px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
}
.page-title { font-size: 28px; font-weight: 900; color: var(--primary-dk); letter-spacing: 3px; }

/* ---------------- 角色選擇 ---------------- */
.char-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; width: 100%; max-width: 980px;
}
.char-card {
  background: var(--panel); border: 3px solid #F0D9B5; border-radius: var(--radius);
  padding: 18px 14px; text-align: center; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s, border-color .12s;
}
.char-card:hover { transform: translateY(-6px) rotate(-1deg); }
.char-card.selected { border-color: var(--primary); background: #FFF3E2; }
.char-emoji {
  font-size: 54px; width: 92px; height: 92px; line-height: 88px; margin: 0 auto 8px;
  border-radius: 50%; border: 4px solid var(--gold);
  background: radial-gradient(#fff, #FFEFCF);
}
.char-name { font-size: 22px; font-weight: 900; }
.char-title { font-size: 14px; color: var(--teal); font-weight: 800; margin-bottom: 6px; }
.char-desc { font-size: 13px; line-height: 1.55; min-height: 60px; }
.char-ability {
  margin-top: 8px; font-size: 12.5px; font-weight: 800; color: #fff;
  background: var(--teal); border-radius: 999px; padding: 4px 10px; display: inline-block;
}
.char-badge { margin-top: 8px; font-weight: 900; color: var(--primary-dk); font-size: 14px; min-height: 20px; }

/* ---------------- 劇情地圖 ---------------- */
.map-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; width: 100%; max-width: 1000px;
}
.map-card {
  background: var(--panel); border: 3px solid #F0D9B5; border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); cursor: pointer; position: relative;
  transition: transform .12s;
}
.map-card:hover { transform: translateY(-4px); }
.map-card.locked { filter: grayscale(.75); opacity: .75; cursor: default; }
.map-icon { font-size: 40px; }
.map-ch { font-size: 13px; font-weight: 800; color: var(--teal); margin-top: 4px; }
.map-name { font-size: 19px; font-weight: 900; margin: 2px 0; }
.map-place { font-size: 13px; color: #8a6d4f; font-weight: 700; }
.map-stars { margin-top: 6px; font-size: 18px; letter-spacing: 2px; }
.map-lock { position: absolute; top: 12px; right: 14px; font-size: 22px; }

/* ---------------- 對戰設定 ---------------- */
.setup-card {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 30px; width: 100%; max-width: 520px;
}
.setup-row { margin-bottom: 20px; }
.setup-label { font-weight: 900; font-size: 17px; margin-bottom: 8px; }
.opt-group { display: flex; gap: 10px; flex-wrap: wrap; }
.opt {
  border: 3px solid #E8D5B5; background: #FFFBF2; border-radius: 14px;
  padding: 10px 16px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit;
}
.opt.on { border-color: var(--primary); background: #FFE9D2; color: var(--primary-dk); }
.setup-note { font-size: 13px; color: #8a6d4f; margin-top: 6px; }

/* ---------------- 對戰畫面 ---------------- */
.game-top {
  width: 100%; max-width: 1080px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px; gap: 10px;
}
#game-mode-title { font-size: 20px; font-weight: 900; color: var(--primary-dk); }
.turn-badge {
  font-size: 17px; font-weight: 900; padding: 8px 20px; border-radius: 999px;
  border: 3px solid; background: #fff;
}
.turn-badge.r { color: var(--red); border-color: var(--red); }
.turn-badge.b { color: var(--black-p); border-color: var(--black-p); }
.turn-badge.thinking { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

.game-main {
  display: flex; gap: 22px; align-items: flex-start; justify-content: center;
  width: 100%; max-width: 1080px; flex-wrap: wrap;
}

/* 棋盤 */
.board-wrap {
  background: linear-gradient(#F9E4B7, var(--wood));
  border: 6px solid var(--wood-line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 4px; position: relative;
}
#board { position: relative; width: 592px; height: 656px; }
#board svg { position: absolute; inset: 0; }

.piece {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; cursor: pointer; z-index: 3;
  font-family: "DFKai-SB", "BiauKai", "Microsoft JhengHei", serif;
  background: radial-gradient(circle at 35% 30%, #FFFDF5, #F3E0BC 70%);
  box-shadow: inset 0 0 0 3px currentColor, inset 0 0 0 6px #FFF8E8,
              0 4px 0 rgba(120, 80, 40, .35), 0 6px 10px rgba(120, 80, 40, .25);
  transition: transform .1s;
}
.piece.r { color: var(--red); }
.piece.b { color: var(--black-p); }
.piece:hover { transform: scale(1.07); }
.piece.selected {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 3px currentColor, inset 0 0 0 6px #FFF8E8,
              0 0 0 5px var(--gold), 0 0 22px 6px rgba(255, 197, 49, .8);
  animation: wiggle .5s ease-in-out infinite alternate; z-index: 5;
}
@keyframes wiggle { from { transform: scale(1.12) rotate(-3deg) } to { transform: scale(1.12) rotate(3deg) } }
.piece.pop { animation: pop .3s ease-out; }
@keyframes pop { 0% { transform: scale(1.5) } 70% { transform: scale(.92) } 100% { transform: scale(1) } }

.hit { position: absolute; width: 60px; height: 60px; z-index: 4; cursor: pointer; }

.dot {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(46, 196, 182, .85); border: 3px solid #fff;
  z-index: 4; pointer-events: none; animation: dotIn .25s ease-out;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.dot.capture {
  width: 52px; height: 52px; background: transparent;
  border: 5px solid rgba(255, 138, 61, .95);
  box-shadow: 0 0 10px rgba(255, 138, 61, .55), inset 0 0 8px rgba(255, 138, 61, .35);
  align-items: flex-start; justify-content: flex-end; font-size: 16px;
}
.dot.danger { background: var(--danger); }
.dot.capture.danger { background: transparent; border-color: var(--danger); }
@keyframes dotIn { from { transform: scale(.3); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.ring {
  position: absolute; width: 58px; height: 58px; border-radius: 50%;
  border: 4px dashed var(--teal); z-index: 2; pointer-events: none;
}
.ring.hintring { border-color: var(--gold); border-style: solid; animation: pulse 1s infinite; }

.spot {
  position: absolute; border: 5px dashed var(--primary); border-radius: 14px;
  background: rgba(255, 197, 49, .22); z-index: 6; pointer-events: none;
  animation: pulse 1.2s infinite;
}

/* 將軍橫幅 */
#banner {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 10; pointer-events: none;
}
#banner.show { display: flex; }
#banner span {
  font-size: 74px; font-weight: 900; color: #fff; letter-spacing: 12px;
  background: rgba(214, 48, 49, .92); padding: 14px 44px; border-radius: 24px;
  border: 5px solid #fff; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  animation: bannerIn .5s ease-out;
}
@keyframes bannerIn { 0% { transform: scale(2.2); opacity: 0 } 60% { transform: scale(.95) } 100% { transform: scale(1); opacity: 1 } }

/* 側欄 */
.side-panel { width: 330px; display: flex; flex-direction: column; gap: 14px; }
.bubble-row { display: flex; gap: 10px; align-items: flex-start; }
.avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(#fff, #FFEFCF); border: 3px solid var(--gold);
}
.bubble {
  background: var(--panel); border: 3px solid #F0D9B5; border-radius: 4px 18px 18px 18px;
  padding: 12px 14px; font-size: 15px; font-weight: 700; line-height: 1.6;
  min-height: 58px; flex: 1; box-shadow: var(--shadow);
}
.captured-box {
  background: var(--panel); border: 3px solid #F0D9B5; border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.cap-title { font-weight: 900; font-size: 14px; margin-bottom: 6px; color: #8a6d4f; }
.cap-row { font-size: 15px; font-weight: 800; min-height: 26px; line-height: 1.9; }
.cap-piece {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%; font-size: 14px;
  align-items: center; justify-content: center; margin: 1px 2px;
  background: #F7E9CB; box-shadow: inset 0 0 0 2px currentColor;
  font-family: "DFKai-SB", "BiauKai", serif; font-weight: 900;
}
.side-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.side-btns .btn { flex: 1 1 44%; font-size: 15px; padding: 9px 8px; }
.toggle { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--primary); }

.tutorial-panel {
  background: #FFF3D6; border: 3px solid var(--gold); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
}
#tutorial-text { font-size: 15.5px; font-weight: 800; line-height: 1.7; margin-bottom: 10px; }
.tutorial-progress { font-size: 13px; font-weight: 900; color: #B8860B; margin-bottom: 6px; }

/* ---------------- 彈窗 ---------------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(74, 55, 40, .45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--panel); border-radius: 24px; border: 4px solid var(--gold);
  box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 28px 30px;
  max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto;
  text-align: center; animation: modalIn .25s ease-out;
}
@keyframes modalIn { from { transform: scale(.8) translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-title { font-size: 28px; font-weight: 900; color: var(--primary-dk); margin-bottom: 10px; }
.modal-body { font-size: 16px; font-weight: 700; line-height: 1.8; margin-bottom: 18px; }
.modal-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.stars-row { font-size: 52px; letter-spacing: 8px; margin: 8px 0 4px; }
.stars-row .off { filter: grayscale(1); opacity: .35; }
.star-anim { display: inline-block; animation: starIn .5s ease-out backwards; }
.star-anim:nth-child(2) { animation-delay: .25s; }
.star-anim:nth-child(3) { animation-delay: .5s; }
@keyframes starIn { 0% { transform: scale(3) rotate(-40deg); opacity: 0 } 100% { transform: none; opacity: 1 } }

.analysis {
  text-align: left; background: #FFF8EC; border-radius: 14px; padding: 12px 16px;
  font-size: 14.5px; line-height: 1.9; margin: 10px 0;
}

/* 棋子圖鑑 */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; text-align: left; }
.gal-card { background: #FFF8EC; border: 2px solid #F0D9B5; border-radius: 14px; padding: 10px; }
.gal-pieces { font-size: 22px; margin-bottom: 4px; }
.gal-name { font-weight: 900; font-size: 15px; }
.gal-desc { font-size: 12.5px; line-height: 1.55; }

/* 紀錄 */
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; font-size: 15px; font-weight: 800; }
.record-grid div { background: #FFF8EC; border-radius: 12px; padding: 10px 14px; }

/* RWD */
@media (max-width: 1020px) {
  .game-main { flex-direction: column; align-items: center; }
  .side-panel { width: 100%; max-width: 600px; }
}
@media (max-width: 640px) {
  #board { transform: scale(.55); transform-origin: top left; }
  .board-wrap { width: calc(592px * .55 + 8px); height: calc(656px * .55 + 8px); overflow: hidden; }
  .game-title { font-size: 38px; }
  .btn.big { width: 260px; }
}