/* ==========================================================================
   Unlimited Tower Defense: UI theme (loads LAST, overrides Core Surge look)
   Rules:
   1. Near black, not black. Page #0E1116, card #15191F, menu #1A1E25, modal #222730.
   2. Lightness is elevation. Higher layers get lighter; no heavy drop shadows.
   3. Three tiers of white: primary 92%, secondary 64%, disabled 38%.
   4. Corners are a system: 6 / 10 / 14 / 18, pills for chips, toggles and CTAs.
   5. One accent (teal #2DD4BF) with a soft glow. Gold = currency, red = danger.
   ========================================================================== */

:root, :root[data-theme="neon"] {
  --bg: #0E1116; --bg-2: #15191F; --panel: #1A1E25; --panel-2: #222730;
  --accent: #2DD4BF; --accent-dim: rgba(45, 212, 191, .35); --accent-deep: #0F2A27;
  --danger: #F2555A; --gold: #F5B942; --good: #34D399; --purple: #8B5CF6;
  --cyan2: #7DD3FC; --text: rgba(242, 244, 247, .92); --muted: rgba(242, 244, 247, .52);
  --glow-on: 1; --grid-color: rgba(255, 255, 255, .025);

  --utd-page: #0E1116; --utd-card: #15191F; --utd-menu: #1A1E25; --utd-modal: #222730; --utd-raise: #2A303B;
  --utd-t1: rgba(242, 244, 247, .92); --utd-t2: rgba(242, 244, 247, .64); --utd-t3: rgba(242, 244, 247, .38);
  --utd-hair: rgba(255, 255, 255, .07); --utd-hair-2: rgba(255, 255, 255, .12);
  --utd-r1: 8px; --utd-r2: 12px; --utd-r3: 16px; --utd-r4: 22px; --utd-pill: 999px;
  --utd-accent-glow: 0 4px 0 #169A89; --utd-bubble: 0 3px 0 rgba(0,0,0,.35);
  --utd-font: "Nunito", "Varela Round", -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  --utd-display: "Fredoka", "Nunito", "SF Pro Rounded", system-ui, sans-serif;
  --utd-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

html, body { background: var(--utd-page); font-family: var(--utd-font); color: var(--utd-t1); }
body { -webkit-font-smoothing: antialiased; }
b, .mock-hud-val, .mock-tier-num, .hp-text, .binfo-pill b, .td-co, .td-stats { font-variant-numeric: tabular-nums; }

/* ---------- Home background: aurora over near-black ---------- */
#screen-menu.home-view::before {
  background: url("../art/bg/bg_05.svg") center top / cover no-repeat !important;
  opacity: 1 !important;
}

/* ---------- Top currency HUD: raised chips ---------- */
.mock-hud {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 8px 12px !important; gap: 8px !important;
}
.mock-hud-item {
  background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important;
  border-radius: var(--utd-r3) !important; box-shadow: none !important;
  justify-content: center !important; padding: 6px 8px !important;
}
.mock-hud-data { width: auto !important; }
.mock-hud-label { color: var(--utd-t3) !important; font: 600 9px/1 var(--utd-font) !important; letter-spacing: .12em !important; }
.mock-hud-val { color: var(--utd-t1) !important; font: 700 15px/1.1 var(--utd-font) !important; }
.mock-hud-item::before, .mock-hud-item::after { display: none !important; }

/* ---------- Hero banner: aurora card with wordmark ---------- */
.mock-hero {
  margin: 4px 12px 0 !important; width: auto !important; min-height: 170px !important;
  border-radius: var(--utd-r4) !important; overflow: hidden !important;
  background: url("../art/bg/bg_01.svg") center 18% / cover no-repeat, var(--utd-card) !important;
  border: 1px solid var(--utd-hair) !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important;
  padding: 18px !important;
}
.mock-hero-bg, .mock-hero-vignette, .mock-hero-beam, .mock-hero-logo { display: none !important; }
.mock-hero-wordmark { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: auto !important; text-align: left !important; margin: 0 !important; }
.mock-hero-title-live {
  font: 800 34px/1 var(--utd-font) !important; letter-spacing: -.02em !important; color: #fff !important;
  text-shadow: none !important;
}
.mock-hero-subtitle-live {
  margin-top: 6px !important; display: inline-block !important;
  font: 600 10px/1 var(--utd-font) !important; letter-spacing: .22em !important; color: var(--utd-t2) !important;
  padding: 6px 10px !important; border-radius: var(--utd-pill) !important;
  background: rgba(14, 17, 22, .6) !important; border: 1px solid var(--utd-hair-2) !important;
}

/* ---------- Tier picker ---------- */
.mock-tier-box {
  margin: 12px 12px 0 !important; width: auto !important; min-height: 0 !important;
  background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important;
  border-radius: var(--utd-r4) !important; box-shadow: none !important;
}
.mock-tier-art { display: none !important; }
.mock-tier-row { position: relative !important; padding: 14px !important; }
.mock-tier-arrow {
  width: 44px !important; height: 44px !important; border-radius: var(--utd-pill) !important;
  background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important;
  color: var(--utd-t1) !important; font-size: 16px !important; box-shadow: none !important;
}
.mock-tier-arrow:disabled { color: var(--utd-t3) !important; opacity: .6 !important; }
.mock-tier-num { font: 800 44px/1 var(--utd-font) !important; letter-spacing: -.02em !important; color: #fff !important; text-shadow: none !important; }
.mock-tier-label {
  display: inline-block !important; margin-top: 8px !important; padding: 4px 10px !important;
  border-radius: var(--utd-pill) !important; background: var(--accent-deep) !important; color: var(--accent) !important;
  font: 600 10px/1.2 var(--utd-mono) !important; letter-spacing: .08em !important;
}
.mock-tier-hint { margin-top: 6px !important; color: var(--utd-t3) !important; font: 500 11px/1.3 var(--utd-font) !important; }
.mock-tier-center, .mock-tier-copy { text-align: center !important; }

/* ---------- Primary CTA ---------- */
#screen-menu .mock-start-btn {
  margin: 12px 12px 0 !important; width: auto !important; min-height: 58px !important; padding: 0 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  border-radius: var(--utd-pill) !important; border: 0 !important;
  background: #2DD4BF !important;
  box-shadow: var(--utd-accent-glow) !important;
  color: #062420 !important; overflow: visible !important;
}
#screen-menu .mock-start-btn::before, #screen-menu .mock-start-btn::after { display: none !important; }
#screen-menu .mock-start-btn span {
  position: static !important; width: auto !important; height: auto !important; clip: auto !important;
  overflow: visible !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; color: #062420 !important;
}
#screen-menu .mock-start-label { font: 800 16px/1 var(--utd-font) !important; letter-spacing: .08em !important; }
#screen-menu .mock-start-icon, #screen-menu .mock-start-arrows { font-size: 18px !important; }

/* ---------- Info cards (match history / milestones / loadout) ---------- */
.mock-info-row { margin: 12px 12px 0 !important; width: auto !important; gap: 8px !important; }
.mock-info-card {
  background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important;
  border-radius: var(--utd-r3) !important; box-shadow: none !important; overflow: hidden !important;
}
.mock-info-card::before, .mock-info-card::after { display: none !important; }
.mock-info-header {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--utd-hair) !important;
  color: var(--utd-t3) !important; font: 700 9px/1 var(--utd-font) !important; letter-spacing: .14em !important; padding: 10px !important;
}
.mock-info-hint { color: var(--utd-t2) !important; font: 500 12px/1.4 var(--utd-font) !important; }
.mock-ms-item { border-color: var(--utd-hair) !important; color: var(--utd-t2) !important; font: 500 10px/1.25 var(--utd-font) !important; }
.mock-ms-reward { font-size: 10px !important; }
.mock-ms-reward { color: var(--utd-t1) !important; font-weight: 600 !important; }
.mock-ms-view {
  border-radius: var(--utd-pill) !important; background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important;
  color: var(--utd-t1) !important; font: 700 10px/1 var(--utd-font) !important; letter-spacing: .08em !important; box-shadow: none !important;
}
.mock-ms-view.gold { background: rgba(245, 185, 66, .12) !important; border-color: rgba(245, 185, 66, .4) !important; color: var(--gold) !important; }

/* ---------- Bottom navigation: icons back, active = teal pill ---------- */
.submenu {
  background: var(--utd-card) !important; border-top: 1px solid var(--utd-hair) !important;
  box-shadow: none !important; min-height: 62px !important;
}
.submenu-btn {
  background: transparent !important; color: var(--utd-t3) !important; font: 600 8px/1 var(--utd-font) !important;
  letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; padding: 6px 0 !important; min-width: 0 !important; transform: none !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
  min-height: 60px !important; border-radius: var(--utd-r2) !important;
}
.submenu-btn::before {
  display: block !important; content: "" !important; position: static !important; width: 22px !important; height: 22px !important;
  background: currentColor !important; -webkit-mask: var(--nav-icon) center / contain no-repeat !important; mask: var(--nav-icon) center / contain no-repeat !important;
  opacity: 1 !important; inset: auto !important; transform: none !important; box-shadow: none !important; border: 0 !important;
}
.submenu-btn.active { color: var(--accent) !important; background: transparent !important; transform: none !important; }
.submenu-btn.active::after {
  display: block !important; content: "" !important; position: absolute !important; top: 4px !important; left: 50% !important;
  width: 36px !important; height: 30px !important; transform: translateX(-50%) !important; border-radius: var(--utd-pill) !important;
  background: rgba(45, 212, 191, .12) !important; box-shadow: none !important; inset: auto !important; border: 0 !important;
}
.submenu-btn[data-tab="home"] { --nav-icon: url("../art/nav/home.svg"); }
.submenu-btn[data-tab="labs"] { --nav-icon: url("../art/nav/research.svg"); }
.submenu-btn[data-tab="milestones"] { --nav-icon: url("../art/nav/goals.svg"); }
.submenu-btn[data-tab="cards"] { --nav-icon: url("../art/nav/loadout.svg"); }
.submenu-btn[data-tab="tournament"] { --nav-icon: url("../art/nav/tourney.svg"); }
.submenu-btn[data-tab="shop"] { --nav-icon: url("../art/nav/store.svg"); }
.submenu-btn[data-tab="skins"] { --nav-icon: url("../art/nav/skins.svg"); }
.submenu-btn[data-tab="settings"] { --nav-icon: url("../art/nav/settings.svg"); }

/* ---------- Battle chrome ---------- */
.battlefield { background: url("../art/bg/bg_04.svg") center / cover no-repeat, var(--utd-page) !important; }
.battlefield[data-bg-skin="cyber_grid"] { background-image: url("../art/bg/bg_01.svg") !important; }
.battlefield[data-bg-skin="industrial"] { background-image: url("../art/bg/bg_02.svg") !important; }
.battlefield[data-bg-skin="organic"] { background-image: url("../art/bg/bg_03.svg") !important; }
.skin-tile[data-kind="bg"] .skin-preview { background: var(--utd-page) center 12% / 260% auto no-repeat !important; border-radius: var(--utd-r2) !important; }
.skin-tile[data-kind="bg"][data-skin="cyber_grid"] .skin-preview { background-image: url("../art/bg/bg_01.svg") !important; }
.skin-tile[data-kind="bg"][data-skin="industrial"] .skin-preview { background-image: url("../art/bg/bg_02.svg") !important; }
.skin-tile[data-kind="bg"][data-skin="organic"] .skin-preview { background-image: url("../art/bg/bg_03.svg") !important; }
.skin-tile[data-kind="bg"][data-skin="steel"] .skin-preview { background-image: url("../art/bg/bg_04.svg") !important; }
.skin-tile[data-kind="core"] .skin-preview { background: var(--utd-modal) !important; border-radius: var(--utd-r2) !important; }
.skin-tile { background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important; border-radius: var(--utd-r3) !important; box-shadow: none !important; }
.skin-tile.equipped, .skin-tile.is-equipped { border-color: rgba(45,212,191,.55) !important; box-shadow: var(--utd-accent-glow) !important; }

/* Section titles: solid white, tight, no neon gradient */
.panel-title {
  background: none !important; -webkit-text-fill-color: var(--utd-t1) !important; color: var(--utd-t1) !important;
  font: 800 28px/1.1 var(--utd-font) !important; letter-spacing: -.01em !important; text-shadow: none !important; filter: none !important;
}
.panel-subtitle { color: var(--utd-t3) !important; font: 600 10px/1.4 var(--utd-font) !important; letter-spacing: .18em !important; }
.sub-hud { gap: 6px !important; }
.sub-hud-item { background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important; border-radius: var(--utd-pill) !important; padding: 4px 10px !important; font: 700 11px/1 var(--utd-font) !important; color: var(--utd-t1) !important; }
.hp-bar, .shield-bar { border-radius: var(--utd-pill) !important; background: var(--utd-menu) !important; border: 1px solid var(--utd-hair) !important; overflow: hidden; }
.hp-fill { background: #F2555A !important; }
.shield-fill { background: #3B82F6 !important; }
.hp-text, .shield-text { font-family: var(--utd-font) !important; font-weight: 700 !important; color: #fff !important; }
.hp-end-btn, .bf-side-btn {
  background: var(--utd-menu) !important; border: 1px solid var(--utd-hair-2) !important; border-radius: var(--utd-r3) !important;
  box-shadow: none !important; color: var(--utd-t1) !important;
}
.battle-info-bar { background: var(--utd-card) !important; border-top: 1px solid var(--utd-hair) !important; }
.binfo-pill { font-family: var(--utd-font) !important; color: var(--utd-t3) !important; border-radius: var(--utd-pill) !important; }
.binfo-pill b { color: var(--utd-t1) !important; }
.upgrades-wrap { background: var(--utd-card) !important; border-top: 1px solid var(--utd-hair) !important; }
.boss-frame { border-radius: var(--utd-r3) !important; background: rgba(21, 25, 31, .92) !important; border: 1px solid rgba(242, 85, 90, .45) !important; box-shadow: none !important; }
.boss-frame-name { font-family: var(--utd-font) !important; color: #FDA4AF !important; letter-spacing: .14em !important; }
.boss-frame-bar { border-radius: var(--utd-pill) !important; overflow: hidden; background: var(--utd-modal) !important; }
.boss-frame-fill { background: #F2555A !important; }

/* Path TD panels follow the same system */
#tdBar { background: var(--utd-card) !important; border-top: 1px solid var(--utd-hair) !important; gap: 6px !important; padding: 8px 8px 6px !important; }
.td-it { background: var(--utd-menu) !important; border: 1px solid var(--utd-hair) !important; border-radius: var(--utd-r3) !important; height: 58px !important; }
.td-it.act { outline: 0 !important; box-shadow: var(--utd-accent-glow) !important; }
.td-ic { width: 28px !important; height: 28px !important; border-radius: 0 !important; background-color: transparent !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; box-shadow: none !important; }
.td-nm { color: var(--utd-t2) !important; font: 600 10px/1 var(--utd-font) !important; }
.td-co { color: var(--gold) !important; font: 700 10px/1 var(--utd-font) !important; }
#tdInfo { background: rgba(34, 39, 48, .96) !important; border: 1px solid var(--utd-hair-2) !important; border-radius: var(--utd-r4) !important; font-family: var(--utd-font) !important; }
.td-h small { color: var(--utd-t3) !important; }
.td-stats { color: var(--utd-t2) !important; }
.td-stats b { color: var(--utd-t1) !important; }
.td-desc { color: var(--utd-t2) !important; opacity: 1 !important; }
.td-row button { border-radius: var(--utd-pill) !important; background: var(--utd-raise) !important; border: 1px solid var(--utd-hair-2) !important; font-weight: 700 !important; }
.td-row .td-pri { background: #2DD4BF !important; color: #062420 !important; border: 0 !important; box-shadow: var(--utd-accent-glow) !important; }
#tdSide button { border-radius: var(--utd-r3) !important; background: var(--utd-menu) !important; border: 1px solid var(--utd-hair-2) !important; font-family: var(--utd-font) !important; }
#tdSide .td-send { background: #2DD4BF !important; color: #062420 !important; border: 0 !important; box-shadow: var(--utd-accent-glow) !important; }
#tdSide .td-send:disabled { background: var(--utd-menu) !important; color: var(--utd-t1) !important; box-shadow: none !important; border: 1px solid var(--utd-hair-2) !important; }
#tdSide .td-auto { color: var(--utd-t2) !important; border-radius: var(--utd-pill) !important; }

/* ---------- Splash ---------- */
.splash-screen { background: url("../art/bg/bg_05.svg") center top / cover no-repeat, var(--utd-page) !important; }
.splash-icon { width: 88px; height: 88px; margin: 0 auto 14px; font-size: 0 !important; background: url("../art/app/icon.svg") center / contain no-repeat; border-radius: 22px; }
.splash-title { font: 800 34px/1 var(--utd-font) !important; letter-spacing: -.02em !important; color: #fff !important; text-shadow: none !important; }
.splash-sub { font: 600 11px/1 var(--utd-font) !important; letter-spacing: .24em !important; color: var(--utd-t2) !important; }
.splash-bar { border-radius: var(--utd-pill) !important; background: var(--utd-modal) !important; overflow: hidden; }
.splash-fill { background: var(--accent) !important; box-shadow: none !important; }

/* ---------- Generic surfaces inside submenus (research, loadout, store, etc.) ---------- */
.submenu-content { font-family: var(--utd-font); }
.card-tile, .rank-row, .shop-item, .goal-row, .settings-row, .skin-tile, .hero-card, .tourney-card, .end-card {
  border-radius: var(--utd-r3) !important; border-color: var(--utd-hair) !important;
}
#endOverlay .end-card, .end-overlay .end-card { background: var(--utd-modal) !important; }

/* ---------- UX layer (js/utd-ux.js) ---------- */
/* One intent, one request: locked state after first tap */
.utd-busy { opacity: .55 !important; pointer-events: none !important; filter: saturate(.6); position: relative; }
.utd-busy::after {
  content: "" !important; position: absolute !important; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: utd-spin .7s linear infinite;
  display: block !important; background: none !important; inset: auto 10px auto auto !important;
}
@keyframes utd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .utd-busy::after { animation: none; } }

/* Sticky header clears your row */
#screen-menu .sub-hud {
  position: sticky !important; top: 0 !important; z-index: 20 !important; margin: 0 -14px 6px !important; padding: 10px 14px !important;
  background: rgba(14, 17, 22, .86) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--utd-hair) !important;
}
#screen-menu :is(.rank-row, [class*="rank-row"], .card-tile, .shop-item, .goal-row, .skin-tile, .mock-ms-item) { scroll-margin-top: 96px; }

/* Headlines: eyebrow pill + one accent word */
.utd-eyebrow {
  display: table; margin: 14px auto 8px; padding: 6px 12px; border-radius: var(--utd-pill);
  background: rgba(45, 212, 191, .10); border: 1px solid rgba(45, 212, 191, .35); color: var(--accent);
  font: 700 10px/1 var(--utd-font); letter-spacing: .2em; text-transform: uppercase;
}
.panel-title em { font-style: normal; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
.panel-title { text-align: center !important; margin-bottom: 14px !important; }

/* Wave button progress bar (network-style) */
#tdSide .td-prog { display: block; height: 4px; margin-top: 5px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
#tdSide .td-prog i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s; }
#tdSide .td-send:not(:disabled) .td-prog { background: rgba(6, 36, 32, .25); }
#tdSide .td-send:not(:disabled) .td-prog i { background: #062420; box-shadow: none; }


/* ================= v0.5: bubble type, solid color, softer words ================= */
/* Softer words: no ALL CAPS, no wide tracking anywhere in the game UI */
#screen-menu *, #screen-battle *, .submenu *, #endOverlay *, .splash-screen *, #tdInfo *, #tdBar *, #tdSide * {
  text-transform: none !important; letter-spacing: 0 !important;
}
/* Bubble display face for headings, numbers and buttons */
.panel-title, .mock-hero-title-live, .mock-tier-num, .splash-title, .td-h, .end-title, #endTitle,
.mock-hud-val, .sub-hud-item, .hp-text, #tdSide b, .td-nm, .td-co,
button, .upgrade-name, .upgrade-cost, .mock-start-label {
  font-family: var(--utd-display) !important;
}
.panel-title { font-weight: 700 !important; font-size: 30px !important; }
.mock-hero-title-live { font-weight: 700 !important; font-size: 38px !important; }
.mock-hero-subtitle-live, .utd-eyebrow { font-family: var(--utd-display) !important; font-weight: 600 !important; font-size: 12px !important; }
.mock-hud-label, .mock-info-header, .panel-subtitle { font-size: 11px !important; font-weight: 700 !important; }
.submenu-btn { font: 600 10px/1 var(--utd-display) !important; }
#screen-menu .mock-start-label { font: 700 20px/1 var(--utd-display) !important; }

/* Bubble buttons: solid fill + solid darker bottom edge, press sinks */
#screen-menu button, #screen-battle button, #tdInfo button, #tdSide button, .upgrade-btn {
  box-shadow: var(--utd-bubble) !important; background-image: none !important; text-shadow: none !important;
}
#screen-menu button:active, #screen-battle button:active, #tdInfo button:active, #tdSide button:active {
  transform: translateY(2px) !important; box-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}
#screen-menu .mock-start-btn, .td-row .td-pri, #tdSide .td-send:not(:disabled) { box-shadow: var(--utd-accent-glow) !important; }
.submenu-btn, .submenu-btn:active { box-shadow: none !important; transform: none !important; }

/* No auras anywhere: kill decorative glows from the Core Surge styles */
#screen-menu *, #screen-battle *, .submenu * { text-shadow: none !important; filter: none !important; }
#screen-menu [class*="glow"], #screen-battle [class*="glow"] { box-shadow: none !important; }
#tower::after, #tower .tower-core { box-shadow: none !important; }
.skin-tile.equipped { box-shadow: 0 0 0 2px var(--accent) !important; }

/* Research: 5 sub-tabs (Towers added) */
.mor-subtabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

/* Locked towers in the bar */
.td-it.locked { opacity: .45; }
.td-it.locked .td-co { color: var(--utd-t3) !important; }

/* In-battle upgrade tabs: tower icons, scroll sideways on small phones */
.upgrade-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
.upgrade-tab { flex: 0 0 auto !important; white-space: nowrap !important; }
.upgrade-tab-icon img { width: 18px; height: 18px; vertical-align: middle; }
.upgrade-icon img { width: 26px; height: 26px; }

.mockup-bg-research .mor-title, .mor-title { background: none !important; -webkit-text-fill-color: var(--utd-t1) !important; color: var(--utd-t1) !important; font-family: var(--utd-display) !important; }
.mor-families[hidden] { display: none !important; }
.mockup-bg-research:has(.mor-families[hidden]) { min-height: 0 !important; height: auto !important; aspect-ratio: auto !important; padding-bottom: 14px !important; }

/* ================= In-battle upgrade panel (header + 2 columns + bottom tabs) ================= */
#upgradesWrap.utd-up { padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; background: var(--utd-card) !important; }
.utd-up-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--utd-menu); border-top: 1px solid var(--utd-hair); border-bottom: 1px solid var(--utd-hair); }
.utd-up-title { font: 700 17px/1 var(--utd-display); color: var(--utd-t1); }
.utd-up-bm { min-height: 32px; padding: 0 14px; border-radius: 999px !important; background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important; color: var(--utd-t1) !important; font: 700 13px/1 var(--utd-display) !important; }
.utd-up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
.utd-up-empty { grid-column: 1 / -1; text-align: center; color: var(--utd-t2); font: 600 13px/1.4 var(--utd-font); padding: 18px 8px; }
.utd-up-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--utd-hair); background: var(--utd-card); }
.utd-up-tab { min-height: 52px; min-width: 0; padding: 4px 2px !important; border-radius: 14px !important; background: var(--utd-menu) !important; border: 2px solid transparent !important; color: var(--utd-t2) !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.utd-up-tab.active { border-color: var(--tab-color) !important; background: var(--utd-modal) !important; color: var(--utd-t1) !important; }
.utd-up-ic { width: 24px; height: 24px; display: grid; place-items: center; color: var(--tab-color); }
.utd-up-ic svg, .utd-up-ic img { width: 24px; height: 24px; display: block; }
.utd-up-lb { font: 600 10px/1 var(--utd-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Upgrade cards: name + change on the left, price block on the right */
.utd-up-grid .upgrade-btn {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 64px; margin: 0 !important; padding: 8px 8px 8px 10px !important; width: auto !important;
  border-radius: 14px !important; background: var(--utd-menu) !important; border: 1px solid var(--utd-hair) !important; text-align: left;
}
.utd-up-grid .upgrade-body { display: flex !important; align-items: center; gap: 8px; min-width: 0; }
.utd-up-grid .upgrade-icon { width: 30px !important; height: 30px !important; flex: none; border-radius: 10px !important; display: grid !important; place-items: center; font-size: 15px !important; background: var(--utd-card) !important; border: 1px solid var(--utd-hair) !important; }
.utd-up-grid .upgrade-icon img { width: 22px; height: 22px; }
.utd-up-grid .upgrade-data { min-width: 0; }
.utd-up-grid .upgrade-name { font: 700 12.5px/1.15 var(--utd-display) !important; color: var(--utd-t1) !important; white-space: normal !important; }
.utd-up-grid .upgrade-delta { font: 700 11px/1.2 var(--utd-font) !important; color: var(--accent) !important; margin-top: 2px; white-space: normal !important; overflow: visible !important; }
.utd-up-grid .upgrade-level { display: none !important; }
.utd-up-grid .upgrade-icon { display: none !important; }
.utd-up-grid .upgrade-prog { display: none !important; }
.utd-up-grid .upgrade-cost {
  min-width: 56px; padding: 10px 8px !important; border-radius: 10px !important; text-align: center;
  background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important; color: var(--utd-t2) !important;
  font: 700 14px/1 var(--utd-display) !important; margin: 0 !important; position: static !important;
}
.utd-up-grid .upgrade-btn.affordable .upgrade-cost { background: #1E7A58 !important; border-color: #1E7A58 !important; color: #fff !important; }
.utd-up-grid .upgrade-btn:disabled { opacity: .6; }
/* Heal card fits the same grid */
.utd-up-grid .upgrade-btn.heal { grid-template-columns: auto minmax(0, 1fr) auto; }
.utd-up-grid .upgrade-heal-icon { font-size: 18px; }
.utd-up-grid .upgrade-heal-name { font: 700 12.5px/1.1 var(--utd-display) !important; color: var(--utd-t1) !important; }
.utd-up-grid .upgrade-heal-desc { font: 600 10px/1.2 var(--utd-font) !important; color: var(--utd-t3) !important; }
.utd-up-grid .upgrade-heal-delta { display: none !important; }
.utd-up-grid .upgrade-heal-cost { min-width: 56px; padding: 10px 8px; border-radius: 10px; text-align: center; background: var(--utd-modal); color: var(--utd-t1); font: 700 14px/1 var(--utd-display); }

/* Battle info strip: one line */
.battle-info-bar { flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none; gap: 10px !important; padding: 5px 10px !important; }
.battle-info-bar::-webkit-scrollbar, .utd-up-tabs::-webkit-scrollbar { display: none; }

/* ================= Home: core centerpiece, quick rail, difficulty stats ================= */
.mock-hero { position: relative !important; }
.utd-core { position: absolute; right: 14px; bottom: 12px; width: 104px; height: 104px; pointer-events: none; }
.utd-rail { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; }
.utd-rail-btn { width: 40px; height: 40px; min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center; border-radius: 12px !important; background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important; color: var(--utd-t1) !important; }
.utd-rail-btn svg { width: 20px; height: 20px; }
.mock-hero-wordmark { max-width: 60%; }
/* utd-ts-elite: 4 tiles */ .utd-tier-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 12px 0; }
.utd-ts { background: var(--utd-menu); border: 1px solid var(--utd-hair); border-radius: 12px; padding: 8px 6px; text-align: center; }
.utd-ts span { display: block; font: 600 11px/1.2 var(--utd-font); color: var(--utd-t3); }
.utd-ts b { display: block; margin-top: 3px; font: 700 18px/1 var(--utd-display); color: var(--utd-t1); }
.utd-ts b.gold { color: var(--gold); } .utd-ts b.red { color: #FB7185; }
.utd-ts-next { grid-column: 1 / -1; text-align: center; font: 600 12px/1.3 var(--utd-font); color: var(--accent); background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.25); border-radius: 999px; padding: 7px 10px; }

/* Bottom nav: active tab is a filled block */
.submenu-btn.active { background: var(--utd-modal) !important; border-radius: 14px !important; color: var(--accent) !important; }
.submenu-btn.active::after { display: none !important; }
.submenu-btn::before { width: 24px !important; height: 24px !important; }
.mock-tier-box { height: auto !important; min-height: 0 !important; overflow: visible !important; display: flex !important; flex-direction: column !important; }
.mock-tier-row { position: relative !important; inset: auto !important; }
.mock-hero-title-live { font-size: 32px !important; }

/* ================= Full-width, equal tab bars + no cut-off cards ================= */
/* Battle upgrades: grid shows exactly 2 full rows and snaps row by row, so no card is ever half visible */
.utd-up-grid { height: calc(64px * 2 + 8px + 16px) !important; max-height: none !important; scroll-snap-type: y mandatory; scroll-padding-top: 8px; align-content: start; }
.utd-up-grid .upgrade-btn { height: 64px !important; min-height: 64px !important; scroll-snap-align: start; overflow: hidden; }
.utd-up-grid .upgrade-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Battle tab bar: edge to edge, equal cells, active cell filled with a colored top edge */
.utd-up-tabs { gap: 0 !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; }
.utd-up-tab {
  min-height: 60px !important; border-radius: 0 !important; border: 0 !important; border-top: 3px solid transparent !important;
  border-right: 1px solid var(--utd-hair) !important; background: var(--utd-card) !important; box-shadow: none !important;
}
.utd-up-tab:last-child { border-right: 0 !important; }
.utd-up-tab.active { background: var(--utd-modal) !important; border-top-color: var(--tab-color) !important; }
.utd-up-tab:active { transform: none !important; box-shadow: none !important; }

/* Home bottom nav: same system, 8 equal cells across the full width */
.submenu {
  display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 0 !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important; min-height: 64px !important;
}
.submenu-btn {
  border-radius: 0 !important; min-height: 64px !important; margin: 0 !important; width: 100% !important;
  border-top: 3px solid transparent !important; border-right: 1px solid var(--utd-hair) !important;
}
.submenu-btn:last-child { border-right: 0 !important; }
.submenu-btn.active { background: var(--utd-modal) !important; border-top-color: var(--accent) !important; border-radius: 0 !important; }
/* Core Surge hides the nav in battle with an inline style; keep that working */
.submenu[style*="display: none"], .submenu[style*="display:none"] { display: none !important; }
/* v0.6: tower bar pager + scrollable tab bar when many tower types are on the map */
.td-pg { cursor: pointer !important; }
.td-pg-a { font: 700 24px/1 var(--utd-display); color: var(--utd-t1); }
.utd-up-tabs { grid-auto-columns: minmax(56px, 1fr) !important; overflow-x: auto; scrollbar-width: none; }
/* v0.7: battle hamburger menu. Side buttons, the end X and the auto toggle move off the battlefield. */
#screen-battle .bf-side, #hpEndBtn, #tdSide .td-auto { display: none !important; }
.utd-burger { display: grid !important; place-items: center; color: var(--utd-t1) !important; }
.utd-burger svg { width: 20px; height: 20px; }
.utd-burger.open { background: var(--utd-modal) !important; border-color: var(--accent) !important; }
#utdBattleMenu { position: fixed; z-index: 60; width: min(280px, calc(100vw - 16px)); background: var(--utd-modal); border: 1px solid var(--utd-hair-2); border-radius: 16px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; }
#utdBattleMenu[hidden] { display: none !important; }
.utd-bm-item { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--utd-t1) !important; font: 700 15px/1.2 var(--utd-font) !important; text-align: left; box-shadow: none !important; }
.utd-bm-item:active { background: var(--utd-menu) !important; }
.utd-bm-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--utd-menu); display: grid; place-items: center; color: var(--accent); flex-shrink: 0; }
.utd-bm-ic svg { width: 18px; height: 18px; }
.utd-bm-lb { flex: 1; }
.utd-bm-val { font: 700 13px/1 var(--utd-font); color: var(--utd-t2); background: var(--utd-menu); border-radius: 999px; padding: 6px 10px; }
.utd-bm-item.danger { margin-top: 4px; border-top: 1px solid var(--utd-hair) !important; border-radius: 0 0 12px 12px !important; color: #FB7185 !important; }
.utd-bm-item.danger .utd-bm-ic { color: #FB7185; }
/* Live stats: floating sheet over the battlefield instead of pushing the map down. Tap it to close. */
.live-stats { position: fixed !important; left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 55; max-height: 0; overflow: hidden; background: var(--utd-modal) !important; border: 1px solid var(--utd-hair-2) !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.live-stats:not(.open) { border-width: 0 !important; box-shadow: none; }
.live-stats.open { max-height: 50vh !important; padding: 10px !important; overflow-y: auto !important; }
/* v0.9: game speed always visible, right of the HP bar */
.utd-speed { display: flex !important; align-items: center; justify-content: center; gap: 3px; width: auto !important; min-width: 52px; padding: 0 10px !important; color: var(--utd-t1) !important; font: 700 14px/1 var(--utd-font) !important; }
.utd-speed svg { width: 14px; height: 14px; color: var(--utd-t2); }
.utd-speed.fast { background: #2DD4BF !important; border-color: #2DD4BF !important; color: #062420 !important; }
.utd-speed.fast svg { color: #062420; }
/* ===== v0.10 visual QA pass ===== */
/* Tier arrows: Core Surge mirrored the left arrow with scaleX(-1); the glyph already points left */
.mock-tier-arrow[data-tier-dir="down"], .mock-tier-arrow[data-tier-dir="down"]:active:not(:disabled) { transform: none !important; }
/* Research: the page headline already says Research, drop the duplicate that sat on the tabs */
.mockup-bg-research .mor-title { display: none !important; }
/* Buttons that relied on gradients (flat style removed them) get solid fills */
.lab-buy, .tourney-play-btn { background: #2DD4BF !important; color: #062420 !important; border: 0 !important; border-radius: 12px !important;
  font: 800 12px/1.2 var(--utd-font) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 12px !important; }
.lab-buy:disabled, .tourney-play-btn:disabled { background: var(--utd-modal) !important; color: var(--utd-t3) !important; opacity: 1 !important; }
.lab-buy.maxed { background: var(--utd-menu) !important; color: var(--utd-t2) !important; }
.tourney-play-btn { width: 100%; min-height: 48px; font-size: 15px !important; }
/* Store ad card has no icon tile: stack text then a full-width button */
#submenuContent .lab:not(:has(.lab-icon-tile)) { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; }
#submenuContent .lab:not(:has(.lab-icon-tile)) .lab-buy { width: 100%; min-height: 44px; }
/* Home: one clean info card (Tier milestones). History lives on the rail, Loadout in the nav */
.mock-info-row { display: block !important; }
.mock-info-card[data-home-action="matchHistory"], .mock-info-card[data-home-action="cards"] { display: none !important; }
.mock-info-card[data-home-action="milestones"] { width: auto !important; }
/* Home quick upgrades: same cards as the battle panel, 2 columns, nothing cut off */
#homeUpgrades { margin: 12px 12px 0 !important; }
#homeUpgrades .upgrade-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
#homeUpgrades .upgrade-tab { justify-content: center; border-radius: 12px !important; background: var(--utd-menu) !important; border: 1px solid var(--utd-hair) !important; color: var(--utd-t2) !important; font: 700 12px/1 var(--utd-display) !important; min-height: 40px; }
#homeUpgrades .upgrade-tab.active { background: var(--utd-modal) !important; border-color: #2DD4BF !important; color: var(--utd-t1) !important; }
#homeUpgrades .upgrade-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; margin-top: 8px; }
#homeUpgrades .upgrade-btn { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 64px; width: auto !important; margin: 0 !important;
  padding: 8px 8px 8px 10px !important; border-radius: 14px !important; background: var(--utd-menu) !important; border: 1px solid var(--utd-hair) !important; text-align: left; }
#homeUpgrades .upgrade-icon, #homeUpgrades .upgrade-prog { display: none !important; }
#homeUpgrades .upgrade-body { display: block !important; min-width: 0; }
#homeUpgrades .upgrade-name { font: 700 12.5px/1.15 var(--utd-display) !important; color: var(--utd-t1) !important; white-space: normal !important; }
#homeUpgrades .upgrade-delta { font: 700 11px/1.2 var(--utd-font) !important; color: var(--accent) !important; margin-top: 2px; white-space: normal !important; }
#homeUpgrades .upgrade-level { font: 600 10px/1.2 var(--utd-font) !important; color: var(--utd-t3) !important; }
#homeUpgrades .upgrade-cost { min-width: 56px; padding: 10px 8px !important; border-radius: 10px !important; text-align: center; background: var(--utd-modal) !important;
  border: 1px solid var(--utd-hair-2) !important; color: var(--utd-t2) !important; font: 700 14px/1 var(--utd-display) !important; margin: 0 !important; position: static !important; }
#homeUpgrades .upgrade-btn:not(:disabled) .upgrade-cost { background: #1E7A58 !important; border-color: #1E7A58 !important; color: #fff !important; }
#homeUpgrades .upgrade-section-label, #homeUpgrades > .upgrade-label { display: none !important; }
/* Daily rewards: readable tiles */
.daily-login-grid { gap: 6px !important; }
.daily-login-grid > * { border-radius: 12px !important; min-height: 64px; }
.daily-login-day-num { font: 700 11px/1 var(--utd-display) !important; }
.daily-login-day-label { font: 700 9.5px/1.2 var(--utd-font) !important; white-space: normal !important; }
/* Battle info strip: fits the width, no clipped ends. Enemy HP/DMG live in Live stats */
.battle-info-bar { justify-content: space-around !important; overflow: hidden !important; gap: 4px !important; padding-left: 6px !important; padding-right: 6px !important; }
.binfo-ehp, .binfo-edmg { display: none !important; }
.binfo-pill { font-size: 11px !important; white-space: nowrap; padding-left: 4px !important; padding-right: 4px !important; }
/* Send wave button: a little wider so the label never wraps into three lines */
#tdSide { width: 112px !important; }
#shieldBarWrap[hidden] { display: none !important; }
#homeUpgrades .upgrade-grid { max-height: 208px !important; overflow-y: auto !important; overscroll-behavior: contain; align-content: start; scroll-snap-type: y mandatory; }
#homeUpgrades .upgrade-btn { height: 64px !important; min-height: 64px !important; scroll-snap-align: start; overflow: hidden; }
#homeUpgrades { margin-bottom: 14px !important; }
.home-upg-section-label { display: none !important; }
.tourney-entries-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }

/* v0.98: iPhone app safe areas. The top bar and bottom nav pad themselves for the notch and home bar,
   so the body must not add a second inset (that caused a white strip on top and a scrolling home). */
body { padding-top: 0 !important; padding-bottom: 0 !important; }
html.utd-insets, html.utd-insets body { background: #1E2B45 !important; }
#screen-battle { padding-top: env(safe-area-inset-top, 0px) !important; background-color: #1E2B45 !important; }
/* v0.98: loading screen matches the app icon and the home art */
#splashScreen.splash-screen { background: url("../art/home/bg.svg") center / cover no-repeat, #7CC75A !important; }
#splashScreen .splash-icon { width: 132px !important; height: 132px !important; margin: 0 auto 16px !important; font-size: 0 !important; background: url("../art/app/icon-512.png") center / cover no-repeat !important; border-radius: 30px !important; border: 4px solid #fff !important; box-shadow: 0 10px 24px rgba(20,60,90,.35) !important; animation: none !important; }
#splashScreen .splash-title, #splashScreen .splash-sub { font-family: "Lilita One", Nunito, system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase !important; text-shadow: 0 3px 0 #1d4f7a, 2px 0 0 #1d4f7a, -2px 0 0 #1d4f7a, 0 -2px 0 #1d4f7a, 2px 2px 0 #1d4f7a, -2px 2px 0 #1d4f7a !important; }
#splashScreen .splash-title { font-size: 48px !important; letter-spacing: 1px !important; color: #fff !important; margin-top: 0 !important; line-height: 1 !important; }
#splashScreen .splash-sub { font-size: 25px !important; letter-spacing: .5px !important; color: #FFD84A !important; margin-top: 4px !important; }
#splashScreen .splash-bar { width: 200px !important; height: 10px !important; border-radius: 6px !important; background: rgba(29,79,122,.55) !important; border: 2px solid #1d4f7a !important; margin-top: 20px !important; }
#splashScreen .splash-fill { background: linear-gradient(90deg, #FFD84A, #FFB020) !important; border-radius: 4px !important; }
/* v0.98e: the hidden attribute always hides (the hero drawer tab showed with no heroes because .u81d sets display:flex) */
[hidden] { display: none !important; }
/* v0.98f: timed boost chips never sit in the tower tray (they show in the gold row at the top of the map) */
#screen-battle .utd-boost-chips { display: none !important; }