/* ===========================
   Worlds Under Siege
   Gameplay Prototype
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#1c1d22;
    color:#f5f5f5;

    font-family:Arial,Helvetica,sans-serif;

}

/* ===========================
   Header
=========================== */

.game-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 24px;

    background:#272a31;

    border-bottom:2px solid #444;

}

.game-header__group{

    display:flex;

    gap:16px;

    align-items:center;

}

.status-box{

    background:#353842;

    padding:10px 14px;

    border-radius:8px;

    min-width:110px;

    text-align:center;

}

.status-box__label{

    display:block;

    font-size:12px;

    color:#bbb;

    margin-bottom:4px;

}

.game-title{

    text-align:center;

}

.game-title h1{

    font-size:30px;

}

.game-title p{

    color:#bfbfbf;

    margin-top:4px;

}

.game-title__back{

    color:#7dc4ff;

    text-decoration:none;

    font-size:14px;

}

.primary-button{

    background:#2f74ff;

    color:white;

    border:none;

    padding:12px 18px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}

.primary-button:hover{

    background:#4b88ff;

}

/* ===========================
   Main Layout
=========================== */

.game-layout{

    display:grid;

    grid-template-columns:250px 1fr 250px;

    gap:20px;

    padding:20px;

}

/* ===========================
   Panels
=========================== */

.side-panel{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.panel-card{

    background:#2b2e37;

    border:2px solid #454851;

    border-radius:10px;

    padding:16px;

}

.panel-card h2{

    margin-bottom:12px;

}

.empty-panel{

    color:#bfbfbf;

    min-height:140px;

}

.game-log{

    font-size:14px;

    line-height:1.5;

}

/* ===========================
   Battlefield
=========================== */

.battlefield-column{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ===========================
   Strongholds
=========================== */

.stronghold-lane {
  display: grid;
  grid-template-columns: repeat(7, 90px);
  gap: 6px;
  justify-content: center;
}

.stronghold {
  grid-column: 3 / 6;

  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 110px;
  padding: 16px;

  border: 2px solid #666;
  border-radius: 10px;
}

.stronghold--enemy {
  background: rgba(90, 45, 45, 0.85);
}

.stronghold--player {
  background: rgba(41, 87, 55, 0.85);
}

.stronghold__owner {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #ddd;
}

.stronghold__health {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===========================
   Complete Battlefield Stage
=========================== */

.battlefield-column {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

.battlefield-stage {
  display: grid;

  grid-template-columns:
    190px
    max-content
    190px;

  grid-template-rows:
    auto
    auto
    auto;

  grid-template-areas:
    "enemy-piles enemy-stronghold enemy-armies"
    "enemy-event battlefield player-event"
    "player-armies player-stronghold player-piles";

  gap: 14px;

  align-items: center;
  justify-content: center;

  min-width: 1080px;
}

/* Stage placement */

.zone-group--enemy-piles {
  grid-area: enemy-piles;
}

.stronghold-lane--enemy {
  grid-area: enemy-stronghold;
}

.army-zones--enemy {
  grid-area: enemy-armies;
}

#enemyEventZone {
  grid-area: enemy-event;
}

.battlefield {
  grid-area: battlefield;
}

#playerEventZone {
  grid-area: player-event;
}

.army-zones--player {
  grid-area: player-armies;
}

.stronghold-lane--player {
  grid-area: player-stronghold;
}

.zone-group--player-piles {
  grid-area: player-piles;
}

/* ===========================
   General Zone Styling
=========================== */

.game-zone {
  appearance: none;

  color: #f5f5f5;
  background: #30343d;

  border: 2px solid #656b78;
  border-radius: 9px;

  font: inherit;
  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease;
}

.game-zone:hover {
  border-color: #ffffff;
  transform: translateY(-1px);
}

.game-zone:focus-visible {
  outline: 3px solid #75a7ff;
  outline-offset: 2px;
}

/* ===========================
   Deck, Discard, Banish
=========================== */

.zone-group {
  display: grid;
  grid-template-columns: repeat(2, 82px);
  grid-template-rows: repeat(2, 76px);
  gap: 7px;
  justify-content: center;
}

.game-zone--pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 82px;
  min-height: 76px;

  font-size: 13px;
  text-align: center;
}

.game-zone--pile span {
  margin-top: 5px;
  color: #cfd3db;
  font-size: 12px;
}

.zone-group--enemy-piles .zone-group__banish {
  grid-column: 1;
  grid-row: 2;
}

.zone-group--player-piles .zone-group__banish {
  grid-column: 1;
  grid-row: 1;
}

.zone-group--player-piles #playerDeckZone {
  grid-column: 1;
  grid-row: 2;
}

.zone-group--player-piles #playerDiscardZone {
  grid-column: 2;
  grid-row: 2;
}

/* ===========================
   Army Zones
=========================== */

.army-zones {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  gap: 6px;
  justify-content: center;
}

.game-zone--army {
  min-height: 82px;
  padding: 7px 4px;

  font-size: 12px;
  text-align: center;
}

/* ===========================
   Event Zones
=========================== */

.game-zone--event {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 115px;
  min-height: 105px;
  padding: 10px;

  justify-self: center;
  text-align: center;
}

.game-zone--event span {
  margin-top: 7px;
  color: #c4c9d2;
  font-size: 12px;
}

/* ===========================
   Stronghold Alignment
=========================== */

.stronghold-lane {
  display: grid;
  grid-template-columns: repeat(7, 90px);
  gap: 6px;
  justify-content: center;
}

.stronghold {
  grid-column: 3 / 6;

  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 105px;
  padding: 16px;

  border: 2px solid #666;
  border-radius: 10px;
}

.stronghold--enemy {
  background: rgba(90, 45, 45, 0.88);
}

.stronghold--player {
  background: rgba(41, 87, 55, 0.88);
}

.stronghold__owner {
  display: block;
  margin-bottom: 4px;

  color: #ddd;
  font-size: 13px;
}

.stronghold__health {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ===========================
   Battlefield Grid
=========================== */

.battlefield {
  display: grid;
  grid-template-columns: repeat(7, 90px);
  grid-template-rows: repeat(6, 90px);
  gap: 6px;
  justify-content: center;
}

.battlefield-cell {
  position: relative;
  background: #4b4f58;
  border: 2px solid #6b707a;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
  cursor: pointer;
  overflow: hidden;
}

.battlefield-cell:hover {
  border-color: #ffffff;
}

/* Enemy recruiting spaces: 3.1, 4.1, 5.1 */

.cell-recruit-enemy {
  background:
    linear-gradient(rgba(130, 35, 35, 0.48), rgba(130, 35, 35, 0.48)),
    #4b4f58;
  border-color: #c45a5a;
}

/* Player recruiting spaces: 3.6, 4.6, 5.6 */

.cell-recruit-player {
  background:
    linear-gradient(rgba(28, 105, 61, 0.5), rgba(28, 105, 61, 0.5)),
    #4b4f58;
  border-color: #55bd7d;
}

.cell-recruit-enemy::after,
.cell-recruit-player::after {
  content: "RECRUIT";
  position: absolute;
  bottom: 3px;
  left: 3px;
  right: 3px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.7;
  pointer-events: none;
}

/* Highlights */

.cell-selected {
  border-color: gold;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

.cell-move {
  background: #2859d9;
  border-color: #72a2ff;
  box-shadow: inset 0 0 16px rgba(74, 132, 255, 0.32);
}

.cell-range {
  background: #a85f13;
  border-color: #ffb34a;
  box-shadow: inset 0 0 16px rgba(255, 153, 38, 0.3);
}

.cell-attack {
  background: #9b2b2b;
}

/* Keep the selected Unit above the hand panel. */
.battlefield-cell.cell-selected {
  position: relative;
  overflow: visible;
  z-index: 200;
}

/* Raise the portrait above nearby UI. */
.battlefield-cell.cell-selected .unit-token {
  position: relative;
  z-index: 201;
}

/* Raise the stat controls above everything. */
.selected-unit-controls {
  position: absolute;
  inset: 0;
  z-index: 202;
  pointer-events: none;
}

.selected-unit-controls__row {
  pointer-events: auto;
  z-index: 203;
}

.selected-unit-control {
  position: relative;
  z-index: 204;
}

/* =========================================================
   Selected Unit Action Menu
========================================================= */

.unit-action-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 50;

  display: flex;
  gap: 4px;

  width: max-content;
  padding: 4px;

  background: rgba(18, 20, 26, 0.97);
  border: 1px solid #747b89;
  border-radius: 8px;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  transform: translateX(-50%);
  animation: unit-action-menu-in 140ms ease-out;
}

/* Small pointer connecting the menu to the selected Unit. */
.unit-action-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;

  width: 8px;
  height: 8px;

  background: rgba(18, 20, 26, 0.97);
  border-right: 1px solid #747b89;
  border-bottom: 1px solid #747b89;

  transform: translate(-50%, -50%) rotate(45deg);
}

.unit-action-menu__button {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-width: 68px;
  min-height: 28px;
  padding: 5px 9px;

  color: #d8dce5;
  background: #30343d;
  border: 1px solid #555c69;
  border-radius: 5px;

  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  cursor: pointer;
  user-select: none;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.unit-action-menu__button:hover,
.unit-action-menu__button:focus-visible {
  color: #fff;
  border-color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.unit-action-menu__button--move.is-active {
  color: #fff;
  background: #2859d9;
  border-color: #7dadff;
  box-shadow: 0 0 10px rgba(63, 123, 255, 0.65);
}

.unit-action-menu__button--attack.is-active {
  color: #fff;
  background: #a85f13;
  border-color: #ffb34a;
  box-shadow: 0 0 10px rgba(255, 145, 31, 0.62);
}

.unit-action-menu__button.is-disabled {
  color: #777d88;
  background: #292c33;
  border-color: #424650;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

@keyframes unit-action-menu-in {
  from {
    opacity: 0;
    transform: translate(-50%, 5px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unit-action-menu {
    animation: none;
  }
}

  /* ===========================
   Arena-Style Hand
=========================== */

.hand-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;

  display: flex;
  flex-direction: column;
  align-items: center;

  pointer-events: none;
}

.hand-dock__toggle {
  pointer-events: auto;

  margin-bottom: -1px;
  padding: 7px 18px;

  color: #fff;
  background: #252a34;

  border: 1px solid #626978;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;

  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hand-panel {
  width: min(100%, 1100px);
  min-height: 185px;
  padding: 10px 18px 14px;

  background:
    linear-gradient(
      to top,
      rgba(15, 17, 22, 0.98),
      rgba(28, 31, 39, 0.94)
    );

  border: 1px solid #555d6d;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;

  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);

  pointer-events: auto;
}

.hand-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 38px;
  margin-bottom: 4px;
}

.hand-panel__header h2 {
  margin: 0;
  font-size: 16px;
}

.hand-panel__header p {
  margin: 2px 0 0;
  color: #bfc5d0;
  font-size: 12px;
}

.hand-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  min-height: 130px;
  padding: 8px 28px 0;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-width: thin;
}

.hand-card {
  position: relative;
  flex: 0 0 92px;

  width: 92px;
  height: 128px;

  margin-left: -18px;

  color: #fff;
  background:
    linear-gradient(145deg, #454b59, #242833);

  border: 2px solid #777f90;
  border-radius: 9px;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);

  cursor: pointer;

  transform-origin: bottom center;
  transition:
    transform 0.15s ease,
    margin 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hand-card:first-child {
  margin-left: 0;
}

.hand-card:hover,
.hand-card:focus-visible,
.hand-card.is-selected {
  z-index: 5;

  margin-left: 0;
  margin-right: 18px;

  border-color: #f2d76b;

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(242, 215, 107, 0.45);

  transform: translateY(-30px) scale(1.35);
}

.hand-card__name {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 7px;

  padding: 4px;

  background: rgba(0, 0, 0, 0.68);
  border-radius: 5px;

  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

.hand-card__cost {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 4;

  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;

  background: #000;
  border: 2px solid #fff;
  border-radius: 50%;

  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

.hand-dock.is-collapsed .hand-panel {
  display: none;
} 

    



/* ===========================
   Responsive
=========================== */

@media (max-width:1100px){

.game-layout{

grid-template-columns:1fr;

}

.side-panel{

order:2;

}

.battlefield-column{

order:1;

}
   @media (max-width: 760px) {
  .battlefield-column {
    overflow-x: auto;
  }

  .battlefield {
    grid-template-columns: repeat(7, 68px);
    grid-template-rows: repeat(6, 68px);
    min-width: max-content;
    justify-content: start;
  }
}

}
@media (max-width: 760px) {
  .battlefield-column {
    overflow-x: auto;
  }

  .battlefield {
    grid-template-columns: repeat(7, 68px);
    grid-template-rows: repeat(6, 68px);
    min-width: max-content;
    justify-content: start;
  }

  .stronghold-lane {
    grid-template-columns: repeat(7, 68px);
    min-width: max-content;
    justify-content: start;
  }

  .stronghold {
    min-height: 90px;
  }
}

@media (max-width: 760px) {
  .game-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .battlefield-column {
    overflow-x: auto;
  }

  .battlefield-stage {
    justify-content: start;
    min-width: 910px;

    grid-template-columns:
      145px
      max-content
      145px;

    gap: 10px;
  }

  .battlefield {
    grid-template-columns: repeat(7, 68px);
    grid-template-rows: repeat(6, 68px);
    min-width: max-content;
    justify-content: start;
  }

  .stronghold-lane {
    grid-template-columns: repeat(7, 68px);
    min-width: max-content;
    justify-content: start;
  }

  .stronghold {
    min-height: 86px;
    padding: 10px;
  }

  .zone-group {
    grid-template-columns: repeat(2, 62px);
    grid-template-rows: repeat(2, 64px);
  }

  .game-zone--pile {
    min-width: 62px;
    min-height: 64px;
    font-size: 11px;
  }

  .army-zones {
    grid-template-columns: repeat(3, 43px);
  }

  .game-zone--army {
    min-height: 68px;
    font-size: 10px;
  }

  .game-zone--event {
    width: 95px;
    min-height: 88px;
    font-size: 11px;
  }
}


.hand-panel {
  min-height: 150px;
  padding: 8px 6px 10px;
}

.hand-panel__header {
  padding: 0 8px;
}

.hand-fan {
  justify-content: flex-start;
  min-height: 105px;
  padding: 7px 10px 0;
}

.hand-card {
  flex-basis: 72px;
  width: 72px;
  height: 100px;
  margin-left: -10px;
}

.hand-card:hover,
.hand-card:focus-visible,
.hand-card.is-selected {
  margin-right: 10px;
  transform: translateY(-18px) scale(1.22);
}
/* =========================================================
   Full-Screen Desktop Game Layout
   Keep this section at the bottom of game.css.
========================================================= */

:root {
  --top-bar-height: clamp(48px, 7vh, 68px);
  --hand-height: clamp(130px, 20vh, 190px);
  --screen-gap: clamp(4px, 0.7vh, 10px);

  /*
   * Cell size is limited by both screen height and width.
   * Height matters most because the board has six rows.
   */
  --battlefield-cell-size: min(
    8.2vh,
    7.2vw,
    82px
  );
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100dvh;
}

/*
 * Replace .game-page with your outermost gameplay wrapper
 * only when your HTML uses a different class name.
 */
.game-page {
  display: grid;
  grid-template-rows: var(--top-bar-height) minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

/* Header/status area */

.game-header,
.status-bar {
  min-height: 0;
  max-height: var(--top-bar-height);
}

/*
 * The main game area ends above the hand.
 * This prevents the hand from covering the player zones.
 */
.game-layout {
  box-sizing: border-box;

  display: grid;
  grid-template-columns:
    minmax(150px, 18vw)
    minmax(0, 1fr)
    minmax(150px, 18vw);

  gap: var(--screen-gap);

  width: 100%;
  height: calc(
    100dvh -
    var(--top-bar-height) -
    var(--hand-height)
  );

  min-height: 0;
  padding: var(--screen-gap);

  overflow: hidden;
}

/* Side information panels */

.game-sidebar,
.sidebar,
.left-panel,
.right-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

/*
 * The page itself never scrolls. A long game log may scroll
 * inside its own panel instead.
 */
#gameLog {
  min-height: 0;
  overflow-y: auto;
}

/* =========================================================
   Battlefield Area
========================================================= */

.battlefield-column {
  display: grid;
  place-items: center;

  width: 100%;
  min-width: 0;
  min-height: 0;

  padding: 0;
  overflow: hidden;
}

.battlefield-stage {
  display: grid;

  grid-template-columns:
    calc(var(--battlefield-cell-size) * 1.65)
    calc(var(--battlefield-cell-size) * 7 + var(--screen-gap) * 6)
    calc(var(--battlefield-cell-size) * 1.65);

  grid-template-rows:
    calc(var(--battlefield-cell-size) * 1.05)
    calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
    calc(var(--battlefield-cell-size) * 1.05);

  grid-template-areas:
    "enemy-piles enemy-stronghold enemy-armies"
    "enemy-event battlefield player-event"
    "player-armies player-stronghold player-piles";

  gap: var(--screen-gap);
  align-items: center;
  justify-content: center;

  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Battlefield grid */

.battlefield {
  grid-area: battlefield;

  display: grid;
  grid-template-columns:
    repeat(7, var(--battlefield-cell-size));
  grid-template-rows:
    repeat(6, var(--battlefield-cell-size));

  gap: var(--screen-gap);

  width: max-content;
  height: max-content;
  min-width: 0;
}

/* Battlefield spaces */

.battlefield-cell {
  box-sizing: border-box;

  width: var(--battlefield-cell-size);
  height: var(--battlefield-cell-size);
  min-width: 0;
  min-height: 0;

  padding: clamp(2px, 0.4vh, 6px);
  overflow: hidden;
}

/* Unit tokens scale with the spaces */

.battlefield-cell [data-unit-id] {
  box-sizing: border-box;
  font-size: clamp(8px, 1.1vh, 12px) !important;
  padding: clamp(2px, 0.5vh, 6px) !important;
}

/* =========================================================
   Strongholds
========================================================= */

.stronghold-lane {
  display: grid;
  grid-template-columns:
    repeat(7, var(--battlefield-cell-size));

  gap: var(--screen-gap);

  width: max-content;
  min-width: 0;
}

.stronghold {
  grid-column: 3 / 6;

  box-sizing: border-box;

  min-width: 0;
  min-height: 0;
  height: calc(var(--battlefield-cell-size) * 1.05);

  padding: clamp(5px, 0.8vh, 12px);

  font-size: clamp(10px, 1.4vh, 15px);
  overflow: hidden;
}

.stronghold__owner {
  font-size: clamp(8px, 1.1vh, 12px);
}

/* =========================================================
   Deck, Discard, Banish, Army, and Event Zones
========================================================= */

.zone-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: clamp(3px, 0.4vh, 6px);

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.army-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(3px, 0.4vh, 6px);

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.game-zone {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.game-zone--pile,
.game-zone--army {
  width: 100%;
  height: 100%;

  padding: clamp(2px, 0.4vh, 6px);

  font-size: clamp(8px, 1.1vh, 12px);
}

.game-zone--event {
  box-sizing: border-box;

  width: calc(var(--battlefield-cell-size) * 1.3);
  height: calc(var(--battlefield-cell-size) * 1.65);
  min-width: 0;
  min-height: 0;

  padding: clamp(3px, 0.6vh, 8px);

  font-size: clamp(8px, 1.15vh, 12px);
}

/* Preserve stage positions */

.zone-group--enemy-piles {
  grid-area: enemy-piles;
}

.stronghold-lane--enemy {
  grid-area: enemy-stronghold;
}

.army-zones--enemy {
  grid-area: enemy-armies;
}

.event-column--enemy {
  grid-area: enemy-event;
}

.event-column--player {
  grid-area: player-event;
}
.event-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: clamp(4px, 0.7vh, 8px);

  min-width: 0;
  min-height: 0;
}

.battlefield-energy {
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: calc(var(--battlefield-cell-size) * 1.3);
  padding: clamp(4px, 0.6vh, 8px);

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;

  background: rgba(8, 14, 25, 0.88);

  font-size: clamp(9px, 1.2vh, 13px);
}

.battlefield-energy strong {
  font-size: clamp(11px, 1.5vh, 16px);
}

.battlefield-energy--enemy {
  border-color: rgba(220, 80, 80, 0.65);
}

.battlefield-energy--player {
  border-color: rgba(80, 150, 230, 0.7);
}

.army-zones--player {
  grid-area: player-armies;
}

.stronghold-lane--player {
  grid-area: player-stronghold;
}

.zone-group--player-piles {
  grid-area: player-piles;
}

/* =========================================================
   Hand
========================================================= */

.hand-dock {
  position: fixed;
  z-index: 50;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: var(--hand-height);

  display: flex;
flex-direction: column;
align-items: flex-start;

overflow: visible;
pointer-events: none;
}

.hand-panel {
  box-sizing: border-box;

  margin: 0 auto;

  width: min(100%, 1180px);
  height: calc(var(--hand-height) - 25px);
  min-height: 0;

  padding:
    clamp(4px, 0.6vh, 9px)
    clamp(8px, 1.4vw, 20px);

  overflow: visible;
  pointer-events: auto;
}

.hand-panel__header {
  min-height: 24px;
  height: clamp(28px, 4vh, 38px);
  margin: 0;
}
.hand-dock__toggle {
  align-self: flex-start;

  margin-left: 24px;
  margin-bottom: -1px;
}

.hand-panel__header h2 {
  font-size: clamp(12px, 1.6vh, 16px);
}

.hand-fan {
  box-sizing: border-box;

  min-height: 0;
  height: calc(100% - 38px);

  padding: 4px 24px 0;

  overflow-x: auto;
  overflow-y: visible;
}

.hand-card {
  flex: 0 0 auto;

  width: clamp(62px, 7.5vh, 92px);
  height: clamp(88px, 10.5vh, 128px);

  margin-left: clamp(-18px, -1.3vw, -8px);
}

.hand-card:hover,
.hand-card:focus-visible,
.hand-card.is-selected {
  transform:
    translateY(clamp(-26px, -3vh, -16px))
    scale(1.18);
}

/* Collapsed hand only leaves its button visible */

.hand-dock.is-collapsed {
  height: 28px;
}

.hand-dock.is-collapsed .hand-panel {
  display: none;
}

/* =========================================================
   Short Laptop Screens
========================================================= */

@media (max-height: 760px) and (min-width: 761px) {
  :root {
    --top-bar-height: 46px;
    --hand-height: 126px;
    --battlefield-cell-size: min(7.7vh, 6.3vw, 68px);
  }

  .game-layout {
    grid-template-columns:
      minmax(125px, 16vw)
      minmax(0, 1fr)
      minmax(125px, 16vw);
  }

  .hand-panel__header {
    height: 28px;
  }

  .hand-fan {
    height: calc(100% - 28px);
  }
}

/* =========================================================
   Narrow Desktop Windows
========================================================= */

@media (max-width: 1100px) and (min-width: 761px) {
  :root {
    --battlefield-cell-size: min(7.8vh, 6vw, 68px);
  }

  .game-layout {
    grid-template-columns:
      minmax(115px, 15vw)
      minmax(0, 1fr)
      minmax(115px, 15vw);
  }
}
.hand-fan {
  justify-content: safe center;
}

/* =========================================================
   Laptop Layout Polish
   Keep this section at the very bottom of game.css.
========================================================= */

.game-header {
  box-sizing: border-box;
  height: var(--top-bar-height);
  min-height: var(--top-bar-height);
  max-height: none;
  padding: clamp(3px, 0.55vh, 7px) clamp(10px, 1.5vw, 20px);
  overflow: visible;
}

.game-title {
  min-width: 0;
  line-height: 1;
}

.game-title h1 {
  margin: 0;
  font-size: clamp(21px, 3.4vh, 30px);
  line-height: 1;
}

.game-title p {
  margin-top: clamp(2px, 0.35vh, 4px);
  font-size: clamp(11px, 1.8vh, 15px);
  line-height: 1.1;
}

.game-title__back {
  display: block;
  font-size: clamp(10px, 1.45vh, 13px);
  line-height: 1;
}

.side-panel {
  min-height: 0;
  overflow: hidden;
}

.panel-card {
  min-height: 0;
}

.panel-card:has(#gameLog) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-card:has(#gameLog) h2 {
  flex: 0 0 auto;
}

#gameLog,
.game-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

.hand-panel {
  overflow: visible;
}

.hand-fan {
  align-items: flex-end;
  padding-top: clamp(16px, 2.4vh, 24px);
  overflow-x: auto;
  overflow-y: visible;
}

.hand-card {
  overflow: visible;
}

@media (max-height: 760px) and (min-width: 761px) {
  :root {
    --top-bar-height: 54px;
    --hand-height: 132px;
    --battlefield-cell-size: min(7.25vh, 5.9vw, 64px);
  }

  .game-header {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .game-title h1 {
    font-size: clamp(20px, 3.1vh, 25px);
  }

  .game-title p {
    font-size: clamp(10px, 1.65vh, 13px);
  }

  .hand-panel {
    height: calc(var(--hand-height) - 24px);
  }

  .hand-panel__header {
    height: 24px;
    min-height: 24px;
  }

  .hand-fan {
    height: calc(100% - 24px);
    padding-top: 18px;
  }

  .hand-card {
    width: clamp(60px, 7vh, 78px);
    height: clamp(84px, 9.8vh, 108px);
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    transform: translateY(-12px) scale(1.12);
  }

  .battlefield-stage {
    grid-template-rows:
      calc(var(--battlefield-cell-size) * 0.92)
      calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
      calc(var(--battlefield-cell-size) * 0.92);
  }

  .stronghold {
    height: calc(var(--battlefield-cell-size) * 0.92);
    padding: clamp(3px, 0.55vh, 7px);
  }

  .game-layout {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  :root {
    --top-bar-height: 50px;
    --hand-height: 118px;
    --battlefield-cell-size: min(6.85vh, 5.65vw, 60px);
    --screen-gap: 4px;
  }

  .hand-fan {
    padding-top: 14px;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    transform: translateY(-9px) scale(1.08);
  }
}

/* =========================================================
   Clipping Correction Pass
   Keeps complete pile/army rows visible and gives the hand
   enough internal headroom on laptop-height screens.
========================================================= */

/* The top and bottom stage rows contain two-row pile groups,
   so they must be taller than a single battlefield cell. */
.battlefield-stage {
  grid-template-rows:
    calc(var(--battlefield-cell-size) * 1.55)
    calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
    calc(var(--battlefield-cell-size) * 1.55);
}

/* Prevent labels beneath army slots from being clipped. */
.army-zones,
.zone-group,
.stronghold-lane {
  overflow: visible;
}

.game-zone--army,
.game-zone--pile {
  line-height: 1.05;
}

/* On desktop, let raised cards extend upward freely. Using
   overflow-x:auto forces overflow-y to become auto as well,
   which was clipping the tops of the cards. */
.hand-fan {
  overflow: visible;
  padding-top: 24px;
}

.hand-panel {
  overflow: visible;
}

@media (max-height: 820px) and (min-width: 761px) {
  :root {
    --top-bar-height: 54px;
    --hand-height: 146px;
    --battlefield-cell-size: min(7vh, 5.5vw, 58px);
    --screen-gap: 4px;
  }

  .battlefield-stage {
    grid-template-rows:
      calc(var(--battlefield-cell-size) * 1.55)
      calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
      calc(var(--battlefield-cell-size) * 1.55);
  }

  .zone-group {
    gap: 3px;
  }

  .game-zone--pile,
  .game-zone--army {
    padding: 2px;
    font-size: clamp(7px, 1vh, 10px);
  }

  .game-zone--pile span {
    margin-top: 2px;
    font-size: clamp(7px, 0.95vh, 10px);
  }

  .hand-panel {
    height: calc(var(--hand-height) - 25px);
    padding-top: 4px;
  }

  .hand-panel__header {
    height: 24px;
    min-height: 24px;
  }

  .hand-fan {
    height: calc(100% - 24px);
    min-height: 0;
    padding: 20px 16px 2px;
    overflow: visible;
  }

  .hand-card {
    width: clamp(58px, 6.8vh, 74px);
    height: clamp(82px, 9.4vh, 102px);
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    transform: translateY(-8px) scale(1.08);
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  :root {
    --top-bar-height: 50px;
    --hand-height: 132px;
    --battlefield-cell-size: min(6.55vh, 5.15vw, 54px);
    --screen-gap: 3px;
  }

  .battlefield-stage {
    grid-template-rows:
      calc(var(--battlefield-cell-size) * 1.5)
      calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
      calc(var(--battlefield-cell-size) * 1.5);
  }

  .hand-fan {
    padding-top: 17px;
  }

  .hand-card {
    width: clamp(54px, 6.3vh, 68px);
    height: clamp(76px, 8.8vh, 94px);
  }
}

/* =========================================================
   Army Tile Polish
   Make Army slots compact tiles instead of tall narrow bars.
========================================================= */

.army-zones {
  align-self: center;
  justify-self: center;
  grid-template-columns: repeat(3, var(--army-tile-size));
  grid-auto-rows: var(--army-tile-size);
  width: max-content;
  height: max-content;
  gap: clamp(4px, 0.55vh, 7px);
}

:root {
  --army-tile-size: clamp(46px, 6.2vh, 64px);
}

.game-zone--army {
  width: var(--army-tile-size);
  height: var(--army-tile-size);
  min-width: var(--army-tile-size);
  min-height: var(--army-tile-size);
  padding: 5px 3px;
  border-radius: 8px;
  font-size: clamp(8px, 1.05vh, 11px);
  line-height: 1.05;
}

/* Remove the visible Event label text that was appearing beneath the Armies. */
.game-zone--event {
  font-size: 0;
}

.game-zone--event span {
  display: none;
}

@media (max-height: 760px) and (min-width: 761px) {
  :root {
    --army-tile-size: clamp(40px, 5.7vh, 52px);
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  :root {
    --army-tile-size: clamp(36px, 5.25vh, 46px);
  }
}

/* =========================================================
   Minimal Match HUD, Active Stronghold, and Exit Confirmation
========================================================= */

:root {
  --top-bar-height: 0px;
}

.game-header {
  display: none !important;
}

.game-layout {
  height: calc(100dvh - var(--hand-height));
}

.selected-unit-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.selected-unit-actions .primary-button {
  width: 100%;
  padding: 10px 14px;
}

.turn-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #555d6d;
  border-radius: 8px;
  background: #242832;
}

.turn-indicator span {
  color: #bfc5d0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.turn-indicator strong {
  font-size: 20px;
}

.stronghold {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.stronghold--player.is-active-player {
  border-color: #72b7ff;
  box-shadow:
    0 0 0 2px rgba(114, 183, 255, 0.35),
    0 0 22px rgba(56, 145, 255, 0.9);
  filter: brightness(1.12);
}

.stronghold--enemy.is-active-player {
  border-color: #ff7777;
  box-shadow:
    0 0 0 2px rgba(255, 119, 119, 0.35),
    0 0 22px rgba(230, 56, 56, 0.9);
  filter: brightness(1.12);
}

.exit-game-button {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 120;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 13px;
  color: #fff;
  background: #a92e35;
  border: 1px solid #ff737a;
  border-radius: 8px;

  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
}

.exit-game-button:hover,
.exit-game-button:focus-visible {
  background: #c23a42;
  border-color: #fff;
}

.exit-modal[hidden] {
  display: none;
}

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.exit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(3px);
}

.exit-modal__dialog {
  position: relative;
  width: min(92vw, 420px);
  padding: 24px;
  background: #292d37;
  border: 2px solid #626978;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.exit-modal__dialog h2 {
  margin-bottom: 10px;
}

.exit-modal__dialog p {
  color: #d2d6de;
  line-height: 1.5;
}

.exit-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.modal-button {
  min-width: 100px;
  padding: 10px 16px;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.modal-button--cancel {
  background: #414754;
  border: 1px solid #747d8e;
}

.modal-button--confirm {
  background: #a92e35;
  border: 1px solid #ff737a;
}

.modal-button:hover,
.modal-button:focus-visible {
  border-color: #fff;
  filter: brightness(1.12);
}

body.modal-open {
  overflow: hidden;
}

@media (max-height: 760px) and (min-width: 761px) {
  :root {
    --top-bar-height: 0px;
  }

  .game-layout {
    height: calc(100dvh - var(--hand-height));
  }
}

/* =========================================================
   Phone / Portrait Layout
   The desktop battlefield stays unchanged. On phones the page
   becomes vertically scrollable and the battlefield scrolls sideways.
========================================================= */

@media (max-width: 760px) {
  :root {
    --top-bar-height: 0px;
    --hand-height: auto;
    --screen-gap: 5px;
    --battlefield-cell-size: 54px;
    --army-tile-size: 48px;
  }

  html,
  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .game-page {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .game-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8px;

    overflow: visible;
  }

  /* Put the board first, then the information panels. */
  .battlefield-column {
    order: 1;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0 0 8px;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .game-layout > .side-panel:first-of-type {
    order: 2;
  }

  .game-layout > .side-panel:last-of-type {
    order: 3;
  }

  .side-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  .panel-card {
    width: 100%;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
  }

  .panel-card h2 {
    margin-bottom: 8px;
    font-size: 19px;
  }

  .empty-panel,
  .card-preview,
  .controls-help,
  #selectedUnitPanel {
    min-height: 0;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* The log receives a practical phone height and scrolls internally. */
  .panel-card:has(#gameLog) {
    display: flex;
    max-height: 260px;
  }

  #gameLog,
  .game-log {
    max-height: 190px;
    overflow-y: auto;
  }

  /* Preserve the complete board, but let the phone viewport pan sideways. */
  .battlefield-stage {
    grid-template-columns:
      96px
      calc(var(--battlefield-cell-size) * 7 + var(--screen-gap) * 6)
      96px;

    grid-template-rows:
      104px
      calc(var(--battlefield-cell-size) * 6 + var(--screen-gap) * 5)
      104px;

    gap: var(--screen-gap);
    width: max-content;
    min-width: max-content;
    max-width: none;
    margin: 0;
    justify-content: start;
  }

  .battlefield {
    grid-template-columns: repeat(7, var(--battlefield-cell-size));
    grid-template-rows: repeat(6, var(--battlefield-cell-size));
    min-width: max-content;
  }

  .battlefield-cell {
    width: var(--battlefield-cell-size);
    height: var(--battlefield-cell-size);
    border-radius: 7px;
  }

  .stronghold-lane {
    grid-template-columns: repeat(7, var(--battlefield-cell-size));
    min-width: max-content;
  }

  .stronghold {
    height: 72px;
    padding: 7px;
    font-size: 11px;
  }

  .stronghold__owner {
    font-size: 9px;
  }

  .zone-group {
    width: 96px;
    height: 104px;
    grid-template-columns: repeat(2, 44px);
    grid-template-rows: repeat(2, 48px);
    gap: 5px;
  }

  .game-zone--pile {
    width: 44px;
    height: 48px;
    min-width: 44px;
    min-height: 48px;
    padding: 2px;
    font-size: 8px;
  }

  .army-zones {
    width: 96px;
    height: 104px;
    grid-template-columns: repeat(2, 44px);
    grid-auto-rows: 48px;
    align-content: center;
    justify-content: center;
    gap: 5px;
  }

  .game-zone--army {
    width: 44px;
    height: 48px;
    min-width: 44px;
    min-height: 48px;
    padding: 2px;
    font-size: 8px;
  }

  .event-column {
    width: 96px;
    gap: 5px;
  }

  .game-zone--event {
    width: 62px;
    height: 76px;
  }

  .battlefield-energy {
    width: 72px;
    padding: 4px;
    font-size: 9px;
  }

  /* Hand becomes part of the document instead of covering the phone screen. */
  .hand-dock {
    position: relative;
    inset: auto;
    z-index: 20;

    order: 4;
    width: 100%;
    height: auto;
    margin-top: 6px;

    overflow: visible;
    pointer-events: auto;
  }

  .hand-dock__toggle {
    padding: 6px 16px;
    font-size: 14px;
  }

  .hand-panel {
    width: 100%;
    height: auto;
    min-height: 150px;
    padding: 8px 8px 12px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .hand-panel__header {
    height: auto;
    min-height: 34px;
    padding: 0 4px;
  }

  .hand-panel__header h2 {
    font-size: 14px;
  }

  .hand-panel__header p,
  .hand-panel__header span {
    font-size: 12px;
  }

  .hand-fan {
    justify-content: flex-start;
    align-items: flex-end;

    width: 100%;
    height: 112px;
    min-height: 112px;
    padding: 10px 8px 4px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .hand-card {
    flex: 0 0 72px;
    width: 72px;
    height: 100px;
    margin-left: -8px;
  }

  .hand-card:first-child {
    margin-left: 0;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    margin-left: -4px;
    margin-right: 6px;
    transform: translateY(-5px) scale(1.04);
  }

  .hand-card__stats {
    font-size: 9px;
    line-height: 1.15;
  }

  .hand-card__name {
    font-size: 9px;
  }

  .hand-card__cost {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .hand-dock.is-collapsed {
    height: auto;
  }

  /* Keep Exit accessible without covering cards. */
  .exit-game-button {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    bottom: auto;
    padding: 7px 10px;
    font-size: 13px;
    opacity: 0.94;
  }

  .exit-modal {
    padding: 14px;
  }

  .exit-modal__dialog {
    width: min(94vw, 380px);
    padding: 20px 16px;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  :root {
    --battlefield-cell-size: 50px;
  }

  .battlefield-stage {
    grid-template-columns:
      88px
      calc(var(--battlefield-cell-size) * 7 + var(--screen-gap) * 6)
      88px;
  }

  .zone-group,
  .army-zones,
  .event-column {
    width: 88px;
  }

  .panel-card {
    padding: 10px;
  }
}
/* /* =========================================================
   Mobile Unsupported Screen
   Keep this at the very bottom of game.css
========================================================= */

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body > * {
    visibility: hidden;
    pointer-events: none;
  }

  body::before {
    content:
      "Worlds Under Siege\A\A"
      "Mobile play is not supported yet.\A\A"
      "Please open the game on a desktop or larger tablet.";

    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 32px;

    color: #ffffff;
    background:
      radial-gradient(circle at center, #303642, #17191f 72%);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    white-space: pre-wrap;

    visibility: visible;
    pointer-events: auto;
  }
}

/* =========================================================
   Recruiting Selection Highlight
========================================================= */

.battlefield-cell.cell-recruit-available {
  z-index: 2;
  border-color: #ffe36e;
  box-shadow:
    0 0 0 2px rgba(255, 227, 110, 0.35),
    0 0 18px rgba(255, 227, 110, 0.95),
    inset 0 0 18px rgba(255, 227, 110, 0.22);
  animation: recruit-space-pulse 1.15s ease-in-out infinite alternate;
}

.battlefield-cell.cell-recruit-available::before {
  content: "DEPLOY";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  color: #fff4b0;
  font-size: clamp(7px, 1vh, 10px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

@keyframes recruit-space-pulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .battlefield-cell.cell-recruit-available {
    animation: none;
  }
}


/* =========================================================
   Playable Cards, Selected Unit Lift, Active Hand Glow
========================================================= */

.hand-card.is-playable:not(.is-selected) {
  border-color: #7df3a0;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(74, 222, 128, 0.18),
    0 0 16px rgba(34, 197, 94, 0.62);
  filter: brightness(1.08);
  animation: playable-card-glow 1.35s ease-in-out infinite alternate;
}

.hand-card.is-unplayable:not(.is-selected) {
  filter: saturate(0.62) brightness(0.78);
  opacity: 0.78;
}

@keyframes playable-card-glow {
  from {
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.45),
      0 0 0 2px rgba(74, 222, 128, 0.12),
      0 0 10px rgba(34, 197, 94, 0.42);
  }

  to {
    box-shadow:
      0 9px 18px rgba(0, 0, 0, 0.52),
      0 0 0 2px rgba(134, 239, 172, 0.3),
      0 0 22px rgba(34, 197, 94, 0.82);
  }
}

.unit-token {
  position: relative;
  z-index: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  transform-origin: center bottom;
}

.battlefield-cell.cell-selected {
  z-index: 9;
  overflow: visible;
}

.unit-token.is-selected-unit {
  z-index: 8;
  transform: scale(1.03);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.58),
    0 0 16px rgba(255, 222, 92, 0.72);
  filter: brightness(1.12);
  animation: selected-unit-float 1s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes selected-unit-float {
  from {
    transform: scale(1.02);
    box-shadow:
      0 8px 14px rgba(0, 0, 0, 0.48),
      0 0 12px rgba(255, 222, 92, 0.58);
  }
  to {
    transform: scale(1.04);
    box-shadow:
      0 13px 22px rgba(0, 0, 0, 0.62),
      0 0 19px rgba(255, 222, 92, 0.82);
  }
}

.hand-panel {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.hand-panel.is-player-one-turn {
  border-color: #72b7ff;
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(114, 183, 255, 0.28),
    0 0 24px rgba(56, 145, 255, 0.78);
  filter: brightness(1.06);
}

.hand-panel.is-player-two-turn {
  border-color: #ff7777;
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(255, 119, 119, 0.28),
    0 0 24px rgba(230, 56, 56, 0.78);
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .hand-card.is-playable:not(.is-selected),
  .unit-token.is-selected-unit {
    animation: none;
  }
}

/* =========================================================
   Recruiting Polish: flight, preview, spawn, feedback
   Keep this section at the bottom of game.css.
========================================================= */

body.is-game-animating,
body.is-game-animating * {
  cursor: wait !important;
}

body.is-game-animating .battlefield-cell,
body.is-game-animating .hand-card,
body.is-game-animating #endTurnButton,
body.is-game-animating .hand-dock__toggle {
  pointer-events: none !important;
}

.hand-card {
  animation: hand-card-settle 220ms ease both;
}

.hand-card.is-being-recruited {
  opacity: 0.18;
  transform: translateY(-18px) scale(0.96);
  filter: saturate(0.55);
}

.recruit-flying-card {
  position: fixed !important;
  z-index: 10000 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.72),
    0 0 26px rgba(255, 222, 117, 0.5) !important;
}

.cell-recruit-available {
  isolation: isolate;
}

.recruit-ghost {
  position: absolute;
  inset: 7px;
  z-index: 4;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding: 7px 5px;
  border: 2px dashed rgba(255, 255, 255, 0.72);
  border-radius: 8px;

  font-size: clamp(8px, 1vh, 11px);
  line-height: 1.15;
  text-align: center;

  opacity: 0;
  transform: translateY(7px) scale(0.86);
  transition:
    opacity 150ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1),
    filter 180ms ease;

  filter: blur(1px) saturate(0.75);
  pointer-events: none;
}

.recruit-ghost span {
  font-size: 0.82em;
  opacity: 0.85;
}

.recruit-ghost--player-1 {
  background: linear-gradient(145deg, rgba(23, 77, 137, 0.82), rgba(15, 41, 72, 0.82));
  box-shadow: 0 0 18px rgba(72, 161, 255, 0.42);
}

.recruit-ghost--player-2 {
  background: linear-gradient(145deg, rgba(138, 41, 41, 0.82), rgba(72, 20, 20, 0.82));
  box-shadow: 0 0 18px rgba(255, 84, 84, 0.42);
}

.cell-recruit-available:hover .recruit-ghost,
.cell-recruit-available:focus-visible .recruit-ghost,
.cell-recruit-available.is-recruit-preview .recruit-ghost {
  opacity: 0.72;
  transform: translateY(0) scale(0.94);
  filter: blur(0) saturate(1);
}

.unit-token.unit-spawn {
  animation: unit-materialize 560ms cubic-bezier(.16,.9,.24,1.2) both;
  transform-origin: center center;
}

.recruit-flash {
  z-index: 8;
  animation: recruit-tile-flash 620ms ease-out both;
}

.recruit-flash--player-one {
  --recruit-flash-color: rgba(77, 171, 255, 0.95);
}

.recruit-flash--player-two {
  --recruit-flash-color: rgba(255, 86, 86, 0.95);
}

.energy-spent-pulse {
  display: inline-block;
  animation: energy-spent 560ms cubic-bezier(.2,.9,.25,1.3);
  transform-origin: center;
}

@keyframes hand-card-settle {
  from {
    opacity: 0.7;
    transform: translateX(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes unit-materialize {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.55);
    filter: brightness(2.3) blur(4px);
  }
  55% {
    opacity: 1;
    transform: translateY(3px) scale(1.08);
    filter: brightness(1.45) blur(0);
  }
  78% {
    transform: translateY(-2px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes recruit-tile-flash {
  0% {
    box-shadow: inset 0 0 0 0 var(--recruit-flash-color), 0 0 0 transparent;
    filter: brightness(1);
  }
  35% {
    box-shadow:
      inset 0 0 24px 7px var(--recruit-flash-color),
      0 0 30px 9px var(--recruit-flash-color);
    filter: brightness(1.7);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent;
    filter: brightness(1);
  }
}

@keyframes energy-spent {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  28% {
    transform: scale(1.55) rotate(-5deg);
    filter: brightness(1.9);
    text-shadow: 0 0 14px rgba(255, 219, 95, 0.95);
  }
  58% {
    transform: scale(0.92) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0);
    filter: brightness(1);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand-card,
  .unit-token.unit-spawn,
  .recruit-flash,
  .energy-spent-pulse {
    animation-duration: 1ms !important;
  }

  .recruit-ghost {
    transition: none;
  }
}

/* =========================================================
   Compact Desktop HUD Pass
   - Shorter hand dock
   - Single-line hand header
   - Game log reaches the hand
   - Battlefield uses more of the freed space
========================================================= */

@media (min-width: 761px) {
  :root {
    --hand-height: clamp(108px, 12.5vh, 124px);
    --battlefield-cell-size: min(9.1vh, 6.15vw, 88px);
  }

  .game-layout {
    grid-template-columns:
      minmax(220px, 17vw)
      minmax(0, 1fr)
      minmax(220px, 17vw);
    height: calc(100dvh - var(--hand-height));
    padding: clamp(4px, 0.55vh, 8px);
    padding-bottom: 0;
  }

  .side-panel {
    align-self: stretch;
    height: 100%;
    gap: 8px;
  }

  .panel-card {
    padding: clamp(10px, 1.2vh, 14px);
  }

  .panel-card h2 {
    margin-bottom: 7px;
  }

  .panel-card:has(#gameLog) {
    flex: 1 1 0;
    margin-bottom: 0;
  }

  #gameLog,
  .game-log {
    height: 100%;
    max-height: none;
    padding-bottom: 2px;
  }

  .hand-dock {
    height: var(--hand-height);
  }

  .hand-dock__toggle {
    flex: 0 0 24px;
    height: 24px;
    padding: 3px 16px;
    line-height: 1;
  }

  .hand-panel {
    height: calc(var(--hand-height) - 23px);
    min-height: 0;
    padding: 4px 14px 5px;
    border-radius: 12px 12px 0 0;
  }

  .hand-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0 8px;
  }

  .hand-panel__header h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1;
  }

  /* The owner is now included in the heading: “Player 1 Hand”. */
  .hand-panel__header p,
  #handOwnerLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #handCount,
  .hand-panel__header span {
    font-size: 12px;
    line-height: 1;
  }

  .hand-fan {
    height: calc(100% - 22px);
    min-height: 0;
    align-items: flex-end;
    padding: 7px 20px 1px;
    overflow: visible;
  }

  .hand-card {
    flex-basis: clamp(58px, 7.3vh, 76px);
    width: clamp(58px, 7.3vh, 76px);
    height: clamp(78px, 9.4vh, 98px);
    margin-left: -12px;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    margin-right: 12px;
    transform: translateY(-10px) scale(1.1);
  }

  .battlefield-column {
    align-items: center;
    justify-items: center;
  }

  .battlefield-stage {
    transform-origin: center;
    max-height: 100%;
  }

  .exit-game-button {
    bottom: 8px;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  :root {
    --hand-height: 106px;
    --battlefield-cell-size: min(8.6vh, 5.9vw, 78px);
  }

  .hand-panel {
    height: calc(var(--hand-height) - 23px);
  }

  .hand-card {
    width: clamp(54px, 6.6vh, 68px);
    height: clamp(72px, 8.6vh, 88px);
  }

  .hand-fan {
    padding-top: 5px;
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  :root {
    --hand-height: 98px;
    --battlefield-cell-size: min(8.15vh, 5.55vw, 72px);
  }

  .hand-panel__header {
    height: 20px;
    min-height: 20px;
  }

  .hand-fan {
    height: calc(100% - 20px);
    padding-top: 3px;
  }

  .hand-card {
    width: clamp(50px, 6vh, 62px);
    height: clamp(66px, 7.9vh, 80px);
  }
}


/* =========================================================
   Chat + Match History HUD Layout
   Authoritative desktop overrides
========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 761px) {
  :root {
    --hud-side-width: max(220px, 17vw);
    --hand-height: clamp(142px, 16vh, 166px);
  }

  .game-layout {
    grid-template-columns: var(--hud-side-width) minmax(0, 1fr) var(--hud-side-width);
    height: calc(100dvh - var(--hand-height));
  }

  .game-layout > .side-panel {
    overflow: hidden;
  }

  .game-layout > .side-panel:first-of-type,
  .game-layout > .side-panel:last-of-type {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
  }

  .game-layout > .side-panel:first-of-type > .panel-card:first-child {
    flex: 0 0 auto;
  }

  .chat-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }

  .chat-panel h2 {
    flex: 0 0 auto;
  }

  .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #555d6d;
    border-radius: 8px;
    background: rgba(12, 14, 19, 0.72);
    scrollbar-width: thin;
    overflow-wrap: anywhere;
  }

  .chat-message {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  .chat-message--system {
    color: #c4cad5;
    font-style: italic;
  }

  .chat-message--player-1 strong { color: #70b7ff; }
  .chat-message--player-2 strong { color: #ff7c7c; }

  .chat-form {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 8px;
  }

  .chat-input {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    color: #fff;
    background: #171a21;
    border: 1px solid #626978;
    border-radius: 7px;
    font: inherit;
  }

  .chat-input:focus {
    outline: 2px solid #4a9eff;
    outline-offset: 1px;
  }

  .chat-send-button {
    height: 34px;
    padding: 0 12px;
    color: #fff;
    background: #2f74ff;
    border: 0;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
  }

  .chat-send-button:hover { background: #4b88ff; }

  .game-layout > .side-panel:last-of-type > .panel-card:first-child {
    flex: 0 0 clamp(250px, 43vh, 390px);
    min-height: 0;
    overflow: hidden;
  }

  .card-preview {
    height: calc(100% - 36px);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .match-history-panel {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }

  .match-history-panel .turn-indicator {
    flex: 0 0 auto;
    margin-bottom: 9px;
  }

  .match-history-panel h2 {
    flex: 0 0 auto;
    margin-bottom: 7px;
  }

  .match-history-panel .game-log {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
  }

  .game-log__entry {
    margin: 0 0 7px;
    font-size: 12px;
    line-height: 1.32;
    overflow-wrap: anywhere;
  }

  .game-log__entry--player-one { color: #78baff; }
  .game-log__entry--player-two { color: #ff8585; }
  .game-log__entry--system { color: #f0cf68; }
  .game-log__entry--neutral { color: #e6e8ec; }

  /* The hand spans only the center play column, flush with both sidebars. */
  .hand-dock {
    left: calc(var(--hud-side-width) + var(--screen-gap) * 2);
    right: calc(var(--hud-side-width) + var(--screen-gap) * 2);
    width: auto;
    height: var(--hand-height);
  }

  .hand-panel {
    width: 100%;
    height: calc(var(--hand-height) - 23px);
    min-height: 0;
    padding: 5px 14px 7px;
  }

  .hand-fan {
    height: calc(100% - 22px);
    min-height: 0;
    align-items: flex-end;
    padding: 5px 24px 2px;
    overflow-x: auto;
    overflow-y: visible;
  }

  /* Restore the original readable card dimensions. */
  .hand-card {
    flex: 0 0 92px;
    width: 92px;
    height: 128px;
    margin-left: -18px;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    margin-left: 0;
    margin-right: 18px;
    transform: translateY(-22px) scale(1.22);
  }

  .exit-game-button {
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 760px) {
  .chat-panel,
  .match-history-panel {
    min-height: 280px;
  }

  .chat-messages,
  .game-log {
    max-height: 220px;
    overflow-y: auto;
  }

  .chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    margin-top: 8px;
  }

  .chat-input,
  .chat-send-button {
    min-height: 38px;
  }
}

/* =========================================================
   Screen-fit HUD correction
   - Sidebars use the full viewport height.
   - Only the center battlefield reserves room for the hand.
   - Chat is anchored to the lower-left.
   - The hand displays full-size cards without clipping.
========================================================= */

@media (min-width: 761px) {
  :root {
    --hand-height: clamp(176px, 23vh, 190px);
    --battlefield-cell-size: min(7.45vh, 5.45vw, 68px);
  }

  /* Let chat and match history reach the bottom of the screen. */
  .game-layout {
    height: 100dvh;
    min-height: 0;
    padding-bottom: var(--screen-gap);
  }

  /* Reserve the hand's space only beneath the center play area. */
  .battlefield-column {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding-bottom: var(--hand-height);
    overflow: hidden;
  }

  .battlefield-stage {
    max-height: 100%;
  }

  /* Keep the Selected Unit box at the top and pin chat to the bottom. */
  .game-layout > .side-panel:first-of-type > .panel-card:first-child {
    flex: 0 0 auto;
  }

  .chat-panel {
    flex: 0 0 clamp(270px, 43vh, 410px);
    min-height: 220px;
    margin-top: auto;
    margin-bottom: 0;
  }

  /* The right log uses every pixel beneath the enlarged preview. */
  .game-layout > .side-panel:last-of-type > .panel-card:first-child {
    flex-basis: clamp(260px, 45vh, 410px);
  }

  .match-history-panel {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 56px; /* keeps the last log line clear of Exit */
  }

  /* Center-only hand, with enough room for the original card dimensions. */
  .hand-dock {
    left: calc(var(--hud-side-width) + var(--screen-gap) * 2);
    right: calc(var(--hud-side-width) + var(--screen-gap) * 2);
    bottom: 0;
    width: auto;
    height: var(--hand-height);
    overflow: visible;
  }

  .hand-panel {
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--hand-height) - 23px);
    min-height: 0;
    padding: 5px 14px 8px;
    overflow: visible;
  }

  .hand-panel__header {
    height: 24px;
    min-height: 24px;
    margin-bottom: 2px;
  }

  .hand-fan {
    box-sizing: border-box;
    height: calc(100% - 26px);
    min-height: 128px;
    align-items: flex-end;
    padding: 0 24px 1px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .hand-card {
    flex: 0 0 92px;
    width: 92px;
    height: 128px;
    margin-left: -18px;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    margin-left: 0;
    margin-right: 18px;
    transform: translateY(-18px) scale(1.18);
  }

  .exit-game-button {
    right: 8px;
    bottom: 8px;
  }
}

/* Slightly tighter fit on shorter desktop/laptop displays. */
@media (min-width: 761px) and (max-height: 760px) {
  :root {
    --hand-height: 170px;
    --battlefield-cell-size: min(7.05vh, 5.15vw, 62px);
  }

  .chat-panel {
    flex-basis: clamp(235px, 39vh, 315px);
  }

  .game-layout > .side-panel:last-of-type > .panel-card:first-child {
    flex-basis: clamp(225px, 39vh, 315px);
  }

  .hand-panel {
    height: calc(var(--hand-height) - 23px);
  }

  .hand-card {
    width: 88px;
    height: 122px;
    flex-basis: 88px;
  }

  .hand-fan {
    min-height: 122px;
  }
}

/* =========================================================
   Final left-column and hand-hover corrections
   - Chat fills the full space beneath Selected Unit.
   - Hand cards may rise above the fan without being clipped.
========================================================= */

@media (min-width: 761px) {
  /* Remove the empty vertical gap in the left HUD column. */
  .game-layout > .side-panel:first-of-type {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .game-layout > .side-panel:first-of-type > .panel-card:first-child {
    flex: 0 0 auto;
  }

  .game-layout > .side-panel:first-of-type > .chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .chat-panel .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* A scroll container clips transformed children. Keep this fan visible
     so hovered/selected cards can rise above the hand without losing their top. */
  .hand-fan {
    overflow: visible;
  }

  .hand-panel,
  .hand-dock {
    overflow: visible;
  }

  /* Give raised cards a little more breathing room while preserving size. */
  .hand-panel {
    padding-top: 6px;
  }

  .hand-card:hover,
  .hand-card:focus-visible,
  .hand-card.is-selected {
    z-index: 20;
  }
}


/* =========================================================
   Compact battlefield utility zones + collapsed-hand zoom
   - Deck, discard, banish, and army spaces use slim card-like rectangles.
   - Collapsing the hand gives the center board more room and scales it up.
========================================================= */

@media (min-width: 761px) {
  /* Slim vertical rectangles, matching the card-slot shape. */
  .zone-group {
    grid-template-columns: repeat(2, 48px);
    grid-template-rows: repeat(2, 72px);
    gap: 6px;
    width: max-content;
    height: max-content;
    justify-self: center;
    align-self: center;
  }

  .game-zone--pile {
    width: 48px;
    height: 72px;
    min-width: 48px;
    min-height: 72px;
    padding: 4px 2px;
    border-radius: 9px;
    font-size: 8px;
    line-height: 1.05;
  }

  .game-zone--pile span {
    margin-top: 3px;
    font-size: 8px;
  }

  .army-zones {
    grid-template-columns: repeat(3, 48px);
    gap: 6px;
    width: max-content;
    height: 72px;
    justify-self: center;
    align-self: center;
  }

  .game-zone--army {
    width: 48px;
    height: 72px;
    min-width: 48px;
    min-height: 72px;
    padding: 4px 2px;
    border-radius: 9px;
    font-size: 8px;
    line-height: 1.05;
  }

  /* Animate the board into the extra space when the hand is hidden. */
  .battlefield-stage,
  .battlefield,
  .stronghold-lane,
  .battlefield-cell,
  .game-zone,
  .stronghold {
    transition:
      width 180ms ease,
      height 180ms ease,
      min-height 180ms ease,
      grid-template-columns 180ms ease,
      grid-template-rows 180ms ease,
      transform 180ms ease;
  }

  body.is-hand-collapsed {
    --battlefield-cell-size: min(8.2vh, 6vw, 76px);
  }

  body.is-hand-collapsed .battlefield-column {
    padding-bottom: 34px;
  }

  body.is-hand-collapsed .battlefield-stage {
    transform: translateY(-2px);
  }

  body.is-hand-collapsed .hand-dock {
    height: 34px;
  }

  body.is-hand-collapsed .hand-dock__toggle {
    margin-bottom: 0;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  body.is-hand-collapsed {
    --battlefield-cell-size: min(7.7vh, 5.7vw, 70px);
  }
}


/* =========================================================
   Combat feedback + Energy frame pulse
========================================================= */
.cell-attack-target {
  position: relative;
  border-color: #ff5b5b !important;
  background: rgba(139, 31, 31, 0.78) !important;
  box-shadow: inset 0 0 14px rgba(255, 68, 68, 0.38), 0 0 10px rgba(255, 68, 68, 0.5);
  cursor: crosshair;
  overflow: visible;
}

.cell-attack-target.is-attack-hovered {
  z-index: 8;
  animation: attack-target-hover-pulse .72s ease-in-out infinite;
}

.cell-attack-target.is-attack-hovered .unit-token {
  animation: attack-unit-breathe .72s ease-in-out infinite;
}

.attack-damage-preview-badge {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  transform: translateX(-50%) translateY(4px) scale(.92);
  padding: 6px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  animation: none;
}

.attack-damage-preview-badge--defender {
  border-color: rgba(255, 135, 135, .95);
  background: rgba(72, 5, 5, .97);
  color: #fff2f2;
  box-shadow: 0 0 16px rgba(255, 52, 52, .78);
}

.attack-damage-preview-badge--attacker {
  border-color: rgba(127, 255, 164, .95);
  background: rgba(6, 67, 28, .97);
  color: #effff3;
  box-shadow: 0 0 16px rgba(50, 225, 105, .72);
}

.attack-damage-preview-badge.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: attack-preview-float .8s ease-in-out infinite alternate;
}

.attack-damage-preview-badge.is-below-target.is-visible {
  animation-name: attack-preview-float-below;
}

.attack-damage-preview-badge.is-lethal {
  border-color: #ffd36c;
  background: rgba(87, 38, 0, .98);
  color: #fff0ad;
  box-shadow: 0 0 18px rgba(255, 183, 40, .88);
}

@keyframes attack-preview-float {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to { transform: translateX(-50%) translateY(-4px) scale(1); }
}

@keyframes attack-preview-float-below {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to { transform: translateX(-50%) translateY(4px) scale(1); }
}

body.is-hovering-attack-target .unit-token.is-selected-unit {
  animation: attacker-ready-lean .72s ease-in-out infinite;
}

.unit-token.is-attack-target {
  cursor: crosshair;
}

.unit-token.has-attacked {
  filter: saturate(0.55) brightness(0.76);
}

.unit-token.has-attacked::after {
  content: "ATTACK USED";
  position: absolute;
  inset: auto 3px 3px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.76);
  color: #d8d8d8;
  font-size: 7px;
  letter-spacing: .04em;
  line-height: 1;
}

.unit-action-ready { color: #8ef0a9; font-weight: 700; }
.unit-action-used { color: #ff9a9a; font-weight: 700; }

.floating-damage-number {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  color: #ffefef;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 900;
  text-shadow: 0 2px 2px #610000, 0 0 14px rgba(255, 38, 38, .95);
}

.energy-frame-pulse {
  position: relative;
  animation: energy-frame-spent 680ms cubic-bezier(.2,.9,.25,1.2);
}

.energy-frame-pulse--player-one {
  --energy-pulse-color: rgba(70, 169, 255, .98);
}

.energy-frame-pulse--player-two {
  --energy-pulse-color: rgba(255, 78, 78, .98);
}

@keyframes attack-target-pulse {
  0%, 100% { box-shadow: inset 0 0 12px rgba(255,68,68,.35), 0 0 8px rgba(255,68,68,.45); }
  50% { box-shadow: inset 0 0 24px rgba(255,68,68,.62), 0 0 22px rgba(255,68,68,.85); }
}


@keyframes attack-target-hover-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: inset 0 0 14px rgba(255,68,68,.42), 0 0 10px rgba(255,68,68,.52);
  }
  50% {
    transform: scale(1.035);
    box-shadow: inset 0 0 28px rgba(255,68,68,.72), 0 0 26px rgba(255,68,68,.98);
  }
}

@keyframes attack-unit-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.22); }
}

@keyframes attacker-ready-lean {
  0%, 100% { transform: translateY(-5px) rotate(0deg) scale(1.025); }
  50% { transform: translateY(-7px) rotate(-1.5deg) scale(1.045); }
}
@keyframes energy-frame-spent {
  0% { transform: scale(1); box-shadow: 0 0 0 transparent; }
  28% {
    transform: scale(1.08);
    border-color: var(--energy-pulse-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--energy-pulse-color) 45%, transparent),
                0 0 22px 7px color-mix(in srgb, var(--energy-pulse-color) 75%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--energy-pulse-color) 35%, transparent);
    filter: brightness(1.45);
  }
  62% { transform: scale(.98); }
  100% { transform: scale(1); box-shadow: 0 0 0 transparent; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cell-attack-target,
  .cell-attack-target.is-attack-hovered,
  .cell-attack-target.is-attack-hovered .unit-token,
  body.is-hovering-attack-target .unit-token.is-selected-unit,
  .energy-frame-pulse { animation-duration: 1ms !important; }
}


/* =========================================================
   Stronghold combat + victory state
========================================================= */
.stronghold[role="button"] {
  cursor: default;
  user-select: none;
}

.stronghold.is-attack-target {
  cursor: crosshair;
  border-color: #ff6666 !important;
  box-shadow:
    0 0 0 2px rgba(255, 55, 55, .28),
    0 0 24px rgba(255, 55, 55, .9),
    inset 0 0 20px rgba(255, 55, 55, .35) !important;
  position: relative;
  overflow: visible;
}

.stronghold.is-attack-target:hover,
.stronghold.is-attack-hovered {
  filter: brightness(1.18);
  animation: stronghold-target-pulse .72s ease-in-out infinite;
}

.stronghold.is-attack-hovered .stronghold__health {
  animation: stronghold-health-warning .72s ease-in-out infinite;
}

.stronghold.is-attack-target:focus-visible {
  outline: 3px solid #ff8b8b;
  outline-offset: 3px;
}

body.stronghold-impact .battlefield-stage {
  animation: stronghold-screen-shake 420ms ease-out;
}

.floating-damage-number--stronghold {
  color: #fff0b7;
  text-shadow: 0 2px 2px #6b2600, 0 0 18px rgba(255, 116, 20, .98);
}

.victory-modal__dialog {
  text-align: center;
  border-color: #d8b94d;
  box-shadow: 0 0 36px rgba(239, 197, 63, .32);
}

.victory-modal__crest {
  margin-bottom: 8px;
  font-size: 48px;
  line-height: 1;
  animation: victory-crest-arrive 520ms cubic-bezier(.2,.9,.25,1.25);
}

body.game-is-over .battlefield-column,
body.game-is-over .hand-dock,
body.game-is-over .side-panel {
  filter: saturate(.72) brightness(.78);
}

@keyframes stronghold-target-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,55,55,.45), inset 0 0 12px rgba(255,55,55,.2);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 0 30px rgba(255,55,55,.98), inset 0 0 24px rgba(255,55,55,.42);
  }
}

@keyframes stronghold-health-warning {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.45); }
}

@keyframes stronghold-screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 1px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, -1px); }
}

@keyframes victory-crest-arrive {
  from { opacity: 0; transform: translateY(-18px) scale(.5) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stronghold.is-attack-target,
  body.stronghold-impact .battlefield-stage,
  .victory-modal__crest {
    animation-duration: 1ms !important;
  }
}


/* =========================================================
   Energy transfer: resource sparks feed the played card
========================================================= */
.energy-transfer-orb {
  position: fixed;
  z-index: 10020;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  filter: brightness(1.35);
}

.energy-transfer-orb::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

.energy-transfer-orb--player-1 {
  background: rgba(69, 170, 255, .96);
  box-shadow:
    0 0 8px rgba(88, 185, 255, 1),
    0 0 22px rgba(45, 137, 255, .95),
    0 0 38px rgba(45, 137, 255, .55);
}

.energy-transfer-orb--player-2 {
  background: rgba(255, 77, 77, .96);
  box-shadow:
    0 0 8px rgba(255, 105, 105, 1),
    0 0 22px rgba(255, 55, 55, .95),
    0 0 38px rgba(255, 55, 55, .55);
}

.hand-card.is-receiving-energy {
  z-index: 12;
  filter: brightness(1.18) saturate(1.2);
  box-shadow:
    0 14px 28px rgba(0,0,0,.7),
    0 0 18px rgba(255, 226, 125, .55);
}

.hand-card.energy-absorbed {
  z-index: 12;
  animation: card-energy-absorb 230ms cubic-bezier(.2,.9,.25,1.35) both;
}

@keyframes card-energy-absorb {
  0% {
    filter: brightness(1.1) saturate(1.1);
    box-shadow: 0 0 12px rgba(255, 226, 125, .45);
  }
  45% {
    transform: translateY(-32px) scale(1.43);
    filter: brightness(2.15) saturate(1.45);
    box-shadow:
      0 16px 32px rgba(0,0,0,.72),
      0 0 16px rgba(255,255,255,.98),
      0 0 38px rgba(255, 218, 92, .92);
  }
  100% {
    filter: brightness(1.12) saturate(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .energy-transfer-orb { display: none !important; }
  .hand-card.energy-absorbed { animation-duration: 1ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  .attack-damage-preview-badge.is-visible {
    animation: none;
  }
}


/* Unit exhausted state: no movement and no legal attack remaining */
.unit-token.is-exhausted {
  filter: grayscale(0.72) saturate(0.28) brightness(0.68);
  opacity: 0.78;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.46);
  animation: none;
}

.unit-token.is-exhausted::before {
  content: "EXHAUSTED";
  position: absolute;
  inset: 50% 4px auto;
  z-index: 3;
  transform: translateY(-50%);
  padding: 3px 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background: rgba(10, 12, 16, 0.82);
  color: #d7d9dd;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.unit-token.is-exhausted.has-attacked::after {
  display: none;
}

.unit-token.is-exhausted.is-selected-unit {
  transform: scale(1.01);
  filter: grayscale(0.72) saturate(0.28) brightness(0.74);
  box-shadow:
    0 7px 14px rgba(0, 0, 0, 0.55),
    0 0 9px rgba(205, 205, 205, 0.32);
}

/* =========================================================
   v18 — Cinematic match ending
========================================================= */
body.game-ending {
  overflow: hidden;
}

body.game-ending .game-layout,
body.game-ending .hand-dock,
body.game-ending .exit-game-button {
  pointer-events: none;
  user-select: none;
}

body.game-ending .battlefield-column,
body.game-ending .hand-dock,
body.game-ending .side-panel {
  transition: filter 900ms ease, opacity 900ms ease;
  filter: saturate(.58) brightness(.58);
}

body.game-ending .stronghold--victorious {
  position: relative;
  z-index: 45;
  filter: brightness(1.2) saturate(1.35) !important;
  animation: victorious-stronghold-secret-rare 1.15s ease-in-out infinite;
  isolation: isolate;
}

body.game-ending .stronghold--victorious::before,
body.game-ending .stronghold--victorious::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

body.game-ending .stronghold--victorious::before {
  inset: -5px;
  z-index: -1;
  padding: 3px;
  background: conic-gradient(
    from var(--victory-angle, 0deg),
    #fff4a8,
    #ff9b34,
    #ff4d8d,
    #8c6bff,
    #48d9ff,
    #72ff9d,
    #fff4a8
  );
  filter: blur(5px) brightness(1.35);
  animation: victorious-rainbow-spin 1.55s linear infinite;
}

body.game-ending .stronghold--victorious::after {
  inset: 0;
  z-index: 2;
  opacity: .78;
  background: linear-gradient(
    112deg,
    transparent 15%,
    rgba(255,255,255,.08) 34%,
    rgba(255,245,172,.92) 46%,
    rgba(255,255,255,.18) 56%,
    transparent 72%
  );
  background-size: 240% 100%;
  mix-blend-mode: screen;
  animation: victorious-shimmer 1.35s ease-in-out infinite;
}

body.game-ending .stronghold--collapsing {
  position: relative;
  z-index: 42;
  pointer-events: none;
  transform-origin: 50% 90%;
  animation: stronghold-final-collapse 2.05s cubic-bezier(.32,.02,.22,1) forwards;
}

body.game-ending .stronghold--collapsing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(64deg, transparent 42%, rgba(255,225,160,.95) 43%, rgba(41,15,6,.92) 45%, transparent 47%),
    linear-gradient(118deg, transparent 29%, rgba(255,225,160,.75) 30%, rgba(41,15,6,.9) 32%, transparent 34%),
    linear-gradient(82deg, transparent 62%, rgba(255,225,160,.85) 63%, rgba(41,15,6,.9) 65%, transparent 67%);
  opacity: 0;
  animation: stronghold-cracks 1.45s ease forwards;
}

.stronghold-debris-layer {
  position: fixed;
  inset: 0;
  z-index: 10040;
  overflow: hidden;
  pointer-events: none;
}

.stronghold-debris-layer > span {
  position: fixed;
  display: block;
  border-radius: 1px;
  background: linear-gradient(135deg, #f1b84b 0 25%, #7d3c16 26% 62%, #25120b 63%);
  box-shadow: 0 0 8px rgba(255,133,38,.55);
  opacity: 0;
  animation: stronghold-debris-fall 1.6s cubic-bezier(.18,.75,.22,1) forwards;
}

.victory-modal {
  z-index: 12000;
}

.victory-modal__backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(70,45,15,.17), transparent 44%),
    rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  animation: end-screen-backdrop-in 680ms ease both;
}

.victory-modal__dialog {
  width: min(620px, calc(100vw - 30px));
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(224,182,79,.66);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,186,62,.14), transparent 38%),
    linear-gradient(180deg, rgba(24,20,18,.98), rgba(8,9,12,.98));
  box-shadow:
    0 28px 90px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,241,178,.12) inset,
    0 0 54px rgba(224,157,47,.22);
  animation: end-screen-dialog-in 720ms cubic-bezier(.18,.9,.24,1.16) both;
}

.victory-modal--defeat .victory-modal__dialog {
  border-color: rgba(176,55,55,.75);
  background:
    radial-gradient(circle at 50% 8%, rgba(173,32,32,.16), transparent 38%),
    linear-gradient(180deg, rgba(24,17,18,.98), rgba(8,9,12,.98));
  box-shadow:
    0 28px 90px rgba(0,0,0,.88),
    0 0 0 1px rgba(255,205,205,.1) inset,
    0 0 54px rgba(180,31,31,.24);
}

.victory-modal__logo {
  display: block;
  width: min(390px, 82%);
  max-height: 210px;
  object-fit: contain;
  margin: -16px auto -10px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.72));
  animation: end-logo-arrive 700ms 130ms ease-out both;
}

.victory-modal__eyebrow {
  margin: 0 0 6px;
  color: #d8c9a0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: end-copy-arrive 500ms 250ms ease both;
}

.victory-modal__title {
  margin: 0;
  color: #ffe294;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 9vw, 88px);
  line-height: .95;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 #72410f,
    0 8px 20px rgba(0,0,0,.85),
    0 0 28px rgba(255,181,53,.55);
  animation: end-title-impact 650ms 300ms cubic-bezier(.18,.95,.25,1.3) both;
}

.victory-modal--defeat .victory-modal__title {
  color: #ffb0a7;
  text-shadow:
    0 3px 0 #641e1e,
    0 8px 20px rgba(0,0,0,.85),
    0 0 28px rgba(221,42,42,.55);
}

.victory-modal__message {
  margin: 18px auto 0;
  max-width: 450px;
  color: #eee7d8;
  font-size: 16px;
  line-height: 1.55;
  animation: end-copy-arrive 520ms 470ms ease both;
}

.victory-modal__actions {
  margin-top: 28px;
  animation: end-actions-arrive 520ms 620ms ease both;
}

body.end-screen-visible .victory-modal__dialog {
  pointer-events: auto;
}

@keyframes victorious-stronghold-secret-rare {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255,190,50,.58), 0 0 42px rgba(96,117,255,.32);
  }
  50% {
    transform: scale(1.045);
    box-shadow: 0 0 35px rgba(255,226,111,.96), 0 0 78px rgba(131,71,255,.65);
  }
}

@property --victory-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes victorious-rainbow-spin {
  to { --victory-angle: 360deg; }
}

@keyframes victorious-shimmer {
  0% { background-position: 130% 0; opacity: .2; }
  50% { opacity: .9; }
  100% { background-position: -130% 0; opacity: .2; }
}

@keyframes stronghold-final-collapse {
  0% { transform: translate(0,0) rotate(0) scale(1); filter: brightness(1); opacity: 1; }
  7% { transform: translate(-8px,1px) rotate(-1deg) scale(1.02); filter: brightness(1.8); }
  14% { transform: translate(9px,-2px) rotate(1.2deg) scale(.99); }
  22% { transform: translate(-10px,3px) rotate(-1.5deg) scale(1.01); }
  31% { transform: translate(8px,1px) rotate(1deg) scale(.99); filter: brightness(.92); }
  43% { transform: translate(-6px,5px) rotate(-1deg) scale(.98); }
  58% { transform: translate(5px,12px) rotate(1.8deg) scale(.96,.91); filter: brightness(.7) saturate(.65); opacity: .92; }
  74% { transform: translate(-3px,34px) rotate(-3deg) scale(.92,.7); filter: brightness(.5) saturate(.35); opacity: .72; }
  100% { transform: translate(2px,92px) rotate(5deg) scale(.82,.24); filter: brightness(.25) grayscale(.72); opacity: 0; }
}

@keyframes stronghold-cracks {
  0%, 18% { opacity: 0; filter: brightness(1); }
  30% { opacity: .95; filter: brightness(2); }
  65%, 100% { opacity: .72; filter: brightness(.75); }
}

@keyframes stronghold-debris-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.6); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--debris-x),var(--debris-y),0) rotate(var(--debris-rotation)) scale(.9); }
}

@keyframes end-screen-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes end-screen-dialog-in {
  from { opacity: 0; transform: translateY(28px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes end-logo-arrive {
  from { opacity: 0; transform: translateY(-15px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes end-title-impact {
  0% { opacity: 0; transform: scale(.78); filter: blur(5px); }
  64% { opacity: 1; transform: scale(1.1); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes end-copy-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes end-actions-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.game-ending .stronghold--victorious,
  body.game-ending .stronghold--victorious::before,
  body.game-ending .stronghold--victorious::after,
  body.game-ending .stronghold--collapsing,
  body.game-ending .stronghold--collapsing::after,
  .victory-modal__backdrop,
  .victory-modal__dialog,
  .victory-modal__logo,
  .victory-modal__eyebrow,
  .victory-modal__title,
  .victory-modal__message,
  .victory-modal__actions {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/* =========================================================
   v20 — Critical Stronghold and gameplay sound polish
========================================================= */
.stronghold.stronghold--critical-damage:not(.stronghold--collapsing) {
  animation: stronghold-critical-damage-pulse 4.2s ease-in-out infinite;
  will-change: filter, box-shadow;
}

@keyframes stronghold-critical-damage-pulse {
  0%, 12%, 30%, 100% {
    filter: brightness(1) saturate(1);
    box-shadow: none;
  }
  17% {
    filter: brightness(.82) saturate(1.85) sepia(.15) hue-rotate(320deg);
    box-shadow: 0 0 18px rgba(255, 32, 32, .72), inset 0 0 22px rgba(170, 0, 0, .42);
  }
  22% {
    filter: brightness(1.12) saturate(1.35) sepia(.08) hue-rotate(325deg);
    box-shadow: 0 0 9px rgba(255, 48, 48, .38), inset 0 0 12px rgba(150, 0, 0, .22);
  }
}

.unit-to-discard {
  position: fixed;
  z-index: 1200;
  margin: 0;
  pointer-events: none;
  transform-origin: center;
  filter: brightness(.88) saturate(.7);
}

@media (prefers-reduced-motion: reduce) {
  .stronghold.stronghold--critical-damage:not(.stronghold--collapsing) {
    animation: none;
    filter: saturate(1.35);
    box-shadow: 0 0 10px rgba(255, 42, 42, .45);
  }
}
.unit-action-menu {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 30;
  pointer-events: auto;
}

.unit-action-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 3px 7px;

  border-radius: 999px;

  background: rgba(12,18,28,.92);
  border: 1px solid rgba(255,255,255,.18);

  color: white;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform .12s,
    background .12s,
    border-color .12s;
}

.unit-action-menu__button:hover {
  transform: translateY(-1px);
}

.unit-action-menu__button.is-active {
  background: #3d7bff;
  border-color: #8eb5ff;
}

.unit-action-menu__button.is-disabled {
  opacity: .35;
  cursor: default;
}

.unit-action-menu__button--attack.is-active {
  background: #c63d3d;
  border-color: #ff9a9a;
}
/*
 * Selected Unit Action Status
 *
 * Left half: movement
 * Right half: attack
 */

.battlefield-cell.cell-selected.cell-unit-action-status {
  position: relative;
  isolation: isolate;
}

/* Movement and attack are both available. */
.battlefield-cell.cell-selected.cell-unit-action-status--both {
  background:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.58) 0%,
      rgba(40, 130, 255, 0.58) 50%,
      rgba(255, 137, 35, 0.58) 50%,
      rgba(255, 137, 35, 0.58) 100%
    );
}

/* Movement remains, but attack is unavailable. */
.battlefield-cell.cell-selected.cell-unit-action-status--move-only {
  background:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.58) 0%,
      rgba(40, 130, 255, 0.58) 50%,
      rgba(100, 105, 115, 0.58) 50%,
      rgba(100, 105, 115, 0.58) 100%
    );
}

/* Attack remains, but movement is unavailable. */
.battlefield-cell.cell-selected.cell-unit-action-status--attack-only {
  background:
    linear-gradient(
      90deg,
      rgba(100, 105, 115, 0.58) 0%,
      rgba(100, 105, 115, 0.58) 50%,
      rgba(255, 137, 35, 0.58) 50%,
      rgba(255, 137, 35, 0.58) 100%
    );
}

/* Neither action is available. */
.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background:
    linear-gradient(
      90deg,
      rgba(100, 105, 115, 0.62) 0%,
      rgba(100, 105, 115, 0.62) 100%
    );
}

/* Only gray the Unit itself when both actions are unavailable. */
.unit-token.is-exhausted {
  filter: grayscale(1);
  opacity: 0.55;
}

/* Do not fade a Unit that still has either action. */
.unit-token.can-move,
.unit-token.can-attack {
  filter: none;
  opacity: 1;
}
/* =========================================================
   Stone Battlefield Tile Theme
   Procedural texture: no external image required.
========================================================= */

:root {
  --stone-base: #55575b;
  --stone-dark: #303236;
  --stone-mid: #45484d;
  --stone-light: #777a80;
  --stone-edge: #24262a;

  --stone-texture:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 68%, rgba(0,0,0,.20) 0 1px, transparent 2px),
    radial-gradient(ellipse at 38% 78%, rgba(255,255,255,.06) 0 7%, transparent 17%),
    radial-gradient(ellipse at 82% 20%, rgba(0,0,0,.13) 0 9%, transparent 20%),
    linear-gradient(118deg, transparent 0 42%, rgba(18,19,21,.24) 43% 44%, transparent 45% 100%),
    linear-gradient(24deg, transparent 0 68%, rgba(190,193,198,.10) 69% 70%, transparent 71% 100%),
    linear-gradient(145deg, var(--stone-light) 0%, var(--stone-mid) 30%, var(--stone-base) 58%, var(--stone-dark) 100%);
}

.battlefield-cell {
  background: var(--stone-texture);
  background-size:
    19px 23px,
    29px 31px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;

  border-color: #25272b;
  border-width: 3px;
  border-radius: 7px;

  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.16),
    inset -3px -3px 0 rgba(0,0,0,.30),
    inset 0 0 14px rgba(0,0,0,.20),
    0 2px 2px rgba(0,0,0,.48);
}

.battlefield-cell:hover {
  border-color: #9b9ea5;
  filter: brightness(1.09);
}

/* Recruiting rows retain their faction tint over the stone. */
.battlefield-cell.cell-recruit-enemy {
  background:
    linear-gradient(rgba(122, 31, 31, .42), rgba(122, 31, 31, .42)),
    var(--stone-texture);
  border-color: #8f4141;
}

.battlefield-cell.cell-recruit-player {
  background:
    linear-gradient(rgba(23, 99, 52, .42), rgba(23, 99, 52, .42)),
    var(--stone-texture);
  border-color: #438d60;
}

/* Movement, range, and attack colors remain readable over stone. */
.battlefield-cell.cell-move {
  background:
    linear-gradient(rgba(34, 91, 218, .67), rgba(34, 91, 218, .67)),
    var(--stone-texture);
  border-color: #79a8ff;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.16),
    inset -3px -3px 0 rgba(0,0,0,.30),
    inset 0 0 18px rgba(45, 109, 255, .55),
    0 0 9px rgba(65, 128, 255, .45);
}

.battlefield-cell.cell-range {
  background:
    linear-gradient(rgba(183, 101, 18, .66), rgba(183, 101, 18, .66)),
    var(--stone-texture);
  border-color: #ffb458;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.14),
    inset -3px -3px 0 rgba(0,0,0,.30),
    inset 0 0 18px rgba(255, 139, 28, .48),
    0 0 9px rgba(255, 139, 28, .35);
}

.battlefield-cell.cell-attack,
.battlefield-cell.cell-attack-target {
  background:
    linear-gradient(rgba(151, 34, 34, .68), rgba(151, 34, 34, .68)),
    var(--stone-texture);
}

/* Selected unit action status: colored halves over visible stone. */
.battlefield-cell.cell-selected.cell-unit-action-status--both {
  background:
    linear-gradient(90deg,
      rgba(40,130,255,.60) 0 50%,
      rgba(255,137,35,.60) 50% 100%),
    var(--stone-texture);
}

.battlefield-cell.cell-selected.cell-unit-action-status--move-only {
  background:
    linear-gradient(90deg,
      rgba(40,130,255,.60) 0 50%,
      rgba(75,78,84,.60) 50% 100%),
    var(--stone-texture);
}

.battlefield-cell.cell-selected.cell-unit-action-status--attack-only {
  background:
    linear-gradient(90deg,
      rgba(75,78,84,.60) 0 50%,
      rgba(255,137,35,.60) 50% 100%),
    var(--stone-texture);
}

.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background:
    linear-gradient(rgba(66,69,74,.68), rgba(66,69,74,.68)),
    var(--stone-texture);
}

/* Selected border stays prominent against the darker stone edges. */
.battlefield-cell.cell-selected {
  border-color: #f6d45a;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.16),
    inset -3px -3px 0 rgba(0,0,0,.30),
    0 0 0 2px rgba(255,215,0,.30),
    0 0 14px rgba(255,215,0,.92);
}

/* =========================================================
   Stone Battlefield Image Theme
   The image spans the entire 7 × 6 battlefield. Tile states
   remain translucent so the stone artwork stays visible.
========================================================= */

.battlefield {
  position: relative;
  isolation: isolate;
  padding: 8px;

  background:
    linear-gradient(rgba(12, 13, 14, 0.08), rgba(12, 13, 14, 0.08)),
    url("battlefield-stone.png") center / 100% 100% no-repeat;

  border: 3px solid #1d1f20;
  border-radius: 10px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.52),
    inset 0 0 18px rgba(0, 0, 0, 0.32);
  overflow: visible;
}

.battlefield-cell {
  background: rgba(32, 34, 36, 0.08);
  border: 2px solid rgba(18, 19, 20, 0.66);
  border-radius: 5px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset -2px -2px 0 rgba(0, 0, 0, 0.18);
  backdrop-filter: brightness(0.98);
}

.battlefield-cell:hover {
  border-color: rgba(235, 238, 240, 0.9);
  background-color: rgba(255, 255, 255, 0.07);
  filter: brightness(1.08);
}

.battlefield-cell.cell-recruit-enemy {
  background:
    linear-gradient(rgba(132, 30, 30, 0.42), rgba(132, 30, 30, 0.42));
  border-color: #b74b4b;
}

.battlefield-cell.cell-recruit-player {
  background:
    linear-gradient(rgba(21, 111, 57, 0.42), rgba(21, 111, 57, 0.42));
  border-color: #4dbb72;
}

.battlefield-cell.cell-move {
  background:
    linear-gradient(rgba(34, 91, 218, 0.62), rgba(34, 91, 218, 0.62));
  border-color: #79a8ff;
  box-shadow:
    inset 0 0 18px rgba(45, 109, 255, 0.52),
    0 0 9px rgba(65, 128, 255, 0.42);
}

.battlefield-cell.cell-range {
  background:
    linear-gradient(rgba(183, 101, 18, 0.62), rgba(183, 101, 18, 0.62));
  border-color: #ffb458;
  box-shadow:
    inset 0 0 18px rgba(255, 139, 28, 0.46),
    0 0 9px rgba(255, 139, 28, 0.32);
}

.battlefield-cell.cell-attack,
.battlefield-cell.cell-attack-target {
  background:
    linear-gradient(rgba(151, 34, 34, 0.66), rgba(151, 34, 34, 0.66));
}

.battlefield-cell.cell-selected.cell-unit-action-status--both {
  background:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.58) 0 50%,
      rgba(255, 137, 35, 0.58) 50% 100%
    );
}

.battlefield-cell.cell-selected.cell-unit-action-status--move-only {
  background:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.58) 0 50%,
      rgba(75, 78, 84, 0.62) 50% 100%
    );
}

.battlefield-cell.cell-selected.cell-unit-action-status--attack-only {
  background:
    linear-gradient(
      90deg,
      rgba(75, 78, 84, 0.62) 0 50%,
      rgba(255, 137, 35, 0.58) 50% 100%
    );
}

.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background:
    linear-gradient(rgba(66, 69, 74, 0.66), rgba(66, 69, 74, 0.66));
}

.battlefield-cell.cell-selected {
  border-color: #f6d45a;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.30),
    0 0 14px rgba(255, 215, 0, 0.92);
}


/* =========================================================
   Forest World Background + Individual Stone Battlefield Tiles
   Keep this section at the very bottom of game.css.
========================================================= */

html,
body {
  background: #11150e;
}

body {
  position: relative;
  isolation: isolate;
}

/* Full-screen forest art, softly blurred and darkened. */
body::before {
  content: "";
  position: fixed;
  inset: -12px;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(rgba(5, 9, 4, 0.34), rgba(5, 9, 4, 0.34)),
    url("forest-background.png") center center / cover no-repeat;

  filter: blur(5px) brightness(0.72) saturate(0.9);
  transform: scale(1.025);
}

/* Additional vignette keeps attention on the center battlefield. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.02) 28%,
      rgba(0, 0, 0, 0.18) 68%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

/* Make major panels translucent so the forest still reads behind the UI. */
.game-header,
.panel-card,
.status-box,
.game-zone,
.hand-panel,
.modal__panel {
  backdrop-filter: blur(7px);
}

.game-header {
  background: rgba(25, 28, 30, 0.90);
}

.panel-card {
  background: rgba(31, 34, 39, 0.88);
}

/* Remove the previous single stretched stone image from the whole board. */
.battlefield {
  padding: 7px;
  background: rgba(16, 18, 16, 0.52);
  border: 3px solid rgba(20, 21, 19, 0.96);
  border-radius: 12px;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(190, 183, 154, 0.14),
    inset 0 0 20px rgba(0, 0, 0, 0.48);
}

/* Every battlefield square receives its own full stone image. */
.battlefield-cell {
  background-image:
    linear-gradient(rgba(12, 13, 12, 0.06), rgba(12, 13, 12, 0.06)),
    url("battlefield-stone.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  border: 2px solid rgba(22, 23, 21, 0.92);
  border-radius: 7px;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.10),
    inset -2px -2px 2px rgba(0, 0, 0, 0.34),
    0 2px 4px rgba(0, 0, 0, 0.42);

  filter: brightness(0.86) saturate(0.82);
}

.battlefield-cell:hover {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)),
    url("battlefield-stone.png");
  border-color: rgba(245, 242, 222, 0.96);
  filter: brightness(1.02) saturate(0.9);
}

/* Faction recruiting tints remain visible over each tile image. */
.battlefield-cell.cell-recruit-enemy {
  background-image:
    linear-gradient(rgba(137, 28, 28, 0.43), rgba(137, 28, 28, 0.43)),
    url("battlefield-stone.png");
  border-color: #bd5555;
}

.battlefield-cell.cell-recruit-player {
  background-image:
    linear-gradient(rgba(22, 116, 61, 0.43), rgba(22, 116, 61, 0.43)),
    url("battlefield-stone.png");
  border-color: #55bd7d;
}

/* Gameplay highlights tint the stone instead of replacing it. */
.battlefield-cell.cell-move {
  background-image:
    linear-gradient(rgba(31, 88, 221, 0.62), rgba(31, 88, 221, 0.62)),
    url("battlefield-stone.png");
  border-color: #78a8ff;
  filter: brightness(1.02) saturate(1.05);
}

.battlefield-cell.cell-range {
  background-image:
    linear-gradient(rgba(186, 99, 15, 0.62), rgba(186, 99, 15, 0.62)),
    url("battlefield-stone.png");
  border-color: #ffb34a;
  filter: brightness(1.02) saturate(1.05);
}

.battlefield-cell.cell-attack,
.battlefield-cell.cell-attack-target {
  background-image:
    linear-gradient(rgba(154, 34, 34, 0.66), rgba(154, 34, 34, 0.66)),
    url("battlefield-stone.png");
  border-color: #ef7373;
  filter: brightness(1.02) saturate(1.08);
}

/* Selected-unit action availability halves over the stone tile. */
.battlefield-cell.cell-selected.cell-unit-action-status--both {
  background-image:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.59) 0 50%,
      rgba(255, 137, 35, 0.59) 50% 100%
    ),
    url("battlefield-stone.png");
}

.battlefield-cell.cell-selected.cell-unit-action-status--move-only {
  background-image:
    linear-gradient(
      90deg,
      rgba(40, 130, 255, 0.59) 0 50%,
      rgba(70, 72, 74, 0.66) 50% 100%
    ),
    url("battlefield-stone.png");
}

.battlefield-cell.cell-selected.cell-unit-action-status--attack-only {
  background-image:
    linear-gradient(
      90deg,
      rgba(70, 72, 74, 0.66) 0 50%,
      rgba(255, 137, 35, 0.59) 50% 100%
    ),
    url("battlefield-stone.png");
}

.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background-image:
    linear-gradient(rgba(67, 69, 71, 0.69), rgba(67, 69, 71, 0.69)),
    url("battlefield-stone.png");
}

.battlefield-cell.cell-selected {
  border-color: #f5d75d;
  filter: brightness(1.04) saturate(1.02);
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 0.28),
    0 0 15px rgba(255, 215, 0, 0.92),
    inset 0 0 10px rgba(255, 245, 175, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    filter: brightness(0.72) saturate(0.9);
    transform: none;
  }
}

/* =========================================================
   Background fit + centered stone tile correction
   Keep this block at the very bottom of game.css.
========================================================= */

/* Show the complete forest artwork across the browser window.
   Using 100% 100% prevents the image from being cropped/zoomed. */
body::before {
  inset: 0;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(3px) brightness(0.72) saturate(0.9);
  transform: scale(1.008);
}

/* Every tile—including recruiting tiles—uses the exact same
   centered image sizing and alignment. */
.battlefield-cell,
.battlefield-cell:hover,
.battlefield-cell.cell-recruit-enemy,
.battlefield-cell.cell-recruit-player,
.battlefield-cell.cell-move,
.battlefield-cell.cell-range,
.battlefield-cell.cell-attack,
.battlefield-cell.cell-attack-target,
.battlefield-cell.cell-selected.cell-unit-action-status--both,
.battlefield-cell.cell-selected.cell-unit-action-status--move-only,
.battlefield-cell.cell-selected.cell-unit-action-status--attack-only,
.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-origin: border-box;
  background-clip: border-box;
}

/* Keep recruit labels centered independently of the tile artwork. */
.battlefield-cell.cell-recruit-enemy::after,
.battlefield-cell.cell-recruit-player::after {
  left: 50%;
  right: auto;
  width: calc(100% - 8px);
  transform: translateX(-50%);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    filter: brightness(0.72) saturate(0.9);
    transform: none;
  }
}

/* =========================================================
   Sharper Forest Background Override
   Keep this block at the absolute bottom of game.css.
========================================================= */

body::before {
  inset: 0;

  background:
    linear-gradient(
      rgba(5, 9, 4, 0.18),
      rgba(5, 9, 4, 0.18)
    ),
    url("forest-background.png") center center / 100% 100% no-repeat;

  filter: brightness(0.88) saturate(1.02);
  transform: none;
}

/* Softer vignette so the artwork stays visible around the UI. */
body::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.00) 35%,
      rgba(0, 0, 0, 0.08) 72%,
      rgba(0, 0, 0, 0.20) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    filter: brightness(0.88) saturate(1.02);
    transform: none;
  }
}


/* =========================================================
   Transparent HUD Panels + Centered Battlefield Correction
   Keep this block at the absolute bottom of game.css.
========================================================= */

/* Let more of the forest artwork show through the main HUD. */
.panel-card,
.hand-panel {
  background: rgba(22, 25, 29, 0.74) !important;
  -webkit-backdrop-filter: blur(3px) brightness(0.82);
  backdrop-filter: blur(3px) brightness(0.82);
}

/* Slightly clearer inner chat area while remaining translucent. */
#chatMessages,
.chat-messages,
.chat-box,
.chat-log {
  background-color: rgba(10, 12, 16, 0.62) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Preserve readable cards and text over the lighter background. */
.panel-card,
.hand-panel,
#chatMessages,
.chat-messages,
.chat-box,
.chat-log {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

/*
 * The battlefield has 7px padding and a 3px border on both sides.
 * Add that outer width to the center grid track so it cannot spill
 * into either event-zone column.
 */
.battlefield-stage {
  grid-template-columns:
    calc(var(--battlefield-cell-size) * 1.65)
    calc(
      var(--battlefield-cell-size) * 7 +
      var(--screen-gap) * 6 +
      20px
    )
    calc(var(--battlefield-cell-size) * 1.65);
}

.battlefield {
  box-sizing: border-box;
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}

/* Keep the event zones centered inside their own tracks. */
#enemyEventZone,
#playerEventZone {
  justify-self: center;
  align-self: center;
}


/* =========================================================
   BOA-001 King Arthur visual test
========================================================= */

.unit-token--art {
  position: relative;
  overflow: hidden;
  padding: 4px !important;
  color: #fff;
  text-shadow:
    0 1px 2px #000,
    0 0 5px rgba(0, 0, 0, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 3px 8px rgba(0, 0, 0, 0.48);
}

.unit-token--art > span {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2px 3px;
  background: rgba(4, 7, 12, 0.66);
  border-radius: 4px;
  line-height: 1.05;
}

.hand-card--art {
  background-color: #242833;
  color: #fff;
  text-shadow:
    0 1px 2px #000,
    0 0 4px rgba(0, 0, 0, 0.95);
}

.hand-card--art .hand-card__stats {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 24px;
  z-index: 2;
  padding: 3px;
  background: rgba(0, 0, 0, 0.68);
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
}

.hand-card--art .hand-card__name {
  z-index: 3;
}

.card-preview {
  min-height: 0;
  overflow: auto;
}

.card-preview__art {
  display: block;
  width: min(100%, 250px);
  max-height: calc(100dvh - 170px);
  margin: 0 auto 10px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.card-preview__details {
  display: grid;
  gap: 6px;
}

.card-preview__details h3,
.card-preview__details p {
  margin: 0;
}

.card-preview__effect {
  color: #d9dde6;
  font-size: 12px;
  line-height: 1.35;
}

/* =========================================================
   Battlefield portrait corner stats + full card preview
   Keep this section at the absolute bottom of game.css.
========================================================= */

/* The portrait is now the entire token. No name/stat text floats over it. */
.unit-token--art {
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  isolation: isolate;
}

/* Remove styling from the older text-based token children, if cached markup
   briefly remains while the page is updating. */
.unit-token--art > span:not(.unit-stat-badge) {
  display: none !important;
}

/* Shared corner-stat appearance. */
.unit-stat-badge {
  position: absolute;
  z-index: 8;

  display: grid;
  place-items: center;

  width: clamp(18px, 31%, 24px);
  aspect-ratio: 1;
  padding: 0;

  color: #fff;
  border: 2px solid rgba(245, 245, 245, 0.88);
  border-radius: 50%;

  font-size: clamp(10px, 28%, 13px);
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 4px rgba(0, 0, 0, 0.95);

  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.62),
    inset 0 1px 2px rgba(255, 255, 255, 0.48),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);

  pointer-events: none;
  user-select: none;
}

/* Top-left: Range */
.unit-stat-badge--range {
  top: 2px;
  left: 2px;
  background:
    radial-gradient(circle at 35% 28%, #ffd774 0 13%, #e78918 40%, #8f3d08 100%);
}

/* Top-right: remaining Speed */
.unit-stat-badge--speed {
  top: 2px;
  right: 2px;
  background:
    radial-gradient(circle at 35% 28%, #8dd5ff 0 13%, #267bd4 42%, #0b356e 100%);
}

/* Bottom-left: Attack */
.unit-stat-badge--attack {
  bottom: 2px;
  left: 2px;
  background:
    radial-gradient(circle at 35% 28%, #ff9990 0 13%, #ce3029 42%, #6d0b09 100%);
}

/* Bottom-right: current Health */
.unit-stat-badge--health {
  right: 2px;
  bottom: 2px;
  background:
    radial-gradient(circle at 35% 28%, #a7f4a8 0 13%, #2f9f43 42%, #0b5720 100%);
}

/* Give the card preview enough of the right column and make the full image
   scale inside it instead of scrolling/cropping. */
@media (min-width: 761px) {
  .game-layout > .side-panel:last-of-type > .panel-card:first-child {
    flex: 0 0 clamp(360px, 52vh, 440px);
    min-height: 0;
    overflow: hidden;
  }

  .card-preview {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    height: calc(100% - 36px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .card-preview__art {
    display: block;

    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;

    object-fit: contain;
    object-position: center top;
    border-radius: 7px;
  }

  /* The physical card already contains its name, stats, and effect text.
     Hiding the duplicate summary gives the full card more room. */
  .card-preview__details {
    display: none;
  }

  .match-history-panel {
    flex: 1 1 auto;
    min-height: 0;
  }

  .match-history-panel .game-log,
  #gameLog {
    min-height: 0;
    overflow-y: auto;
  }
}

/* Keep the same balance on shorter laptop displays. */
@media (min-width: 761px) and (max-height: 760px) {
  .game-layout > .side-panel:last-of-type > .panel-card:first-child {
    flex-basis: clamp(330px, 49vh, 380px);
  }
}

/* =========================================================
   Card-style selected Unit controls
   Keep this section at the absolute bottom of game.css.
========================================================= */

/* Remove every previous action menu/stat overlay implementation. */
.unit-action-menu,
.unit-hover-stats,
.unit-stat-badge {
  display: none !important;
}

/* Remove card stat text from the cards in hand. */
.hand-card__stats,
.hand-card--art .hand-card__stats {
  display: none !important;
}

/* Selected cells retain the stone tile and only gain a gold outline. */
.battlefield-cell.cell-selected,
.battlefield-cell.cell-selected.cell-unit-action-status--both,
.battlefield-cell.cell-selected.cell-unit-action-status--move-only,
.battlefield-cell.cell-selected.cell-unit-action-status--attack-only,
.battlefield-cell.cell-selected.cell-unit-action-status--none {
  background:
    linear-gradient(rgba(255, 215, 0, 0.04), rgba(255, 215, 0, 0.04)),
    url("battlefield-stone.png") center center / 100% 100% no-repeat !important;

  border-color: #f4d35e;
  box-shadow:
    0 0 0 2px rgba(244, 211, 94, 0.28),
    0 0 13px rgba(244, 211, 94, 0.86);
}

/* Any occupied tile may let its hover name extend beyond the tile. */
.battlefield-cell:has(.unit-token) {
  overflow: visible;
  z-index: 3;
}

.battlefield-cell:has(.unit-token:hover),
.battlefield-cell.cell-selected {
  z-index: 70;
}

.unit-token,
.unit-token--art {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* The portrait itself stays completely clear. */
.unit-token--art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* Hovered Unit name. Long names wrap upward instead of covering the art. */
.unit-name-banner {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 95;

  width: max-content;
  min-width: 100%;
  max-width: 170px;
  padding: 4px 7px;

  color: #fff;
  background: rgba(8, 10, 13, 0.96);
  border: 1px solid rgba(189, 196, 209, 0.72);
  border-radius: 6px;

  font-size: 10px;
  font-weight: 800;
  line-height: 1.16;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.04);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate(-50%, 4px);
  transition:
    opacity 120ms ease,
    visibility 120ms ease,
    transform 120ms ease;
}

/* When selected, the top stat row occupies the first space above the art.
   Move the hover name above that row. */
.cell-selected .unit-name-banner {
  bottom: calc(100% + 39px);
}

.unit-token:hover .unit-name-banner {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* The selected control frame sits outside the portrait. */
.selected-unit-controls {
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.selected-unit-controls__row {
  position: absolute;
  left: 50%;

  display: grid;
  grid-template-columns: repeat(2, minmax(48px, 1fr));
  gap: 4px;

  width: calc(100% + 34px);
  max-width: 150px;

  transform: translateX(-50%);
  pointer-events: auto;
}

.selected-unit-controls__row--top {
  bottom: calc(100% + 5px);
}

.selected-unit-controls__row--bottom {
  top: calc(100% + 5px);
}

.selected-unit-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-height: 27px;
  padding: 4px 7px;

  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.67);
  border-radius: 7px;

  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.50),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);

  cursor: pointer;
  user-select: none;

  transition:
    filter 110ms ease,
    transform 110ms ease,
    box-shadow 110ms ease,
    opacity 110ms ease;
}

.selected-unit-control:hover:not(.is-disabled),
.selected-unit-control:focus-visible:not(.is-disabled) {
  filter: brightness(1.16);
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 7px 15px rgba(0, 0, 0, 0.62),
    0 0 8px rgba(255, 255, 255, 0.27);
}

.selected-unit-control.is-active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.56),
    0 0 13px currentColor;
}

.selected-unit-control.is-disabled {
  color: #9a9da3;
  background: linear-gradient(145deg, #4d5056, #292b2f) !important;
  border-color: #666a71;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.36);
  cursor: not-allowed;
  opacity: 0.72;
}

.selected-unit-control--range {
  background: linear-gradient(145deg, #e28a1c, #834006);
}

.selected-unit-control--speed {
  background: linear-gradient(145deg, #3188df, #0b3c76);
}

.selected-unit-control--attack {
  background: linear-gradient(145deg, #d43b34, #74100c);
}

.selected-unit-control--health {
  background: linear-gradient(145deg, #39a452, #0c5720);
  cursor: default;
}

/* Damaged HP keeps its green panel but turns the current value red. */
.selected-unit-control--health.is-damaged
.selected-unit-control__value {
  color: #ff6c64;
  text-shadow:
    0 1px 2px #000,
    0 0 6px rgba(255, 44, 35, 0.85);
}

.selected-unit-control__label {
  opacity: 0.92;
}

.selected-unit-control__value {
  font-size: 12px;
}

/* Make enough vertical room for controls outside the first and last rows. */
.battlefield {
  overflow: visible !important;
}

/* Keep action controls above neighboring tiles and zones. */
.battlefield-stage,
.battlefield-column {
  overflow: visible;
}

@media (max-width: 760px) {
  .selected-unit-controls__row {
    width: calc(100% + 24px);
    grid-template-columns: repeat(2, minmax(42px, 1fr));
  }

  .selected-unit-control {
    min-height: 24px;
    padding: 3px 5px;
    font-size: 9px;
  }

  .cell-selected .unit-name-banner {
    bottom: calc(100% + 35px);
  }
}
/* Keep selected Unit controls above the nearby stronghold. */
.battlefield {
  position: relative;
  z-index: 10;
  overflow: visible !important;
}

.stronghold-lane {
  position: relative;
  z-index: 2;
}

.battlefield-cell.cell-selected {
  position: relative;
  z-index: 100;
  overflow: visible;
}

.selected-unit-controls {
  z-index: 110;
}

.selected-unit-controls__row {
  z-index: 111;
  pointer-events: auto;
}

.selected-unit-control {
  position: relative;
  z-index: 112;
  pointer-events: auto;
}
/* =========================================================
   Selected Unit control state corrections
========================================================= */

/* RNG is informational and always remains orange. */
.selected-unit-control--range,
.selected-unit-control--range.is-disabled {
  color: #fff;
  background: linear-gradient(145deg, #e28a1c, #834006) !important;
  border-color: rgba(255, 255, 255, 0.67);
  cursor: help;
  opacity: 1;
}

/* HP is display-only and always remains green. */
.selected-unit-control--health,
.selected-unit-control--health.is-disabled {
  color: #fff;
  background: linear-gradient(145deg, #39a452, #0c5720) !important;
  border-color: rgba(255, 255, 255, 0.67);
  cursor: default;
  opacity: 1;
}

/* Temporary range preview caused by hovering RNG. */
.battlefield-cell.cell-range-preview {
  background:
    linear-gradient(
      rgba(196, 105, 15, 0.68),
      rgba(128, 59, 4, 0.72)
    ),
    url("battlefield-stone.png")
      center center / 100% 100% no-repeat !important;

  border-color: #ffb34a !important;

  box-shadow:
    inset 0 0 16px rgba(255, 153, 38, 0.4),
    0 0 7px rgba(255, 153, 38, 0.5);
}

/* Preserve visible Units while their spaces show the range preview. */
.battlefield-cell.cell-range-preview .unit-token {
  position: relative;
  z-index: 3;
}

/* Speed and Attack are the only controls that gray out. */
.selected-unit-control--speed.is-disabled,
.selected-unit-control--attack.is-disabled {
  color: #9a9da3;
  background:
    linear-gradient(145deg, #4d5056, #292b2f) !important;
  border-color: #666a71;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.36);
  cursor: not-allowed;
  opacity: 0.72;
}
/* =========================================================
   Player Stronghold Card — Camelot
========================================================= */

.stronghold--player.stronghold--card-art {
  position: relative;
  display: block;

  padding: 0;
  overflow: visible;

  background: #101217;
  border: 2px solid rgba(105, 190, 255, 0.9);
  border-radius: 10px;

  cursor: pointer;
  isolation: isolate;
}

.stronghold__card-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  user-select: none;
  pointer-events: none;
}

/* Temporary readable overlay until we decide the final board design. */
.stronghold__card-hud {
  position: absolute;
  inset: auto 5px 5px;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 4px 7px;

  color: #fff;
  background: rgba(5, 8, 12, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;

  pointer-events: none;
}

.stronghold__card-name {
  min-width: 0;

  font-size: clamp(9px, 1.25vh, 13px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stronghold--card-art .stronghold__health {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  flex: 0 0 auto;

  padding: 3px 6px;

  color: #fff;
  background: linear-gradient(145deg, #39a452, #0c5720);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;

  font-size: clamp(9px, 1.2vh, 12px);
  line-height: 1;
}
/* =========================================================
   Camelot placement and player pile order
========================================================= */

/* Center the Stronghold beneath the three recruiting spaces. */
.stronghold-lane--player {
  justify-self: center;
}

.stronghold-lane--player .stronghold {
  grid-column: 3 / 6;
  justify-self: stretch;
  width: 100%;
}

/* Put Banish directly above Discard. */
.zone-group--player-piles .zone-group__banish {
  grid-column: 2;
  grid-row: 1;
}

.zone-group--player-piles #playerDeckZone {
  grid-column: 1;
  grid-row: 2;
}

.zone-group--player-piles #playerDiscardZone {
  grid-column: 2;
  grid-row: 2;
}
/* Camelot effect appears below the card on hover/focus. */
.stronghold--card-art {
  overflow: visible;
}

.stronghold__effect {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 120;

  width: min(360px, 95vw);
  padding: 8px 10px;

  color: #fff;
  background: rgba(7, 9, 13, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);

  transition:
    opacity 120ms ease,
    visibility 120ms ease,
    transform 120ms ease;
}

.stronghold--card-art:hover .stronghold__effect,
.stronghold--card-art:focus-visible .stronghold__effect {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* =========================================================
   Action Cards, Character Selection, and Visible Action Stack
========================================================= */

.battlefield-stage {
  position: relative;
}

.action-prompt {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 500;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid #8bc4ff;
  border-radius: 999px;
  background: rgba(10, 23, 42, 0.96);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 800;
  pointer-events: none;
}

.unit-token.is-action-user-choice {
  border-color: #72c7ff !important;
  box-shadow:
    0 0 0 3px rgba(114, 199, 255, 0.35),
    0 0 22px rgba(57, 166, 255, 0.95);
  cursor: pointer;
  animation: action-user-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes action-user-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.3); }
}

.hand-card--action .hand-card__stats {
  color: #bfe2ff;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.event-column {
  position: relative;
}

.action-stack {
  position: absolute;
  top: 50%;
  z-index: 120;
  width: clamp(72px, 8.2vh, 100px);
  height: clamp(100px, 11.6vh, 138px);
  transform: translateY(-50%);
  pointer-events: none;
}

.action-stack--player {
  left: calc(100% + 10px);
}

.action-stack--enemy {
  right: calc(100% + 10px);
}

.action-stack.is-empty {
  display: none;
}

.action-stack-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 7px;
  overflow: hidden;
  border: 3px solid #ff3b3b;
  border-radius: 9px;
  background-color: #283544;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.58),
    0 0 8px rgba(255, 59, 59, 0.95),
    0 0 22px rgba(255, 35, 35, 0.72);
  transform:
    translate(
      calc(var(--stack-index) * 5px),
      calc(var(--stack-index) * -6px)
    );
}

.action-stack-card strong,
.action-stack-card span {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px #000;
}

.action-stack-card strong {
  font-size: clamp(9px, 1.1vh, 12px);
}

.action-stack-card span {
  margin-top: 3px;
  font-size: clamp(7px, 0.9vh, 10px);
}

.action-arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 110;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.action-arrow-layer polygon {
  fill: currentColor;
}

.action-user-arrow {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
  animation: action-arrow-flow 0.65s linear infinite;
}

.action-user-arrow--player,
.action-user-arrow--enemy {
  color: #ff3b3b;
  stroke: #ff3b3b;
  filter: drop-shadow(0 0 5px rgba(255, 35, 35, 0.95));
}

@keyframes action-arrow-flow {
  to { stroke-dashoffset: -13; }
}

.action-stack-card {
  animation: action-card-red-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes action-card-red-pulse {
  from {
    border-color: #ff3b3b;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.62),
      0 0 7px rgba(255, 59, 59, 0.86),
      0 0 17px rgba(255, 35, 35, 0.58);
  }

  to {
    border-color: #ff8a8a;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.62),
      0 0 12px rgba(255, 80, 80, 1),
      0 0 30px rgba(255, 35, 35, 0.88);
  }
}


/* =========================================================
   Action Priority, Resolution, Inspector, and Stat Modifiers
========================================================= */

.action-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.action-priority-pass {
  padding: 7px 11px;
  color: #fff;
  background: #8e2222;
  border: 1px solid #ff8585;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.action-priority-pass:hover,
.action-priority-pass:focus-visible {
  background: #b52b2b;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.unit-token.is-action-target-choice {
  border-color: #ffcf5c !important;
  box-shadow:
    0 0 0 3px rgba(255, 207, 92, 0.3),
    0 0 22px rgba(255, 181, 47, 0.95);
  cursor: crosshair;
}

.action-stack {
  pointer-events: auto;
}

.action-stack-card {
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform 260ms ease,
    border-color 260ms ease;
}

.action-stack-card.is-resolving {
  border-color: #ffd467;
  filter: brightness(1.24);
  animation: action-resolving-flash 0.34s ease-in-out infinite alternate;
}

.action-stack-card.is-resolved {
  opacity: 0.62;
  filter: saturate(0.35) brightness(1.35);
  transform:
    translate(
      calc(var(--stack-index) * 5px),
      calc(var(--stack-index) * -18px)
    )
    scale(0.94);
  animation: none;
}

@keyframes action-resolving-flash {
  from {
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.62),
      0 0 10px rgba(255, 70, 70, 0.95);
  }

  to {
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.62),
      0 0 14px rgba(255, 220, 105, 1),
      0 0 34px rgba(255, 190, 42, 0.94);
  }
}

.action-stack-inspector {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  z-index: 300;

  display: flex;
  flex-direction: column;
  gap: 4px;

  width: 190px;
  padding: 10px;

  color: #fff;
  background: rgba(10, 12, 17, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.72);

  font-size: 11px;
  line-height: 1.3;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(5px);
  transition:
    opacity 130ms ease,
    visibility 130ms ease,
    transform 130ms ease;

  pointer-events: none;
}

.action-stack--enemy .action-stack-inspector {
  left: calc(100% + 10px);
  right: auto;
}

.action-stack-card:hover .action-stack-inspector,
.action-stack-card:focus-visible .action-stack-inspector {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.action-user-arrow.is-resolved {
  color: #ffd467;
  stroke: #ffd467;
  filter: drop-shadow(0 0 7px rgba(255, 212, 103, 1));
  stroke-dasharray: none;
}

.unit-token.is-action-resolving-user {
  filter: brightness(1.45);
  box-shadow:
    0 0 0 3px rgba(255, 215, 90, 0.55),
    0 0 28px rgba(255, 196, 55, 1);
}

.unit-action-feedback {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 600;

  color: #79ff94;
  font-size: 17px;
  font-weight: 1000;
  text-shadow:
    0 2px 3px #000,
    0 0 9px rgba(60, 255, 109, 0.9);

  pointer-events: none;
  transform: translateX(-50%);
  animation: unit-action-feedback-rise 1.1s ease-out forwards;
}

@keyframes unit-action-feedback-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.84);
  }

  20% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate(-50%, -38px) scale(1.12);
  }
}

/* Only the displayed number changes color. The original stat labels retain
   their RNG/SPD/ATK identity colors. */
.selected-unit-control.is-stat-raised .selected-unit-control__value {
  color: #62ef7c !important;
  text-shadow:
    0 1px 2px #000,
    0 0 7px rgba(70, 255, 109, 0.68);
}

.selected-unit-control.is-stat-lowered .selected-unit-control__value {
  color: #ff6262 !important;
  text-shadow:
    0 1px 2px #000,
    0 0 7px rgba(255, 67, 67, 0.68);
}

/* =========================================================
   Commit 1 — Battlefield Inspection States
   Distinguishes inspection from active gameplay selection.
   Keep this section at the absolute bottom of game.css.
========================================================= */

/* Inspected cells use a cool cyan outline so they remain visually
   distinct from the gold active-selection treatment. */
.battlefield-cell.cell-inspected:not(.cell-selected) {
  position: relative;
  z-index: 60;
  overflow: visible;

  border-color: #66d9ff !important;
  filter: brightness(1.06) saturate(1.04);
  box-shadow:
    0 0 0 2px rgba(102, 217, 255, 0.26),
    0 0 15px rgba(70, 190, 255, 0.78),
    inset 0 0 10px rgba(115, 224, 255, 0.12) !important;
}

/* Preserve the stone artwork while applying a subtle inspection tint. */
.battlefield-cell.cell-inspected:not(.cell-selected):not(.cell-move):not(.cell-range):not(.cell-attack):not(.cell-attack-target) {
  background-image:
    linear-gradient(rgba(54, 173, 220, 0.12), rgba(54, 173, 220, 0.12)),
    url("battlefield-stone.png") !important;

  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* The inspected portrait receives a restrained outline rather than the
   floating gold animation reserved for the active selected unit. */
.unit-token.is-inspected-unit:not(.is-selected-unit) {
  position: relative;
  z-index: 62;

  filter: brightness(1.08) saturate(1.04);
  box-shadow:
    0 7px 15px rgba(0, 0, 0, 0.52),
    0 0 0 2px rgba(102, 217, 255, 0.38),
    0 0 14px rgba(70, 190, 255, 0.66);

  transform: scale(1.015);
}

/* When a friendly unit is both selected and inspected, active selection
   remains authoritative and the inspection styling does not compete. */
.battlefield-cell.cell-selected.cell-inspected {
  border-color: #f4d35e !important;
}

.unit-token.is-selected-unit.is-inspected-unit {
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.58),
    0 0 16px rgba(255, 222, 92, 0.72);
}

/* Inspection should not override legal movement, range, or attack cues. */
.battlefield-cell.cell-inspected.cell-move,
.battlefield-cell.cell-inspected.cell-range,
.battlefield-cell.cell-inspected.cell-attack,
.battlefield-cell.cell-inspected.cell-attack-target {
  z-index: 61;
}

/* Keyboard focus remains visible when the inspected cell is interactive. */
.battlefield-cell.cell-inspected:focus-visible {
  outline: 3px solid #b8efff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .battlefield-cell.cell-inspected,
  .unit-token.is-inspected-unit {
    transition: none;
  }
}

/* v15 Construct operator selection */
.unit-token.is-construct-operator-choice {
  outline: 4px solid rgba(255, 210, 80, 0.95);
  outline-offset: -4px;
  box-shadow: 0 0 18px rgba(255, 210, 80, 0.8);
  cursor: pointer;
}

/* v16 Item attachment target */
.unit-token.is-item-host-choice {
  outline: 3px solid rgba(255, 215, 92, .95);
  outline-offset: -4px;
  box-shadow: 0 0 18px rgba(255, 196, 48, .72);
  cursor: pointer;
}



/* =========================================================
   v16.2 Selection / Priority UI correction
========================================================= */

/* The prompt is already placed in the left side panel between
   Selected Unit and Game Chat. Keep it in normal document flow. */
.side-panel > .action-prompt {
  position: static;
  inset: auto;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  transform: none;
  border-radius: 12px;
  z-index: auto;
}


/* v17.1 — Persistent Event slots and replacement choice */
.game-zone--event.is-occupied {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: rgba(222, 190, 111, .9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 16px rgba(208,164,70,.22);
  color: #fff7dd;
}
.game-zone--event.is-occupied span {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 4px #000;
}
.event-choice-modal__dialog { width: min(760px, calc(100vw - 32px)); }
.event-choice-modal__eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .16em; color: #d8bd77; font-size: .75rem; }
.event-choice-modal__cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 22px 0; }
.event-choice-card {
  min-height: 260px; padding: 18px; border: 1px solid rgba(217,185,104,.72); border-radius: 12px;
  background-color: #171b20; background-position: center; background-repeat: no-repeat; background-size: cover;
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.event-choice-card:hover, .event-choice-card:focus-visible { transform: translateY(-2px); border-color: #ffe29a; box-shadow: 0 0 0 3px rgba(255,215,120,.18); }
.event-choice-card strong { font-size: 1.25rem; margin: 5px 0 8px; text-shadow: 0 2px 4px #000; }
.event-choice-card span:last-child { font-size: .86rem; line-height: 1.35; text-shadow: 0 2px 4px #000; }
.event-choice-card__label { color: #f1d68e; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 680px) { .event-choice-modal__cards { grid-template-columns: 1fr; } .event-choice-card { min-height: 180px; } }


/* v18.6 — Arena priority controls and stack previews */
.arena-priority-toolbar { display:grid; grid-template-columns:1fr auto auto; gap:.45rem; margin-top:.7rem; }
.arena-toggle { border:1px solid rgba(255,255,255,.22); border-radius:.45rem; padding:.48rem .58rem; background:rgba(8,13,20,.72); color:#e9eef5; font:inherit; font-size:.75rem; cursor:pointer; }
.arena-toggle:hover, .arena-toggle:focus-visible { border-color:rgba(255,255,255,.55); }
.arena-toggle.is-active { box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 18px rgba(255,255,255,.18); background:rgba(65,82,104,.82); }
.arena-settings, .arena-debug { margin-top:.65rem; padding:.65rem; border:1px solid rgba(255,255,255,.14); border-radius:.5rem; background:rgba(4,8,13,.72); }
.arena-stop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .55rem; margin-top:.5rem; }
.arena-stop { display:flex; align-items:center; gap:.38rem; font-size:.72rem; cursor:pointer; }
.arena-stop input { accent-color:currentColor; }
.arena-debug { display:grid; gap:.25rem; font-size:.72rem; }
.arena-debug > div { display:grid; grid-template-columns:4.5rem 1fr; gap:.5rem; }
.arena-debug dt { opacity:.65; }
.arena-debug dd { margin:0; overflow-wrap:anywhere; }
.priority-panel.has-priority { box-shadow:0 0 0 1px rgba(255,255,255,.42), 0 0 26px rgba(255,255,255,.16); animation:priority-panel-pulse 1.8s ease-in-out infinite; }
@keyframes priority-panel-pulse { 50% { box-shadow:0 0 0 1px rgba(255,255,255,.62), 0 0 34px rgba(255,255,255,.25); } }
.action-stack-card__type { display:block; margin-top:.2rem; opacity:.8; font-size:.58rem; letter-spacing:.06em; }
.unit-token.is-stack-source { outline:3px solid rgba(255,255,255,.9); outline-offset:3px; filter:brightness(1.18); }
.unit-token.is-stack-target, .stronghold.is-stack-target { outline:3px dashed rgba(255,255,255,.9); outline-offset:4px; filter:brightness(1.18); }
.action-stack-card.is-resolving { animation:stack-resolve-pulse .75s ease-in-out infinite alternate; }
@keyframes stack-resolve-pulse { to { transform:translateY(-4px) scale(1.035); filter:brightness(1.3); } }
@media (max-width:900px) { .arena-stop-grid { grid-template-columns:1fr; } .arena-priority-toolbar { grid-template-columns:1fr 1fr; } .arena-priority-toolbar .arena-toggle:first-child { grid-column:1/-1; } }

/* v18.7 — compact Arena-style priority interface */
.game-layout > .side-panel:first-of-type {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.game-layout > .side-panel:first-of-type > .panel-card:first-child {
  flex: 0 0 auto;
}

.priority-dock {
  position: relative;
  flex: 0 0 auto;
  margin: .55rem 0;
  padding: .5rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .65rem;
  background: linear-gradient(180deg, rgba(20,28,38,.94), rgba(7,11,17,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.priority-dock.has-priority {
  border-color: rgba(118,185,255,.8);
  box-shadow: 0 0 0 1px rgba(118,185,255,.22), 0 0 18px rgba(72,145,229,.22);
}

.priority-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.priority-toolbar__label {
  color: #8fa2b6;
  font: 800 .66rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
}

.priority-step,
.priority-icon-button,
.priority-mode-toggle,
.priority-pass-button,
.priority-debug-toggle {
  min-height: 2rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .45rem;
  background: rgba(7,12,19,.82);
  color: #dce6f0;
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}

.priority-step:hover,
.priority-icon-button:hover,
.priority-mode-toggle:hover,
.priority-pass-button:not(:disabled):hover,
.priority-debug-toggle:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(37,53,72,.9);
}

.priority-step.is-active {
  border-color: #63aef5;
  color: #fff;
  background: linear-gradient(180deg, #3f83c9, #24588c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 10px rgba(76,154,232,.25);
}

.priority-step:disabled { opacity: .5; cursor: default; }
.priority-icon-button { width: 2.1rem; padding: 0; font-size: .9rem; }

.priority-action-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem;
  margin-top: .42rem;
}

.priority-mode-toggle { min-width: 3.7rem; padding: 0 .55rem; }
.priority-mode-toggle.is-active {
  border-color: #e6b75c;
  color: #fff2c7;
  background: linear-gradient(180deg, #8f6425, #5d3b12);
}

.priority-status {
  min-width: 0;
  overflow: hidden;
  color: rgba(229,237,246,.78);
  font-size: .68rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-pass-button {
  min-width: 4rem;
  padding: 0 .65rem;
  border-color: rgba(112,183,255,.48);
}
.priority-pass-button:not(:disabled) {
  color: #fff;
  background: linear-gradient(180deg, #397fc2, #245680);
  box-shadow: 0 0 12px rgba(77,158,238,.2);
}
.priority-pass-button:disabled { opacity: .42; cursor: default; }

.priority-choice-prompt {
  margin-top: .45rem;
  padding: .45rem .55rem;
  border-left: 3px solid #6eb5f5;
  border-radius: .35rem;
  background: rgba(10,17,26,.88);
  font-size: .72rem;
}
.priority-choice-prompt__message { overflow-wrap: anywhere; }

.priority-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + .4rem);
  left: .35rem;
  right: auto;
  width: min(18rem, calc(100vw - 2rem));
  max-width: calc(100vw - 1rem);
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .65rem;
  background: rgba(5,9,14,.98);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.priority-popover__header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.priority-debug-toggle { min-height:1.75rem; padding:0 .5rem; font-size:.64rem; }

.game-layout > .side-panel:first-of-type > .chat-panel {
  flex: 1 1 auto;
  min-height: 12rem;
  margin-top: 0;
}
.game-layout > .side-panel:first-of-type > .chat-panel .chat-messages {
  flex: 1 1 auto;
  min-height: 0;
}

/* One readable stack floating over the battlefield, hidden while empty. */
.floating-stack {
  position: absolute;
  z-index: 48;
  top: 50%;
  right: clamp(.65rem, 2vw, 1.5rem);
  width: clamp(13rem, 18vw, 17rem);
  max-height: min(62vh, 31rem);
  transform: translateY(-50%);
  pointer-events: none;
}
.floating-stack[hidden], .floating-stack.is-empty { display: none !important; }
.floating-stack__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 .35rem .35rem;
  color: rgba(235,242,250,.8);
  font: 800 .65rem/1 system-ui, sans-serif;
  letter-spacing: .16em;
  text-shadow: 0 2px 4px #000;
}
.floating-stack__header strong {
  display:grid;
  place-items:center;
  min-width:1.4rem;
  height:1.4rem;
  border-radius:999px;
  background:rgba(0,0,0,.65);
}
.floating-stack__entries {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  max-height:inherit;
  overflow:auto;
  padding:.25rem;
  pointer-events:auto;
  scrollbar-width:thin;
}
.floating-stack-card {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:center;
  gap:.55rem;
  min-height:4.25rem;
  padding:.55rem .65rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:.65rem;
  background:linear-gradient(135deg, rgba(28,38,50,.96), rgba(8,13,20,.97));
  color:#eef4fa;
  box-shadow:0 7px 18px rgba(0,0,0,.38);
  transition:transform .15s ease, border-color .15s ease, filter .15s ease;
}
.floating-stack-card:hover,
.floating-stack-card:focus-visible {
  transform:translateX(-5px);
  border-color:rgba(134,196,255,.85);
  outline:none;
}
.floating-stack-card.is-top { border-color:rgba(102,176,245,.65); }
.floating-stack-card__icon {
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  font-size:1.05rem;
}
.floating-stack-card__content { display:flex; min-width:0; flex-direction:column; gap:.17rem; }
.floating-stack-card__content strong { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.floating-stack-card__content span { overflow:hidden; color:rgba(224,233,242,.68); font-size:.58rem; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.floating-stack-card__content .floating-stack-card__target { color:#b9dafa; font-size:.65rem; }
.floating-stack-card.is-resolving { animation:floating-stack-resolve .72s ease-in-out infinite alternate; }
.floating-stack-card.is-fizzled { opacity:.55; filter:grayscale(.5); }
@keyframes floating-stack-resolve { to { transform:translateX(-7px) scale(1.025); filter:brightness(1.25); } }

/* Retire the old side stacks even if an older cached template still contains them. */
.action-stack--player,
.action-stack--enemy { display:none !important; }

@media (max-width: 900px) {
  .floating-stack { top:auto; right:.5rem; bottom:.5rem; width:min(15rem, 45vw); transform:none; }
  .priority-status { display:none; }
  .priority-action-row { grid-template-columns:1fr 1fr; }
}


/* v18.7.1 — interface alignment hotfixes */
.priority-popover {
  /* Open toward the battlefield rather than beyond the viewport edge. */
  left: .35rem;
  right: auto;
}

.stronghold-lane--enemy,
.stronghold-lane--player {
  justify-self: center;
  width: calc(var(--battlefield-cell-size) * 7 + var(--screen-gap) * 6);
}

.stronghold-lane--enemy .stronghold,
.stronghold-lane--player .stronghold {
  justify-self: stretch;
}


/* v18.7.2 — recruitment type handoff and popover clipping hotfix */
.game-layout > .side-panel:first-of-type {
  overflow: visible;
}

.priority-popover {
  left: .75rem;
  right: auto;
  width: min(20rem, calc(100vw - 1.5rem));
  max-width: none;
}

@media (max-width: 900px) {
  .priority-popover {
    width: min(19rem, calc(100vw - 1.5rem));
  }
}

/* v18.7.3 — layered full-card stack and attack-resolution hotfix */
.floating-stack {
  width: min(31rem, calc(100% - 1rem));
  max-height: min(70vh, 38rem);
}

.floating-stack__body {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(12rem, 15rem);
  align-items: center;
  justify-content: end;
  gap: .65rem;
}

.floating-stack__entries {
  align-self: center;
  max-height: min(60vh, 29rem);
}

.floating-stack__cards {
  position: relative;
  min-width: 0;
  height: min(52vh, 25rem);
  pointer-events: auto;
}

.stack-full-card {
  --stack-card-offset: clamp(2rem, 4.8vh, 3rem);
  position: absolute;
  z-index: calc(100 - var(--layer-index));
  inset: calc(var(--layer-index) * var(--stack-card-offset)) 0 auto auto;
  display: grid;
  grid-template-rows: minmax(7.5rem, 1fr) auto;
  width: clamp(11.5rem, 14vw, 14rem);
  height: clamp(16rem, 37vh, 20.5rem);
  overflow: hidden;
  border: 2px solid rgba(214, 224, 235, .34);
  border-radius: .82rem;
  background: linear-gradient(150deg, rgba(31, 41, 52, .99), rgba(5, 9, 14, .99));
  color: #f2f6fa;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .58);
  transform: translateX(calc(var(--layer-index) * -5px)) scale(calc(1 - var(--layer-index) * .012));
  transform-origin: top right;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease, border-color .18s ease;
}

.stack-full-card.is-top { border-color: rgba(110, 188, 255, .9); }
.stack-full-card.is-muted { opacity: .45; filter: brightness(.68) saturate(.65); }
.stack-full-card.is-focused,
.stack-full-card:hover,
.stack-full-card:focus-visible {
  z-index: 150;
  outline: none;
  border-color: rgba(159, 211, 255, 1);
  transform: translate(-.7rem, -.35rem) scale(1.035);
  filter: brightness(1.08);
}
.stack-full-card.is-resolving { animation: stack-full-card-resolve .72s ease-in-out infinite alternate; }
.stack-full-card.is-fizzled { opacity: .6; filter: grayscale(.6); }

.stack-full-card__art {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle, rgba(107, 151, 192, .3), rgba(7, 13, 20, .96));
  font-size: 3rem;
}
.stack-full-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.stack-full-card__details {
  display: flex;
  min-height: 5.1rem;
  flex-direction: column;
  gap: .22rem;
  padding: .55rem .65rem .65rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: rgba(4, 8, 13, .96);
}
.stack-full-card__type {
  color: #a9d7ff;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .11em;
}
.stack-full-card__details strong {
  overflow: hidden;
  font-size: .83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-full-card__stats,
.stack-full-card__target {
  overflow: hidden;
  color: rgba(229, 237, 245, .72);
  font-size: .6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack-full-card__target { color: #b9dafa; }

@keyframes stack-full-card-resolve {
  to { transform: translate(-.65rem, -.35rem) scale(1.04); filter: brightness(1.28); }
}

@media (max-width: 1100px) {
  .floating-stack { width: min(27rem, calc(100% - .75rem)); }
  .floating-stack__body { grid-template-columns: minmax(9.5rem, 12rem) minmax(10.5rem, 13rem); }
  .stack-full-card { width: clamp(10.5rem, 17vw, 12.5rem); }
}

@media (max-width: 760px) {
  .floating-stack { width: min(15rem, 48vw); }
  .floating-stack__body { display: block; }
  .floating-stack__entries { display: none; }
  .floating-stack__cards { height: min(48vh, 22rem); }
}

/* v18.7.6 — full-size layered stack positioning polish
   Keep full-size stack cards, but move the event/card group farther right so
   it occupies the lane between the compact event summary and card preview. */
.floating-stack {
  right: clamp(-4rem, -3vw, -2rem);
  width: min(30rem, calc(100% - .5rem));
}

.floating-stack__body {
  grid-template-columns: minmax(9.75rem, 12rem) minmax(12rem, 15rem);
  gap: .45rem;
}

/* Preserve the full-size card dimensions from v18.7.3. */
.stack-full-card {
  width: clamp(11.5rem, 14vw, 14rem);
  height: clamp(16rem, 37vh, 20.5rem);
}

@media (max-width: 1100px) {
  .floating-stack {
    right: clamp(-2.75rem, -2vw, -1.25rem);
    width: min(27rem, calc(100% - .5rem));
  }

  .floating-stack__body {
    grid-template-columns: minmax(9rem, 11rem) minmax(10.5rem, 13rem);
  }
}

@media (max-width: 760px) {
  .floating-stack {
    right: .35rem;
  }
}

/* v18.7.7 — right-side layered stack lane and target-click visibility fix
   Keep the complete physical card face, but use a smaller display scale and
   reserve the far-right battlefield lane for the stack so it does not cover
   the grid or the compact event summary. */
@media (min-width: 1101px) {
  .floating-stack {
    /* Pull the entire event/card pair into the unused lane immediately before
       the Card Preview sidebar. Negative positioning intentionally lets the
       overlay occupy the stage gutter without participating in grid layout. */
    right: clamp(-9.75rem, -8.25vw, -7.25rem);
    width: min(25rem, calc(100% - .5rem));
  }

  .floating-stack__body {
    grid-template-columns: minmax(8.75rem, 10.25rem) minmax(9.75rem, 11rem);
    gap: .35rem;
  }

  .floating-stack__cards {
    height: min(45vh, 21.5rem);
  }

  /* This is still the complete card, including its printed art and text.
     Only the on-screen stack copy is reduced so it fits between the event
     summary and the dedicated full-size Card Preview panel. */
  .stack-full-card {
    --stack-card-offset: clamp(1.7rem, 4vh, 2.45rem);
    width: clamp(9.75rem, 11.5vw, 11rem);
    height: clamp(13.9rem, 31.5vh, 16.2rem);
  }

  .stack-full-card__details {
    min-height: 4.35rem;
    padding: .42rem .52rem .5rem;
  }

  .stack-full-card__details strong { font-size: .73rem; }
  .stack-full-card__type { font-size: .5rem; }
  .stack-full-card__stats,
  .stack-full-card__target { font-size: .53rem; }
}

/* Unit names must never interfere with target selection. Keep the helpful
   label, but require a deliberate hover before revealing it and keep it
   visually closer to the tile instead of immediately covering nearby units. */
.unit-name-banner {
  bottom: calc(100% + 3px);
  max-width: 140px;
  transition-delay: 0s;
}

.unit-token:hover .unit-name-banner {
  transition-delay: 360ms;
}

/* Selected-unit controls already identify the selected Character. Suppress
   the extra name banner there, where Actions commonly require clicking a
   nearby card or tile. */
.cell-selected .unit-name-banner {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .floating-stack {
    right: clamp(-5.5rem, -5vw, -3.5rem);
    width: min(23rem, calc(100% - .5rem));
  }

  .floating-stack__body {
    grid-template-columns: minmax(8rem, 9.5rem) minmax(9rem, 10.5rem);
    gap: .3rem;
  }

  .stack-full-card {
    width: clamp(9rem, 14vw, 10.25rem);
    height: clamp(13rem, 30vh, 15.25rem);
  }
}

/* v18.8.1 — Counter-only priority UI. */
.selected-unit-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
}

.priority-icon-button--developer {
  width: 2.25rem;
  min-height: 2.25rem;
  opacity: .72;
}
.priority-icon-button--developer:hover { opacity: 1; }

.priority-popover--developer {
  top: calc(100% + .35rem);
  left: auto;
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
}

.priority-developer-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .65rem;
  color: rgba(229,237,246,.86);
  font: 700 .72rem/1 system-ui, sans-serif;
}

.priority-dock--counter {
  padding: .65rem;
  border-color: rgba(118,185,255,.5);
}
.priority-dock--counter[hidden] { display: none !important; }
.priority-counter-heading {
  color: #8fc8ff;
  font: 900 .68rem/1 system-ui, sans-serif;
  letter-spacing: .13em;
}
.priority-action-row--counter {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: .48rem;
}
.priority-action-row--counter .priority-status {
  text-align: left;
  white-space: normal;
  line-height: 1.25;
}

/* v18.9 Conceal — Pass 1 */
.unit-token--concealed-back {
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 205, 103, 0.24), transparent 28%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.055) 0 7px, rgba(0,0,0,0.06) 7px 14px),
    linear-gradient(145deg, #241937, #090b14 68%, #3a2514) !important;
  border: 2px solid rgba(225, 190, 98, 0.8) !important;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.55), inset 0 0 22px rgba(218,173,75,0.18);
}
.unit-token--concealed-back::after {
  content: "?";
  position: absolute;
  inset: 12% 22%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(224, 190, 106, 0.55);
  border-radius: 50%;
  color: #ead28d;
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 900;
  text-shadow: 0 2px 6px #000;
}
.unit-token.is-concealed .unit-name-banner { z-index: 2; }
.conceal-reveal-button {
  float: left;
  margin: 0 0.75rem 0.55rem 0;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(233, 198, 102, 0.85);
  border-radius: 6px;
  background: linear-gradient(#57431b, #241907);
  color: #fff0b5;
  font-weight: 800;
  cursor: pointer;
}
.conceal-reveal-button:hover { filter: brightness(1.18); }

/* v19.3 Mount controls and mounted-pair battlefield presentation */
.selected-unit-controls__mount-row {
  position: absolute;
  left: 50%;
  top: calc(100% + 39px);
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 2;
}

.selected-unit-mount-control {
  min-width: 92px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 235, 170, 0.9);
  border-radius: 8px;
  color: #fff7d6;
  background: linear-gradient(145deg, #72551b, #342306);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(0,0,0,.55);
}
.selected-unit-mount-control:hover:not(:disabled),
.selected-unit-mount-control.is-active {
  filter: brightness(1.2);
  box-shadow: 0 0 0 2px rgba(255,235,170,.38), 0 0 14px rgba(255,190,60,.55);
}
.selected-unit-mount-control:disabled { opacity: .5; cursor: not-allowed; }

.unit-rider-badge {
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 8;
  max-width: calc(100% - 10px);
  transform: translateX(-50%);
  padding: 3px 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #fff;
  background: rgba(25,16,5,.88);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0,0,0,.72);
}
.unit-rider-badge:hover { filter: brightness(1.25); }

.battlefield-cell.cell-mount-target {
  box-shadow: inset 0 0 0 4px rgba(255, 188, 54, .95), 0 0 18px rgba(255, 166, 30, .8);
}
.battlefield-cell.cell-dismount-target {
  box-shadow: inset 0 0 0 4px rgba(80, 220, 175, .95), 0 0 18px rgba(50, 210, 160, .72);
}

/* =============================================================
   V19.7 — Animation and visual polish
   ============================================================= */

@keyframes wus-reveal-burst {
  0% { transform: perspective(700px) rotateY(90deg) scale(.88); filter: brightness(.65) saturate(.35); opacity: .25; }
  45% { transform: perspective(700px) rotateY(-8deg) scale(1.08); filter: brightness(1.9) saturate(1.45); opacity: 1; }
  100% { transform: perspective(700px) rotateY(0) scale(1); filter: brightness(1) saturate(1); opacity: 1; }
}

@keyframes wus-conceal-fold {
  0% { transform: perspective(700px) rotateY(0) scale(1); filter: brightness(1); }
  50% { transform: perspective(700px) rotateY(82deg) scale(.92); filter: brightness(.55) saturate(.35); }
  100% { transform: perspective(700px) rotateY(0) scale(1); filter: brightness(.8) saturate(.65); }
}

@keyframes wus-mount-depart {
  0% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
  100% { transform: translate3d(18px,-18px,0) scale(.55); opacity: 0; }
}

@keyframes wus-mount-arrive {
  0% { transform: scale(.94); filter: brightness(1); }
  35% { transform: scale(1.12); filter: brightness(1.8) saturate(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes wus-dismount-release {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); filter: brightness(1.45); }
}

@keyframes wus-dismount-arrive {
  0% { transform: translate3d(-14px,14px,0) scale(.6); opacity: 0; }
  65% { transform: translate3d(2px,-2px,0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}

@keyframes wus-construct-awaken {
  0% { filter: brightness(.75) saturate(.6); box-shadow: 0 0 0 rgba(120,235,255,0); }
  45% { filter: brightness(1.6) saturate(1.35); box-shadow: 0 0 22px rgba(120,235,255,.95); }
  100% { filter: brightness(1) saturate(1); box-shadow: 0 0 8px rgba(120,235,255,.25); }
}

@keyframes wus-construct-sleep {
  0% { filter: brightness(1.3) saturate(1.2); }
  100% { filter: brightness(.72) saturate(.55); }
}

@keyframes wus-damage-chosen {
  0%,100% { transform: scale(1); filter: brightness(1); }
  22% { transform: scale(1.1); filter: brightness(2.15) saturate(1.7); }
  48% { transform: translateX(-4px) scale(1.04); }
  65% { transform: translateX(4px) scale(1.04); }
}

.unit-reveal-burst { animation: wus-reveal-burst .72s cubic-bezier(.2,.8,.2,1); transform-origin: center; }
.unit-conceal-fold { animation: wus-conceal-fold .52s ease-in-out; transform-origin: center; }
.unit-mount-depart { animation: wus-mount-depart .42s ease-in forwards; }
.unit-mount-arrive { animation: wus-mount-arrive .62s cubic-bezier(.18,.8,.2,1); }
.unit-dismount-release { animation: wus-dismount-release .48s ease-out; }
.unit-dismount-arrive { animation: wus-dismount-arrive .62s cubic-bezier(.18,.8,.2,1); }
.construct-range-awaken { animation: wus-construct-awaken .76s ease-out; }
.construct-range-sleep { animation: wus-construct-sleep .62s ease-out; }
.combat-damage-chosen { animation: wus-damage-chosen .62s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .unit-reveal-burst,
  .unit-conceal-fold,
  .unit-mount-depart,
  .unit-mount-arrive,
  .unit-dismount-release,
  .unit-dismount-arrive,
  .construct-range-awaken,
  .construct-range-sleep,
  .combat-damage-chosen {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V19.9.2 — Deck and draw interface */
.game-zone--pile.is-empty {
  opacity: .62;
  box-shadow: inset 0 0 0 2px rgba(185, 62, 62, .42);
}

.deck-preview h3 { margin: 0 0 .45rem; }

.draw-card-animation {
  --draw-start-x: 50vw;
  --draw-start-y: 50vh;
  --draw-end-x: 50vw;
  --draw-end-y: 85vh;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 82px;
  aspect-ratio: 5 / 7;
  border: 2px solid rgba(235, 214, 159, .9);
  border-radius: 8px;
  background: linear-gradient(145deg, #372715, #101014 70%);
  background-position: center;
  background-size: cover;
  box-shadow: 0 12px 30px rgba(0,0,0,.65), 0 0 22px rgba(230,194,110,.28);
  display: grid;
  place-items: center;
  color: #ead9ab;
  font: 800 .85rem/1 system-ui, sans-serif;
  transform: translate(calc(var(--draw-start-x) - 41px), calc(var(--draw-start-y) - 57px)) scale(.72) rotate(-6deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 560ms cubic-bezier(.2,.8,.2,1), opacity 120ms ease;
}

.draw-card-animation.is-drawing {
  transform: translate(calc(var(--draw-end-x) - 41px), calc(var(--draw-end-y) - 57px)) scale(1) rotate(0deg);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .draw-card-animation { transition-duration: 1ms; }
}

/* V19.9.3 — Public Discard / Banish browser ----------------------------- */
.public-zone-modal[hidden] { display: none; }
.public-zone-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: end center;
  padding: 20px;
}
.public-zone-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 9, .78);
  backdrop-filter: blur(5px);
}
.public-zone-modal__dialog {
  position: relative;
  width: min(1180px, calc(100vw - 40px));
  max-height: min(72vh, 720px);
  overflow: hidden;
  border: 1px solid rgba(216, 189, 119, .58);
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, rgba(24, 29, 31, .99), rgba(11, 14, 15, .99));
  box-shadow: 0 -18px 70px rgba(0, 0, 0, .72), inset 0 1px rgba(255,255,255,.08);
}
.public-zone-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(216, 189, 119, .22);
}
.public-zone-modal__header h2,
.public-zone-modal__header p { margin: 0; }
.public-zone-modal__header h2 {
  color: #f3dfaa;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-zone-modal__header p {
  margin-top: 3px;
  color: #aeb8ba;
  font-size: .82rem;
}
.public-zone-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d7dede;
}
.public-zone-modal__close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(216, 189, 119, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  color: #f5e5ba;
  font: 700 1.55rem/1 sans-serif;
  cursor: pointer;
}
.public-zone-modal__close:hover,
.public-zone-modal__close:focus-visible {
  border-color: #f5df9f;
  background: rgba(216, 189, 119, .16);
  outline: none;
}
.public-zone-modal__cards.hand-fan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  align-items: start;
  gap: 15px;
  width: 100%;
  max-height: calc(min(72vh, 720px) - 78px);
  overflow: auto;
  padding: 18px;
}
.public-zone-card.hand-card {
  width: 100%;
  min-width: 0;
  height: 194px;
  transform: none;
  cursor: zoom-in;
}
.public-zone-card.hand-card:hover,
.public-zone-card.hand-card:focus-visible {
  transform: translateY(-5px) scale(1.02);
  z-index: 2;
}
.public-zone-modal__empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  margin: 0;
  color: #aeb8ba;
  font-style: italic;
}
body.public-zone-browser-open { overflow: hidden; }
@media (max-width: 680px) {
  .public-zone-modal { padding: 8px; }
  .public-zone-modal__dialog { width: calc(100vw - 16px); max-height: 82vh; }
  .public-zone-modal__cards.hand-fan {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    max-height: calc(82vh - 78px);
    padding: 12px;
    gap: 10px;
  }
  .public-zone-card.hand-card { height: 165px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-zone-card.hand-card { transition: none !important; }
}

/* V19.9.4 — Army Zone -------------------------------------------------- */
.game-zone--army {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
.game-zone--army.is-empty { opacity: .7; }
.game-zone--army:disabled { cursor: default; }
.game-zone--army:disabled:hover { transform: none; border-color: #656b78; }
.army-zone__empty-label,
.army-zone__name {
  display: block;
  position: relative;
  z-index: 1;
  line-height: 1.05;
  text-shadow: 0 1px 3px #000;
}
.game-zone--army small {
  display: block;
  margin-top: 5px;
  color: #aeb7c5;
}
.army-zone__amount {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  min-width: 27px;
  height: 27px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #ead59d;
  border-radius: 50%;
  background: rgba(13, 16, 18, .92);
  color: #fff1bf;
  box-shadow: 0 2px 8px rgba(0,0,0,.7);
  font-weight: 900;
  font-size: 14px;
}
@keyframes wus-army-amass {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.1); filter: brightness(1.75) saturate(1.35); box-shadow: 0 0 22px rgba(235, 210, 135, .82); }
}
.game-zone--army.army-zone--amassed { animation: wus-army-amass .62s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .game-zone--army.army-zone--amassed { animation-duration: 1ms; }
}

/* V19.9.5 Event Zone */
.game-zone--event.is-occupied {
  cursor: pointer;
  background-position: center;
  background-size: cover;
  border-color: rgba(244, 209, 116, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 239, 183, 0.22), 0 0 18px rgba(205, 159, 62, 0.24);
}
.game-zone--event.is-occupied strong,
.game-zone--event.is-occupied span {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px #000, 0 0 7px #000;
}

/* V19.9.6.1a pre-match coin flip */
body.prematch-locked { overflow: hidden; }
.coin-flip-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; }
.coin-flip-modal[hidden] { display: none; }
.coin-flip-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 12, .92); backdrop-filter: blur(8px); }
.coin-flip-modal__dialog { position: relative; width: min(520px, 100%); padding: 28px; text-align: center; color: #f4f6fb; border: 1px solid rgba(232, 185, 79, .48); border-radius: 16px; background: linear-gradient(180deg, rgba(19, 28, 44, .98), rgba(5, 10, 18, .98)); box-shadow: 0 25px 90px rgba(0, 0, 0, .7); }
.coin-flip-modal__eyebrow { margin: 0; color: #e8b94f; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.coin-flip-modal__dialog h2 { margin: 7px 0 14px; font-size: 36px; }
.coin-flip-modal__coin { display: grid; place-items: center; width: 112px; height: 112px; margin: 12px auto 18px; border: 7px double #f2d27d; border-radius: 50%; color: #17120a; background: radial-gradient(circle at 35% 30%, #fff1a8, #d49a28 58%, #7a4b0c); font-weight: 1000; letter-spacing: .08em; box-shadow: 0 12px 30px rgba(0,0,0,.48), inset 0 0 0 4px rgba(90,50,5,.35); }
.coin-flip-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.coin-flip-modal__actions button { min-height: 48px; border: 1px solid rgba(232,185,79,.5); border-radius: 9px; color: #fff; background: #8f6724; font: inherit; font-weight: 900; cursor: pointer; }
.coin-flip-modal__actions button:hover:not(:disabled) { filter: brightness(1.16); }
.coin-flip-modal__actions button:disabled { opacity: .45; cursor: wait; }
.coin-flip-modal__result { min-height: 1.5em; margin: 17px 0 0; color: #ffe49a; font-weight: 900; }

/* V19.9.6.2 — Pre-game deck lobby */
.pregame-lobby[hidden] { display: none; }
.pregame-lobby {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.pregame-lobby__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 8, 0.88);
  backdrop-filter: blur(8px);
}
.pregame-lobby__dialog {
  position: relative;
  width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(217, 188, 111, 0.55);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35, 38, 34, 0.98), rgba(13, 16, 15, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.75);
  color: #f2ead4;
}
.pregame-lobby__eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: #d9bc6f;
}
.pregame-lobby__dialog h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.pregame-lobby__message { min-height: 1.5em; color: #c9c4b5; }
.pregame-lobby__players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.pregame-player-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.pregame-player-card h3 { margin: 0 0 14px; font-size: 1.3rem; }
.pregame-player-card label { display: block; margin-bottom: 7px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #bbb5a5; }
.pregame-player-card select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(217, 188, 111, 0.45);
  border-radius: 9px;
  background: #171a18;
  color: #f5efd9;
}
.pregame-deck-details { margin-top: 16px; }
.pregame-deck-details__status { margin-bottom: 12px; font-weight: 700; }
.pregame-deck-details__status--valid { color: #a7d58b; }
.pregame-deck-details__status--invalid { color: #e28e82; }
.pregame-deck-details dl { margin: 0; }
.pregame-deck-details dl > div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pregame-deck-details dt { color: #a9a495; }
.pregame-deck-details dd { margin: 0; overflow-wrap: anywhere; }
.pregame-deck-details__errors { margin: 12px 0 0; padding-left: 20px; color: #e6a097; font-size: 0.88rem; }
.pregame-lobby__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.pregame-lobby__actions button:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 720px) {
  .pregame-lobby { padding: 10px; }
  .pregame-lobby__dialog { padding: 20px; }
  .pregame-lobby__players { grid-template-columns: 1fr; }
}

/* V19.9.6.3 opening-hand mulligan */
.mulligan-modal[hidden] { display: none; }
.mulligan-modal { position: fixed; inset: 0; z-index: 3050; display: grid; place-items: center; padding: 18px; }
.mulligan-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 12, .94); backdrop-filter: blur(9px); }
.mulligan-modal__dialog { position: relative; width: min(1120px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 26px; color: #f5f2e8; border: 1px solid rgba(232,185,79,.5); border-radius: 16px; background: linear-gradient(180deg, rgba(20,29,44,.99), rgba(5,10,18,.99)); box-shadow: 0 25px 90px rgba(0,0,0,.72); text-align: center; }
.mulligan-modal__eyebrow { margin: 0; color: #e8b94f; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mulligan-modal__dialog h2 { margin: 6px 0 8px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.mulligan-modal__prompt { max-width: 760px; margin: 0 auto 20px; color: #cbc5b5; }
.mulligan-cards { display: grid; grid-template-columns: repeat(6, minmax(105px, 1fr)); gap: 12px; }
.mulligan-card { min-width: 0; padding: 8px; border: 1px solid rgba(232,185,79,.28); border-radius: 10px; background: rgba(255,255,255,.045); }
.mulligan-card img, .mulligan-card__back { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 7px; background: linear-gradient(145deg, #31220f, #101827); color: #e8b94f; font-weight: 1000; }
.mulligan-card strong { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: .82rem; }
.mulligan-modal__actions { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }
.mulligan-modal__actions button { min-width: 170px; min-height: 48px; border: 1px solid rgba(232,185,79,.55); border-radius: 9px; color: #fff; background: #78571f; font: inherit; font-weight: 900; cursor: pointer; }
.mulligan-modal__actions button:last-child { background: #315f3d; }
.mulligan-modal__actions button:disabled { opacity: .48; cursor: wait; }
@media (max-width: 900px) { .mulligan-cards { grid-template-columns: repeat(3, minmax(95px, 1fr)); } }
@media (max-width: 520px) { .mulligan-modal__dialog { padding: 18px; } .mulligan-cards { grid-template-columns: repeat(2, minmax(90px, 1fr)); } .mulligan-modal__actions { flex-direction: column; } .mulligan-modal__actions button { width: 100%; } }


/* v19.9.6.4e — UI interaction polish */
.priority-popover--developer {
  position: fixed !important;
  z-index: 5000 !important;
  top: 4.5rem !important;
  left: 1rem !important;
  right: auto !important;
}

.deployment-choice-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 1.25rem; }
.deployment-choice-modal[hidden] { display: none !important; }
.deployment-choice-backdrop { position: absolute; inset: 0; background: rgba(2,5,8,.78); backdrop-filter: blur(8px); }
.deployment-choice-dialog {
  position: relative; width: min(42rem, calc(100vw - 2rem)); padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(217,183,91,.6); border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(31,34,30,.99), rgba(13,17,15,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 40px rgba(190,151,52,.12); text-align: center;
}
.deployment-choice-kicker { color: #d8b95f; font-size: .75rem; font-weight: 900; letter-spacing: .22em; }
.deployment-choice-dialog h2 { margin: .55rem 0 .25rem; font-size: clamp(1.6rem, 4vw, 2.5rem); }
.deployment-choice-card-name { margin: 0 0 1.4rem; color: #d8d2c0; font-size: 1.08rem; }
.deployment-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.deployment-choice-button { min-height: 4.25rem; border-radius: .8rem; border: 1px solid rgba(255,255,255,.22); font-size: 1.05rem; font-weight: 900; cursor: pointer; }
.deployment-choice-button--revealed { background: linear-gradient(180deg,#e6c96f,#a77b1f); color:#17130a; }
.deployment-choice-button--concealed { background: linear-gradient(180deg,#39455c,#1d2637); color:#f1f4fb; }
.deployment-choice-button--cancel { grid-column: 1 / -1; min-height: 3.1rem; background:#252a31; color:#e9e9e9; }
.deployment-choice-note { margin: 1.1rem 0 0; color: #aaa; font-size: .82rem; line-height: 1.45; }
body.deployment-choice-open { overflow: hidden; }

.concealed-reveal-control {
  position: absolute; z-index: 150; transform: translateY(-50%); min-width: 5.5rem; min-height: 2.6rem;
  border: 1px solid #e0c36a; border-radius: .6rem; background: linear-gradient(180deg,#342f22,#17150f);
  color: #f4dda0; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.5); cursor: pointer;
}
.concealed-reveal-control:hover { filter: brightness(1.18); transform: translateY(-50%) scale(1.03); }
@media (max-width: 700px) { .deployment-choice-actions { grid-template-columns: 1fr; } .deployment-choice-button--cancel { grid-column: auto; } }