/* ================================================
   DSNAKE TURF — css/turf.css
   Kept separate from css/games.css/arcade.css/swarm.css — same
   per-concern split the repo already uses (see css/arcade.css's own
   header comment for the reasoning).
   ================================================ */

.turf-page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.turf-hud-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.turf-hud-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.turf-stat {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem; font-size: 0.75rem; color: var(--text-dim);
}
.turf-stat strong { color: var(--green-secondary); font-family: var(--font-heading); }

.turf-canvas-wrap {
  /* Was 16/9, copied from swarm.css's wrapper — fine for Swarm, whose
     camera just fills whatever canvas size it's given, but Turf's grid
     is a fixed-size square (80×80 cells, floored at 4px/cell for
     legibility — see turf.html's _draw()). On a narrow phone, 16/9 made
     this box too short for the floored map to fit, clipping roughly a
     quarter of it off the top and bottom (overflow: hidden below).
     Squaring the wrapper up to match its actual square content fixes
     that; see TEAM_BACKLOG.md's 2026-10-03 Turf entry for the exact
     numbers this was checked against.
     max-width added alongside the pre-existing max-height: without it,
     aspect-ratio only governs height-from-width, so past ~620px wide
     (tablet/desktop) max-height caps the height while width keeps
     growing with the container — a wrapper that's wide but not
     actually square again, just with empty side margins around the
     centered square map instead of clipping it. Capping width to match
     keeps the wrapper genuinely square (canvas = wrapper = map) at
     every size, and costs nothing on mobile, where width is already
     under 620px. */
  position: relative; width: 100%; aspect-ratio: 1/1; max-width: 620px; max-height: 620px; margin: 0 auto;
  background: #050a06; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--glow-sm);
}
#turf-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.turf-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem; text-align: center; padding: 1rem;
  background: rgba(3, 7, 3, 0.82); backdrop-filter: blur(2px);
}
.turf-overlay.hidden { display: none; }

.turf-mini-leaderboard {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(8, 16, 10, 0.75); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.72rem; min-width: 140px;
}
.turf-mini-leaderboard h4 { margin: 0 0 0.35rem; font-size: 0.65rem; letter-spacing: 1px; color: var(--text-dim); font-family: var(--font-heading); }
.turf-mini-leaderboard div { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-primary); padding: 1px 0; }
.turf-mini-leaderboard div.self { color: var(--green-secondary); font-weight: 700; }

.turf-round-timer {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  background: rgba(8, 16, 10, 0.75); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 0.35rem 0.9rem; font-size: 0.8rem; font-family: var(--font-heading); color: var(--green-secondary);
}

.turf-results-table { width: 100%; max-width: 320px; font-size: 0.85rem; }
.turf-results-table div { display: flex; justify-content: space-between; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-color); }
.turf-results-table div:first-child { color: var(--green-secondary); font-weight: 700; }

.turf-dpad {
  display: none; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px);
  gap: 6px; justify-content: center; margin: 0.9rem auto 0;
}
@media (max-width: 768px) { .turf-dpad { display: grid; } }
.turf-dpad-btn {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  color: var(--green-secondary); font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.turf-dpad-btn:active { background: var(--green-accent); }
.turf-dpad-btn.up    { grid-column: 2; grid-row: 1; }
.turf-dpad-btn.left  { grid-column: 1; grid-row: 2; }
.turf-dpad-btn.right { grid-column: 3; grid-row: 2; }
.turf-dpad-btn.down  { grid-column: 2; grid-row: 3; }

@media (max-width: 480px) {
  /* max-width alongside max-height for the same reason as the base rule
     above — a viewport in the ~400-480px range would otherwise clamp
     height to 400 while width stays wider, going non-square again. */
  .turf-canvas-wrap { max-height: 400px; max-width: 400px; }
  .turf-mini-leaderboard { min-width: 110px; font-size: 0.65rem; }
}