/* ============================================================
   Battle screen v2: deep painted-jungle look (approved mockup, 2026-10-12).
   Loaded last. Scoped to body #screen-game so it wins over the earlier passes in
   play.html, game-feel.css, ui-shell.css and ui-board.css.
   Rules: foliage never sits over the board; empty slots and totals stay readable
   on the dark board; the move bar hides at round end; the status panel stays short.
   ============================================================ */
body #screen-game {
  --bv-deep: #0a2016;
  --bv-panel: linear-gradient(#123a27, #0b2619);
  --bv-gold: #e9c46a;
  --bv-gold-hi: #fff0b8;
  --bv-rival: linear-gradient(#5a211a, #36130f);
  background: var(--bv-deep);
}

/* ---------- Board backdrop: darker painted jungle ---------- */
body #screen-game #board-bg-img { filter: brightness(.42) saturate(1.15) contrast(1.05); }
body #screen-game #board-texture { opacity: .18; }
body #screen-game .board-rows { background: radial-gradient(ellipse 90% 70% at 50% 50%, #0f3a2433, #04120bcc); }
body #screen-game #opp-columns { background: linear-gradient(#5a1f1424, #5a1f1408); }
body #screen-game #player-columns { background: linear-gradient(#1f5a2e08, #1f5a2e22); }
body #screen-game #opp-columns::before { color: #f3a283; font-size: 11px; text-shadow: 0 1px 3px #000; }
body #screen-game #player-columns::before { color: #f2d27d; font-size: 11px; text-shadow: 0 1px 3px #000; }

/* ---------- Header: gold wordmark ---------- */
body #screen-game #header-bar { background: linear-gradient(#0f2e20, #0a2016); border-bottom: 1px solid #c99a4566; box-shadow: 0 2px 10px #0008; }
body #screen-game #header-bar .wordmark {
  font: 400 21px/1 var(--font-display); letter-spacing: .5px;
  background: linear-gradient(#fff3c4 0%, #f2cf63 45%, #b7801f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #3a2508) drop-shadow(0 2px 3px #000a); }
body #screen-game #header-bar .round-label { color: #f2dfa6; font: 800 12px var(--font-body); letter-spacing: 1px; }
body #screen-game #round-pips { color: var(--bv-gold); text-shadow: 0 0 6px #e9c46a66; }
body #screen-game #menu-btn { width: 40px; height: 36px; border: 1.5px solid #c99a45; border-radius: 10px; background: #0f2e20; box-shadow: inset 0 1px 0 #ffffff14; }

/* ---------- Scoreboard: green you, deep red rival ---------- */
body #screen-game #battle-scoreboard { background: linear-gradient(#0d2a1c, #0a2016); border-bottom: 1px solid #c99a4544; }
body #screen-game .battle-player { border: 2px solid #b59a55; border-radius: 12px; background: var(--bv-panel);
  box-shadow: inset 0 1px 0 #ffffff12, 0 3px 8px #0007; }
body #screen-game .battle-player > span { color: #f6ecd0; }
body #screen-game .battle-player > strong { color: #fff6dc; text-shadow: 0 2px 0 #00000080; }
body #screen-game .battle-player[data-player="1"] { border-color: #b5654a; background: var(--bv-rival); }
body #screen-game .battle-player[data-player="1"] > small { color: #f0c9b6; }
body #screen-game .battle-player.is-active { border-color: #f2d27d; background: linear-gradient(#1d5236, #0f3321);
  box-shadow: inset 0 -3px #f2d27d, 0 0 0 2px #f2d27d44, 0 0 16px #f2d27d44; }
body #screen-game .battle-player[data-player="1"].is-active { border-color: #f09b72; background: linear-gradient(#6e2a20, #42170f);
  box-shadow: inset 0 -3px #f09b72, 0 0 0 2px #f09b7244, 0 0 16px #f09b7244; }
body #screen-game .battle-player .battle-medallion { width: 34px; height: 34px; box-shadow: 0 0 0 2px #e9c46a, 0 2px 6px #000a; }
body #screen-game .battle-round > span { color: #f2d27d; font: 900 14px/1.05 var(--font-body); letter-spacing: .6px; text-transform: uppercase; text-align: center; }
body #screen-game .battle-round > small { color: #e9e2c8; }

/* ---------- Readability on the dark board ---------- */
/* Empty slots are where you play: give them a visible outline and faint fill. */
body #screen-game .slot:not(.legal) { background: #ffffff0a; border: 1.5px dashed #e8dca073; box-shadow: inset 0 0 12px #0006; }
/* Totals: trailing/tied chips get enough contrast to read at a glance. */
body #screen-game .total-chip:not(.leading) { background: #0f2a1e; color: #f3ead0; border: 1.5px solid #c9b77a80; opacity: 1; filter: none; }
body #screen-game .total-chip.empty-zero:not(.leading) { color: #c9cfba; border-color: #c9b77a55; }
body #screen-game .board-card { box-shadow: 0 0 0 1.5px #c99a45aa, 0 3px 6px #000a; }
body #screen-game .oasis-card { box-shadow: 0 4px 10px #000a; }

/* ---------- Move bar ---------- */
body #screen-game #current-move-chip { border: 1.5px solid #c99a45; border-radius: 12px; background: var(--bv-panel); color: #f6ecd0; }
body #screen-game #progress-chip { letter-spacing: .2px; font: 800 12px/1 var(--font-body); background: #f2d27d; color: #1d3a24;
  border: 1.5px solid #fff0b8; }
/* At round end only the summary button matters. */
body.round-ended #screen-game #current-move-chip, body.round-ended #screen-game #progress-chip, body.round-ended #screen-game #hand-undo { display: none !important; }
body.round-ended #screen-game #round-summary-cta { flex: 1 1 auto; min-height: 46px; font-size: 16px; }

/* ---------- Status panel (guidance) ---------- */
body #screen-game #battle-guidance { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  min-height: 0; padding: 9px 14px 10px; color: #f6ecd0; background: linear-gradient(#123a27, #0a2418);
  border-top: 1.5px solid #c99a45; box-shadow: inset 0 1px 0 #ffffff14, 0 -4px 14px #0008; }
body #screen-game #battle-guidance::before { content: ""; grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5c9b53, #183b24 70%); box-shadow: 0 0 0 1.5px #d8b25e; }
body #screen-game #battle-next-step { grid-column: 2; color: #fff3cf; font: 800 15px/1.15 var(--font-body); }
body #screen-game #battle-next-step[data-step]::before { display: none; }
body #screen-game #battle-card-tip { grid-column: 2; color: #d9dcc4; font: 600 12px/1.3 var(--font-body); }
/* Round over: trophy-in-laurel badge, and drop the redundant "Round over" line below it. */
body.round-ended #screen-game #battle-guidance::before { width: 38px; height: 38px; border-radius: 0; box-shadow: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b8'/%3E%3Cstop offset='.5' stop-color='%23e9c46a'/%3E%3Cstop offset='1' stop-color='%23a8731c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 14c-3 6-2 14 4 20M39 14c3 6 2 14-4 20'/%3E%3Cpath d='M8 19l-3-2M8 25l-4 0M10 30l-3 2M40 19l3-2M40 25l4 0M38 30l3 2'/%3E%3C/g%3E%3Cpath fill='url(%23g)' d='M16 9h16v5c0 6-3.5 10-8 10s-8-4-8-10z'/%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='2.4' d='M16 12h-3c0 4 2 6 4 6M32 12h3c0 4-2 6-4 6'/%3E%3Cpath fill='url(%23g)' d='M22 24h4v6h-4zM17 33h14v4H17z'/%3E%3C/svg%3E"); }
body.round-ended #screen-game #hand-status-line { display: none !important; }
/* With no hand and no status line, the collapsed tray is just an empty strip; remove it. */
body.round-ended.hand-collapsed #screen-game #hand-tray { display: none; }
body.round-ended #screen-game #battle-guidance { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body.round-ended.hand-collapsed #screen-game #move-status-overlay { bottom: 8px; }

/* ---------- Hand tray ---------- */
body #screen-game #hand-tray { background: linear-gradient(#0d2c1d, #08190f); border-top: 1px solid #c99a4566; }
body #screen-game #hand-status-line { color: #e9dcae; }

/* Keep the existing hide rules authoritative. */
body.tutorial-active #screen-game #battle-guidance, .tutorial-active #screen-game #battle-guidance { display: none; }

/* Narrowest phones: keep the rival's name readable next to its portrait. */
@media (max-width: 340px) {
  body #screen-game .battle-player { padding-left: 5px; padding-right: 5px; column-gap: 4px; }
  body #screen-game .battle-player .battle-medallion { width: 24px; height: 24px; }
  body #screen-game .battle-player > span { font-size: 10px; letter-spacing: 0; }
}

/* Tap targets (≥44px): the menu keeps its look but gets an invisible larger hit area; the move chip grows to 44px. */
body #screen-game #menu-btn { position: relative; }
body #screen-game #menu-btn::after { content: ""; position: absolute; inset: -4px -2px; }
body #screen-game #current-move-chip { min-height: 44px; }

/* 320-340 px phones: keep the header and turn label on one line each next to the score badges. */
@media (max-width: 340px) {
  body #header-bar .wordmark { font-size: 18px !important; letter-spacing: .5px; }
  body #header-bar .round-label { font-size: 10px !important; white-space: nowrap; }
  body #screen-game .battle-round > span { font-size: 11px; letter-spacing: .2px; white-space: nowrap; }
  body #screen-game .battle-round > small { font-size: 10px; white-space: nowrap; }
}

/* Short phones (≤620 px tall, e.g. 320×568): give the lanes room. The guidance keeps its one-line
   heading, the scoreboard and header tighten, so three slots per lane stay readable. */
@media (max-height: 620px) and (max-width: 430px) {
  body #screen-game #battle-guidance { padding-top: 4px; padding-bottom: 4px; column-gap: 8px; }
  body #screen-game #battle-guidance::before { width: 18px; height: 18px; grid-row: 1; }
  body #screen-game #battle-guidance #battle-card-tip { display: none; }
  body #screen-game #battle-scoreboard { padding-top: 2px; padding-bottom: 2px; }
  body #screen-game #battle-scoreboard .battle-player { min-height: 0; padding-top: 3px; padding-bottom: 3px; }
  body #screen-game #battle-scoreboard .battle-player strong { font-size: 20px; line-height: 1; }
  body #header-bar { height: 36px !important; min-height: 36px !important; }
}