/* Mobile has a touch bench and an always-visible shop. Desktop keeps its map bench. */
.mobile-bench,.mobile-unit-actions,.mobile-scout-toggle,.mobile-map-tools,.mobile-return-label { display:none; }
body.mobile-layout { min-width:320px; min-height:0; height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; }
.mobile-layout button { touch-action:manipulation; }
.mobile-layout main { flex:1; min-height:0; }
.mobile-layout .topbar { position:relative; z-index:15; height:calc(64px + env(safe-area-inset-top)); flex:0 0 calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left)); }
.mobile-layout .brand { display:none; }
.mobile-layout .round-panel { position:absolute; top:calc(2px + env(safe-area-inset-top)); left:max(4px,env(safe-area-inset-left)); width:calc(100% - 62px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width:640px; transform:none; }
.mobile-layout .round-frame { height:60px; padding:0 2px; border-width:5px 23px 9px; border-image-width:5px 23px 9px; }
.mobile-layout .round-face { display:grid; grid-template-columns:1fr max-content 44px; grid-template-rows:44px; gap:0 12px; }
.mobile-layout .round-stage { grid-area:1 / 1; gap:6px; }
.mobile-layout .round-stage strong,.mobile-layout #phase-timer { font-size:21px; }
.mobile-layout .round-clock { grid-area:1 / 2; gap:6px; }
.mobile-layout .round-details-toggle { grid-area:1 / 3; width:44px; height:44px; }
.mobile-layout .round-sequence { display:none; }
.mobile-layout .round-panel:has(.round-details-toggle[aria-expanded=true]) .round-frame { height:98px; }
.mobile-layout .round-panel:has(.round-details-toggle[aria-expanded=true]) .round-face { grid-template-rows:44px 36px; }
.mobile-layout .round-panel:has(.round-details-toggle[aria-expanded=true]) .round-sequence { display:flex; grid-area:2 / 1 / 3 / -1; height:36px; gap:4px; }
.mobile-layout .round-step { flex:1; max-width:40px; height:32px; }
.mobile-layout .round-step img { width:21px; height:21px; }
.mobile-layout .round-panel .phase-track { display:block; left:26px; right:26px; bottom:7px; }
.mobile-layout .round-details { width:100%; }
.mobile-layout .mobile-scout-toggle { display:grid; place-items:center; margin-left:auto; width:44px; height:44px; padding:8px; }
.mobile-layout .mobile-scout-toggle img { width:28px; height:28px; object-fit:contain; }
.mobile-layout .connection-notice { top:calc(68px + env(safe-area-inset-top)); max-width:calc(100% - 24px); z-index:20; }
.mobile-layout .arena { --player-rail-width:0px; --player-rail-gap:0px; }
.mobile-layout .map-viewport,.mobile-layout.live-match .map-viewport { inset:0; }
.mobile-layout #map { overflow:hidden; touch-action:none; }
.mobile-layout #bench-cells,.mobile-layout #units .unit[data-kind=bench],.mobile-layout .bench-id { display:none; }
.mobile-layout .team-capacity { left:max(10px,env(safe-area-inset-left)); top:10px; font-size:16px; pointer-events:none; }
.mobile-layout .team-capacity img { width:21px; height:21px; }
.mobile-layout .mobile-map-tools { position:absolute; bottom:8px; left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); z-index:5; display:flex; align-items:center; gap:4px; pointer-events:none; }
.mobile-layout .mobile-map-tools button { display:grid; place-items:center; width:44px; height:44px; padding:6px; font-size:22px; pointer-events:auto; }
.mobile-layout .mobile-map-tools [data-camera=fit] { font-size:12px; }
.mobile-layout .mobile-map-tools img { width:24px; height:24px; object-fit:contain; }
.mobile-layout .mobile-map-tools .mobile-order-toggle { width:auto; min-width:64px; margin-left:auto; display:flex; gap:4px; font-size:11px; }
.mobile-layout .mobile-order-toggle img { width:19px; height:22px; }
.mobile-layout .mobile-map-tools button:disabled { opacity:.45; }
.mobile-layout .player-perspectives { display:none; position:absolute; top:4px; right:max(8px,env(safe-area-inset-right)); bottom:auto; width:200px; max-height:calc(100% - 12px); padding:8px; margin:0; z-index:14; background:#30352bf7; border:1px solid #74795a; border-radius:8px; box-shadow:0 8px 24px #0008; }
.mobile-layout.mobile-players-open .player-perspectives { display:flex; }
.mobile-layout .player-portrait { flex:0 0 54px; height:54px; }
.mobile-layout .player-name { font-size:11px; }
.mobile-layout .player-portrait .player-hp { font-size:18px; }
.mobile-layout .player-avatar { width:44px; height:44px; flex-basis:44px; }
.mobile-layout .player-portrait .player-avatar img { width:40px; height:40px; }
.mobile-layout #leave-match { min-height:44px; width:100%; margin:4px 0 0; font-size:13px; }
.mobile-layout .turn-order { display:none; bottom:60px; left:8px; right:8px; min-width:0; width:auto; max-width:none; max-height:calc(100% - 64px); padding:8px; }
.mobile-layout.mobile-order-open .turn-order { display:flex; }
.mobile-layout .initiative-unit,.mobile-layout .initiative-unit[data-side=red] { width:54px; height:60px; }
.mobile-layout .initiative-unit img { width:34px; height:34px; }
.mobile-layout .monster-inspector { z-index:12; top:auto; bottom:60px; left:8px; right:8px; width:auto; max-width:none; max-height:calc(100% - 64px); padding:10px 12px; }
.mobile-layout .monster-inspector[data-mobile-collapsed=true] { display:none; }
.mobile-layout .inspector-close { top:0; right:0; width:44px; height:44px; font-size:26px; }
.mobile-layout .inspector-title { padding-right:38px; }
.mobile-layout .inspector-title img { width:40px; height:40px; }
.mobile-layout .inspector-title h2 { font-size:16px; }
.mobile-layout .inspector-stats { margin:6px 0; }
.mobile-layout .inspector-stats dd { font-size:16px; }
.mobile-layout .inspector-stats div { padding:5px; }
.mobile-layout .selection-readout { display:none; }
.mobile-layout .loot-tray { top:8px; right:8px; max-width:calc(100% - 90px); }
.mobile-layout .inventory-item { min-width:44px; min-height:44px; }
/* One dock, with the bench closest to the battlefield and actions always reachable. */
.mobile-layout .shop { position:relative; flex:0 0 auto; align-self:stretch; width:100%; max-width:none; margin:0; padding:5px max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); background:#282e25; border-top:1px solid #73795b; box-shadow:0 -3px 16px #10170e66; z-index:10; }
.mobile-layout .mobile-bench { display:flex; gap:4px; padding:2px 1px 5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain; touch-action:pan-x; }
.mobile-layout .mobile-bench-slot { position:relative; flex:0 0 max(48px,calc((100% - 32px) / 9)); height:52px; min-width:48px; padding:2px; overflow:hidden; scroll-snap-align:start; border:1px solid #68765b; border-radius:5px; background:linear-gradient(140deg,#47523d,#2b3429); box-shadow:inset 0 1px #abb48d55,inset 0 -2px #1a211b; }
.mobile-layout .mobile-bench-slot img { display:block; width:100%; height:43px; object-fit:contain; pointer-events:none; }
.mobile-layout .mobile-slot-number { position:absolute; bottom:3px; left:5px; color:#a5af985e; font-size:10px; }
.mobile-layout .mobile-bench-slot.occupied .mobile-slot-number { display:none; }
.mobile-layout .mobile-bench-stars { position:absolute; bottom:1px; left:0; right:0; color:#e6dbad; font-size:10px; text-shadow:0 1px 2px #10180c; }
.mobile-layout .mobile-bench-slot[data-stars="2"] .mobile-bench-stars { color:#e5eff7; }
.mobile-layout .mobile-bench-slot[data-stars="3"] .mobile-bench-stars { color:#f5d07a; }
.mobile-layout .mobile-bench-slot.valid-destination { border-color:#afca76; background:linear-gradient(140deg,#566648,#34452f); }
.mobile-layout .mobile-bench-slot.selected { border:2px solid #e5edac; background:#647149; box-shadow:inset 0 0 0 1px #19271c,0 0 6px #bdd77d66; }
.mobile-layout .shop-inner { padding:0; border:0; box-shadow:none; background:transparent; border-radius:0; }
.mobile-layout .shop-inner::after { display:none; }
.mobile-layout .shop-toolbar { position:relative; top:auto; left:auto; right:auto; height:44px; display:flex; align-items:center; gap:5px; }
.mobile-layout .level-panel { position:static; height:40px; flex:1; min-width:70px; width:auto; padding:0; }
.mobile-layout .level-face { padding:3px 3px 2px; }
.mobile-layout .level-info { font-size:12px; gap:4px; }
.mobile-layout .level-info strong { font-size:16px; }
.mobile-layout .xp-label { font-size:10px; }
.mobile-layout .xp-track { margin-top:5px; height:4px; }
.mobile-layout .wallet { position:static; transform:none; width:auto; min-width:62px; height:36px; padding:0 8px; gap:4px; border-radius:6px; }
.mobile-layout #kamas-count { font-size:20px; }
.mobile-layout .streak-indicator { position:relative; left:auto; right:auto; top:auto; min-width:39px; height:36px; padding:0 5px; gap:3px; border-radius:6px; font-size:14px; }
.mobile-layout .streak-indicator img { width:16px; height:18px; }
.mobile-layout .shop-content { display:flex; flex-direction:column; gap:5px; }
.mobile-layout .shop-actions { height:44px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:44px; gap:5px; }
.mobile-layout .shop-action { height:44px; padding:6px 12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.mobile-layout .shop-action .action-label { font-size:13px; }
.mobile-layout .shop-action .action-icon { width:22px; height:22px; order:-1; }
.mobile-layout .shop-action .action-cost { font-size:12px; margin-left:auto; }
.mobile-layout .shop-action kbd,.mobile-layout .return-to-arena kbd { display:none; }
.mobile-layout .shop-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; overflow:visible; padding:1px 0 0; }
.mobile-layout .shop-card { width:100%; min-width:0; height:94px; }
.mobile-layout .shop-card:hover:not(:disabled) { transform:none; }
.mobile-layout .card-info { display:block; flex:0 0 29px; min-height:29px; padding:3px 3px 2px; }
.mobile-layout .card-copy strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; font-size:10px; line-height:12px; }
.mobile-layout .card-cost { position:absolute; z-index:2; top:3px; right:3px; display:flex; gap:2px; padding:2px 3px; border-radius:3px; background:#20291ee6; font-size:10px; }
.mobile-layout .card-cost svg { width:10px; height:10px; }
.mobile-layout .merge-hint { top:4px; left:1px; right:24px; font-size:12px; letter-spacing:0; line-height:15px; }
.mobile-layout .sell-drop-zone { display:none; }
.mobile-layout .mobile-unit-actions { display:flex; align-items:center; gap:6px; padding:4px 0; }
.mobile-layout .mobile-unit-actions button { height:44px; }
.mobile-layout .mobile-unit-info { display:flex; align-items:center; gap:5px; flex:1; min-width:0; padding:3px 8px; text-align:left; }
.mobile-layout .mobile-unit-info img { width:34px; height:38px; object-fit:contain; }
.mobile-layout .mobile-unit-info span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-layout .mobile-unit-info b { margin-left:auto; font-size:17px; font-weight:400; }
.mobile-layout .mobile-sell { min-width:80px; padding:0 10px; font-size:13px; color:#f2d991; }
.mobile-layout .mobile-cancel { flex:0 0 44px; width:44px; font-size:26px; }
.mobile-layout .mobile-scout-toggle,.mobile-layout .mobile-map-tools button,.mobile-layout .mobile-unit-actions button { border:1px solid #737b5d; border-radius:6px; background:var(--hud-surface); color:var(--hud-ink); box-shadow:var(--hud-shadow); }
.mobile-layout .mobile-scout-toggle[aria-expanded=true],.mobile-layout .mobile-order-toggle[aria-expanded=true] { border-color:#c7d48b; background:#596247; }
.mobile-layout .mobile-sell:not(:disabled) { color:#f2d991; border-color:#ac9660; }
.mobile-layout .mobile-sell:disabled { opacity:.4; }
.mobile-layout .shop[data-scouting=true] .shop-inner { display:none; }
.mobile-layout .return-to-arena { position:static; transform:none; margin:5px auto 0; width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:10px; }
.mobile-layout .return-to-arena:hover,.mobile-layout .return-to-arena:active { transform:none; }
.mobile-layout .return-to-arena img { width:28px; height:32px; }
.mobile-layout .mobile-return-label { display:inline; font-size:14px; }
.mobile-layout .monster-drag-ghost { margin-top:-35px; }
/* On short landscape screens the action dock sits beside, never over, the map. */
@media (orientation:landscape) and (max-height:550px) and (min-width:600px) {
  body.mobile-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; grid-template-rows:calc(60px + env(safe-area-inset-top)) minmax(0,1fr); }
  .mobile-layout .topbar { grid-column:1 / -1; height:100%; min-height:0; }
  .mobile-layout .round-panel { width:min(600px,calc(100% - 70px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .mobile-layout main { grid-column:1; grid-row:2; min-width:0; }
  .mobile-layout .shop { grid-column:2; grid-row:2; border-top:0; border-left:1px solid #73795b; min-height:0; overflow-y:auto; padding-top:5px; }
  .mobile-layout .shop-card { height:clamp(90px,calc(100dvh - 230px),150px); }
  .mobile-layout .card-copy strong { font-size:9px; }
  .mobile-layout .mobile-unit-actions { position:fixed; bottom:60px; left:max(8px,env(safe-area-inset-left)); width:calc(100% - 296px - env(safe-area-inset-left)); z-index:13; padding:4px; border-radius:7px; background:#293226f5; }
  .mobile-layout .mobile-bench-slot { height:48px; }
  .mobile-layout .mobile-bench-slot img { height:39px; }
  .mobile-layout .player-perspectives { position:fixed; top:calc(64px + env(safe-area-inset-top)); max-height:calc(100dvh - 72px - env(safe-area-inset-top)); }
  .mobile-layout .monster-inspector { bottom:56px; max-height:calc(100% - 60px); }
  .mobile-layout .mobile-map-tools { gap:3px; }
  .mobile-layout .mobile-map-tools .mobile-order-toggle span { display:none; }
  .mobile-layout .mobile-map-tools .mobile-order-toggle { min-width:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .mobile-layout * { scroll-behavior:auto; }
}

.mobile-layout:not(.live-match) .brand { display:grid; width:44px; height:44px; }
.mobile-layout .shop.selling-unit .shop-inner { opacity:1; }