/* Turf Wars 2: the Play screen (T633). The kit header is hidden here (a whole-screen play screen,
   AGENTS.md section 3 rule 10); the HUD carries its own 44 px menu button. Top to bottom: HUD row, score
   row, the board (as large as fits, square tiles), the hand slot (112 px) and the action row (52 px),
   the last two filled by T646. Farm colours match TW2_render.SEAT. */
.game-shell[data-screen="play"] > .menu-bar { display: none; }

.screen.play {
  position: relative;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  text-align: left;
  overflow: hidden;
  padding: calc(var(--rr-inset-top) + 10px) calc(8px + var(--rr-inset-right)) calc(8px + var(--rr-inset-bottom)) calc(8px + var(--rr-inset-left));
}
.play > .hud, .play > .scores, .play > .hand, .play > .actions { flex: none; width: var(--tw2-col, 100%); }

.hud { display: flex; align-items: center; gap: 4px; height: 44px; }
.hud-round { flex: none; font-weight: 700; font-size: 14px; white-space: nowrap; margin-right: 2px; }
.hud-forecast { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 3px; overflow: hidden; }
.chip {
  flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 4px 5px; border-radius: 999px; font-size: 10px; line-height: 1; white-space: nowrap;
  border: 1px solid var(--rr-panel-line); background: var(--rr-panel); color: var(--rr-muted);
}
.chip.now { color: var(--rr-ink); border-color: var(--rr-accent); font-weight: 700; }
.chip.w-rain { border-bottom: 3px solid #4aa8c4; }
.chip.w-wind { border-bottom: 3px solid #b8b8c0; }
.chip.w-frost { border-bottom: 3px solid #cfe8ff; }
.chip.w-harvest { border-bottom: 3px solid var(--rr-warn); }
.chip.w-clear { border-bottom: 3px solid #e8c84a; }
.hud-replay {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700;
  background: transparent; color: var(--rr-ink); border: 1px solid var(--rr-panel-line);
}
.hud-replay:disabled { opacity: 0.35; cursor: default; }
.hud-menu, .hud-results {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--rr-ink); border: 1px solid var(--rr-panel-line);
}

.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 24px; }
.score {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; min-width: 0;
  font-size: 13px; white-space: nowrap; background: var(--rr-panel); border-left: 5px solid; border-radius: 6px;
}
.score i { font-style: normal; font-weight: 700; }
.score.turn { outline: 2px solid var(--rr-ink); outline-offset: -2px; }
.seat-a { border-color: #e07a2e; }
.seat-b { border-color: #3a7bd5; }

.board-wrap { flex: 1 1 0; min-height: 0; width: 100%; position: relative; }
.board-wrap canvas {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* The hand (T646): three card buttons and a smaller Next card; the action row: four buttons. */
.play button, .play .card { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.hand { height: 112px; display: grid; grid-template-columns: 1fr 1fr 1fr 0.7fr; gap: 4px; }
.actions { height: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: center; }

.card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 3px; min-width: 44px; min-height: 44px;
  padding: 6px 5px 5px; text-align: left; border-radius: 10px; font: inherit; color: var(--rr-ink); cursor: pointer;
  background: var(--rr-panel); border: 2px solid var(--rr-panel-line); overflow: hidden;
}
.card.selected { border-color: var(--rr-accent); box-shadow: 0 0 0 2px var(--rr-accent); }
.card.poor:not(.selected) { opacity: 0.5; }
.card:disabled { opacity: 0.4; cursor: default; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; flex: none; }
.card-art { display: block; flex: none; width: 38px; height: 38px; pointer-events: none; }
.card.next .card-art { width: 24px; height: 24px; }
.card-cost {
  align-self: flex-start; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: #4aa8c4;
}
.card-name { font-size: clamp(9px, 2.5vw, 11px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.card-rule { font-size: 10px; line-height: 1.2; color: var(--rr-muted); overflow: hidden; }
.card-tag {
  position: absolute; top: 28px; right: 4px; padding: 1px 3px; border-radius: 4px; font-size: 9px; font-weight: 700; line-height: 1.15; white-space: nowrap;
  color: var(--rr-ink); background: transparent; border: 1px solid var(--rr-panel-line); pointer-events: none;
}
.card.next .card-tag { position: static; align-self: flex-start; font-size: 8px; padding: 0 3px; }
.card.next { cursor: default; border-style: dashed; padding-top: 4px; }
.card.next .card-cost { min-width: 18px; height: 18px; padding: 0 3px; font-size: 11px; }
.card.next .card-name { font-size: clamp(8px, 2.2vw, 10px); }
.card.next .card-rule { display: none; }
.next-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0; color: var(--rr-muted); }

.act {
  min-width: 44px; height: 44px; padding: 0 4px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--rr-ink); background: var(--rr-panel); border: 1px solid var(--rr-panel-line); white-space: nowrap;
}
.act-end { background: var(--rr-accent); color: var(--rr-on-accent, #1d130a); border-color: var(--rr-accent); }
.act:disabled { opacity: 0.4; cursor: default; }

/* The Review screen (T697, T700): the Play screen once the match is over (.over), shown INSTEAD of the Result screen (a screen swap, no
   overlay). The menu button gives way to the Results button (back to the Result screen), the hand and the action row give way to the
   review bar (Replay match and Results; during the match replay Prev turn, Pause or Play, Next turn and Done, with the round and the
   farm named above). A bar of fixed height, so the shell never scrolls. */
.hud-results { display: none; width: auto; min-width: 64px; padding: 0 8px; font: inherit; font-size: 12px; font-weight: 700; }
.play.over .hud-menu, .play.over .hud-replay { display: none; }
.play.over .hud-results { display: block; }
.play.over > .hand, .play.over > .actions { display: none; }
.review { display: none; flex: none; height: 72px; flex-direction: column; gap: 4px; }
.play > .review { width: var(--tw2-col, 100%); }
.play.over > .review { display: flex; }
.review-label { margin: 0; height: 20px; line-height: 20px; font-size: 13px; font-weight: 700; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.review-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: center; }
.review[data-mode="review"] .rv-replay, .review[data-mode="replay"] .rv-review { display: none; }
.rv-btn { white-space: normal; line-height: 1.05; font-size: 12px; }

/* The guided first match (T637): the coach line sits over the top of the board slot (absolute, so the Play layout
   never changes), with a Skip button of at least 44 x 44; the step's hand card or action button glows. */
.coach {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 3; display: none; align-items: center; gap: 6px;
  width: var(--tw2-col, 100%); max-width: 100%; min-height: 48px; padding: 2px 2px 2px 10px; box-sizing: border-box;
  border-radius: 10px; background: rgba(29, 19, 10, 0.92); color: #fff; border: 2px solid var(--tw2-guide, #ffe14a);
}
.coach.on { display: flex; }
.coach-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left; }
.coach-skip {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6);
}
.coach.done .coach-skip { display: none; }
.coach.done { padding-right: 10px; }
.coach.nudge { animation: coach-nudge 0.4s ease-out; }
@keyframes coach-nudge { 0% { transform: translateX(-50%) scale(1.04); background: #6b4a12; } 100% { transform: translateX(-50%) scale(1); } }
.card.guide, .act.guide { border-color: #ffe14a; box-shadow: 0 0 0 3px #ffe14a; animation: guide-pulse 1.1s ease-in-out infinite; }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 2px #ffe14a; } 50% { box-shadow: 0 0 0 5px rgba(255, 225, 74, 0.55); } }
@media (prefers-reduced-motion: reduce) { .coach.nudge, .card.guide, .act.guide { animation: none; } }

/* The play by play (T663): the caption bar sits over the top of the board slot (absolute, so the Play layout never
   changes; it sits on the far half of the board from the plant being shown), never takes a tap, and
   replaces the guide's coach line while it shows. */
.beat-bar {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 4; display: none; align-items: center;
  width: var(--tw2-col, 100%); max-width: 100%; min-height: 36px; padding: 4px 10px; box-sizing: border-box; pointer-events: none;
  border-radius: 10px; background: rgba(29, 19, 10, 0.92); color: #fff; border: 2px solid var(--tw2-beat, #ffd84a);
}
.beat-bar.on { display: flex; }
.beat-bar.low { top: auto; bottom: 2px; }
.beat-bar.summary { border-color: #fff; }
.beat-text { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left; }
.beat-bar.on ~ .coach { display: none; }

/* The round ceremony (T695): the round card sits in the middle of the board slot (absolute, so the Play layout never changes;
   the HUD row and its hamburger are above the slot) for feel.roundMs, takes no tap itself (TW2_round hides it on any tap
   on the Play screen) and hides the guide's coach line while it shows. From the countdown on it turns gold; the final round
   also glows. Motion only when the OS does not ask to reduce it. */
.round-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: none; flex-direction: column;
  align-items: center; gap: 4px; width: min(var(--tw2-col, 100%), 300px); max-width: 100%; padding: 10px 12px; box-sizing: border-box;
  text-align: center; pointer-events: none; border-radius: 14px; background: rgba(29, 19, 10, 0.94); color: #fff; border: 2px solid var(--rr-accent);
}
.round-card.on { display: flex; }
.round-card.warn { border-color: var(--rr-warn); }
.round-card.final { border-color: var(--rr-warn); box-shadow: 0 0 0 3px rgba(232, 161, 58, 0.45); }
.round-head { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.round-note { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--rr-warn); }
.round-note:empty { display: none; }
.round-card.on ~ .coach { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .round-card.on { animation: round-in 0.22s ease-out; }
  .round-card.final.on { animation: round-in 0.22s ease-out, final-glow 1s ease-in-out 0.22s infinite; }
  .chip.glow { animation: harvest-glow 1.2s ease-in-out infinite; }
}
@keyframes round-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes final-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(232, 161, 58, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(232, 161, 58, 0.2); } }
@keyframes harvest-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--rr-warn); } 50% { box-shadow: 0 0 6px 2px var(--rr-warn); } }
.chip.glow { color: var(--rr-ink); border-color: var(--rr-warn); box-shadow: 0 0 0 1px var(--rr-warn); }
.hud-round.gold { padding: 5px 9px; border-radius: 999px; background: var(--rr-warn); color: #1d130a; }
.act-end.harvest-next { white-space: normal; font-size: 11px; line-height: 1.05; padding: 0 3px; }

/* The crop sheet (T664): a dialog over the Play screen (absolute inside #play, so the Play layout never changes).
   Any tap on it closes it. Portrait: head, shape beside the four lines, the plant's numbers, all in one card.
   The card scrolls inside itself as a last resort. */
.info {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--rr-inset-top) + 8px) calc(8px + var(--rr-inset-right)) calc(8px + var(--rr-inset-bottom)) calc(8px + var(--rr-inset-left));
  box-sizing: border-box; background: rgba(8, 5, 2, 0.62); cursor: pointer;
}
.info[hidden] { display: none; }
.info-card {
  width: min(100%, 420px); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 10px 12px 12px; text-align: left;
  border-radius: 14px; background: var(--rr-bg-soft); border: 2px solid var(--rr-accent); color: var(--rr-ink); cursor: default;
}
.info-head { display: flex; align-items: center; gap: 10px; }
.info-art { flex: none; width: 56px; height: 56px; }
.info-name { flex: 1 1 auto; min-width: 0; }
.info-title { margin: 0; font-size: 20px; line-height: 1.15; }
.info-facts { margin: 2px 0 0; display: flex; gap: 12px; font-size: 13px; color: var(--rr-muted); }
.info-facts b { color: var(--rr-ink); }
.info-close {
  flex: none; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--rr-ink); background: transparent; border: 1px solid var(--rr-panel-line);
}
.info-body { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; }
.info-shape { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.info-grid { display: grid; grid-template-columns: repeat(5, 18px); grid-template-rows: repeat(5, 18px); gap: 1px; padding: 2px; border-radius: 6px; background: var(--rr-panel-line); }
.info-grid .cell { display: block; background: var(--rr-panel); border-radius: 2px; }
.info-grid .cell.on { background: #46be50; }
.info-grid .cell.me { background: #e07a2e; box-shadow: inset 0 0 0 2px #fff; }
.info-cap { font-size: 10px; color: var(--rr-muted); }
.info-lines { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; line-height: 1.3; }
.info-lines dt { margin: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rr-accent); }
.info-lines dd { margin: 0 0 5px; }
.info-live { margin: 6px 0 0; padding: 6px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; border-top: 1px solid var(--rr-panel-line); }
.info-live[hidden] { display: none; }
.info-live li { padding: 3px 7px; border-radius: 999px; font-size: 11px; line-height: 1.2; background: var(--rr-panel); border: 1px solid var(--rr-panel-line); }
@media (max-width: 380px) {
  .info-body { flex-direction: column; align-items: center; }
  .info-lines { width: 100%; }
}