/* ============================================================================
 * EXOFRONT — main.css
 * Cartoon mobile-strategy UI: bold panels, golden buttons, Fredoka type.
 * ==========================================================================*/
:root {
  --ts-btn-blue: url("../assets/tiny-swords/UI%20Elements/UI%20Elements/Buttons/BigBlueButton_Regular.png");
  --ts-btn-gold: url("../assets/tiny-swords/UI%20Elements/UI%20Elements/Buttons/BigRedButton_Regular.png");
  --ts-paper: url("../assets/tiny-swords/UI%20Elements/UI%20Elements/Papers/RegularPaper.png");
  --ts-bar-base: url("../assets/tiny-swords/UI%20Elements/UI%20Elements/Bars/SmallBar_Base.png");
  --ts-bar-fill: url("../assets/tiny-swords/UI%20Elements/UI%20Elements/Bars/SmallBar_Fill.png");
  --sky: #1e88e5;
  --sky-dark: #1565c0;
  --grass: #43a047;
  --panel: rgba(21, 101, 192, 0.92);
  --panel-edge: rgba(255, 255, 255, 0.35);
  --gold: #ffc107;
  --gold-dark: #ff8f00;
  --teal: #26c6da;
  --teal-2: #80deea;
  --orange: #ff7043;
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.75);
  --danger: #ef5350;
  --good: #66bb6a;
  --outline: #1a1208;
  --radius: 14px;
  --sh: 0 4px 0 rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
  --btn-h: 56px;
  --cmd-h: 72px;
  --cmd-btn: 44px;
  --thumb-btn: 52px;
  --deck-h: 0px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--sky-dark); color: var(--text);
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none;
  touch-action: manipulation;
}
#app { position: fixed; inset: 0; }
.hidden { display: none !important; }

#game {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; display: block; background: var(--grass);
}

/* ============================================================================
 * Menus — blue sky panels
 * ==========================================================================*/
.screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(66, 165, 245, 0.92) 0%, rgba(30, 136, 229, 0.95) 45%, rgba(21, 101, 192, 0.98) 100%),
    var(--ts-paper) center/512px repeat;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  image-rendering: pixelated;
}
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.25) 0%, transparent 40%);
}

.menu-inner { position: relative; text-align: center; max-width: 420px; width: 100%; }
.logo { margin-bottom: 28px; }
.logo-mark { font-size: 52px; color: var(--gold); text-shadow: 0 3px 0 var(--outline); }
.logo-text {
  margin: 4px 0 0; font-size: 48px; font-weight: 700; letter-spacing: 2px;
  color: #fff; text-shadow: 0 3px 0 var(--outline), 0 0 20px rgba(255,255,255,0.3);
}
.logo-text span { color: var(--gold); }
.logo-sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; }
.menu-foot { margin-top: 22px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Golden 3D buttons */
.big-btn {
  width: 100%; min-height: var(--btn-h); padding: 14px 20px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  color: var(--outline); background: linear-gradient(180deg, #ffe082 0%, var(--gold) 55%, var(--gold-dark) 100%);
  border: 3px solid var(--outline); border-radius: var(--radius);
  box-shadow: var(--sh); cursor: pointer;
  transition: transform 0.08s;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.big-btn.primary {
  background:
    linear-gradient(180deg, rgba(128, 222, 234, 0.15) 0%, rgba(0, 131, 143, 0.25) 100%),
    var(--ts-btn-blue) center/100% 100% no-repeat;
  color: #fff; text-shadow: 0 1px 0 var(--outline);
  image-rendering: pixelated;
}
.big-btn:not(.primary) {
  background:
    linear-gradient(180deg, rgba(255, 224, 130, 0.1) 0%, rgba(255, 143, 0, 0.15) 100%),
    var(--ts-btn-gold) center/100% 100% no-repeat;
  image-rendering: pixelated;
}
.text-btn {
  background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 15px; font-weight: 600; margin-top: 14px; cursor: pointer; padding: 12px;
}
.icon-btn {
  background: linear-gradient(180deg, #546e7a, #37474f);
  border: 2px solid var(--outline); color: #fff;
  width: 46px; height: 46px; border-radius: 12px; font-size: 18px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.icon-btn:active { transform: translateY(2px); box-shadow: none; }

.screen-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; text-shadow: 0 2px 0 var(--outline); }
.screen-sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

/* Faction cards */
.faction-inner { position: relative; text-align: center; max-width: 720px; width: 100%; }
.faction-cards { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) { .faction-cards { flex-direction: row; } }
.faction-card {
  flex: 1; text-align: left; padding: 18px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.12); border: 3px solid rgba(255,255,255,0.35);
  color: #fff; box-shadow: var(--sh); transition: transform 0.1s;
  image-rendering: pixelated;
}
.faction-card:active { transform: scale(0.98); }
.faction-card.aurex { border-color: var(--teal); background: rgba(38, 198, 218, 0.2); }
.faction-card.cinder { border-color: var(--orange); background: rgba(255, 112, 67, 0.2); }
.fc-emblem { font-size: 36px; margin-bottom: 6px; }
.fc-avatar {
  width: 64px; height: 64px; object-fit: contain; margin-bottom: 8px;
  image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.35));
}
.aurex-em { color: var(--teal-2); }
.cinder-em { color: var(--orange); }
.faction-card h3 { margin: 0 0 4px; font-size: 20px; }
.fc-tag { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.faction-card p { font-size: 13px; line-height: 1.45; margin: 0 0 10px; opacity: 0.9; }
.fc-traits { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.fc-traits span {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: rgba(0,0,0,0.25); border: 2px solid rgba(255,255,255,0.2);
}
.fc-go { font-weight: 700; color: var(--gold); font-size: 14px; }

/* Map cards */
.map-cards { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 720px) { .map-cards { flex-direction: row; align-items: stretch; } }
.map-card {
  flex: 1; text-align: left; padding: 16px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.12); border: 3px solid rgba(255,255,255,0.35);
  color: #fff; box-shadow: var(--sh); transition: transform 0.1s;
}
.map-card:active { transform: scale(0.98); }
.map-cards-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .map-cards-grid { grid-template-columns: 1fr 1fr; } }
.map-card.sapphire { border-color: #47a8d8; background: rgba(71, 168, 216, 0.18); }
.map-card.ember { border-color: #ff7043; background: rgba(255, 112, 67, 0.18); }
.map-card.highland { border-color: #7cb342; background: rgba(124, 179, 66, 0.18); }
.map-card.crown { border-color: #ffb300; background: rgba(255, 179, 0, 0.18); }
.mc-emblem { font-size: 28px; margin-bottom: 4px; }
.map-card h3 { margin: 0 0 4px; font-size: 18px; }
.mc-tag { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.map-card p { font-size: 12px; line-height: 1.4; margin: 0 0 8px; opacity: 0.9; }

.panel-inner { position: relative; text-align: center; max-width: 580px; width: 100%; }
.howto-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; text-align: left; }
@media (min-width: 520px) { .howto-grid { grid-template-columns: 1fr 1fr; } }
.howto-card {
  background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.25);
  border-radius: 12px; padding: 12px 14px;
}
.howto-card b { color: var(--gold); display: block; margin-bottom: 4px; }
.howto-card p { margin: 0; font-size: 13px; line-height: 1.45; opacity: 0.92; }
.howto-tip { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.settings-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25); border-radius: 12px; font-size: 15px;
}
.set-row input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--gold); }
.set-row input[type="range"] { width: 140px; accent-color: var(--gold); }

/* Overlays */
.overlay {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21, 101, 192, 0.75); backdrop-filter: blur(4px); padding: 16px;
}
.overlay-card {
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  border: 3px solid var(--outline); border-radius: 18px;
  padding: 24px 20px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: var(--sh);
  display: flex; flex-direction: column; gap: 10px;
}
.overlay-card h2 { margin: 0 0 6px; font-size: 24px; text-shadow: 0 2px 0 var(--outline); }
.onboard-list { text-align: left; margin: 4px 0 12px; padding-left: 18px; line-height: 1.65; font-size: 14px; }
.onboard-list b { color: var(--gold); }

.end-card { animation: pop 0.35s ease; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.end-icon { font-size: 52px; margin-bottom: 4px; }
#overlay-end.won .end-icon { color: var(--gold); }
#overlay-end.lost .end-icon { color: var(--danger); }
#end-msg { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.end-stat {
  background: rgba(0,0,0,0.2); border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 10px;
}
.end-stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.end-stat b { font-size: 20px; }

/* ============================================================================
 * In-game HUD — Wild Rift pattern: tiny chrome + context deck + thumb cluster
 * ==========================================================================*/
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* ---- Top: floating resource pills (always on, ~32px) ---- */
#topbar {
  position: absolute; top: max(4px, env(safe-area-inset-top)); left: 8px; right: 8px;
  z-index: 22; display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0;
  background: none; border: none; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.tb-res { display: flex; gap: 6px; align-items: center; }
.res-pill {
  display: flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  color: #fff; padding: 4px 10px; border-radius: 20px;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.res-pill.halcite { border-color: rgba(255, 213, 79, 0.35); }
.res-pill.supply { border-color: rgba(77, 208, 225, 0.35); }
.ic-halcite { color: #ffd54f; font-style: normal; font-size: 12px; }
.ic-supply { color: #4dd0e1; font-style: normal; font-size: 11px; }
.val.warn { color: #ef5350; }

.wave-badge {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(8, 12, 20, 0.72); color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.wave-badge.warn {
  color: #ffb74d; border-color: rgba(255, 183, 77, 0.5);
  animation: wavePulse 1s ease infinite;
}
@keyframes wavePulse { 50% { opacity: 0.65; } }

.tb-right {
  display: flex; align-items: center; gap: 4px;
  margin-left: 6px;
}
.timer {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px;
  color: rgba(255, 255, 255, 0.55); padding: 0 4px;
}
.tb-icon {
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(8, 12, 20, 0.72); color: #cfd8e3;
  font-size: 12px; cursor: pointer; font-family: inherit;
  backdrop-filter: blur(8px);
}
.tb-icon:active { background: rgba(30, 40, 55, 0.9); }

/* ---- Minimap: corner chip (not in command deck) ---- */
#minimap-chip {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #0a0e14;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 23;
  transition: bottom 0.22s ease;
}
#command-deck.expanded ~ #minimap-chip,
#hud:has(#command-deck.expanded) #minimap-chip {
  bottom: calc(var(--deck-expanded-h) + 8px + env(safe-area-inset-bottom));
}
#minimap { width: 100%; height: 100%; display: block; }
@media (min-width: 520px) {
  #minimap-chip { width: 72px; height: 72px; }
}

/* ---- Thumb cluster: LOL Wild Rift ability zone (bottom-right) ---- */
#thumb-cluster {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: 10px; z-index: 25;
  transition: bottom 0.22s ease, opacity 0.18s ease;
}
#thumb-cluster.hidden { opacity: 0; pointer-events: none; transform: scale(0.92); }
#hud:has(#command-deck.expanded) #thumb-cluster {
  bottom: calc(var(--deck-expanded-h) + 12px + env(safe-area-inset-bottom));
}
.thumb-btn {
  width: var(--thumb-btn); height: var(--thumb-btn);
  border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at 35% 30%, #5a6878 0%, #2a3344 70%);
  color: #fff; font-size: 20px; font-weight: 700;
  cursor: pointer; font-family: inherit; padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.thumb-btn:active { transform: scale(0.94); }
.thumb-btn.active {
  background: radial-gradient(circle at 35% 30%, #ff8a65 0%, #e64a19 70%);
  border-color: #bf360c;
  box-shadow: 0 0 16px rgba(255, 112, 67, 0.45);
}
/* Primary attack-move = largest, closest to thumb */
#btn-rail-atk { width: calc(var(--thumb-btn) + 8px); height: calc(var(--thumb-btn) + 8px); font-size: 22px; }

/* ---- Context deck: slides up ONLY when selection / build mode ---- */
:root { --deck-expanded-h: 88px; }
#command-deck {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 24;
  display: flex; align-items: stretch; gap: 8px;
  height: 0; overflow: hidden; opacity: 0;
  padding: 0 8px env(safe-area-inset-bottom);
  background: linear-gradient(0deg, rgba(8, 12, 20, 0.96) 0%, rgba(8, 12, 20, 0.88) 85%, transparent 100%);
  border-top: none;
  pointer-events: none;
  transition: height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
}
#command-deck.expanded {
  height: calc(var(--deck-expanded-h) + env(safe-area-inset-bottom));
  opacity: 1; padding-top: 6px;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  pointer-events: auto;
}
@media (min-width: 520px) { :root { --deck-expanded-h: 96px; --cmd-btn: 48px; } }

#selpanel {
  flex: 0 0 auto; min-width: 0; max-width: 120px; align-self: center;
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 4px 8px 4px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
#selpanel.has-queue { max-width: 210px; }
.sel-portrait {
  width: 40px; height: 40px; border-radius: 8px;
  background: linear-gradient(135deg, #3a4556, #1a2230);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.sel-body { min-width: 0; flex: 1; }
.sel-title { font-weight: 700; font-size: 11px; color: #ffd54f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-line, .sel-stats { color: rgba(255, 255, 255, 0.55); font-size: 9px; }
.sel-line.auto-on { color: #ffd54f; }
.sel-queue {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; align-items: center;
}
.qchip {
  position: relative; width: 22px; height: 22px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qchip.active { border-color: rgba(255, 213, 79, 0.55); width: auto; min-width: 22px; padding-right: 4px; }
.qchip .qico { font-size: 11px; line-height: 1; z-index: 1; }
.qchip .qprog {
  position: absolute; left: 0; bottom: 0; right: 0; height: 3px; background: rgba(0, 0, 0, 0.5);
}
.qchip .qprog i { display: block; height: 100%; background: #34e0c4; }
.qchip .qtime {
  font-size: 8px; color: rgba(255, 255, 255, 0.75); margin-left: 2px;
  font-variant-numeric: tabular-nums; z-index: 1;
}
.sel-chips { display: none; }
.sel-bar { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.sel-bar span { display: none; }
.sel-bar .bar {
  flex: 1; height: 10px; min-width: 48px; border-radius: 0; overflow: hidden;
  background: var(--ts-bar-base) center/100% 100% no-repeat;
  image-rendering: pixelated;
}
.sel-bar .bar i {
  display: block; height: 100%;
  background: var(--ts-bar-fill) left center/auto 100% no-repeat;
  image-rendering: pixelated;
}
.sel-bar b { font-size: 8px; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }

#action-tray {
  flex: 1; min-width: 0; align-self: center;
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}
#action-tray::-webkit-scrollbar { display: none; }

.act {
  flex: 0 0 var(--cmd-btn); width: var(--cmd-btn); height: var(--cmd-btn);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 0;
  background: radial-gradient(circle at 30% 25%, #5a6878 0%, #2a3344 75%);
  border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 10px;
  color: #fff; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.act:active { transform: scale(0.95); }
.act.on {
  border-color: rgba(255, 213, 79, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35);
}
.act .ico { font-size: 18px; line-height: 1; }
.act .lbl { display: none; }
.act .cost {
  font-size: 9px; font-weight: 700; color: #ffd54f;
  background: rgba(0, 0, 0, 0.45); padding: 0 4px; border-radius: 4px;
  line-height: 1.3;
}
.act.disabled { opacity: 0.35; filter: grayscale(0.5); }
.act.active {
  background: radial-gradient(circle at 30% 25%, #ff8a65, #e64a19);
  border-color: #bf360c;
}
.act.danger {
  background: radial-gradient(circle at 30% 25%, #ef5350, #c62828);
}

/* Events + toast — unobtrusive overlays */
#event-log {
  position: absolute; top: calc(36px + env(safe-area-inset-top)); left: 8px;
  display: flex; flex-direction: column; gap: 2px;
  max-width: min(70%, 280px); pointer-events: none; z-index: 21;
}
.evt {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: rgba(8, 12, 20, 0.75); color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}
.evt.good { border-left-color: #66bb6a; }
.evt.warn { border-left-color: #ffd54f; }
.evt.bad { border-left-color: #ef5350; }
#event-log .evt:nth-child(n+2) { display: none; }

#toast {
  position: absolute; top: calc(36px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 12, 20, 0.88); color: #ffd54f;
  padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
  border: 1px solid rgba(255, 213, 79, 0.35);
  backdrop-filter: blur(8px);
}
#toast.show { opacity: 1; }

#gesture-hint {
  position: absolute; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  max-width: 85%; text-align: center;
  font-size: 11px; font-weight: 600;
  padding: 6px 14px; border-radius: 20px;
  background: rgba(8, 12, 20, 0.82); color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none; z-index: 21;
  backdrop-filter: blur(8px);
}
#hud:has(#command-deck.expanded) #gesture-hint {
  bottom: calc(var(--deck-expanded-h) + 72px + env(safe-area-inset-bottom));
}
#gesture-hint.attack { border-color: #ff7043; color: #ffccbc; }
#gesture-hint.place { border-color: #66bb6a; color: #c8e6c9; }

#long-press-ring {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 3px solid #ff7043;
  background: rgba(255, 112, 67, 0.15);
  pointer-events: none; z-index: 22;
}
#long-press-ring.hidden { display: none; }

@media (orientation: landscape) and (max-height: 480px) {
  :root { --deck-expanded-h: 76px; --cmd-btn: 40px; --thumb-btn: 46px; }
  #minimap-chip { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}