/*
 * Atelier UI — a dense, premium game-table presentation.
 * Loaded after the existing theme layers so this file can unify desktop and
 * mobile without changing any of the game rules or markup contracts.
 */

:root {
  --atelier-ink: #0d0b10;
  --atelier-panel: #191419;
  --atelier-panel-2: #292025;
  --atelier-bronze: #8a623a;
  --atelier-gold: #e7c276;
  --atelier-cream: #fff0c9;
  --atelier-leaf: #6cc99b;
  --atelier-rival: #d97077;
  --atelier-shadow: 0 12px 30px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 243, 202, .12);
}

html { background: var(--atelier-ink); }
body {
  min-width: 0 !important;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(135, 83, 52, .42), transparent 43%),
    radial-gradient(ellipse at 84% 79%, rgba(45, 104, 85, .17), transparent 29%),
    #0d0b10 !important;
}

.game-shell {
  box-sizing: border-box;
  width: min(1680px, 100%);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: 12px clamp(12px, 1.15vw, 20px) 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(268px, 22vw, 344px);
  grid-template-rows: 52px 72px minmax(0, 1fr) 128px;
  grid-template-areas:
    "topbar topbar"
    "match progress"
    "arena commands"
    "bench bench";
  gap: 9px 12px;
  overflow: hidden;
}

.topbar { grid-area: topbar; margin: 0; min-height: 0; }
.adventure-bar { grid-area: match; margin: 0; min-height: 0; }
.progress-row { grid-area: progress; margin: 0; min-height: 0; }
.arena-wrap { grid-area: arena; margin: 0 !important; min-height: 0; }
.controls-row { grid-area: commands; margin: 0; min-height: 0; }
.bench-section { grid-area: bench; margin: 0; min-height: 0; }

/* The painted-kit controls use artwork rather than Unicode as their visual icon. */
.logo-crown,
.camp-icon,
.gold-bank .coin,
.power-orb,
.paragon-chip > span,
.garden-chip > span,
.wins-icon,
.boss-progress-icon,
.button-spark,
.power-cost i,
.boss-notice-icon {
  color: transparent !important;
  font-size: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-shadow: none !important;
}
.logo-crown { width: 30px; height: 30px; background-image: url("assets/ui6-crown.webp"); }
.camp-icon { background-image: url("assets/ui6-tent.webp"); }
.gold-bank .coin { width: 32px; height: 32px; background-image: url("assets/ui6-acorn.webp"); }
.power-orb,
.paragon-chip > span { background-image: url("assets/ui6-star.webp"); }
.garden-chip > span { background-image: url("assets/ui6-leaf.webp"); }
.wins-icon { background-image: url("assets/ui6-crown.webp"); }
.boss-progress-icon,
.boss-notice-icon { background-image: url("assets/ui6-skull.webp"); }
.button-spark { background-image: url("assets/ui6-sword.webp"); }
.power-cost i { background-image: url("assets/ui6-acorn.webp"); }

.topbar,
.hero-card,
.controls-row,
.bench,
.sell-zone,
.progress-row > *,
.trail-status {
  border-color: rgba(232, 193, 112, .52) !important;
  box-shadow: var(--atelier-shadow) !important;
}
.topbar {
  border-radius: 14px 14px 9px 9px !important;
  background:
    linear-gradient(90deg, rgba(242, 207, 133, .13), transparent 22% 78%, rgba(242, 207, 133, .13)),
    linear-gradient(180deg, #342426, #171319 70%) !important;
}
.topbar::after { opacity: .55; }
.logo { min-width: 180px; }
.logo b { color: var(--atelier-cream); letter-spacing: 1.2px; }
.logo small { color: #cba56d; letter-spacing: 4px; }
.round-readout { color: #cda66e; }
.round-readout strong { color: var(--atelier-cream); }
.settings-button { border-color: rgba(231, 194, 118, .45) !important; background: rgba(24, 18, 23, .78) !important; color: #f4d699 !important; }

/* Matchup cards read like polished character plaques, not dashboard widgets. */
.adventure-bar { gap: 10px; }
.hero-card {
  min-height: 0;
  height: 72px;
  border-radius: 15px !important;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(243, 207, 128, .09), transparent 38%),
    linear-gradient(150deg, #2d2426, #151218 72%) !important;
}
.enemy-hero { border-color: rgba(212, 105, 112, .7) !important; }
.player-hero { border-color: rgba(101, 204, 155, .67) !important; }
.portrait { border-radius: 11px !important; overflow: hidden; }
.portrait-ember {
  background-image: url("assets/trainer-portrait-atlas.png") !important;
  background-size: 500% 300% !important;
  background-position: 50% 50% !important;
}
.portrait-ember > span,
.rail-rival,
.sparkle { font-size: 0 !important; color: transparent !important; }
.health-orb { border-color: rgba(255, 224, 159, .82) !important; }
.health-orb b { color: var(--atelier-cream) !important; }
.versus b { border-color: #dfb267 !important; background: radial-gradient(circle, #f5d084, #8c5133 55%, #231319) !important; }
.rival-power { border-color: rgba(218, 118, 124, .54) !important; background: rgba(73, 27, 38, .78) !important; }

/* The arena is the product's centrepiece: an illuminated tabletop with quiet chrome. */
.arena-wrap {
  height: auto !important;
  border: 1px solid rgba(231, 188, 104, .68) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background-color: #161015 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .56), inset 0 0 0 1px rgba(255, 233, 173, .11) !important;
}
.arena-wrap::after { opacity: .28; }
.arena { min-height: 0; padding: 46px clamp(24px, 3vw, 52px) 32px !important; }
.battle-banner { border-color: rgba(244, 211, 142, .78) !important; background: linear-gradient(180deg, #75513a, #2c1d23) !important; color: #fff1c9 !important; }
.battle-banner span { font-size: 0; }
.enemy-board { filter: drop-shadow(0 12px 7px rgba(68, 8, 18, .46)); }
.player-board { filter: drop-shadow(0 12px 7px rgba(7, 60, 48, .36)); }
.side-label { color: #ecd3a5; text-shadow: 0 2px 5px #100b10; }
.duel-ribbon span { border-color: rgba(232, 198, 129, .62); background: linear-gradient(180deg, #57362c, #241723); color: #ffe9bc; }
.combat-feed { border-color: rgba(232, 189, 113, .56); background: rgba(19, 14, 19, .78); }

/* Painted pal art never falls back to an emoji, even if another responsive rule wins. */
.critter-portrait.atlas-art,
.critter-portrait.illustrated,
.critter-portrait.teen-atlas,
.critter-portrait.ultra-atlas { font-size: 0 !important; }
.trait-dot,
.ability-gem > span,
.rarity-ribbon::after { font-family: inherit; }
.trait-dot { background: rgba(20, 16, 24, .9) !important; color: #eac87f !important; }
.ability-gem { background: linear-gradient(180deg, #6855a0, #332657) !important; }
.enemy-card .enemy-sigil { background: linear-gradient(180deg, #b4515d, #551d32) !important; }

/* A dedicated command column makes the strategy controls feel intentional. */
.controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.05fr 1.05fr .92fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(231, 188, 104, .55);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(235, 193, 111, .11), transparent 30%),
    linear-gradient(160deg, #251b20, #131116 74%) !important;
}
.controls-row > * { min-width: 0; min-height: 0 !important; }
.camp-card,
.hero-power-card { grid-column: 1 / -1; }
.camp-card,
.hero-power-card,
.grab-button,
.gold-bank,
.battle-button { border-radius: 12px !important; }
.camp-card,
.hero-power-card { background: linear-gradient(135deg, #32272a, #1b171b) !important; border-color: rgba(223, 179, 99, .45) !important; }
.camp-icon { width: 42px; height: 42px; background-color: transparent !important; }
.tier-pips span { background: #4b4145; }
.tier-pips .filled { background: #e3b75f; box-shadow: 0 0 7px rgba(244, 194, 83, .45); }
.upgrade-button { border: 1px solid rgba(248, 216, 142, .56); background: linear-gradient(180deg, #8c6d42, #554022) !important; color: #fff2cd !important; }
.upgrade-button b { color: #24150c !important; background: #efc860 !important; }
.power-orb { width: 43px; height: 43px; border: 1px solid rgba(247, 213, 134, .38); border-radius: 11px; background-color: rgba(52, 37, 60, .86); }
.power-cost { border-color: rgba(241, 205, 126, .44); background: rgba(25, 19, 27, .68); }
.grab-button { border-color: rgba(231, 189, 101, .62) !important; background: linear-gradient(135deg, #55402a, #22191a) !important; }
.gold-bank { border: 1px solid rgba(231, 189, 101, .52); background: linear-gradient(145deg, #272027, #151217) !important; }
.gold-bank b { color: #f7d47e !important; }
.battle-button { grid-column: 1 / -1; border-color: #ffd875 !important; background: linear-gradient(180deg, #bd5d41, #6d2830) !important; box-shadow: 0 4px 0 #361522, 0 0 18px rgba(233, 112, 78, .28) !important; }
.button-spark { position: relative; left: auto; top: auto; display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 5px; }

/* Progress is a compact control strip, not another full-width page section. */
.progress-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(29px, 1fr);
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(231, 188, 104, .42);
  border-radius: 15px;
  background: linear-gradient(145deg, #231a20, #151117) !important;
}
.progress-row > * { min-width: 0; min-height: 0; padding: 4px 6px !important; border-radius: 8px !important; }
.difficulty-chip { grid-column: 1 / -1; justify-content: center; }
.difficulty-chip span { font-size: 7px; }
.difficulty-chip b,
.progress-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px !important; }
.progress-row small { display: none !important; }
.paragon-chip > span,
.garden-chip > span,
.wins-icon,
.boss-progress-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.save-status { display: none !important; }

/* The pack becomes a visible tactical tray. Nothing moves the whole page. */
.bench-section { display: grid; grid-template-rows: 18px minmax(0, 1fr); }
.bench-heading { margin: 0 9px 2px; color: #e3c28a; }
.pack-row { grid-template-columns: minmax(0, 1fr) 112px; gap: 9px; min-height: 0; }
.bench {
  min-height: 0;
  height: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #235143, #112821) !important;
}
.bench .board-slot { height: 86px; min-width: 0; }
.bench .critter-card { width: 100%; max-width: none; height: 92px; min-width: 0; }
.bench .critter-portrait.atlas-art,
.bench .critter-portrait.illustrated,
.bench .critter-portrait.teen-atlas,
.bench .critter-portrait.ultra-atlas { width: min(94%, 78px) !important; height: 69px !important; top: 4px !important; }
.bench .critter-name { font-size: 8px; }
.sell-zone { min-height: 0; padding: 7px; border-radius: 15px; background: linear-gradient(155deg, #432b2a, #1d171b) !important; }
.sell-zone span { font-size: 0; width: 31px; height: 31px; margin: 0 auto 2px; background: url("assets/ui6-acorn.webp") center / contain no-repeat; }
.sell-zone b { color: #ffe0a0; font-size: 8px; }
.sell-zone small { color: #d9b6a1; font-size: 6px; }
.sell-zone em { color: #ffd66e; }

/* Secondary copy is available through modals/help; it should not create a page two screens tall. */
.trail-status { position: absolute; z-index: 9; left: 50%; bottom: 154px; width: min(600px, 48vw); transform: translateX(-50%); padding: 4px 10px; border-radius: 9px; background: rgba(18, 14, 18, .8); text-align: center; pointer-events: none; }
.trail-status p { margin: 0; overflow: hidden; color: #e9d5ab; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.grab-pool { display: none; }
.boss-notice { position: absolute; z-index: 22; top: 67px; left: 50%; width: min(560px, 70vw); transform: translateX(-50%); }
.boss-inventory { position: absolute; z-index: 23; right: clamp(12px, 1.15vw, 20px); bottom: 146px; width: min(310px, 27vw); margin: 0; }
.boss-inventory:has(.boss-inventory-empty) { display: none; }
.boss-inventory-heading > small { display: none; }

@media (max-width: 820px) {
  body { overflow: hidden; }
  .game-shell {
    width: 100%;
    height: 100svh;
    padding: max(6px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: 45px 62px minmax(0, 1fr) 67px 116px;
    grid-template-areas:
      "topbar"
      "match"
      "arena"
      "commands"
      "bench";
    gap: 6px;
  }
  .topbar { padding: 5px 7px; border-radius: 11px 11px 7px 7px !important; }
  .logo { min-width: 0; gap: 4px; }
  .logo-crown { width: 23px; height: 23px; }
  .logo b { font-size: 11px; }
  .logo small { font-size: 5px; letter-spacing: 3px; }
  .round-readout span,
  .settings-button span,
  .sound-label { display: none; }
  .round-readout strong { font-size: 9px; }
  .topbar-actions { gap: 4px; }
  .settings-button { width: 33px; min-width: 33px; height: 31px; padding: 4px; font-size: 0; }
  .sound-icon { font-size: 14px; }
  .adventure-bar { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 3px; }
  .hero-card { height: 62px; border-radius: 11px !important; }
  .portrait { width: 40px; height: 58px; flex-basis: 40px; }
  .hero-details { padding: 4px 2px; }
  .hero-details .eyebrow,
  .hero-details small,
  .rival-power,
  .npc-readout,
  #statusText,
  .player-sticker-bar { display: none; }
  .hero-details strong { max-width: 90px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .health-orb { width: 28px; height: 28px; flex-basis: 28px; margin: 0 2px; }
  .health-orb b { font-size: 12px; }
  .health-orb small { display: block; font-size: 5px; }
  .versus b { width: 25px; height: 25px; font-size: 8px; }
  .versus span { display: none; }

  .progress-row { display: none; }
  .arena-wrap { border-radius: 14px !important; }
  .arena { padding: 30px 8px 17px !important; grid-template-rows: minmax(0, 1fr) 21px minmax(0, 1fr); }
  .rival-rail,
  .side-label,
  .combat-feed,
  .arena-sky { display: none; }
  .battle-banner { top: 5px; max-width: calc(100% - 20px); padding: 3px 8px; font-size: 6px; letter-spacing: .45px; }
  .enemy-board { transform: translateY(-3px); }
  .player-board { transform: translateY(3px); }
  .board { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 3px; }
  .board-slot { min-width: 0; height: 64px; border-radius: 8px; }
  .board .critter-card { width: 100%; max-width: none; height: 64px; min-width: 0; border-width: 1px; border-radius: 11px; }
  .board .critter-card::before { inset: 2px; border-radius: 9px; }
  .board .critter-card::after { top: 2px; height: 42px; }
  .board .critter-portrait.atlas-art,
  .board .critter-portrait.illustrated,
  .board .critter-portrait.teen-atlas,
  .board .critter-portrait.ultra-atlas { width: 58px !important; height: 49px !important; top: 4px !important; }
  .board .critter-name,
  .board .ability-gem,
  .board .trait-dot,
  .board .card-level,
  .board .rarity-ribbon,
  .board .evolution-badge { display: none !important; }
  .board .stat { bottom: -9px; min-width: 21px; height: 21px; border-width: 1px; font-size: 11px; }
  .board .attack { left: -4px; }
  .board .heart { right: -4px; }
  .board .activate-ability,
  .board .evolve-button { min-width: 25px; height: 22px; padding: 2px; border-radius: 6px; }
  .board .activate-ability b,
  .board .evolve-button b { display: none; }
  .board .activate-ability span,
  .board .evolve-button span { font-size: 10px; }
  .duel-ribbon span { padding: 2px 6px; font-size: 5px; }

  .controls-row {
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 12px;
  }
  .camp-card,
  .hero-power-card,
  .battle-button { grid-column: auto; }
  .camp-card { padding: 4px; gap: 4px; }
  .camp-icon { width: 29px; height: 29px; flex: 0 0 29px; }
  .camp-card .eyebrow,
  .camp-card strong,
  .tier-pips,
  .hero-power-card .power-copy,
  .gold-bank small,
  .battle-button small { display: none; }
  .upgrade-button { margin-left: auto; padding: 4px; font-size: 0; }
  .upgrade-button b { display: inline-grid; width: 23px; height: 23px; font-size: 10px; }
  .hero-power-card { padding: 4px; justify-content: center; }
  .power-orb { width: 29px; height: 29px; }
  .power-cost { margin-left: 2px; border: 0; background: transparent; }
  .power-cost small,
  .power-cost i { display: none; }
  .power-cost b { font-size: 15px; }
  .grab-button,
  .gold-bank { display: none; }
  .battle-button { padding: 3px; }
  .battle-button b { font-size: 9px; letter-spacing: 0; }
  .button-spark { display: none; }

  .bench-section { grid-template-rows: 15px minmax(0, 1fr); }
  .bench-heading { margin: 0 4px 1px; }
  .bench-heading .eyebrow { font-size: 7px; }
  .bench-heading strong { font-size: 8px; }
  .pack-row { grid-template-columns: minmax(0, 1fr) 55px; gap: 5px; }
  .bench { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 11px; }
  .bench .board-slot { height: 75px; }
  .bench .critter-card { height: 78px; border-width: 1px; }
  .bench .critter-portrait.atlas-art,
  .bench .critter-portrait.illustrated,
  .bench .critter-portrait.teen-atlas,
  .bench .critter-portrait.ultra-atlas { width: 64px !important; height: 55px !important; top: 3px !important; }
  .bench .critter-name { bottom: 3px; left: 2px; right: 2px; padding: 1px; font-size: 6px; }
  .bench .trait-dot,
  .bench .ability-gem,
  .bench .card-level,
  .bench .evolution-badge { display: none; }
  .bench .evolve-button { right: 1px; top: 1px; bottom: auto; min-width: 22px; height: 19px; padding: 1px; }
  .bench .evolve-button b { display: none; }
  .sell-zone { padding: 4px 2px; border-radius: 10px; }
  .sell-zone span { width: 22px; height: 22px; }
  .sell-zone b { font-size: 6px; writing-mode: vertical-rl; transform: rotate(180deg); }
  .sell-zone small { display: none; }
  .sell-zone em { margin-top: 2px; font-size: 8px; }

  .trail-status,
  .boss-notice { display: none !important; }
  .boss-inventory { right: 8px; bottom: 126px; width: min(260px, calc(100vw - 16px)); }
}

@media (max-width: 360px) {
  .game-shell { grid-template-rows: 43px 58px minmax(0, 1fr) 62px 108px; }
  .hero-card { height: 58px; }
  .portrait { width: 34px; height: 54px; flex-basis: 34px; }
  .board .critter-card { height: 58px; }
  .board-slot { height: 58px; }
  .bench .critter-card { height: 72px; }
  .bench .board-slot { height: 69px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Final mobile ownership: this file deliberately wins over legacy phone rules. */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .game-shell {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 45px 62px minmax(0, 1fr) 105px 116px !important;
    grid-template-areas:
      "topbar"
      "match"
      "arena"
      "commands"
      "bench" !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .topbar,
  .adventure-bar,
  .arena-wrap,
  .controls-row,
  .bench-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .topbar { grid-area: topbar !important; }
  .adventure-bar { grid-area: match !important; }
  .arena-wrap { grid-area: arena !important; }
  .controls-row { grid-area: commands !important; }
  .bench-section { grid-area: bench !important; }
  .progress-row { display: none !important; }

  .controls-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 43px 43px !important;
    gap: 5px !important;
    padding: 5px !important;
  }
  .camp-card { display: flex !important; grid-column: span 2 !important; }
  .hero-power-card { display: flex !important; grid-column: span 2 !important; }
  .grab-button { display: inline-flex !important; grid-column: 1 / 2 !important; min-width: 0 !important; }
  .gold-bank { display: flex !important; grid-column: 2 / 3 !important; min-width: 0 !important; }
  .battle-button { display: inline-flex !important; grid-column: 3 / 5 !important; }
  .grab-button b,
  .gold-bank b { font-size: 8px !important; }
  .gold-bank small,
  .grab-button small { display: none !important; }

  .board {
    grid-template-columns: repeat(7, 72px) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    justify-content: start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px !important;
    scroll-snap-type: x proximity;
    touch-action: pan-x !important;
    scrollbar-width: none;
  }
  .board::-webkit-scrollbar { display: none; }
  .board .board-slot {
    width: 72px !important;
    min-width: 72px !important;
    scroll-snap-align: start;
  }

  .bench {
    grid-template-columns: repeat(7, 72px) !important;
    justify-content: start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px !important;
    scroll-snap-type: x proximity;
    touch-action: pan-x !important;
    scrollbar-width: none;
  }
  .bench::-webkit-scrollbar { display: none; }
  .bench .board-slot { width: 72px !important; min-width: 72px !important; scroll-snap-align: start; }
  .bench .critter-card { width: 72px !important; }

  /* Painted sigils replace any remaining fallback glyphs in setup and actions. */
  .modal-icon,
  .setup-modal .modal-icon,
  .logo-crown,
  .boss-now-button > span,
  .hero-draft .draft-choice > span {
    font-size: 0 !important;
    color: transparent !important;
    background: url('assets/ui6-star.webp') center / contain no-repeat !important;
  }
  .modal-icon,
  .setup-modal .modal-icon,
  .logo-crown { display: inline-block !important; width: 34px !important; height: 34px !important; }
  .hero-draft .draft-choice > span { display: inline-block !important; width: 29px !important; height: 29px !important; flex: 0 0 29px; }
  .hero-draft .draft-choice:nth-child(2) > span,
  .hero-draft .draft-choice:nth-child(3) > span { background-image: url('assets/ui6-sword.webp') !important; }
  .hero-draft .draft-choice:nth-child(4) > span { background-image: url('assets/ui6-acorn.webp') !important; }
  .hero-draft .draft-choice:nth-child(5) > span,
  .boss-now-button > span { background-image: url('assets/ui6-crown.webp') !important; }
}

@media (max-width: 360px) {
  .game-shell { grid-template-rows: 43px 58px minmax(0, 1fr) 98px 108px !important; }
  .controls-row { grid-template-rows: 40px 40px !important; }
  .board { grid-template-columns: repeat(7, 66px) !important; }
  .board .board-slot { width: 66px !important; min-width: 66px !important; }
  .bench { grid-template-columns: repeat(7, 66px) !important; }
  .bench .board-slot,
  .bench .critter-card { width: 66px !important; min-width: 66px !important; }
}

/* Legacy art frames are deliberately exchanged for compact, contained phone controls. */
@media (max-width: 820px) {
  .controls-row,
  .bench-section {
    border: 1px solid rgba(231, 188, 104, .58) !important;
    border-image: none !important;
    box-sizing: border-box !important;
  }
  .controls-row {
    padding: 5px !important;
    border-radius: 13px !important;
  }
  .bench-section {
    padding: 6px !important;
    border-radius: 13px !important;
  }
  .controls-row .camp-card,
  .controls-row .hero-power-card { grid-column: span 2 !important; grid-row: 1 !important; }
  .controls-row .grab-button { grid-column: 1 / 2 !important; grid-row: 2 !important; }
  .controls-row .gold-bank { grid-column: 2 / 3 !important; grid-row: 2 !important; }
  .controls-row .battle-button { grid-column: 3 / 5 !important; grid-row: 2 !important; }

  .controls-row .grab-button,
  .controls-row .gold-bank,
  .controls-row .battle-button {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 43px !important;
    min-height: 0 !important;
    max-height: 43px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(235, 193, 111, .66) !important;
    border-image: none !important;
    border-radius: 9px !important;
    aspect-ratio: auto !important;
    box-shadow: inset 0 1px rgba(255,255,255,.11), 0 2px 5px rgba(0,0,0,.35) !important;
  }
  .controls-row .grab-button { background: linear-gradient(135deg, #8a5d2c, #31201c) !important; overflow: hidden !important; }
  .controls-row .grab-button-art { background-size: 136% 155% !important; background-position: center 48% !important; }
  .controls-row .gold-bank {
    justify-content: center !important;
    gap: 3px !important;
    background: linear-gradient(145deg, #40303a, #17141b) !important;
  }
  .controls-row .gold-bank .coin { width: 22px !important; height: 22px !important; }
  .controls-row .gold-bank b { font-size: 15px !important; }
  .controls-row .battle-button {
    justify-content: center !important;
    background: linear-gradient(180deg, #bf6a43, #6c2935) !important;
  }
  .controls-row .battle-button b { font-size: 11px !important; letter-spacing: .3px !important; }
  .controls-row .battle-button .button-spark { display: none !important; }

  .bench-section { grid-template-rows: 15px minmax(0, 1fr) !important; }
  .pack-row { grid-template-columns: minmax(0, 1fr) 50px !important; gap: 5px !important; }
  .sell-zone { min-height: 0 !important; }
}

/* Keep every combatant and pack card in view: phone play should never need a tray scrollbar. */
@media (max-width: 820px) {
  .game-shell {
    grid-template-rows: 45px 62px minmax(0, 1fr) 105px 174px !important;
  }
  .board {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    justify-content: stretch !important;
    gap: 5px !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }
  .board .board-slot {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }
  .board .critter-card { height: 100% !important; min-height: 0 !important; }

  .bench-section { grid-template-rows: 15px minmax(0, 1fr) !important; }
  .bench {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    justify-content: stretch !important;
    gap: 4px !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
  }
  .bench .board-slot,
  .bench .critter-card {
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 360px) {
  .game-shell { grid-template-rows: 43px 58px minmax(0, 1fr) 98px 156px !important; }
}

/* Desktop command rail: compact, legible controls instead of oversized decorative plates. */
@media (min-width: 821px) {
  .game-shell {
    grid-template-rows: 52px 72px minmax(0, 1fr) 160px !important;
  }
  .controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 72px 60px 58px 78px !important;
    align-content: start !important;
    align-self: start !important;
    height: 338px !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid rgba(232, 193, 112, .55) !important;
    border-image: none !important;
    border-radius: 17px !important;
    background: linear-gradient(150deg, rgba(223, 177, 95, .10), transparent 28%), linear-gradient(165deg, #2a2027, #15141b 75%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 9px 26px rgba(0,0,0,.36) !important;
  }
  .controls-row > * { box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; }
  .controls-row .camp-card { grid-column: 1 / -1 !important; grid-row: 1 !important; min-height: 0 !important; padding: 9px 10px !important; }
  .controls-row .upgrade-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 66px !important;
    height: 38px !important;
    min-width: 66px !important;
    margin-left: auto !important;
    padding: 4px !important;
    border: 1px solid rgba(241, 202, 114, .75) !important;
    border-image: none !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #9b6a32, #593522) !important;
    box-shadow: inset 0 1px rgba(255,242,194,.25), 0 2px #2d1914 !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  .controls-row .upgrade-button span { display: none !important; }
  .controls-row .upgrade-button b { display: inline !important; color: #fff0c8 !important; font-size: 16px !important; line-height: 1 !important; text-shadow: 0 1px #4b2514; }
  .controls-row .hero-power-card { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 0 !important; padding: 7px 9px !important; }
  .controls-row .hero-power-card .power-copy { min-width: 0; }
  .controls-row .hero-power-card .power-copy strong { font-size: 13px !important; letter-spacing: .45px !important; }
  .controls-row .hero-power-card .power-copy small { font-size: 7px !important; }
  .controls-row .power-orb { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
  .controls-row .grab-button { grid-column: 1 !important; grid-row: 3 !important; width: 100% !important; height: 58px !important; max-height: 58px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(235, 193, 111, .66) !important; border-image: none !important; border-radius: 10px !important; aspect-ratio: auto !important; background: #2d1d18 !important; }
  .controls-row .grab-button-art { background-size: 118% 142% !important; background-position: center 49% !important; }
  .controls-row .gold-bank { grid-column: 2 !important; grid-row: 3 !important; display: flex !important; width: 100% !important; height: 58px !important; min-height: 0 !important; margin: 0 !important; padding: 6px !important; gap: 4px !important; justify-content: center !important; border: 1px solid rgba(235, 193, 111, .56) !important; border-image: none !important; border-radius: 10px !important; background: linear-gradient(145deg, #3f3039, #1b1720) !important; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 2px 5px rgba(0,0,0,.32) !important; }
  .controls-row .gold-bank .coin { width: 24px !important; height: 24px !important; }
  .controls-row .gold-bank b { font-size: 17px !important; }
  .controls-row .gold-bank small { display: none !important; }
  .controls-row .battle-button { grid-column: 1 / -1 !important; grid-row: 4 !important; display: flex !important; width: 100% !important; height: 78px !important; min-height: 0 !important; max-height: 78px !important; margin: 0 !important; padding: 8px 12px !important; justify-content: center !important; border: 1px solid #f0c775 !important; border-image: none !important; border-radius: 11px !important; background: linear-gradient(180deg, #bc7044, #6f2d37) !important; box-shadow: inset 0 1px rgba(255,243,202,.28), 0 4px #381b26, 0 9px 17px rgba(0,0,0,.28) !important; }
  .controls-row .battle-button { flex-direction: column !important; align-items: center !important; gap: 4px !important; }
  .controls-row .battle-button b { font-size: 16px !important; line-height: 1 !important; letter-spacing: 1px !important; white-space: nowrap !important; }
  .controls-row .battle-button small { display: block !important; font-size: 8px !important; line-height: 1 !important; }
  .controls-row .battle-button .button-spark { display: none !important; }

  .progress-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    height: 56px !important;
    padding: 5px !important;
    border: 1px solid rgba(232, 193, 112, .45) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #2a2027, #15141b) !important;
  }
  .progress-row > * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 3px !important;
    border: 1px solid rgba(224, 181, 99, .36) !important;
    border-image: none !important;
    border-radius: 8px !important;
    background: rgba(13, 13, 17, .48) !important;
    box-shadow: none !important;
  }
  .progress-row > * > span:first-child,
  .progress-row .wins-icon,
  .progress-row .boss-progress-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    background-size: contain !important;
  }
  .progress-row b,
  .progress-row strong { font-size: 8px !important; letter-spacing: .2px !important; }
  .progress-row .difficulty-chip { flex: 2.2 1 0 !important; }
  .progress-row .difficulty-chip > span { display: none !important; }
  .progress-row .difficulty-chip b { display: block !important; max-width: 100% !important; overflow: hidden !important; color: #f1d59d !important; font-family: Cinzel, Georgia, serif !important; font-size: 8px !important; line-height: 1 !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
  .progress-row .paragon-chip,
  .progress-row .garden-chip,
  .progress-row .adventure-wins-chip,
  .progress-row .boss-progress-chip { flex: 1 1 0 !important; }
  .progress-row .paragon-chip strong,
  .progress-row .garden-chip strong,
  .progress-row .adventure-wins-chip > span:last-child,
  .progress-row .boss-progress-chip > span:last-child { display: none !important; }

  .bench-section {
    display: grid !important;
    grid-template-rows: 18px minmax(0, 1fr) !important;
    box-sizing: border-box !important;
    height: 160px !important;
    margin: 0 !important;
    padding: 9px 12px 10px !important;
    border: 1px solid rgba(232, 193, 112, .55) !important;
    border-image: none !important;
    border-radius: 17px !important;
    background: linear-gradient(155deg, rgba(223, 177, 95, .08), transparent 34%), linear-gradient(165deg, #173127, #101a18 76%) !important;
    overflow: hidden !important;
  }
  .bench-heading { margin: 0 2px !important; }
  .pack-row { min-height: 0 !important; height: 100% !important; align-items: stretch !important; }
  .bench { height: 100% !important; min-height: 0 !important; align-items: stretch !important; padding: 5px !important; }
  .bench .board-slot,
  .bench .critter-card { height: 100% !important; min-height: 0 !important; }
  .sell-zone { min-height: 0 !important; }

  .boss-inventory {
    right: clamp(12px, 1.15vw, 20px) !important;
    bottom: 172px !important;
    width: min(292px, 23vw) !important;
    max-height: min(330px, calc(100dvh - 420px)) !important;
    overflow-y: auto !important;
  }
}

/* Trail Command: a dedicated Diablo-meets-cozy-camp control shrine for wide screens. */
@media (min-width: 821px) {
  .controls-row {
    position: relative !important;
    isolation: isolate;
    height: 354px !important;
    padding: 37px 12px 12px !important;
    grid-template-rows: 67px 57px 54px 78px !important;
    gap: 7px !important;
    border: 1px solid rgba(244, 205, 121, .68) !important;
    border-radius: 19px !important;
    background:
      radial-gradient(110% 42% at 50% 0%, rgba(243, 184, 84, .16), transparent 60%),
      linear-gradient(90deg, rgba(10, 8, 12, .52), transparent 9%, transparent 91%, rgba(10, 8, 12, .52)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
      linear-gradient(160deg, #38292a, #17141b 55%, #0d1112) !important;
    box-shadow:
      inset 0 1px rgba(255, 240, 190, .25),
      inset 0 0 0 4px rgba(10, 7, 10, .62),
      0 12px 28px rgba(0,0,0,.46) !important;
  }
  .controls-row::before {
    content: "TRAIL COMMAND";
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 50%;
    width: min(198px, 74%);
    padding: 5px 12px 6px;
    transform: translateX(-50%);
    border: 1px solid rgba(248, 211, 132, .72);
    border-radius: 999px;
    background: linear-gradient(180deg, #6c4c31, #21191d 72%);
    box-shadow: inset 0 1px rgba(255,244,205,.34), 0 3px 7px rgba(0,0,0,.42);
    color: #f7d99d;
    font-family: Cinzel, Georgia, serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px #392116;
  }
  .controls-row::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 29px;
    right: 17px;
    left: 17px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 194, 103, .72), transparent);
    pointer-events: none;
  }
  .controls-row > * { position: relative; z-index: 2; }

  .controls-row .camp-card {
    border: 1px solid rgba(234, 191, 107, .54) !important;
    border-radius: 13px !important;
    background:
      radial-gradient(circle at 17% 50%, rgba(255, 213, 115, .12), transparent 34%),
      linear-gradient(100deg, #26372d, #1c211f 48%, #35261f) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 -8px 16px rgba(0,0,0,.18) !important;
  }
  .controls-row .camp-card .eyebrow { color: #d9ad6b !important; letter-spacing: 1.2px !important; }
  .controls-row .camp-card strong { color: #ffe2a8 !important; font-size: 17px !important; }
  .controls-row .tier-pips span { background: #2a2621 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.75); }
  .controls-row .tier-pips .filled { background: linear-gradient(180deg, #ffe399, #d99c3c) !important; box-shadow: 0 0 8px rgba(255,193,78,.42); }

  .controls-row .hero-power-card {
    border: 1px solid rgba(151, 125, 203, .48) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 13% 50%, rgba(153, 119, 255, .22), transparent 32%),
      linear-gradient(100deg, #29233a, #191824 68%, #312536) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.3) !important;
  }
  .controls-row .power-orb { filter: drop-shadow(0 0 8px rgba(161, 128, 255, .48)); }
  .controls-row .hero-power-card .power-copy small { color: #bca9dd !important; letter-spacing: 1px !important; }
  .controls-row .hero-power-card .power-copy strong { color: #f0e1ff !important; }
  .controls-row .power-cost { border-color: rgba(246, 209, 133, .68) !important; background: linear-gradient(180deg, #5c4838, #251d21) !important; }

  .controls-row .grab-button,
  .controls-row .gold-bank {
    border-color: rgba(230, 184, 96, .72) !important;
    box-shadow: inset 0 1px rgba(255,245,210,.2), inset 0 -7px 14px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.34) !important;
  }
  .controls-row .gold-bank { background: linear-gradient(145deg, #473323, #231921) !important; }
  .controls-row .battle-button {
    border-color: #ffd383 !important;
    background:
      radial-gradient(60% 120% at 50% -18%, rgba(255,241,184,.48), transparent 44%),
      linear-gradient(180deg, #c97645, #893b36 55%, #5b2632) !important;
    box-shadow: inset 0 1px rgba(255,249,218,.45), inset 0 -9px 14px rgba(53,13,25,.28), 0 4px #371923, 0 9px 17px rgba(0,0,0,.33) !important;
  }
  .controls-row .battle-button b { color: #fff0c2 !important; font-size: 17px !important; text-shadow: 0 2px #622b24, 0 0 10px rgba(255,220,137,.28); }
  .controls-row .battle-button small { color: #ffe4aa !important; letter-spacing: 1.2px !important; }
}

/* Rebuilt command controls: readable game verbs, painted material, and a real currency bank. */
@media (min-width: 821px) {
  .controls-row .camp-card {
    position: relative !important;
    padding-right: 104px !important;
  }
  .controls-row .upgrade-button {
    position: absolute !important;
    top: 11px;
    right: 8px;
    width: 80px !important;
    min-width: 80px !important;
    height: 43px !important;
    gap: 5px !important;
    border-color: #ffd781 !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(255,241,180,.24), transparent 35%),
      linear-gradient(145deg, #b17735, #633519 76%) !important;
    box-shadow: inset 0 1px rgba(255,250,215,.45), inset 0 -7px 10px rgba(67,27,11,.22), 0 3px #30170e !important;
  }
  .controls-row .upgrade-button::before {
    content: "UPGRADE";
    color: #fff0c6;
    font-family: Cinzel, Georgia, serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .65px;
    text-shadow: 0 1px #4d220e;
  }
  .controls-row .upgrade-button b {
    display: inline-grid !important;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(255,238,171,.78);
    border-radius: 50%;
    background: #4a2917;
    color: #fff1bf !important;
    font-size: 12px !important;
  }

  .controls-row .hero-power-card {
    cursor: pointer;
    overflow: hidden;
  }
  .controls-row .hero-power-card::after {
    content: "CAST";
    position: absolute;
    right: 48px;
    top: 5px;
    width: 30px;
    padding: 3px 1px;
    transform: none;
    border: 1px solid rgba(210, 184, 255, .7);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(141,99,230,.42), rgba(48,30,76,.78));
    color: #f3eaff;
    font-family: Cinzel, Georgia, serif;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .9px;
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.26);
  }
  .controls-row .hero-power-card:hover::after { filter: brightness(1.14); }
  .controls-row .power-cost {
    z-index: 2;
    min-width: 39px !important;
    height: 39px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 28%, #fff5b1, #b88839 45%, #442818 76%) !important;
    box-shadow: inset 0 1px rgba(255,255,235,.7), 0 0 0 2px rgba(56,31,19,.86), 0 0 12px rgba(255,199,83,.24) !important;
  }
  .controls-row .power-cost b { color: #3d2113 !important; font-size: 16px !important; text-shadow: 0 1px rgba(255,244,190,.45); }

  .controls-row .grab-button {
    position: relative !important;
    overflow: hidden !important;
    border-color: #ffcf75 !important;
    background:
      radial-gradient(circle at 16% 20%, rgba(255,231,145,.36), transparent 28%),
      linear-gradient(145deg, #a95427, #532319 74%) !important;
    box-shadow: inset 0 1px rgba(255,246,204,.45), inset 0 -8px 12px rgba(59,15,9,.2), 0 3px #31130e !important;
  }
  .controls-row .grab-button-art,
  .controls-row .grab-button-sheen { display: none !important; }
  .controls-row .grab-button::before {
    content: "GRAB A PAL";
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    height: 100%;
    color: #fff0bc;
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-shadow: 0 2px #612314, 0 0 12px rgba(255,210,100,.25);
  }
  .controls-row .grab-button::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -15%;
    width: 58px;
    height: 82px;
    transform: rotate(25deg);
    background: url('assets/ui6-acorn.webp') center / contain no-repeat;
    filter: drop-shadow(0 3px 3px rgba(24,8,5,.5));
    opacity: .92;
  }
  .controls-row .grab-button:hover { filter: brightness(1.12) saturate(1.08); transform: translateY(-1px); }

  .controls-row .gold-bank {
    position: relative;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden;
    border-color: #f6d17f !important;
    background:
      radial-gradient(circle at 50% 2%, rgba(255,236,166,.32), transparent 45%),
      linear-gradient(145deg, #5b3d22, #28191a 74%) !important;
    box-shadow: inset 0 1px rgba(255,249,215,.48), inset 0 -8px 14px rgba(33,13,11,.22), 0 3px #27120e !important;
  }
  .controls-row .gold-bank::before {
    content: "ACORNS";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    color: #ffe5a8;
    font-family: Cinzel, Georgia, serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-align: center;
    text-shadow: 0 1px #4a2613;
  }
  .controls-row .gold-bank .coin {
    width: 32px !important;
    height: 32px !important;
    margin-top: 8px;
    filter: drop-shadow(0 2px 2px rgba(30,8,4,.46));
  }
  .controls-row .gold-bank b {
    margin-top: 8px;
    color: #fff1bd !important;
    font-family: Cinzel, Georgia, serif !important;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px #4c250f, 0 0 10px rgba(255,207,99,.25);
  }

  .controls-row .camp-card strong { font-size: 15px !important; white-space: nowrap; }
  .controls-row .hero-power-card::after { content: none !important; }
}

/* Wide-screen cleanup: remove decorative noise and make each command read as one deliberate game action. */
@media (min-width: 821px) {
  .progress-row { display: none !important; }
  .game-shell {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    grid-template-areas:
      "topbar topbar"
      "match match"
      "arena commands"
      "bench bench" !important;
  }
  .controls-row {
    grid-template-rows: 67px 57px 54px 78px !important;
    width: 300px !important;
    height: 354px !important;
  }
  .controls-row::before { content: "THE CAMPSITE"; }
  .controls-row .camp-card .eyebrow { font-size: 7px !important; }
  .controls-row .camp-card strong { font-size: 16px !important; }
  .controls-row .upgrade-button::before { content: "GROW CAMP"; font-size: 6.5px; }
  .controls-row .hero-power-card {
    padding-left: 11px !important;
    border-color: rgba(177, 144, 232, .66) !important;
  }
  .controls-row .hero-power-card .power-copy small {
    display: block !important;
    color: #d7c7ff !important;
    font-size: 7px !important;
    letter-spacing: 1.35px !important;
  }
  .controls-row .hero-power-card .power-copy strong { font-size: 15px !important; }
  .controls-row .power-orb { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .controls-row .power-cost { min-width: 43px !important; height: 43px !important; }
  .controls-row .power-cost b { font-size: 18px !important; }
  .controls-row .grab-button,
  .controls-row .gold-bank { height: 54px !important; max-height: 54px !important; }
  .controls-row .grab-button::before { font-size: 13px; letter-spacing: .6px; }
  .controls-row .grab-button::after { width: 62px; height: 86px; }
  .controls-row .gold-bank::before { top: 4px; font-size: 7px; letter-spacing: 1.6px; }
  .controls-row .gold-bank .coin { width: 34px !important; height: 34px !important; margin-top: 8px; }
  .controls-row .gold-bank b { margin-top: 8px; font-size: 29px !important; }
  .controls-row .battle-button { height: 78px !important; }
}

/* Hand-painted Trail Command icons, generated as a cohesive sprite sheet. */
@media (min-width: 821px) {
  /* Camp details and the upgrade action deliberately occupy separate columns. */
  .controls-row .camp-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 53px minmax(0, 1fr) 80px !important;
    column-gap: 8px !important;
    align-items: center !important;
    padding: 7px 8px !important;
  }
  .controls-row .camp-card > div:nth-child(2) {
    min-width: 0 !important;
    max-width: none !important;
  }
  .controls-row .upgrade-button {
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .controls-row .camp-icon,
  .controls-row .power-orb,
  .controls-row .gold-bank .coin,
  .controls-row .grab-button::after,
  .controls-row .battle-button::after {
    background-image: url('assets/trail-command-icons-v1.png') !important;
    background-repeat: no-repeat !important;
    background-size: 200% 300% !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
  }
  .controls-row .camp-icon {
    width: 53px !important;
    height: 53px !important;
    flex: 0 0 53px !important;
    background-position: 0 0 !important;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.38));
  }
  .controls-row .power-orb {
    background-position: 100% 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(186, 87, 255, .38));
  }
  .controls-row .grab-button::after {
    right: 3px !important;
    top: -10px !important;
    width: 68px !important;
    height: 68px !important;
    transform: none !important;
    background-position: 0 50% !important;
    filter: drop-shadow(0 3px 3px rgba(26,7,3,.52)) !important;
  }
  .controls-row .gold-bank .coin {
    background-position: 100% 50% !important;
    filter: drop-shadow(0 3px 3px rgba(26,7,3,.48)) !important;
  }
  .controls-row .battle-button {
    overflow: hidden !important;
  }
  .controls-row .battle-button::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -8px;
    width: 62px;
    height: 62px;
    background-position: 0 100% !important;
    opacity: .68;
    pointer-events: none;
  }

  /* At Crown Camp the grow action has nothing left to do, so retire it cleanly. */
  .camp-card:has(#tierPips span:nth-child(4).filled) .upgrade-button { display: none !important; }

  /* Hero costs now use the same painted acorn currency language as the turn bank. */
  .controls-row .power-cost {
    display: grid !important;
    place-items: center !important;
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: url('assets/trail-command-icons-v1.png') !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    background-size: 200% 300% !important;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 3px rgba(26,7,3,.5));
  }
  .controls-row .power-cost b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255,238,183,.65);
    border-radius: 50%;
    background: rgba(56, 25, 15, .82);
    color: #fff2bf !important;
    font-size: 12px !important;
    line-height: 1;
    text-shadow: 0 1px #35170d;
  }

  .front-button,
  .front-marker,
  .front-label,
  [data-front],
  [data-position="front"] { display: none !important; }
}

/* Keep the Trail Command's painted visual language identical on phone and desktop.
   The controls retain their roomy mobile geometry; only the icon treatment changes. */
@media (max-width: 820px) {
  .controls-row .camp-icon,
  .controls-row .power-orb,
  .controls-row .gold-bank .coin,
  .controls-row .grab-button::after,
  .controls-row .battle-button::after {
    background-image: url('assets/trail-command-icons-v1.png') !important;
    background-repeat: no-repeat !important;
    background-size: 200% 300% !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
  }
  .controls-row .camp-icon {
    background-position: 0 0 !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.36));
  }
  .controls-row .power-orb {
    background-position: 100% 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(186,87,255,.38));
  }
  .controls-row .gold-bank .coin {
    background-position: 100% 50% !important;
    filter: drop-shadow(0 2px 2px rgba(26,7,3,.48));
  }
  .controls-row .grab-button-art,
  .controls-row .grab-button-sheen { display: none !important; }
  .controls-row .grab-button::after {
    content: "";
    position: absolute;
    top: -7px;
    right: 2px;
    width: 58px;
    height: 58px;
    transform: none !important;
    background-position: 0 50% !important;
    filter: drop-shadow(0 2px 3px rgba(26,7,3,.52));
    pointer-events: none;
  }
  .controls-row .battle-button {
    position: relative;
    overflow: hidden;
  }
  .controls-row .battle-button::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: -8px;
    width: 58px;
    height: 58px;
    background-position: 0 100% !important;
    opacity: .62;
    pointer-events: none;
  }
  .controls-row .power-cost {
    background-image: url('assets/trail-command-icons-v1.png') !important;
    background-repeat: no-repeat !important;
    background-position: 100% 50% !important;
    background-size: 200% 300% !important;
  }
}