/* ===== หน้าเล่นเกม =====
   มือถือแนวตั้ง : เรียงบนลงล่าง (กระดาน -> แผน)
   จอกว้าง/แนวนอน: ซ้าย = กระดาน, ขวา = แผน + ปุ่ม, สูงเท่าจอพอดี ไม่ต้องเลื่อน */

/* --- แถวหัว: ปุ่มกลับ + ชื่อด่าน + เวลา อยู่บรรทัดเดียว --- */
.game-card .game-top { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
.game-card .game-top .back { margin: 0; flex: 0 0 auto; background: #f2efff; border-radius: 13px; padding: 9px 15px; font-size: 20px; line-height: 1; }
.game-title { flex: 1 1 auto; min-width: 0; }
.game-title .eyebrow { margin: 0; }
.game-title h2 { margin: 0; font-size: 23px; }

/* จุดบอกรอบ: 10 จุดต่อหนึ่งด่าน จุดที่กำลังเล่นใช้สีประจำด่าน (--tint) */
.round-dots { display: flex; gap: 6px; justify-content: center; margin: 12px 0 14px; }
.round-dots i { flex: 1 1 0; max-width: 52px; height: 11px; border-radius: 99px; background: #eeeaf8; transition: background .25s; }
.round-dots i.done { background: var(--mint); }
.round-dots i.now { background: var(--tint, var(--yellow)); box-shadow: 0 0 0 3px #7057d922; }

/* --- สีประจำด่าน: กระดานและสิ่งกีดขวางเปลี่ยนตาม --tint/--soft ที่ตั้งบน .game-card --- */
.game-card .game-board { background: var(--soft, #ecf9f6); }
.game-card .cell.wall { background: var(--tint, #b5a9eb); }
.game-card .cell.goal { background: #fff; box-shadow: inset 0 0 0 3px #ffb62e; }

/* --- โครงพื้นกระดาน --- */
.game-board { display: flex; flex-direction: column; gap: 14px; }
.board-side { display: flex; align-items: center; justify-content: center; min-width: 0; }
.game-board .grid { margin: 0; }

/* --- แผงวางแผนฝั่งขวา --- */
.play-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.play-status { margin: 0; font-size: 17px; color: #5c6480; font-weight: 500; }
.play-panel .plan { margin: 0; max-width: none; width: 100%; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.plan-head strong { color: #6254b8; font-size: 18px; }
.plan-count { background: #ece7ff; color: #6254b8; border-radius: 99px; padding: 3px 13px; font-family: Nunito, sans-serif; font-weight: 800; font-size: 14px; white-space: nowrap; }
.plan-actions { display: flex; gap: 10px; }
.plan-actions .btn { flex: 1 1 auto; }
.plan-actions .btn-yellow { flex: 2 1 auto; font-size: 19px; }
.plan-actions .btn:disabled { opacity: .5; box-shadow: none; cursor: default; transform: none; }
.plan-hint { margin: 0; text-align: center; }

/* --- จอกว้างหรือแนวนอน: ซ้าย-ขวา เต็มจอ --- */
@media (min-width: 900px), (min-width: 700px) and (orientation: landscape) {
  body[data-screen="game"] { overflow: hidden; }
  body[data-screen="game"] .shell { max-width: 1280px; height: 100dvh; padding: 12px 22px 16px; display: flex; flex-direction: column; }
  body[data-screen="game"] .topbar { flex: 0 0 auto; margin-bottom: 10px; }

  .game-card { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; display: flex; flex-direction: column; padding: 16px 20px; }
  .game-card .game-top,
  .game-card .round-dots { flex: 0 0 auto; }

  .game-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 22px; align-items: stretch; padding: 16px; }

  /* กระดานเป็นสี่เหลี่ยมจัตุรัส กินความสูงที่เหลือทั้งหมด */
  .board-side { height: 100%; min-height: 0; }
  .game-board .grid { height: 100%; width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; grid-auto-rows: 1fr; }
  .game-board .cell { aspect-ratio: auto; font-size: clamp(18px, 3.4vh, 34px); }

  /* แผงขวา: เฉพาะรายการลูกศรที่เลื่อนได้ ส่วนปุ่ม Play ตรึงอยู่ล่างสุดเสมอ */
  .play-panel { height: 100%; min-height: 0; }
  .play-panel .plan { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .play-panel .plan-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: flex-start; align-content: flex-start; justify-content: flex-start; padding: 2px 4px 2px 0; }
  .play-panel .plan > .subtle { flex: 0 0 auto; }
  .play-panel .controls,
  .play-panel .plan-actions,
  .play-panel .plan-hint { flex: 0 0 auto; }

  .play-panel .plan-list::-webkit-scrollbar { width: 8px; }
  .play-panel .plan-list::-webkit-scrollbar-thumb { background: #d9d0f6; border-radius: 99px; }
}