/* Turf Wars HUD (T344): one row above the board. Coins, income per minute, drought timer, cut-off
   badge, then the pause and speed buttons on the right. The kit .safe-top class pads the top for the
   camera; sides pad by the --rr-inset-* tokens. The board area (flex) shrinks to what is left. The tray
   styles arrive with the tray task. */
.hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  padding-left: calc(8px + var(--rr-inset-left));
  padding-right: calc(8px + var(--rr-inset-right));
  background: var(--tw-soil);
  border-bottom: 1px solid var(--tw-soil-light);
  color: var(--tw-cream);
  font: 700 13px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  touch-action: manipulation;
  text-align: left;
}
.hud-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 0 0 auto; }
.hud-item b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-coins { font-size: 16px; color: #ffd23a; }
.hud-coin {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a6 0 18%, #f2c230 45%, #b88410 100%);
  border: 2px solid #5e3a06; box-sizing: border-box;
}
.hud-full {
  font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 8px;
  background: #ffd23a; color: #3a2406; border: 1px solid #5e3a06;
}
.hud-full[hidden] { display: none; }
.hud-coins.full b { color: #fff3a6; }
.hud-income { color: var(--tw-leaf); font-variant-numeric: tabular-nums; }
.hud-drought { flex: 0 1 auto; color: var(--tw-cream); opacity: 0.85; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.hud-drought.warn { color: #ffb347; opacity: 1; }
.hud-drought.on { color: #ff7a4a; opacity: 1; }
.hud-clock { font-variant-numeric: tabular-nums; color: var(--tw-cream); }
.hud-clock.warn { color: #ffb347; }
.hud-cut { background: #5a1c1c; border: 1px solid #b4423a; border-radius: 10px; padding: 2px 7px 2px 5px; color: #ffd6cf; }
.hud-cut[hidden] { display: none; }
.hud-cut svg { width: 16px; height: 16px; flex: none; }
/* Rivals strip (T498, free-for-all only): one swatch per rival in its owner colour and pattern; a rival that is out is dimmed and struck through. */
.hud-rivals { gap: 3px; }
.hud-rivals[hidden] { display: none; }
.hud-rival { position: relative; display: block; flex: none; line-height: 0; }
.hud-rival canvas { display: block; border-radius: 3px; }
.hud-rival.out canvas { opacity: 0.35; }
.hud-rival.out::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px; background: #ff6a5a; border-radius: 1px; transform: rotate(-35deg); }
.hud-spacer { flex: 1 1 0; min-width: 0; }
.hud .hud-btn { color: var(--tw-cream); font-weight: 800; font-size: 14px; padding: 0 6px; min-width: 44px; min-height: 44px; border-color: var(--tw-soil-light); }
.hud .hud-btn:active { background: var(--tw-soil-light); }
/* Phone portrait (T408): the coin counter with its FULL badge takes the top line, income, the drought countdown and the cut-off badge the line
   under it, and the pause and speed buttons span both lines (44 px, as in the one-line bar), so nothing is truncated at 360 or 390 px. */
@media (max-width: 480px) {
  .hud {
    display: grid; grid-template-columns: auto auto auto 1fr auto auto; grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 2px; align-items: center;
  }
  .hud-coins { grid-column: 1 / 4; grid-row: 1; }
  .hud-income { grid-column: 1; grid-row: 2; }
  .hud-drought { grid-column: 2; grid-row: 2; overflow: visible; text-overflow: clip; }
  .hud-cut { grid-column: 3; grid-row: 2; }
  .hud-rivals { grid-column: 4; grid-row: 2; justify-self: end; }
  .hud-clock { grid-column: 4; grid-row: 1; justify-self: end; }
  .hud-spacer { display: none; }
  .hud #hud-pause { grid-column: 5; grid-row: 1 / span 2; }
  .hud #hud-speed { grid-column: 6; grid-row: 1 / span 2; }
}
@media (max-width: 380px) {
  .hud { gap: 4px; column-gap: 6px; padding-left: calc(5px + var(--rr-inset-left)); padding-right: calc(5px + var(--rr-inset-right)); font-size: 12px; }
  .hud-coins { font-size: 14px; }
  .hud-coin { width: 14px; height: 14px; }
  .hud-full { font-size: 9px; padding: 1px 3px; }
  .hud-ring { display: none; }
  .hud-cut { padding: 2px 5px 2px 3px; gap: 2px; }
  .hud .hud-btn { padding: 0 2px; }
}

/* Tray (T346): selection strip, action chips and the seed tray at the bottom of the Play screen (portrait only, P067). Chips and seed buttons
   are at least 56 px tall (T475); the eight seed buttons are the two always crops and the six picks: two rows of four.
   The sides and bottom pad by the --rr-inset-* tokens. */
.tray {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px calc(8px + var(--rr-inset-right)) calc(6px + var(--rr-inset-bottom)) calc(8px + var(--rr-inset-left));
  background: var(--tw-soil);
  border-top: 1px solid var(--tw-soil-light);
  color: var(--tw-cream);
  font: 700 12px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  touch-action: manipulation;
  min-width: 0;
}
.tr-strip {
  flex: none; height: 18px; line-height: 18px; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.92;
}
.tr-strip.warn { color: #ffb347; opacity: 1; font-weight: 800; }
.tr-strip.ok { color: #b6ec8a; opacity: 1; font-weight: 800; }
.tr-strip.hint { color: #b6ec8a; opacity: 1; font-weight: 800; }
.tr-chips { flex: none; display: flex; flex-wrap: wrap; gap: 4px; min-height: 56px; }
.tr-chip {
  flex: 1 1 0; min-width: 56px; min-height: 56px; padding: 0 3px; box-sizing: border-box;
  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tw-cream);
  background: var(--tw-soil-light); border: 1px solid #7a5a3a; border-radius: 10px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.tr-chip:active { background: #7a5a3a; }
.tr-chip.on { background: var(--tw-leaf-dark); border-color: #b6ec8a; color: #fff; }
.tr-crops { flex: none; display: grid; grid-template-columns: repeat(var(--tr-cols, 6), minmax(0, 1fr)); gap: 4px; }
.tr-crop {
  position: relative; min-height: 56px; min-width: 0; padding: 2px 0 3px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tw-cream);
  background: #3d2a19; border: 1px solid #7a5a3a; border-radius: 10px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; overflow: hidden;
}
.tr-crop:active { background: #5a3d24; }
.tr-icon { display: block; flex: none; margin: -3px 0 -5px; pointer-events: none; }
.tr-name { display: none; font-size: 10px; font-weight: 700; opacity: 0.85; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr-cost { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; color: #ffd23a; pointer-events: none; }
.tr-cost::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3a6 0 18%, #f2c230 50%, #b88410 100%); border: 1px solid #5e3a06;
}
.tr-cd {
  position: absolute; top: 2px; right: 2px; padding: 1px 4px; border-radius: 8px; pointer-events: none;
  background: rgba(20, 12, 6, 0.85); color: #ffd6a0; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tr-cd[hidden] { display: none; }
.tr-key { display: none; }
.tr-arm[hidden] { display: none; }
.tr-arm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #ffd23a; color: #3a2506; font-size: 10px; font-weight: 900; white-space: nowrap;
}
.tr-arm .tr-cost { color: #3a2506; }
.tr-crop.armed { border-color: #ffd23a; box-shadow: 0 0 0 2px #ffd23a inset; background: #5a3d24; }
.tr-crop.poor { background: #2a1d12; border-color: #5a4430; }
.tr-crop.poor .tr-icon, .tr-crop.poor .tr-cost, .tr-crop.poor .tr-name { opacity: 0.5; filter: grayscale(1); }
@media (hover: hover) and (pointer: fine) {
  .tr-key { display: block; position: absolute; top: 2px; left: 4px; font-size: 9px; opacity: 0.6; pointer-events: none; }
}
@media (max-width: 400px) {
  .tr-chip { font-size: 11px; padding: 0 1px; letter-spacing: -0.2px; }
  /* Six chips (a spreader) must each stay 56 wide on a 360 px phone: 6 x 56 + 5 x 2 = 346 of the 348 left. */
  .tray { padding-left: calc(6px + var(--rr-inset-left)); padding-right: calc(6px + var(--rr-inset-right)); }
  .tr-chips { gap: 2px; }
}
@media (min-width: 430px) {
  .tr-name { display: block; }
  .tr-crop { min-height: 62px; }
  .tr-icon { margin-bottom: -7px; }
}
/* Landscape under 520 px tall (T475: a phone on its side, 844 x 390 and 568 x 320). Strip, two chip rows and four seed rows of 56 px do not
   stack in under 255 px, so the tray is a four column grid: the strip on top left, the chips under it in two columns (the most any
   selection shows is six, three rows), and the eight seed buttons in the two columns on the right, four rows. Every target stays 56 px;
   the board gives up the width (the tray is 256 px or more), never the play-zoom tile (48 px). */

/* Ready and countdown (T443, ADR-003 section 17): over the board. The layer ignores touches (the board keeps its
   pan and zoom) except on the Ready button, which is at least 44 px (56 here). The number scales in once per
   second; .still (reduce motion, set by TW_hud) and prefers-reduced-motion show it without scaling. */
.ready { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; }
.ready[hidden], .ready [hidden] { display: none; }
.ready-btn {
  pointer-events: auto; touch-action: manipulation; min-width: 160px; min-height: 56px; padding: 0 32px;
  font: 800 clamp(20px, 6vw, 28px)/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tw-soil); background: var(--tw-leaf); border: 3px solid var(--tw-cream); border-radius: 14px;
  box-shadow: 0 4px 0 var(--tw-leaf-dark), 0 8px 18px rgba(0, 0, 0, 0.5); cursor: pointer;
}
.ready-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tw-leaf-dark), 0 4px 10px rgba(0, 0, 0, 0.5); }
.ready-count {
  max-width: 100%; text-align: center; font: 900 clamp(64px, 24vmin, 140px)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tw-cream); text-shadow: 0 4px 0 var(--tw-leaf-dark), 0 8px 22px rgba(0, 0, 0, 0.6);
}
.ready-count.grow { font-size: clamp(48px, 18vmin, 110px); color: var(--tw-leaf); text-shadow: 0 4px 0 var(--tw-soil), 0 8px 22px rgba(0, 0, 0, 0.6); }
.ready-count span { display: inline-block; animation: ready-pop 0.9s ease-out both; }
.ready-count.still span { animation: none; }
@keyframes ready-pop { 0% { transform: scale(1.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .ready-count span { animation: none; } }

/* Tutorial tip banner (T502): one or two lines over the top of the board area, under the HUD, with a Skip button (44 px). The banner lets taps
   through to the board; only Skip takes them. It sits below the Ready overlay (z-index 5) and inside #board-wrap, so it never reaches the tray. */
.tip {
  position: absolute; top: 6px; left: 8px; right: 8px; z-index: 4; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 10px; min-height: 44px; max-height: 76px; overflow: hidden;
  background: rgba(46, 32, 20, 0.94); border: 1px solid #b6ec8a; border-radius: 12px; color: var(--tw-cream);
  font: 700 13px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); -webkit-user-select: none; user-select: none;
}
.tip[hidden] { display: none; }
.tip-text { flex: 1 1 auto; min-width: 0; }
.tip-skip {
  flex: none; min-width: 56px; min-height: 44px; padding: 0 10px; box-sizing: border-box; pointer-events: auto;
  font: 800 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tw-cream);
  background: var(--tw-soil-light); border: 1px solid #7a5a3a; border-radius: 10px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tip-skip:active { background: #7a5a3a; }