/* UI polish: game board, hand, move flow, round/match results (UI_AUDIT_2026-10-11 sections 4-6, 14). Loaded after ui-shell.css. */
/* Colour code used throughout: you = gold / green, rival = rust. */
:root {
  --side-you: #efd080;
  --side-you-deep: #2e6b33;
  --side-rival: #e08a5f;
  --side-rival-deep: #9f472c;
  --board-gold: #f2d27d;
  --board-ink: #20271d;
}

/* ---------- §4 Header + scoreboard ---------- */
#screen-game #header-bar .wordmark { font-size: 16px; letter-spacing: .5px; }
#screen-game #header-bar .round-label { font: 800 12px var(--font-body); letter-spacing: .6px; color: #f3e2b0; }
#screen-game #round-pips { color: var(--board-gold); }

#battle-scoreboard { grid-template-columns: 1.15fr 1fr 1.15fr; gap: 6px; }
.battle-player { position: relative; grid-template-columns: auto 1fr auto; column-gap: 5px; padding: 6px 8px 6px 7px; }
.battle-player > strong { font-size: 26px; }
.battle-player > span { font-size: 11px; letter-spacing: .3px; }
.battle-player > span { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 5px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-player > strong { grid-column: 3; grid-row: 1 / 3; }
.battle-player > small { grid-column: 2; grid-row: 2; font: 700 11px/1.1 var(--font-body); letter-spacing: .2px; color: #e9c9b4; }
.battle-player > small:empty { display: none; }
.battle-player:has(> small:empty) > span { grid-row: 1 / 3; }
.battle-player .battle-medallion { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 1.5px var(--side-rival), 0 2px 4px #0007; }
.battle-player .battle-medallion[hidden] { display: none; }
.battle-player:not(.has-medallion) > span, .battle-player:not(.has-medallion) > small { grid-column: 1 / 3; }
/* Side colours on the panels: you = gold, rival = rust. */
.battle-player[data-player="0"] { border-color: #b59a55; }
.battle-player[data-player="1"] { border-color: #b5654a; background: #2a3a2e; }
.battle-player.is-active { background: linear-gradient(#3b6a4f, #284a39);
  box-shadow: inset 0 -3px var(--side-you), 0 0 0 2px #efd08055, 0 0 14px #efd08044; border-color: var(--side-you); }
.battle-player[data-player="1"].is-active { background: linear-gradient(#5a3a2c, #3b2a22);
  box-shadow: inset 0 -3px var(--side-rival), 0 0 0 2px #e08a5f55, 0 0 14px #e08a5f44; border-color: var(--side-rival); }
.battle-player.is-active > span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--side-you); box-shadow: 0 0 6px var(--side-you); }
.battle-player[data-player="1"].is-active > span::before { background: var(--side-rival); box-shadow: 0 0 6px var(--side-rival); }
.battle-round > span { font: 850 14px var(--font-body); letter-spacing: .3px; }
.battle-round > small { font-size: 11px; }

/* ---------- §4 Board sides: labels + tints ---------- */
#screen-game #opp-columns, #screen-game #player-columns { position: relative; }
#screen-game #opp-columns { background: linear-gradient(#5a1f1418, #5a1f1408); }
#screen-game #player-columns { background: linear-gradient(#1f5a2e08, #1f5a2e1c); }
#screen-game #opp-columns::before, #screen-game #player-columns::before {
  position: absolute; left: 8px; z-index: 3; pointer-events: none;
  font: 800 10px/1 var(--font-body); letter-spacing: 2px; text-shadow: 0 1px 2px #000a; }
#screen-game #opp-columns::before { content: "RIVAL"; top: 2px; color: #f0a98599; }
#screen-game #player-columns::before { content: "YOU"; bottom: 3px; color: #f2d27d99; }

/* Board cards: taller slots, smaller badge, faces kept in frame. */
#screen-game .lane-col > .board-card, #screen-game .lane-col > .slot { max-height: 58px; }
#screen-game .board-card .card-art { object-position: center 30%; }
#screen-game .board-card .strbadge { width: 22px; height: 22px; font-size: 13px; top: 3px; left: 3px; border-width: 1.5px; }
#screen-game .board-card .strikebase { left: 18px; }
#screen-game .board-card .cause-glyph { left: 18px; }
/* Empty slots recede; the gold legal state carries the affordance. */
#screen-game .slot:not(.legal) { background: #0b231a33; border: 1px dashed #d3ce9f4d; box-shadow: none; }

/* Rival's last move: rust ring until your next action. */
#screen-game .board-card.last-move { box-shadow: 0 0 0 2px var(--side-rival), 0 0 12px #e08a5f88; z-index: 2; }
/* A card left this column (pull / bite): dashed ghost outline for ~1.2s. */
#screen-game .lane-col.vanish-flash { animation: none; position: relative; }
#screen-game .lane-col.vanish-flash::after { content: ""; position: absolute; inset: 2px; border: 2px dashed #e08a5fcc;
  border-radius: 8px; pointer-events: none; animation: ghostFade 1.2s ease-out forwards; }
@keyframes ghostFade { 0% { opacity: 1; } 70% { opacity: .6; } 100% { opacity: 0; } }
/* Your own face-down cards: an eye-slash so you remember you know them. */
#screen-game .board-card.facedown.mine::after { content: ""; position: absolute; right: 3px; bottom: 3px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%; background: #0d2a1ccc center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d27d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12c2.5-4.5 5.5-6.5 9-6.5s6.5 2 9 6.5c-2.5 4.5-5.5 6.5-9 6.5S5.5 16.5 3 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px #c7994a; }

/* SVG glyphs that replaced emoji (X8). */
.card .facing-arrow { display: grid; place-items: center; width: 16px; height: 22px; font-size: 0; text-shadow: none; }
.card .facing-arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--board-gold); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000c); }
.card .cause-glyph, .card .link-glyph { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #0d2a1c; box-shadow: 0 0 0 1px var(--board-gold); font-size: 0; }
.card .cause-glyph svg, .card .link-glyph svg { width: 12px; height: 12px; fill: none; stroke: #ffd3bd; stroke-width: 2.6; stroke-linecap: round; }
.card .link-glyph svg { stroke: var(--board-gold); }
#screen-game .board-card .link-glyph { top: -6px; left: 18px; }
.move-picker-shell h2 { border-bottom-color: #c7994a; }
/* Emoji fallbacks never flash while the painted art is loading; they return only if the art fails (img removed). */
.card:has(> .card-art) > .emoji, .card.has-art > .emoji { display: none; }
.card .emoji { font-variant-emoji: text; }

/* ---------- §4 Total chips: owner-coloured leads ---------- */
#screen-game #player-totals-row .total-chip.leading { background: #f1cd78; color: #233925; border-color: #fff1bd; }
#screen-game #opp-totals-row .total-chip.leading { background: var(--side-rival); color: #2a1209; border-color: #ffc9ad; }

/* ---------- §4 Clearings ---------- */
#screen-game .oasis-card { overflow: visible; }
.oasis-card .oasis-art-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 5px; pointer-events: none; }
.oasis-card .oasis-art-clip > .oasis-art { border-radius: 0; }
body.painted-board .oasis-card .oasis-art-clip > .oasis-face-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
body.painted-board .oasis-card.portal .oasis-art-clip > .oasis-face-art { transform: rotate(90deg) scale(1.4); transform-origin: center; }
/* Edge bar on the side of the clearing that currently leads (bottom = you, top = rival). */
#screen-game .oasis-card:is(.lead-0, .lead-1):not(.surge-active)::after { content: ""; position: absolute; left: 6px; right: 6px;
  height: 4px; border-radius: 3px; z-index: 5; pointer-events: none; }
#screen-game .oasis-card.lead-0:not(.surge-active)::after { bottom: -6px; background: #f1cd78; box-shadow: 0 0 6px #f1cd78aa; }
#screen-game .oasis-card.lead-1:not(.surge-active)::after { top: -6px; background: var(--side-rival); box-shadow: 0 0 6px #e08a5faa; }
#screen-game .oasis-card .points.neg { color: #ffb59a; }
#screen-game .oasis-card .oasis-label { font-size: 11px; background: #0d2a1ccc; color: #fbf2d6; }
#screen-game .oasis-card .oasis-label.oasis-label-swamp { background: #7a3a20e6; }
#screen-game .oasis-card .oasis-label.oasis-label-bridge { background: #1d4a2ae6; }
/* Fruit-tree badge: persistent, top-right corner. */
#screen-game .oasis-card .palms-row { position: absolute; top: 3px; right: 3px; bottom: auto; left: auto; z-index: 4; gap: 2px; }
#screen-game .oasis-card .palms-row .palm-token-wrap { border-radius: 50%; background: #0d2a1cd9; border: 0;
  box-shadow: 0 0 0 1.5px var(--side-you), 0 1px 3px #000a; }
#screen-game .oasis-card .palms-row .palm-token-wrap.p1 { box-shadow: 0 0 0 1.5px var(--side-rival), 0 1px 3px #000a; }
#screen-game .oasis-card .palms-row img { width: 82%; height: 82%; }
.palm-plus-float { position: absolute; left: 50%; top: 18%; z-index: 9; pointer-events: none; transform: translateX(-50%);
  font: 400 22px/1 var(--font-display); color: var(--board-gold); text-shadow: 0 2px 0 #0d2a1c, 0 0 8px #000a;
  animation: palmPlusUp 600ms ease-out forwards; }
@keyframes palmPlusUp { from { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 25% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -22px) scale(1.05); } }

/* ---------- §4c Fruit-tree offer ---------- */
#screen-game .oasis-card.pickable { border: 2px solid var(--board-gold); box-shadow: 0 0 0 3px #f2d27d55, 0 0 18px #f2d27d88;
  animation: oasisGoldPulse 1.4s ease-in-out infinite; }
#screen-game .oasis-card.pickable::before { content: none; display: none; }
@keyframes oasisGoldPulse { 0%, 100% { box-shadow: 0 0 0 3px #f2d27d55, 0 0 18px #f2d27d88; } 50% { box-shadow: 0 0 0 5px #f2d27d33, 0 0 26px #f2d27dcc; } }
#screen-game .oasis-card .pick-tree { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 6;
  border-radius: 50%; background: #0d2a1c; box-shadow: 0 0 0 1.5px var(--board-gold), 0 2px 4px #000a; padding: 1px; }
#palm-direct-choice { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; color: var(--board-ink);
  background: linear-gradient(#fbf3dc, #efdcae); border: 2px solid #c7994a; border-radius: 14px;
  box-shadow: 0 8px 22px #000a, inset 0 0 0 2px #fff6dc; text-align: left; }
#palm-direct-choice .palm-choice-label { flex: 1 1 auto; text-align: left; letter-spacing: 0; font-weight: 400; }
#palm-direct-choice .palm-choice-title { display: block; font: 400 18px/1.1 var(--font-display); color: #174c2a; }
#palm-direct-choice .palm-choice-sub { display: block; margin-top: 3px; font: 600 12px/1.3 var(--font-body); color: #4f5a46; }
#palm-direct-choice .palm-skip.ui-quiet { flex: none; min-height: 44px; min-width: 0; margin: 0; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid #8a7754; background: #fff8e7; color: var(--board-ink); font: 800 14px/1 var(--font-body); box-shadow: none; }
#palm-direct-choice .palm-skip:active { background: #efe2bd; color: var(--board-ink); }

/* ---------- §4a Parrot facing pill ---------- */
#screen-game .board-card.facing-preview { overflow: visible; z-index: 30; box-shadow: 0 0 0 2px var(--board-gold); }
#screen-game .facing-preview .facing-pill { inset: auto; left: 50%; transform: translateX(-50%); display: flex; gap: 6px;
  padding: 4px; border-radius: 16px; background: #0d2a1cee; box-shadow: 0 0 0 1px #c7994a, 0 8px 18px #000b; z-index: 40; }
#screen-game .facing-preview .facing-pill.pill-above { bottom: calc(100% + 6px); }
#screen-game .facing-preview .facing-pill.pill-below { top: calc(100% + 6px); }
#screen-game .facing-preview .facing-pill button { display: grid; place-items: center; width: 56px; height: 44px; padding: 0;
  border: 1.5px solid #d8b25e; border-radius: 12px; background: #174c2a; color: #fff6dc; cursor: pointer; }
#screen-game .facing-preview .facing-pill button:first-child { border-right: 1.5px solid #d8b25e; }
#screen-game .facing-preview .facing-pill button:active { background: #2e6b33; }
#screen-game .facing-preview .facing-pill svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
#screen-game .facing-preview .facing-preview-label { bottom: auto; top: 50%; transform: translateY(-50%); font: 800 10px/1.1 var(--font-body);
  letter-spacing: .2px; color: #fff6dc; text-shadow: 0 1px 2px #000; padding: 2px 0; background: #0d2a1caa; }
body.facing-pending #screen-game .slot.legal { border-color: #ffe09355; background: transparent; box-shadow: none; }
body.facing-pending #screen-game .slot.legal:not(.wild-growth-locked):not(.guardian-sealed)::before { content: none; display: none; }
#screen-game .facing-preview .facing-arrow { display: none; }

/* ---------- §4 Move bar ---------- */
#screen-game #current-move-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 13px var(--font-body); letter-spacing: .2px; text-transform: none; }
#screen-game #current-move-chip .move-chip-chevron { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--board-gold);
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#screen-game #progress-chip { min-width: 44px; padding: 6px 10px; border-radius: 999px; background: #f7dfa3; color: #2e5b37;
  font: 800 13px/1 var(--font-body); letter-spacing: 3px; text-align: center; }
#screen-game #round-summary-cta { align-items: center; justify-content: center; align-self: center;
  min-height: 40px; padding: 0 18px; border: 2px solid #0a2b17; border-radius: 12px;
  background: linear-gradient(#2f7a45, #174c2a); color: #fffdf3; font: 800 14px/1 var(--font-body); letter-spacing: .3px;
  box-shadow: 0 3px 0 #092415, 0 0 0 0 #f2d27d00; animation: ctaGlow 1.8s ease-in-out infinite; }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 3px 0 #092415, 0 0 0 0 #f2d27d00; } 50% { box-shadow: 0 3px 0 #092415, 0 0 14px 2px #f2d27d99; } }
#rival-status { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px;
  color: var(--board-gold); font: 700 12px var(--font-body); letter-spacing: .3px; }
#rival-status .rival-dots { display: inline-flex; gap: 3px; }
#rival-status .rival-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: rivalDot 1.2s ease-in-out infinite; }
#rival-status .rival-dots i:nth-child(2) { animation-delay: .2s; }
#rival-status .rival-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rivalDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* ---------- §4 Guidance strip ---------- */
#battle-guidance { min-height: 56px; padding: 7px 14px 8px; background: linear-gradient(#fbf3dc, #f1e3bf);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c6b67c; }
#battle-next-step { display: flex; align-items: center; gap: 8px; font-size: 15px; }
#battle-next-step[data-step]::before { content: attr(data-step); flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5c9b53, #183b24 70%);
  box-shadow: 0 0 0 1.5px #d8b25e; color: #fff6dc; font: 800 11px/1 var(--font-body); }
#battle-card-tip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---------- §4 Hand: bigger fanned cards ---------- */
/* The hand fits inside its tray (120 px, 100 px on short screens): 3:4 cards plus the fan's 4 px dip and the
   padding, so card names are never clipped by the bottom of the screen. The selected card still lifts above it. */
#screen-game #hand-cards.centered { --hand-w: min(78px, calc((100vw - 48px) / 4)); gap: 6px; align-items: flex-end; padding-top: 3px; padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
@media (max-height: 700px) { #screen-game #hand-cards.centered { --hand-w: min(63px, calc((100vw - 48px) / 4)); } }
#screen-game #hand-cards.centered .hand-card { width: var(--hand-w); flex: 0 0 var(--hand-w);
  height: auto; aspect-ratio: 3 / 4; transform-origin: 50% 100%; transition: transform 160ms cubic-bezier(.2, .8, .3, 1), box-shadow 160ms; }
#screen-game #hand-cards.centered .hand-card:nth-child(1):nth-last-child(4) { transform: rotate(-4deg) translateY(4px); }
#screen-game #hand-cards.centered .hand-card:nth-child(2):nth-last-child(3) { transform: rotate(-1.3deg); }
#screen-game #hand-cards.centered .hand-card:nth-child(3):nth-last-child(2) { transform: rotate(1.3deg); }
#screen-game #hand-cards.centered .hand-card:nth-child(4):nth-last-child(1) { transform: rotate(4deg) translateY(4px); }
#screen-game #hand-cards.centered .hand-card:nth-child(1):nth-last-child(3) { transform: rotate(-3deg) translateY(3px); }
#screen-game #hand-cards.centered .hand-card:nth-child(3):nth-last-child(1) { transform: rotate(3deg) translateY(3px); }
#screen-game #hand-cards.centered .hand-card:nth-child(1):nth-last-child(2) { transform: rotate(-2deg) translateY(2px); }
#screen-game #hand-cards.centered .hand-card:nth-child(2):nth-last-child(1) { transform: rotate(2deg) translateY(2px); }
#screen-game #hand-cards .hand-card.selected { transform: translateY(-10px) rotate(0deg) !important; z-index: 6; }
#screen-game #hand-tray { min-height: 0; }

/* ---------- §4b Move-select modal ---------- */
.modal-shell.move-picker-shell { background: linear-gradient(145deg, #fff9e5, #eadbb9); background-image: linear-gradient(145deg, #fff9e5, #eadbb9);
  border: 2px solid #aa8651; border-radius: 18px; box-shadow: 0 18px 50px #000b, inset 0 0 0 3px #fff5da, inset 0 0 0 4px #c7994a66; }
.move-picker-shell h2 { color: #174c2a; }
.view-board-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid #8a7754; background: #fff8e7; color: var(--board-ink); font: 800 14px/1 var(--font-body); letter-spacing: .2px; text-transform: none; }
.view-board-btn .vb-eye { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.move-picker-btn { border: 2px solid #aa8651; border-radius: 14px; background: linear-gradient(145deg, #fff8e4, #ead5a8);
  box-shadow: 0 3px 0 #b99c6b, inset 0 0 0 3px #fff5da; color: var(--board-ink); }
.move-picker-btn:hover:not(:disabled):not([aria-disabled="true"]),
.move-picker-btn:focus-visible:not(:disabled):not([aria-disabled="true"]) { border-color: #2e6b33; background: linear-gradient(145deg, #fffaea, #efdcae);
  box-shadow: 0 3px 0 #1d4a26, 0 0 0 3px #2e6b3326, inset 0 0 0 3px #fff5da; }
.move-picker-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 1px 0 #b99c6b, inset 0 0 0 3px #fff5da; }
.move-picker-btn .mpb-icon { border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5c9b53, #183b24 70%);
  box-shadow: 0 0 0 2px #d8b25e, 0 2px 0 #0d2a1c66; }
.move-picker-btn:hover:not(:disabled):not([aria-disabled="true"]) .mpb-icon,
.move-picker-btn:focus-visible:not(:disabled):not([aria-disabled="true"]) .mpb-icon { background: radial-gradient(circle at 35% 30%, #6aab60, #1d4a2b 70%); }
.move-picker-btn .mpb-icon .card-glyph { fill: #fff6dc; }
.move-picker-btn .mpb-icon .divider-glyph { stroke: #f2d27daa; }
.move-picker-btn .mpb-icon .arrow-glyph { stroke: var(--board-gold); }
.move-picker-btn .mpb-icon .facedown-hatch { stroke: #183b24; }
.move-picker-btn .mpb-title { color: var(--board-ink); }
.move-picker-btn .mpb-sub { color: #4f5a46; }
.move-picker-btn:disabled, .move-picker-btn[aria-disabled="true"] { opacity: .6; filter: saturate(.55); }
.move-picker-btn .mpb-sub.mpb-reason { color: #7a4a2b; font-size: 12px; font-style: italic; font-weight: 600; }
.move-picker-btn .mpb-key { border-color: #aa8651; color: #6b5a3a; background: #fff8e7; }
@media (hover: none) { .move-picker-btn .mpb-key { display: none; } }

/* ---------- §5 Round complete board + summary ---------- */
#screen-game .oasis-card .claim-tag { position: absolute; top: -10px; left: 50%; right: auto; transform: translateX(-50%); z-index: 7;
  padding: 2px 7px; border-radius: 999px; font: 800 11px/1.25 var(--font-body); letter-spacing: .3px; color: #fffdf3;
  box-shadow: 0 2px 4px #0009; border: 1.5px solid #fff3; }
#screen-game .oasis-card .claim-tag.claim-mine { background: var(--side-you-deep); border-color: #efd080aa; }
#screen-game .oasis-card .claim-tag.claim-rival { background: var(--side-rival-deep); border-color: #ffc9adaa; }
#screen-game .oasis-card .claim-tag.rust { background: #2a1f18; border: 1.5px solid #e08a5f; color: #ffb59a; }
/* The claim value already includes the tide bonus and the card keeps its tide ring, so the badge would only collide. */
#screen-game .oasis-card:has(.claim-tag, .discard-tag) .tide-badge { display: none; }
#screen-game .oasis-card .discard-tag { position: absolute; top: -10px; left: 50%; right: auto; transform: translateX(-50%); z-index: 7;
  padding: 2px 7px; border-radius: 999px; font: 800 10px/1.25 var(--font-body); box-shadow: 0 2px 4px #0009; }
#screen-game .oasis-card.claimed-0 { outline: 3px solid #efd080; outline-offset: -1px; box-shadow: 0 0 12px #f1cd7866; }
#screen-game .oasis-card.claimed-1 { outline: 3px solid var(--side-rival); outline-offset: -1px; box-shadow: 0 0 12px #e08a5f66; }

.modal-shell.round-summary-shell { background: radial-gradient(120% 80% at 50% 0%, #fffaf0 0, #f4e7c8 60%, #ead7ab 100%);
  border: 2px solid #aa8651; border-radius: 18px;
  box-shadow: 0 18px 50px #000b, inset 0 0 0 3px #fff5da, inset 0 0 0 4px #c7994a66; }
.round-summary-shell h2 { color: #174c2a; margin-bottom: 10px; }
.rs-scoreboard { position: relative; grid-template-rows: auto auto; row-gap: 2px; padding: 8px 10px 12px; border: 2px solid #a97936; border-radius: 14px;
  background: linear-gradient(145deg, #17472a, #0d321f); box-shadow: inset 0 0 0 2px #294f31; color: #fff1c5; }
.rs-scoreboard .rs-kicker { grid-column: 1 / -1; text-align: center; font: 800 11px/1 var(--font-body); letter-spacing: 2.5px; color: #d8b25e; }
.rs-scoreboard .rs-side:first-of-type .rs-side-label { color: var(--side-you); opacity: 1; }
.rs-scoreboard .rs-side:last-of-type .rs-side-label { color: #f0a985; opacity: 1; }
.rs-round-line { margin: -4px 0 12px; text-align: center; font: 700 14px var(--font-body); color: #4f5a46; }
.rs-round-line .rs-v-you { color: var(--side-you-deep); font-weight: 800; }
.rs-round-line .rs-v-opp { color: var(--side-rival-deep); font-weight: 800; }
.rs-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 6px 10px 6px 6px; background: #fffaf0cc; border: 1px solid #c9b88f; border-radius: 12px; }
.rs-row .rs-clearing-num { position: relative; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: #2b3b22; box-shadow: 0 0 0 1px #8a7754; }
.rs-row .rs-clearing-num .rs-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-row .rs-clearing-num span { position: relative; z-index: 1; font: 400 16px/1 var(--font-display); color: #fff6dc; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.rs-row .rs-versus { display: flex; flex-direction: column; gap: 2px; min-width: 0; letter-spacing: 0; }
.rs-row .rs-clearing-name { font: 800 14px/1.1 var(--font-body); color: var(--board-ink); }
.rs-row .rs-clearing-name b { font-weight: 700; color: #6b5a3a; }
.rs-row .rs-totals { font: 700 12px/1.2 var(--font-body); white-space: nowrap; }
.rs-row .rs-versus .rs-v-you { color: var(--side-you-deep); }
.rs-row .rs-versus .rs-v-opp { color: var(--side-rival-deep); }
.rs-row .rs-versus .rs-v-sep { opacity: .5; margin: 0 5px; }
.rs-row .rs-pill { min-width: 0; padding: 6px 10px; font-size: 12px; }
.rs-row .rs-pill.rs-pill-you { background: var(--side-you-deep); }
.rs-row .rs-pill.rs-pill-opp { background: var(--side-rival-deep); }
.rs-row .rs-pill.rs-pill-neg { background: #fff4ee; color: var(--side-rival-deep); box-shadow: inset 0 0 0 1.5px var(--side-rival-deep); }
.rs-match-score { color: #4f5a46; }
.rs-next-btn.ui-primary { min-height: 52px; padding: 0 16px; font: 800 17px/1 var(--font-body); letter-spacing: .4px; text-transform: none;
  border: 2px solid #0a2b17; border-radius: 12px; background: linear-gradient(#2f7a45, #174c2a); box-shadow: 0 3px 0 #092415; color: #fffdf3; }
@media (max-width: 360px) {
  .rs-row { grid-template-columns: 34px 1fr auto; gap: 7px; }
  .rs-row .rs-clearing-num { width: 32px; height: 32px; }
  .rs-row .rs-pill { padding: 5px 7px; font-size: 11px; }
}

/* ---------- §6 Match end / progression ---------- */
.progression-shell[data-result] { background: linear-gradient(#07180d14 0%, #07180d33 22%, #07180dcc 42%, #07180df2 58%, #07180d 100%),
  var(--result-art) 50% 30% / auto 46% no-repeat, #07180d; padding-top: calc(24vh + env(safe-area-inset-top)); }
.progression-shell[data-result="won"] { background-position: 0 0, 50% 0, 0 0; }
.progression-shell[data-result="lost"] { background-position: 0 0, 65% 0, 0 0; }
.progression-shell[data-result="shared"] { background-position: 0 0, 50% 0, 0 0; }
@media (min-aspect-ratio: 9/14) { .progression-shell[data-result] { background-size: auto, cover, auto; } }
.progression-shell[data-result]::before { top: 24vh; opacity: .55; }
.progression-shell[data-result] .progression-xp-card { padding: 10px 14px; margin-bottom: 12px; }
.progression-shell[data-result] .xp-source-list { margin-bottom: 0; }
.progression-shell[data-result] .progression-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
.progression-shell[data-result] .progression-actions > :only-child, .progression-shell[data-result] .progression-actions .progression-quiet { grid-column: 1 / -1; }
.progression-shell[data-result] .progression-result-head { margin-top: 0; }
.progression-shell[data-result] .progression-result-head h2 { text-shadow: 0 2px 0 #0a1f12, 0 0 18px #000c; }
.progression-score-plaque { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px auto 4px; padding: 8px 18px;
  border: 1.5px solid #d2ab5d88; border-radius: 16px; background: #0d2a1ccc; box-shadow: 0 8px 24px #0008; }
.progression-score-plaque .pss-side { display: flex; align-items: center; gap: 8px; }
.progression-score-plaque strong { font: 400 44px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.progression-score-plaque small { font: 800 12px/1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.progression-score-plaque .pss-you strong, .progression-score-plaque .pss-you small { color: var(--side-you); }
.progression-score-plaque .pss-rival strong, .progression-score-plaque .pss-rival small { color: var(--side-rival); }
.progression-score-plaque .pss-dash { font: 400 26px/1 var(--font-display); color: #f7edcb88; }
.progression-rounds { margin: 2px 0 6px; font: 600 12px/1.4 var(--font-body); color: #d8dfc9; letter-spacing: .3px; }
.progression-rounds b { color: #f7edcb; font-weight: 800; }
.progression-tip { max-width: 340px; margin: 4px auto 10px; padding: 7px 12px; border-left: 3px solid #d8b25e; border-radius: 4px 10px 10px 4px;
  background: #0d2a1c99; color: #f7edcb; font: 600 13px/1.35 var(--font-body); text-align: left; }
.progression-shell .xp-source-list { margin-top: 6px; }
.progression-xp-card { background: #0d2a1ccc; border: 1px solid #d2ab5d88; color: #f7edcb; box-shadow: 0 8px 24px #0008; margin-top: 10px; }
.progression-xp-card .progression-xp-label strong, .progression-xp-card .progression-xp-label span, .progression-xp-card .progression-next-goal { color: #f7edcb; }
.progression-xp-track { background: #0a1f14; box-shadow: inset 0 0 0 1px #d2ab5d66; }
.progression-xp-fill { background: linear-gradient(90deg, #e3b85a, #f7dc8a); }
.progression-actions .ui-primary { min-height: 52px; border: 2px solid #d8b25e; border-radius: 12px; background: linear-gradient(#2f7a45, #174c2a);
  box-shadow: 0 3px 0 #092415, inset 0 1px 0 #6fae6f80; color: #fffdf3; font: 800 17px/1 var(--font-body); letter-spacing: .4px; text-transform: none; }
.progression-actions .ui-secondary { min-height: 52px; border: 2px solid #8a7754; border-radius: 12px; background: #fff8e7; color: var(--board-ink);
  box-shadow: 0 2px 0 #00000033; font: 800 16px/1 var(--font-body); letter-spacing: .3px; text-transform: none; }
.progression-actions .progression-quiet { min-height: 44px; border: 0; background: transparent; color: #f2d27d; box-shadow: none;
  font: 700 14px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: .2px; }
@media (max-height: 700px) {
  .progression-shell[data-result] { padding-top: calc(12vh + env(safe-area-inset-top)); background-size: auto, auto 40%, auto; }
  .progression-shell[data-result] .progression-result-head h2 { font-size: 30px; }
  .progression-tip { margin-bottom: 6px; padding: 5px 10px; font-size: 12px; }
  .progression-shell[data-result] .xp-source-list { gap: 4px; }
  .progression-score-plaque strong { font-size: 36px; }
}

/* ---------- §14 Toasts: parchment ribbon under the scoreboard ---------- */
#toast-host { top: calc(108px + env(safe-area-inset-top, 0px)); bottom: auto; padding: 0 16px; }
.toast { max-width: min(92%, 380px); padding: 8px 16px; background: #f9f0d8; color: var(--board-ink); border: 1.5px solid #c7994a;
  border-radius: 18px; box-shadow: 0 6px 16px #0006, inset 0 0 0 2px #fff7e2; font: 700 13px/1.3 var(--font-body);
  animation: toastRibbonIn 200ms ease-out; transition: opacity 200ms ease-in, transform 200ms ease-in; }
.toast.leaving { opacity: 0; transform: translateY(-6px); }
@keyframes toastRibbonIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 350px) {
  .battle-player .battle-medallion { width: 22px; height: 22px; }
  .battle-player > small { font-size: 10px; }
  .battle-round > span { font-size: 12px; }
  #screen-game #current-move-chip { font-size: 12px; }
  .progression-score-plaque strong { font-size: 36px; }
}
@media (max-height: 700px) {
  #screen-game .lane-col > .board-card, #screen-game .lane-col > .slot { max-height: 50px; }
  #battle-guidance { min-height: 50px; padding: 5px 12px 6px; }
  #battle-card-tip { -webkit-line-clamp: 1; }
}

/* ---------- Reduced motion (app setting + OS) ---------- */
body.reduced-motion #screen-game .oasis-card.pickable, body.reduced-motion #screen-game #round-summary-cta,
body.reduced-motion #rival-status .rival-dots i, body.reduced-motion .palm-plus-float,
body.reduced-motion #screen-game .lane-col.vanish-flash::after, body.reduced-motion .toast { animation: none !important; }
body.reduced-motion .palm-plus-float, body.reduced-motion #screen-game .lane-col.vanish-flash::after { display: none; }
body.reduced-motion .toast, body.reduced-motion #screen-game #hand-cards .hand-card { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #screen-game .oasis-card.pickable, #screen-game #round-summary-cta, #rival-status .rival-dots i, .toast { animation: none !important; }
  .palm-plus-float, #screen-game .lane-col.vanish-flash::after { display: none; }
  .toast, #screen-game #hand-cards .hand-card { transition: none !important; }
}

/* Toasts never sit on top of the round summary or result screens. */
body:has(#round-summary-modal) #toast-host, body:has(.progression-backdrop) #toast-host { visibility: hidden; }
/* Level-up stage keeps its centred layout but swaps the empty trail board for the result art. */
.progression-shell.levelup-shell[data-result] { padding-top: calc(18px + env(safe-area-inset-top));
  background: linear-gradient(#07180dc4, #07180df2), var(--result-art) 50% 30% / cover no-repeat, #07180d; }

/* Let the lifted (selected) and fanned hand cards breathe: when the hand fits without scrolling,
   don't clip it to the tray, otherwise the selected card's top 10px is cut off. */
#screen-game #hand-cards-wrap:has(#hand-cards.centered),
#screen-game #hand-cards.centered { overflow: visible; }
/* "CLEARING" is the longest band label: keep it inside the card on narrow phones. */
#screen-game .oasis-card .oasis-label { max-width: 100%; overflow: hidden; }
@media (max-width: 400px) { #screen-game .oasis-card .oasis-label { font-size: 9.5px; letter-spacing: 0; } }
@media (max-width: 340px) { #screen-game .oasis-card .oasis-label { font-size: 8px; } }