/*
 * Physical tabletop layout.
 *
 * This file intentionally loads after styles.css. Every game rule is scoped to
 * .tabletop-layout so the menu, deck editor, lobby, and analysis screens retain
 * their existing contracts while the match board gets a single coherent skin.
 */

.tabletop-topbar {
  --tt-header-height: 58px;
  position: relative;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(390px, 1.8fr) minmax(250px, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--tt-header-height);
  min-height: var(--tt-header-height);
  border-bottom: 1px solid rgba(104, 177, 221, 0.3);
  padding: max(5px, env(safe-area-inset-top)) 14px 5px;
  background:
    linear-gradient(180deg, rgba(11, 29, 48, 0.98), rgba(4, 14, 27, 0.97)),
    radial-gradient(circle at 50% 0%, rgba(38, 119, 164, 0.22), transparent 55%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.tabletop-topbar .titlebox {
  min-width: 0;
  border: 0;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
}

.tabletop-topbar .titlebox h1 {
  overflow: hidden;
  margin: 1px 0;
  font-size: clamp(0.82rem, 1.18vw, 1.08rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-topbar .status-kicker,
.tabletop-topbar .status-detail {
  overflow: hidden;
  margin: 0;
  font-size: clamp(0.54rem, 0.68vw, 0.66rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-topbar .status-detail { display: block; }

.tabletop-topbar .score-track {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(250px, 1fr) minmax(68px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  margin: 0;
  border: 1px solid rgba(90, 178, 222, 0.32);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(2, 12, 25, 0.72);
  box-shadow: inset 0 0 20px rgba(53, 133, 177, 0.08);
}

.tabletop-topbar .score-name {
  display: block;
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-topbar .score-rail {
  display: grid;
  grid-template-columns: repeat(15, minmax(13px, 1fr));
  gap: 2px;
  min-width: 0;
}

.tabletop-topbar .score-cell {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  height: 25px;
  border: 1px solid rgba(107, 151, 183, 0.2);
  border-radius: 50%;
  font-size: 0.56rem;
  background: rgba(21, 43, 64, 0.72);
}

.tabletop-topbar .score-cell.p1-score,
.tabletop-topbar .score-cell.p2-score {
  border-color: #ffd46a;
  color: #07111e;
  background: #ffd46a;
  box-shadow: 0 0 14px rgba(255, 196, 62, 0.72);
}

.tabletop-topbar .turnbox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.tabletop-topbar .turnbox > span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(102, 186, 225, 0.38);
  border-radius: 999px;
  padding: 5px 10px;
  color: #dff5ff;
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.tabletop-topbar .turnbox button {
  width: auto;
  height: 28px;
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.58rem;
}

.tabletop-layout {
  --tt-action-rail: 70px;
  --tt-hand-height: clamp(144px, 21dvh, 204px);
  --tt-opponent-row: clamp(106px, 15dvh, 144px);
  --tt-player-row: clamp(106px, 15dvh, 142px);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: calc(var(--app-height, 100dvh) - 58px);
  min-width: 0;
  min-height: 0;
  overflow: clip;
  padding: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(31, 84, 117, 0.23), transparent 48%),
    linear-gradient(115deg, rgba(4, 18, 33, 0.96), rgba(8, 30, 51, 0.98) 47%, rgba(3, 15, 29, 0.98));
}

.tabletop-layout.inspector-open {
  height: calc(var(--app-height, 100dvh) - 58px);
  padding: 0;
}

.tabletop-layout::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.26;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(114, 187, 222, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 187, 222, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, black, transparent 84%);
}

.tabletop-layout .tabletop-board {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  border: 0;
  padding: 0;
  background: transparent;
}

.tabletop-layout .board-panel {
  position: absolute;
  inset: 0 var(--tt-action-rail) calc(var(--tt-hand-height) + 14px) 0;
  display: grid;
  width: auto;
  height: auto;
  grid-template-rows: var(--tt-opponent-row) minmax(0, 1fr) var(--tt-player-row);
  gap: 5px;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 5px 8px;
  background: transparent;
  box-shadow: none;
}

.tabletop-layout .tabletop-overlay-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tabletop-layout .tabletop-overlay-root > :not(.cinematic-impact) {
  pointer-events: auto;
}

.tabletop-layout .tabletop-overlay-root > .cinematic-impact {
  pointer-events: none;
}

.tabletop-layout .tabletop-state-unavailable {
  align-self: center;
  justify-self: center;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid rgba(111, 197, 232, 0.42);
  border-radius: 16px;
  background: rgba(3, 18, 31, 0.96);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
  text-align: center;
}

.tabletop-layout .tabletop-state-unavailable > * {
  margin: 0;
}

.tabletop-layout .board-band {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid rgba(101, 166, 202, 0.18);
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(90deg, rgba(7, 25, 42, 0.7), rgba(11, 37, 58, 0.36), rgba(7, 25, 42, 0.7));
}

.tabletop-layout .board-band > .side-label {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 7px;
  margin: 0;
  color: rgba(184, 222, 240, 0.6);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  pointer-events: none;
}

.tabletop-layout .opponent-band { grid-row: 1; }
.tabletop-layout .location-band { grid-row: 2; }
.tabletop-layout .player-band { grid-row: 3; }

.tabletop-layout .table-seat {
  display: grid;
  grid-template-columns: clamp(150px, 16vw, 220px) clamp(116px, 12vw, 172px) minmax(180px, 1fr) clamp(190px, 22vw, 330px);
  grid-template-areas: "identity piles base resources";
  align-items: stretch;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 14px 3px 3px;
  background: transparent;
}

.tabletop-layout .table-seat.bottom {
  grid-template-columns: clamp(190px, 22vw, 330px) minmax(180px, 1fr) clamp(116px, 12vw, 172px) clamp(150px, 16vw, 220px);
  grid-template-areas: "resources base piles identity";
}

.tabletop-layout .table-seat.acting-player {
  box-shadow: inset 0 -2px 0 rgba(255, 205, 82, 0.72), inset 0 0 24px rgba(255, 195, 56, 0.05);
}

.tabletop-layout .tabletop-identity-dock {
  grid-area: identity;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.tabletop-layout .physical-identity-cards {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .identity-zone {
  position: relative;
  display: grid;
  grid-template-rows: 12px minmax(0, 1fr);
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .identity-zone > .zone-caption {
  overflow: hidden;
  color: rgba(185, 222, 241, 0.68);
  font-size: 0.46rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .identity-button,
.tabletop-layout .empty-card-slot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(132, 187, 216, 0.34);
  border-radius: 6px;
  padding: 0;
  background: rgba(8, 25, 42, 0.78);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}

.tabletop-layout .identity-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.tabletop-layout .identity-button > .identity-orientation-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  transform: rotate(0deg) scale(1);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
  pointer-events: none;
}

.tabletop-layout .identity-button.exhausted > .identity-orientation-layer {
  transform: rotate(90deg) scale(0.76);
  filter: grayscale(0.55) brightness(0.68);
}

.tabletop-layout .identity-card-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 4px;
  color: rgba(230, 244, 251, 0.86);
  font-size: 0.5rem;
  text-align: center;
}

.tabletop-layout .identity-button > .identity-state-label {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: 3px;
  padding: 2px;
  background: rgba(3, 10, 20, 0.86);
  color: #ffda6d;
  font-size: 0.45rem;
  text-align: center;
}

.tabletop-layout .identity-button.ready { border-color: rgba(255, 205, 73, 0.58); }

.tabletop-layout .champion-away-reference {
  border-style: dashed;
  border-color: rgba(139, 188, 211, 0.45);
  background: rgba(4, 17, 29, 0.74);
}

.tabletop-layout .champion-away-reference img {
  filter: grayscale(0.58) brightness(0.58) saturate(0.7);
  opacity: 0.72;
}

.tabletop-layout .champion-away-reference > span:last-child {
  color: #bde6f7;
  text-transform: uppercase;
}

.tabletop-layout .identity-card-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  color: #dff3ff;
  font-size: 0.52rem;
  text-align: center;
}

.tabletop-layout .empty-card-slot {
  border-style: dashed;
  opacity: 0.42;
}

.tabletop-layout .player-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
}

.tabletop-layout .player-summary h2 {
  overflow: hidden;
  margin: 0;
  color: #e8f7ff;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .player-stats {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabletop-layout .player-stats > * {
  flex: 0 0 auto;
  min-height: 18px;
  border: 1px solid rgba(114, 173, 203, 0.22);
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(4, 18, 32, 0.72);
  color: #bcd9e8;
  font-size: 0.46rem;
  white-space: nowrap;
}

.tabletop-layout .champion-control {
  display: grid;
  min-width: 0;
}

.tabletop-layout .table-pile-dock {
  grid-area: piles;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .table-card-pile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 1px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: #ddecf3;
  text-align: center;
}

.tabletop-layout button.table-card-pile {
  min-height: 0;
}

.tabletop-layout .pile-cards {
  position: relative;
  display: grid;
  place-items: center;
  width: min(48px, 82%);
  aspect-ratio: 0.714;
  min-height: 0;
  border: 1px solid rgba(120, 181, 213, 0.38);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(20, 66, 91, 0.88), rgba(4, 24, 42, 0.98)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.05) 6px 7px);
  box-shadow: 3px 3px 0 rgba(79, 124, 151, 0.22), 5px 5px 0 rgba(32, 62, 83, 0.5), 0 8px 12px rgba(0, 0, 0, 0.28);
}

.tabletop-layout .pile-cards > i {
  position: absolute;
  inset: 2px -3px -3px 2px;
  z-index: -1;
  border: 1px solid rgba(102, 164, 196, 0.22);
  border-radius: inherit;
}

.tabletop-layout .pile-cards > i + i { inset: 4px -5px -5px 4px; }

.tabletop-layout .pile-cards img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.tabletop-layout .pile-cards b {
  display: grid;
  place-items: center;
  width: 65%;
  aspect-ratio: 1;
  border: 1px solid rgba(142, 212, 238, 0.5);
  transform: rotate(45deg);
  color: #9dd9ef;
  font-family: Georgia, serif;
  font-size: 0.82rem;
}

.tabletop-layout .pile-banished .pile-cards {
  border-color: rgba(187, 116, 255, 0.56);
  background: radial-gradient(circle, rgba(130, 64, 184, 0.68), rgba(25, 11, 46, 0.98));
  box-shadow: 3px 3px 0 rgba(126, 72, 174, 0.25), 0 0 14px rgba(137, 65, 197, 0.22);
}

.tabletop-layout .pile-label {
  overflow: hidden;
  max-width: 100%;
  color: #b7d2df;
  font-size: 0.43rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .pile-count {
  position: absolute;
  right: 0;
  bottom: 14px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 217, 107, 0.72);
  border-radius: 999px;
  padding: 0 4px;
  background: rgba(3, 14, 26, 0.94);
  color: #ffe18d;
  font-size: 0.57rem;
}

.tabletop-layout .table-card-pile .burnout-stat {
  position: absolute;
  top: -2px;
  right: -2px;
  border-radius: 999px;
  padding: 2px 4px;
  background: #7b2027;
  color: #ffd8bf;
  font-size: 0.4rem;
  font-style: normal;
}

.tabletop-layout .resource-zone {
  grid-area: resources;
  display: grid;
  grid-template-rows: 13px minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
}

.tabletop-layout .resource-zone > .zone-caption,
.tabletop-layout .base-zone > .zone-caption {
  align-self: center;
  color: rgba(185, 222, 241, 0.68);
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tabletop-layout .rune-tabletop {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .table-card-pile.compact .pile-cards { width: min(42px, 88%); }

.tabletop-layout .rune-play-area {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .rune-summary {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  width: auto;
  max-width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  pointer-events: auto;
  scrollbar-width: none;
}

.tabletop-layout .rune-count {
  display: flex;
  align-items: center;
  gap: 2px;
  width: auto;
  min-width: 28px;
  height: 20px;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 5px;
  background: rgba(3, 15, 28, 0.9);
  font-size: 0.42rem;
}

.tabletop-layout .rune-summary-art { width: 12px; height: 16px; }
.tabletop-layout .rune-summary-value { display: flex; gap: 2px; }
.tabletop-layout .rune-count b { display: inline; }
.tabletop-layout .rune-count.partly-restricted {
  border-color: rgba(241, 176, 84, 0.48);
  background: rgba(42, 27, 10, 0.92);
}

.tabletop-layout .rune-count.partly-restricted em { color: #ffd99a; }

.tabletop-layout .resource-row.rune-card-stack {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 7px 28px 2px 3px;
}

.tabletop-layout .rune-card-chip {
  position: relative;
  z-index: calc(2 + var(--rune-index));
  flex: 0 0 clamp(42px, 4vw, 58px);
  width: clamp(42px, 4vw, 58px);
  height: auto;
  min-height: 0;
  aspect-ratio: 0.714;
  margin-right: clamp(-29px, -2vw, -20px);
  overflow: visible;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: margin 180ms ease, filter 180ms ease;
}

.tabletop-layout .rune-card-chip:last-child { margin-right: 0; }

.tabletop-layout .rune-orientation-layer {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rune, #7eb9d8) 72%, white 8%);
  border-radius: inherit;
  background: #10263a;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.32);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

.tabletop-layout .rune-card-chip.spent .rune-orientation-layer {
  filter: saturate(0.62) brightness(0.66);
  transform: rotate(90deg) scale(0.76);
}

.tabletop-layout .rune-card-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout .rune-card-caption {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  overflow: hidden;
  border-radius: 2px;
  padding: 2px;
  background: rgba(3, 12, 22, 0.8);
  color: #f1f7fa;
  font-size: 0.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .rune-card-chip strong {
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 3px;
  padding: 2px 3px;
  background: rgba(119, 31, 35, 0.92);
  color: #ffe1d2;
  font-size: 0.38rem;
}

.tabletop-layout .rune-recycle-ready {
  display: block;
  overflow: hidden;
  padding: 1px 2px;
  font-size: 0.32rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .base-zone {
  grid-area: base;
  display: grid;
  grid-template-rows: 13px minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
}

.tabletop-layout .base-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px dashed rgba(110, 174, 207, 0.2);
  border-radius: 7px;
  padding: 3px;
  background: rgba(2, 14, 27, 0.4);
  scrollbar-width: thin;
}

.tabletop-layout .location-band {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid rgba(103, 175, 211, 0.22);
  border-radius: 11px;
  padding: 15px 5px 5px;
  background:
    linear-gradient(90deg, rgba(6, 25, 43, 0.66), rgba(13, 45, 68, 0.56), rgba(6, 25, 43, 0.66)),
    radial-gradient(ellipse at center, rgba(61, 129, 162, 0.12), transparent 70%);
}

.tabletop-layout .battlefield-caption {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 8px;
  margin: 0;
  color: rgba(190, 226, 242, 0.62);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tabletop-layout .battlefield-mat {
  display: grid;
  grid-auto-columns: minmax(270px, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tabletop-layout .battlefield {
  position: relative;
  display: grid;
  grid-template-rows: minmax(92px, 1fr) clamp(58px, 14%, 76px) minmax(92px, 1fr);
  gap: 3px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid rgba(104, 170, 203, 0.24);
  border-radius: 9px;
  padding: 3px;
  background:
    linear-gradient(180deg, rgba(42, 77, 96, 0.16), transparent 47%, rgba(49, 93, 117, 0.15)),
    rgba(2, 14, 25, 0.52);
  scroll-snap-align: start;
}

.tabletop-layout .battlefield.showdown-location {
  border-color: rgba(255, 206, 76, 0.72);
  box-shadow: inset 0 0 28px rgba(255, 191, 50, 0.08), 0 0 16px rgba(255, 188, 49, 0.2);
}

.tabletop-layout .field-lane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 11px 2px 2px;
  background: transparent;
}

.tabletop-layout .field-lane .lane-label {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 4px;
  color: rgba(172, 211, 230, 0.48);
  font-size: 0.39rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tabletop-layout .field-lane-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.45vw, 7px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px;
  scrollbar-width: thin;
}

.tabletop-layout .field-center {
  position: relative;
  display: grid;
  grid-template-columns: clamp(72px, 32%, 116px) minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 178, 210, 0.32);
  border-radius: 7px;
  padding: 3px;
  background: linear-gradient(90deg, rgba(7, 28, 45, 0.94), rgba(20, 54, 75, 0.86));
}

.tabletop-layout .field-image,
.tabletop-layout .field-image .image-card,
.tabletop-layout .field-image .card-art {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.tabletop-layout .field-image .card-art {
  border-radius: 4px;
  object-fit: cover;
  object-position: center 28%;
}

.tabletop-layout .battlefield-head {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.tabletop-layout .battlefield-head h2 {
  overflow: hidden;
  margin: 0;
  color: #edfaff;
  font-size: clamp(0.58rem, 0.75vw, 0.76rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .battlefield-head span {
  overflow: hidden;
  color: #9dcadd;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .unit-placeholder {
  color: rgba(156, 201, 222, 0.38);
  font-size: 0.48rem;
}

.tabletop-layout .unit-token,
.tabletop-layout .field-lane > .image-card,
.tabletop-layout .field-lane-track > .image-card {
  position: relative;
  flex: 0 0 clamp(78px, 6.7vw, 112px);
  width: clamp(78px, 6.7vw, 112px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 0.714;
  overflow: visible;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.tabletop-layout .base-row > .unit-token,
.tabletop-layout .base-row > .image-card {
  flex-basis: clamp(65px, 5vw, 82px);
  width: clamp(65px, 5vw, 82px);
  aspect-ratio: 0.714;
}

.tabletop-layout .card-exhaust-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  border-radius: inherit;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
}

.tabletop-layout .unit-token.exhausted .card-exhaust-layer,
.tabletop-layout .image-card.exhausted .card-exhaust-layer {
  filter: saturate(0.62) brightness(0.7);
  transform: rotate(90deg) scale(0.76);
}

.tabletop-layout .card-face-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(142, 193, 216, 0.36);
  border-radius: inherit;
  background: #081b2b;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.36);
  transform-origin: center;
  transition: transform 180ms ease;
}

.tabletop-layout .top-lane .card-face-layer {
  transform: rotate(180deg);
}

.tabletop-layout .unit-token-art,
.tabletop-layout .unit-token-art img,
.tabletop-layout .card-face-layer > .card-art {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 20%;
}

.tabletop-layout .unit-token-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 1px;
  min-width: 0;
  border-radius: 0 0 6px 6px;
  padding: 12px 4px 4px;
  background: linear-gradient(transparent, rgba(2, 9, 17, 0.94) 48%);
}

.tabletop-layout .unit-token-body > strong,
.tabletop-layout .unit-token-body > span {
  overflow: hidden;
  color: white;
  font-size: clamp(0.42rem, 0.48vw, 0.55rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .unit-token-body > span {
  display: block;
  color: #a9d4e6;
  font-size: 0.38rem;
}

.tabletop-layout .card-state-hud.unit-stats {
  position: absolute;
  z-index: 6;
  inset: auto 2px 2px 2px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  pointer-events: none;
}

.tabletop-layout .card-state-hud.unit-stats > b,
.tabletop-layout .card-state-hud.unit-stats > em {
  display: grid;
  place-items: center;
  min-width: 20px;
  min-height: 18px;
  border: 1px solid rgba(174, 221, 239, 0.42);
  border-radius: 999px;
  padding: 2px 4px;
  background: rgba(2, 11, 20, 0.92);
  color: #eafaff;
  font-size: clamp(0.38rem, 0.44vw, 0.5rem);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.tabletop-layout .card-state-hud.unit-stats > b:first-child {
  margin-right: auto;
  border-color: rgba(255, 212, 89, 0.72);
  background: rgba(31, 24, 8, 0.94);
  color: #ffe17c;
  font-size: clamp(0.5rem, 0.62vw, 0.7rem);
}

.tabletop-layout .unit-token[data-damage]:not([data-damage="0"]) .card-state-hud > em:nth-of-type(2) {
  border-color: rgba(255, 105, 111, 0.72);
  color: #ffc0c3;
}

.tabletop-layout .unit-state-badges {
  position: absolute;
  z-index: 7;
  top: 2px;
  right: 2px;
  left: 2px;
  display: flex;
  gap: 2px;
  overflow: hidden;
}

.tabletop-layout .unit-state-badge {
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 4px;
  background: rgba(3, 12, 22, 0.9);
  color: #dff6ff;
  font-size: 0.35rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .owner-chip {
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 3px;
  display: block;
  overflow: hidden;
  max-width: 62%;
  border-radius: 999px;
  padding: 2px 4px;
  background: rgba(3, 12, 22, 0.88);
  color: #bfe7f5;
  font-size: 0.32rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .owner-chip-short,
.tabletop-layout .pile-label-short { display: none; }

.tabletop-layout .controller-p1 .card-face-layer { outline: 2px solid rgba(50, 190, 239, 0.42); outline-offset: -2px; }
.tabletop-layout .controller-p2 .card-face-layer { outline: 2px solid rgba(238, 92, 114, 0.42); outline-offset: -2px; }

.tabletop-layout .status-stunned .card-face-layer::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff0a6;
  font-size: 1.25rem;
  text-shadow: 0 0 12px #eaa82f;
  background: rgba(20, 22, 34, 0.34);
}

.tabletop-layout .attachment-strip {
  position: absolute;
  z-index: 8;
  top: 13%;
  right: -13px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tabletop-layout button.attached-gear {
  --attachment-exhaust-scale: 0.68;
  position: relative;
  isolation: isolate;
  width: 27px;
  height: 38px;
  min-width: 27px;
  min-height: 0;
  max-width: 27px;
  max-height: 38px;
  flex: 0 0 38px;
  overflow: hidden;
  border: 1px solid rgba(201, 166, 88, 0.65);
  border-radius: 3px;
  padding: 0;
  background: #1c2430;
}

.tabletop-layout .attachment-orientation-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  transform: rotate(0deg) scale(1);
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), filter 180ms ease;
  pointer-events: none;
}

.tabletop-layout :is(
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) > .attachment-orientation-layer {
  transform: rotate(90deg) scale(var(--attachment-exhaust-scale, 0.68));
  filter: saturate(0.72) brightness(0.82);
}

.tabletop-layout .attachment-orientation-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout .attached-gear > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout .attached-gear-state {
  position: absolute;
  z-index: 3;
  inset: 1px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1px;
  color: #f7fbff;
  line-height: 1;
  pointer-events: none;
}

.tabletop-layout .attached-gear-might,
.tabletop-layout .attached-gear-readiness {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(2, 10, 18, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.tabletop-layout .attached-gear-might {
  grid-column: 1;
  grid-row: 1;
  min-width: 12px;
  height: 12px;
  border-color: rgba(255, 210, 90, 0.58);
  border-radius: 50%;
  padding: 0 2px;
  color: #fff0aa;
  font-size: 0.34rem;
}

.tabletop-layout .attached-gear-readiness {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  min-height: 8px;
  border-radius: 999px;
  padding: 1px 2px;
  color: #c9f2ff;
  font-size: 0.25rem;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
}

.tabletop-layout :is(.attached-gear.exhausted, .attached-gear[data-exhausted="true"]) .attached-gear-readiness,
.tabletop-layout :is(.attached-gear-card.exhausted, .attached-gear-card[data-exhausted="true"]) .attached-gear-readiness {
  border-color: rgba(241, 144, 94, 0.6);
  background: rgba(62, 22, 17, 0.92);
  color: #ffd0b8;
}

.tabletop-layout .attached-gear.selected-attachment .attachment-orientation-layer {
  filter: brightness(1.2);
}

.tabletop-layout .attached-gear-panel {
  gap: 7px;
  overflow: hidden;
}

.tabletop-layout .attached-gear-list {
  align-items: stretch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.tabletop-layout .attached-gear-card {
  --attachment-exhaust-scale: 0.7;
  position: relative;
  isolation: isolate;
  grid-template-rows: 86px auto auto;
  flex-basis: 76px;
  min-width: 76px;
  overflow: hidden;
}

.tabletop-layout .attached-gear-card > .attachment-orientation-layer {
  position: relative;
  z-index: 1;
  inset: auto;
  grid-row: 1;
  width: 100%;
  height: 86px;
}

.tabletop-layout .attached-gear-card > strong {
  grid-row: 2;
  min-width: 0;
}

.tabletop-layout .attached-gear-card > .attached-gear-state {
  position: relative;
  inset: auto;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.tabletop-layout .attached-gear-card .attached-gear-might {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  font-size: 0.48rem;
}

.tabletop-layout .attached-gear-card .attached-gear-readiness {
  flex: 1 1 auto;
  min-height: 16px;
  font-size: 0.42rem;
}

.tabletop-layout .move-select-chip {
  z-index: 10;
  top: -5px;
  right: -5px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.48rem;
}

.tabletop-layout .hidden-card-back {
  flex: 0 0 clamp(76px, 6.4vw, 106px);
  width: clamp(76px, 6.4vw, 106px);
  height: auto;
  min-height: 0;
  aspect-ratio: 0.714;
  border-radius: 7px;
}

.tabletop-layout .target-zone {
  outline: 2px solid rgba(255, 209, 80, 0.78);
  outline-offset: -2px;
  box-shadow: inset 0 0 22px rgba(255, 194, 54, 0.11);
}

.tabletop-layout .chain-pod {
  position: absolute;
  z-index: 40;
  top: calc(var(--tt-opponent-row) + 10px);
  left: 50%;
  width: min(620px, 62vw);
  max-height: min(38dvh, 360px);
  overflow: visible;
  border: 1px solid rgba(85, 191, 235, 0.58);
  border-radius: 10px;
  padding: 6px;
  background: rgba(3, 17, 30, 0.95);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52), 0 0 24px rgba(55, 157, 206, 0.15);
  transform: translateX(-50%);
}

.tabletop-layout .chain-zone-head { min-height: 28px; }
.tabletop-layout .chain-zone-content { max-height: min(31dvh, 285px); overflow: auto; }
.tabletop-layout .chain-stack { display: flex; gap: 5px; overflow-x: auto; }
.tabletop-layout .chain-zone-item { flex: 0 0 min(200px, 33vw); min-height: 74px; }

.tabletop-layout .realtime-feedback {
  position: absolute;
  z-index: 50;
  top: calc(var(--tt-opponent-row) + 8px);
  left: 50%;
  width: min(360px, 50vw);
  transform: translateX(-50%);
}

.tabletop-layout .table-command-layer {
  position: absolute;
  z-index: 30;
  inset: auto var(--tt-action-rail) 0 0;
  height: var(--tt-hand-height);
  min-width: 0;
  overflow: visible;
  pointer-events: none;
}

.tabletop-layout .persistent-hand.hand-drawer {
  position: absolute;
  z-index: 31;
  right: clamp(155px, 14vw, 225px);
  bottom: 0;
  left: clamp(155px, 14vw, 225px);
  width: auto;
  height: var(--tt-hand-height);
  border: 0;
  transform: none;
  pointer-events: auto;
}

.tabletop-layout .persistent-hand.hand-drawer:has(.hand-fan-card:focus-visible) {
  z-index: 59;
}

@media (hover: hover) and (pointer: fine) {
  .tabletop-layout .persistent-hand.hand-drawer:has(.hand-fan-card:hover) {
    z-index: 59;
  }
}

.tabletop-layout .persistent-hand .hand-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 12px 12px 0 0;
  padding: 0 8px env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(5, 21, 36, 0.64), rgba(2, 10, 19, 0.95));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.tabletop-layout .persistent-hand.closed .hand-panel,
.tabletop-layout .persistent-hand.open .hand-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.tabletop-layout .persistent-hand .section-head {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  padding: 2px;
  pointer-events: auto;
}

.tabletop-layout .persistent-hand .section-head h2,
.tabletop-layout .persistent-hand .section-head span {
  margin: 0;
  color: #cde8f4;
  font-size: 0.52rem;
}

.tabletop-layout .persistent-hand .section-head h2 { display: block; }

.tabletop-layout .hand-focus-toggle {
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.48rem;
}

.tabletop-layout .hand-fan {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 0 clamp(40px, 6vw, 90px);
}

.tabletop-layout .hand-panel > .cards.hand-fan {
  width: 100%;
  height: auto;
  max-height: none;
  gap: 0;
  padding-bottom: 0;
  overflow: visible;
}

.tabletop-layout .hand-fan-card {
  position: relative;
  z-index: calc(32 + var(--fan-index));
  flex: 0 0 clamp(94px, 8.2vw, 132px);
  width: clamp(94px, 8.2vw, 132px);
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 0.714;
  margin-right: clamp(-56px, -3.7vw, -35px);
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transform: translateY(var(--fan-rise)) rotate(var(--fan-angle));
  transform-origin: 50% 105%;
  transition: transform 190ms cubic-bezier(.2, .8, .2, 1), filter 160ms ease;
  outline: none;
}

.tabletop-layout .hand-fan-card:last-child { margin-right: 0; }

.tabletop-layout .hand-fan-card .card-orientation-layer,
.tabletop-layout .hand-fan-card .card-face-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.tabletop-layout .hand-fan-card .card-face-layer {
  border: 1px solid rgba(154, 205, 228, 0.42);
  background: #071a2a;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.44);
}

.tabletop-layout .hand-fan-card .card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout .hand-fan-card.selected-card,
.tabletop-layout .hand-fan-card:focus-visible {
  z-index: 65;
  transform: translateY(-48px) rotate(0deg) scale(1.1);
}

@media (hover: hover) and (pointer: fine) {
  .tabletop-layout .hand-fan-card:hover {
    z-index: 66;
    transform: translateY(-54px) rotate(0deg) scale(1.12);
  }

  .tabletop-layout .rune-card-chip:hover,
  .tabletop-layout .rune-card-chip:focus-visible {
    z-index: 40;
    margin-right: 2px;
    filter: brightness(1.13);
  }
}

.tabletop-layout .persistent-hand.focused .hand-fan-card {
  margin-right: clamp(-34px, -2vw, -20px);
  transform: translateY(calc(var(--fan-rise) - 20px)) rotate(calc(var(--fan-angle) * 0.65));
}

.tabletop-layout .persistent-hand.focused .hand-fan-card.selected-card,
.tabletop-layout .persistent-hand.focused .hand-fan-card:focus-visible {
  transform: translateY(-62px) rotate(0deg) scale(1.12);
}

.tabletop-layout .opponent-hand {
  position: absolute;
  z-index: 28;
  top: -3px;
  left: 50%;
  display: grid;
  grid-template-rows: 15px minmax(0, 1fr);
  width: min(440px, 38vw);
  height: calc(var(--tt-opponent-row) + 18px);
  min-width: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.tabletop-layout .opponent-hand > .zone-caption {
  z-index: 2;
  display: block;
  justify-self: center;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(2, 13, 25, 0.78);
  color: #b9dceb;
  font-size: 0.45rem;
}

.tabletop-layout .opponent-hand-fan {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.tabletop-layout .opponent-hand-card {
  position: relative;
  z-index: calc(28 + var(--fan-index));
  flex: 0 0 clamp(52px, 4.5vw, 70px);
  width: clamp(52px, 4.5vw, 70px);
  height: auto;
  aspect-ratio: 0.714;
  margin-right: clamp(-34px, -2vw, -20px);
  overflow: hidden;
  border: 1px solid rgba(117, 190, 219, 0.48);
  border-radius: 6px;
  background: linear-gradient(145deg, #12405e, #05192c 68%);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(calc(var(--fan-rise) * -1)) rotate(var(--fan-angle));
  transform-origin: 50% -8%;
}

.tabletop-layout .opponent-hand-card:last-child { margin-right: 0; }

.tabletop-layout .opponent-hand-card.card-back {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(79, 170, 202, 0.25), transparent 52%),
    repeating-linear-gradient(45deg, rgba(88, 171, 205, 0.12) 0 3px, transparent 3px 7px),
    #071d31;
}

.tabletop-layout .opponent-hand-card.card-back i {
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(128, 213, 236, 0.6);
  transform: rotate(45deg);
  color: #bfefff;
  font-family: Georgia, serif;
  font-size: 0.82rem;
  font-style: normal;
}

.tabletop-layout .opponent-hand-card .card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(180deg);
}

.tabletop-layout .context-action-dock {
  position: absolute;
  z-index: 58;
  right: clamp(132px, 12vw, 190px);
  bottom: calc(var(--tt-hand-height) - 35px);
  left: clamp(132px, 12vw, 190px);
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.6fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(96, 178, 218, 0.42);
  border-radius: 10px;
  padding: 5px 7px;
  background: rgba(3, 17, 30, 0.94);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.tabletop-layout .action-context {
  grid-area: auto;
  display: grid;
  min-width: 0;
}

.tabletop-layout .action-context > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .action-context .bar-label { font-size: 0.43rem; }
.tabletop-layout .action-context strong { color: #eefaff; font-size: 0.64rem; }
.tabletop-layout .action-context span:last-child { color: #a9ccdc; font-size: 0.48rem; }

.tabletop-layout .action-command-list {
  grid-area: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabletop-layout .action-command-list button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 0.52rem;
}

.tabletop-layout .table-action-rail {
  position: fixed;
  z-index: 75;
  right: 6px;
  bottom: 8px;
  display: grid;
  grid-area: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: none;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-content: end;
  align-items: stretch;
  justify-items: stretch;
  gap: 6px;
  width: calc(var(--tt-action-rail) - 12px);
  min-width: 44px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.tabletop-layout .table-action-rail button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border-radius: 8px;
  padding: 5px;
  font-size: 0.52rem;
  white-space: normal;
}

.tabletop-layout .table-action-rail button[data-action="toggle-hand"] {
  min-height: 34px;
}

.tabletop-layout .table-action-rail button[data-action="end-turn"],
.tabletop-layout .table-action-rail button[data-action="pass-showdown"] {
  border-color: rgba(255, 211, 86, 0.72);
  background: linear-gradient(180deg, #31556b, #18364a);
  color: #fff0b5;
  box-shadow: 0 0 14px rgba(255, 193, 53, 0.12);
}

.tabletop-layout .move-batch-bar {
  position: absolute;
  z-index: 62;
  bottom: calc(var(--tt-hand-height) + 19px);
  left: 50%;
  width: min(620px, 64vw);
  transform: translateX(-50%);
  pointer-events: auto;
}

.tabletop-layout .floating-panels {
  position: fixed;
  z-index: 80;
  inset: 58px 0 0;
  display: grid;
  place-items: end center;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 12px calc(var(--tt-action-rail) + 8px) calc(var(--tt-hand-height) - 22px) 12px;
  pointer-events: none;
}

/* The overlay root enables hit testing for its direct children. Keep the
   full-viewport panel host transparent so an empty host cannot cover the
   table controls; only a panel rendered inside it is interactive. */
.tabletop-layout .tabletop-overlay-root > .floating-panels {
  pointer-events: none;
}

.tabletop-layout .floating-panels > * { pointer-events: auto; }

.tabletop-layout .floating-panels .payment-panel,
.tabletop-layout .floating-panels .choice-panel {
  width: min(1060px, calc(100vw - var(--tt-action-rail) - 32px));
  max-height: min(72dvh, 720px);
  border-color: rgba(108, 193, 231, 0.58);
  background: rgba(3, 18, 31, 0.98);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.64);
}

.tabletop-layout .floating-panels.has-modal::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 58px 0 0;
  background: rgba(0, 6, 13, 0.46);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.tabletop-layout .floating-panels .graveyard-panel,
.tabletop-layout .floating-panels .banished-panel,
.tabletop-layout .floating-panels .intel-panel {
  position: fixed;
  z-index: 85;
  top: 66px;
  right: calc(var(--tt-action-rail) + 8px);
  bottom: 8px;
  left: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(460px, 38vw);
  max-height: none;
  margin: 0;
  transform: none;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 12px;
  background: rgba(3, 17, 30, 0.98);
  box-shadow: -16px 0 42px rgba(0, 0, 0, 0.45);
}

.tabletop-layout .floating-panels .graveyard-panel > .section-head,
.tabletop-layout .floating-panels .intel-panel > .section-head {
  position: relative;
  z-index: 2;
  flex: none;
}

.tabletop-layout .floating-panels .graveyard-cards {
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.tabletop-layout .floating-panels .intel-panel {
  grid-template-rows: auto;
  align-content: start;
  overflow-y: auto;
}

.tabletop-layout .floating-panels .banished-panel {
  border-color: rgba(183, 108, 247, 0.62);
  background: linear-gradient(155deg, rgba(34, 13, 58, 0.98), rgba(4, 15, 28, 0.98));
}

.tabletop-layout .inspector.inspector-panel {
  position: fixed;
  z-index: 65;
  top: 66px;
  right: calc(var(--tt-action-rail) + 8px);
  bottom: 8px;
  display: none;
  width: min(350px, 30vw);
  max-height: none;
  overflow-y: auto;
  border: 1px solid rgba(99, 183, 221, 0.5);
  border-radius: 12px;
  padding: 10px;
  background: rgba(3, 17, 30, 0.98);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.44);
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar button {
  min-height: 30px;
  padding: 4px 9px;
}

.tabletop-layout.inspector-open .inspector.inspector-panel {
  display: grid;
}

.tabletop-layout .log-drawer {
  position: fixed;
  z-index: 66;
  top: 66px;
  right: calc(var(--tt-action-rail) + 8px);
  bottom: 8px;
  width: min(420px, 36vw);
  max-height: none;
  border-radius: 12px;
}

.tabletop-layout .replay-playback-controls {
  z-index: 150;
  right: calc(var(--tt-action-rail) + 8px);
  bottom: 8px;
  left: auto;
  width: min(720px, calc(100vw - var(--tt-action-rail) - 24px));
}

.tabletop-layout .tutorial-panel { z-index: 130; }
.tabletop-layout .cinematic-impact { z-index: 120; }
.tabletop-layout .tabletop-overlay-root > .floating-panels.has-modal { z-index: 240; }
.tabletop-layout .tabletop-overlay-root > .modal-panel { z-index: 260; }
.tabletop-layout .full-card-modal { z-index: 270; }
.tabletop-layout .game-exit-modal,
.tabletop-layout .match-result-modal { z-index: 280; }
.tabletop-layout .ui-exception-banner { z-index: 300; }

.tabletop-layout :is(button, [role="button"], [data-zone-action]):focus-visible {
  outline: 3px solid #77d7ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(52, 178, 229, 0.2);
}

@media (max-height: 820px) and (min-width: 761px) {
  .tabletop-layout {
    --tt-hand-height: clamp(126px, 19dvh, 160px);
    --tt-opponent-row: clamp(82px, 13dvh, 104px);
    --tt-player-row: clamp(84px, 13dvh, 106px);
  }

  .tabletop-layout .table-seat {
    grid-template-columns: clamp(126px, 14vw, 178px) clamp(102px, 11vw, 144px) minmax(160px, 1fr) clamp(166px, 20vw, 270px);
  }

  .tabletop-layout .table-seat.bottom {
    grid-template-columns: clamp(166px, 20vw, 270px) minmax(160px, 1fr) clamp(102px, 11vw, 144px) clamp(126px, 14vw, 178px);
  }

  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane-track > .image-card {
    flex-basis: clamp(66px, 5.7vw, 90px);
    width: clamp(66px, 5.7vw, 90px);
  }

  .tabletop-layout .context-action-dock { min-height: 42px; }
}

@media (max-width: 1199px) {
  body:has(.tabletop-layout) {
    min-width: 0;
    min-height: 0;
  }

  .tabletop-topbar {
    grid-template-columns: minmax(180px, 0.8fr) minmax(300px, 1.6fr) minmax(190px, 0.8fr);
  }

  .tabletop-topbar .score-track {
    grid-template-columns: minmax(42px, 0.24fr) minmax(0, 1fr) minmax(42px, 0.24fr);
    gap: 3px;
  }
  .tabletop-topbar .score-name { display: block; font-size: 0.5rem; }
  .tabletop-topbar .score-rail { grid-template-columns: repeat(15, minmax(10px, 1fr)); gap: 1px; }
  .tabletop-topbar .turnbox {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }
  .tabletop-topbar .turnbox > span,
  .tabletop-topbar .turnbox button { flex: 0 0 auto; }

  .tabletop-layout {
    --tt-action-rail: 62px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns: 116px minmax(145px, 1fr) 104px;
    grid-template-areas: "identity base resources";
  }

  .tabletop-layout .table-seat.bottom {
    grid-template-areas: "resources base identity";
  }

  .tabletop-layout .table-pile-dock {
    position: absolute;
    z-index: 9;
    top: 17px;
    right: 3px;
    display: flex;
    width: 102px;
    height: 68px;
  }

  .tabletop-layout .table-seat.bottom .table-pile-dock { right: 122px; }
  .tabletop-layout .table-seat.top .table-pile-dock { left: 122px; right: auto; }
  .tabletop-layout .table-card-pile { flex: 1; }
  .tabletop-layout .pile-cards { width: 28px; }
  .tabletop-layout .pile-label {
    display: block;
    width: 100%;
    font-size: 0.34rem;
    line-height: 1;
  }
  .tabletop-layout .pile-count { right: -1px; bottom: 7px; min-width: 16px; height: 16px; font-size: 0.42rem; }
  .tabletop-layout .table-seat.top .base-row { padding-left: 106px; }
  .tabletop-layout .table-seat.bottom .base-row { padding-right: 106px; }

  .tabletop-layout .persistent-hand.hand-drawer {
    right: 116px;
    left: 116px;
  }

  .tabletop-layout .context-action-dock {
    right: 104px;
    left: 104px;
  }

  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel {
    width: min(390px, 46vw);
  }
}

@media (max-width: 760px) {
  .tabletop-layout.inspector-open {
    height: calc(var(--app-height, 100dvh) - 64px - env(safe-area-inset-top));
  }

  .tabletop-topbar {
    --tt-header-height: calc(64px + env(safe-area-inset-top));
    grid-template-columns: minmax(104px, 38vw) minmax(0, 1fr);
    grid-template-rows: 34px 20px;
    align-items: stretch;
    gap: 3px 4px;
    height: var(--tt-header-height);
    min-height: var(--tt-header-height);
    padding: calc(env(safe-area-inset-top) + 3px) 5px 4px;
  }

  .tabletop-topbar .titlebox {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 0 3px;
  }
  .tabletop-topbar .titlebox h1 { margin: 0; font-size: 0.62rem; }
  .tabletop-topbar .status-kicker,
  .tabletop-topbar .status-detail { font-size: 0.44rem; line-height: 1.05; }
  .tabletop-topbar .status-detail { display: block; }
  .tabletop-topbar .score-track {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    width: 100%;
    height: 20px;
    border: 0;
    grid-template-columns: minmax(38px, 0.28fr) minmax(0, 1fr) minmax(38px, 0.28fr);
    gap: 3px;
    padding: 0 2px;
    background: transparent;
    transform: none;
  }

  .tabletop-topbar .score-name {
    display: block;
    font-size: 0.44rem;
    text-align: center;
  }
  .tabletop-topbar .score-rail { grid-column: 2; grid-row: 1; gap: 1px; }
  .tabletop-topbar .score-cell { height: 14px; font-size: 0.45rem; }
  .tabletop-topbar .turnbox {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    align-self: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }
  .tabletop-topbar .turnbox > span {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px 6px;
    font-size: 0.4rem;
  }
  .tabletop-topbar .turnbox button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    height: 24px;
    min-width: max-content;
    min-height: 24px;
    padding: 2px 6px;
    font-size: 0.38rem;
    white-space: nowrap;
  }
  .tabletop-topbar .turnbox button:focus-visible { outline-offset: -2px; }

  .tabletop-layout {
    --tt-action-rail: 52px;
    --tt-hand-height: calc(136px + env(safe-area-inset-bottom));
    --tt-opponent-row: 78px;
    --tt-player-row: 92px;
    --tt-overlay-bottom: calc(var(--tt-hand-height) + 40px + var(--tt-player-row) + 4px);
    --tt-replay-panel-height: 64px;
    height: calc(var(--app-height, 100dvh) - 64px - env(safe-area-inset-top));
  }

  .tabletop-layout .board-panel {
    inset: 0 var(--tt-action-rail) calc(var(--tt-hand-height) + 40px) 0;
    gap: 3px;
    padding: 3px;
  }

  .tabletop-layout .board-band {
    border-radius: 6px;
    padding: 1px;
  }

  .tabletop-layout .board-band > .side-label {
    display: block;
    top: 1px;
    left: 3px;
    font-size: 0.25rem;
    letter-spacing: 0.04em;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns: 82px minmax(0, 1fr) 102px;
    grid-template-areas: "identity base resources";
    gap: 2px;
    padding: 2px;
  }

  .tabletop-layout .table-seat.bottom { grid-template-areas: "resources base identity"; }
  .tabletop-layout .tabletop-identity-dock { grid-template-rows: minmax(0, 1fr) 22px; gap: 2px; }
  .tabletop-layout .physical-identity-cards { gap: 2px; }
  .tabletop-layout .identity-zone { grid-template-rows: 10px minmax(0, 1fr); }
  .tabletop-layout .identity-zone > .zone-caption {
    display: block;
    font-size: 0.44rem;
    line-height: 1;
  }
  .tabletop-layout .player-summary {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px;
    scroll-padding-inline: 1px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .tabletop-layout .player-summary h2 {
    flex: 0 0 auto;
    max-width: 74px;
    font-size: 0.5rem;
  }
  .tabletop-layout .player-stats {
    flex: 0 0 auto;
    gap: 2px;
    overflow: visible;
  }
  .tabletop-layout .player-stats > * {
    height: 15px;
    min-height: 15px;
    padding: 1px 3px;
    font-size: 0.5rem;
  }
  .tabletop-layout .champion-control {
    flex: 0 0 auto;
    grid-template-columns: minmax(38px, auto) auto;
    gap: 2px;
    min-width: 68px;
    min-height: 16px;
    height: 16px;
    padding: 1px 2px;
  }
  .tabletop-layout .champion-control :is(span, small) { font-size: 0.46rem; }
  .tabletop-layout .champion-control button {
    min-height: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.46rem;
    line-height: 12px;
  }
  .tabletop-layout .identity-button { border-radius: 3px; }

  .tabletop-layout .table-pile-dock {
    top: 1px;
    right: 84px;
    width: 84px;
    height: 49px;
    gap: 1px;
  }

  .tabletop-layout .table-seat.top .table-pile-dock { left: 84px; right: auto; }
  .tabletop-layout .table-seat.bottom .table-pile-dock { right: 84px; }
  .tabletop-layout .pile-cards { width: 22px; border-radius: 2px; box-shadow: 2px 2px 0 rgba(79, 124, 151, 0.2); }
  .tabletop-layout .pile-label { font-size: 0.5rem; line-height: 1; }
  .tabletop-layout .pile-count { bottom: 6px; min-width: 15px; height: 15px; padding: 0 2px; font-size: 0.5rem; }
  .tabletop-layout .table-card-pile .burnout-stat { top: -4px; font-size: 0.46rem; }
  .tabletop-layout .table-seat.top .base-row { padding-left: 86px; }
  .tabletop-layout .table-seat.bottom .base-row { padding-right: 86px; }

  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone { grid-template-rows: 10px minmax(0, 1fr); }
  .tabletop-layout .resource-zone > .zone-caption,
  .tabletop-layout .base-zone > .zone-caption {
    display: block;
    font-size: 0.44rem;
    line-height: 1;
  }
  .tabletop-layout .rune-tabletop { grid-template-columns: 27px minmax(0, 1fr); gap: 1px; }
  .tabletop-layout .table-card-pile.compact .pile-cards { width: 22px; }
  .tabletop-layout .rune-summary {
    top: 0;
    right: auto;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    height: 17px;
    overflow-x: auto;
    padding: 1px;
    scroll-padding-inline: 1px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .tabletop-layout .rune-count {
    flex: 0 0 auto;
    min-width: max-content;
    height: 15px;
    min-height: 15px;
    padding: 1px 3px;
    font-size: 0.5rem;
  }
  .tabletop-layout .rune-summary-art { width: 9px; height: 12px; }
  .tabletop-layout .rune-summary-value { gap: 1px; }
  .tabletop-layout .rune-count b { display: inline; }
  .tabletop-layout .resource-row.rune-card-stack { padding: 17px 6px 1px 0; }
  .tabletop-layout .rune-card-chip {
    flex-basis: 32px;
    width: 32px;
    margin-right: -23px;
    border-radius: 3px;
  }
  .tabletop-layout .rune-card-caption { font-size: 0.46rem; }
  .tabletop-layout .rune-recycle-ready { bottom: 11px; padding: 1px; font-size: 0.42rem; }
  .tabletop-layout .base-row { gap: 2px; border-radius: 3px; padding: 1px; }
  .tabletop-layout .base-row > .unit-token,
  .tabletop-layout .base-row > .image-card { flex-basis: 38px; width: 38px; border-radius: 3px; }

  .tabletop-layout .opponent-hand {
    top: calc(100% + 4px);
    width: min(52vw, 210px);
    height: 50px;
    grid-template-rows: 8px minmax(0, 1fr);
  }
  .tabletop-layout .opponent-hand > .zone-caption { padding: 1px 4px; font-size: 0.32rem; }
  .tabletop-layout .opponent-hand-card {
    flex-basis: 30px;
    width: 30px;
    margin-right: -20px;
    border-radius: 3px;
    transform: translateY(calc(var(--fan-rise) * -0.35)) rotate(calc(var(--fan-angle) * 0.72));
  }

  .tabletop-layout .location-band { border-radius: 6px; padding: 46px 2px 2px; }
  .tabletop-layout .battlefield-caption { top: 2px; left: 5px; font-size: 0.36rem; }
  .tabletop-layout .battlefield-mat {
    grid-auto-columns: minmax(238px, calc(100vw - var(--tt-action-rail) - 12px));
    gap: 3px;
    scroll-snap-type: x mandatory;
  }
  .tabletop-layout .battlefield {
    grid-template-rows: minmax(76px, 1fr) 46px minmax(76px, 1fr);
    border-radius: 5px;
    padding: 1px;
  }
  .tabletop-layout .field-lane { padding: 8px 1px 1px; }
  .tabletop-layout .field-lane .lane-label { font-size: 0.3rem; }
  .tabletop-layout .field-lane-track { justify-content: flex-start; gap: 2px; padding: 1px; }
  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane-track > .image-card,
  .tabletop-layout .hidden-card-back {
    flex-basis: 54px;
    width: 54px;
    border-radius: 4px;
  }
  .tabletop-layout .field-center { grid-template-columns: 58px minmax(0, 1fr); border-radius: 4px; padding: 1px; }
  .tabletop-layout .battlefield-head h2 { font-size: 0.48rem; }
  .tabletop-layout .battlefield-head span { font-size: 0.34rem; }
  .tabletop-layout .unit-token-body { padding: 7px 14px 2px 2px; }
  .tabletop-layout .unit-token-body > strong { font-size: 0.5rem; }
  .tabletop-layout .unit-token-body > span { display: block; font-size: 0.42rem; }
  .tabletop-layout .card-state-hud.unit-stats {
    inset: auto 1px 1px auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    max-width: 100%;
    max-height: calc(100% - 2px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .tabletop-layout .card-state-hud.unit-stats > b,
  .tabletop-layout .card-state-hud.unit-stats > em {
    display: grid;
    flex: 0 0 auto;
    min-width: 17px;
    min-height: 14px;
    padding: 1px 2px;
    font-size: 0.5rem;
  }
  .tabletop-layout .card-state-hud.unit-stats > b:first-child { margin-right: 0; }
  .tabletop-layout .card-state-hud.unit-stats > em:nth-of-type(n+2) { display: grid; }
  .tabletop-layout .unit-state-badge { padding: 1px 2px; font-size: 0.46rem; }
  .tabletop-layout .unit-state-badges {
    right: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabletop-layout .owner-chip {
    display: block;
    top: 13px;
    max-width: calc(100% - 17px);
    padding: 1px 2px;
    font-size: 0.46rem;
  }
  .tabletop-layout .attachment-strip { right: -9px; }
  .tabletop-layout button.attached-gear {
    width: 38px;
    height: 52px;
    min-width: 38px;
    min-height: 0;
    max-width: 38px;
    max-height: 52px;
    flex-basis: 52px;
  }
  .tabletop-layout .attached-gear-might {
    min-width: 12px;
    height: 12px;
    padding: 0 1px;
    font-size: 0.48rem;
  }
  .tabletop-layout .attached-gear-readiness {
    min-height: 10px;
    padding: 0 1px;
    font-size: 0.44rem;
    letter-spacing: -0.03em;
  }

  .tabletop-layout .table-command-layer {
    right: var(--tt-action-rail);
    height: var(--tt-hand-height);
  }
  .tabletop-layout .persistent-hand.hand-drawer {
    right: 0;
    left: 0;
    height: var(--tt-hand-height);
  }
  .tabletop-layout .persistent-hand .hand-panel { grid-template-rows: 20px minmax(0, 1fr); padding: 0 2px env(safe-area-inset-bottom); }
  .tabletop-layout .persistent-hand .section-head { justify-content: center; gap: 4px; }
  .tabletop-layout .persistent-hand .section-head h2 {
    display: block;
    overflow: hidden;
    max-width: 42%;
    font-size: 0.36rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabletop-layout .persistent-hand .section-head span { font-size: 0.4rem; }
  .tabletop-layout .hand-focus-toggle { min-height: 17px; padding: 1px 5px; font-size: 0.36rem; }
  .tabletop-layout .hand-fan { justify-content: center; padding: 0 25px; }
  .tabletop-layout .hand-fan-card {
    flex-basis: 76px;
    width: 76px;
    margin-right: -42px;
    border-radius: 5px;
  }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(8)) .hand-fan-card { margin-right: -48px; }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(11)) .hand-fan-card { margin-right: -56px; }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(15)) .hand-fan-card { margin-right: -62px; }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(21)) .hand-fan-card {
    flex-basis: 68px;
    width: 68px;
    margin-right: -60px;
  }
  .tabletop-layout .hand-fan .hand-fan-card:last-child { margin-right: 0; }
  .tabletop-layout .hand-fan-card.selected-card,
  .tabletop-layout .hand-fan-card:focus-visible { transform: translateY(-26px) rotate(0) scale(1.04); }
  .tabletop-layout .persistent-hand.focused .hand-fan-card { margin-right: -42px; transform: translateY(calc(var(--fan-rise) - 7px)) rotate(calc(var(--fan-angle) * 0.65)); }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(8)) .hand-fan-card { margin-right: -48px; }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(11)) .hand-fan-card { margin-right: -56px; }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(15)) .hand-fan-card { margin-right: -62px; }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(21)) .hand-fan-card { margin-right: -60px; }
  .tabletop-layout .persistent-hand.focused .hand-fan .hand-fan-card:last-child { margin-right: 0; }
  .tabletop-layout .persistent-hand.focused .hand-fan-card.selected-card,
  .tabletop-layout .persistent-hand.focused .hand-fan-card:focus-visible { transform: translateY(-30px) rotate(0) scale(1.06); }

  .tabletop-layout .context-action-dock {
    right: 3px;
    bottom: calc(var(--tt-hand-height) + 3px);
    left: 3px;
    grid-template-columns: minmax(82px, 0.42fr) minmax(0, 1.58fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: none;
    min-height: 32px;
    max-height: 34px;
    border-radius: 6px;
    padding: 3px;
  }
  .tabletop-layout .action-context { grid-area: auto; display: grid; }
  .tabletop-layout .action-context .bar-label { font-size: 0.27rem; }
  .tabletop-layout .action-context strong { font-size: 0.38rem; }
  .tabletop-layout .action-context span:last-child { font-size: 0.3rem; }
  .tabletop-layout .action-command-list { grid-area: auto; justify-content: flex-start; min-height: 0; height: 100%; }
  .tabletop-layout .action-command-list button { min-height: 24px; padding: 3px 6px; font-size: 0.4rem; }
  .tabletop-layout .table-action-rail {
    grid-area: auto;
    right: 3px;
    bottom: calc(4px + env(safe-area-inset-bottom));
    width: calc(var(--tt-action-rail) - 6px);
    gap: 4px;
  }
  .tabletop-layout .table-action-rail button { min-height: 40px; padding: 3px; font-size: 0.4rem; }
  .tabletop-layout .table-action-rail button[data-action="toggle-hand"] { min-height: 30px; }
  .tabletop-layout .move-batch-bar { bottom: calc(var(--tt-hand-height) + 8px); width: calc(100vw - var(--tt-action-rail) - 8px); }

  .tabletop-layout .chain-pod {
    top: calc(var(--tt-opponent-row) + 4px);
    width: calc(100vw - var(--tt-action-rail) - 10px);
    max-height: 34dvh;
    border-radius: 6px;
    padding: 3px;
  }
  .tabletop-layout .chain-zone-content { max-height: 28dvh; }
  .tabletop-layout .chain-zone-item { flex-basis: 160px; min-height: 58px; }

  .tabletop-layout .floating-panels {
    inset: calc(64px + env(safe-area-inset-top)) 0 0;
    place-items: end center;
    padding: 8px calc(var(--tt-action-rail) + 4px) calc(var(--tt-hand-height) - 16px) 4px;
  }
  .tabletop-layout .floating-panels.has-modal::before { inset: calc(64px + env(safe-area-inset-top)) 0 0; }
  .tabletop-layout .floating-panels .payment-panel,
  .tabletop-layout .floating-panels .choice-panel {
    width: calc(100vw - var(--tt-action-rail) - 8px);
    max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 9px;
    padding: 8px;
  }
  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    top: calc(64px + env(safe-area-inset-top) + var(--tt-opponent-row) + 4px);
    right: calc(var(--tt-action-rail) + 3px);
    bottom: var(--tt-overlay-bottom);
    width: calc(100vw - var(--tt-action-rail) - 7px);
    max-width: none;
    border-radius: 8px;
  }
  .tabletop-layout .replay-playback-controls {
    right: calc(var(--tt-action-rail) + 3px);
    bottom: var(--tt-overlay-bottom);
    width: calc(100vw - var(--tt-action-rail) - 6px);
  }
}

/* Final state-orientation contract: readiness changes only the in-plane card
   angle. The physical card footprint never shrinks or flips through depth. */
.tabletop-layout .identity-button.exhausted > .identity-orientation-layer,
.tabletop-layout .rune-card-chip.spent .rune-orientation-layer,
.tabletop-layout .unit-token.exhausted .card-exhaust-layer,
.tabletop-layout .image-card.exhausted .card-exhaust-layer,
.tabletop-layout :is(
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) > .attachment-orientation-layer {
  transform: rotate(90deg);
}

/* A horizontal shelf must not acquire an implicit vertical scrollbar. Cards
   in field lanes size from the lane height, so their HUD and portrait remain
   fully inside the available row at every desktop width. */
.tabletop-layout .base-row,
.tabletop-layout .field-lane-track {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.tabletop-layout .field-lane-track { align-items: center; }

.tabletop-layout .field-lane-track > :is(.unit-token, .image-card) {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 86px;
  height: calc(100% - 6px);
  max-height: 120px;
  aspect-ratio: 0.714;
}

/* Readability floor for persistent board labels and direct-manipulation HUDs. */
.tabletop-layout .board-band > .side-label,
.tabletop-layout .battlefield-caption,
.tabletop-layout .persistent-hand .section-head :is(h2, span, b),
.tabletop-layout .opponent-hand > .zone-caption,
.tabletop-layout .empty-hand-count,
.tabletop-layout .move-select-chip {
  font-size: 11px;
  line-height: 1.1;
}

.tabletop-layout .move-select-chip {
  min-width: 24px;
  width: 24px;
  min-height: 24px;
  height: 24px;
}

.tabletop-layout .chain-active-effect-text {
  min-height: 112px;
  max-height: none;
  overflow: visible;
}

/* The desktop chain is a docked utility panel. It reserves its own column, so
   neither the battlefield nor the permanent hand sits underneath it. */
@media (min-width: 1200px) {
  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: 420px;
  }

  .tabletop-layout .chain-pod {
    position: fixed;
    z-index: 90;
    top: 66px;
    right: calc(var(--tt-action-rail) + 8px);
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    width: 404px;
    height: auto;
    max-height: calc(100dvh - var(--tt-hand-height) - var(--tt-command-height) - 90px);
    overflow: hidden;
    padding: 8px;
    transform: none;
  }

  .tabletop-layout .chain-zone-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tabletop-layout .chain-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  .tabletop-layout .chain-zone-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 9px;
  }

  .tabletop-layout .chain-zone-countered > * { grid-column: 1 / -1; }

  .tabletop-layout .chain-context-panel {
    min-width: 0;
    max-height: none;
    overflow: visible;
  }

  /* If a chain asks for a blocking declaration, both tools share the utility
     column vertically instead of covering one another. */
  .tabletop-layout:has(.chain-pod) .floating-panels.has-blocking-decision {
    top: min(480px, 52dvh);
  }
}

.tabletop-layout .chain-zone-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.tabletop-layout .chain-zone-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.tabletop-layout .chain-zone-meta :is(b, em),
.tabletop-layout :is(.chain-zone-source, .chain-zone-target) {
  color: #c7e3ef;
  font-size: var(--tt-font-meta);
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tabletop-layout .chain-zone-meta em {
  flex: 0 0 auto;
  color: #8ddcff;
  font-style: normal;
}

.tabletop-layout .chain-card-motion-back {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 1px solid rgba(105, 202, 239, 0.45);
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(13, 64, 85, 0.96), rgba(5, 23, 38, 0.98)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(109, 205, 240, 0.12) 6px 8px);
  color: #d9f6ff;
  font-size: 19px;
  font-style: normal;
  font-weight: 900;
}

.tabletop-layout .pass-control {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.tabletop-layout .pass-control > span {
  font-size: var(--tt-font-small);
  font-weight: 900;
  line-height: 1.15;
}

.tabletop-layout .pass-control > small {
  color: #d5edf6;
  font-size: var(--tt-font-meta);
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

/* A battlefield unit is a card plus a compact state ledger. Keeping the
   ledger beside the art gives every 11px status a real column instead of
   forcing long Korean labels through a 45px overlay on the card face. */
.tabletop-layout .field-lane-track > .unit-token.field-token {
  flex: 0 0 198px;
  width: 198px;
  min-width: 198px;
  max-width: 198px;
  height: calc(100% + 4px);
  max-height: 120px;
  aspect-ratio: auto;
  overflow: visible;
  padding-right: 132px;
  box-sizing: border-box;
}

.tabletop-layout .unit-token.field-token > .card-exhaust-layer {
  inset: 0 auto 0 0;
  width: auto;
  height: 100%;
  aspect-ratio: 0.714;
}

.tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats {
  inset: 2px 2px 2px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: stretch;
  gap: 2px;
  width: 126px;
  max-width: 126px;
  max-height: none;
  overflow: visible;
  padding: 2px;
  border: 1px solid rgba(108, 191, 225, 0.34);
  border-radius: 6px;
  background: rgba(2, 13, 23, 0.88);
  box-sizing: border-box;
}

.tabletop-layout .card-state-hud.unit-stats > :is(b, em),
.tabletop-layout .unit-token.field-token .unit-state-badge {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 16px;
  height: auto;
  padding: 1px 2px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.tabletop-layout .unit-token.field-token .unit-state-badges {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.tabletop-layout .unit-token.field-token > .owner-chip {
  max-width: calc(100% - 136px);
}

.tabletop-layout .unit-token.field-token > .move-select-chip {
  right: auto;
  left: 59px;
}

.tabletop-layout .unit-token.field-token > .attachment-strip {
  right: 128px;
}

@media (max-width: 760px) {
  .tabletop-layout .field-lane-track > .unit-token.field-token {
    flex-basis: 182px;
    width: 182px;
    min-width: 182px;
    max-width: 182px;
    padding-right: 124px;
  }

  .tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats {
    width: 118px;
    max-width: 118px;
  }

  .tabletop-layout .unit-token.field-token > .move-select-chip { left: 49px; }
  .tabletop-layout .unit-token.field-token > .attachment-strip { right: 120px; }
}

/* Final visual-QA seal ---------------------------------------------------
   This block intentionally remains the true end of the file. */
.tabletop-layout .location-band {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 13px 3px 3px;
}

.tabletop-layout .battlefield-mat {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: hidden;
}

.tabletop-layout .battlefield.location-column {
  grid-template-rows: minmax(0, 1fr) clamp(54px, 28%, 84px) minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 3px;
}

.tabletop-layout .battlefield.location-column .field-lane {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1px;
}

.tabletop-layout .battlefield.location-column .field-lane-track {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px;
}

.tabletop-layout .field-lane-track > :is(.unit-token, .image-card) {
  height: calc(100% - 2px);
}

.tabletop-layout .field-lane-track > .unit-token.field-token {
  height: calc(100% - 2px);
}

.tabletop-layout .base-row {
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 7px;
  scroll-padding-inline: 7px;
}

.tabletop-layout .base-row > :is(.unit-token, .image-card) {
  flex: 0 0 84px;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  height: auto;
  max-height: calc(100% - 4px);
  aspect-ratio: 0.714;
}

.tabletop-layout .base-token .unit-token-body > strong {
  overflow: visible;
  font-size: 11px;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.tabletop-layout .rune-card-caption,
.tabletop-layout .rune-card-chip strong,
.tabletop-layout .rune-recycle-ready,
.tabletop-layout .rune-summary,
.tabletop-layout .rune-count {
  font-size: 11px;
}

@media (min-width: 761px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-opponent-row: 96px;
    --tt-player-row: 112px;
    --tt-shelf-card-width: 50px;
    --tt-rune-card-width: 46px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    padding-top: 12px;
    padding-bottom: 3px;
  }

  .tabletop-layout .pile-cards,
  .tabletop-layout .table-card-pile.compact .pile-cards {
    width: 50px;
    min-width: 50px;
  }

  .tabletop-layout .rune-card-chip {
    flex-basis: 46px;
    width: 46px;
    min-width: 46px;
  }

  .tabletop-layout .base-row > :is(.unit-token, .image-card) {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.floating-panels > .payment-panel),
  .tabletop-layout:has(.floating-panels > .choice-panel),
  .tabletop-layout:has(.log-drawer),
  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(304px, 24vw, 352px);
  }

  .tabletop-layout .floating-panels :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  ),
  .tabletop-layout .floating-panels.has-blocking-decision,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .chain-pod {
    width: calc(var(--tt-sheet-reserve) - 16px);
    max-width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat,
  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat.bottom {
    grid-template-columns:
      minmax(180px, 1.05fr)
      minmax(150px, 0.8fr)
      minmax(160px, 1fr)
      minmax(190px, 1.1fr);
    min-width: 0;
    overflow: hidden;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield-mat:not(.has-extra-battlefields) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    overflow-x: hidden;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield.location-column {
    width: 100%;
    min-width: 0;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .location-band[data-count="1"] .battlefield-mat {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabletop-layout .payment-body {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 7px;
  }

  .tabletop-layout .payment-card-preview .card-art { width: 62px; }
}

@media (min-width: 1200px) {
  .tabletop-layout .floating-panels .payment-panel {
    grid-template-rows: max-content minmax(0, 1fr);
    min-height: 0;
  }

  .tabletop-layout .payment-body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .tabletop-layout .payment-cost-area {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .tabletop-layout .pay-runes {
    display: flex;
    align-items: stretch;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 7px;
    scroll-padding-inline: 4px;
  }

  .tabletop-layout .pay-rune {
    flex: 0 0 102px;
    width: 102px;
    min-width: 102px;
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) {
    --tt-chain-split-height: clamp(156px, 24dvh, 210px);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .chain-pod {
    height: var(--tt-chain-split-height);
    max-height: var(--tt-chain-split-height);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .floating-panels.has-blocking-decision {
    top: calc(66px + var(--tt-chain-split-height) + 8px + 0px);
  }
}

/* Desktop spatial-density seal ------------------------------------------
   The action buttons only occupy the lower-right corner. Reserving their
   width for the full board and every utility sheet left a dead vertical
   strip. Desktop seats also need different physical column widths after the
   bottom seat reverses its named areas: Base is elastic, while the three
   piles stay exactly as wide as their cards. */
@media (min-width: 1200px) {
  .tabletop-layout {
    --tt-hand-height: 196px;
    --tt-hand-card-width: 112px;
    --tt-opponent-row: 176px;
    --tt-player-row: 196px;
    --tt-pile-dock-width: calc(var(--tt-shelf-card-width) * 3 + 8px);
    --tt-identity-track: clamp(220px, 18vw, 272px);
    --tt-resource-track: clamp(220px, 18vw, 280px);
    --tt-opponent-hand-peek: 64px;
    --tt-opponent-shelf-card: 56px;
    --tt-opponent-rune-card: 54px;
  }

  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.log-drawer) {
    --tt-sheet-reserve: clamp(288px, 21vw, 320px);
  }

  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(312px, 22vw, 336px);
  }

  .tabletop-layout:has(.floating-panels > .choice-panel) {
    --tt-sheet-reserve: clamp(336px, 24vw, 368px);
  }

  /* The playmat uses the entire viewport above the lower action rail. */
  .tabletop-layout .board-panel {
    right: var(--tt-sheet-reserve);
  }

  /* A utility sheet ends at the viewport edge. The action rail starts below
     it, so the two surfaces never overlap despite sharing the right edge. */
  .tabletop-layout .floating-panels.has-blocking-decision {
    right: 8px;
    width: calc(var(--tt-sheet-reserve) - 16px);
    max-width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout .floating-panels :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  ),
  .tabletop-layout .floating-panels.has-blocking-decision,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .chain-pod {
    right: 8px;
    width: calc(var(--tt-sheet-reserve) - 16px);
    max-width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout .chain-pod {
    top: 8px;
    left: auto;
  }

  /* Sheets stop above the command row. The hand and commands therefore only
     reserve the lower action rail, never an already-ended sheet column. */
  .tabletop-layout .table-command-layer {
    right: var(--tt-action-rail);
  }

  .tabletop-layout .table-seat {
    grid-template-columns:
      var(--tt-identity-track)
      var(--tt-pile-dock-width)
      minmax(250px, 1fr)
      var(--tt-resource-track);
    grid-template-areas: "identity piles base resources";
    min-width: 0;
    overflow: hidden;
  }

  .tabletop-layout .table-seat.bottom {
    grid-template-columns:
      var(--tt-resource-track)
      minmax(250px, 1fr)
      var(--tt-pile-dock-width)
      var(--tt-identity-track);
    grid-template-areas: "resources base piles identity";
  }

  .tabletop-layout .table-pile-dock {
    grid-template-columns: repeat(3, var(--tt-shelf-card-width));
    justify-self: center;
    width: var(--tt-pile-dock-width);
    max-width: var(--tt-pile-dock-width);
    gap: 4px;
  }

  .tabletop-layout .table-pile-dock .table-card-pile {
    width: var(--tt-shelf-card-width);
    min-width: var(--tt-shelf-card-width);
    max-width: var(--tt-shelf-card-width);
  }

  /* Rune-deck card and ready/exhausted runes share one bottom baseline. The
     deck owns only its physical-card column; every remaining pixel directly
     left of Base belongs to the rune fan. */
  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone {
    min-width: 0;
    overflow: hidden;
  }

  .tabletop-layout .rune-tabletop {
    align-self: stretch;
    align-items: stretch;
    grid-template-columns: calc(var(--tt-shelf-card-width) + 8px) minmax(0, 1fr);
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  .tabletop-layout .rune-tabletop > .table-card-pile {
    align-self: stretch;
    justify-self: start;
    width: calc(var(--tt-shelf-card-width) + 8px);
    min-width: 0;
    height: 100%;
  }

  .tabletop-layout .rune-tabletop > .table-card-pile .pile-cards {
    align-self: end;
  }

  .tabletop-layout .rune-play-area {
    align-self: stretch;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  .tabletop-layout .resource-row.rune-card-stack {
    align-items: flex-end;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding-right: 8px;
  }

  /* Opponent cards are tucked into a dedicated reveal strip. Their lower
     portion is clipped before the permanent zones begin, so they can never
     cover the opponent Base or a unit placed there. */
  .tabletop-layout .opponent-hand {
    top: 0;
    height: var(--tt-opponent-hand-peek);
    overflow: hidden;
  }

  .tabletop-layout .opponent-hand-card {
    flex-basis: 64px;
    width: 64px;
    margin-right: -39px;
  }

  .tabletop-layout .table-seat.top {
    padding-top: calc(var(--tt-opponent-hand-peek) + 4px);
  }

  .tabletop-layout .table-seat.top :is(
    .identity-button,
    .empty-card-slot,
    .champion-away-reference,
    .pile-cards,
    .table-card-pile.compact .pile-cards
  ) {
    width: var(--tt-opponent-shelf-card);
    min-width: var(--tt-opponent-shelf-card);
    max-width: var(--tt-opponent-shelf-card);
  }

  .tabletop-layout .table-seat.top .table-pile-dock {
    grid-template-columns: repeat(3, var(--tt-opponent-shelf-card));
    width: calc(var(--tt-opponent-shelf-card) * 3 + 8px);
    max-width: calc(var(--tt-opponent-shelf-card) * 3 + 8px);
  }

  .tabletop-layout .table-seat.top .table-pile-dock .table-card-pile {
    width: var(--tt-opponent-shelf-card);
    min-width: var(--tt-opponent-shelf-card);
    max-width: var(--tt-opponent-shelf-card);
  }

  .tabletop-layout .table-seat.top .rune-card-chip {
    flex-basis: var(--tt-opponent-rune-card);
    width: var(--tt-opponent-rune-card);
    min-width: var(--tt-opponent-rune-card);
  }

  .tabletop-layout .base-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-hand-height: 156px;
    --tt-hand-card-width: 86px;
    --tt-opponent-row: 130px;
    --tt-player-row: 132px;
    --tt-opponent-hand-peek: 46px;
    --tt-opponent-shelf-card: 40px;
    --tt-opponent-rune-card: 38px;
  }

  .tabletop-layout .opponent-hand-card {
    flex-basis: 54px;
    width: 54px;
    margin-right: -35px;
  }

  .tabletop-layout .table-seat.top .identity-zone {
    grid-template-rows: 11px minmax(0, 1fr);
  }

  .tabletop-layout .table-seat.top .table-card-pile {
    grid-template-rows: minmax(0, 1fr) 11px;
  }

  .tabletop-layout .table-seat.top .pile-label,
  .tabletop-layout .table-seat.top .identity-zone > .zone-caption {
    min-height: 10px;
    font-size: 10px;
    line-height: 10px;
  }

  .tabletop-layout .table-seat.top .rune-play-area {
    grid-template-rows: minmax(0, 1fr);
  }

  .tabletop-layout .table-seat.top .rune-summary {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 20px;
  }

  .tabletop-layout .table-seat.top .resource-row.rune-card-stack {
    padding-top: 5px;
  }
}

/* Direct board payment and final Rune alignment. */
@media (min-width: 1200px) {
  .tabletop-layout .resource-zone {
    grid-template-rows: minmax(0, 1fr);
  }

  .tabletop-layout .resource-zone > .zone-caption {
    position: absolute;
  }

  .tabletop-layout .rune-tabletop {
    grid-row: 1;
    height: 100%;
  }

  .tabletop-layout .payment-stage-banner.payment-panel {
    position: absolute;
    z-index: 72;
    top: 4px;
    right: 10px;
    bottom: auto;
    left: 10px;
    display: grid;
    grid-template-columns: minmax(330px, 1fr) minmax(180px, auto) auto;
    align-items: center;
    gap: 8px;
    width: auto;
    height: calc(var(--tt-command-height) - 8px);
    min-height: 0;
    max-width: none;
    max-height: calc(var(--tt-command-height) - 8px);
    overflow: hidden;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(255, 204, 75, 0.74);
    border-radius: 9px;
    background: rgba(4, 20, 34, 0.98);
    box-shadow: 0 0 24px rgba(255, 190, 40, 0.16);
    transform: none;
  }

  .tabletop-layout .payment-stage-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
  }

  .tabletop-layout .payment-stage-kicker {
    grid-row: 1 / span 2;
    align-self: stretch;
    display: grid;
    place-items: center;
    border-radius: 6px;
    padding: 2px 7px;
    background: #8b6412;
    color: #fff2b3;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .tabletop-layout .payment-stage-title-row h2 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.1;
  }

  .tabletop-layout .payment-stage-title-row span,
  .tabletop-layout .payment-stage-copy p {
    overflow: hidden;
    margin: 0;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-resources {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tabletop-layout .payment-stage-resources :is(button, label) {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .tabletop-layout .payment-stage-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: max-content;
  }

  .tabletop-layout .payment-stage-controls button {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .tabletop-layout .table-seat.payment-seat {
    isolation: isolate;
    pointer-events: none;
  }

  .tabletop-layout .table-seat.payment-seat .resource-zone {
    position: relative;
    z-index: 40;
    overflow: visible;
    border-radius: 9px;
    outline: 2px solid rgba(255, 206, 74, 0.78);
    outline-offset: 3px;
    box-shadow: 0 0 22px rgba(255, 190, 42, 0.34);
  }

  .tabletop-layout .payment-seat .payment-rune-choice {
    z-index: calc(48 + var(--rune-index));
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1.12);
  }

  .tabletop-layout .payment-seat .payment-rune-choice .rune-orientation-layer {
    box-shadow: 0 0 0 2px rgba(255, 213, 91, 0.8), 0 8px 18px rgba(0, 0, 0, 0.46);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.is-energy-selected .rune-orientation-layer {
    transform: rotate(90deg);
    filter: brightness(1.22) saturate(1.14);
    box-shadow: 0 0 0 3px #ffd85f, 0 0 22px rgba(255, 202, 62, 0.7);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.is-power-selected .rune-orientation-layer {
    filter: brightness(1.2) saturate(1.2);
    box-shadow: 0 0 0 3px #bd7cff, 0 0 22px rgba(178, 95, 255, 0.72);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.payment-unavailable {
    pointer-events: none;
    opacity: 0.34;
    filter: grayscale(0.9) brightness(0.55);
  }

  .tabletop-layout .payment-rune-mode {
    top: 3px;
    right: 3px;
    left: auto;
    z-index: 4;
    background: rgba(2, 14, 24, 0.94);
  }

  .tabletop-layout .battlefield.location-column {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  .tabletop-layout .field-lane-track > .unit-token.field-token {
    height: calc(100% - 8px) !important;
    max-height: calc(100% - 8px);
  }
}

/* Chain/utility coexistence ------------------------------------------------
   Chain is a persistent game-state surface, not another dismissible sheet.
   When a player opens Card Info, the log, Trash, or Banished while Chain is
   active, keep both in the same right dock and divide the height explicitly.
   This prevents the higher-z-index utility sheet from making Chain appear to
   vanish while preserving access to the game's supporting information. */
.tabletop-layout:has(.chain-pod):is(
  .inspector-open,
  :has(.log-drawer),
  :has(.floating-panels > .graveyard-panel),
  :has(.floating-panels > .banished-panel),
  :has(.floating-panels > .intel-panel)
) {
  --tt-chain-utility-height: clamp(168px, 24dvh, 216px);
}

@media (min-width: 1200px) {
  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) .chain-pod {
    position: absolute;
    top: 8px;
    right: calc(8px - var(--tt-sheet-reserve));
    left: auto;
    width: calc(var(--tt-sheet-reserve) - 16px);
    height: var(--tt-chain-utility-height) !important;
    min-height: 0 !important;
    max-height: var(--tt-chain-utility-height) !important;
    box-sizing: border-box;
    transform: none;
  }

  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) :is(
    .floating-panels .graveyard-panel,
    .floating-panels .banished-panel,
    .floating-panels .intel-panel,
    .inspector.inspector-panel,
    .log-drawer
  ) {
    top: calc(66px + var(--tt-chain-utility-height) + 8px);
  }
}

@media (min-width: 761px) and (max-width: 1199px) {
  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) .chain-pod {
    position: fixed;
    top: 66px;
    right: calc(var(--tt-action-rail) + 6px);
    left: auto;
    width: min(380px, 44vw);
    height: var(--tt-chain-utility-height) !important;
    min-height: 0 !important;
    max-height: var(--tt-chain-utility-height) !important;
    box-sizing: border-box;
    transform: none;
  }

  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) :is(
    .floating-panels .graveyard-panel,
    .floating-panels .banished-panel,
    .floating-panels .intel-panel,
    .inspector.inspector-panel,
    .log-drawer
  ) {
    top: calc(66px + var(--tt-chain-utility-height) + 8px);
  }
}

@media (max-width: 760px) {
  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) {
    --tt-chain-utility-height: clamp(120px, 20dvh, 160px);
  }

  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) .chain-pod {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    right: calc(var(--tt-action-rail) + 3px);
    left: auto;
    width: calc(100vw - var(--tt-action-rail) - 6px);
    height: var(--tt-chain-utility-height) !important;
    min-height: 0 !important;
    max-height: var(--tt-chain-utility-height) !important;
    box-sizing: border-box;
    transform: none;
  }

  .tabletop-layout:has(.chain-pod):is(
    .inspector-open,
    :has(.log-drawer),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel)
  ) :is(
    .floating-panels .graveyard-panel,
    .floating-panels .banished-panel,
    .floating-panels .intel-panel,
    .inspector.inspector-panel,
    .log-drawer
  ) {
    top: calc(64px + env(safe-area-inset-top) + var(--tt-chain-utility-height) + 8px);
  }
}

/* True EOF interaction and physical-card seal --------------------------
   Keep this block last: older responsive contracts above still describe
   the retired side-ledger Unit presentation. */
.tabletop-layout {
  --tt-field-physical-width: 50px;
  --tt-field-physical-height: 70px;
  --tt-field-physical-footprint: 78px;
  --tt-base-physical-width: 60px;
  --tt-base-physical-height: 84px;
  --tt-base-physical-footprint: 94px;
}

.tabletop-layout .field-lane-track:has(> .physical-board-card) {
  overflow: visible !important;
}

/* A physical card is taller than its low-height lane. Let the card face
   breathe into the battlefield centre instead of cropping its art, corner
   values, or status chips at the lane boundary. */
.tabletop-layout .battlefield.location-column .field-lane:has(.physical-board-card),
.tabletop-layout .base-row:has(.physical-board-card) {
  overflow-y: visible !important;
}

.tabletop-layout .battlefield.location-column .field-lane:has(.physical-board-card) {
  z-index: 3;
}

/* During direct Rune payment every card must keep its own hit target. The
   normal tabletop fan overlaps Runes for density, but overlapping controls
   makes the covered cards impossible to click. */
.tabletop-layout .table-seat.payment-seat .resource-row.rune-card-stack {
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-right: 4px !important;
}

.tabletop-layout .table-seat.payment-seat .resource-row.rune-card-stack > .payment-rune-choice {
  flex: 0 0 var(--tt-rune-card-width, 48px) !important;
  margin-right: 0 !important;
}

.tabletop-layout .field-lane-track > .unit-token.field-token.physical-board-card,
.tabletop-layout .base-row > .unit-token.base-token.physical-board-card {
  flex: 0 0 var(--tt-field-physical-footprint) !important;
  width: var(--tt-field-physical-footprint) !important;
  min-width: var(--tt-field-physical-footprint) !important;
  max-width: var(--tt-field-physical-footprint) !important;
  min-height: 0 !important;
  height: calc(100% - 2px) !important;
  max-height: var(--tt-field-physical-footprint) !important;
  aspect-ratio: auto !important;
  overflow: visible;
  padding: 0 !important;
}

.tabletop-layout .base-row > .unit-token.base-token.physical-board-card {
  flex-basis: var(--tt-base-physical-footprint) !important;
  width: var(--tt-base-physical-footprint) !important;
  min-width: var(--tt-base-physical-footprint) !important;
  max-width: var(--tt-base-physical-footprint) !important;
  height: min(calc(100% - 4px), var(--tt-base-physical-footprint)) !important;
  max-height: var(--tt-base-physical-footprint) !important;
}

.tabletop-layout .physical-board-card > .card-exhaust-layer {
  inset: 50% auto auto 50% !important;
  width: var(--tt-field-physical-width) !important;
  height: var(--tt-field-physical-height) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 6px;
  transform: translate(-50%, -50%) rotate(0deg) !important;
}

.tabletop-layout .base-token.physical-board-card > .card-exhaust-layer {
  width: var(--tt-base-physical-width) !important;
  height: var(--tt-base-physical-height) !important;
}

.tabletop-layout .physical-board-card.exhausted > .card-exhaust-layer {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.tabletop-layout .physical-board-card .unit-board-overlay > .unit-state-badges,
.tabletop-layout .physical-board-card .attached-gear-board-overlay > .unit-state-badges {
  position: absolute !important;
  top: 3px !important;
  right: auto !important;
  left: 3px !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
  width: auto;
  max-width: calc(100% - 8px);
  overflow: visible;
}

.tabletop-layout .physical-board-card .unit-board-overlay .unit-state-badge {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
}

.tabletop-layout .physical-board-card.field-token > .owner-chip,
.tabletop-layout .physical-board-card.base-token > .owner-chip {
  top: 50% !important;
  right: -1px !important;
  left: auto !important;
  max-width: 21px;
  padding: 2px 4px;
  transform: translateY(-50%) !important;
  font-size: 10px;
}

.tabletop-layout .physical-board-card.exhausted.field-token > .owner-chip,
.tabletop-layout .physical-board-card.exhausted.base-token > .owner-chip {
  top: -1px !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.tabletop-layout .physical-board-card.field-token > .move-select-chip,
.tabletop-layout .physical-board-card.base-token > .move-select-chip {
  top: -2px !important;
  right: -2px !important;
  left: auto !important;
}

.tabletop-layout .physical-board-card.field-token > .attachment-strip,
.tabletop-layout .physical-board-card.base-token > .attachment-strip {
  top: 50% !important;
  right: -8px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.tabletop-layout .physical-board-card > .attachment-strip > button.attached-gear {
  flex: 0 0 45px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 45px;
  min-height: 45px;
  max-height: 45px;
}

.tabletop-layout .physical-board-card .attached-gear-board-overlay > .unit-state-badges {
  top: 2px !important;
  left: 2px !important;
  max-width: calc(100% - 4px);
}

.tabletop-layout .physical-board-card .attached-gear-board-overlay .unit-state-badge {
  padding: 1px 2px;
  border-radius: 3px;
  font-size: 7px;
}

.tabletop-layout .physical-board-card .attached-gear-board-overlay > .attached-gear-might {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 15px;
  width: auto;
  height: 15px;
  padding: 0 2px;
  font-size: 9px;
}

.tabletop-layout .payment-stage-banner.payment-panel {
  pointer-events: auto !important;
}

@media (min-width: 761px) and (min-height: 821px) {
  .tabletop-layout {
    --tt-field-physical-width: 58px;
    --tt-field-physical-height: 81px;
    --tt-field-physical-footprint: 90px;
    --tt-base-physical-width: 66px;
    --tt-base-physical-height: 92px;
    --tt-base-physical-footprint: 102px;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-hand-card-width: 96px !important;
  }
}

@media (max-width: 1199px) {
  .tabletop-layout .payment-stage-banner.payment-panel {
    position: absolute;
    z-index: 72;
    inset: 2px 4px auto;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    width: auto;
    height: calc(var(--tt-command-height) - 4px);
    min-height: 0;
    max-width: none;
    max-height: calc(var(--tt-command-height) - 4px);
    overflow: hidden;
    padding: 3px 5px;
    border-radius: 7px;
    background: rgba(4, 20, 34, 0.98);
  }

  .tabletop-layout .payment-stage-copy,
  .tabletop-layout .payment-stage-resources,
  .tabletop-layout .payment-stage-controls {
    min-width: 0;
    max-height: 100%;
  }

  .tabletop-layout .payment-stage-resources {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tabletop-layout .payment-stage-title-row {
    display: flex;
    gap: 4px;
    min-width: 0;
  }

  .tabletop-layout .payment-stage-title-row :is(h2, span) {
    overflow: hidden;
    margin: 0;
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-copy > p {
    display: none;
  }

  .tabletop-layout .payment-stage-controls {
    display: flex;
    gap: 3px;
  }

  .tabletop-layout .payment-stage-controls button {
    min-height: 30px;
    padding: 3px 5px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  .tabletop-layout {
    --tt-field-physical-width: 42px;
    --tt-field-physical-height: 59px;
    --tt-field-physical-footprint: 66px;
    --tt-base-physical-width: 46px;
    --tt-base-physical-height: 64px;
    --tt-base-physical-footprint: 72px;
  }

  .tabletop-layout .payment-stage-banner.payment-panel {
    grid-template-columns: minmax(90px, 1fr) minmax(0, 0.7fr) auto;
  }

  .tabletop-layout .payment-stage-kicker {
    font-size: 10px;
  }

  .tabletop-layout .payment-stage-title-row span {
    display: none;
  }
}

/* Physical board-card contract -----------------------------------------
   Board Units and Gear stay as real cards. Readiness is communicated by
   the card's angle; values and status chips live on the rotating face. */
.tabletop-layout {
  --tt-field-physical-width: 50px;
  --tt-field-physical-height: 70px;
  --tt-field-physical-footprint: 78px;
  --tt-base-physical-width: 60px;
  --tt-base-physical-height: 84px;
  --tt-base-physical-footprint: 94px;
}

.tabletop-layout .field-lane-track > .unit-token.field-token.physical-board-card,
.tabletop-layout .base-row > .unit-token.base-token.physical-board-card {
  position: relative;
  flex: 0 0 var(--tt-field-physical-footprint) !important;
  width: var(--tt-field-physical-footprint) !important;
  min-width: var(--tt-field-physical-footprint) !important;
  max-width: var(--tt-field-physical-footprint) !important;
  height: min(calc(100% - 8px), var(--tt-field-physical-footprint)) !important;
  max-height: var(--tt-field-physical-footprint) !important;
  aspect-ratio: auto !important;
  overflow: visible;
  padding: 0 !important;
  box-sizing: border-box;
}

.tabletop-layout .base-row > .unit-token.base-token.physical-board-card {
  flex-basis: var(--tt-base-physical-footprint) !important;
  width: var(--tt-base-physical-footprint) !important;
  min-width: var(--tt-base-physical-footprint) !important;
  max-width: var(--tt-base-physical-footprint) !important;
  height: min(calc(100% - 4px), var(--tt-base-physical-footprint)) !important;
  max-height: var(--tt-base-physical-footprint) !important;
}

.tabletop-layout .physical-board-card > .card-exhaust-layer {
  position: absolute;
  inset: 50% auto auto 50% !important;
  width: var(--tt-field-physical-width) !important;
  height: var(--tt-field-physical-height) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 6px;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transform-origin: center;
}

.tabletop-layout .base-token.physical-board-card > .card-exhaust-layer {
  width: var(--tt-base-physical-width) !important;
  height: var(--tt-base-physical-height) !important;
}

.tabletop-layout .physical-board-card.exhausted > .card-exhaust-layer {
  filter: saturate(0.72) brightness(0.78);
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.tabletop-layout .physical-board-card .card-face-layer {
  isolation: isolate;
  overflow: hidden;
  border-radius: 6px;
}

.tabletop-layout .physical-board-card .unit-token-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.tabletop-layout .physical-board-card .unit-token-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.tabletop-layout .physical-board-card .unit-token-body {
  position: absolute;
  z-index: 1;
  inset: auto 2px 2px;
  min-width: 0;
  padding: 3px;
  border-radius: 4px;
  background: rgba(2, 12, 21, 0.88);
}

.tabletop-layout .physical-board-card > :is(.card-state-hud, .primary-card-state) {
  display: none !important;
}

.tabletop-layout .unit-board-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  pointer-events: none;
}

.tabletop-layout .unit-board-overlay > .unit-state-badges {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: auto;
  left: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: auto;
  max-width: calc(100% - 8px);
  overflow: visible;
}

.tabletop-layout .unit-board-overlay .unit-state-badge {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(222, 238, 247, 0.34);
  border-radius: 5px;
  padding: 2px 4px;
  background: rgba(4, 18, 29, 0.94);
  color: #f4fbff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.54);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .unit-board-overlay .unit-state-badge.tone-positive {
  border-color: rgba(116, 223, 150, 0.72);
  background: rgba(13, 67, 41, 0.94);
}

.tabletop-layout .unit-board-overlay .unit-state-badge.tone-negative {
  border-color: rgba(244, 126, 126, 0.75);
  background: rgba(91, 25, 31, 0.95);
}

.tabletop-layout .unit-board-overlay .unit-state-badge.tone-warning {
  border-color: rgba(255, 207, 88, 0.78);
  background: rgba(91, 61, 12, 0.95);
}

.tabletop-layout .unit-corner-value {
  position: absolute;
  z-index: 4;
  bottom: 3px;
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 6px;
  padding: 0 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.tabletop-layout .unit-remaining-health {
  left: 3px;
  border-color: rgba(209, 228, 245, 0.92);
  background: linear-gradient(180deg, #f6fbff, #b8ccdf);
  color: #172637;
  text-shadow: none;
}

.tabletop-layout .unit-remaining-health.lethal-stat {
  border-color: #ff8b8b;
  background: #892a32;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.tabletop-layout .unit-current-might {
  right: 3px;
  border-color: rgba(255, 145, 120, 0.9);
  background: linear-gradient(180deg, #a83b34, #6c1d25);
}

.tabletop-layout .field-token.physical-board-card .unit-corner-value {
  min-width: 21px;
  height: 23px;
  padding-inline: 3px;
  font-size: 13px;
}

.tabletop-layout .physical-board-card > .owner-chip {
  z-index: 11;
  top: 50%;
  right: -1px;
  left: auto;
  max-width: 21px;
  padding: 2px 4px;
  transform: translateY(-50%);
  font-size: 10px;
}

.tabletop-layout .physical-board-card.exhausted > .owner-chip {
  top: -1px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.tabletop-layout .physical-board-card > .owner-chip .owner-chip-full {
  display: none;
}

.tabletop-layout .physical-board-card > .owner-chip .owner-chip-short {
  display: inline;
}

.tabletop-layout .physical-board-card > .move-select-chip {
  top: -2px;
  right: -2px;
  left: auto;
}

.tabletop-layout .physical-board-card > .attachment-strip {
  z-index: 12;
  top: 50%;
  right: -8px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}

.tabletop-layout .physical-board-card > .attachment-strip > button.attached-gear {
  flex: 0 0 45px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  overflow: hidden;
}

.tabletop-layout .attached-gear-board-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  pointer-events: none;
}

.tabletop-layout .attached-gear-board-overlay > .unit-state-badges {
  top: 2px;
  right: auto;
  left: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(100% - 4px);
}

.tabletop-layout .attached-gear-board-overlay .unit-state-badge {
  max-width: 100%;
  padding: 1px 2px;
  border-radius: 3px;
  font-size: 7px;
}

.tabletop-layout .attached-gear-board-overlay > .attached-gear-might {
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  min-width: 15px;
  width: auto;
  height: 15px;
  border-radius: 5px;
  padding: 0 2px;
  color: #fff1a7;
  font-size: 9px;
}

.tabletop-layout .payment-stage-banner.payment-panel {
  pointer-events: auto;
}

@media (min-width: 761px) and (min-height: 821px) {
  .tabletop-layout {
    --tt-field-physical-width: 58px;
    --tt-field-physical-height: 81px;
    --tt-field-physical-footprint: 90px;
    --tt-base-physical-width: 66px;
    --tt-base-physical-height: 92px;
    --tt-base-physical-footprint: 102px;
  }
}

@media (max-width: 760px) {
  .tabletop-layout {
    --tt-field-physical-width: 42px;
    --tt-field-physical-height: 59px;
    --tt-field-physical-footprint: 66px;
    --tt-base-physical-width: 46px;
    --tt-base-physical-height: 64px;
    --tt-base-physical-footprint: 72px;
  }

  .tabletop-layout .unit-board-overlay .unit-state-badge {
    max-width: 38px;
    padding: 1px 2px;
    font-size: 8px;
  }

  .tabletop-layout .unit-corner-value,
  .tabletop-layout .field-token.physical-board-card .unit-corner-value {
    min-width: 18px;
    height: 20px;
    font-size: 11px;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-hand-card-width: 96px;
  }
}

/* Mid-size desktop tables still keep both battlefields in view while a
   utility sheet is open. A 404px sheet is comfortable at 1440px+, but at
   1200-1399px it needlessly forces the playmat into a horizontal carousel. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.floating-panels > .payment-panel),
  .tabletop-layout:has(.floating-panels > .choice-panel),
  .tabletop-layout:has(.log-drawer),
  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(304px, 26.25vw, 336px);
  }

  .tabletop-layout .floating-panels :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  ),
  .tabletop-layout .floating-panels.has-blocking-decision,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .chain-pod {
    width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout:is(.inspector-open, :has(.log-drawer), :has(.chain-pod)) .battlefield-mat,
  .tabletop-layout:has(.floating-panels > :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  )) .battlefield-mat {
    grid-auto-columns: minmax(370px, 1fr);
  }

  .tabletop-layout:is(.inspector-open, :has(.log-drawer), :has(.chain-pod)) .battlefield.location-column,
  .tabletop-layout:has(.floating-panels > :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  )) .battlefield.location-column {
    min-width: 370px;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-shelf-card-width: 56px;
    --tt-rune-card-width: 48px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns:
      clamp(180px, 15vw, 230px)
      clamp(170px, 15vw, 220px)
      minmax(170px, 1fr)
      clamp(210px, 19vw, 290px);
  }

  .tabletop-layout .battlefield.location-column {
    grid-template-rows: minmax(68px, 1fr) 86px minmax(68px, 1fr);
  }

  .tabletop-layout .battlefield.location-column .field-center {
    grid-template-columns: clamp(132px, 29%, 180px) minmax(0, 1fr);
  }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout.inspector-open {
    height: calc(var(--app-height, 100dvh) - 52px - env(safe-area-inset-top));
  }

  .tabletop-topbar {
    --tt-header-height: calc(52px + env(safe-area-inset-top));
    grid-template-columns: minmax(150px, 32vw) minmax(0, 1fr);
    grid-template-rows: 28px 17px;
    align-items: stretch;
    gap: 2px 5px;
    height: var(--tt-header-height);
    min-height: var(--tt-header-height);
    padding: calc(env(safe-area-inset-top) + 2px) 6px 3px;
  }

  .tabletop-topbar .titlebox {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 0 4px;
  }
  .tabletop-topbar .titlebox h1 { margin: 0; font-size: 0.62rem; }
  .tabletop-topbar .status-kicker,
  .tabletop-topbar .status-detail { display: block; font-size: 0.32rem; line-height: 1; }
  .tabletop-topbar .score-track {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    grid-template-columns: minmax(42px, 0.25fr) minmax(0, 1fr) minmax(42px, 0.25fr);
    gap: 3px;
    width: 100%;
    height: 17px;
    border: 0;
    padding: 0 2px;
    background: transparent;
    transform: none;
  }
  .tabletop-topbar .score-name { display: block; font-size: 0.31rem; text-align: center; }
  .tabletop-topbar .score-rail { grid-column: 2; grid-row: 1; gap: 1px; }
  .tabletop-topbar .score-cell { height: 13px; font-size: 0.31rem; }
  .tabletop-topbar .turnbox {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    align-self: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 2px;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
  }
  .tabletop-topbar .turnbox > span {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px 5px;
    font-size: 0.36rem;
  }
  .tabletop-topbar .turnbox button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: auto;
    height: 22px;
    min-width: max-content;
    min-height: 22px;
    padding: 2px 5px;
    font-size: 0.34rem;
    white-space: nowrap;
  }

  .tabletop-layout {
    --tt-hand-height: calc(92px + env(safe-area-inset-bottom));
    --tt-opponent-row: 52px;
    --tt-player-row: 56px;
    --tt-action-rail: 54px;
    --tt-overlay-bottom: calc(var(--tt-hand-height) + 32px + var(--tt-player-row) + 4px);
    --tt-replay-panel-height: 64px;
    height: calc(var(--app-height, 100dvh) - 52px - env(safe-area-inset-top));
  }

  .tabletop-layout .board-panel {
    inset: 0 var(--tt-action-rail) calc(var(--tt-hand-height) + 32px) 0;
    gap: 2px;
    padding: 2px;
  }
  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns: clamp(78px, 13vw, 108px) minmax(0, 1fr) clamp(90px, 13vw, 100px);
    grid-template-areas: "identity base resources";
    gap: 2px;
    padding: 1px;
  }
  .tabletop-layout .table-seat.bottom { grid-template-areas: "resources base identity"; }
  .tabletop-layout .tabletop-identity-dock { grid-template-rows: minmax(0, 1fr) 16px; gap: 1px; }
  .tabletop-layout .identity-zone { grid-template-rows: 7px minmax(0, 1fr); }
  .tabletop-layout .identity-zone > .zone-caption { display: block; font-size: 0.24rem; }
  .tabletop-layout .physical-identity-cards { gap: 1px; }
  .tabletop-layout .player-summary {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .tabletop-layout .player-summary h2 { flex: 0 0 auto; max-width: 64px; font-size: 0.29rem; }
  .tabletop-layout .player-stats { flex: 0 0 auto; gap: 1px; overflow: visible; }
  .tabletop-layout .player-stats > * { height: 13px; min-height: 13px; padding: 0 2px; font-size: 0.25rem; }
  .tabletop-layout .champion-control {
    flex: 0 0 auto;
    grid-template-columns: minmax(34px, auto) auto;
    gap: 1px;
    min-width: 58px;
    min-height: 13px;
    height: 13px;
    padding: 0 1px;
  }
  .tabletop-layout .champion-control :is(span, small) { font-size: 0.23rem; }
  .tabletop-layout .champion-control button {
    min-height: 12px;
    height: 12px;
    padding: 0 2px;
    font-size: 0.23rem;
    line-height: 10px;
  }

  .tabletop-layout .table-pile-dock {
    top: 1px;
    right: clamp(80px, 13vw, 110px);
    width: 94px;
    height: 47px;
    gap: 1px;
  }
  .tabletop-layout .table-seat.top .table-pile-dock { left: clamp(80px, 13vw, 110px); right: auto; }
  .tabletop-layout .table-seat.bottom .table-pile-dock { right: clamp(80px, 13vw, 110px); }
  .tabletop-layout .pile-cards { width: 21px; }
  .tabletop-layout .pile-label { display: block; font-size: 0.25rem; line-height: 1; }
  .tabletop-layout .pile-count { bottom: 5px; min-width: 12px; height: 12px; padding: 0 2px; font-size: 0.3rem; }
  .tabletop-layout .table-seat.top .base-row { padding-left: 97px; }
  .tabletop-layout .table-seat.bottom .base-row { padding-right: 97px; }

  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone { grid-template-rows: 7px minmax(0, 1fr); }
  .tabletop-layout .resource-zone > .zone-caption,
  .tabletop-layout .base-zone > .zone-caption { display: block; font-size: 0.24rem; line-height: 1; }
  .tabletop-layout .rune-tabletop { grid-template-columns: 25px minmax(0, 1fr); gap: 1px; }
  .tabletop-layout .table-card-pile.compact .pile-cards { width: 20px; }
  .tabletop-layout .rune-summary {
    right: auto;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1px;
    scrollbar-width: thin;
  }
  .tabletop-layout .rune-count {
    flex: 0 0 auto;
    min-width: max-content;
    height: 14px;
    min-height: 14px;
    padding: 1px 2px;
    font-size: 0.25rem;
  }
  .tabletop-layout .rune-summary-art { width: 8px; height: 11px; }
  .tabletop-layout .rune-count b { display: inline; }
  .tabletop-layout .resource-row.rune-card-stack { padding: 15px 5px 1px 0; }
  .tabletop-layout .rune-card-chip { flex-basis: 28px; width: 28px; margin-right: -20px; }
  .tabletop-layout .rune-recycle-ready { bottom: 9px; font-size: 0.2rem; }

  .tabletop-layout .location-band { overflow: hidden; padding: 30px 2px 2px; }
  .tabletop-layout .battlefield-caption { top: 1px; left: 4px; font-size: 0.29rem; }
  .tabletop-layout .battlefield-mat {
    grid-auto-columns: minmax(250px, calc(100vw - var(--tt-action-rail) - 12px));
    align-content: start;
    gap: 2px;
    overflow: auto;
    scroll-snap-type: both proximity;
  }
  .tabletop-layout .battlefield {
    grid-template-rows: 61px 28px 61px;
    gap: 1px;
    min-height: 154px;
    border-radius: 4px;
    padding: 1px;
  }
  .tabletop-layout .field-lane { padding: 7px 1px 1px; }
  .tabletop-layout .field-lane-track { justify-content: flex-start; gap: 1px; padding: 0; overflow-x: auto; overflow-y: hidden; }
  .tabletop-layout .field-center { grid-template-columns: 48px minmax(0, 1fr); gap: 2px; padding: 1px; }
  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane-track > .image-card,
  .tabletop-layout .hidden-card-back { flex-basis: 38px; width: 38px; border-radius: 3px; }
  .tabletop-layout .base-row > .unit-token,
  .tabletop-layout .base-row > .image-card { flex-basis: 30px; width: 30px; border-radius: 3px; }
  .tabletop-layout .unit-token-body { padding: 5px 11px 1px 1px; }
  .tabletop-layout .unit-token-body > strong { font-size: 0.27rem; }
  .tabletop-layout .unit-token-body > span { display: block; font-size: 0.2rem; }
  .tabletop-layout .card-state-hud.unit-stats {
    inset: auto 1px 1px auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    max-height: calc(100% - 2px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .tabletop-layout .card-state-hud.unit-stats > b,
  .tabletop-layout .card-state-hud.unit-stats > em {
    display: grid;
    flex: 0 0 auto;
    min-width: 11px;
    min-height: 9px;
    padding: 0 1px;
    font-size: 0.2rem;
  }
  .tabletop-layout .card-state-hud.unit-stats > b:first-child { margin-right: 0; }
  .tabletop-layout .card-state-hud.unit-stats > em:nth-of-type(n+2) { display: grid; }
  .tabletop-layout .unit-state-badges { right: 12px; overflow-x: auto; scrollbar-width: none; }
  .tabletop-layout .unit-state-badge { padding: 1px; font-size: 0.19rem; }
  .tabletop-layout .owner-chip {
    display: block;
    top: 11px;
    max-width: calc(100% - 14px);
    padding: 1px;
    font-size: 0.19rem;
  }

  .tabletop-layout .opponent-hand { top: calc(100% + 2px); width: min(38vw, 260px); height: 34px; grid-template-rows: 6px minmax(0, 1fr); }
  .tabletop-layout .opponent-hand > .zone-caption { padding: 0 3px; font-size: 0.23rem; }
  .tabletop-layout .opponent-hand-card {
    flex-basis: 20px;
    width: 20px;
    margin-right: -13px;
    border-radius: 2px;
    transform: translateY(calc(var(--fan-rise) * -0.24)) rotate(calc(var(--fan-angle) * 0.6));
  }
  .tabletop-layout .opponent-hand-card.card-back i { font-size: 0.42rem; }

  .tabletop-layout .persistent-hand .hand-panel { grid-template-rows: 16px minmax(0, 1fr); }
  .tabletop-layout .persistent-hand .section-head { gap: 3px; padding: 1px; }
  .tabletop-layout .persistent-hand .section-head h2 { display: block; max-width: 38%; font-size: 0.29rem; }
  .tabletop-layout .persistent-hand .section-head span { font-size: 0.29rem; }
  .tabletop-layout .hand-focus-toggle { min-height: 14px; height: 14px; padding: 0 4px; font-size: 0.27rem; }
  .tabletop-layout .hand-fan { padding: 0 18px; }
  .tabletop-layout .hand-fan-card { flex-basis: 54px; width: 54px; margin-right: -30px; border-radius: 4px; }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(10)) .hand-fan-card { margin-right: -37px; }
  .tabletop-layout .hand-fan:has(.hand-fan-card:nth-child(15)) .hand-fan-card { margin-right: -43px; }
  .tabletop-layout .hand-fan .hand-fan-card:last-child,
  .tabletop-layout .persistent-hand.focused .hand-fan .hand-fan-card:last-child { margin-right: 0; }
  .tabletop-layout .persistent-hand.focused .hand-fan-card { margin-right: -30px; transform: translateY(calc(var(--fan-rise) - 4px)) rotate(calc(var(--fan-angle) * 0.55)); }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(10)) .hand-fan-card { margin-right: -37px; }
  .tabletop-layout .persistent-hand.focused .hand-fan:has(.hand-fan-card:nth-child(15)) .hand-fan-card { margin-right: -43px; }
  .tabletop-layout .hand-fan-card:hover,
  .tabletop-layout .hand-fan-card.selected-card,
  .tabletop-layout .hand-fan-card:focus-visible { transform: translateY(-18px) rotate(0) scale(1.04); }
  .tabletop-layout .persistent-hand.focused .hand-fan-card.selected-card,
  .tabletop-layout .persistent-hand.focused .hand-fan-card:focus-visible { transform: translateY(-21px) rotate(0) scale(1.05); }

  .tabletop-layout .context-action-dock {
    right: 3px;
    bottom: calc(var(--tt-hand-height) + 2px);
    left: 3px;
    grid-template-columns: minmax(72px, 0.36fr) minmax(0, 1.64fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 3px;
    min-height: 26px;
    max-height: 28px;
    padding: 2px 3px;
  }
  .tabletop-layout .action-context { grid-area: auto; display: grid; }
  .tabletop-layout .action-context .bar-label { font-size: 0.22rem; }
  .tabletop-layout .action-context strong { font-size: 0.31rem; }
  .tabletop-layout .action-context span:last-child { font-size: 0.24rem; }
  .tabletop-layout .action-command-list { grid-area: auto; justify-content: flex-start; gap: 2px; min-height: 0; height: 100%; }
  .tabletop-layout .action-command-list button { min-height: 20px; padding: 2px 5px; font-size: 0.3rem; }
  .tabletop-layout .table-action-rail { grid-area: auto; right: 3px; bottom: calc(3px + env(safe-area-inset-bottom)); width: calc(var(--tt-action-rail) - 6px); gap: 3px; }
  .tabletop-layout .table-action-rail button,
  .tabletop-layout .table-action-rail button[data-action="toggle-hand"] { min-height: 29px; padding: 2px; font-size: 0.34rem; }
  .tabletop-layout .move-batch-bar { bottom: calc(var(--tt-hand-height) + 5px); width: calc(100vw - var(--tt-action-rail) - 8px); }

  .tabletop-layout .floating-panels { inset: calc(52px + env(safe-area-inset-top)) 0 0; }
  .tabletop-layout .floating-panels.has-modal::before { inset: calc(52px + env(safe-area-inset-top)) 0 0; }
  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    top: calc(52px + env(safe-area-inset-top) + var(--tt-opponent-row) + 2px);
    bottom: var(--tt-overlay-bottom);
  }
  .tabletop-layout .replay-playback-controls { bottom: var(--tt-overlay-bottom); }
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout .replay-playback-controls {
    display: grid;
    grid-template-columns: minmax(74px, 0.5fr) minmax(0, 1.5fr);
    grid-template-rows: 30px 24px;
    gap: 2px 4px;
    height: var(--tt-replay-panel-height);
    min-height: var(--tt-replay-panel-height);
    max-height: var(--tt-replay-panel-height);
    overflow: hidden;
    padding: 4px;
  }

  .tabletop-layout .replay-now-playing {
    grid-column: 1;
    grid-row: 1;
    gap: 0;
  }
  .tabletop-layout .replay-now-playing span,
  .tabletop-layout .replay-now-playing strong { font-size: 0.5rem; }
  .tabletop-layout .replay-transport {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabletop-layout .replay-timeline {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .tabletop-layout .replay-view-options {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tabletop-layout .replay-transport button,
  .tabletop-layout .replay-view-options button,
  .tabletop-layout .replay-view-options select {
    flex: 0 0 auto;
    width: auto;
    height: 24px;
    min-width: 28px;
    min-height: 24px;
    padding: 1px 4px;
    font-size: 0.5rem;
  }

  .tabletop-layout:has(.replay-playback-controls) :is(
    .floating-panels .graveyard-panel,
    .floating-panels .banished-panel,
    .floating-panels .intel-panel,
    .inspector.inspector-panel,
    .log-drawer
  ) {
    bottom: calc(var(--tt-overlay-bottom) + var(--tt-replay-panel-height) + 4px);
  }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout.inspector-open .replay-playback-controls,
  .tabletop-layout:has(.graveyard-panel, .banished-panel, .intel-panel, .log-drawer) .replay-playback-controls {
    display: none;
  }

  .tabletop-layout.inspector-open .inspector.inspector-panel,
  .tabletop-layout:has(.graveyard-panel, .banished-panel, .intel-panel, .log-drawer) :is(
    .floating-panels .graveyard-panel,
    .floating-panels .banished-panel,
    .floating-panels .intel-panel,
    .log-drawer
  ) {
    bottom: var(--tt-overlay-bottom);
  }

  .tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel, .intel-panel),
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    gap: 3px;
    padding: 4px;
  }

  .tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel, .intel-panel) > .section-head,
  .tabletop-layout .log-drawer > .section-head {
    min-height: 22px;
    gap: 4px;
  }

  .tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel, .intel-panel) > .section-head h2,
  .tabletop-layout .log-drawer > .section-head h2 {
    font-size: 0.42rem;
  }

  .tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel, .intel-panel) > .section-head span,
  .tabletop-layout .log-drawer > .section-head span {
    font-size: 0.34rem;
  }

  .tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel, .intel-panel) > .section-head button,
  .tabletop-layout .log-drawer > .section-head button,
  .tabletop-layout .inspector.inspector-panel .inspector-toolbar button {
    height: 22px;
    min-height: 22px;
    padding: 1px 5px;
    font-size: 0.34rem;
  }

  .tabletop-layout .log-current {
    gap: 1px;
    max-height: 24px;
    overflow: hidden;
    border-left-width: 2px;
    padding: 3px 5px;
  }

  .tabletop-layout .log-current strong { font-size: 0.39rem; }
  .tabletop-layout .log-current span { font-size: 0.32rem; line-height: 1.1; }
  .tabletop-layout .log-list { min-height: 0; overflow-y: auto; }
  .tabletop-layout .log-drawer { grid-template-rows: 22px 24px minmax(0, 1fr); }
  .tabletop-layout .log-drawer > .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    max-height: 22px;
    overflow: hidden;
    padding: 0;
  }
  .tabletop-layout .log-drawer > .section-head > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    max-height: 22px;
    overflow: hidden;
  }

  .tabletop-layout .inspector.inspector-panel {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 22px minmax(0, 1fr);
    overflow: hidden;
  }

  .tabletop-layout .inspector.inspector-panel .inspector-toolbar {
    grid-column: 1 / -1;
    min-height: 22px;
    border-bottom: 0;
    padding: 0;
  }

  .tabletop-layout .inspector.inspector-panel .inspector-toolbar strong { font-size: 0.4rem; }
  .tabletop-layout .inspector.inspector-panel .inspector-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-height: 100%;
  }
  .tabletop-layout .inspector.inspector-panel .inspector-text {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
  }
  .tabletop-layout .inspector.inspector-panel.inspector-empty .inspector-empty-state {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
  }
}

@media (max-width: 760px) {
  .tabletop-layout .owner-chip-full,
  .tabletop-layout .pile-label-full { display: none; }
  .tabletop-layout .owner-chip-short,
  .tabletop-layout .pile-label-short { display: inline; }
  .tabletop-layout .player-summary h2,
  .tabletop-layout .player-stats > *,
  .tabletop-layout .pile-label,
  .tabletop-layout .pile-count,
  .tabletop-layout .rune-count { font-size: 0.5rem; }
  .tabletop-layout .rune-card-caption,
  .tabletop-layout .rune-recycle-ready,
  .tabletop-layout .unit-token-body > span { font-size: 0.5rem; }
  .tabletop-layout .card-state-hud.unit-stats > b,
  .tabletop-layout .card-state-hud.unit-stats > em,
  .tabletop-layout .unit-state-badge,
  .tabletop-layout .owner-chip,
  .tabletop-layout .opponent-hand > .zone-caption,
  .tabletop-layout .persistent-hand .section-head h2,
  .tabletop-layout .persistent-hand .section-head span,
  .tabletop-layout .hand-focus-toggle,
  .tabletop-layout .action-context .bar-label,
  .tabletop-layout .action-context strong,
  .tabletop-layout .action-context span:last-child,
  .tabletop-layout .action-command-list button,
  .tabletop-layout .table-action-rail button { font-size: 0.5rem; }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout .owner-chip-full,
  .tabletop-layout .pile-label-full { display: none; }
  .tabletop-layout .owner-chip-short,
  .tabletop-layout .pile-label-short { display: inline; }
  .tabletop-layout .player-summary h2,
  .tabletop-layout .player-stats > *,
  .tabletop-layout .pile-label,
  .tabletop-layout .pile-count,
  .tabletop-layout .rune-count { font-size: 0.5rem; }
  .tabletop-layout .rune-card-caption,
  .tabletop-layout .rune-recycle-ready,
  .tabletop-layout .unit-token-body > span { font-size: 0.5rem; }
  .tabletop-layout .card-state-hud.unit-stats > b,
  .tabletop-layout .card-state-hud.unit-stats > em,
  .tabletop-layout .unit-state-badge,
  .tabletop-layout .owner-chip,
  .tabletop-layout .opponent-hand > .zone-caption,
  .tabletop-layout .persistent-hand .section-head h2,
  .tabletop-layout .persistent-hand .section-head span,
  .tabletop-layout .hand-focus-toggle,
  .tabletop-layout .action-context .bar-label,
  .tabletop-layout .action-context strong,
  .tabletop-layout .action-context span:last-child,
  .tabletop-layout .action-command-list button,
  .tabletop-layout .table-action-rail button,
  .tabletop-topbar .status-kicker,
  .tabletop-topbar .status-detail,
  .tabletop-topbar .score-name,
  .tabletop-topbar .score-cell,
  .tabletop-topbar .turnbox > span,
  .tabletop-topbar .turnbox button { font-size: 0.5rem; }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout:has(.replay-playback-controls) {
    --tt-action-rail: 170px;
  }

  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.graveyard-panel, .banished-panel, .intel-panel, .log-drawer) {
    --tt-action-rail: 54px;
  }

  .tabletop-layout:has(.replay-playback-controls) .table-action-rail {
    right: 3px;
    width: 48px;
    min-width: 48px;
  }

  .tabletop-layout .replay-playback-controls {
    top: calc(52px + env(safe-area-inset-top) + 3px);
    right: 57px;
    bottom: calc(var(--tt-hand-height) + 32px + 4px);
    left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 34px auto 22px 28px;
    align-content: start;
    gap: 4px;
    width: 110px;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
  }

  .tabletop-layout .replay-now-playing {
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    gap: 1px;
  }
  .tabletop-layout .replay-now-playing span,
  .tabletop-layout .replay-now-playing strong { font-size: 0.5rem; }

  .tabletop-layout .replay-transport {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
  }

  .tabletop-layout .replay-timeline {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    width: 100%;
    min-width: 0;
  }

  .tabletop-layout .replay-view-options {
    grid-column: 1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
  }

  .tabletop-layout .replay-transport button,
  .tabletop-layout .replay-view-options button,
  .tabletop-layout .replay-view-options select {
    width: 100%;
    height: 28px;
    min-width: 0;
    min-height: 28px;
    padding: 1px 2px;
    font-size: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabletop-layout *,
  .tabletop-layout *::before,
  .tabletop-layout *::after {
    scroll-behavior: auto !important;
  }

  .tabletop-layout .hand-fan-card,
  .tabletop-layout .card-exhaust-layer,
  .tabletop-layout .rune-orientation-layer,
  .tabletop-layout .attachment-orientation-layer {
    transition-duration: 1ms !important;
  }
}

.tabletop-card-flight-layer {
  position: fixed;
  z-index: 140;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tabletop-card-flight {
  position: absolute;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(190, 231, 248, 0.72);
  border-radius: 7px;
  background: linear-gradient(145deg, #17425a, #061722 62%, #02070c);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52), 0 0 18px rgba(90, 190, 229, 0.24);
  transform-origin: center;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.tabletop-card-flight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-card-flight .flight-card-back,
.tabletop-card-flight .flight-card-name {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 5px;
  color: #c9ebf8;
  background:
    radial-gradient(circle at center, rgba(64, 167, 205, 0.3), transparent 42%),
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(105, 205, 238, 0.08) 8px 10px),
    linear-gradient(145deg, #16435c, #061621 68%);
  font-size: clamp(0.55rem, 1vw, 0.86rem);
  font-weight: 900;
  text-align: center;
}

.tabletop-card-flight .flight-card-back {
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  text-shadow: 0 0 12px rgba(118, 220, 255, 0.62);
}

.tabletop-card-flight.transfer-burn,
.tabletop-card-flight.transfer-defeat,
.tabletop-card-flight.transfer-discard,
.tabletop-card-flight.transfer-resolve {
  border-color: rgba(255, 139, 66, 0.86);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.58), 0 0 24px rgba(255, 92, 30, 0.54);
  filter: saturate(1.28) sepia(0.18);
}

.tabletop-card-flight.transfer-burn::after,
.tabletop-card-flight.transfer-defeat::after {
  position: absolute;
  inset: auto -8% -10% -8%;
  height: 42%;
  content: "";
  background: radial-gradient(ellipse at bottom, rgba(255, 211, 92, 0.94), rgba(255, 82, 18, 0.68) 38%, transparent 72%);
  mix-blend-mode: screen;
}

.tabletop-card-flight.transfer-flow,
.tabletop-card-flight.transfer-banish {
  border-color: rgba(204, 137, 255, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.58), 0 0 28px rgba(170, 62, 255, 0.62);
  filter: saturate(1.2) hue-rotate(10deg);
}

.tabletop-card-flight.transfer-play,
.tabletop-card-flight.transfer-move,
.tabletop-card-flight.transfer-recover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 26px rgba(87, 207, 250, 0.46);
}

.tabletop-card-flight.transfer-recycle,
.tabletop-card-flight.transfer-rune {
  border-color: rgba(255, 223, 110, 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52), 0 0 24px rgba(255, 207, 79, 0.42);
}

.tabletop-layout .tabletop-transfer-arrival {
  animation: tabletop-transfer-arrival 320ms cubic-bezier(.22, .9, .2, 1);
}

.tabletop-layout .tabletop-transfer-pending {
  opacity: 0 !important;
  pointer-events: none !important;
}

.tabletop-layout .tabletop-transfer-arrival.arrival-flow,
.tabletop-layout .tabletop-transfer-arrival.arrival-banish {
  --arrival-ring: rgba(190, 103, 255, 0.86);
}

.tabletop-layout .tabletop-transfer-arrival.arrival-burn,
.tabletop-layout .tabletop-transfer-arrival.arrival-defeat {
  --arrival-ring: rgba(255, 123, 48, 0.88);
}

@keyframes tabletop-transfer-arrival {
  0% { box-shadow: 0 0 0 0 var(--arrival-ring, rgba(93, 209, 247, 0.78)); filter: brightness(1.35); }
  55% { box-shadow: 0 0 0 5px transparent; filter: brightness(1.12); }
  100% { box-shadow: inherit; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tabletop-layout .tabletop-transfer-arrival {
    animation-duration: 1ms !important;
  }
}

/*
 * Authoritative tabletop geometry.
 *
 * The legacy game skin remains loaded for setup and non-tabletop screens. This
 * final block explicitly resets the legacy grid coordinates that otherwise
 * collapse identity cards and place the battlefield title over its artwork.
 */
.tabletop-layout {
  --tt-action-rail: 96px;
  --tt-command-height: 62px;
  --tt-hand-height: 180px;
  --tt-opponent-row: 160px;
  --tt-player-row: 184px;
  --tt-sheet-reserve: 0px;
  --tt-hand-card-width: 102px;
  --tt-shelf-card-width: 72px;
  --tt-rune-card-width: 62px;
  --tt-font-meta: 11px;
  --tt-font-small: 12px;
  --tt-font-body: 13px;
  --tt-font-title: 14px;
}

.tabletop-layout.inspector-open,
.tabletop-layout:has(.floating-panels > .graveyard-panel),
.tabletop-layout:has(.floating-panels > .banished-panel),
.tabletop-layout:has(.floating-panels > .intel-panel),
.tabletop-layout:has(.log-drawer) {
  --tt-sheet-reserve: 400px;
}

.tabletop-topbar .titlebox h1 { font-size: clamp(16px, 1.1vw, 19px); }
.tabletop-topbar .status-kicker,
.tabletop-topbar .status-detail,
.tabletop-topbar .score-name,
.tabletop-topbar .turnbox > span,
.tabletop-topbar .turnbox button { font-size: 11px; }
.tabletop-topbar .score-cell { font-size: 11px; }

.tabletop-layout .board-panel {
  inset: 0 calc(var(--tt-action-rail) + var(--tt-sheet-reserve)) calc(var(--tt-hand-height) + var(--tt-command-height) + 8px) 0;
  grid-template-rows: var(--tt-opponent-row) minmax(0, 1fr) var(--tt-player-row);
  gap: 6px;
  padding: 6px 8px;
  transition: right 180ms ease;
}

.tabletop-layout .table-command-layer {
  right: calc(var(--tt-action-rail) + var(--tt-sheet-reserve));
  height: calc(var(--tt-hand-height) + var(--tt-command-height));
  transition: right 180ms ease;
}

.tabletop-layout .table-seat,
.tabletop-layout .table-seat.bottom {
  grid-template-columns:
    clamp(250px, 16vw, 300px)
    clamp(210px, 13vw, 250px)
    minmax(260px, 1fr)
    clamp(290px, 20vw, 340px);
  align-items: stretch;
  gap: 8px;
  padding: 18px 5px 6px;
}

.tabletop-layout .table-seat {
  grid-template-areas: "identity piles base resources";
}

.tabletop-layout .table-seat.bottom {
  grid-template-areas: "resources base piles identity";
}

/* Identity cards keep a real portrait footprint beside, rather than above,
   the summary. Explicit stretching cancels legacy .player-identity alignment. */
.tabletop-layout .tabletop-identity-dock {
  display: grid;
  grid-template-columns: calc(var(--tt-shelf-card-width) * 2 + 8px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
}

.tabletop-layout .physical-identity-cards {
  align-self: stretch;
  align-items: stretch;
  gap: 8px;
  width: calc(var(--tt-shelf-card-width) * 2 + 8px);
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.tabletop-layout .identity-zone {
  grid-template-rows: 17px minmax(0, 1fr);
  align-content: end;
  align-items: end;
  width: var(--tt-shelf-card-width);
  height: 100%;
  min-height: 0;
}

.tabletop-layout .identity-zone > .zone-caption {
  align-self: center;
  width: 100%;
  font-size: var(--tt-font-meta);
  line-height: 1;
  text-align: center;
}

.tabletop-layout .identity-button,
.tabletop-layout .empty-card-slot,
.tabletop-layout .champion-away-reference {
  align-self: end;
  width: var(--tt-shelf-card-width);
  height: auto;
  min-width: var(--tt-shelf-card-width);
  min-height: 0;
  aspect-ratio: 0.714;
  border-radius: 7px;
}

.tabletop-layout .identity-button > .identity-orientation-layer {
  inset: 0;
  max-width: none;
  padding: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.tabletop-layout .identity-button > .identity-state-label {
  right: 4px;
  bottom: 4px;
  left: 4px;
  max-width: none;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: var(--tt-font-meta);
  line-height: 1.1;
}

.tabletop-layout .player-summary {
  align-self: center;
  align-content: center;
  gap: 5px;
  width: 100%;
  max-height: none;
  overflow: visible;
}

.tabletop-layout .player-summary h2 {
  font-size: var(--tt-font-title);
  line-height: 1.15;
}

.tabletop-layout .player-stats {
  gap: 4px;
  min-height: 24px;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabletop-layout .player-stats > * {
  min-height: 23px;
  padding: 3px 7px;
  font-size: var(--tt-font-meta);
  line-height: 1.1;
}

.tabletop-layout .player-summary .champion-control {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 28px;
  height: auto;
  padding: 3px 5px 3px 7px;
}

.tabletop-layout .player-summary .champion-control :is(span, small),
.tabletop-layout .player-summary .champion-control button {
  font-size: var(--tt-font-meta);
}

.tabletop-layout .player-summary .champion-control button {
  min-height: 24px;
  height: 24px;
}

/* Shelf piles share one physical card width and keep labels/counts outside the
   card face. */
.tabletop-layout .table-pile-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(calc(var(--tt-shelf-card-width) + 4px), 1fr));
  align-items: stretch;
  gap: 5px;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.tabletop-layout .table-card-pile {
  grid-template-rows: minmax(0, 1fr) 17px;
  align-items: end;
  justify-items: center;
  gap: 2px;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.tabletop-layout .pile-cards,
.tabletop-layout .table-card-pile.compact .pile-cards {
  align-self: end;
  width: var(--tt-shelf-card-width);
  min-width: var(--tt-shelf-card-width);
  max-width: none;
  aspect-ratio: 0.714;
  border-radius: 7px;
}

.tabletop-layout .pile-label {
  display: block;
  width: 100%;
  min-height: 15px;
  color: #d1e8f2;
  font-size: var(--tt-font-meta);
  line-height: 15px;
  text-align: center;
}

.tabletop-layout .pile-count {
  top: 12px;
  right: 1px;
  bottom: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  font-size: var(--tt-font-small);
  transform: translate(18%, -12%);
}

.tabletop-layout .table-card-pile .burnout-stat {
  top: -1px;
  right: 0;
  padding: 3px 5px;
  font-size: var(--tt-font-meta);
}

/* Runes use the same shelf baseline, but overlap slightly so every domain can
   remain present without stealing the Base. */
.tabletop-layout .resource-zone,
.tabletop-layout .base-zone {
  grid-template-rows: 18px minmax(0, 1fr);
  gap: 3px;
  height: 100%;
}

.tabletop-layout .resource-zone > .zone-caption,
.tabletop-layout .base-zone > .zone-caption {
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .rune-tabletop {
  grid-template-columns: calc(var(--tt-shelf-card-width) + 8px) minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  height: 100%;
}

.tabletop-layout .rune-play-area {
  grid-template-rows: 27px minmax(0, 1fr);
  height: 100%;
  overflow: visible;
}

.tabletop-layout .rune-summary {
  position: relative;
  z-index: 8;
  top: auto;
  right: auto;
  left: auto;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-height: 27px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px;
}

.tabletop-layout .rune-count {
  flex: 0 0 auto;
  min-width: max-content;
  height: 24px;
  min-height: 24px;
  padding: 3px 6px;
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .rune-summary-art {
  width: 15px;
  height: 20px;
  border-radius: 2px;
}

.tabletop-layout .resource-row.rune-card-stack {
  align-items: flex-end;
  min-height: 0;
  height: 100%;
  overflow: visible;
  padding: 2px 20px 1px 3px;
}

.tabletop-layout .rune-card-chip {
  flex: 0 0 var(--tt-rune-card-width);
  width: var(--tt-rune-card-width);
  min-width: var(--tt-rune-card-width);
  height: auto;
  aspect-ratio: 0.714;
  margin-right: calc(var(--tt-rune-card-width) * -0.38);
  border-radius: 6px;
}

.tabletop-layout .rune-card-caption,
.tabletop-layout .rune-card-chip strong,
.tabletop-layout .rune-recycle-ready {
  font-size: var(--tt-font-meta);
  line-height: 1.05;
}

.tabletop-layout .rune-card-caption { padding: 3px; }
.tabletop-layout .rune-card-chip strong { padding: 3px 4px; }
.tabletop-layout .rune-recycle-ready {
  white-space: normal;
  text-overflow: clip;
}

.tabletop-layout .rune-card-chip.spent .rune-orientation-layer {
  transform: rotate(90deg) scale(0.82);
}

/* The Base is a full shelf row, not a narrow status strip. */
.tabletop-layout .base-row {
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 5px 10px;
  border: 1px solid rgba(111, 182, 216, 0.3);
  border-radius: 9px;
  background: rgba(3, 18, 31, 0.54);
}

.tabletop-layout .base-row > .unit-token,
.tabletop-layout .base-row > .image-card {
  flex: 0 0 88px;
  width: 88px;
  min-width: 88px;
  height: auto;
  aspect-ratio: 0.714;
}

/* Two battlefields occupy the central table. Legacy location-column row and
   child coordinates are reset with matching-or-higher specificity. */
.tabletop-layout .location-band {
  min-height: 0;
  overflow: hidden;
  padding: 18px 6px 6px;
}

.tabletop-layout .battlefield-mat {
  grid-template-columns: none;
  grid-auto-columns: minmax(420px, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
  justify-items: stretch;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}

.tabletop-layout .battlefield.location-column {
  grid-template-rows: minmax(100px, 1fr) 92px minmax(100px, 1fr);
  gap: 4px;
  width: 100%;
  max-width: none;
  min-width: 420px;
  min-height: 0;
  overflow: visible;
  padding: 4px;
  border-radius: 10px;
}

.tabletop-layout .battlefield.location-column .field-lane {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: 16px 3px 3px;
  border: 0;
  border-radius: 7px;
  background: rgba(3, 18, 31, 0.2);
}

.tabletop-layout .field-lane .lane-label {
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .field-lane-track {
  flex: none;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 8px;
}

.tabletop-layout .battlefield.location-column .field-center {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: clamp(160px, 28%, 220px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 5px;
  transform: none;
}

.tabletop-layout .battlefield.location-column .field-image {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  opacity: 1;
  filter: none;
}

.tabletop-layout .battlefield.location-column .field-image .card-art {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}

.tabletop-layout .battlefield.location-column .battlefield-head {
  position: relative;
  inset: auto;
  z-index: auto;
  grid-row: 1;
  grid-column: 2;
  align-self: stretch;
  align-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(3, 17, 29, 0.58);
  box-shadow: none;
  transform: none;
}

.tabletop-layout .battlefield.location-column .battlefield-head h2 {
  color: #fff0a8;
  font-size: var(--tt-font-title);
  line-height: 1.15;
}

.tabletop-layout .battlefield.location-column .battlefield-head span {
  margin: 0;
  color: #b9dbe9;
  font-size: var(--tt-font-small);
  font-style: normal;
  line-height: 1.2;
}

.tabletop-layout .unit-placeholder { font-size: var(--tt-font-small); }

.tabletop-layout .unit-token,
.tabletop-layout .field-lane > .image-card,
.tabletop-layout .field-lane-track > .image-card {
  display: block;
  grid-template-columns: none;
  flex: 0 0 clamp(76px, 4.25vw, 86px);
  width: clamp(76px, 4.25vw, 86px);
  min-width: clamp(76px, 4.25vw, 86px);
  height: auto;
  min-height: 0;
  aspect-ratio: 0.714;
  gap: 0;
  overflow: visible;
  padding: 0;
  border-radius: 7px;
}

.tabletop-layout .unit-token-art img,
.tabletop-layout .card-face-layer > .card-art {
  filter: none;
  transform: none;
}

.tabletop-layout .unit-token-body {
  gap: 2px;
  padding: 18px 5px 5px;
}

.tabletop-layout .unit-token-body > strong,
.tabletop-layout .unit-token-body > span {
  font-size: var(--tt-font-meta);
  line-height: 1.1;
}

.tabletop-layout .card-state-hud.unit-stats {
  right: 3px;
  bottom: 3px;
  left: 3px;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3px;
  max-width: calc(100% - 6px);
  max-height: calc(100% - 6px);
  overflow: visible;
}

.tabletop-layout .card-state-hud.unit-stats > b,
.tabletop-layout .card-state-hud.unit-stats > em {
  min-width: 23px;
  min-height: 21px;
  padding: 3px 5px;
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .card-state-hud.unit-stats > b:first-child {
  font-size: var(--tt-font-small);
}

.tabletop-layout .unit-state-badges {
  gap: 3px;
  overflow: visible;
}

.tabletop-layout .unit-state-badge,
.tabletop-layout .owner-chip {
  padding: 3px 5px;
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .attachment-strip { gap: 4px; }
.tabletop-layout button.attached-gear {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}
.tabletop-layout .attached-gear-might,
.tabletop-layout .attached-gear-readiness { font-size: var(--tt-font-meta); }

/* Commands occupy a dedicated row above the hand. They never share the hand's
   stacking context, so hover lift cannot cover an action. */
.tabletop-layout .context-action-dock {
  z-index: 62;
  right: 10px;
  bottom: var(--tt-hand-height);
  left: 10px;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  min-height: calc(var(--tt-command-height) - 6px);
  max-height: calc(var(--tt-command-height) - 4px);
  padding: 6px 9px;
  border-radius: 10px;
}

.tabletop-layout .action-context > * {
  overflow: hidden;
  white-space: normal;
}

.tabletop-layout .action-context .bar-label {
  font-size: var(--tt-font-meta);
  line-height: 1;
}

.tabletop-layout .action-context strong {
  font-size: var(--tt-font-body);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .action-context span:last-child {
  display: -webkit-box;
  font-size: var(--tt-font-meta);
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tabletop-layout .action-command-list {
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabletop-layout .action-command-list button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: var(--tt-font-small);
}

.tabletop-layout .persistent-hand.hand-drawer {
  z-index: 40;
  right: clamp(110px, 10vw, 180px);
  bottom: 0;
  left: clamp(110px, 10vw, 180px);
  height: var(--tt-hand-height);
}

.tabletop-layout .persistent-hand.hand-drawer:has(.hand-fan-card:hover),
.tabletop-layout .persistent-hand.hand-drawer:has(.hand-fan-card:focus-visible) {
  z-index: 40;
}

.tabletop-layout .persistent-hand .hand-panel {
  grid-template-rows: 28px minmax(0, 1fr);
  overflow: visible;
  padding: 0 8px env(safe-area-inset-bottom);
}

.tabletop-layout .persistent-hand .section-head h2,
.tabletop-layout .persistent-hand .section-head span,
.tabletop-layout .hand-focus-toggle {
  font-size: var(--tt-font-meta);
}

.tabletop-layout .hand-fan {
  align-items: flex-end;
  overflow: visible;
  padding: 0 clamp(28px, 4vw, 64px);
}

.tabletop-layout .hand-fan-card {
  flex: 0 0 var(--tt-hand-card-width);
  width: var(--tt-hand-card-width);
  min-width: var(--tt-hand-card-width);
  height: auto;
  margin-right: clamp(-50px, -2.6vw, -28px);
  aspect-ratio: 0.714;
  transform: translateY(calc(var(--fan-rise) * 0.35)) rotate(calc(var(--fan-angle) * 0.72));
  transform-origin: 50% 108%;
}

.tabletop-layout .hand-fan-card.selected-card,
.tabletop-layout .hand-fan-card:focus-visible {
  z-index: 65;
  transform: translateY(-27px) rotate(0deg) scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
  .tabletop-layout .hand-fan-card:hover {
    z-index: 66;
    transform: translateY(-30px) rotate(0deg) scale(1.05);
  }
}

.tabletop-layout .persistent-hand.focused .hand-fan-card {
  margin-right: clamp(-36px, -1.8vw, -20px);
  transform: translateY(calc(var(--fan-rise) * 0.2 - 9px)) rotate(calc(var(--fan-angle) * 0.52));
}

.tabletop-layout .persistent-hand.focused .hand-fan-card.selected-card,
.tabletop-layout .persistent-hand.focused .hand-fan-card:focus-visible {
  transform: translateY(-32px) rotate(0deg) scale(1.05);
}

.tabletop-layout .table-action-rail {
  right: 8px;
  bottom: 8px;
  width: calc(var(--tt-action-rail) - 16px);
  min-width: 72px;
  gap: 7px;
}

.tabletop-layout .table-action-rail button,
.tabletop-layout .table-action-rail button[data-action="toggle-hand"] {
  min-height: 44px;
  padding: 6px 4px;
  font-size: var(--tt-font-small);
}

/* Utility sheets consume their reserved column and stop above commands/hand. */
.tabletop-layout .floating-panels .graveyard-panel,
.tabletop-layout .floating-panels .banished-panel,
.tabletop-layout .floating-panels .intel-panel,
.tabletop-layout .inspector.inspector-panel,
.tabletop-layout .log-drawer {
  top: 66px;
  right: calc(var(--tt-action-rail) + 8px);
  bottom: calc(var(--tt-hand-height) + var(--tt-command-height) + 12px);
  width: calc(400px - 16px);
  max-width: calc(100vw - var(--tt-action-rail) - 24px);
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: var(--tt-font-small);
}

.tabletop-layout .floating-panels .graveyard-cards {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 9px;
  overflow: auto;
}

.tabletop-layout .floating-panels .graveyard-cards .image-card {
  width: 100%;
  min-width: 0;
}

/* Chain keeps the existing information model, but no longer squeezes its
   content into the legacy 190/126/270px three-column collision. */
.tabletop-layout .chain-pod {
  z-index: 55;
  top: calc(var(--tt-opponent-row) + 8px);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  width: min(1060px, calc(100% - 24px));
  min-height: 0;
  max-height: min(42dvh, 380px);
  overflow: hidden;
  padding: 8px;
}

.tabletop-layout .chain-zone-head {
  width: 100%;
  min-height: 34px;
}

.tabletop-layout .chain-zone-head strong,
.tabletop-layout .chain-zone-head span,
.tabletop-layout .chain-zone-head em,
.tabletop-layout .chain-zone-toggle { font-size: var(--tt-font-small); }

.tabletop-layout .chain-zone-content {
  display: grid;
  grid-template-columns: minmax(360px, 1.7fr) minmax(260px, 0.85fr);
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: min(34dvh, 310px);
  overflow: auto;
}

.tabletop-layout .chain-stack {
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 142px;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabletop-layout .chain-zone-item {
  flex: 0 0 min(300px, 72vw);
  width: min(300px, 72vw);
  min-width: 260px;
  min-height: 142px;
  height: auto;
  gap: 5px;
  overflow: visible;
  padding: 9px;
}

.tabletop-layout .chain-zone-item b,
.tabletop-layout .chain-zone-item strong,
.tabletop-layout .chain-zone-item span,
.tabletop-layout .chain-zone-item small,
.tabletop-layout .chain-zone-item em,
.tabletop-layout .chain-zone-effect,
.tabletop-layout .response-prompt :is(strong, span) {
  font-size: var(--tt-font-small);
  line-height: 1.3;
}

.tabletop-layout .chain-zone-effect {
  display: block;
  min-height: 34px;
  max-height: 92px;
  overflow: auto;
  white-space: normal;
  -webkit-line-clamp: unset;
}

.tabletop-layout .chain-context-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

@media (max-height: 820px) and (min-width: 761px) {
  .tabletop-layout {
    --tt-command-height: 54px;
    --tt-hand-height: 140px;
    --tt-opponent-row: 104px;
    --tt-player-row: 126px;
    --tt-hand-card-width: 78px;
    --tt-shelf-card-width: 50px;
    --tt-rune-card-width: 46px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns:
      clamp(190px, 15vw, 230px)
      clamp(150px, 12vw, 190px)
      minmax(190px, 1fr)
      clamp(230px, 19vw, 290px);
    gap: 5px;
    padding: 14px 4px 4px;
  }

  .tabletop-layout .physical-identity-cards,
  .tabletop-layout .tabletop-identity-dock {
    gap: 6px;
  }

  .tabletop-layout .tabletop-identity-dock {
    grid-template-columns: calc(var(--tt-shelf-card-width) * 2 + 6px) minmax(0, 1fr);
  }

  .tabletop-layout .physical-identity-cards {
    width: calc(var(--tt-shelf-card-width) * 2 + 6px);
  }

  .tabletop-layout .identity-zone { grid-template-rows: 13px minmax(0, 1fr); }
  .tabletop-layout .table-card-pile { grid-template-rows: minmax(0, 1fr) 13px; }
  .tabletop-layout .pile-label { min-height: 12px; line-height: 12px; }
  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone { grid-template-rows: 14px minmax(0, 1fr); }
  .tabletop-layout .rune-play-area { grid-template-rows: 24px minmax(0, 1fr); }
  .tabletop-layout .rune-summary { min-height: 24px; }
  .tabletop-layout .rune-count { height: 22px; min-height: 22px; }
  .tabletop-layout .base-row > .unit-token,
  .tabletop-layout .base-row > .image-card { flex-basis: 64px; width: 64px; min-width: 64px; }
  .tabletop-layout .battlefield.location-column { grid-template-rows: minmax(78px, 1fr) 72px minmax(78px, 1fr); }
  .tabletop-layout .battlefield.location-column .field-center { grid-template-columns: clamp(120px, 27%, 170px) minmax(0, 1fr); }
  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane > .image-card,
  .tabletop-layout .field-lane-track > .image-card {
    flex-basis: 64px;
    width: 64px;
    min-width: 64px;
  }
  .tabletop-layout .context-action-dock { min-height: calc(var(--tt-command-height) - 4px); }
}

@media (max-width: 1199px) {
  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.log-drawer) {
    --tt-sheet-reserve: 0px;
  }

  .tabletop-layout {
    --tt-action-rail: 78px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns: 190px minmax(180px, 1fr) 230px;
    grid-template-areas: "identity base resources";
    gap: 5px;
  }

  .tabletop-layout .table-seat.bottom { grid-template-areas: "resources base identity"; }

  .tabletop-layout .table-pile-dock {
    position: absolute;
    z-index: 9;
    top: 17px;
    right: 235px;
    width: 176px;
    height: calc(100% - 22px);
    gap: 3px;
  }

  .tabletop-layout .table-seat.top .table-pile-dock {
    right: auto;
    left: 195px;
  }

  .tabletop-layout .table-seat.top .base-row { padding-left: 184px; }
  .tabletop-layout .table-seat.bottom .base-row { padding-right: 184px; }

  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    right: calc(var(--tt-action-rail) + 6px);
    width: min(380px, 44vw);
  }

  .tabletop-layout .chain-zone-content {
    grid-template-columns: minmax(300px, 1.5fr) minmax(230px, 0.9fr);
  }
}

@media (max-width: 760px) {
  .tabletop-layout {
    --tt-action-rail: 56px;
    --tt-command-height: 48px;
    --tt-hand-height: calc(136px + env(safe-area-inset-bottom));
    --tt-opponent-row: 92px;
    --tt-player-row: 104px;
    --tt-hand-card-width: 72px;
    --tt-shelf-card-width: 36px;
    --tt-rune-card-width: 34px;
    --tt-font-meta: 11px;
    --tt-font-small: 11px;
    --tt-font-body: 12px;
    --tt-font-title: 13px;
  }

  .tabletop-layout .board-panel {
    inset: 0 var(--tt-action-rail) calc(var(--tt-hand-height) + var(--tt-command-height) + 4px) 0;
    gap: 3px;
    padding: 3px;
  }

  .tabletop-layout .table-command-layer { right: var(--tt-action-rail); }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns: 86px minmax(0, 1fr) 106px;
    gap: 2px;
    padding: 13px 2px 2px;
  }

  .tabletop-layout .tabletop-identity-dock {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 24px;
    gap: 2px;
  }

  .tabletop-layout .physical-identity-cards {
    width: 100%;
    gap: 3px;
  }

  .tabletop-layout .identity-zone {
    width: calc(50% - 2px);
    grid-template-rows: 12px minmax(0, 1fr);
  }

  .tabletop-layout .identity-button,
  .tabletop-layout .empty-card-slot,
  .tabletop-layout .champion-away-reference {
    width: var(--tt-shelf-card-width);
    min-width: var(--tt-shelf-card-width);
    justify-self: center;
  }

  .tabletop-layout .player-summary {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tabletop-layout .player-summary h2 { flex: 0 0 auto; max-width: 70px; }
  .tabletop-layout .player-stats { flex: 0 0 auto; min-height: 22px; }
  .tabletop-layout .player-stats > * { min-height: 20px; padding: 2px 4px; }
  .tabletop-layout .player-summary .champion-control { flex: 0 0 auto; min-height: 21px; height: 21px; }

  .tabletop-layout .table-pile-dock {
    top: 14px;
    right: 109px;
    width: 94px;
    height: 58px;
  }
  .tabletop-layout .table-seat.top .table-pile-dock { left: 89px; right: auto; }
  .tabletop-layout .table-seat.top .base-row { padding-left: 98px; }
  .tabletop-layout .table-seat.bottom .base-row { padding-right: 98px; }
  .tabletop-layout .table-card-pile { grid-template-rows: minmax(0, 1fr) 13px; }
  .tabletop-layout .pile-label { min-height: 12px; font-size: 10px; line-height: 12px; }
  .tabletop-layout .pile-count { top: 4px; min-width: 19px; height: 19px; font-size: 11px; }
  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone { grid-template-rows: 14px minmax(0, 1fr); }
  .tabletop-layout .rune-tabletop { grid-template-columns: 40px minmax(0, 1fr); gap: 2px; }
  .tabletop-layout .rune-play-area { grid-template-rows: 24px minmax(0, 1fr); }
  .tabletop-layout .rune-summary { min-height: 24px; }
  .tabletop-layout .rune-count { height: 22px; min-height: 22px; padding: 2px 4px; }
  .tabletop-layout .resource-row.rune-card-stack { padding: 1px 5px 1px 0; }
  .tabletop-layout .rune-card-chip { margin-right: -24px; }
  .tabletop-layout .base-row { gap: 4px; padding: 2px; }
  .tabletop-layout .base-row > .unit-token,
  .tabletop-layout .base-row > .image-card { flex-basis: 42px; width: 42px; min-width: 42px; }

  .tabletop-layout .location-band { padding: 17px 2px 2px; }
  .tabletop-layout .battlefield-mat { grid-auto-columns: minmax(250px, calc(100vw - var(--tt-action-rail) - 10px)); gap: 3px; }
  .tabletop-layout .battlefield.location-column {
    grid-template-rows: minmax(72px, 1fr) 58px minmax(72px, 1fr);
    min-width: 250px;
    padding: 2px;
  }
  .tabletop-layout .battlefield.location-column .field-center {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px;
    padding: 2px;
  }
  .tabletop-layout .battlefield.location-column .battlefield-head { padding: 4px; }
  .tabletop-layout .field-lane-track { justify-content: flex-start; gap: 5px; padding: 1px 4px; }
  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane > .image-card,
  .tabletop-layout .field-lane-track > .image-card {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
  }
  .tabletop-layout .card-state-hud.unit-stats > b,
  .tabletop-layout .card-state-hud.unit-stats > em { min-width: 20px; min-height: 18px; padding: 2px 3px; }

  .tabletop-layout .context-action-dock {
    right: 3px;
    bottom: var(--tt-hand-height);
    left: 3px;
    grid-template-columns: minmax(104px, 0.52fr) minmax(0, 1.48fr);
    min-height: calc(var(--tt-command-height) - 3px);
    max-height: calc(var(--tt-command-height) - 2px);
    gap: 4px;
    padding: 3px 5px;
  }
  .tabletop-layout .action-context span:last-child { -webkit-line-clamp: 1; }
  .tabletop-layout .action-command-list button { min-height: 32px; padding: 4px 7px; }
  .tabletop-layout .persistent-hand.hand-drawer { right: 0; left: 0; }
  .tabletop-layout .persistent-hand .hand-panel { grid-template-rows: 24px minmax(0, 1fr); }
  .tabletop-layout .hand-fan { padding: 0 26px; }
  .tabletop-layout .hand-fan-card { margin-right: -40px; transform: translateY(calc(var(--fan-rise) * 0.2)) rotate(calc(var(--fan-angle) * 0.58)); }
  .tabletop-layout .hand-fan-card.selected-card,
  .tabletop-layout .hand-fan-card:focus-visible { transform: translateY(-22px) rotate(0deg) scale(1.03); }
  .tabletop-layout .table-action-rail { right: 4px; bottom: 5px; width: 48px; min-width: 48px; gap: 4px; }
  .tabletop-layout .table-action-rail button,
  .tabletop-layout .table-action-rail button[data-action="toggle-hand"] { min-height: 38px; padding: 3px; font-size: 11px; }

  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    top: calc(64px + env(safe-area-inset-top));
    right: calc(var(--tt-action-rail) + 3px);
    bottom: calc(var(--tt-hand-height) + var(--tt-command-height) + 5px);
    width: calc(100vw - var(--tt-action-rail) - 6px);
    max-width: none;
  }

  .tabletop-layout .chain-pod {
    top: calc(var(--tt-opponent-row) + 4px);
    width: calc(100% - 8px);
    max-height: 43dvh;
    padding: 5px;
  }
  .tabletop-layout .chain-zone-content {
    grid-template-columns: minmax(0, 1fr);
    max-height: 34dvh;
  }
  .tabletop-layout .chain-zone-item {
    flex-basis: min(260px, calc(100vw - var(--tt-action-rail) - 28px));
    min-width: 220px;
    min-height: 126px;
  }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .tabletop-layout {
    --tt-command-height: 38px;
    --tt-hand-height: calc(92px + env(safe-area-inset-bottom));
    --tt-opponent-row: 52px;
    --tt-player-row: 58px;
    --tt-hand-card-width: 54px;
    --tt-shelf-card-width: 24px;
    --tt-rune-card-width: 22px;
  }

  .tabletop-layout .board-panel {
    inset: 0 var(--tt-action-rail) calc(var(--tt-hand-height) + var(--tt-command-height) + 2px) 0;
  }
  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom { padding-top: 8px; }
  .tabletop-layout .identity-zone { grid-template-rows: 8px minmax(0, 1fr); }
  .tabletop-layout .tabletop-identity-dock { grid-template-rows: minmax(0, 1fr) 15px; }
  .tabletop-layout .player-summary {
    display: flex;
    min-height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .tabletop-layout .player-summary h2 { max-width: 64px; font-size: 11px; }
  .tabletop-layout .player-stats,
  .tabletop-layout .player-stats > *,
  .tabletop-layout .player-summary .champion-control {
    min-height: 14px;
    height: 14px;
    font-size: 11px;
  }
  .tabletop-layout .table-pile-dock { top: 5px; height: 46px; }
  .tabletop-layout .pile-label { display: block; font-size: 11px; }
  .tabletop-layout .table-card-pile { grid-template-rows: minmax(0, 1fr) 11px; }
  .tabletop-layout .resource-zone,
  .tabletop-layout .base-zone { grid-template-rows: 8px minmax(0, 1fr); }
  .tabletop-layout .rune-play-area { grid-template-rows: 17px minmax(0, 1fr); }
  .tabletop-layout .rune-summary { min-height: 17px; }
  .tabletop-layout .rune-count { height: 17px; min-height: 17px; padding: 1px 3px; }
  .tabletop-layout .battlefield.location-column {
    grid-template-rows: minmax(45px, 1fr) 38px minmax(45px, 1fr);
  }
  .tabletop-layout .battlefield.location-column .field-center { grid-template-columns: 64px minmax(0, 1fr); }
  .tabletop-layout .unit-token,
  .tabletop-layout .field-lane > .image-card,
  .tabletop-layout .field-lane-track > .image-card {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
  }
  .tabletop-layout .context-action-dock {
    bottom: var(--tt-hand-height);
    min-height: var(--tt-command-height);
    max-height: var(--tt-command-height);
  }
  .tabletop-layout .action-context span:last-child {
    display: -webkit-box;
    font-size: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .tabletop-layout .action-command-list button { min-height: 28px; padding: 2px 5px; }
  .tabletop-layout .floating-panels .graveyard-panel,
  .tabletop-layout .floating-panels .banished-panel,
  .tabletop-layout .floating-panels .intel-panel,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer {
    bottom: calc(var(--tt-hand-height) + var(--tt-command-height) + 3px);
  }
}

/* Blocking decisions are utility work, not a replacement for the board. On a
   desktop they use the same reserved right column as card information and the
   pile sheets, leaving battlefield targets and state HUDs visible. */
@media (min-width: 1200px) {
  .tabletop-layout:has(.floating-panels > .payment-panel),
  .tabletop-layout:has(.floating-panels > .choice-panel) {
    --tt-sheet-reserve: 420px;
  }

  .tabletop-layout .floating-panels.has-blocking-decision {
    inset: 66px calc(var(--tt-action-rail) + 8px)
      calc(var(--tt-hand-height) + var(--tt-command-height) + 12px) auto;
    display: block;
    width: 404px;
    height: auto;
    padding: 0;
    pointer-events: none;
  }

  .tabletop-layout .floating-panels.has-modal::before,
  .tabletop-layout .floating-panels .payment-panel::before,
  .tabletop-layout .floating-panels .choice-panel::before {
    content: none;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
  }

  .tabletop-layout .floating-panels .payment-panel,
  .tabletop-layout .floating-panels .choice-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none;
    overflow: hidden;
    padding: 12px;
    border-radius: 12px;
    background: rgba(3, 18, 31, 0.97);
    box-shadow: -16px 0 42px rgba(0, 0, 0, 0.46);
  }

  .tabletop-layout .floating-panels :is(.payment-panel, .choice-panel) > .section-head {
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
  }

  .tabletop-layout .floating-panels :is(.payment-panel, .choice-panel) > .section-head h2 {
    font-size: var(--tt-font-title);
    line-height: 1.2;
  }

  .tabletop-layout .floating-panels :is(.payment-panel, .choice-panel) > .section-head span,
  .tabletop-layout .choice-instruction,
  .tabletop-layout .choice-search :is(span, small, input) {
    font-size: var(--tt-font-small);
    line-height: 1.35;
  }

  .tabletop-layout .payment-body {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    overflow: hidden;
  }

  .tabletop-layout .payment-card-preview {
    align-content: start;
    gap: 6px;
    min-width: 0;
    overflow-y: auto;
  }

  .tabletop-layout .payment-card-preview .card-art {
    width: 82px;
    max-width: 100%;
    aspect-ratio: 0.714;
    object-fit: contain;
  }

  .tabletop-layout .payment-card-preview :is(strong, span),
  .tabletop-layout .payment-resource-heading :is(strong, span),
  .tabletop-layout .payment-resource-group :is(button, label, small) {
    font-size: var(--tt-font-meta);
    line-height: 1.3;
  }

  .tabletop-layout .payment-cost-area {
    gap: 8px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
  }

  .tabletop-layout .payment-resource-group { padding: 8px; }
  .tabletop-layout .payment-resource-heading { gap: 6px; margin-bottom: 6px; }
  .tabletop-layout .pay-runes,
  .tabletop-layout .pool-energy-list,
  .tabletop-layout .payment-add-actions { gap: 7px; }
  .tabletop-layout .pay-rune { width: 102px; min-width: 102px; padding: 7px; }

  .tabletop-layout .choice-panel {
    align-content: start;
    overflow-y: auto;
  }

  .tabletop-layout .choice-search { margin: 0 0 9px; }
  .tabletop-layout .choice-search input { min-height: 36px; padding: 7px 9px; }
  .tabletop-layout .choice-grid,
  .tabletop-layout .choice-panel:not(.trigger-order-panel) .choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    justify-content: stretch;
    gap: 8px;
    max-height: none;
    overflow: visible;
    padding: 0 2px 4px 0;
  }

  .tabletop-layout .choice-option,
  .tabletop-layout .trigger-order-option {
    width: 100%;
    min-width: 0;
    min-height: 0;
    font-size: var(--tt-font-small);
  }

  .tabletop-layout .choice-option.text-choice-option { grid-column: 1 / -1; }
}

/* The chain's moving card has a stable portrait anchor. Effect copy and pass
   state deliberately remain outside the artwork and are never line-clamped. */
.tabletop-layout .chain-card-motion-anchor[data-motion-anchor] {
  flex: 0 0 54px;
  align-self: start;
  width: 54px;
  min-width: 54px;
  height: auto;
  aspect-ratio: 0.714;
  overflow: hidden;
  border: 1px solid rgba(114, 200, 235, 0.5);
  border-radius: 6px;
  background: rgba(4, 15, 26, 0.92);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

.tabletop-layout .chain-card-motion-anchor[data-motion-anchor] > :is(img, .card-art) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout :is(.chain-zone-copy, .chain-active-effect-text) {
  display: block;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  color: #e7f4fa;
  font-size: var(--tt-font-small);
  line-height: 1.42;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.tabletop-layout .chain-pass-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(103, 205, 244, 0.58);
  border-radius: 999px;
  background: rgba(8, 47, 66, 0.94);
  color: #eefaff;
  font-size: var(--tt-font-small);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .tabletop-layout .pile-label { font-size: 11px; }

  /* Phone/tablet interaction intentionally becomes a bottom sheet; the board
     remains visible above it while the sheet itself can scroll. */
  .tabletop-layout .floating-panels .payment-panel,
  .tabletop-layout .floating-panels .choice-panel {
    position: absolute;
    inset: auto 4px 4px;
    width: auto;
    height: auto;
    max-height: min(62dvh, 560px);
    margin: 0;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tabletop-layout .floating-panels.has-modal::before {
    background: rgba(0, 6, 13, 0.14);
    backdrop-filter: none;
  }

  .tabletop-layout .chain-card-motion-anchor[data-motion-anchor] {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
  }
}

/* Cascade seal -----------------------------------------------------------
   Keep these physical-table contracts after every legacy/responsive block. */
.tabletop-layout .identity-button.exhausted > .identity-orientation-layer,
.tabletop-layout .rune-card-chip.spent .rune-orientation-layer,
.tabletop-layout .unit-token.exhausted .card-exhaust-layer,
.tabletop-layout .image-card.exhausted .card-exhaust-layer,
.tabletop-layout :is(
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) > .attachment-orientation-layer {
  transform: rotate(90deg);
}

.tabletop-layout .base-row,
.tabletop-layout .field-lane-track {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.tabletop-layout .field-lane-track { align-items: center; }

.tabletop-layout .field-lane-track > :is(.unit-token, .image-card) {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 86px;
  height: calc(100% - 6px);
  max-height: 120px;
  aspect-ratio: 0.714;
}

.tabletop-layout .field-lane-track > .unit-token.field-token {
  flex: 0 0 198px;
  width: 198px;
  min-width: 198px;
  max-width: 198px;
  height: calc(100% + 4px);
  max-height: 120px;
  aspect-ratio: auto;
  overflow: visible;
  padding-right: 132px;
  box-sizing: border-box;
}

.tabletop-layout .unit-token.field-token > .card-exhaust-layer {
  inset: 0 auto 0 0;
  width: auto;
  height: 100%;
  aspect-ratio: 0.714;
}

.tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats {
  inset: 2px 2px 2px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  align-items: stretch;
  gap: 2px;
  width: 126px;
  max-width: 126px;
  max-height: none;
  overflow: visible;
  padding: 2px;
  border: 1px solid rgba(108, 191, 225, 0.34);
  border-radius: 6px;
  background: rgba(2, 13, 23, 0.88);
  box-sizing: border-box;
}

.tabletop-layout .card-state-hud.unit-stats > :is(b, em),
.tabletop-layout .unit-token.field-token .unit-state-badge {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 16px;
  height: auto;
  padding: 1px 2px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.tabletop-layout .unit-token.field-token .unit-state-badges {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.tabletop-layout .unit-token.field-token > .owner-chip { max-width: calc(100% - 136px); }
.tabletop-layout .unit-token.field-token > .move-select-chip { right: auto; left: 59px; }
.tabletop-layout .unit-token.field-token > .attachment-strip { right: 128px; }

.tabletop-layout .board-band > .side-label,
.tabletop-layout .battlefield-caption,
.tabletop-layout .persistent-hand .section-head :is(h2, span, b),
.tabletop-layout .opponent-hand > .zone-caption,
.tabletop-layout .empty-hand-count,
.tabletop-layout .move-select-chip {
  font-size: 11px;
  line-height: 1.1;
}

.tabletop-layout .move-select-chip {
  min-width: 24px;
  width: 24px;
  min-height: 24px;
  height: 24px;
}

.tabletop-layout .chain-zone-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.tabletop-layout .chain-active-effect-text {
  min-height: 112px;
  max-height: none;
  overflow: visible;
}

@media (min-width: 1200px) {
  .tabletop-layout:has(.chain-pod) { --tt-sheet-reserve: 420px; }

  .tabletop-layout .chain-pod {
    position: fixed;
    z-index: 90;
    top: 66px;
    right: calc(var(--tt-action-rail) + 8px);
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    width: 404px;
    height: auto;
    max-height: calc(100dvh - var(--tt-hand-height) - var(--tt-command-height) - 90px);
    overflow: hidden;
    padding: 8px;
    transform: none;
  }

  .tabletop-layout .chain-zone-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tabletop-layout .chain-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  .tabletop-layout .chain-zone-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 9px;
  }

  .tabletop-layout .chain-zone-countered > * { grid-column: 1 / -1; }
  .tabletop-layout:has(.chain-pod) .floating-panels.has-blocking-decision { top: min(480px, 52dvh); }
}

@media (max-width: 760px) {
  .tabletop-layout .field-lane-track > .unit-token.field-token {
    flex-basis: 182px;
    width: 182px;
    min-width: 182px;
    max-width: 182px;
    padding-right: 124px;
  }

  .tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats {
    width: 118px;
    max-width: 118px;
  }

  .tabletop-layout .unit-token.field-token > .move-select-chip { left: 49px; }
  .tabletop-layout .unit-token.field-token > .attachment-strip { right: 120px; }
}

/* EOF visual-QA overrides ------------------------------------------------
   This block must remain after every authoritative and responsive rule. */
.tabletop-layout .location-band {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 13px 3px 3px;
}

.tabletop-layout .battlefield-mat {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: hidden;
}

.tabletop-layout .battlefield.location-column {
  grid-template-rows: minmax(0, 1fr) clamp(54px, 28%, 84px) minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 3px;
}

.tabletop-layout .battlefield.location-column .field-lane {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1px;
}

.tabletop-layout .battlefield.location-column .field-lane-track {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px;
}

.tabletop-layout .field-lane-track > :is(.unit-token, .image-card),
.tabletop-layout .field-lane-track > .unit-token.field-token {
  height: calc(100% - 2px);
}

.tabletop-layout .base-row {
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 7px;
  scroll-padding-inline: 7px;
}

.tabletop-layout .base-row > :is(.unit-token, .image-card) {
  flex: 0 0 84px;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  height: auto;
  max-height: calc(100% - 4px);
  aspect-ratio: 0.714;
}

.tabletop-layout .base-token .unit-token-body > strong {
  overflow: visible;
  font-size: 11px;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.tabletop-layout .rune-card-caption,
.tabletop-layout .rune-card-chip strong,
.tabletop-layout .rune-recycle-ready,
.tabletop-layout .rune-summary,
.tabletop-layout .rune-count {
  font-size: 11px;
}

@media (min-width: 761px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-opponent-row: 96px;
    --tt-player-row: 112px;
    --tt-shelf-card-width: 50px;
    --tt-rune-card-width: 46px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    padding-top: 12px;
    padding-bottom: 3px;
  }

  .tabletop-layout .pile-cards,
  .tabletop-layout .table-card-pile.compact .pile-cards {
    width: 50px;
    min-width: 50px;
  }

  .tabletop-layout .rune-card-chip {
    flex-basis: 46px;
    width: 46px;
    min-width: 46px;
  }

  .tabletop-layout .base-row > :is(.unit-token, .image-card) {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.floating-panels > .payment-panel),
  .tabletop-layout:has(.floating-panels > .choice-panel),
  .tabletop-layout:has(.log-drawer),
  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(304px, 24vw, 352px);
  }

  .tabletop-layout .floating-panels :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  ),
  .tabletop-layout .floating-panels.has-blocking-decision,
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .chain-pod {
    width: calc(var(--tt-sheet-reserve) - 16px);
    max-width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat,
  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat.bottom {
    grid-template-columns:
      minmax(180px, 1.05fr)
      minmax(150px, 0.8fr)
      minmax(160px, 1fr)
      minmax(190px, 1.1fr);
    min-width: 0;
    overflow: hidden;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield-mat:not(.has-extra-battlefields) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    overflow-x: hidden;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield.location-column {
    width: 100%;
    min-width: 0;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .location-band[data-count="1"] .battlefield-mat {
    grid-template-columns: minmax(0, 1fr);
  }

  .tabletop-layout .payment-body {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 7px;
  }

  .tabletop-layout .payment-card-preview .card-art { width: 62px; }
}

@media (min-width: 1200px) {
  .tabletop-layout .floating-panels .payment-panel {
    grid-template-rows: max-content minmax(0, 1fr);
    min-height: 0;
  }

  .tabletop-layout .payment-body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .tabletop-layout .payment-cost-area {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .tabletop-layout .pay-runes {
    display: flex;
    align-items: stretch;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 7px;
    scroll-padding-inline: 4px;
  }

  .tabletop-layout .pay-rune {
    flex: 0 0 102px;
    width: 102px;
    min-width: 102px;
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) {
    --tt-chain-split-height: clamp(156px, 24dvh, 210px);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .chain-pod {
    height: var(--tt-chain-split-height);
    max-height: var(--tt-chain-split-height);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .floating-panels.has-blocking-decision {
    top: calc(66px + var(--tt-chain-split-height) + 8px);
  }
}

/* Final measured desktop seal -------------------------------------------
   Keep this at the physical EOF: the compact 1280px table and docked
   decision stack are measured against these values. */
@media (min-width: 1200px) {
  .tabletop-layout .board-panel,
  .tabletop-layout .table-command-layer {
    transition: none;
  }

  /* Fixed descendants resolve against the shifted board containing block.
     Offset the Chain by the reserved sheet width so it lands in that sheet. */
  .tabletop-layout .chain-pod {
    top: 8px;
    right: calc(8px - var(--tt-sheet-reserve));
    left: auto;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield-mat:not(.has-extra-battlefields) {
    overflow-x: clip;
    scroll-padding: 0;
    scroll-snap-type: none;
  }

  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield.location-column {
    scroll-snap-align: none;
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) {
    --tt-chain-split-height: clamp(136px, 20dvh, 176px);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .chain-pod {
    height: var(--tt-chain-split-height);
    max-height: var(--tt-chain-split-height);
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .floating-panels.has-blocking-decision {
    top: calc(66px + var(--tt-chain-split-height) + 8px);
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 7px;
    min-height: 0;
    margin: 0 0 6px;
    padding: 0;
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head > div:first-child {
    min-width: 0;
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head h2 {
    margin: 0;
    font-size: 13px;
    line-height: 1.15;
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head span {
    max-height: 3.6em;
    margin-top: 2px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head .actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .tabletop-layout .floating-panels .payment-panel > .section-head button {
    min-height: 30px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .tabletop-layout .payment-cost-area {
    grid-auto-flow: row;
    align-content: start;
  }

  .tabletop-layout .rune-payment-group {
    order: -100;
    padding: 5px;
  }

  .tabletop-layout .rune-payment-group .payment-resource-heading {
    display: grid;
    justify-content: stretch;
    gap: 2px;
    margin-bottom: 4px;
  }

  .tabletop-layout .rune-payment-group .payment-resource-heading span {
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
  }

  .tabletop-layout .pay-runes {
    gap: 5px;
    padding: 0 0 3px;
  }

  .tabletop-layout .pay-rune {
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    gap: 5px;
    padding: 5px;
  }

  .tabletop-layout .pay-rune .payment-rune-card {
    width: 54px;
    height: 76px;
  }

  .tabletop-layout .pay-rune .payment-mode-buttons {
    gap: 4px;
  }

  .tabletop-layout .pay-rune .payment-mode-buttons button {
    height: 27px;
    min-height: 27px;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.1;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-opponent-row: 104px;
    --tt-player-row: 120px;
    --tt-hand-card-width: 74px;
    --tt-shelf-card-width: 56px;
    --tt-rune-card-width: 50px;
  }

  .tabletop-layout .pile-cards,
  .tabletop-layout .table-card-pile.compact .pile-cards {
    width: 56px;
    min-width: 56px;
  }

  .tabletop-layout .rune-card-chip {
    flex-basis: 50px;
    width: 50px;
    min-width: 50px;
  }

  .tabletop-layout .base-row > :is(.unit-token, .image-card) {
    flex-basis: 56px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
  }
}

.tabletop-layout .base-token .unit-token-body > strong {
  display: block;
  max-height: none;
  line-height: 1;
}

@media (min-width: 1200px) {
  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .battlefield.location-column {
    transform: none !important;
  }
}

/* Final containment and glanceability pass -----------------------------
   A battlefield card is a border-box grid item; its status rail is a
   compact physical-card companion, not an overlay over the artwork. */
.tabletop-layout .battlefield.location-column {
  box-sizing: border-box;
  align-self: center;
  justify-self: center;
  width: calc(100% - 10px) !important;
  max-width: calc(100% - 10px) !important;
  height: calc(100% - 6px) !important;
  transform: none !important;
}

.tabletop-layout .battlefield.location-column .battlefield-head h2 {
  min-height: 16px;
  overflow: visible;
  line-height: 16px;
  text-overflow: clip;
}

@media (min-width: 761px) {
  .tabletop-layout .field-lane-track > .unit-token.field-token {
    flex-basis: 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    min-height: 52px;
    padding-right: 164px;
    box-sizing: border-box;
  }

  .tabletop-layout .unit-token.field-token > .card-exhaust-layer {
    width: 54px;
    max-width: 54px;
  }

  .tabletop-layout .unit-token.field-token .unit-token-body {
    gap: 1px;
    padding: 10px 3px 3px;
  }

  .tabletop-layout .unit-token.field-token .unit-token-body > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tabletop-layout .unit-token.field-token .unit-token-body > span {
    font-size: 11px;
    line-height: 1;
  }

  .tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats {
    inset: 1px 1px 1px auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 1px;
    width: 162px;
    max-width: 162px;
    max-height: calc(100% - 2px);
    overflow: hidden;
    padding: 1px;
  }

  .tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats > :is(b, em),
  .tabletop-layout .unit-token.field-token .unit-state-badge {
    min-height: 15px;
    padding: 1px 2px;
    font-size: 11px;
    line-height: 1;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .tabletop-layout .unit-token.field-token > .card-state-hud.unit-stats > b:first-child {
    font-size: 11px;
  }

  .tabletop-layout .unit-token.field-token .unit-state-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .tabletop-layout .unit-token.field-token > .owner-chip {
    top: 2px;
    left: 2px;
    max-width: 50px;
    padding: 1px 3px;
    font-size: 11px;
  }

  .tabletop-layout .unit-token.field-token > .move-select-chip {
    left: 30px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
  }

  .tabletop-layout .unit-token.field-token > .attachment-strip {
    right: 161px;
  }
}

@media (min-width: 1200px) {
  .tabletop-layout .pay-rune {
    position: relative;
    display: grid;
    box-sizing: border-box;
    min-height: 118px;
    contain: layout;
  }
}

/* The Base uses a compact horizontal card plus a dedicated state rail. This
   keeps both the Unit and its attached Gear independently clickable. */
@media (min-width: 761px) {
  .tabletop-layout .base-row {
    padding-inline: 2px;
  }

  .tabletop-layout .table-seat,
  .tabletop-layout .table-seat.bottom {
    grid-template-columns:
      clamp(190px, 15vw, 230px)
      clamp(190px, 15vw, 220px)
      minmax(190px, 1fr)
      clamp(230px, 19vw, 290px);
  }

  .tabletop-layout .base-row > .unit-token.base-token {
    flex: 0 0 188px;
    width: 188px;
    min-width: 188px;
    max-width: 188px;
    height: calc(100% - 4px);
    max-height: 82px;
    aspect-ratio: auto;
    overflow: hidden;
    padding-right: 130px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .tabletop-layout .unit-token.base-token > .card-exhaust-layer {
    inset: 1px auto 1px 1px;
    width: 56px;
    height: calc(100% - 2px);
    max-width: 56px;
  }

  .tabletop-layout .unit-token.base-token .unit-token-body {
    gap: 1px;
    padding: 10px 3px 3px;
  }

  .tabletop-layout .unit-token.base-token .unit-token-body > :is(strong, span) {
    font-size: 11px;
    line-height: 1.05;
  }

  .tabletop-layout .unit-token.base-token .unit-token-body > strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tabletop-layout .unit-token.base-token > .card-state-hud.unit-stats {
    inset: 1px 1px 1px auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    align-items: stretch;
    gap: 1px;
    width: 128px;
    max-width: 128px;
    max-height: calc(100% - 2px);
    overflow: hidden;
    padding: 1px;
    border: 1px solid rgba(108, 191, 225, 0.34);
    border-radius: 6px;
    background: rgba(2, 13, 23, 0.9);
    box-sizing: border-box;
  }

  .tabletop-layout .unit-token.base-token > .card-state-hud.unit-stats > :is(b, em),
  .tabletop-layout .unit-token.base-token .unit-state-badge {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 15px;
    padding: 1px 2px;
    box-sizing: border-box;
    overflow-wrap: normal;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  .tabletop-layout .unit-token.base-token > .card-state-hud.unit-stats > b:first-child {
    margin-right: 0;
    font-size: 11px;
  }

  .tabletop-layout .unit-token.base-token .unit-state-badges {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .tabletop-layout .unit-token.base-token > .owner-chip {
    top: 2px;
    left: 2px;
    max-width: 52px;
    padding: 1px 3px;
    font-size: 11px;
  }

  .tabletop-layout .unit-token.base-token > .attachment-strip {
    z-index: 12;
    top: 50%;
    right: auto;
    left: 22px;
    bottom: auto;
    transform: translateY(-50%);
  }

  .tabletop-layout .unit-token.base-token > .attachment-strip > button.attached-gear {
    flex: 0 0 56px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .tabletop-layout .unit-token.base-token > .move-select-chip {
    left: 31px;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat,
  .tabletop-layout:is(
    .inspector-open,
    :has(.log-drawer),
    :has(.chain-pod),
    :has(.floating-panels > .graveyard-panel),
    :has(.floating-panels > .banished-panel),
    :has(.floating-panels > .intel-panel),
    :has(.floating-panels > .payment-panel),
    :has(.floating-panels > .choice-panel)
  ) .table-seat.bottom {
    grid-template-columns:
      minmax(170px, 1fr)
      minmax(180px, 0.9fr)
      minmax(160px, 1fr)
      minmax(180px, 1fr);
  }
}

/* Activate the desktop density contract after every historical seal. */
@media (min-width: 1200px) {
  .tabletop-layout {
    --tt-hand-height: 196px;
    --tt-hand-card-width: 112px;
    --tt-opponent-row: 176px;
    --tt-player-row: 196px;
  }

  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel),
  .tabletop-layout:has(.floating-panels > .intel-panel),
  .tabletop-layout:has(.log-drawer) {
    --tt-sheet-reserve: clamp(288px, 21vw, 320px);
  }

  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(312px, 22vw, 336px);
  }

  .tabletop-layout:has(.floating-panels > .choice-panel) {
    --tt-sheet-reserve: clamp(336px, 24vw, 368px);
  }

  .tabletop-layout .board-panel {
    right: var(--tt-sheet-reserve);
  }

  .tabletop-layout .table-command-layer {
    right: var(--tt-action-rail);
  }

  .tabletop-layout .table-seat {
    grid-template-columns:
      var(--tt-identity-track)
      var(--tt-pile-dock-width)
      minmax(250px, 1fr)
      var(--tt-resource-track);
  }

  .tabletop-layout .table-seat.bottom {
    grid-template-columns:
      var(--tt-resource-track)
      minmax(250px, 1fr)
      var(--tt-pile-dock-width)
      var(--tt-identity-track);
  }

  .tabletop-layout .floating-panels.has-blocking-decision,
  .tabletop-layout .floating-panels :is(
    .graveyard-panel,
    .banished-panel,
    .intel-panel,
    .payment-panel,
    .choice-panel
  ),
  .tabletop-layout .inspector.inspector-panel,
  .tabletop-layout .log-drawer,
  .tabletop-layout .chain-pod {
    right: 8px;
    left: auto;
    width: calc(var(--tt-sheet-reserve) - 16px);
    max-width: calc(var(--tt-sheet-reserve) - 16px);
  }

  .tabletop-layout .chain-pod {
    position: absolute;
    top: 8px;
    right: calc(8px - var(--tt-sheet-reserve));
  }

  /* Payment lives in the command strip. Resource sources therefore become
     compact, horizontally scrollable chips instead of inheriting the old
     modal's tall cards, which used to crop generated resources entirely. */
  .tabletop-layout .payment-stage-resources .payment-resource-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .tabletop-layout .payment-stage-resources .payment-resource-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-resources :is(
    .pool-energy-list,
    .payment-add-actions,
    .optional-costs
  ) {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .tabletop-layout .payment-stage-resources :is(.pool-energy, .pool-power),
  .tabletop-layout .payment-stage-resources .payment-add-actions > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "orb title"
      "orb source";
    align-items: center;
    column-gap: 4px;
    width: auto;
    min-width: 104px !important;
    max-width: 164px;
    height: 30px;
    min-height: 30px;
    border-radius: 6px;
    padding: 2px 6px;
    text-align: left;
  }

  .tabletop-layout .payment-stage-resources .pool-power.selected {
    border-color: var(--blue);
    background: rgba(47, 120, 255, 0.16);
    box-shadow: 0 0 0 2px rgba(47, 120, 255, 0.35);
  }

  .tabletop-layout .payment-stage-resources .pool-energy-orb {
    grid-area: orb;
    width: 18px;
    height: 18px;
  }

  .tabletop-layout .payment-stage-resources :is(.pool-energy, .pool-power, .payment-add-actions > button) > strong {
    grid-area: title;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-resources :is(.pool-energy, .pool-power, .payment-add-actions > button) > span {
    grid-area: source;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout:has(.payment-stage-banner) .table-command-layer {
    right: 0;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-hand-height: 156px;
    --tt-hand-card-width: 86px;
    --tt-opponent-row: 130px;
    --tt-player-row: 132px;
  }
}

@media (min-width: 1200px) {
  .tabletop-layout .resource-zone {
    grid-template-rows: minmax(0, 1fr);
  }

  .tabletop-layout .resource-zone > .zone-caption {
    position: absolute;
  }

  .tabletop-layout .rune-tabletop {
    grid-row: 1;
    height: 100%;
  }

  .tabletop-layout .payment-stage-banner.payment-panel {
    position: absolute;
    z-index: 72;
    inset: 4px 10px auto;
    display: grid;
    grid-template-columns: minmax(330px, 1fr) minmax(180px, auto) auto;
    align-items: center;
    gap: 8px;
    width: auto;
    height: calc(var(--tt-command-height) - 8px);
    min-height: 0;
    max-width: none;
    max-height: calc(var(--tt-command-height) - 8px);
    overflow: hidden;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgba(255, 204, 75, 0.74);
    border-radius: 9px;
    background: rgba(4, 20, 34, 0.98);
    box-shadow: 0 0 24px rgba(255, 190, 40, 0.16);
    transform: none;
  }

  .tabletop-layout .payment-stage-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
  }

  .tabletop-layout .payment-stage-kicker {
    grid-row: 1 / span 2;
    align-self: stretch;
    display: grid;
    place-items: center;
    border-radius: 6px;
    padding: 2px 7px;
    background: #8b6412;
    color: #fff2b3;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-title-row,
  .tabletop-layout .payment-stage-controls,
  .tabletop-layout .payment-stage-resources {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .tabletop-layout .payment-stage-title-row h2 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.1;
  }

  .tabletop-layout .payment-stage-title-row span,
  .tabletop-layout .payment-stage-copy p {
    overflow: hidden;
    margin: 0;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout .payment-stage-resources {
    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tabletop-layout .payment-stage-resources :is(button, label),
  .tabletop-layout .payment-stage-controls button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 3px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  .tabletop-layout .table-seat.payment-seat {
    isolation: isolate;
    pointer-events: none;
  }

  .tabletop-layout .table-seat.payment-seat .resource-zone {
    position: relative;
    z-index: 40;
    overflow: visible;
    border-radius: 9px;
    outline: 2px solid rgba(255, 206, 74, 0.78);
    outline-offset: 3px;
    box-shadow: 0 0 22px rgba(255, 190, 42, 0.34);
  }

  .tabletop-layout .payment-seat .payment-rune-choice {
    z-index: calc(48 + var(--rune-index));
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1.12);
  }

  .tabletop-layout .payment-seat .payment-rune-choice .rune-orientation-layer {
    box-shadow: 0 0 0 2px rgba(255, 213, 91, 0.8), 0 8px 18px rgba(0, 0, 0, 0.46);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.is-energy-selected .rune-orientation-layer {
    transform: rotate(90deg);
    filter: brightness(1.22) saturate(1.14);
    box-shadow: 0 0 0 3px #ffd85f, 0 0 22px rgba(255, 202, 62, 0.7);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.is-power-selected .rune-orientation-layer {
    filter: brightness(1.2) saturate(1.2);
    box-shadow: 0 0 0 3px #bd7cff, 0 0 22px rgba(178, 95, 255, 0.72);
  }

  .tabletop-layout .payment-seat .payment-rune-choice.payment-unavailable {
    pointer-events: none;
    opacity: 0.34;
    filter: grayscale(0.9) brightness(0.55);
  }

  .tabletop-layout .payment-rune-mode {
    top: 3px;
    right: 3px;
    left: auto;
    z-index: 4;
    background: rgba(2, 14, 24, 0.94);
  }

  .tabletop-layout .battlefield.location-column {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
  }

  .tabletop-layout .field-lane-track > .unit-token.field-token {
    height: calc(100% - 8px) !important;
    max-height: calc(100% - 8px);
  }
}

/* Selection, inspection, and direct-manipulation seal --------------------
   These rules are deliberately last. Card choices use the board and hand as
   their input surface; only pile searches become a wide drawer above the
   hand. Utility browsing remains a narrow, non-blocking right shelf. */

/* Readiness is communicated by a 90-degree in-plane turn. It must never make
   the art harder to read. Disabled payment/choice states use borders and a
   subtle hatch instead of opacity or colour removal. */
.tabletop-layout :is(
  .identity-button.exhausted,
  .rune-card-chip.spent,
  .unit-token.exhausted,
  .image-card.exhausted,
  .physical-board-card.exhausted,
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) {
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout .identity-button.exhausted > .identity-orientation-layer,
.tabletop-layout .rune-card-chip.spent > .rune-orientation-layer,
.tabletop-layout .unit-token.exhausted .card-exhaust-layer,
.tabletop-layout .image-card.exhausted .card-exhaust-layer,
.tabletop-layout .physical-board-card.exhausted > .card-exhaust-layer,
.tabletop-layout :is(
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) > .attachment-orientation-layer {
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout :is(
  .identity-button.exhausted,
  .rune-card-chip.spent,
  .unit-token.exhausted,
  .image-card.exhausted,
  .physical-board-card.exhausted,
  .attached-gear.exhausted,
  .attached-gear[data-exhausted="true"],
  .attached-gear-card.exhausted,
  .attached-gear-card[data-exhausted="true"]
) :is(img, .card-art, .card-face-layer, .unit-token-art) {
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout .payment-rune-choice.payment-unavailable,
.tabletop-layout .choice-card-disabled,
.tabletop-layout .choice-drawer-card:disabled,
.tabletop-layout .damage-target-card:disabled {
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout .payment-rune-choice.payment-unavailable > .rune-orientation-layer {
  border-color: rgba(130, 151, 165, 0.72);
  box-shadow: inset 0 0 0 2px rgba(4, 13, 22, 0.42);
}

.tabletop-layout .payment-rune-choice.payment-unavailable::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 2px;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    rgba(3, 10, 17, 0.32) 7px 11px
  );
  pointer-events: none;
}

/* Hidden battlefield cards always occupy a horizontal card footprint. Cards
   the viewer is allowed to identify show their portrait art turned in-plane
   and softly obscured; an unknown card remains a crisp card back. */
.tabletop-layout :is(.hidden-card-back, .hidden-revealed, .hidden-card-visible) {
  position: relative;
  flex: 0 0 clamp(98px, 7.3vw, 136px);
  width: clamp(98px, 7.3vw, 136px);
  min-width: clamp(98px, 7.3vw, 136px);
  height: auto;
  min-height: 0;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: 7px;
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout :is(
  .hidden-card-back.hidden-card-owned,
  .hidden-card-back.hidden-card-visible,
  .hidden-revealed
) > :is(.card-art, img),
.tabletop-layout .hidden-card-visible > .hidden-visible-art > :is(.card-art, img),
.tabletop-layout :is(
  .hidden-card-back.hidden-card-owned,
  .hidden-card-back.hidden-card-visible,
  .hidden-revealed
) .card-face-layer > :is(.card-art, img) {
  position: absolute;
  top: -20%;
  left: 14.285%;
  width: 71.43%;
  height: 140%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.78 !important;
  filter: blur(0.8px) saturate(0.72) brightness(0.76) !important;
  transform: rotate(90deg) !important;
  transform-origin: center;
}

.tabletop-layout .hidden-card-visible > .hidden-visible-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.tabletop-layout :is(.hidden-card-back, .hidden-revealed, .hidden-card-visible) .hidden-label,
.tabletop-layout .hidden-revealed .status-line {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  left: 4px;
  overflow: hidden;
  border: 1px solid rgba(125, 196, 226, 0.44);
  border-radius: 4px;
  padding: 3px 5px;
  color: #eaf8ff;
  font-size: var(--tt-font-meta, 11px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(2, 13, 23, 0.88);
}

.tabletop-layout .hidden-card-back.locked-hidden {
  border-color: rgba(103, 177, 210, 0.62);
  background:
    linear-gradient(145deg, rgba(11, 55, 76, 0.98), rgba(3, 20, 34, 0.99)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(100, 196, 230, 0.13) 8px 10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(115, 202, 233, 0.1);
}

.tabletop-layout .hidden-card-back.locked-hidden .card-back-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(211, 244, 255, 0.8);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 1000;
}

/* Inline hand/board selection. All cards remain fully coloured. The staged
   card lifts and receives the only strong glow, so a second click visibly
   restores the unselected state. */
.tabletop-layout .choice-card-selectable,
.tabletop-layout .choice-card-disabled,
.tabletop-layout .choice-card-staged,
.tabletop-layout .choice-card-committed {
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout .choice-card-selectable {
  cursor: pointer;
  outline: 2px solid rgba(94, 211, 255, 0.86);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(3, 19, 30, 0.82), 0 0 18px rgba(62, 193, 245, 0.5);
}

.tabletop-layout .choice-card-selectable:not(.choice-card-staged) {
  animation: tabletop-choice-pulse 1.6s ease-in-out infinite;
}

.tabletop-layout .choice-card-staged,
.tabletop-layout .choice-card-committed {
  z-index: 74 !important;
  outline: 3px solid #ffd75e;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(3, 17, 27, 0.9), 0 0 27px rgba(255, 205, 63, 0.78);
}

.tabletop-layout .hand-fan-card.choice-card-staged,
.tabletop-layout .hand-fan-card.choice-card-committed {
  transform: translateY(-38px) rotate(0deg) scale(1.075) !important;
}

.tabletop-layout .choice-card-disabled {
  cursor: not-allowed;
  outline: 2px dashed rgba(139, 159, 171, 0.62);
  outline-offset: 1px;
  box-shadow: inset 0 0 0 2px rgba(1, 10, 17, 0.42);
}

.tabletop-layout .unit-state-badge[data-status-kind="empowered"] {
  position: relative;
  order: -20;
  width: max-content;
  max-width: calc(100% - 2px);
  min-height: 19px;
  overflow: visible;
  border: 1px solid #fff1a1;
  padding: 3px 6px 3px 18px;
  color: #241400;
  font-size: var(--tt-font-meta, 11px);
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe878, #e6a92f);
  box-shadow: 0 0 0 1px rgba(50, 25, 0, 0.82), 0 0 14px rgba(255, 198, 48, 0.58);
}

.tabletop-layout .unit-state-badge[data-status-kind="empowered"]::before {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 5px;
  color: #5f3100;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-50%);
}

@keyframes tabletop-choice-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(3, 19, 30, 0.82), 0 0 12px rgba(62, 193, 245, 0.34); }
  50% { box-shadow: 0 0 0 2px rgba(3, 19, 30, 0.82), 0 0 23px rgba(62, 193, 245, 0.68); }
}

/* The hand/board prompt replaces only the command strip. */
.tabletop-layout .choice-stage-bar {
  position: absolute;
  z-index: 76;
  right: 8px;
  bottom: var(--tt-hand-height);
  left: 8px;
  display: grid;
  grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: 10px;
  height: calc(var(--tt-command-height) - 6px);
  min-height: 48px;
  max-height: calc(var(--tt-command-height) - 4px);
  overflow: hidden;
  border: 1px solid rgba(75, 194, 235, 0.72);
  border-radius: 10px;
  padding: 5px 8px;
  color: #e9f9ff;
  background: linear-gradient(100deg, rgba(3, 22, 37, 0.98), rgba(5, 35, 51, 0.98));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.46), 0 0 18px rgba(48, 174, 224, 0.14);
  pointer-events: auto;
}

.tabletop-layout .choice-stage-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "kind title"
    "kind prompt";
  align-items: center;
  gap: 1px 7px;
  min-width: 0;
}

.tabletop-layout .choice-stage-copy > span {
  grid-area: kind;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-radius: 6px;
  padding: 3px 7px;
  color: #fff1a9;
  font-size: var(--tt-font-meta, 11px);
  font-weight: 1000;
  white-space: nowrap;
  background: rgba(121, 83, 9, 0.8);
}

.tabletop-layout .choice-stage-copy > strong {
  grid-area: title;
  overflow: hidden;
  font-size: var(--tt-font-body, 13px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-stage-copy > p {
  grid-area: prompt;
  overflow: hidden;
  margin: 0;
  color: #b9dce9;
  font-size: var(--tt-font-meta, 11px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-stage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  pointer-events: auto;
}

.tabletop-layout .choice-stage-actions > button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 9px;
  font-size: var(--tt-font-small, 12px);
  white-space: nowrap;
  pointer-events: auto;
}

.tabletop-layout .choice-stage-actions .choice-stage-variants,
.tabletop-layout .choice-stage-actions .choice-stage-variants > button {
  pointer-events: auto;
}

.tabletop-layout .choice-stage-actions .confirm-staged-choice {
  max-width: min(330px, 34vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pile choice and damage allocation use the broad lower-board drawer. */
.tabletop-layout .choice-zone-drawer {
  position: absolute;
  z-index: 78;
  right: 8px;
  bottom: var(--tt-hand-height);
  left: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  width: auto;
  height: clamp(224px, 28dvh, 292px);
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - var(--tt-hand-height) - var(--tt-opponent-row) - 76px);
  overflow: hidden;
  border: 1px solid rgba(74, 188, 229, 0.76);
  border-radius: 12px 12px 8px 8px;
  padding: 9px;
  color: #eaf9ff;
  background:
    linear-gradient(180deg, rgba(3, 20, 34, 0.99), rgba(3, 14, 25, 0.99)),
    radial-gradient(circle at 50% 100%, rgba(38, 135, 178, 0.2), transparent 60%);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.48), 0 0 24px rgba(48, 170, 218, 0.14);
  pointer-events: auto;
}

.tabletop-layout .choice-zone-drawer.is-collapsed {
  grid-template-rows: minmax(0, 1fr);
  height: calc(var(--tt-command-height) - 5px);
  min-height: 48px;
  max-height: calc(var(--tt-command-height) - 3px);
  padding-block: 5px;
}

.tabletop-layout .choice-drawer-head,
.tabletop-layout .damage-assignment-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tabletop-layout .choice-drawer-head > div:first-child,
.tabletop-layout .damage-assignment-head > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.tabletop-layout .choice-drawer-head :is(span, strong, p),
.tabletop-layout .damage-assignment-head :is(span, h2) {
  min-width: 0;
  margin: 0;
}

.tabletop-layout .choice-drawer-head > div:first-child > span,
.tabletop-layout .damage-assignment-head > div:first-child > span:first-child {
  color: #ffd969;
  font-size: var(--tt-font-meta, 11px);
  font-weight: 1000;
  white-space: nowrap;
}

.tabletop-layout .choice-drawer-head > div:first-child > strong,
.tabletop-layout .damage-assignment-head h2 {
  overflow: hidden;
  color: #f1fbff;
  font-size: var(--tt-font-title, 14px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-drawer-head > div:first-child > p,
.tabletop-layout .damage-assignment-head > div:first-child > span:last-child {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #b7d8e6;
  font-size: var(--tt-font-meta, 11px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-drawer-track,
.tabletop-layout .damage-target-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: 4px 5px 9px;
  scroll-padding-inline: 5px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.tabletop-layout .choice-drawer-card-wrap {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 25px;
  flex: 0 0 clamp(94px, 7.2vw, 116px);
  width: clamp(94px, 7.2vw, 116px);
  min-width: clamp(94px, 7.2vw, 116px);
  min-height: 0;
  border: 2px solid rgba(80, 163, 196, 0.44);
  border-radius: 8px;
  padding: 3px;
  background: rgba(7, 27, 42, 0.94);
}

.tabletop-layout .choice-drawer-card-wrap:is(.is-staged, .is-committed) {
  border-color: #ffd452;
  box-shadow: 0 0 0 2px rgba(3, 14, 23, 0.92), 0 0 20px rgba(255, 202, 55, 0.58);
}

.tabletop-layout .choice-drawer-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  padding: 0 0 3px;
  color: #eefaff;
  text-align: left;
  background: rgba(2, 13, 23, 0.95);
}

.tabletop-layout .choice-drawer-card > .choice-card-art {
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 5px 5px 2px 2px;
  background: #0a1c2b;
}

.tabletop-layout .choice-drawer-card > .choice-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1;
  filter: none;
}

.tabletop-layout .choice-drawer-card .choice-card-name {
  overflow: hidden;
  padding-inline: 3px;
  font-size: var(--tt-font-meta, 11px);
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-drawer-card > small {
  overflow: hidden;
  padding-inline: 3px;
  color: #9fc4d3;
  font-size: 10px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .choice-drawer-card .choice-check {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #07111b;
  font-size: 15px;
  background: #ffd65a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
}

.tabletop-layout .choice-drawer-card .choice-check:empty { display: none; }

.tabletop-layout .choice-drawer-card-wrap > .choice-card-view {
  width: 100%;
  min-height: 23px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
}

/* Damage allocation is horizontal, legible, and never fades a restricted
   target. The remaining-damage orb is always visible beside the heading. */
.tabletop-layout .damage-assignment-drawer {
  grid-template-rows: auto auto minmax(0, 1fr);
  border-color: rgba(255, 190, 70, 0.8);
  background: linear-gradient(180deg, rgba(30, 18, 12, 0.99), rgba(4, 15, 25, 0.99));
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 169, 51, 0.16);
}

.tabletop-layout .damage-assignment-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tabletop-layout .damage-remaining-orb {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 7px;
  min-width: 112px;
  border: 2px solid rgba(255, 200, 77, 0.86);
  border-radius: 999px;
  padding: 5px 11px;
  color: #fff4bc;
  background: rgba(93, 53, 7, 0.78);
  box-shadow: 0 0 16px rgba(255, 176, 39, 0.22);
}

.tabletop-layout .damage-remaining-orb > strong {
  font-size: 21px;
  line-height: 1;
}

.tabletop-layout .damage-remaining-orb > span {
  font-size: var(--tt-font-meta, 11px);
  font-weight: 900;
  white-space: nowrap;
}

.tabletop-layout .damage-assignment-help {
  overflow: hidden;
  margin: 0;
  border-left: 3px solid rgba(255, 194, 66, 0.84);
  padding: 3px 7px;
  color: #f2dcab;
  font-size: var(--tt-font-meta, 11px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(93, 55, 11, 0.22);
}

.tabletop-layout .damage-target-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(118px, 1fr);
  align-items: stretch;
  flex: 0 0 230px;
  width: 230px;
  min-width: 230px;
  min-height: 112px;
  overflow: hidden;
  border: 2px solid rgba(109, 191, 224, 0.62);
  border-radius: 9px;
  padding: 4px;
  color: #edf9ff;
  text-align: left;
  background: rgba(5, 24, 38, 0.96);
}

.tabletop-layout .damage-target-card > .choice-card-art {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #071724;
}

.tabletop-layout .damage-target-card > .choice-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1 !important;
  filter: none !important;
}

.tabletop-layout .damage-target-card .damage-target-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 7px;
}

.tabletop-layout .damage-target-copy :is(strong, small, b, span) {
  min-width: 0;
  font-size: var(--tt-font-meta, 11px);
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tabletop-layout .damage-target-card.is-legal {
  border-color: #63d7ff;
  box-shadow: 0 0 0 2px rgba(2, 15, 24, 0.82), 0 0 18px rgba(67, 195, 240, 0.38);
}

.tabletop-layout .damage-target-card.is-lethal {
  border-color: #ffcc4e;
  box-shadow: 0 0 0 2px rgba(2, 15, 24, 0.82), 0 0 20px rgba(255, 190, 50, 0.48);
}

.tabletop-layout .damage-target-card.is-locked {
  border-style: dashed;
  border-color: rgba(151, 167, 177, 0.7);
  color: #d3e0e6;
  cursor: not-allowed;
}

.tabletop-layout .damage-target-card.is-locked::after {
  content: "LOCK";
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid rgba(172, 190, 199, 0.66);
  border-radius: 4px;
  padding: 2px 4px;
  color: #eef6f9;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  background: rgba(7, 20, 29, 0.88);
}

.tabletop-layout .alpha-strike-target {
  display: grid;
  grid-template-columns: 70px minmax(108px, 1fr);
  grid-template-rows: minmax(0, 1fr) 32px;
  flex: 0 0 244px;
  width: 244px;
  min-width: 244px;
  min-height: 118px;
  overflow: hidden;
  border: 2px solid rgba(255, 190, 68, 0.72);
  border-radius: 9px;
  padding: 4px;
  background: rgba(26, 23, 24, 0.96);
}

.tabletop-layout .alpha-strike-target > .choice-card-art {
  grid-row: 1 / -1;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 5px;
}

.tabletop-layout .alpha-strike-target > .choice-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1;
  filter: none;
}

.tabletop-layout .alpha-strike-target > .damage-target-copy {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 7px;
}

.tabletop-layout .damage-stepper {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: 29px minmax(38px, 1fr) 29px;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.tabletop-layout .damage-stepper > output { display: none; }

.tabletop-layout .damage-stepper > :is(button, input) {
  width: 100%;
  min-width: 0;
  height: 29px;
  min-height: 29px;
  padding: 0 3px;
  border-radius: 5px;
  font-size: var(--tt-font-small, 12px);
  font-weight: 900;
  text-align: center;
}

.tabletop-layout .damage-stepper > input {
  color: #fff4be;
  background: rgba(4, 16, 25, 0.94);
}

.tabletop-layout .alpha-strike-target > .damage-assign-button {
  grid-row: 3;
  grid-column: 1 / -1;
  min-height: 29px;
  margin-top: 4px;
  padding: 3px 6px;
  font-size: var(--tt-font-meta, 11px);
}

/* Normal Trash/Banished browsing is a compact vertical shelf. It does not
   become a second full-size card chooser and its cards open the inspector. */
.tabletop-layout.inspector-open,
.tabletop-layout:has(.floating-panels > .graveyard-panel),
.tabletop-layout:has(.floating-panels > .banished-panel) {
  --tt-sheet-reserve: clamp(252px, 16vw, 292px);
}

.tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel) {
  right: 8px;
  width: calc(var(--tt-sheet-reserve) - 16px);
  max-width: calc(var(--tt-sheet-reserve) - 16px);
  overflow: hidden;
  padding: 8px;
}

.tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel) > .section-head {
  min-height: 34px;
  margin: 0 0 6px;
  padding: 0;
}

.tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel) > .section-head :is(h2, span) {
  overflow: hidden;
  font-size: var(--tt-font-small, 12px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel) > .section-head button {
  min-height: 28px;
  padding: 3px 7px;
  font-size: var(--tt-font-meta, 11px);
}

.tabletop-layout .floating-panels :is(.graveyard-panel, .banished-panel) .graveyard-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1px 4px 8px 1px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.tabletop-layout .pile-browser-entry,
.tabletop-layout .graveyard-card-entry.pile-browser-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  flex: none;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(92, 166, 199, 0.34);
  border-radius: 7px;
  padding: 4px;
  background: rgba(4, 22, 35, 0.78);
}

.tabletop-layout .banished-panel .pile-browser-entry {
  border-color: rgba(181, 109, 232, 0.42);
  background: rgba(30, 14, 46, 0.76);
}

.tabletop-layout .pile-browser-card.image-card,
.tabletop-layout .floating-panels .graveyard-cards .pile-browser-card.image-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 68px;
  min-height: 68px;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  background: rgba(3, 15, 25, 0.9);
  box-shadow: none;
}

.tabletop-layout .pile-browser-card .pile-browser-art {
  display: block;
  width: 48px;
  height: 68px;
  overflow: hidden;
  border-radius: 4px;
  background: #071824;
}

.tabletop-layout .pile-browser-card .pile-browser-art > .card-art {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.tabletop-layout .pile-browser-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding-right: 5px;
}

.tabletop-layout .pile-browser-copy > :is(strong, small) {
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .pile-browser-copy > strong {
  color: #edfaff;
  font-size: var(--tt-font-small, 12px);
}

.tabletop-layout .pile-browser-copy > small {
  color: #9fc2d1;
  font-size: var(--tt-font-meta, 11px);
}

.tabletop-layout .pile-browser-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}

.tabletop-layout .pile-browser-actions > button {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 27px;
  padding: 3px 5px;
  font-size: 10px;
  white-space: normal;
}

/* Inspector keeps its toolbar fixed while card art and the complete rules
   ledger remain independently readable. Any legacy four-line clamp is reset. */
.tabletop-layout .inspector.inspector-panel {
  right: 8px;
  display: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(132px, 42%) minmax(0, 1fr);
  width: calc(var(--tt-sheet-reserve) - 16px);
  max-width: calc(var(--tt-sheet-reserve) - 16px);
  overflow: hidden;
  padding: 8px;
}

.tabletop-layout.inspector-open .inspector.inspector-panel { display: grid; }

.tabletop-layout .inspector.inspector-panel .inspector-toolbar {
  position: relative;
  z-index: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 32px;
  border-bottom: 1px solid rgba(97, 174, 208, 0.28);
  padding: 0 0 6px;
  background: inherit;
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar :is(strong, button) {
  font-size: var(--tt-font-small, 12px);
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar button {
  min-height: 27px;
  padding: 3px 7px;
}

.tabletop-layout .inspector.inspector-panel .inspector-card {
  grid-row: 2;
  display: grid;
  min-width: 0;
  min-height: 0;
  max-height: none;
  place-items: center;
  overflow: hidden;
  padding: 7px;
  background: rgba(12, 31, 46, 0.76);
}

.tabletop-layout .inspector.inspector-panel .inspector-card img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 6px;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

.tabletop-layout .inspector.inspector-panel .inspector-text {
  grid-row: 3;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 9px 8px 18px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > :is(h2, span, strong, p, small) {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > h2 {
  color: #f4fbff;
  font-size: var(--tt-font-title, 14px);
  line-height: 1.2;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > :is(span, strong, small) {
  font-size: var(--tt-font-meta, 11px);
  line-height: 1.3;
  white-space: normal;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > p,
.tabletop-layout .inspector.inspector-panel .inspector-rules-text {
  display: block;
  max-height: none;
  overflow: visible;
  color: #e1eef4;
  font-size: var(--tt-font-small, 12px);
  line-height: 1.5;
  white-space: pre-wrap;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.tabletop-layout .inspector.inspector-panel .inspector-empty-state {
  grid-row: 2 / -1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* Reaction and pass are one decision group inside the command strip. */
.tabletop-layout :is(.response-action-group, .priority-action-group, .priority-response-controls) {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.tabletop-layout :is(.response-action-group, .priority-action-group, .priority-response-controls) > button {
  flex: 0 0 auto;
  width: auto;
  min-width: 112px;
  min-height: 36px;
}

.tabletop-layout :is(.response-action-group, .priority-action-group, .priority-response-controls) .pass-control,
.tabletop-layout .action-command-list > .pass-control {
  display: grid;
  width: auto;
  min-width: 138px;
  min-height: 36px;
  padding: 4px 9px;
}

/* Drag-to-play feedback. The app may use either the classes or the data-state
   form while a native/pointer drag is active; all variants share one visual
   contract and do not alter the drop zone's geometry. */
.tabletop-layout [data-play-destination] {
  transition: outline-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.tabletop-layout .hand-fan-card {
  touch-action: pan-x;
}

.tabletop-layout :is(
  [data-play-destination].is-legal-drop,
  [data-play-destination].legal-drop-target,
  [data-play-destination][data-drop-state="legal"]
),
.tabletop-layout :is(.is-dragging-card, .hand-card-drag-active, .drag-play-active) [data-play-destination].can-drop {
  outline: 3px solid rgba(92, 218, 255, 0.9);
  outline-offset: -4px;
  background-color: rgba(49, 170, 213, 0.12);
  box-shadow: inset 0 0 28px rgba(55, 184, 229, 0.24), 0 0 18px rgba(55, 184, 229, 0.22);
}

.tabletop-layout :is(
  [data-play-destination].drag-over,
  [data-play-destination].is-drag-over,
  [data-play-destination].drop-target-active,
  [data-play-destination][data-drop-state="active"]
) {
  outline: 4px solid #ffd65a;
  outline-offset: -5px;
  background-color: rgba(255, 200, 61, 0.16);
  box-shadow: inset 0 0 34px rgba(255, 194, 49, 0.3), 0 0 24px rgba(255, 190, 42, 0.32);
}

.tabletop-layout :is(.dragging-hand-card, .drag-source-active, .hand-fan-card[data-dragging="true"]) {
  z-index: 90 !important;
  opacity: 0.82;
  filter: none;
  transform: translateY(-42px) rotate(0deg) scale(1.06) !important;
}

.tabletop-layout .card-drag-ghost,
.tabletop-layout .hand-card-drag-ghost,
body > .hand-card-drag-ghost {
  position: fixed;
  z-index: 320;
  width: var(--tt-hand-card-width);
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border: 2px solid #75ddff;
  border-radius: 8px;
  opacity: 0.9;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(71, 199, 244, 0.48);
  transform: translate(-50%, -50%) rotate(2deg);
  pointer-events: none;
}

body > .hand-card-drag-ghost :is(.card-orientation-layer, .card-face-layer) {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

body > .hand-card-drag-ghost .card-face-layer {
  border: 1px solid rgba(154, 205, 228, 0.58);
  background: #071a2a;
}

body > .hand-card-drag-ghost .card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 1;
  filter: none;
}

.tabletop-layout .choice-stage-variants {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(360px, 32vw);
  padding: 3px;
  overflow-x: auto;
  border: 1px solid rgba(123, 190, 222, 0.34);
  border-radius: 8px;
  background: rgba(3, 17, 29, 0.84);
  scrollbar-width: thin;
}

.tabletop-layout .choice-stage-variant {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  border-color: rgba(117, 185, 218, 0.44);
  color: #c9e9f8;
  background: rgba(17, 49, 70, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.tabletop-layout .choice-stage-variant.is-active {
  border-color: #ffd65a;
  color: #07131e;
  background: #ffd65a;
  box-shadow: 0 0 13px rgba(255, 207, 75, 0.35);
}

.tabletop-layout .damage-assignment-history {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(111, 184, 217, 0.3);
  border-radius: 8px;
  background: rgba(4, 22, 35, 0.8);
}

.tabletop-layout .damage-assignment-history > strong {
  color: #9ec9dc;
  font-size: 11px;
  white-space: nowrap;
}

.tabletop-layout .damage-assignment-history-track {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabletop-layout .damage-assignment-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 5px 3px 9px;
  border: 1px solid rgba(255, 174, 87, 0.48);
  border-radius: 999px;
  color: #f2f7fa;
  background: rgba(77, 35, 23, 0.72);
  font-size: 11px;
}

.tabletop-layout .damage-assignment-chip em {
  display: grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  color: #210d08;
  background: #ffad66;
  font-style: normal;
  font-weight: 900;
}

/* Measured desktop adaptations: the lower drawers retain their purpose at
   1366x768 while 1920x1080 keeps larger card previews and breathing room. */
@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout .choice-zone-drawer {
    height: clamp(190px, 26dvh, 210px);
    max-height: calc(100dvh - var(--tt-hand-height) - 150px);
    gap: 5px;
    padding: 6px;
  }

  .tabletop-layout .choice-drawer-head,
  .tabletop-layout .damage-assignment-head { gap: 6px; }

  .tabletop-layout .choice-drawer-card-wrap {
    grid-template-rows: minmax(0, 1fr) 22px;
    flex-basis: 88px;
    width: 88px;
    min-width: 88px;
  }

  .tabletop-layout .choice-drawer-card-wrap > .choice-card-view {
    min-height: 20px;
    font-size: 9px;
  }

  .tabletop-layout .damage-target-card {
    grid-template-columns: 60px minmax(110px, 1fr);
    flex-basis: 206px;
    width: 206px;
    min-width: 206px;
    min-height: 96px;
  }

  .tabletop-layout .alpha-strike-target {
    grid-template-columns: 60px minmax(104px, 1fr);
    flex-basis: 220px;
    width: 220px;
    min-width: 220px;
    min-height: 98px;
  }

  .tabletop-layout .inspector.inspector-panel {
    grid-template-rows: auto minmax(104px, 35%) minmax(0, 1fr);
  }

  .tabletop-layout .inspector.inspector-panel .inspector-text {
    gap: 6px;
    padding: 7px 7px 14px;
  }

  .tabletop-layout .battlefield.location-column .battlefield-head {
    gap: 2px;
    padding: 4px 8px;
  }

  .tabletop-layout .battlefield.location-column .battlefield-head h2 {
    min-height: 14px;
    font-size: 13px;
    line-height: 14px;
  }

  .tabletop-layout .battlefield.location-column .battlefield-head span {
    display: block;
    min-height: 12px;
    overflow: visible;
    font-size: 11px;
    line-height: 12px;
  }
}

@media (min-width: 1700px) and (min-height: 900px) {
  .tabletop-layout.inspector-open,
  .tabletop-layout:has(.floating-panels > .graveyard-panel),
  .tabletop-layout:has(.floating-panels > .banished-panel) {
    --tt-sheet-reserve: clamp(276px, 15.2vw, 304px);
  }

  .tabletop-layout .choice-zone-drawer { height: clamp(256px, 27dvh, 310px); }

  .tabletop-layout .choice-drawer-card-wrap {
    flex-basis: 118px;
    width: 118px;
    min-width: 118px;
  }

  .tabletop-layout .inspector.inspector-panel {
    grid-template-rows: auto minmax(188px, 46%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabletop-layout .choice-card-selectable:not(.choice-card-staged) { animation: none; }
  .tabletop-layout [data-play-destination] { transition: none; }
}

/* Final tabletop interaction geometry -----------------------------------
   Unit state now lives on the card corners. Remove the retired side-ledger
   footprint so battlefield and Base cards use the space as physical cards. */
@media (min-width: 1200px) {
  .tabletop-layout {
    --tt-board-card-width: 72px;
    --tt-board-card-height: 101px;
    --tt-board-card-footprint: 104px;
    --tt-base-card-width: 74px;
    --tt-base-card-height: 104px;
    --tt-base-card-footprint: 108px;
  }

  .tabletop-layout .field-lane-track > .unit-token.field-token.physical-board-card {
    position: relative;
    flex: 0 0 var(--tt-board-card-footprint) !important;
    width: var(--tt-board-card-footprint) !important;
    min-width: var(--tt-board-card-footprint) !important;
    max-width: var(--tt-board-card-footprint) !important;
    height: var(--tt-board-card-height) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .tabletop-layout .base-row > .unit-token.base-token.physical-board-card {
    position: relative;
    flex: 0 0 var(--tt-base-card-footprint) !important;
    width: var(--tt-base-card-footprint) !important;
    min-width: var(--tt-base-card-footprint) !important;
    max-width: var(--tt-base-card-footprint) !important;
    height: var(--tt-base-card-height) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .tabletop-layout .unit-token.field-token.physical-board-card > .card-exhaust-layer {
    inset: 50% auto auto 50% !important;
    width: var(--tt-board-card-width) !important;
    height: var(--tt-board-card-height) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
  }

  .tabletop-layout .unit-token.base-token.physical-board-card > .card-exhaust-layer {
    inset: 50% auto auto 50% !important;
    width: var(--tt-base-card-width) !important;
    height: var(--tt-base-card-height) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
  }

  .tabletop-layout :is(.unit-token.field-token, .unit-token.base-token).physical-board-card.exhausted > .card-exhaust-layer {
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }

  .tabletop-layout :is(.unit-token.field-token, .unit-token.base-token).physical-board-card > .owner-chip {
    top: 3px;
    right: auto;
    left: 3px;
    max-width: calc(var(--tt-board-card-width) - 8px);
  }

  .tabletop-layout :is(.unit-token.field-token, .unit-token.base-token).physical-board-card > .move-select-chip {
    top: 3px;
    right: 3px;
    left: auto;
  }

  .tabletop-layout :is(.unit-token.field-token, .unit-token.base-token).physical-board-card > .attachment-strip {
    z-index: 14;
    top: 50%;
    right: -20px !important;
    bottom: auto;
    left: auto !important;
    transform: translateY(-50%);
  }

  .tabletop-layout:has(.chain-pod) {
    --tt-sheet-reserve: clamp(360px, 22vw, 420px);
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-board-card-width: 66px;
    --tt-board-card-height: 92px;
    --tt-board-card-footprint: 94px;
    --tt-base-card-width: 68px;
    --tt-base-card-height: 95px;
    --tt-base-card-footprint: 98px;
  }

  .tabletop-layout .battlefield.location-column .battlefield-head span {
    display: block;
    min-height: 12px;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabletop-layout .damage-assignment-drawer:has(.damage-assignment-history) {
    height: clamp(214px, 29dvh, 228px);
  }

  .tabletop-layout .damage-assignment-drawer .damage-target-track {
    min-height: 60px;
  }
}

@media (min-width: 1700px) and (min-height: 900px) {
  .tabletop-layout {
    --tt-board-card-width: 78px;
    --tt-board-card-height: 109px;
    --tt-board-card-footprint: 112px;
    --tt-base-card-width: 82px;
    --tt-base-card-height: 115px;
    --tt-base-card-footprint: 118px;
  }
}

.tabletop-layout .damage-assignment-drawer {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.tabletop-layout .damage-assignment-drawer:has(.damage-assignment-history) {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.tabletop-layout .damage-assignment-drawer:has(.damage-assignment-history) .damage-target-track {
  grid-row: 4;
}

.tabletop-layout .damage-assignment-drawer .damage-assignment-history {
  max-height: 38px;
  overflow: hidden;
}

.tabletop-layout .choice-stage-copy > p.has-repeat-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tabletop-layout .choice-stage-copy > p.has-repeat-progress > strong {
  flex: 0 0 auto;
  color: #ffd866;
  font-size: inherit;
}

.tabletop-layout .choice-stage-copy > p.has-repeat-progress > span {
  flex: 0 0 auto;
  min-width: 0;
}

.tabletop-layout .choice-stage-copy > p.has-repeat-progress > .choice-stage-prompt {
  flex: 1 1 auto;
  overflow: hidden;
  color: #8fb9ca;
  text-overflow: ellipsis;
}

.tabletop-layout .choice-repeat-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

/* Tabletop UX convergence -------------------------------------------------
   Keep the table readable while consolidating direct actions on the right,
   preserving every Rune hit target, and giving complex rule decisions the
   width their existing information model requires. */

/* Selected-card copy and every playable command share the horizontal strip
   directly above the hand. The fixed viewport rail remains a small utility
   area for Card Info and End Turn only. */
.tabletop-layout .context-action-dock {
  grid-template-columns: minmax(clamp(82px, 20vw, 220px), 0.72fr) minmax(0, 1.28fr) !important;
}

.tabletop-layout .context-action-dock > .action-context {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

.tabletop-layout .context-action-dock:not(:has(> .right-action-command-list)) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.tabletop-layout .table-action-rail {
  align-content: end;
  max-height: calc(100dvh - 82px);
  overflow: visible;
}

.tabletop-layout .context-action-dock > .right-action-command-list {
  grid-column: 2;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 2px 0;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.tabletop-layout .context-action-dock > .right-action-command-list > :first-child {
  margin-left: auto;
}

.tabletop-layout .context-action-dock > .right-action-command-list > button,
.tabletop-layout .context-action-dock > .right-action-command-list .priority-response-controls > button,
.tabletop-layout .context-action-dock > .right-action-command-list .priority-card-actions > button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  white-space: normal;
}

.tabletop-layout .context-action-dock > .right-action-command-list .priority-response-controls,
.tabletop-layout .context-action-dock > .right-action-command-list .priority-card-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.tabletop-layout .context-action-dock > .right-action-command-list .rune-action {
  flex: 0 0 170px;
  width: auto;
  min-width: 170px;
  max-width: 220px;
}

.tabletop-layout .context-action-dock > .right-action-command-list .pass-control small {
  display: block;
  font-size: 9px;
  line-height: 1.05;
}

.tabletop-layout .move-batch-command-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  border-right: 1px solid rgba(116, 184, 216, 0.32);
  padding-right: 7px;
}

.tabletop-layout .move-batch-command-group > span {
  color: #ffd866;
  font-size: var(--tt-font-meta);
  font-weight: 900;
  white-space: nowrap;
}

.tabletop-layout .move-batch-command-group > .actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
}

/* Play-order decisions happen after both Battlefields are revealed in an
   official Match. Keep each player's Legend, chosen Champion, and Battlefield
   visible together so the decision never hides established public state. */
.tabletop-layout.phase-first-player .first-player-card {
  width: min(1240px, calc(100% - 32px));
  max-height: 100%;
  overflow: hidden;
  padding: clamp(14px, 2.4dvh, 28px) clamp(18px, 3vw, 44px);
}

.tabletop-layout.phase-first-player .first-player-result.setup-loadout-result {
  grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr);
  width: 100%;
  max-width: 1040px;
  gap: clamp(12px, 2.2vw, 28px);
  margin-bottom: clamp(8px, 2dvh, 22px);
}

.tabletop-layout.phase-first-player .setup-loadout-result > .first-seat {
  width: 100%;
  min-width: 0;
}

.tabletop-layout.phase-first-player .first-player-loadout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(4px, 0.8vw, 9px);
  width: 100%;
  min-width: 0;
}

.tabletop-layout.phase-first-player .first-player-loadout-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(116, 184, 216, 0.28);
  border-radius: 9px;
  padding: 5px;
  background: rgba(4, 18, 31, 0.72);
}

.tabletop-layout.phase-first-player .first-player-loadout-card > small {
  color: #8fcce4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.tabletop-layout.phase-first-player .first-player-loadout-card > .image-card {
  width: min(100%, 118px);
  min-width: 0;
  max-width: 118px;
  margin: 0;
}

.tabletop-layout.phase-first-player .first-player-loadout-card > span {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #eefaff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tabletop-layout.phase-first-player .setup-card-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 118px);
  aspect-ratio: 0.714;
  border: 1px dashed rgba(143, 204, 228, 0.35);
  border-radius: 7px;
  color: rgba(143, 204, 228, 0.55);
  background: rgba(2, 13, 24, 0.72);
}

.tabletop-layout.phase-first-player .dice-seat .die-face {
  position: relative;
  z-index: 3;
}

@media (max-width: 760px), (max-height: 600px) {
  .tabletop-layout.phase-first-player .first-player-card {
    width: 100%;
    padding: 5px 8px;
  }

  .tabletop-layout.phase-first-player .first-player-result.setup-loadout-result {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 5px;
    margin-bottom: 3px;
  }

  .tabletop-layout.phase-first-player .first-player-loadout {
    gap: 3px;
  }

  .tabletop-layout.phase-first-player .first-player-loadout-card {
    gap: 2px;
    border-radius: 5px;
    padding: 2px;
  }

  .tabletop-layout.phase-first-player .first-player-loadout-card > small,
  .tabletop-layout.phase-first-player .first-player-loadout-card > span {
    font-size: 8px;
  }

  .tabletop-layout.phase-first-player .first-player-loadout-card > .image-card,
  .tabletop-layout.phase-first-player .setup-card-placeholder {
    width: min(100%, 86px);
    max-width: 86px;
  }
}

/* Every Rune remains physically reachable. Dragging the strip pans it; a
   short click still exhausts for Energy and right-click still recycles. */
.tabletop-layout .resource-zone,
.tabletop-layout .rune-tabletop,
.tabletop-layout .rune-play-area {
  min-width: 0;
}

.tabletop-layout .resource-row.rune-card-stack,
.tabletop-layout .table-seat.payment-seat .resource-row.rune-card-stack {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px !important;
  width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 3px 5px 8px !important;
  cursor: grab;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(100, 197, 232, 0.82) rgba(2, 17, 28, 0.68);
  scrollbar-width: thin;
  pointer-events: auto !important;
}

.tabletop-layout .resource-row.rune-card-stack:focus-visible {
  outline: 2px solid #76dcff;
  outline-offset: 2px;
}

.tabletop-layout .resource-row.rune-card-stack.is-panning {
  cursor: grabbing;
  user-select: none;
}

.tabletop-layout .resource-row.rune-card-stack.is-panning > * {
  pointer-events: none !important;
}

.tabletop-layout .resource-row.rune-card-stack > .rune-card-chip,
.tabletop-layout .table-seat.payment-seat .resource-row.rune-card-stack > .payment-rune-choice {
  flex: 0 0 var(--tt-rune-card-width) !important;
  min-width: var(--tt-rune-card-width) !important;
  margin-right: 0 !important;
  scroll-snap-align: start;
}

.tabletop-layout .table-seat.payment-seat .rune-play-area,
.tabletop-layout .table-seat.payment-seat .resource-row.rune-card-stack,
.tabletop-layout .table-seat.payment-seat .payment-rune-choice,
.tabletop-layout .table-seat.payment-seat .payment-rune-choice.payment-unavailable {
  pointer-events: auto !important;
}

/* A board move uses the same legal destination treatment as a hand play, but
   the source card must not inherit the hand card's large hover lift. */
.tabletop-layout [data-card-drag="move"] {
  cursor: grab;
  touch-action: none;
}

.tabletop-layout.is-dragging-move [data-card-drag="move"].drag-source-active {
  z-index: 90 !important;
  opacity: 1 !important;
  filter: none !important;
  outline: 3px solid #75ddff;
  outline-offset: 3px;
  transform: none !important;
}

body > .board-card-drag-ghost {
  position: fixed;
  z-index: 320;
  width: 82px !important;
  height: 115px !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  border: 2px solid #75ddff;
  border-radius: 8px;
  padding: 0 !important;
  opacity: 0.94;
  background: #071a2a;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(71, 199, 244, 0.48);
  transform: translate(-50%, -50%) rotate(2deg) !important;
  pointer-events: none;
}

body > .board-card-drag-ghost > .card-exhaust-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body > .board-card-drag-ghost :is(.card-face-layer, .unit-token-art, img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
}

body > .board-card-drag-ghost > :not(.card-exhaust-layer) {
  display: none !important;
}

/* Exhaustion changes only in-plane orientation. Current Might, remaining
   health, status marks, and art keep the same visual contrast. */
.tabletop-layout .physical-board-card.exhausted :is(
  .unit-board-overlay,
  .unit-corner-value,
  .empowered-board-marker
) {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

/* Empowered is a card-face marker, not an easy-to-miss side ledger entry. */
.tabletop-layout .physical-board-card .empowered-board-marker {
  position: absolute;
  z-index: 24;
  top: 3px;
  left: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100% - 6px);
  min-height: 18px;
  overflow: hidden;
  border: 1px solid #fff2a1;
  border-radius: 5px;
  padding: 2px 5px;
  color: #2b1700;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff184, #e7ad31);
  box-shadow: 0 0 0 1px rgba(51, 26, 0, 0.82), 0 0 14px rgba(255, 199, 49, 0.72);
  pointer-events: none;
}

.tabletop-layout .physical-board-card.status-empowered > .card-exhaust-layer {
  box-shadow: 0 0 0 2px #ffd757, 0 0 18px rgba(255, 194, 38, 0.62) !important;
}

/* Browsing a public pile is a side shelf, not a modal interruption. */
.tabletop-layout .floating-panels > :is(.graveyard-panel, .banished-panel)::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.tabletop-layout:has(.floating-panels > :is(.graveyard-panel, .banished-panel)) :is(
  .board-panel,
  .table-command-layer,
  .persistent-hand
) {
  opacity: 1 !important;
  filter: none !important;
}

/* Complex choices and the live processing tree need the board's horizontal
   working area. They float above it instead of crushing into a right sheet. */
@media (min-width: 1200px) {
  .tabletop-layout {
    --tt-opponent-row: 205px;
  }

  .tabletop-layout:has(.chain-pod),
  .tabletop-layout:has(.floating-panels > .choice-panel) {
    --tt-sheet-reserve: 0px !important;
  }

  .tabletop-layout .chain-pod {
    position: absolute !important;
    z-index: 88;
    top: calc(var(--tt-opponent-row) + 12px) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc((100% - var(--tt-action-rail)) / 2) !important;
    width: min(920px, calc(100% - var(--tt-action-rail) - 44px)) !important;
    max-width: min(920px, calc(100% - var(--tt-action-rail) - 44px)) !important;
    max-height: min(42dvh, 410px) !important;
    transform: translateX(-50%) !important;
  }

  .tabletop-layout .floating-panels.has-blocking-decision {
    position: absolute !important;
    z-index: 96;
    inset: var(--tt-opponent-row) var(--tt-action-rail) calc(var(--tt-hand-height) + var(--tt-command-height)) 0 !important;
    display: grid !important;
    place-items: center;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 18px;
    background: rgba(1, 10, 18, 0.38);
    transform: none !important;
    pointer-events: none;
  }

  .tabletop-layout .floating-panels.has-blocking-decision > .choice-panel {
    position: relative !important;
    inset: auto !important;
    width: min(980px, 100%) !important;
    max-width: min(980px, 100%) !important;
    max-height: 100% !important;
    overflow: auto !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-option-wrap,
  .tabletop-layout .trigger-order-panel .trigger-order-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-command-height: 54px;
    --tt-hand-height: 144px;
    --tt-hand-card-width: 94px;
    --tt-opponent-row: 158px;
    --tt-player-row: 124px;
  }

  .tabletop-layout .chain-pod {
    max-height: min(35dvh, 270px) !important;
  }
}

.tabletop-layout .binary-effect-choice-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  grid-template-areas:
    "copy source"
    "actions actions";
  align-items: center;
  gap: 14px;
  width: min(620px, calc(100% - 24px)) !important;
  max-width: 620px !important;
  padding: 18px;
}

.tabletop-layout .binary-effect-copy {
  grid-area: copy;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tabletop-layout .binary-effect-copy > span {
  color: #ffd85f;
  font-size: var(--tt-font-small, 12px);
  font-weight: 900;
}

.tabletop-layout .binary-effect-copy :is(h2, p) {
  margin: 0;
}

.tabletop-layout .binary-effect-copy p {
  color: #b9dce9;
  line-height: 1.45;
}

.tabletop-layout .binary-effect-source {
  grid-area: source;
  width: 82px;
  min-width: 82px;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  padding: 0;
}

.tabletop-layout .binary-effect-source img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop-layout .binary-effect-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tabletop-layout .binary-effect-actions button {
  min-height: 46px;
  font-size: var(--tt-font-body, 13px);
  font-weight: 900;
}

/* Mid-size desktop tables need a real three-row battlefield. The previous
   fixed seat heights left each unit lane shorter than the physical card and
   visibly cropped both ready and exhausted units. */
@media (min-width: 1200px) and (max-width: 1699px) {
  .tabletop-layout {
    --tt-opponent-row: 150px;
    --tt-player-row: 140px;
    --tt-board-card-width: 54px;
    --tt-board-card-height: 75px;
    --tt-board-card-footprint: 84px;
    --tt-base-card-width: 69px;
    --tt-base-card-height: 96px;
    --tt-base-card-footprint: 102px;
  }

  .tabletop-layout .battlefield.location-column {
    grid-template-rows: minmax(78px, 1fr) 56px minmax(78px, 1fr) !important;
  }

  .tabletop-layout .battlefield.location-column .field-lane {
    box-sizing: border-box;
    overflow-y: hidden;
    padding: 12px 3px 2px;
  }

  .tabletop-layout .battlefield.location-column .field-lane-track {
    box-sizing: border-box;
    overflow-y: hidden;
  }

  .tabletop-layout .table-seat.bottom.payment-seat {
    grid-template-columns:
      clamp(320px, 25vw, 440px)
      minmax(220px, 1fr)
      var(--tt-pile-dock-width)
      var(--tt-identity-track) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1699px) and (max-height: 820px) {
  .tabletop-layout {
    --tt-opponent-row: 130px;
    --tt-player-row: 112px;
    --tt-board-card-width: clamp(40px, 5.8dvh, 46px);
    --tt-board-card-height: clamp(54px, 7.6dvh, 60px);
    --tt-board-card-footprint: clamp(68px, 9.2dvh, 76px);
    --tt-base-card-width: 54px;
    --tt-base-card-height: 76px;
    --tt-base-card-footprint: 84px;
  }

  .tabletop-layout .battlefield.location-column {
    grid-template-rows: minmax(52px, 1fr) 42px minmax(52px, 1fr) !important;
  }

  .tabletop-layout .battlefield.location-column .field-lane {
    padding-top: 8px;
  }
}

/* A yes/no effect declaration is deliberately compact. It should interrupt
   the table clearly without covering the entire battlefield like a search or
   trigger-order workflow. */
@media (min-width: 1200px) {
  .tabletop-layout .floating-panels.has-blocking-decision > .choice-panel.binary-effect-choice-panel {
    width: min(620px, 100%) !important;
    max-width: 620px !important;
    height: auto !important;
    max-height: min(460px, 100%) !important;
    grid-template-rows: auto auto !important;
  }

  .tabletop-layout .floating-panels.has-blocking-decision > .binary-effect-choice-panel .binary-effect-source {
    width: 82px;
    min-width: 82px;
    height: 115px;
    min-height: 115px;
    aspect-ratio: auto;
  }
}

/* Authoritative Chain/identity seal. Keep this at physical EOF. */
.tabletop-layout {
  --tt-inspector-width: clamp(344px, 25vw, 420px);
  --tt-utility-sheet-width: clamp(252px, 18vw, 336px);
  --tt-chain-decision-height: clamp(116px, 19dvh, 172px);
}

.tabletop-layout .chain-zone-content[hidden] { display: none !important; }

.tabletop-layout .chain-zone-content {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.tabletop-layout .chain-stack {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 3px 4px 9px !important;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  pointer-events: none;
}

.tabletop-layout .chain-zone-item {
  box-sizing: border-box;
  flex: 0 0 clamp(232px, 22vw, 280px) !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: clamp(232px, 22vw, 280px) !important;
  min-width: 232px !important;
  min-height: 96px !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 8px !important;
  scroll-snap-align: start;
  pointer-events: auto;
}

.tabletop-layout .chain-card-motion-anchor[data-motion-anchor] {
  grid-column: 1;
  align-self: center;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: 76px;
  max-height: 76px;
  margin: 0;
}

.tabletop-layout .chain-zone-copy {
  grid-column: 2;
  display: grid !important;
  align-content: center;
  gap: 4px !important;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.tabletop-layout .chain-zone-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.tabletop-layout .chain-zone-meta > :is(b, em) {
  position: static;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabletop-layout .chain-zone-copy > strong,
.tabletop-layout .chain-zone-target {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tabletop-layout .chain-context-panel {
  position: relative;
  z-index: 3;
  align-content: start !important;
  max-height: 88px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  pointer-events: auto;
}

.tabletop-layout .tabletop-identity-dock {
  position: relative;
  z-index: 4;
  isolation: isolate;
}

.tabletop-layout .table-pile-dock { position: relative; z-index: 1; }

.tabletop-layout .identity-button,
.tabletop-layout .identity-button > .identity-orientation-layer,
.tabletop-layout .identity-button img,
.tabletop-layout .champion-away-reference img {
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto;
}

.tabletop-layout .identity-button.status-empowered {
  border-color: #ffd75b !important;
  box-shadow: 0 0 0 1px rgba(76, 42, 0, 0.86), 0 0 13px rgba(255, 196, 38, 0.62) !important;
}

.tabletop-layout .identity-empowered-marker {
  position: absolute;
  z-index: 6;
  top: 2px;
  right: auto;
  bottom: auto;
  left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  max-width: calc(100% - 4px);
  min-height: 13px;
  overflow: hidden;
  border: 1px solid #fff0a1;
  border-radius: 4px;
  padding: 1px 3px;
  color: #281500;
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff184, #e7ad31);
  box-shadow: 0 0 0 1px rgba(51, 26, 0, 0.76), 0 0 9px rgba(255, 199, 49, 0.58);
  pointer-events: none;
}

.tabletop-layout .physical-board-card .empowered-board-marker {
  top: 2px !important;
  left: 2px !important;
  gap: 1px !important;
  max-width: calc(100% - 4px) !important;
  min-height: 14px !important;
  border-radius: 4px !important;
  padding: 1px 3px !important;
  font-size: 8px !important;
}

.tabletop-layout .physical-board-card.status-empowered .unit-board-overlay > .unit-state-badges {
  top: 18px !important;
}

.tabletop-layout :is(.unit-token.field-token, .unit-token.base-token).physical-board-card > .owner-chip {
  top: -10px !important;
  right: auto !important;
  left: 0 !important;
  max-width: 32px !important;
}

.tabletop-layout .pile-banished .pile-cards {
  box-shadow: 2px 2px 0 rgba(126, 72, 174, 0.22), 0 0 7px rgba(137, 65, 197, 0.18) !important;
}

@media (min-width: 1200px) {
  .tabletop-layout.inspector-open {
    --tt-sheet-reserve: var(--tt-inspector-width) !important;
  }

  .tabletop-layout.inspector-open .board-panel {
    right: var(--tt-inspector-width) !important;
  }

  .tabletop-layout .chain-zone-content:has(> .chain-context-panel) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: start;
  }

  .tabletop-layout .chain-zone-content:has(> .chain-context-panel) .chain-context-panel {
    max-height: 168px !important;
  }

  .tabletop-layout .table-pile-dock {
    grid-template-columns: repeat(3, var(--tt-shelf-card-width)) !important;
    gap: 4px !important;
    width: calc(var(--tt-shelf-card-width) * 3 + 8px) !important;
    max-width: calc(var(--tt-shelf-card-width) * 3 + 8px) !important;
  }

  .tabletop-layout .table-pile-dock .table-card-pile {
    width: var(--tt-shelf-card-width) !important;
    min-width: var(--tt-shelf-card-width) !important;
    max-width: var(--tt-shelf-card-width) !important;
  }

  .tabletop-layout .chain-pod {
    position: absolute !important;
    z-index: 98 !important;
    top: calc(var(--tt-opponent-row) + 8px) !important;
    right: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 248px !important;
    transform: none !important;
  }

  .tabletop-layout.inspector-open .chain-pod {
    right: 12px !important;
  }

  .tabletop-layout.inspector-open .floating-panels.has-blocking-decision {
    right: calc(var(--tt-inspector-width) + 12px) !important;
  }

  .tabletop-layout .table-command-layer,
  .tabletop-layout:has(.payment-stage-banner) .table-command-layer,
  .tabletop-layout.inspector-open .table-command-layer,
  .tabletop-layout.inspector-open:has(.payment-stage-banner) .table-command-layer {
    right: var(--tt-action-rail) !important;
  }

  .tabletop-layout.inspector-open .inspector.inspector-panel {
    z-index: 112 !important;
    top: 66px !important;
    right: 0 !important;
    bottom: calc(var(--tt-hand-height) + var(--tt-command-height) + 12px) !important;
    display: grid !important;
    grid-template-rows: auto clamp(190px, 34dvh, 320px) minmax(0, 1fr) !important;
    width: var(--tt-inspector-width) !important;
    max-width: var(--tt-inspector-width) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 10px 0 0 10px;
  }

  .tabletop-layout:has(.chain-pod.is-collapsed) .chain-pod.is-collapsed,
  .tabletop-layout .chain-pod.is-collapsed,
  .tabletop-layout.inspector-open .chain-pod.is-collapsed {
    right: 10px !important;
    left: auto !important;
    width: clamp(208px, 16vw, 248px) !important;
    max-width: clamp(208px, 16vw, 248px) !important;
    height: 42px !important;
    min-height: 0 !important;
    max-height: 42px !important;
    padding: 4px 6px !important;
  }

  .tabletop-layout.inspector-open .chain-pod.is-collapsed {
    right: 12px !important;
  }

  .tabletop-layout:has(.floating-panels > :is(.graveyard-panel, .banished-panel, .intel-panel)),
  .tabletop-layout:has(.log-drawer),
  .tabletop-layout:has(.chain-pod):has(.floating-panels > :is(.graveyard-panel, .banished-panel, .intel-panel)),
  .tabletop-layout:has(.chain-pod):has(.log-drawer) {
    --tt-sheet-reserve: var(--tt-utility-sheet-width) !important;
  }

  .tabletop-layout:has(.floating-panels > :is(.graveyard-panel, .banished-panel, .intel-panel)) .board-panel,
  .tabletop-layout:has(.log-drawer) .board-panel {
    right: calc(var(--tt-action-rail) + var(--tt-utility-sheet-width)) !important;
  }

  .tabletop-layout:has(.floating-panels > :is(.graveyard-panel, .banished-panel, .intel-panel)) .table-command-layer,
  .tabletop-layout:has(.log-drawer) .table-command-layer {
    right: calc(var(--tt-action-rail) + var(--tt-utility-sheet-width)) !important;
  }

  .tabletop-layout .floating-panels > :is(.graveyard-panel, .banished-panel, .intel-panel),
  .tabletop-layout .log-drawer {
    right: var(--tt-action-rail) !important;
    width: var(--tt-utility-sheet-width) !important;
    max-width: var(--tt-utility-sheet-width) !important;
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .chain-pod {
    max-height: var(--tt-chain-decision-height) !important;
  }

  .tabletop-layout:has(.chain-pod):has(.floating-panels.has-blocking-decision) .floating-panels.has-blocking-decision {
    top: calc(var(--tt-opponent-row) + var(--tt-chain-decision-height) + 18px) !important;
    right: var(--tt-action-rail) !important;
    bottom: calc(var(--tt-hand-height) + var(--tt-command-height)) !important;
    left: 0 !important;
    place-items: start center !important;
  }

  .tabletop-layout.inspector-open:has(.chain-pod):has(.floating-panels.has-blocking-decision) .floating-panels.has-blocking-decision {
    right: var(--tt-inspector-width) !important;
  }

  .tabletop-layout .resource-zone,
  .tabletop-layout .rune-tabletop > .table-card-pile.pile-rune-deck {
    overflow: visible !important;
  }

  .tabletop-layout .table-seat.bottom .rune-play-area {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .tabletop-layout .table-seat.bottom .rune-summary {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    left: 0;
  }

  .tabletop-layout .table-seat.bottom .resource-row.rune-card-stack {
    height: 100% !important;
  }
}

.tabletop-layout .chain-zone-head {
  min-height: 34px;
}

.tabletop-layout .chain-zone-toggle {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar {
  min-height: 34px;
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar :is(strong, button) {
  font-size: 12px !important;
}

.tabletop-layout .inspector.inspector-panel .inspector-toolbar button {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 9px !important;
}

.tabletop-layout .inspector.inspector-panel .inspector-card {
  position: relative;
  min-height: 0;
}

.tabletop-layout .inspector.inspector-panel .inspector-card img {
  position: absolute;
  z-index: 2;
  inset: 7px;
  width: auto !important;
  max-width: calc(100% - 14px) !important;
  height: auto !important;
  max-height: calc(100% - 14px) !important;
  margin: auto;
  object-fit: contain;
}

.tabletop-layout .inspector.inspector-panel .inspector-card-fallback {
  position: absolute;
  z-index: 1;
  inset: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(111, 193, 226, 0.42);
  border-radius: 7px;
  padding: 14px;
  color: #dff6ff;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(13, 43, 62, 0.96), rgba(4, 17, 29, 0.98)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(112, 202, 236, 0.06) 8px 9px);
}

.tabletop-layout .inspector.inspector-panel .inspector-card-fallback > strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.3;
}

.tabletop-layout .inspector.inspector-panel .inspector-text {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > * {
  flex: 0 0 auto;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > h2 {
  min-height: 20px;
  overflow: visible;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > :is(span, strong, small) {
  font-size: 12px;
}

.tabletop-layout .inspector.inspector-panel .inspector-text > p,
.tabletop-layout .inspector.inspector-panel .inspector-rules-text {
  font-size: 13px;
  line-height: 1.5;
}

.tabletop-layout [data-card-drag="champion"] {
  cursor: grab;
  touch-action: none;
}

.tabletop-layout.is-dragging-champion [data-card-drag="champion"].drag-source-active {
  z-index: 96 !important;
  opacity: 1 !important;
  filter: none !important;
  outline: 3px solid #ffd861;
  outline-offset: 3px;
}

body > .champion-card-drag-ghost {
  position: fixed;
  z-index: 320;
  width: 82px !important;
  height: 115px !important;
  overflow: hidden !important;
  border: 2px solid #ffd861;
  border-radius: 8px;
  padding: 0 !important;
  opacity: 0.96;
  background: #071a2a;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 205, 71, 0.5);
  transform: translate(-50%, -50%) rotate(2deg) !important;
  pointer-events: none;
}

body > .champion-card-drag-ghost > .identity-orientation-layer,
body > .champion-card-drag-ghost img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body > .champion-card-drag-ghost > :not(.identity-orientation-layer) {
  display: none !important;
}

/* Trigger ordering is a complete decision workspace. The live Chain returns
   as soon as ordering closes; keeping both visible only starves the options of
   height and clips their fixed full-card controls. */
.tabletop-layout:has(.floating-panels > .trigger-order-panel) .chain-pod {
  visibility: hidden !important;
  pointer-events: none !important;
}

.tabletop-layout .chain-zone-content {
  display: grid !important;
}

.tabletop-layout .chain-context-panel {
  min-height: 0 !important;
  max-height: min(24dvh, 168px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

.tabletop-layout .chain-target-head {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-bottom: 4px;
  background: rgba(3, 17, 30, 0.96);
}

@media (min-width: 1200px) {
  .tabletop-layout:has(.floating-panels > .trigger-order-panel) .floating-panels.has-blocking-decision,
  .tabletop-layout:has(.chain-pod):has(.floating-panels > .trigger-order-panel) .floating-panels.has-blocking-decision {
    top: 8px !important;
    right: var(--tt-action-rail) !important;
    bottom: 8px !important;
    left: 0 !important;
    place-items: stretch center !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
  }

  .tabletop-layout .floating-panels.has-blocking-decision > .trigger-order-panel {
    align-self: stretch;
    width: min(1080px, 100%) !important;
    max-width: min(1080px, 100%) !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-option-wrap {
    flex: 0 0 clamp(280px, 29vw, 320px) !important;
    width: clamp(280px, 29vw, 320px) !important;
    min-width: 280px !important;
    max-width: 320px !important;
    height: 100% !important;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-option {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 1199px) {
  .tabletop-layout:has(.floating-panels > .trigger-order-panel) .floating-panels.has-blocking-decision {
    position: absolute !important;
    inset: 4px var(--tt-action-rail) 4px 0 !important;
    display: grid !important;
    place-items: stretch center !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
  }

  .tabletop-layout .floating-panels.has-blocking-decision > .trigger-order-panel {
    position: relative !important;
    inset: auto !important;
    align-self: stretch;
    width: min(980px, 100%) !important;
    max-width: min(980px, 100%) !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .tabletop-layout .trigger-order-panel .trigger-order-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}