/* Beast Tactics 4x2 Board — clean final layout
   Replaces every earlier board-spacing / board-4x2 stylesheet. */

:root{
  --bt-hand-h:92px;
  --bt-slot-w:clamp(58px,min(6.15vw,10.2dvh),92px);
  --bt-slot-h:calc(var(--bt-slot-w) * 1.24);
  --bt-pile-w:clamp(44px,min(4.35vw,7.1dvh),64px);
  --bt-col-gap:clamp(6px,.7vw,10px);
  --bt-row-gap:clamp(6px,.95dvh,10px);
  --bt-divider-h:clamp(10px,1.7dvh,18px);
  --bt-board-pad-x:18px;
  --bt-board-pad-y:16px;
  --bt-board-half-w:calc((var(--bt-pile-w) * 2 + var(--bt-slot-w) * 4 + var(--bt-col-gap) * 5 + var(--bt-board-pad-x) * 2) / 2);
  --bt-board-half-h:calc((var(--bt-slot-h) * 4 + var(--bt-divider-h) + var(--bt-row-gap) * 4 + var(--bt-board-pad-y) * 2) / 2);
}

html,
body{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}

html body .game-shell{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:hidden !important;
}

html body .battlefield,
html body .battlefield > .board,
html body .board{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body .battlefield{display:block !important;pointer-events:none !important}
html body .board{pointer-events:none !important}
html body .hero-side{display:none !important}

/* Exact viewport-centred matrix. Do not add inset after left/top: it would reset them. */
html body .board > .board-grid.board-grid-4x2,
html body .board-grid.board-grid-4x2{
  position:fixed !important;
  left:50vw !important;
  top:50dvh !important;
  right:auto !important;
  bottom:auto !important;
  display:grid !important;
  grid-template-columns:var(--bt-pile-w) repeat(4,var(--bt-slot-w)) var(--bt-pile-w) !important;
  grid-template-rows:var(--bt-slot-h) var(--bt-slot-h) var(--bt-divider-h) var(--bt-slot-h) var(--bt-slot-h) !important;
  grid-auto-flow:row !important;
  grid-auto-columns:0 !important;
  grid-auto-rows:0 !important;
  column-gap:var(--bt-col-gap) !important;
  row-gap:var(--bt-row-gap) !important;
  align-items:center !important;
  justify-items:center !important;
  align-content:center !important;
  justify-content:center !important;
  width:max-content !important;
  height:max-content !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:var(--bt-board-pad-y) var(--bt-board-pad-x) !important;
  box-sizing:border-box !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  overflow:visible !important;
  pointer-events:auto !important;
  isolation:isolate !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(21,35,61,.90),rgba(13,23,42,.93)) !important;
  border:1px solid rgba(177,213,244,.18) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html body .board-grid.board-grid-4x2 > .slot{
  position:relative !important;
  width:var(--bt-slot-w) !important;
  min-width:var(--bt-slot-w) !important;
  max-width:var(--bt-slot-w) !important;
  height:var(--bt-slot-h) !important;
  min-height:var(--bt-slot-h) !important;
  max-height:var(--bt-slot-h) !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  justify-self:center !important;
  aspect-ratio:auto !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Four lanes, two rows per side. */
html body #enemyBack_0{grid-row:1 !important;grid-column:2 !important}
html body #enemyBack_1{grid-row:1 !important;grid-column:3 !important}
html body #enemyBack_2{grid-row:1 !important;grid-column:4 !important}
html body #enemyBack_3{grid-row:1 !important;grid-column:5 !important}
html body #enemyFront_0{grid-row:2 !important;grid-column:2 !important}
html body #enemyFront_1{grid-row:2 !important;grid-column:3 !important}
html body #enemyFront_2{grid-row:2 !important;grid-column:4 !important}
html body #enemyFront_3{grid-row:2 !important;grid-column:5 !important}
html body #playerFront_0{grid-row:4 !important;grid-column:2 !important}
html body #playerFront_1{grid-row:4 !important;grid-column:3 !important}
html body #playerFront_2{grid-row:4 !important;grid-column:4 !important}
html body #playerFront_3{grid-row:4 !important;grid-column:5 !important}
html body #playerBack_0{grid-row:5 !important;grid-column:2 !important}
html body #playerBack_1{grid-row:5 !important;grid-column:3 !important}
html body #playerBack_2{grid-row:5 !important;grid-column:4 !important}
html body #playerBack_3{grid-row:5 !important;grid-column:5 !important}

/* Symmetric deck/discard rails. */
html body #enemyDiscardPile{grid-row:1 / 3 !important;grid-column:1 !important}
html body #enemyDeckPile{grid-row:1 / 3 !important;grid-column:6 !important}
html body #playerDeckPile{grid-row:4 / 6 !important;grid-column:1 !important}
html body #playerDiscardPile{grid-row:4 / 6 !important;grid-column:6 !important}

html body .board-grid.board-grid-4x2 > .pile,
html body .board-grid.board-grid-4x2 > .pile.empty{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--bt-pile-w) !important;
  min-width:var(--bt-pile-w) !important;
  max-width:var(--bt-pile-w) !important;
  height:calc(var(--bt-pile-w) * 1.34) !important;
  min-height:calc(var(--bt-pile-w) * 1.34) !important;
  max-height:calc(var(--bt-pile-w) * 1.34) !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  justify-self:center !important;
  transform:none !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
}
html body .board-grid.board-grid-4x2 > .pile.empty{
  border:1px dashed rgba(151,202,255,.18) !important;
  background:rgba(4,10,20,.16) !important;
}
html body .board-grid.board-grid-4x2 > .pile > .pile-card{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  transform:none !important;
}
html body .board-grid.board-grid-4x2 > .pile.empty > .pile-card{display:none !important}
html body .board-grid.board-grid-4x2 > .pile > strong,
html body .board-grid.board-grid-4x2 > .pile > span{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  white-space:nowrap !important;
  z-index:6 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html body .board-grid.board-grid-4x2 > .pile > strong{
  top:calc(100% + 5px) !important;
  font-size:16px !important;
  line-height:1 !important;
  color:rgba(226,240,251,.94) !important;
}
html body .board-grid.board-grid-4x2 > .pile > span{
  top:calc(100% + 22px) !important;
  font-size:7px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:rgba(151,180,201,.74) !important;
  text-transform:uppercase !important;
}

/* Row labels overlay beside lane 1 and never create another column. */
html body .board-grid.board-grid-4x2 > .board-row-label{
  position:absolute !important;
  left:calc(var(--bt-pile-w) + var(--bt-col-gap) - 18px) !important;
  width:12px !important;
  height:auto !important;
  margin:0 !important;
  display:block !important;
  color:rgba(170,205,230,.58) !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.11em !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  transform:rotate(180deg) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  z-index:3 !important;
}
html body .enemy-back-label{top:calc(var(--bt-board-pad-y) + (var(--bt-slot-h) - 34px) / 2) !important}
html body .enemy-front-label{top:calc(var(--bt-board-pad-y) + var(--bt-slot-h) + var(--bt-row-gap) + (var(--bt-slot-h) - 40px) / 2) !important}
html body .player-front-label{bottom:calc(var(--bt-board-pad-y) + var(--bt-slot-h) + var(--bt-row-gap) + (var(--bt-slot-h) - 40px) / 2) !important}
html body .player-back-label{bottom:calc(var(--bt-board-pad-y) + (var(--bt-slot-h) - 34px) / 2) !important}

html body .board-grid.board-grid-4x2 > .enemy-divider{
  display:block !important;
  grid-row:3 !important;
  grid-column:1 / 7 !important;
  width:100% !important;
  height:1px !important;
  min-height:1px !important;
  margin:0 !important;
  align-self:center !important;
  background:linear-gradient(90deg,transparent,rgba(117,232,255,.23),transparent) !important;
  border:0 !important;
}
html body .board-grid.board-grid-4x2 > .player-divider{display:none !important}

/* Remove any stale dedicated spell slots from cached HTML. */
html body .board-grid.board-grid-4x2 > .spell-slot,
html body .board-grid.board-grid-4x2 > .shared-gap,
html body .board-grid.board-grid-4x2 > [id^="sharedSpell_"],
html body .board-grid.board-grid-4x2 > #enemySpellBack,
html body .board-grid.board-grid-4x2 > #enemySpellFront,
html body .board-grid.board-grid-4x2 > #playerSpellBack,
html body .board-grid.board-grid-4x2 > #playerSpellFront{display:none !important}

/* Status rail is anchored to the board, not the old 3-column battlefield. */
html body .board > .vertical-status-rail:not(.screen-edge-rail),
html body .board > #verticalStatusRail:not(.screen-edge-rail){
  position:fixed !important;
  left:calc(50vw + var(--bt-board-half-w) + 18px) !important;
  right:auto !important;
  top:50dvh !important;
  bottom:auto !important;
  width:112px !important;
  min-width:112px !important;
  height:auto !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  z-index:150 !important;
  pointer-events:auto !important;
}

html body .board > .phase-status-rail:not(.screen-edge-rail),
html body .board > #phaseStatusRail:not(.screen-edge-rail){
  position:fixed !important;
  left:50vw !important;
  right:auto !important;
  top:calc(50dvh - var(--bt-board-half-h) - 12px) !important;
  bottom:auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  transform:translate(-50%,-100%) !important;
  z-index:151 !important;
  pointer-events:none !important;
}
html body .phase-status-rail > .vertical-phase-badge,
html body #phaseText.vertical-phase-badge{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:7px 14px !important;
  display:block !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
  white-space:nowrap !important;
  border:1px solid rgba(117,232,255,.22) !important;
  border-radius:999px !important;
  background:rgba(4,12,24,.78) !important;
  color:rgba(188,224,246,.88) !important;
  -webkit-text-fill-color:rgba(188,224,246,.88) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.12em !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body .phase-status-rail > .vertical-phase-ghost{display:none !important}
html body #phaseText.phase-badge:not(.vertical-phase-badge){
  position:fixed !important;
  left:50vw !important;
  top:calc(50dvh - var(--bt-board-half-h) - 12px) !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-100%) !important;
  margin:0 !important;
}

/* Hands remain centred independently. */
html body .enemy-hand-ui{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  pointer-events:none !important;
  z-index:90 !important;
}
html body .enemy-hand-panel,
html body .hand-panel{
  position:fixed !important;
  left:50vw !important;
  right:auto !important;
  width:min(820px,calc(100vw - 300px)) !important;
  height:var(--bt-hand-h) !important;
  min-height:var(--bt-hand-h) !important;
  max-height:var(--bt-hand-h) !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-50%) !important;
  pointer-events:auto !important;
  z-index:100 !important;
}
html body .enemy-hand-panel{top:0 !important;bottom:auto !important}
html body .hand-panel{top:auto !important;bottom:0 !important}
html body .bottom-ui{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  z-index:95 !important;
}
html body .hand-panel .hand,
html body .enemy-hand-panel .enemy-hand{pointer-events:auto !important}

/* Spell cast uses the target creature slot; no dedicated spell slot exists. */
html body .stack-slot{isolation:isolate !important;overflow:visible !important}
html body .slot-spell-cast-layer{
  position:absolute !important;
  z-index:35 !important;
  inset:5px !important;
  pointer-events:none !important;
  transform:translate(10px,-8px) rotate(4deg) scale(.92) !important;
  transform-origin:center !important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.52)) !important;
  animation:btSpellCastStack .48s cubic-bezier(.18,.8,.22,1) both !important;
}
html body .slot-spell-cast-layer .card{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  box-shadow:0 0 0 2px rgba(117,232,255,.5),0 10px 20px rgba(0,0,0,.48) !important;
}
@keyframes btSpellCastStack{
  0%{opacity:0;transform:translate(26px,-24px) rotate(8deg) scale(.7)}
  45%{opacity:1;transform:translate(8px,-7px) rotate(4deg) scale(.96)}
  78%{opacity:1;transform:translate(8px,-7px) rotate(4deg) scale(.96)}
  100%{opacity:0;transform:translate(3px,-2px) rotate(2deg) scale(.86)}
}
html body .slot-spell-layer{display:none !important}
html body .stack-slot.has-stacked-spell,
html body .stack-slot.spell-only-slot{box-shadow:none !important}

/* Left log stays outside the centred board. */
html body .battle-log-panel{
  position:fixed !important;
  left:14px !important;
  right:auto !important;
  top:50dvh !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  z-index:160 !important;
}

@media(max-width:1180px){
  :root{--bt-hand-h:86px}
  html body .enemy-hand-panel,
  html body .hand-panel{width:min(760px,calc(100vw - 190px)) !important}
  html body .battle-log-panel{width:240px !important}
}

@media(max-width:980px){
  html body .battle-log-panel{display:none !important}
  html body .board > .vertical-status-rail:not(.screen-edge-rail),
  html body .board > #verticalStatusRail:not(.screen-edge-rail){
    left:calc(50vw + var(--bt-board-half-w) + 8px) !important;
    width:88px !important;
    min-width:88px !important;
  }
}

@media(max-width:760px), (orientation:portrait){
  :root{
    --bt-hand-h:80px;
    --bt-slot-w:clamp(48px,min(18vw,8.6dvh),70px);
    --bt-pile-w:clamp(36px,10vw,48px);
    --bt-col-gap:5px;
    --bt-row-gap:5px;
    --bt-divider-h:10px;
    --bt-board-pad-x:8px;
    --bt-board-pad-y:10px;
  }
  html body .enemy-hand-panel,
  html body .hand-panel{width:calc(100vw - 56px) !important}
  html body .phase-status-rail.screen-edge-rail,
  html body #phaseStatusRail.screen-edge-rail{
    position:fixed !important;
    left:50vw !important;
    top:calc(var(--bt-hand-h) + 8px) !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
  }
  html body .vertical-status-rail.screen-edge-rail,
  html body #verticalStatusRail.screen-edge-rail{
    position:fixed !important;
    left:auto !important;
    right:4px !important;
    top:50dvh !important;
    bottom:auto !important;
    width:56px !important;
    min-width:56px !important;
    transform:translateY(-50%) !important;
  }
  html body .board-grid.board-grid-4x2 > .board-row-label{display:none !important}
}

@media(max-height:650px){
  :root{
    --bt-hand-h:74px;
    --bt-slot-w:clamp(46px,min(5.8vw,8.15dvh),68px);
    --bt-pile-w:clamp(34px,4vw,46px);
    --bt-board-pad-y:9px;
  }
}

/* v6.7 — definitive deck/discard rail cleanup.
   ID selectors intentionally override legacy pile rules without moving the 4-lane matrix. */
:root{
  --bt-pile-w:clamp(42px,min(3.7vw,6.4dvh),58px);
}

html body #enemyDeckPile,
html body #enemyDiscardPile,
html body #playerDeckPile,
html body #playerDiscardPile{
  position:relative !important;
  width:var(--bt-pile-w) !important;
  min-width:var(--bt-pile-w) !important;
  max-width:var(--bt-pile-w) !important;
  height:calc(var(--bt-pile-w) * 1.34) !important;
  min-height:calc(var(--bt-pile-w) * 1.34) !important;
  max-height:calc(var(--bt-pile-w) * 1.34) !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  aspect-ratio:auto !important;
  align-self:center !important;
  justify-self:center !important;
  overflow:visible !important;
  border-radius:20px !important;
  box-sizing:border-box !important;
  z-index:12 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body #enemyDeckPile::before,
html body #enemyDeckPile::after,
html body #playerDeckPile::before,
html body #playerDeckPile::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  left:0 !important;
  top:0 !important;
  border-radius:20px !important;
  border:1px solid rgba(116,185,255,.25) !important;
  background:#111c35 url('../assets/cards/card_back.png') center/cover no-repeat !important;
  pointer-events:none !important;
}
html body #enemyDeckPile::before,
html body #playerDeckPile::before{
  transform:translate(5px,-5px) rotate(2deg) !important;
  opacity:.55 !important;
  z-index:0 !important;
}
html body #enemyDeckPile::after,
html body #playerDeckPile::after{
  transform:translate(2px,-2px) rotate(-1deg) !important;
  opacity:.78 !important;
  z-index:1 !important;
}

html body #enemyDeckPile > .pile-card,
html body #playerDeckPile > .pile-card,
html body #enemyDiscardPile > .pile-card,
html body #playerDiscardPile > .pile-card{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  z-index:2 !important;
}
html body #enemyDeckPile > .pile-card,
html body #playerDeckPile > .pile-card{
  display:block !important;
  border:1px solid rgba(137,207,255,.46) !important;
  background:#111c35 url('../assets/cards/card_back.png') center/cover no-repeat !important;
  box-shadow:0 9px 18px rgba(0,0,0,.42) !important;
}

html body #enemyDiscardPile,
html body #playerDiscardPile{
  border:1px dashed rgba(137,196,255,.24) !important;
  background:rgba(7,15,29,.24) !important;
}
html body #enemyDiscardPile::before,
html body #enemyDiscardPile::after,
html body #playerDiscardPile::before,
html body #playerDiscardPile::after{
  content:none !important;
  display:none !important;
}
html body #enemyDiscardPile.empty > .pile-card,
html body #playerDiscardPile.empty > .pile-card{
  display:none !important;
}
html body #enemyDiscardPile.has-discard,
html body #playerDiscardPile.has-discard{
  border-color:transparent !important;
  background:transparent !important;
}
html body #enemyDiscardPile.has-discard > .pile-card,
html body #playerDiscardPile.has-discard > .pile-card{
  display:block !important;
  overflow:visible !important;
  border-radius:20px !important;
  box-shadow:0 9px 18px rgba(0,0,0,.42) !important;
}
html body #enemyDiscardPile.has-discard > .pile-card::before,
html body #playerDiscardPile.has-discard > .pile-card::before{
  transform:translate(4px,-4px) rotate(2deg) !important;
}
html body #enemyDiscardPile.has-discard > .pile-card::after,
html body #playerDiscardPile.has-discard > .pile-card::after{
  transform:translate(7px,-7px) rotate(-2deg) !important;
}

html body #enemyDeckPile > strong,
html body #enemyDiscardPile > strong,
html body #playerDeckPile > strong,
html body #playerDiscardPile > strong{
  position:absolute !important;
  left:auto !important;
  right:-8px !important;
  top:-9px !important;
  bottom:auto !important;
  min-width:23px !important;
  height:23px !important;
  padding:0 5px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  border-radius:999px !important;
  border:1px solid rgba(177,219,249,.32) !important;
  background:rgba(5,13,25,.94) !important;
  box-shadow:0 4px 10px rgba(0,0,0,.42) !important;
  color:#edf8ff !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  z-index:8 !important;
}
html body #enemyDeckPile > span,
html body #enemyDiscardPile > span,
html body #playerDeckPile > span,
html body #playerDiscardPile > span{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:calc(100% + 7px) !important;
  bottom:auto !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  color:rgba(164,194,215,.78) !important;
  font-size:7px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  z-index:8 !important;
}

html body .board-grid.board-grid-4x2 > .board-row-label{
  left:calc(var(--bt-board-pad-x) + var(--bt-pile-w) + var(--bt-col-gap) - 12px) !important;
}

@media(max-width:760px), (orientation:portrait){
  :root{--bt-pile-w:clamp(34px,9vw,44px)}
  html body #enemyDeckPile > strong,
  html body #enemyDiscardPile > strong,
  html body #playerDeckPile > strong,
  html body #playerDiscardPile > strong{
    right:-6px !important;
    top:-7px !important;
    min-width:19px !important;
    height:19px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
  html body #enemyDeckPile > span,
  html body #enemyDiscardPile > span,
  html body #playerDeckPile > span,
  html body #playerDiscardPile > span{
    top:calc(100% + 5px) !important;
    font-size:6px !important;
  }
}

/* v6.10 — maximize the battlefield inside the safe space between both hands. */
@media (min-width:761px) and (min-height:651px){
  :root{
    /* The vertical term keeps an ~10px safety gap from the top and bottom hand panels. */
    --bt-slot-w:clamp(60px,min(8vw,calc(20.16dvh - 59px)),136px);
    --bt-pile-w:clamp(44px,min(4vw,6.8dvh),62px);
    --bt-col-gap:clamp(7px,.72vw,12px);
    --bt-row-gap:clamp(7px,1dvh,11px);
    --bt-divider-h:clamp(10px,1.6dvh,18px);
    --bt-board-pad-x:clamp(16px,1.2vw,22px);
    --bt-board-pad-y:clamp(12px,1.5dvh,18px);
  }

  html body .board > .board-grid.board-grid-4x2,
  html body .board-grid.board-grid-4x2{
    max-height:calc(100dvh - var(--bt-hand-h) - var(--bt-hand-h) - 20px) !important;
  }
}

/* v6.12 — current-phase indicator vertically stacked at the left edge of the board. */
html body .board > .phase-status-rail,
html body .board > #phaseStatusRail,
html body .phase-status-rail.screen-edge-rail,
html body #phaseStatusRail.screen-edge-rail{
  position:fixed !important;
  left:calc(50vw - var(--bt-board-half-w) - 12px) !important;
  right:auto !important;
  top:50dvh !important;
  bottom:auto !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-100%,-50%) !important;
  z-index:171 !important;
  pointer-events:none !important;
}

html body .phase-status-rail > .vertical-phase-badge,
html body #phaseText.vertical-phase-badge,
html body #phaseText.phase-badge:not(.vertical-phase-badge){
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:auto !important;
  min-height:288px !important;
  max-height:none !important;
  margin:0 !important;
  padding:22px 12px !important;
  box-sizing:border-box !important;
  writing-mode:vertical-rl !important;
  text-orientation:upright !important;
  transform:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  border-radius:20px !important;
  border:2px solid rgba(117,232,255,.32) !important;
  background:linear-gradient(180deg,rgba(7,22,38,.96),rgba(3,11,22,.94)) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  line-height:1 !important;
  opacity:1 !important;
  text-shadow:none !important;
}

html body #phaseText.vertical-phase-badge::before,
html body #phaseText.phase-badge:not(.vertical-phase-badge)::before{
  content:"YOUR PHASE";
  display:block;
  writing-mode:vertical-rl;
  text-orientation:upright;
  color:#8feaff;
  -webkit-text-fill-color:#8feaff;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.15em;
  word-spacing:.38em;
  text-shadow:0 0 18px rgba(77,211,255,.58);
}

html body #phaseText.vertical-phase-badge.enemy-phase::before,
html body #phaseText.phase-badge.enemy-phase:not(.vertical-phase-badge)::before{
  content:"ENEMY PHASE";
  color:#ff9c91;
  -webkit-text-fill-color:#ff9c91;
  text-shadow:0 0 18px rgba(255,93,78,.52);
}

html body #phaseText.vertical-phase-badge.enemy-phase,
html body #phaseText.phase-badge.enemy-phase:not(.vertical-phase-badge){
  border-color:rgba(255,120,105,.34) !important;
  background:linear-gradient(180deg,rgba(43,13,18,.96),rgba(18,7,12,.94)) !important;
}

html body #phaseText.vertical-phase-badge.player-phase,
html body #phaseText.phase-badge.player-phase:not(.vertical-phase-badge){
  border-color:rgba(117,232,255,.34) !important;
}

/* Keep the log clear of the vertical badge on medium desktop widths. */
@media (max-width:1100px){
  html body .battle-log-panel{display:none !important}
}

@media (max-width:760px), (orientation:portrait){
  html body .board > .phase-status-rail,
  html body .board > #phaseStatusRail,
  html body .phase-status-rail.screen-edge-rail,
  html body #phaseStatusRail.screen-edge-rail{
    left:calc(50vw - var(--bt-board-half-w) - 5px) !important;
    top:50dvh !important;
    transform:translate(-100%,-50%) !important;
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
  }
  html body .phase-status-rail > .vertical-phase-badge,
  html body #phaseText.vertical-phase-badge,
  html body #phaseText.phase-badge:not(.vertical-phase-badge){
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    min-height:248px !important;
    padding:16px 8px !important;
    border-radius:16px !important;
  }
  html body #phaseText.vertical-phase-badge::before,
  html body #phaseText.phase-badge:not(.vertical-phase-badge)::before{
    font-size:18px;
    letter-spacing:.11em;
    word-spacing:.28em;
  }
}

/* Specificity lock: defeat older phase-rail placement rules. */
html body #phaseStatusRail.phase-status-rail,
html body #phaseStatusRail.phase-status-rail:not(.screen-edge-rail),
html body #phaseStatusRail.phase-status-rail.screen-edge-rail{
  position:fixed !important;
  left:calc(50vw - var(--bt-board-half-w) - 12px) !important;
  right:auto !important;
  top:50dvh !important;
  bottom:auto !important;
  width:66px !important;
  min-width:66px !important;
  max-width:66px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-100%,-50%) !important;
}
@media (max-width:760px), (orientation:portrait){
  html body #phaseStatusRail.phase-status-rail,
  html body #phaseStatusRail.phase-status-rail:not(.screen-edge-rail),
  html body #phaseStatusRail.phase-status-rail.screen-edge-rail{
    left:calc(50vw - var(--bt-board-half-w) - 5px) !important;
    top:50dvh !important;
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    transform:translate(-100%,-50%) !important;
  }
}


/* Beast Tactics v6.13 — Active Phase Indicator scaled to 200% of v6.12. */