/* =========================================================
   A11 — STYLES
   DAMAS PUCARÁ
========================================================= */


/* =========================================================
   A11.1 — BASE
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}


body {
  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #11251b 0%,
      #07120d 55%,
      #020705 100%
    );

  color:
    #f0df9a;

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

  -webkit-user-select:
    none;

  user-select:
    none;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}


button {
  font: inherit;
}


/* =========================================================
   A11.2 — ROOT
========================================================= */

#game-root {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;

  overflow: hidden;
}


/* =========================================================
   A11.3 — SHELL GENERAL
========================================================= */

.checkers-shell {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;

  overflow: hidden;
}


/* =========================================================
   A11.4 — HEADER
========================================================= */

.checkers-header {
  position: relative;

  z-index: 20;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(120px, 1fr)
    auto
    minmax(120px, 1fr);

  align-items: center;

  gap: 14px;

  padding:
    10px 18px;

  border-bottom:
    1px solid rgba(212, 175, 55, 0.35);

  background:
    rgba(2, 10, 7, 0.88);

  backdrop-filter:
    blur(8px);
}


.checkers-header__title {
  color:
    #e7c85f;

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  text-align:
    center;

  white-space:
    nowrap;
}


.checkers-header__button {
  min-height: 36px;

  padding:
    7px 14px;

  border:
    1px solid rgba(212, 175, 55, 0.7);

  border-radius:
    9px;

  background:
    linear-gradient(
      180deg,
      rgba(31, 31, 27, 0.96),
      rgba(6, 11, 8, 0.96)
    );

  color:
    #e9cf72;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  cursor:
    pointer;
}


.checkers-header__button:first-child {
  justify-self:
    start;
}


.checkers-header__button:last-child {
  justify-self:
    end;
}


.checkers-header__button:active {
  transform:
    translateY(1px);
}


/* =========================================================
   A11.5 — HUD
========================================================= */

.checkers-hud {
  position: relative;

  z-index: 15;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 18px;

  min-height: 38px;

  padding:
    5px 18px;

  border-bottom:
    1px solid rgba(212, 175, 55, 0.16);

  background:
    rgba(3, 17, 11, 0.42);
}


.checkers-hud__player {
  display: flex;

  align-items: center;

  gap: 8px;
}


.checkers-hud__player:last-child {
  justify-content:
    flex-end;
}


.checkers-hud__label {
  color:
    rgba(239, 218, 145, 0.72);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.08em;
}


.checkers-hud__count {
  min-width: 22px;

  color:
    #f1d66f;

  font-size:
    15px;

  text-align:
    center;
}


.checkers-hud__turn {
  min-width: 150px;

  color:
    #e8ce73;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-align:
    center;
}


/* =========================================================
   A11.6 — ÁREA DE JUEGO
========================================================= */

.checkers-table {
  position: relative;

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

  display: flex;

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

   padding:
    2px 6px;

  overflow: hidden;
}


/* =========================================================
   A11.7 — TABLERO

   IMPORTANTE:
   usamos la imagen completa del tablero como fondo.

   La grilla lógica se coloca encima mediante inset.
   Este valor puede requerir un pequeño ajuste visual
   según el marco exacto del WEBP.
========================================================= */
.checkers-board {
  position: relative;

  width:
    min(
      90vh,
      90vw,
      900px
    );

  aspect-ratio:
    1 / 1;

  flex:
    0 0 auto;

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    contain;

  filter:
    drop-shadow(
      0 10px 26px rgba(0, 0, 0, 0.48)
    );
}

/* =========================================================
   A11.8 — GRILLA LÓGICA

   PRIMER AJUSTE:
   dejamos aproximadamente 8% de margen por cada lado
   para compensar el marco del tablero.

   Si al abrirlo vemos que las fichas caen apenas corridas,
   solamente ajustamos este inset.
========================================================= */

.checkers-board__grid {
  position: absolute;

  inset:
    24%;

  display: grid;

  grid-template-columns:
    repeat(8, 1fr);

  grid-template-rows:
    repeat(8, 1fr);

  overflow: visible;
}


/* =========================================================
   A11.9 — CASILLAS
========================================================= */

.checkers-square {
  position: relative;

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

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  appearance:
    none;

  -webkit-appearance:
    none;

  display: flex;

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

  cursor:
    default;
}


.checkers-square--playable {
  cursor:
    pointer;
}


.checkers-square--blocked {
  pointer-events:
    none;
}


/* =========================================================
   A11.10 — FICHAS
========================================================= */

.checkers-piece {
  position: relative;

  z-index: 3;

  width:
    94%;

  height:
    94%;

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  pointer-events:
    none;

  -webkit-user-drag:
    none;

  user-select:
    none;

  filter:
    drop-shadow(
      0 3px 4px rgba(0, 0, 0, 0.42)
    );

  transition:
    transform 120ms ease,
    filter 120ms ease;
}


.checkers-piece--king {
  width:
    96%;

  height:
    96%;
}


/* =========================================================
   A11.11 — FICHA SELECCIONADA
========================================================= */

.checkers-square.is-selected
.checkers-piece {
  transform:
    scale(1.08)
    translateY(-2px);

  filter:
    drop-shadow(
      0 0 7px rgba(245, 207, 74, 0.95)
    )
    drop-shadow(
      0 4px 5px rgba(0, 0, 0, 0.55)
    );
}


.checkers-square.is-selected::after {
  content: "";

  position: absolute;

  inset:
    10%;

  z-index: 2;

  border:
    2px solid rgba(243, 211, 106, 0.95);

  border-radius:
    50%;

  box-shadow:
    0 0 10px rgba(243, 211, 106, 0.72);

  pointer-events:
    none;
}


/* =========================================================
   A11.12 — DESTINO LEGAL
========================================================= */

.checkers-square.is-legal-destination::before {
  content: "";

  position: absolute;

  z-index: 5;

  width:
    20%;

  aspect-ratio:
    1 / 1;

  border-radius:
    50%;

  background:
    rgba(244, 210, 92, 0.92);

  box-shadow:
    0 0 8px rgba(244, 210, 92, 0.75);

  pointer-events:
    none;
}


/* =========================================================
   A11.13 — DESTINO DE CAPTURA
========================================================= */

.checkers-square.is-capture-destination::before {
  width:
    32%;

  background:
    rgba(227, 92, 55, 0.95);

  box-shadow:
    0 0 10px rgba(227, 92, 55, 0.82);
}


/* =========================================================
   A11.14 — FICHA FORZADA
========================================================= */

.checkers-square.is-forced
.checkers-piece {
  animation:
    forcedCheckerPulse
    820ms
    ease-in-out
    infinite
    alternate;
}


@keyframes forcedCheckerPulse {

  from {
    transform:
      scale(1);

    filter:
      drop-shadow(
        0 0 4px rgba(244, 210, 92, 0.45)
      );
  }

  to {
    transform:
      scale(1.08);

    filter:
      drop-shadow(
        0 0 10px rgba(244, 210, 92, 0.95)
      );
  }

}


/* =========================================================
   A11.15 — MENSAJE
========================================================= */

.checkers-message {
  position: relative;

  z-index: 20;

  min-height: 36px;

  display: flex;

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

  padding:
    7px 16px;

  border-top:
    1px solid rgba(212, 175, 55, 0.20);

  background:
    rgba(2, 11, 7, 0.80);

  color:
    #dfcd8d;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-align:
    center;
}


.checkers-message--normal {
  color:
    #dfcd8d;
}


.checkers-message--success {
  color:
    #f1d066;

  text-shadow:
    0 0 9px rgba(241, 208, 102, 0.32);
}


.checkers-message--warning {
  color:
    #efb078;
}


/* =========================================================
   A11.16 — ERROR FATAL
========================================================= */

.fatal-error {
  width:
    min(520px, calc(100% - 30px));

  margin:
    60px auto;

  padding:
    24px;

  border:
    1px solid rgba(212, 175, 55, 0.6);

  border-radius:
    14px;

  background:
    rgba(3, 16, 10, 0.94);

  text-align:
    center;
}


.fatal-error__title {
  margin-bottom:
    12px;

  color:
    #e8cc69;

  font-size:
    20px;

  font-weight:
    800;
}


.fatal-error__message {
  color:
    #d4c9a7;

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================================================
   A11.17 — PC / PANTALLAS ALTAS
========================================================= */

@media
  (min-height: 800px) {

  .checkers-board {
    width:
      min(
        76vh,
        82vw,
        780px
      );
  }

}


/* =========================================================
   A11.18 — LANDSCAPE COMPACTO
   Android / teléfonos horizontales
========================================================= */

@media
  (max-height: 650px)
  and
  (orientation: landscape) {

  .checkers-shell {
    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto;
  }


  .checkers-header {
    min-height:
      34px;

    padding:
      4px 10px;

    gap:
      8px;
  }


  .checkers-header__title {
    font-size:
      13px;
  }


  .checkers-header__button {
    min-height:
      28px;

    padding:
      4px 9px;

    border-radius:
      7px;

    font-size:
      9px;
  }


  .checkers-hud {
    min-height:
      28px;

    padding:
      2px 12px;

    gap:
      10px;
  }


  .checkers-hud__label {
    font-size:
      8px;
  }


  .checkers-hud__count {
    font-size:
      12px;
  }


  .checkers-hud__turn {
    min-width:
      120px;

    font-size:
      9px;
  }


  .checkers-table {
    padding:
      3px 8px;
  }


 .checkers-board {
  width:
    min(
      calc(100dvh - 90px),
      84vw,
      720px
    );
}


  .checkers-message {
    min-height:
      28px;

    padding:
      3px 10px;

    font-size:
      9px;
  }

}


/* =========================================================
   A11.19 — PANTALLAS MUY BAJAS
========================================================= */

@media
  (max-height: 500px)
  and
  (orientation: landscape) {

  .checkers-header {
    padding:
      2px 8px;
  }


  .checkers-header__title {
    font-size:
      11px;
  }


  .checkers-header__button {
    min-height:
      24px;

    padding:
      2px 7px;

    font-size:
      8px;
  }


  .checkers-hud {
    min-height:
      24px;
  }


  .checkers-hud__turn {
    font-size:
      8px;
  }


  .checkers-board {
    width:
      min(
        calc(100dvh - 88px),
        74vw,
        520px
      );
  }


  .checkers-message {
    min-height:
      24px;

    font-size:
      8px;
  }

}


/* =========================================================
   A11.20 — PORTRAIT

   No bloqueamos todavía la orientación.
   Permitimos probar el motor también vertical.
========================================================= */

@media
  (orientation: portrait) {

  .checkers-header {
    grid-template-columns:
      auto
      1fr
      auto;

    padding:
      8px;
  }


  .checkers-header__title {
    font-size:
      13px;
  }


  .checkers-header__button {
    min-height:
      30px;

    padding:
      5px 8px;

    font-size:
      9px;
  }


  .checkers-hud {
    padding:
      4px 10px;

    gap:
      6px;
  }


  .checkers-hud__turn {
    min-width:
      100px;

    font-size:
      9px;
  }


  .checkers-board {
    width:
      min(
        94vw,
        70vh
      );
  }

}
/* =========================================================
   B6 — CONFIGURACIÓN
========================================================= */


/* =========================================================
   B6.1 — ACCIONES HEADER
========================================================= */

.checkers-header__actions {
  display: flex;

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

  gap: 8px;
}


/* =========================================================
   B6.2 — OVERLAY
========================================================= */

.checkers-settings {
  position: fixed;

  inset: 0;

  z-index: 200;

  display: none;

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

  padding: 20px;

  background:
    rgba(0, 0, 0, 0.68);

  backdrop-filter:
    blur(5px);
}


.checkers-settings.is-visible {
  display: flex;
}


/* =========================================================
   B6.3 — PANEL
========================================================= */

.checkers-settings__panel {
  width:
    min(
      430px,
      calc(100vw - 30px)
    );

  padding:
    24px;

  border:
    1px solid rgba(212, 175, 55, 0.72);

  border-radius:
    16px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 23, 16, 0.98),
      rgba(2, 10, 7, 0.98)
    );

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   B6.4 — TÍTULOS
========================================================= */

.checkers-settings__title {
  color:
    #f1d36c;

  font-size:
    23px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-align:
    center;
}


.checkers-settings__subtitle {
  margin-top:
    22px;

  margin-bottom:
    10px;

  color:
    rgba(240, 220, 152, 0.72);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.12em;
}


/* =========================================================
   B6.5 — VARIANTES
========================================================= */

.checkers-settings__variants {
  display: grid;

  gap: 10px;
}


.checkers-settings__variant {
  width: 100%;

  display: grid;

  grid-template-columns:
    22px
    1fr;

  align-items: center;

  gap: 12px;

  padding:
    13px 14px;

  border:
    1px solid rgba(212, 175, 55, 0.25);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, 0.025);

  color:
    #e8d798;

  text-align:
    left;

  cursor:
    pointer;
}


.checkers-settings__variant strong {
  display: block;

  font-size:
    12px;

  letter-spacing:
    0.06em;
}


.checkers-settings__variant small {
  display: block;

  margin-top:
    3px;

  color:
    rgba(232, 215, 152, 0.62);

  font-size:
    10px;
}


/* =========================================================
   B6.6 — RADIO
========================================================= */

.checkers-settings__radio {
  width: 16px;
  height: 16px;

  border:
    1px solid rgba(212, 175, 55, 0.72);

  border-radius:
    50%;

  box-shadow:
    inset 0 0 0 3px rgba(3, 15, 10, 1);
}


.checkers-settings__variant.is-active {
  border-color:
    rgba(243, 211, 106, 0.92);

  background:
    rgba(212, 175, 55, 0.09);
}


.checkers-settings__variant.is-active
.checkers-settings__radio {
  background:
    #e8c85f;

  box-shadow:
    inset 0 0 0 3px rgba(3, 15, 10, 1),
    0 0 8px rgba(232, 200, 95, 0.58);
}


/* =========================================================
   B6.7 — CERRAR
========================================================= */

.checkers-settings__close {
  width: 100%;

  margin-top:
    20px;

  padding:
    10px 16px;

  border:
    1px solid rgba(212, 175, 55, 0.65);

  border-radius:
    9px;

  background:
    rgba(8, 14, 10, 0.95);

  color:
    #e9cf72;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  cursor:
    pointer;
}


/* =========================================================
   B6.8 — LANDSCAPE BAJO
========================================================= */

@media
  (max-height: 650px)
  and
  (orientation: landscape) {

  .checkers-settings__panel {
    width:
      min(
        390px,
        calc(100vw - 24px)
      );

    padding:
      16px;
  }


  .checkers-settings__title {
    font-size:
      18px;
  }


  .checkers-settings__subtitle {
    margin-top:
      12px;
  }


  .checkers-settings__variant {
    padding:
      8px 10px;
  }


  .checkers-settings__close {
    margin-top:
      12px;

    padding:
      7px 12px;
  }

}
/* =========================================================
   FICHAS CAPTURADAS — DAMAS PUCARÁ
========================================================= */

.checkers-board-section {
  position: relative;

  display: grid;

  grid-template-rows:
    34px
    auto
    34px;

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

  gap: 4px;
}


/* =========================================================
   CARRILES DE CAPTURADAS
========================================================= */

.checkers-captured {
  width:
    min(
      560px,
      78vw
    );

  height: 34px;

  display: flex;

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

  gap: 4px;

  padding:
    2px 8px;

  box-sizing: border-box;

  overflow: hidden;

  border:
    1px solid rgba(212, 175, 55, 0.24);

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 17, 11, 0.72),
      rgba(1, 8, 5, 0.72)
    );

  box-shadow:
    inset 0 0 12px
    rgba(0, 0, 0, 0.30);
}


/* =========================================================
   ARRIBA
========================================================= */

.checkers-captured--top {
  align-self: end;

  margin-bottom: 2px;
}


/* =========================================================
   ABAJO
========================================================= */

.checkers-captured--bottom {
  align-self: start;

  margin-top: 2px;
}

/* =========================================================
   FICHAS CAPTURADAS — POSICIÓN FIJA AL TABLERO
========================================================= */

.checkers-board-section {
  position: relative;

  display: flex;

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

  width: fit-content;
  height: fit-content;
}


/* =========================================================
   CARRIL GENERAL
========================================================= */

.checkers-captured {
  position: absolute;

  left: 50%;

  z-index: 20;

  width:
    min(
      520px,
      76vw
    );

  height: 34px;

  transform:
    translateX(-50%);

  display: flex;

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

  gap: 4px;

  padding:
    3px 8px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(212, 175, 55, 0.32);

  border-radius:
    10px;

  background:
    rgba(2, 12, 8, 0.88);

  overflow: visible;

  pointer-events: none;
}


/* =========================================================
   NEGRAS COMIDAS — ARRIBA
========================================================= */

.checkers-captured--top {
  top: -42px;
}


/* =========================================================
   BLANCAS COMIDAS — ABAJO
========================================================= */

.checkers-captured--bottom {
  bottom: -42px;
}


/* =========================================================
   FICHA CAPTURADA
========================================================= */

.checkers-captured-piece {
  width: 27px;
  height: 27px;

  flex:
    0 0 27px;

  display: grid;

  place-items: center;
}


.checkers-captured-piece__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;

  -webkit-user-select: none;
  -webkit-user-drag: none;

  pointer-events: none;

  filter:
    drop-shadow(
      0
      2px
      4px
      rgba(0, 0, 0, 0.65)
    );
}


/* =========================================================
   ANDROID LANDSCAPE
========================================================= */

@media
(max-height: 650px)
and
(orientation: landscape) {

  .checkers-captured {
    width:
      min(
        460px,
        70vw
      );

    height: 28px;

    gap: 3px;

    padding:
      2px 6px;
  }


  .checkers-captured--top {
    top: -32px;
  }


  .checkers-captured--bottom {
    bottom: -32px;
  }


  .checkers-captured-piece {
    width: 21px;
    height: 21px;

    flex:
      0 0 21px;
  }

}

/* =========================================================
   CORRECCION — FICHAS CAPTURADAS VISIBLES

   Los carriles permanecen dentro del flujo para que el
   contenedor del tablero no recorte las fichas capturadas.
========================================================= */

.checkers-board-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkers-captured {
  position: absolute;
  left: 50%;
  z-index: 30;
  width: calc(100% - 24px);
  height: 36px;
  transform: translateX(-50%);
  background: rgba(2, 12, 8, 0.94);
  border-color: rgba(212, 175, 55, 0.62);
}

.checkers-captured--top {
  /* El WEBP 3:2 deja 1/6 de espacio vertical en el tablero cuadrado. */
  top: calc(16.6667% - 36px);
  bottom: auto;
  margin: 0;
}

.checkers-captured--bottom {
  top: auto;
  bottom: calc(16.6667% - 36px);
  margin: 0;
}

.checkers-table {
  overflow: visible;
}

/* FINAL DE PARTIDA */
.checkers-game-over {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(7px);
}
.checkers-game-over.is-visible { display: grid; }
.checkers-game-over__panel {
  width: min(420px, calc(100vw - 32px));
  padding: 30px 26px;
  box-sizing: border-box;
  border: 1px solid rgba(241,207,95,.85);
  border-radius: 18px;
  background: linear-gradient(180deg,#0a2117,#020a07);
  box-shadow: 0 22px 70px rgba(0,0,0,.72), inset 0 0 30px rgba(212,175,55,.06);
  color: #ead798;
  text-align: center;
}
.checkers-game-over__eyebrow { color: rgba(234,215,152,.68); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.checkers-game-over h2 { margin: 10px 0 8px; color: #f1d36c; font-size: 30px; letter-spacing: .06em; }
.checkers-game-over p { margin: 0 0 22px; color: rgba(234,215,152,.82); font-size: 13px; }
#game-over-restart,
#game-over-menu {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}
#game-over-restart { border: 1px solid #f1cf5f; background: linear-gradient(180deg,#d5a936,#8d6516); color: #090804; }
#game-over-menu { margin-top: 9px; border: 1px solid rgba(212,175,55,.52); background: #07110d; color: #e9cf72; }

/* CONFIGURACIÓN COMPLETA */
.checkers-settings__panel {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.checkers-settings__audio {
  display: grid;
  gap: 8px;
}

.checkers-settings__toggle,
.checkers-settings__volume {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 9px;
  color: #e8d798;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.checkers-settings__toggle input {
  position: absolute;
  opacity: 0;
}

.checkers-settings__switch {
  position: relative;
  width: 38px;
  height: 21px;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 20px;
  background: #07110d;
}

.checkers-settings__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8e8158;
  transition: transform .18s ease;
}

.checkers-settings__toggle input:checked + .checkers-settings__switch::after {
  transform: translateX(17px);
  background: #f1d36c;
}

.checkers-settings__volume input { width: 150px; accent-color: #d4af37; }
.checkers-settings__volume output { width: 38px; text-align: right; color: #f1d36c; }

.checkers-settings__legal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.checkers-settings__legal a {
  padding: 9px 5px;
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 8px;
  color: #e9cf72;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

@media (max-height: 650px) and (orientation: landscape) {
  .checkers-settings__panel { width: min(620px, calc(100vw - 24px)); }
  .checkers-settings__variants { grid-template-columns: 1fr 1fr; }
  .checkers-settings__subtitle { margin-top: 8px; margin-bottom: 5px; }
  .checkers-settings__audio { grid-template-columns: 1fr 1fr; }
  .checkers-settings__volume { grid-column: 1 / -1; }
}
/* CODEX BOARD WIDTH BOOST */
.checkers-table {
  padding-left: 0;
  padding-right: 0;
}

.checkers-board {
  width: min(calc(100vw - 2px), calc(100dvh - 124px), 900px);
  background-size: 138% auto;
  background-position: center center;
  overflow: visible;
}

.checkers-board__grid {
  inset: 15% 11.5% 14% 11.5%;
}

.checkers-captured {
  width: min(calc(100vw - 6px), 720px);
  min-height: 34px;
  height: auto;
  max-height: 64px;
  flex-wrap: wrap;
  align-content: center;
  row-gap: 1px;
  column-gap: 3px;
  padding: 2px 6px;
  overflow: hidden;
}

.checkers-captured-piece {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

@media (orientation: portrait) {
  .checkers-table {
    padding-left: 0;
    padding-right: 0;
  }

  .checkers-board {
    width: min(calc(100vw - 2px), calc(100dvh - 128px));
    background-size: 140% auto;
  }

  .checkers-board__grid {
    inset: 14.8% 10.8% 13.8% 10.8%;
  }

  .checkers-captured {
    width: min(calc(100vw - 6px), 720px);
  }
}
/* CODEX CAPTURE LANES OFFSET */
.checkers-captured--top {
  top: -56px;
}

.checkers-captured--bottom {
  bottom: -56px;
}

@media (orientation: portrait) {
  .checkers-captured--top {
    top: -58px;
  }

  .checkers-captured--bottom {
    bottom: -58px;
  }
}