/* Layout owns space; the native HUD styles own appearance. Never scale the
   controls with the game world or let extracted scenery escape its viewport. */
body { min-height:0; width:100%; height:100dvh; overflow:hidden; }
body main { min-width:0; min-height:0; }
body .arena {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  min-height:0; isolation:isolate; background:#10170f;
  --player-rail-width:clamp(144px,13vw,176px); --player-rail-gap:0px;
}
body.live-match:not(.mobile-layout) .arena { grid-template-columns:minmax(0,1fr) var(--player-rail-width); }
body .arena .map-viewport {
  position:relative; inset:auto; grid-column:1; grid-row:1;
  min-width:0; min-height:0; width:100%; height:100%; overflow:hidden;
}
body #map { overflow:hidden; }
/* Rasterize the static scenery separately from changing sprites/highlights. */
#arena-background { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; contain:strict; transform:translateZ(0); }
body #map { position:relative; contain:paint; }
/* Frequent sprite updates have their own surface, away from terrain textures,
   SVG masks, cell highlights and reserve decorations. All share one camera. */
#combat-layer { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; contain:strict; transform:translateZ(0); }
#combat-layer .combat-unit { pointer-events:auto; cursor:pointer; }
#combat-layer .combat-unit.defeated { pointer-events:none; }
body .arena .map-viewport::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#10170f,transparent 24px); }
body:not(.mobile-layout) .player-perspectives {
  position:relative; inset:auto; grid-column:2; grid-row:1 / -1;
  width:100%; max-height:none; min-height:0; margin:0; padding:14px 10px;
  background:linear-gradient(90deg,#182016,#20271e); border-left:1px solid #74835b26;
}
body:not(.mobile-layout) .team-capacity { top:12px; left:14px; }
body:not(.mobile-layout) .loot-tray { top:12px; right:calc(var(--player-rail-width) + 12px); }
body:not(.mobile-layout) .turn-order {
  position:relative; inset:auto; grid-column:1; grid-row:2; justify-self:end;
  flex-direction:row; align-items:center; gap:8px;
  width:max-content; min-width:0; max-width:calc(100% - 16px); margin:0 8px 6px;
  padding:4px 6px; max-height:64px;
}
body:not(.mobile-layout) .turn-order-heading { flex:none; flex-wrap:wrap; justify-content:center; width:82px; border:0; padding:0; gap:4px; }
body:not(.mobile-layout) .turn-order-list { min-width:0; overflow-x:auto; padding:0; }
body:not(.mobile-layout) .initiative-unit { width:44px; height:48px; }
body:not(.mobile-layout) .initiative-unit img { width:27px; height:27px; }
body:not(.mobile-layout) .shop { --shop-height:clamp(96px,17vh,132px); }
body:not(.mobile-layout) .topbar { height:calc(64px + env(safe-area-inset-top)); flex-basis:calc(64px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
body:not(.mobile-layout) .round-panel { top:calc(1px + env(safe-area-inset-top)); }
body:not(.mobile-layout) .round-frame { height:60px; }

/* The world takes the remaining height. HUD controls retain their own sizes. */
body.mobile-layout .arena { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); --player-rail-width:0px; }
body.mobile-layout .arena .map-viewport { grid-area:1 / 1; }
body.mobile-layout #bench-foundations { display:none; }
body.mobile-layout .shop { padding-top:4px; }
body.mobile-layout .shop-inner { display:grid; grid-template-columns:minmax(0,1fr) 166px; gap:4px; }
body.mobile-layout .shop-content { display:contents; }
body.mobile-layout .shop-toolbar { grid-column:1; grid-row:1; height:44px; gap:3px; min-width:0; }
body.mobile-layout .level-panel { min-width:48px; height:38px; }
body.mobile-layout .level-face { padding-inline:0; }
body.mobile-layout .level-info { gap:2px; font-size:10px; }
body.mobile-layout .level-info strong { font-size:14px; }
body.mobile-layout .xp-label { font-size:9px; }
body.mobile-layout .wallet { min-width:46px; padding:0 5px; }
body.mobile-layout .wallet svg { width:17px; height:19px; }
body.mobile-layout #kamas-count { font-size:18px; }
body.mobile-layout .streak-indicator { min-width:28px; padding:0 3px; gap:2px; font-size:12px; }
body.mobile-layout .streak-indicator img { width:13px; height:16px; }
body.mobile-layout .shop-actions { grid-column:2; grid-row:1; gap:4px; }
body.mobile-layout .shop-action { padding:5px 6px; gap:4px; }
body.mobile-layout .shop-action .action-icon { display:none; }
body.mobile-layout .shop-action .action-label { font-size:12px; }
body.mobile-layout .shop-action .action-cost { font-size:11px; gap:2px; }
body.mobile-layout .shop-action .action-cost svg { width:10px; height:12px; }
body.mobile-layout .shop-cards { grid-column:1 / -1; grid-row:2; }
body.mobile-layout .shop-card { height:clamp(88px,13dvh,110px); flex:initial; }
body.mobile-layout .mobile-bench { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); overflow:visible; touch-action:none; padding-bottom:3px; scroll-snap-type:none; }
body.mobile-layout .mobile-bench-slot { height:48px; min-width:0; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
body.mobile-layout .mobile-bench-slot img { height:39px; }
body.mobile-layout .mobile-bench-slot.drop-valid { outline:2px solid #e0e9aa; outline-offset:-2px; background:#637344; }
body.mobile-layout .mobile-bench-slot.drop-invalid { outline:2px solid #b96e60; outline-offset:-2px; }
body.mobile-layout .mobile-bench-slot.dragging img,body.mobile-layout .unit.dragging { opacity:.25; }
body.mobile-layout .mobile-unit-actions { position:absolute; bottom:calc(100% + 56px); left:8px; right:8px; width:auto; padding:4px; border:1px solid #737b5d; border-radius:7px; background:#293226f5; z-index:13; }
body.mobile-layout.unit-dragging .mobile-unit-actions { visibility:hidden; pointer-events:none; }
body.mobile-layout.unit-dragging .sell-drop-zone:not([hidden]) { display:flex; inset:auto; margin:0; pointer-events:none; gap:5px; }
body.mobile-layout.unit-dragging .shop.selling-unit .shop-inner { opacity:.25; }
body.mobile-layout .sell-drop-zone .sell-refund { font-size:24px; }
.monster-drag-ghost { top:0; left:0; will-change:transform; }
body.mobile-layout .card-copy strong { font-size:11px; }
body.mobile-layout .mobile-map-tools { bottom:6px; }
body.mobile-layout .shop[data-scouting=true] { min-height:0; }

/* Give short landscape windows a side dock; all five offers remain visible. */
@media (orientation:landscape) and (max-height:550px) and (min-width:600px) {
  body.mobile-layout { grid-template-columns:minmax(0,1fr) clamp(280px,34vw,340px); }
  body.mobile-layout .shop-inner { grid-template-columns:minmax(0,1fr); }
  body.mobile-layout .shop-toolbar { grid-area:1 / 1; }
  body.mobile-layout .shop-actions { grid-area:2 / 1; }
  body.mobile-layout .shop-cards { grid-area:3 / 1; }
  body.mobile-layout .mobile-bench { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body.mobile-layout .shop-card { height:clamp(70px,calc(100dvh - 300px),110px); }
  body.mobile-layout .card-copy strong { font-size:10px; }
  body.mobile-layout .mobile-unit-actions { position:fixed; bottom:60px; right:auto; width:calc(100% - clamp(280px,34vw,340px) - 16px - env(safe-area-inset-left)); }
}
@media (max-width:500px) {
  body.mobile-layout .mobile-bench { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:359px) {
  body.mobile-layout .shop-inner { grid-template-columns:minmax(0,1fr) 150px; }
  body.mobile-layout .xp-label { display:none; }
  body.mobile-layout .shop-action .action-label { font-size:11px; }
  body.mobile-layout .card-copy strong { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  #map { scroll-behavior:auto; }
}