/* ==========================================================================
   STATE WARS — battle.css
   The battle screen: a fixed shop panel on the left, the field on the right.

   THE SPLIT IS THE DESIGN. The shop never floats over the battlefield, because
   the whole reason the enemy is drawn up in front of you during PREPARATION is
   so you can shop against what you see. Anything covering the field would be
   covering the information.

       PREPARATION   shop 33%  |  field 67%      enemy stands still
       BATTLE        shop 0    |  field 100%     deploy bar, they advance
       RESULT        outcome card over the field
   ========================================================================== */

/* ---------- 1. Shared bits ------------------------------------------------ */

.coin {
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-right: .4em;
  vertical-align: -.08em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe6b0, #d98d17 70%);
  box-shadow: 0 0 calc(8px * var(--fx)) rgba(255, 194, 92, .7);
}

.coin--big { width: 1.05em; height: 1.05em; }

.stars { display: inline-flex; gap: 2px; }

.star {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, .13);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star.is-on { background: var(--c-gold); }


/* ---------- 2. The arena: two columns ------------------------------------- */

.screen--battle { padding: 0; overflow: hidden; }

.arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(19rem, 33%) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-void);
  transition: grid-template-columns var(--t-slow) var(--ease-out);
}

/* Shopping done, the shop leaves, the field takes everything — from the moment
   deployment starts, not from the moment the fighting does. */
.arena[data-phase="deploy"],
.arena[data-phase="battle"],
.arena[data-phase="victory"],
.arena[data-phase="defeat"] { grid-template-columns: 0 minmax(0, 1fr); }

.arena[data-phase="deploy"]  .shop,
.arena[data-phase="battle"]  .shop,
.arena[data-phase="victory"] .shop,
.arena[data-phase="defeat"]  .shop {
  opacity: 0;
  transform: translateX(-2rem);
  pointer-events: none;
}

/* Both columns are placed EXPLICITLY. The shop is `hidden` once it has slid
   away, and a hidden grid item leaves the flow entirely — an auto-placed field
   would then fall into column 1, which is the column that just collapsed to
   zero. Naming the columns keeps the field where it belongs. */
.shop  { grid-column: 1; grid-row: 1; }
.field { grid-column: 2; grid-row: 1; }

.field { position: relative; min-width: 0; overflow: hidden; }

#battle-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }


/* ---------- 3. The shop panel --------------------------------------------- */

.shop {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;   /* head · cards · foot */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(127, 216, 255, .22);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(127, 216, 255, .09), transparent 60%),
    linear-gradient(180deg, var(--c-deep), #060a14);
  box-shadow: 18px 0 46px -30px #000;
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

/* 3a. Head — money first, because it decides everything below it */
.shop__head {
  padding: clamp(.9rem, 2.4vh, 1.4rem) clamp(.9rem, 1.6vw, 1.4rem) .9rem;
  border-bottom: 1px solid rgba(127, 216, 255, .14);
}

.shop__phase {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.shop__title {
  margin-top: .1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 calc(26px * var(--fx)) rgba(127, 216, 255, .35);
}

.purse {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .7rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 194, 92, .3);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(58, 42, 12, .5), rgba(20, 15, 6, .5));
}

.purse__label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.purse__value {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1;
  color: var(--c-gold);
  text-shadow: 0 0 calc(20px * var(--fx)) rgba(255, 194, 92, .5);
  transition: transform var(--t-fast) var(--ease-out);
}

/* Money moving is worth noticing. */
.purse__value.is-spend { animation: purse-drop 340ms var(--ease-out); }
.purse__value.is-refund { animation: purse-rise 340ms var(--ease-out); }

@keyframes purse-drop {
  0%   { transform: scale(1.14); color: #ff8a72; }
  100% { transform: scale(1);    color: var(--c-gold); }
}

@keyframes purse-rise {
  0%   { transform: scale(1.14); color: #7fe0a8; }
  100% { transform: scale(1);    color: var(--c-gold); }
}

.reduce-motion .purse__value.is-spend,
.reduce-motion .purse__value.is-refund { animation: none; }

.purse__bonus {
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7fe0a8;
}

/* 3a-ii. The ground you are about to fight on.
   Terrain is the third thing the player weighs when buying — after what the
   enemy brought and what they can afford — so it sits with the money rather
   than off in a corner. Three lines maximum, and never over the battlefield
   itself: the field is already on screen at full size and reading it is the
   real briefing. */
.ground {
  margin-top: .7rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(127, 216, 255, .18);
  border-left: 3px solid var(--ground-tint, #7fd8ff);
  border-radius: 3px;
  background: rgba(8, 16, 28, .55);
}

.ground__label {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ground__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  line-height: 1.1;
  letter-spacing: .07em;
  color: var(--ground-tint, #7fd8ff);
  margin: .1rem 0 .35rem;
}

.ground__fx {
  display: grid;
  gap: .18rem;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--c-dim);
}

.ground__fx li {
  position: relative;
  padding-left: .7rem;
}

.ground__fx li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ground-tint, #7fd8ff);
  opacity: .8;
}

/* Each battlefield gets its own colour so the panel is recognisable at a
   glance, before any of the words are read. */
.ground[data-terrain="plains"] { --ground-tint: #9fd97f; }
.ground[data-terrain="forest"] { --ground-tint: #5fbf7a; }
.ground[data-terrain="mud"]    { --ground-tint: #c39a63; }
.ground[data-terrain="hills"]  { --ground-tint: #d9c37f; }
.ground[data-terrain="river"]  { --ground-tint: #6fc4e8; }
.ground[data-terrain="rocky"]  { --ground-tint: #b0b6c2; }
.ground[data-terrain="mixed"]  { --ground-tint: #d59ae0; }

/* One line of reading on the enemy line. Not a panel — advice. */
.shop__read {
  margin-top: .6rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--c-dim);
}

.shop__read:empty { display: none; }

.shop__locked {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(127, 216, 255, .14);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--c-muted);
}

.shop__locked b { color: var(--c-gold); font-family: var(--font-display); font-size: .8rem; }

/* 3b. Troop cards */
.shop__cards {
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: .8rem clamp(.9rem, 1.6vw, 1.4rem);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 216, 255, .3) transparent;
}

.shop__cards::-webkit-scrollbar { width: 8px; }
.shop__cards::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(127, 216, 255, .25);
}

.tcard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "art  name"
    "art  stats"
    "cost buy";
  align-items: center;
  column-gap: .75rem;
  row-gap: .35rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(127, 216, 255, .18);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(15, 30, 53, .95), rgba(9, 17, 31, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px -22px #000;
  transition: border-color var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

@media (hover: hover) {
  .tcard:hover {
    border-color: rgba(127, 216, 255, .5);
    box-shadow: 0 calc(20px * var(--fx)) calc(40px * var(--fx)) -26px rgba(127, 216, 255, .8);
  }
}

.tcard[data-owned-any="true"] {
  border-color: rgba(255, 194, 92, .5);
  background: linear-gradient(160deg, rgba(38, 30, 12, .92), rgba(12, 15, 26, .95));
}

.tcard[data-affordable="false"][data-owned-any="false"] { opacity: .55; }

/* The confirmation that a purchase happened. */
.tcard.is-bought { animation: card-buy 380ms var(--ease-out); }

@keyframes card-buy {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
  30%  { transform: scale(1.025); box-shadow: 0 0 calc(30px * var(--fx)) -4px rgba(255, 194, 92, .9); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
}

.reduce-motion .tcard.is-bought { animation: none; }

.tcard__art {
  grid-area: art;
  width: clamp(3.2rem, 6vw, 4.2rem);
  height: clamp(3.2rem, 6vw, 4.2rem);
  display: grid;
  place-items: center;
  border-radius: 4px;
  background:
    radial-gradient(70% 80% at 50% 85%, rgba(127, 216, 255, .16), transparent 70%),
    rgba(4, 7, 14, .5);
}

.tcard__art img { width: 88%; height: 88%; object-fit: contain; }

.tcard__name {
  grid-area: name;
  align-self: end;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9rem, 1.7vw, 1.05rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}

.tcard__stats { grid-area: stats; display: grid; gap: .16rem; }

.tcard__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.tcard__range { color: var(--c-ice); letter-spacing: .1em; }

.tcard__cost {
  grid-area: cost;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-gold);
}

/* 3c. [−] N [+] */
.tcard__buy {
  grid-area: buy;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: 2px;
  border: 1px solid rgba(127, 216, 255, .22);
  border-radius: 4px;
  background: rgba(4, 7, 14, .55);
}

/* `qty`, not `step` — HOW TO PLAY already owns `.step`. */
.qty {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--c-dim);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.qty:hover:not(:disabled) { transform: translateY(-1px); }
.qty:active:not(:disabled) { transform: translateY(1px); }
.qty:disabled { opacity: .25; cursor: default; }

.qty--add { color: var(--c-gold); }
.qty--add:hover:not(:disabled) { background: var(--c-gold); color: #241703; }
.qty--sub:hover:not(:disabled) { background: rgba(255, 138, 114, .9); color: #2a0d07; }

.tcard__owned {
  min-width: 2rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  transition: transform var(--t-fast) var(--ease-out);
}

.tcard__owned.is-pop { animation: count-pop 300ms var(--ease-out); }

@keyframes count-pop {
  0%   { transform: scale(1.6); color: var(--c-gold); }
  100% { transform: scale(1);   color: #fff; }
}

.reduce-motion .tcard__owned.is-pop { animation: none; }

/* 3d. Foot — your army, then the button */
.shop__foot {
  padding: .8rem clamp(.9rem, 1.6vw, 1.4rem) clamp(.9rem, 2.2vh, 1.2rem);
  border-top: 1px solid rgba(127, 216, 255, .16);
  background: linear-gradient(0deg, rgba(4, 7, 14, .9), transparent);
}

.myarmy__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .4rem;
}

.myarmy__label,
.myarmy__total {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.myarmy__total b { color: var(--c-gold); }

.myarmy__list { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 1.9rem; }

.rost {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid rgba(127, 216, 255, .28);
  border-radius: 3px;
  background: rgba(127, 216, 255, .08);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--c-text);
  animation: rise 240ms var(--ease-out) both;
}

.rost__x { color: var(--c-gold); font-weight: 700; }

.rost--empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .14);
  background: none;
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
}

.myarmy__money {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.myarmy__money b { color: var(--c-dim); font-weight: 400; }

.shop .btn--huge { width: 100%; margin-top: .7rem; }
.shop .btn--huge:disabled { opacity: .38; cursor: default; }
.shop .btn--huge:disabled:hover { transform: none; }

/* Bought something: the button stops being scenery. */
.shop .btn--huge:not(:disabled) { animation: start-ready 460ms var(--ease-out); }

@keyframes start-ready {
  0%   { box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
  40%  { box-shadow: 0 0 calc(34px * var(--fx)) -6px rgba(255, 194, 92, .85); }
  100% { box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
}

.reduce-motion .shop .btn--huge:not(:disabled) { animation: none; }


/* ---------- 4. Field furniture -------------------------------------------- */

/* 4a. Top HUD */
.bhud {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: clamp(.55rem, 1.8vh, .9rem) clamp(.7rem, 2vw, 1.4rem);
  pointer-events: none;
}

.bhud__base { display: grid; gap: .22rem; max-width: 18rem; }

.bhud__who {
  font-family: var(--font-mono);
  font-size: clamp(.5rem, .9vw, .6rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.bhud__num {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  color: var(--c-dim);
}

.bar {
  display: block;
  height: 13px;
  border: 1px solid rgba(127, 216, 255, .3);
  border-radius: 2px;
  background: rgba(4, 7, 14, .8);
  overflow: hidden;
}

.bar i { display: block; height: 100%; width: 100%; transition: width 180ms linear; }

.bar--base i { background: linear-gradient(90deg, #1d5b8f, #7fd8ff); }
.bar--base i[data-low="true"] {
  background: linear-gradient(90deg, #8f2d22, #ff6a4d);
  animation: base-alarm 900ms var(--ease-soft) infinite;
}

@keyframes base-alarm {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 106, 77, 0); }
  50%      { box-shadow: 0 0 calc(18px * var(--fx)) rgba(255, 106, 77, .95); }
}

.reduce-motion .bar--base i[data-low="true"] { animation: none; }

.bhud__mid { display: grid; gap: .18rem; justify-items: center; text-align: center; }

.bhud__state {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, 1.25rem);
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .9);
}

/* The state machine, shown. If this says PREPARATION while the enemy is
   walking at you, something is wrong and it is visible immediately. */
.bhud__phase {
  padding: .14rem .65rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: clamp(.54rem, 1vw, .64rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  transition: color var(--t-mid) var(--ease-out);
}

/* The music slider. Same rule as the LEAVE button: the HUD ignores the mouse,
   so anything in it that is a control has to opt back in. Deliberately small
   and low-contrast — it is a setting you reach for once, not part of the
   fight. */
.msl {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .45rem;
  opacity: .6;
  transition: opacity var(--t-fast) var(--ease-out);
}

.msl:hover, .msl:focus-within { opacity: 1; }

.msl__label,
.msl__val {
  font-family: var(--font-mono);
  font-size: clamp(.48rem, .85vw, .56rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.msl__val { min-width: 1.6em; text-align: right; color: var(--c-ice); }

.msl__range {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(4.5rem, 9vw, 7rem);
  height: 4px;
  border-radius: 2px;
  background: rgba(127, 216, 255, .25);
  cursor: pointer;
}

.msl__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(4, 12, 22, .8);
  background: var(--c-ice);
  box-shadow: 0 0 calc(8px * var(--fx)) rgba(127, 216, 255, .8);
}

.msl__range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(4, 12, 22, .8);
  background: var(--c-ice);
}

/* The way out. The HUD ignores the mouse so it never eats a click meant for
   the field, so the one thing in it that IS a control has to opt back in. */
.bhud__leave {
  pointer-events: auto;
  margin-top: .3rem;
  padding: .3rem .7rem;
  font-size: clamp(.5rem, .95vw, .58rem);
  letter-spacing: .16em;
  opacity: .72;
  transition: opacity var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.bhud__leave:hover {
  opacity: 1;
  border-color: rgba(255, 138, 114, .7);
  color: #ffb9a3;
  background: rgba(255, 106, 77, .14);
}

.bhud__phase[data-phase="battle"]  { color: #ff8a72; }
.bhud__phase[data-phase="victory"] { color: #7fe0a8; }
.bhud__phase[data-phase="defeat"]  { color: #ff5a4d; }

.bhud__foe { display: grid; gap: .08rem; justify-items: end; text-align: right; }

.bhud__foe-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  line-height: 1;
  color: #ff8a72;
}

/* 4b. Enemy key — bottom right, small, out of the way */
.ekey {
  position: absolute;
  right: clamp(.6rem, 1.6vw, 1.2rem);
  bottom: clamp(.6rem, 1.8vh, 1.1rem);
  width: 12.5rem;
  max-width: 42%;
  padding: .6rem .7rem;
  border: 1px solid rgba(255, 138, 114, .35);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(22, 10, 10, .78);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease-out);
}

/* Stays up through deployment — you are still placing against that formation.
   It goes when the fighting does, since by then the counts are wrong anyway. */
.arena[data-phase="battle"] .ekey,
.arena[data-phase="victory"] .ekey,
.arena[data-phase="defeat"] .ekey { opacity: 0; }

.ekey__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ff8a72;
  margin-bottom: .1rem;
}

.ekey__title {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .4rem;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ekey__title b { color: #ff8a72; font-family: var(--font-display); font-size: .8rem; }

.ekey__list { display: grid; gap: .18rem; }

.ecard {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--c-text);
}

.ecard__art { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.ecard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecard__x { font-weight: 700; color: #ff8a72; }

.ekey__hint {
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 138, 114, .18);
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* 4c. Unit tooltip */
.utip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: .1rem;
  min-width: 10rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(255, 138, 114, .5);
  border-radius: 4px;
  background: rgba(10, 6, 8, .94);
  box-shadow: 0 16px 34px -20px #000;
  pointer-events: none;
  animation: rise 140ms var(--ease-out) both;
}

.utip[data-side="player"] { border-color: rgba(127, 216, 255, .55); }

.utip__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.utip__sub {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .25rem;
}

.utip__rows { display: grid; gap: .1rem; }

.utip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.utip__row b { font-weight: 400; color: var(--c-text); }
.utip__row b[data-level="high"] { color: #ff8a72; }
.utip__row b[data-level="med"]  { color: var(--c-gold); }
.utip__row b[data-level="low"]  { color: var(--c-dim); }

/* 4d. Phase banner */
.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: grid;
  justify-items: center;
  gap: .2rem;
  pointer-events: none;
  opacity: 0;
}

.banner.is-on { animation: banner-sweep 2.1s var(--ease-out); }

@keyframes banner-sweep {
  0%   { opacity: 0; transform: translateY(14px) scale(.94); }
  14%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

.reduce-motion .banner.is-on { animation-duration: 1.2s; }

.banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 rgba(4, 7, 14, .8), 0 0 calc(40px * var(--fx)) rgba(255, 194, 92, .7);
}

.banner__note {
  font-family: var(--font-mono);
  font-size: clamp(.58rem, 1.4vw, .74rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* 4e. Deploy bar */
.deploy {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: clamp(.5rem, 1.6vh, .9rem) clamp(.8rem, 3vw, 2rem) clamp(.7rem, 2vh, 1.1rem);
  background: linear-gradient(0deg, rgba(4, 7, 14, .92), rgba(4, 7, 14, 0));
  animation: rise 380ms var(--ease-out) both;
}

.deploy__hint {
  padding: .3rem .9rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: clamp(.6rem, 1.4vw, .75rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text);
  transition: all var(--t-mid) var(--ease-out);
}

.deploy__hint[data-urgent="true"] {
  background: rgba(255, 194, 92, .16);
  border: 1px solid rgba(255, 194, 92, .55);
  color: #ffe6b0;
  animation: hint-pulse 1.5s var(--ease-soft) infinite;
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
  50%      { box-shadow: 0 0 calc(20px * var(--fx)) rgba(255, 194, 92, .7); }
}

.reduce-motion .deploy__hint[data-urgent="true"] { animation: none; }

.deploy__slots { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

/* The advance gate. Dead until the last man is placed, then it is the only
   thing on screen asking to be pressed. */
.deploy__go { width: min(24rem, 90%); margin-top: .2rem; }

.deploy__go:disabled { opacity: .38; cursor: default; }
.deploy__go:disabled:hover { transform: none; }

.deploy__go:not(:disabled) { animation: advance-ready 1.8s var(--ease-soft) infinite; }

@keyframes advance-ready {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 194, 92, 0); }
  50%      { box-shadow: 0 0 calc(30px * var(--fx)) -6px rgba(255, 194, 92, .8); }
}

.reduce-motion .deploy__go:not(:disabled) { animation: none; }

.slot {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: .55rem;
  min-width: 10rem;
  padding: .6rem .85rem;
  border: 1px solid rgba(127, 216, 255, .28);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(15, 30, 53, .95), rgba(9, 17, 31, .95));
  transition: all var(--t-fast) var(--ease-out);
}

.slot:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(127, 216, 255, .7);
}

.slot.is-active {
  border-color: var(--c-gold);
  background: linear-gradient(150deg, rgba(80, 58, 18, .95), rgba(38, 26, 8, .95));
  box-shadow: 0 0 calc(26px * var(--fx)) -6px rgba(255, 194, 92, .95);
  transform: translateY(-3px);
}

.slot.is-empty, .slot:disabled { opacity: .35; cursor: default; }
.slot.is-empty:hover { transform: none; }

.slot__key {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid rgba(127, 216, 255, .35);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--c-dim);
}

.slot__art { width: 2rem; height: 2rem; object-fit: contain; }

.slot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text);
  text-align: left;
}

.slot__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-gold);
}

.slot.is-active .slot__name { color: #fff; }

/* 4f. Outcome card */
.outcome {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(4, 7, 14, .88);
  backdrop-filter: blur(8px);
  animation: rise 400ms var(--ease-out) both;
}

.outcome__card {
  display: grid;
  gap: .7rem;
  justify-items: center;
  width: min(36rem, 100%);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(7, 13, 26, .96);
  text-align: center;
}

.outcome[data-result="win"]  .outcome__card { color: #7fe0a8; }
.outcome[data-result="lose"] .outcome__card { color: #ff8a72; }

.outcome__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: currentColor;
  text-shadow: 0 0 calc(34px * var(--fx)) currentColor;
}

.outcome__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: -.4rem;
}

.outcome__note {
  font-size: clamp(.85rem, 2vw, 1rem);
  line-height: 1.6;
  color: var(--c-dim);
}

.outcome .btn--huge { margin-top: .3rem; width: min(22rem, 100%); }


/* ---------- 5. Small screens ---------------------------------------------- */

/* Below this a 33/67 split gives neither side enough room, so the shop becomes
   a sheet over the bottom of the field. The field still shows the formation
   above it — the one thing that must never be hidden. */
@media (max-width: 860px) {
  .arena { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .arena[data-phase="battle"],
  .arena[data-phase="victory"],
  .arena[data-phase="defeat"] { grid-template-columns: minmax(0, 1fr); }

  .field { grid-column: 1; grid-row: 1; }

  .shop {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    max-height: 62%;
    border-right: 0;
    border-top: 2px solid rgba(127, 216, 255, .25);
    background: linear-gradient(180deg, rgba(6, 10, 20, .97), #060a14);
  }

  .arena[data-phase="battle"] .shop { transform: translateY(100%); }

  .ekey { bottom: auto; top: 4.4rem; width: 10rem; padding: .45rem .55rem; }
  .ekey__hint { display: none; }

  .tcard__art { width: 2.8rem; height: 2.8rem; }
  .tcard__stats { display: none; }
  .shop__read { display: none; }

  .slot { min-width: 0; padding: .5rem .6rem; gap: .35rem; }
  .slot__name { font-size: .7rem; letter-spacing: .06em; }
  .slot__key { display: none; }
}

/* SHORT SCREENS. A laptop is usually around 720px tall once the browser has
   taken its share, and this column was losing badly at that size: the header
   and footer between them took two thirds of it, leaving the shop about one
   and a half cards tall. You could still scroll to every unit, but choosing an
   army through a slot that small is miserable.

   Nothing is hidden here, only tightened. The terrain briefing is the whole
   reason for reading this panel before buying — hiding it to save space would
   defeat the point of the panel. */
@media (max-height: 820px) {
  .shop__head { padding-top: .7rem; padding-bottom: .6rem; }
  .shop__title { font-size: 1.35rem; }

  .purse { margin-top: .45rem; padding: .35rem .7rem; }
  .purse__value { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

  .ground { margin-top: .45rem; padding: .45rem .6rem; }
  .ground__fx { gap: .1rem; line-height: 1.3; }

  .shop__read { margin-top: .4rem; line-height: 1.35; }

  .shop__foot { padding-top: .55rem; padding-bottom: .65rem; }
}

@media (max-height: 620px) {
  .shop__title { font-size: 1.2rem; }
  .shop__read { display: none; }
  .myarmy__money { display: none; }
}

/* ---------- direct control -------------------------------------------------
   Shown only while the player is driving one of their own troops. Sits in the
   bottom-left of the field, small and out of the way: the point of direct
   control is watching the battlefield, not reading a panel. */
.drive {
  position: absolute;
  left: clamp(.6rem, 2vw, 1.2rem);
  bottom: clamp(.6rem, 2vh, 1.2rem);
  z-index: 5;
  display: grid;
  gap: .3rem;
  min-width: 12rem;
  padding: .55rem .7rem .6rem;
  border: 1px solid rgba(127, 216, 255, .35);
  border-radius: 4px;
  background: rgba(6, 14, 26, .86);
  pointer-events: none;
}

.drive__who {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.drive__who b {
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--c-ice);
}

.drive__hp { display: flex; align-items: center; gap: .4rem; }
.drive__hp .bar { flex: 1 1 auto; height: 9px; }
.bar--drive i { background: linear-gradient(90deg, #1d5b8f, #7fd8ff); }
.bar--drive i[data-low="true"] { background: linear-gradient(90deg, #8f2d22, #ff6a4d); }

.drive__num {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .1em;
  color: var(--c-dim);
}

.drive__keys {
  display: grid;
  gap: .08rem;
  margin-top: .15rem;
  padding-top: .3rem;
  border-top: 1px solid rgba(127, 216, 255, .16);
}

.drive__keys li {
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--c-muted);
}

.drive__keys b {
  display: inline-block;
  min-width: 4.2em;
  color: var(--c-ice);
  font-family: var(--font-mono);
  font-size: .58rem;
}

/* What you gain by taking the controls. One line, in the same green the city
   panel uses for a bonus that is actually in effect. */
.drive__buff {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .08em;
  color: #7fe0a8;
}