/* ═══════════════════ Phone layout (≤ 600 px) — loaded after hud-v2.css ═══════════════════
   One compact status row on top, a single-line tutorial strip, a thumb-zone action bar along the bottom with the
   attack shield at its right end, slim icon buttons on the right edge. Panels (build dock, info sheet, place bar)
   sit above the action bar and push the side buttons away while they are open. */
@media (max-width: 600px) and (orientation: portrait) {
  :root { --bar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); }

  /* ── status row ── */
  #hud-top { top: calc(6px + env(safe-area-inset-top, 0px)); left: 6px; right: 6px; gap: 6px; flex-wrap: nowrap; align-items: stretch; }
  .profile { flex: 0 0 auto; min-height: 0; padding: 0; margin: 0; width: 46px; height: 48px; border: none; background: none; box-shadow: none; }
  .profile .emblem { position: static; width: 46px; height: 48px; }
  .profile .emblem .ui-icon { width: 46px !important; height: 48px !important; }
  .profile .council-level { font-size: 16px; }
  .profile-text, .profile .trophies { display: none; }
  .resources { flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 6px; gap: 2px; border-radius: 12px; justify-content: space-between; }
  .res-chip { flex: 1 1 0; min-width: 0; gap: 2px; padding-right: 2px; }
  .res-chip + .res-chip { padding-left: 4px; }
  .res-chip .res-icon { width: 26px !important; height: 26px !important; margin: -2px 0; }
  .res-chip .res-text { min-width: 0; gap: 2px; }
  .res-chip b { font-size: 14px; }
  .res-chip .progress { min-width: 0; height: 4px; }
  .res-chip.crystals { flex: 0 0 auto; }
  .plus-btn { width: 22px; height: 22px; font-size: 16px; margin-left: 2px; }
  .builders { flex: 0 0 auto; padding: 4px 7px; gap: 3px; border-radius: 12px; font-size: 14px; flex-direction: column; justify-content: center; }
  .builders .ui-icon { width: 20px !important; height: 20px !important; }
  .builders b { font-size: 13px; }
  .builders .idle-badge { width: 16px; height: 16px; font-size: 11px; top: -6px; right: -6px; }
  .chip.shield { position: absolute; top: 54px; right: 0; font-size: 11px; padding: 2px 8px; }

  /* ── tutorial: one line under the status row ── */
  #tutorial { top: calc(62px + env(safe-area-inset-top, 0px)); left: 6px; right: 6px; transform: none; max-width: none;
    padding: 5px 6px 5px 8px; gap: 8px; border-radius: 12px; border-width: 2px; }
  #tutorial .tut-icon .ui-icon { width: 26px !important; height: 26px !important; }
  #tutorial .tut-text { min-width: 0; flex: 1; font-size: 12px; }
  #tutorial .tut-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tutorial .tut-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tutorial .btn.small { padding: 4px 8px; font-size: 12px; }
  .tut-arrow { width: 28px; height: 28px; font-size: 20px; }

  /* ── right edge: slim icon buttons ── */
  #hud-right { top: calc(112px + env(safe-area-inset-top, 0px)); right: 6px; gap: 6px; }
  #hud-right .hud-btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; border-width: 2px; }
  #hud-right .hud-btn .ico { width: 30px !important; height: 30px !important; margin: 0; }
  #hud-right .hud-btn .lbl { display: none; }

  /* ── bottom action bar (thumb zone) with the attack shield at its end ── */
  #hud-left { left: 6px; right: 98px; bottom: calc(8px + var(--safe-b)); flex-direction: row; gap: 6px; }
  #hud-left .hud-btn { flex: 1 1 0; width: auto; max-width: 74px; height: var(--bar-h); padding: 2px 0 4px; border-radius: 14px; font-size: 10px; }
  #hud-left .hud-btn .ico { width: 36px !important; height: 36px !important; }
  #hud-attack { right: 6px; bottom: calc(4px + var(--safe-b)); }
  .attack-btn { width: 86px; height: 96px; }
  .attack-btn::before { inset: 5px; }
  .attack-btn .swords { width: 54px !important; height: 54px !important; margin-top: -18px; }
  .attack-btn .attack-label { font-size: 13px; margin-top: -8px; }

  /* ── panels sit above the action bar ── */
  #build-dock { left: 6px; right: 6px; width: auto; transform: none; bottom: calc(108px + var(--safe-b)); }
  .dock-frame { padding: 0 6px 8px; border-radius: 14px; }
  .dock-tabs { flex-wrap: nowrap; overflow-x: auto; transform: translateY(-16px); margin-bottom: -10px; padding: 0 34px 2px 2px; gap: 4px; scrollbar-width: none; }
  .dock-tabs::-webkit-scrollbar { display: none; }
  .dock-tab { flex: 0 0 auto; padding: 4px 10px 4px 5px; font-size: 13px; gap: 4px; }
  .dock-tab .ui-icon { width: 22px !important; height: 22px !important; }
  .dock-close { top: -15px; right: -2px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--slate-3), var(--slate)); border: 2px solid var(--rim); color: var(--txt); font-size: 15px; z-index: 2; }
  .dock-cards { gap: 6px; padding-bottom: 2px; scroll-snap-type: x mandatory; }
  .dock-card { flex-basis: 112px; padding: 6px 4px; scroll-snap-align: start; }
  .dock-icon-wrap { width: 100px; height: 64px; }
  .dock-icon { max-width: 98px; max-height: 64px; }
  .dock-name { font-size: 12px; min-height: 28px; }
  .dock-card .cost-item { font-size: 13px; }

  #sheet, #place-bar { left: 6px; right: 6px; width: auto; transform: none; min-width: 0; padding: 8px 10px; border-radius: 14px;
    bottom: calc(108px + var(--safe-b)); max-height: 46vh; overflow-y: auto; }
  .sheet-head h3 { font-size: 15px; }
  .sheet-desc { font-size: 12px; margin: 2px 0 6px; }
  .sheet-actions { gap: 6px; }
  #place-bar { flex-wrap: wrap; }
  #place-bar .place-info { flex: 1 1 100%; }
  #place-bar .btn { flex: 1 1 0; }

  /* while a panel is open, the right-edge buttons step aside */
  body:has(#build-dock:not(.hidden)) #hud-right,
  body:has(#sheet:not(.hidden)) #hud-right,
  body:has(#place-bar:not(.hidden)) #hud-right,
  body:has(#place-bar:not(.hidden)) #hud-left,
  body:has(#place-bar:not(.hidden)) #hud-attack { opacity: 0; pointer-events: none; }
  body:has(#build-dock:not(.hidden)) #tutorial,
  body:has(#place-bar:not(.hidden)) #tutorial { display: none; }
  #place-bar { bottom: calc(10px + var(--safe-b)); }

  /* ── modal panels: full-width sheets ── */
  .panel { width: calc(100vw - 52px) !important; max-width: none; max-height: calc(100dvh - 90px); }   /* room for the carved frame */

  /* ── battle HUD ── */
  #battle-top { top: calc(6px + env(safe-area-inset-top, 0px)); left: 6px; right: 6px; gap: 6px; flex-wrap: nowrap; }
  .b-center { flex: 1 1 auto; min-width: 0; padding: 4px 6px; }
  .b-timer { font-size: 15px; }
  .b-conds { gap: 3px; }
  .b-cond { font-size: 10px; padding: 1px 5px 1px 3px; }
  .b-loot { display: none; }
  #battle-top .btn { padding: 6px 8px; font-size: 12px; align-self: flex-start; }
  #battle-hint { top: 92px; font-size: 13px; width: calc(100vw - 24px); }
  #battle-bar { left: 4px; right: 4px; bottom: calc(6px + var(--safe-b)); gap: 4px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  #battle-bar::-webkit-scrollbar { display: none; }
  .b-card { flex: 0 0 60px; width: 60px; }
}

@media (max-width: 380px) and (orientation: portrait) {
  .res-chip .progress { display: none; }
  .res-chip b { font-size: 13px; }
  #hud-left .hud-btn { font-size: 9px; }
  #hud-left .hud-btn .ico { width: 32px !important; height: 32px !important; }
  .attack-btn { width: 78px; height: 88px; }
  #hud-left { right: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .builders.idle { animation: none; }
}

/* ═══════════════════ Phone held sideways (landscape, height ≤ 500 px) ═══════════════════
   Both thumbs rest on the side edges: main actions in a column under the left thumb, small tools and the attack
   shield under the right thumb, a thin status row on top. Panels open in the middle strip between the columns
   so the village stays visible on both sides. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --col-l: 66px; --col-r: 96px; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); }

  /* thin status row */
  #hud-top { top: 4px; left: calc(6px + var(--sl)); right: calc(6px + var(--sr)); gap: 6px; flex-wrap: nowrap; align-items: center; }
  .profile { padding: 2px 10px 2px 44px; min-height: 36px; gap: 8px; margin-left: 2px; border-width: 2px; border-radius: 12px; }
  .profile .emblem { left: -8px; top: -6px; width: 46px; height: 48px; }
  .profile .emblem .ui-icon { width: 46px !important; height: 48px !important; }
  .profile .council-level { font-size: 15px; }
  .profile-text b { font-size: 13px; }
  .profile .muted, .profile .small { display: none !important; }
  .trophies { font-size: 13px; }
  .trophies .ui-icon { width: 18px !important; height: 18px !important; }
  .resources { margin-left: auto; padding: 3px 8px; gap: 4px; border-width: 2px; border-radius: 12px; }
  .res-chip { min-width: 96px; }
  .res-chip .res-icon { width: 26px !important; height: 26px !important; margin: -3px 0; }
  .res-chip .res-text { min-width: 50px; }
  .res-chip b { font-size: 14px; }
  .res-chip .progress { height: 4px; min-width: 50px; }
  .res-chip.crystals { min-width: 70px; }
  .plus-btn { width: 22px; height: 22px; font-size: 16px; }
  .builders { padding: 3px 8px; font-size: 14px; border-width: 2px; border-radius: 12px; }
  .builders .ui-icon { width: 20px !important; height: 20px !important; }
  .builders .idle-badge { width: 16px; height: 16px; font-size: 11px; top: -6px; right: -6px; }
  .chip.shield { font-size: 11px; padding: 2px 8px; }

  /* tutorial: one line under the status row, between the columns */
  #tutorial { top: 50px; left: calc(var(--col-l) + 10px + var(--sl)); right: auto; transform: none; max-width: min(430px, calc(100vw - var(--col-l) - var(--col-r) - 30px));
    padding: 4px 6px 4px 8px; gap: 8px; border-radius: 12px; border-width: 2px; }
  #tutorial .tut-icon .ui-icon { width: 24px !important; height: 24px !important; }
  #tutorial .tut-text { min-width: 0; flex: 1; font-size: 11px; }
  #tutorial .tut-text b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tutorial .tut-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tutorial .btn.small { padding: 3px 8px; font-size: 11px; }
  .tut-arrow { width: 26px; height: 26px; font-size: 18px; }

  /* left thumb: main actions */
  #hud-left { left: calc(6px + var(--sl)); top: 50px; bottom: auto; gap: 6px; }
  #hud-left .hud-btn { width: 58px; height: 56px; padding: 1px 0 3px; border-radius: 13px; border-width: 2px; font-size: 9.5px; }
  #hud-left .hud-btn .ico { width: 34px !important; height: 34px !important; margin-top: 0; }

  /* right thumb: tools, then the attack shield */
  #hud-right { right: calc(6px + var(--sr)); top: 50px; gap: 4px; }
  #hud-right .hud-btn { width: 40px; height: 38px; padding: 0; border-radius: 11px; border-width: 2px; }
  #hud-right .hud-btn .ico { width: 28px !important; height: 28px !important; margin: 0; }
  #hud-right .hud-btn .lbl { display: none; }
  #hud-attack { right: calc(4px + var(--sr)); bottom: calc(4px + var(--sb)); }
  .attack-btn { width: 84px; height: 92px; }
  .attack-btn::before { inset: 5px; }
  .attack-btn .swords { width: 52px !important; height: 52px !important; margin-top: -18px; }
  .attack-btn .attack-label { font-size: 13px; margin-top: -8px; }

  /* panels in the middle strip */
  #build-dock { left: calc(var(--col-l) + 10px + var(--sl)); right: calc(var(--col-r) + 10px + var(--sr)); width: auto; transform: none; bottom: calc(4px + var(--sb)); }
  .dock-frame { padding: 0 6px 6px; border-radius: 14px; border-width: 2px; }
  .dock-tabs { flex-wrap: nowrap; overflow-x: auto; transform: translateY(-14px); margin-bottom: -10px; padding: 0 34px 2px 2px; gap: 4px; scrollbar-width: none; }
  .dock-tabs::-webkit-scrollbar { display: none; }
  .dock-tab { flex: 0 0 auto; padding: 3px 9px 3px 4px; font-size: 12px; gap: 4px; }
  .dock-tab .ui-icon { width: 20px !important; height: 20px !important; }
  .dock-close { top: -14px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--slate-3), var(--slate)); border: 2px solid var(--rim); color: var(--txt); font-size: 14px; z-index: 2; }
  .dock-cards { gap: 6px; padding: 2px; scroll-snap-type: x mandatory; }
  .dock-card { flex-basis: 104px; padding: 4px; gap: 1px; scroll-snap-align: start; font-size: 11px; }
  .dock-icon-wrap { width: 94px; height: 54px; }
  .dock-icon { max-width: 92px; max-height: 54px; }
  .dock-name { font-size: 11px; min-height: 24px; }
  .dock-count, .dock-time, .dock-lockmsg { font-size: 10px; }
  .dock-card .cost-item { font-size: 12px; }

  #sheet, #place-bar { left: calc(var(--col-l) + 10px + var(--sl)); right: calc(var(--col-r) + 10px + var(--sr)); width: auto; transform: none; min-width: 0;
    bottom: calc(4px + var(--sb)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 6px 10px; border-radius: 14px; border-width: 2px; }
  .sheet-icon { display: block; width: 74px; height: 84px; }
  .sheet-head h3 { font-size: 14px; }
  .sheet-desc { font-size: 11px; margin: 1px 0 4px; }
  .sheet-actions { gap: 6px; }
  .sheet-actions .btn { padding: 5px 10px; font-size: 12px; }
  #place-bar .place-info { font-size: 12px; }

  /* while a panel is open: tutorial and tools step aside */
  body:has(#build-dock:not(.hidden)) #tutorial,
  body:has(#sheet:not(.hidden)) #tutorial,
  body:has(#place-bar:not(.hidden)) #tutorial { display: none; }
  body:has(#place-bar:not(.hidden)) #hud-right,
  body:has(#place-bar:not(.hidden)) #hud-left,
  body:has(#place-bar:not(.hidden)) #hud-attack { opacity: 0; pointer-events: none; }

  /* modal panels use the full height */
  .panel { max-height: calc(100dvh - 64px); width: min(640px, calc(100vw - 150px)) !important; }

  /* battle */
  #battle-top { top: 4px; left: calc(6px + var(--sl)); right: calc(6px + var(--sr)); gap: 6px; flex-wrap: nowrap; }
  .b-enemy, .b-loot { padding: 3px 8px; font-size: 11px; }
  .b-center { padding: 3px 8px; }
  .b-timer { font-size: 14px; }
  .b-cond { font-size: 10px; padding: 1px 5px 1px 3px; }
  #battle-top .btn { padding: 5px 8px; font-size: 11px; }
  #battle-hint { top: 74px; font-size: 12px; }
  #battle-bar { left: calc(6px + var(--sl)); right: calc(6px + var(--sr)); bottom: calc(4px + var(--sb)); gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #battle-bar::-webkit-scrollbar { display: none; }
  .b-card { flex: 0 0 56px; width: 56px; }
  .b-portrait { width: 46px; height: 40px; }
}

/* very short landscape screens (≤ 360 px tall): drop the action labels */
@media (orientation: landscape) and (max-height: 360px) {
  #hud-left .hud-btn { height: 46px; }
  #hud-left .hud-btn .lbl { display: none; }
  #hud-right .hud-btn { width: 36px; height: 34px; }
  #hud-right .hud-btn .ico { width: 24px !important; height: 24px !important; }
}