/* ============================================================
   STEAM DECK PROFILE — 1280x800 compact combat + HUD
   Gated behind `body.is-deck`, which steam-deck.js sets when it
   detects a Deck-class viewport (or ?deck=1 / saved override).
   Desktop, mobile (<=1024px) and tablet layouts are untouched:
   every rule below requires the .is-deck class.
   ============================================================ */

/* ── Container: reclaim padding/gap for a 800px-tall viewport ── */
body.is-deck .combat-container {
  padding: 8px;
  gap: 8px;
  width: 100vw;
  height: 100vh;
  border-width: 2px;
}

body.is-deck .combat-header {
  padding-bottom: 4px;
}

body.is-deck .combat-header h2 {
  font-size: 1.25em;
}

/* ── Three-column grid: narrower side cards, more room center.
      Classic view (lower-specificity rules win over base). Battle-map
      view needs body.is-deck + .combat-modal.battle-map-mode (0,4,1) to
      beat its 0,3,0 overrides — see block further below. ── */
body.is-deck .combat-three-column-layout {
  grid-template-columns: 210px 1fr 210px;
  gap: 8px;
}

body.is-deck .combat-column {
  padding: 6px;
}

body.is-deck .character-combat-card {
  gap: 4px;
  padding: 6px;
}

body.is-deck .character-card-portrait .char-portrait {
  width: 56px;
  height: 56px;
}

body.is-deck .character-card-name {
  font-size: 0.85em;
}

body.is-deck .resource-bar {
  height: 13px;
}

body.is-deck .resource-label {
  font-size: 0.65em;
}

/* ── Battle-map view (default): same compaction, higher specificity.
      Shrink the side rails via the layout var so canvas + bottom
      strip widen automatically. ── */
body.is-deck .combat-modal.battle-map-mode {
  --combat-side-card-width: 192px;
}

body.is-deck .combat-modal.battle-map-mode .character-combat-card {
  padding: 10px;
  gap: 4px;
  min-height: 0;
}

body.is-deck .combat-modal.battle-map-mode .character-card-portrait .char-portrait {
  width: 64px;
  height: 64px;
}

body.is-deck .combat-modal.battle-map-mode .combat-actions-buttons button {
  padding: 6px 3px;
  font-size: 0.7em;
}

/* ── Scene-action icons: same compact size as mobile, top-right ── */
body.is-deck .combat-scene-actions {
  gap: 6px;
}

body.is-deck .combat-scene-actions .combat-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 1.9rem;
}

body.is-deck .combat-scene-actions .combat-icon-btn .battle-map-icon {
  width: 32px;
  height: 32px;
}

/* ── Timeline: compact so it clears the battlefield ── */
body.is-deck .combat-timeline-display {
  height: 76px;
  padding: 4px 8px;
  max-width: min(640px, calc(100vw - 240px));
}

body.is-deck .combat-timeline-display.has-preparing {
  height: 92px;
}

body.is-deck .timeline-action {
  min-width: 46px;
  padding: 2px;
  gap: 1px;
  font-size: 0.65em;
}

body.is-deck .timeline-portrait-container {
  width: 28px;
  height: 28px;
}

body.is-deck .timeline-position {
  font-size: 0.62em;
}

/* ── Action-phase / targeting banner: dock below the timeline,
      never on top of it (was fixed top:55px) ── */
body.is-deck .action-phase-title {
  top: 142px;
  font-size: 0.85em;
  padding: 6px 12px;
}

/* ── Enemy lines: clear the compact timeline, tighter rows ── */
body.is-deck .enemy-lines-container {
  margin-top: 72px;
  gap: 8px;
}

body.is-deck .character-lines-container {
  gap: 8px;
  margin-bottom: 8px;
}

body.is-deck .enemy-line,
body.is-deck .character-line {
  min-height: 88px;
  padding: 6px;
  gap: 8px;
}

body.is-deck .enemy-sprite {
  width: 80px;
  height: 80px;
}

body.is-deck .character-sprite {
  width: 80px;
  height: 80px;
}

body.is-deck .character-hp-bar,
body.is-deck .character-ct-bar-container {
  width: 80px;
}

/* Boss stays large but fits 800px height */
body.is-deck .boss-extra-large .boss-sprite {
  width: 150px;
  height: 150px;
}

body.is-deck .boss-extra-large-line {
  min-height: 210px !important;
  padding: 20px 10px !important;
}

body.is-deck .boss-name-plate {
  font-size: 0.9em;
  top: -24px;
}

/* ── Bottom section: 150px log instead of 220px ── */
body.is-deck .combat-bottom-section {
  height: 150px;
  flex: 0 0 150px;
}

body.is-deck .combat-bottom-section .combat-log {
  --combat-log-row-height: 18px;
  height: calc(var(--combat-log-row-height) * 5 + 4px);
  min-height: calc(var(--combat-log-row-height) * 5 + 4px);
  max-height: calc(var(--combat-log-row-height) * 5 + 4px);
}

/* ── Skill bar + command buttons ride above the shorter log ── */
body.is-deck .combat-skill-bar {
  bottom: 158px;
}

body.is-deck .combat-skill-slot {
  width: 46px;
  height: 46px;
}

body.is-deck .combat-command-actions {
  bottom: 158px;
}

body.is-deck .combat-command-icon-btn {
  width: 44px;
  height: 44px;
  font-size: 1.9rem;
}

body.is-deck #submit-turn-button.combat-command-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* ── Targeting indicator: dock below the timeline instead of on top
      of it (fixed top:10px collides with timeline + scene icons) ── */
body.is-deck .targeting-indicator {
  top: 92px;
  font-size: 0.85em;
  padding: 6px 10px;
  max-width: calc(100vw - 240px);
}

body.is-deck .targeting-locked-banner {
  bottom: 160px;
  font-size: 0.9em;
  padding: 8px 14px;
}

/* ── Smaller banners/indicators ── */
body.is-deck .wave-indicator {
  font-size: 0.75em;
  padding: 6px 10px;
}

body.is-deck .enemy-advance-banner {
  font-size: 1em;
}

body.is-deck .enemy-turn-banner {
  font-size: 0.85em;
}

body.is-deck .turn-indicator {
  font-size: 1em;
}

/* ── Gamepad hint bar stays a single slim row ── */
body.is-deck #gamepad-hint-bar {
  font-size: 0.64rem;
  padding: 4px 8px 5px;
}