/* Chesstive v1.50 board-led scale and power-up layout */
:root {
  --chess-board-size: 640px;
  --chess-cell-size: 80px;
  --chess-piece-size: 70px;
  --chess-outline: 3px;
  --chess-shadow-y: 2px;
  --chess-shadow-blur: 3px;
  --chess-small-stroke: 2px;
  --chess-side-stroke: 1.3px;
  --chess-large-stroke: 4px;
  --chess-sound-size: 38px;
  --chess-header-height: 44px;
  --chess-header-font: 26px;
  --chess-header-gap: 12px;
  --chess-cell-gap: 10px;
  --chess-step-inset: 4px;
  --chess-step-badge: 20px;
  --chess-step-font: 12px;
  --chess-card-gap: 10px;
  --chess-card-padding: 8px;
  --chess-card-border: 2px;
  --chess-card-font: 11px;
  --chess-card-small-font: 9px;
  --chess-card-reel: 42px;
  --chess-card-icon: 30px;
  --chess-score-pop-font: 30px;
  --chess-score-caption-size: 8px;
  --chess-cascade-font: 52px;
  --chess-shake: 2px;
  --chess-shelf-height: 560px;
  --chess-outline-inset: -3px;
  --chess-large-glow: 6px;
  --chess-mid-glow: 4px;
  --chess-score-bonus-font: 36px;
  --chess-gameover-width: 460px;
  --chess-gameover-pad-y: 18px;
  --chess-gameover-pad-x: 14px;
  --chess-gameover-gap: 8px;
  --chess-gameover-radius: 10px;
  --chess-gameover-title: 38px;
  --chess-gameover-copy: 19px;
  --chess-gameover-score: 66px;
  --chess-gameover-reason: 16px;
  --chess-gameover-button-pad: 8px;
  --chess-gameover-button-font: 11px;
  --chess-card-radius: 8px;
  --chess-premove-glow-light: 18px;
  --chess-premove-glow-dark: 16px;
  --chess-shake-negative: -2px;
}
body .board-column {
  --board-max-side: calc(100dvh - 190px);
  --board-size-cap: calc(100dvh - 190px);
  display: flex;
  position: relative;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
}
.board-column .board-game-layout {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
}
.board-column .board-game-layout.has-powerups {
  grid-template-columns: minmax(0, 30%) minmax(0, 68%);
  column-gap: 2%;
}
.board-column .board-stage {
  align-self: stretch;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--chess-cell-gap);
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.board-column .board-game-layout.has-powerups .board-stage { grid-column: 2; }
.board-column .board-topline {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--board-size-cap));
  min-height: var(--chess-header-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--chess-sound-size);
}
.board-column .player-summary {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--chess-header-gap);
  color: #f4f0df;
  white-space: nowrap;
}
.board-column .player-summary .summary-box {
  box-sizing: border-box;
  width: auto;
  max-width: 40%;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .18em;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #f4f0df;
  font-size: var(--chess-header-font);
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.board-column .player-summary .username-box {
  max-width: 38%;
  padding: 0;
  color: #f4f0df;
  font-size: var(--chess-header-font);
  font-weight: 850;
  text-overflow: ellipsis;
}
.board-column .player-summary .score-box {
  width: auto;
  margin: 0;
  color: #f4f0df;
  font-size: var(--chess-header-font);
  font-weight: 900;
  transition: color .15s ease, transform .15s ease;
}
.board-column .player-summary .score-box.score-counting {
  color: #e7b84f;
  transform: scale(1.06);
}
.board-column .player-summary .aura-box {
  width: auto;
  color: #e7b84f;
  border: 0;
  font-size: var(--chess-header-font);
}
.board-column .player-summary .aura-label { color: #e7b84f; }
.board-column #sound-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--chess-sound-size);
  height: var(--chess-sound-size);
  margin: 0;
  flex: 0 0 auto;
  transform: none;
}
.board-column .board-wrap {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--board-size-cap));
  height: auto;
  max-width: none;
  max-height: calc(100% - var(--chess-header-height) - var(--chess-cell-gap));
  aspect-ratio: 1 / 1;
  flex: 0 1 auto;
  align-self: center;
  margin: 0 auto;
}
.board-column .board {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-width: var(--chess-outline);
}
.board .square { font-size: var(--chess-piece-size) !important; line-height: 1; overflow: hidden; }
.board .square.selected { outline-width: var(--chess-outline); outline-offset: var(--chess-outline-inset); }
.board .square.capture:after { border-width: var(--chess-large-stroke); }
.board .square.capture-pending:before { border-width: var(--chess-small-stroke); box-shadow: 0 0 var(--chess-shadow-blur) #fff9; }
.board .square.impact:before { border-width: var(--chess-large-stroke); box-shadow: 0 0 var(--chess-large-glow) #fff; }
.board .motion-line { stroke-width: var(--chess-small-stroke); filter: drop-shadow(0 0 var(--chess-shadow-blur) #fff); }
.board .motion-line.side-trail { stroke-width: var(--chess-side-stroke); }
.board .motion-line.capture-trail { stroke-width: var(--chess-large-stroke); filter: drop-shadow(0 0 var(--chess-mid-glow) #fff); }
.board .motion-line.side-trail.capture-trail { stroke-width: var(--chess-small-stroke); }
.board .capture-flight { font-size: var(--chess-piece-size); }
.score-pops .score-pop {
  font-size: var(--chess-score-pop-font);
  text-shadow: 0 var(--chess-shadow-y) var(--chess-shadow-blur) #17231f, 0 0 var(--chess-shadow-blur) #fff;
}
.score-pops .score-pop.king-bonus { font-size: var(--chess-score-bonus-font); }
.score-pops .score-pop small { font-size: var(--chess-score-caption-size); }
.score-total-fly {
  position: absolute;
  font-size: var(--chess-cascade-font);
  text-shadow: 0 var(--chess-shadow-y) var(--chess-large-glow) #000, 0 0 var(--chess-large-glow) #e7b84f;
}
.board-wrap .game-over-card {
  box-sizing: border-box;
  width: min(82%, var(--chess-gameover-width));
  padding: var(--chess-gameover-pad-y) var(--chess-gameover-pad-x);
  gap: var(--chess-gameover-gap);
  border-width: var(--chess-small-stroke);
  border-radius: var(--chess-gameover-radius);
}
.board-wrap .game-over-card strong { font-size: var(--chess-gameover-title); }
.board-wrap .game-over-card span { font-size: var(--chess-gameover-copy); }
.board-wrap .game-over-card .final-score { font-size: var(--chess-gameover-score); }
.board-wrap .game-over-card .game-over-reason { font-size: var(--chess-gameover-reason); }
.board-wrap .game-over-card .game-over-restart {
  padding: var(--chess-gameover-button-pad) var(--chess-gameover-reason);
  font-size: var(--chess-gameover-button-font);
}
.powerup-card-rail {
  position: relative;
  inset: auto;
  transform: none;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-height: var(--chess-shelf-height);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: center;
  align-items: stretch;
  gap: var(--chess-card-gap);
  padding: 0;
  scrollbar-width: thin;
}
.powerup-card-rail[hidden] { display: none !important; }
.active-powerup-cards { display: contents; width: auto; gap: 0; }
.powerup-card-rail .mystery-box,
.powerup-card-rail .powerup-card-item {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: none;
  z-index: auto;
}
.powerup-card-rail .mystery-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: var(--chess-card-gap);
  padding: var(--chess-card-padding);
  border-width: var(--chess-card-border);
  border-radius: var(--chess-gameover-button-pad);
  box-shadow: 0 0 var(--chess-large-glow) #e7b84f66;
  font-size: var(--chess-card-font);
}
.powerup-card-rail .mystery-label { font-size: var(--chess-card-small-font); line-height: 1.1; }
.powerup-card-rail .mystery-reel {
  box-sizing: border-box;
  width: var(--chess-card-reel);
  height: var(--chess-card-reel);
  border-width: var(--chess-card-border);
  font-size: var(--chess-card-reel);
  box-shadow: inset 0 0 var(--chess-shadow-blur) #a294ff55;
}
.powerup-card-rail .mystery-reel-glyph { font-size: .74em; line-height: 1; }
.powerup-card-rail .mystery-card strong { font-size: var(--chess-card-font); line-height: 1.12; }
.powerup-card-rail .mystery-card p { font-size: var(--chess-card-small-font); line-height: 1.25; }
.powerup-card-rail .powerup-icon { font-size: var(--chess-card-icon); }
.powerup-card-rail .powerup-icon .nuke-cloud { fill: #f4f0df; stroke: none; }
.powerup-card-rail .powerup-icon svg {
  width: var(--chess-card-icon);
  height: var(--chess-card-icon);
  stroke-width: var(--chess-small-stroke);
}
.powerup-card-rail .powerup-card .powerup-remaining { font-size: var(--chess-card-small-font); line-height: 1.1; }
.powerup-card-rail .powerup-two-x { font-size: var(--chess-card-icon); line-height: 1; }
.board .premove-step-number {
  top: var(--chess-step-inset);
  right: var(--chess-step-inset);
  min-width: var(--chess-step-badge);
  height: var(--chess-step-badge);
  font-size: var(--chess-step-font);
  box-shadow: 0 1px var(--chess-shadow-blur) #0008;
}
.board .square.premove-origin { outline-width: var(--chess-small-stroke); outline-offset: var(--chess-outline-inset); }
.board .square.light.premove-origin,
.board .square.light.premove-destination { box-shadow: inset 0 0 0 var(--chess-outline) #a294ff, inset 0 0 var(--chess-premove-glow-light) #a294ff88; }
.board .square.dark.premove-origin,
.board .square.dark.premove-destination { box-shadow: inset 0 0 0 var(--chess-outline) #8274e3, inset 0 0 var(--chess-premove-glow-dark) #8274e388; }
.board .piece.king-in-check { display: inline-block; transform-origin: 50% 50%; animation: king-check-spin-retro 1.25s steps(8,end) infinite; }
.piece.king-check-warning { animation: king-check-warning .12s linear 4; }
@keyframes king-check-spin-retro { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes king-check-warning {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(var(--chess-shake-negative)) rotate(-1.4deg); }
  75% { transform: translateX(var(--chess-shake)) rotate(1.4deg); }
}
@keyframes king-fear {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(var(--chess-shake-negative), var(--chess-shake)) rotate(-3deg); }
  40% { transform: translate(var(--chess-shake), var(--chess-shake-negative)) rotate(3deg); }
  60% { transform: translate(var(--chess-shake-negative), 0) rotate(-2deg); }
  80% { transform: translate(var(--chess-shake), var(--chess-shake)) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes mystery-spin { 0% { transform: rotateY(0) scale(.92); } 50% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(360deg) scale(.92); } }
@media (max-width: 850px) {
  .board-column .board-game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: var(--chess-cell-gap); }
  .board-column .board-game-layout.has-powerups { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .board-column .board-stage,
  .board-column .board-game-layout.has-powerups .board-stage { grid-column: 1; grid-row: 1; }
  .powerup-card-rail {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, var(--board-size-cap));
    justify-self: center;
    max-height: min(32vh, var(--chess-shelf-height));
    align-content: start;
  }
  .board-column .board-topline { min-height: var(--chess-header-height); }
  .board-column .board-wrap { width: min(100%, var(--board-size-cap)); max-height: none; }
}
@media (min-width: 851px) and (max-width: 1150px) {
  body .board-column { --board-size-cap: calc(100dvh - 390px); }
  .board-column .board-game-layout.has-powerups {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--chess-cell-gap);
  }
  .board-column .board-game-layout.has-powerups .board-stage { grid-column: 1; grid-row: 1; }
  .board-column .board-game-layout.has-powerups .powerup-card-rail {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, var(--chess-board-size));
    justify-self: center;
    max-height: min(20dvh, var(--chess-shelf-height));
    align-content: start;
  }
}