/* =========================================================
   A1 — CLASSIC START BASE
   BACKGAMMON PUCARÁ
========================================================= */

.classic-start {
  position: relative;

  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;

  overflow: hidden;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));

  color: #f5d37a;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  background:
    linear-gradient(
      180deg,
      rgba(0, 10, 8, 0.82),
      rgba(0, 18, 14, 0.54)
    ),
    radial-gradient(
      circle at 50% 28%,
      rgba(82, 57, 20, 0.20),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #06130d,
      #020403 76%
    );
}


/* =========================================================
   A2 — SOMBRA GENERAL
========================================================= */

.classic-shade {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(31, 91, 69, 0.20),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.10),
      rgba(0, 0, 0, 0.66)
    );

  pointer-events: none;
}
/* =========================================================
   A3 — PANEL CENTRAL
========================================================= */

.classic-panel {
  position: relative;

  z-index: 1;

  width:
    min(
      100%,
      500px
    );

  height: 100%;

  max-height:
    900px;

  margin: auto;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

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

  padding:
    clamp(20px, 4.8vh, 46px)
    clamp(20px, 7vw, 38px);

  border:
    1px solid
    rgba(211, 164, 54, 0.72);

  border-radius:
    26px;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(101, 71, 25, 0.16),
      transparent 36%
    ),
    linear-gradient(
      155deg,
      rgba(4, 24, 18, 0.94),
      rgba(4, 9, 7, 0.97)
    );

  box-shadow:
    0 26px 80px
    rgba(0, 0, 0, 0.78),
    inset 0 0 45px
    rgba(207, 159, 49, 0.055);

  text-align: center;
}
/* =========================================================
   A4 — MARCA
========================================================= */

.classic-brand {
  margin:
    0
    0
    clamp(12px, 2.2vh, 22px);

  font-size:
    clamp(9px, 2.5vw, 13px);

  letter-spacing:
    0.42em;

  color:
    #d4ae52;
}


/* =========================================================
   A5 — TÍTULO BACKGAMMON
========================================================= */

.classic-panel h1 {
  margin: 0;

  font-size:
    clamp(
      40px,
      10vw,
      68px
    );

  line-height:
    0.88;

  color:
    #ffe28d;

  text-shadow:
    0 5px 30px
    #000;

  letter-spacing:
    0.04em;
}


.classic-panel h1 span {
  display: block;

  margin-top:
    0.48em;

  font-size:
    0.32em;

  letter-spacing:
    0.32em;

  color:
    #f8d77b;
}


/* =========================================================
   A6 — SUBTÍTULO
========================================================= */

.classic-subtitle {
  margin:
    clamp(12px, 2.4vh, 22px)
    0
    0;

  font-size:
    clamp(10px, 2.8vw, 14px);

  line-height:
    1.45;

  letter-spacing:
    0.18em;

  color:
    #c9aa60;
}
/* =========================================================
   A7 — FICHAS VS
========================================================= */

.backgammon-start-piece {
  width: 100%;

  margin:
    clamp(20px, 4vh, 36px)
    0
    clamp(16px, 3vh, 28px);

  display: grid;

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

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

  gap:
    clamp(
      14px,
      4vw,
      24px
    );

  padding:
    12px
    16px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(185, 144, 53, 0.45);

  border-radius:
    15px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 162, 50, 0.10),
      rgba(0, 0, 0, 0.22)
    );
}


.backgammon-start-piece img {
  width:
    clamp(
      72px,
      15vw,
      108px
    );

  aspect-ratio:
    1 / 1;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0
      8px
      12px
      rgba(0, 0, 0, 0.65)
    );

  user-select:
    none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   A8 — VS
========================================================= */

.backgammon-start-vs {
  min-width:
    48px;

  min-height:
    48px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(213, 168, 61, 0.72);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(82, 61, 26, 0.96),
      rgba(12, 11, 8, 0.96)
    );

  color:
    #f6d77b;

  font:
    700
    clamp(
      12px,
      3vw,
      16px
    )
    Georgia,
    serif;

  letter-spacing:
    0.08em;

  box-shadow:
    0
    6px
    18px
    rgba(0, 0, 0, 0.50);
}
/* =========================================================
   A9 — ACCIONES
========================================================= */

.classic-actions {
  width: 100%;

  display: grid;

  gap:
    10px;
}


/* =========================================================
   A10 — BOTONES
========================================================= */

.classic-actions button,
.classic-dialog button {
  min-height:
    50px;

  border:
    1px solid
    #b99035;

  border-radius:
    10px;

  background:
    linear-gradient(
      #2a2114,
      #0b0b08
    );

  color:
    #f8d77b;

  padding:
    12px
    16px;

  font:
    700
    clamp(
      12px,
      3.4vw,
      16px
    )
    Georgia,
    serif;

  letter-spacing:
    0.11em;

  cursor:
    pointer;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}


/* =========================================================
   A11 — PRIMER BOTÓN DORADO
========================================================= */

.classic-actions button:first-child {
  background:
    linear-gradient(
      #f6d676,
      #b57a17
    );

  color:
    #231400;

  box-shadow:
    0
    8px
    26px
    rgba(200, 145, 29, 0.24);
}


.classic-actions button:active,
.classic-dialog button:active {
  transform:
    translateY(1px);
}
/* =========================================================
   A12 — MODAL
========================================================= */

.classic-modal {
  position:
    fixed;

  z-index:
    200;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));

  box-sizing:
    border-box;

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

  backdrop-filter:
    blur(7px);
}


/* =========================================================
   MUY IMPORTANTE:
   CONFIGURACIÓN ARRANCA OCULTA
========================================================= */

.classic-modal.hidden {
  display:
    none;
}


/* =========================================================
   A13 — DIALOG
========================================================= */

.classic-dialog {
  position:
    relative;

  width:
    min(
      100%,
      500px
    );

  max-height:
    92dvh;

  overflow:
    auto;

  box-sizing:
    border-box;

  padding:
    24px
    18px;

  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(29, 78, 61, 0.48),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #10261e,
      #050907
    );

  border:
    1px solid
    #c49a3a;

  border-radius:
    18px;

  box-shadow:
    0 25px 90px
    #000,
    0 0 36px
    rgba(219, 171, 59, 0.13);
}


/* =========================================================
   A14 — TÍTULO MODAL
========================================================= */

.classic-dialog h2 {
  margin:
    2px
    58px
    20px
    0;

  font-size:
    clamp(
      25px,
      7vw,
      36px
    );

  letter-spacing:
    0.04em;
}


.classic-dialog h3 {
  margin:
    0
    0
    12px;

  font-size:
    12px;

  letter-spacing:
    0.18em;

  color:
    #e9c461;
}


/* =========================================================
   A15 — CERRAR
========================================================= */

.classic-close {
  position:
    absolute;

  right:
    12px;

  top:
    12px;

  min-width:
    48px
    !important;

  min-height:
    48px
    !important;

  font-size:
    22px
    !important;

  padding:
    7px
    !important;
}
/* =========================================================
   A16 — SECCIONES
========================================================= */

.classic-settings-section {
  padding:
    16px
    0;

  border-top:
    1px solid
    rgba(196, 154, 58, 0.28);
}


.classic-settings-section:first-of-type {
  border-top:
    0;

  padding-top:
    4px;
}


/* =========================================================
   A17 — OPCIONES BACKGAMMON
========================================================= */

.backgammon-option-grid {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    10px;
}


.backgammon-visual-option {
  width:
    100%;

  min-height:
    92px
    !important;

  display:
    grid;

  grid-template-columns:
    auto
    auto
    1fr;

  align-items:
    center;

  gap:
    12px;

  padding:
    10px
    14px
    !important;

  text-align:
    left;

  background:
    linear-gradient(
      90deg,
      rgba(213, 167, 61, 0.08),
      rgba(0, 0, 0, 0.18)
    )
    !important;
}


.backgammon-visual-option.selected {
  outline:
    3px solid
    #f5d16d;

  box-shadow:
    0
    0
    22px
    rgba(245, 209, 109, 0.32);
}


.backgammon-visual-option img {
  width:
    54px;

  height:
    54px;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


.backgammon-visual-option span {
  justify-self:
    start;

  color:
    #f3d47d;

  font-size:
    12px;

  letter-spacing:
    0.12em;
}


/* =========================================================
   A18 — NOTA
========================================================= */

.backgammon-settings-note {
  margin:
    0;

  color:
    rgba(238, 211, 141, 0.68);

  font-size:
    11px;

  line-height:
    1.55;

  letter-spacing:
    0.03em;
}
/* =========================================================
   A19 — ANDROID LANDSCAPE
========================================================= */

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

  .classic-panel {
    width:
      min(
        100%,
        620px
      );

    padding:
      12px
      26px;
  }


  .classic-brand {
    margin-bottom:
      6px;
  }


  .classic-panel h1 {
    font-size:
      clamp(
        34px,
        8vh,
        48px
      );
  }


  .classic-subtitle {
    margin-top:
      6px;

    font-size:
      9px;
  }


  .backgammon-start-piece {
    margin:
      10px
      0;

    gap:
      14px;

    padding:
      7px
      12px;
  }


  .backgammon-start-piece img {
    width:
      clamp(
        56px,
        12vh,
        78px
      );
  }


  .backgammon-start-vs {
    min-width:
      38px;

    min-height:
      38px;

    font-size:
      10px;
  }


  .classic-actions {
    gap:
      6px;
  }


  .classic-actions button {
    min-height:
      38px;

    padding:
      6px
      10px;

    font-size:
      10px;
  }


  .classic-dialog {
    padding-top:
      18px;
  }


  .classic-settings-section {
    padding:
      10px
      0;
  }


  .backgammon-visual-option {
    min-height:
      72px
      !important;
  }


  .backgammon-visual-option img {
    width:
      42px;

    height:
      42px;
  }

}
/* =========================================================
   A33 — AUDIO / LEGALES
========================================================= */

.backgammon-setting-row {
  display: flex;

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

  gap: 12px;

  padding:
    8px
    0;

  color:
    #e8c96f;

  font-size:
    11px;

  letter-spacing:
    0.12em;
}


.backgammon-toggle {
  min-height:
    40px
    !important;

  padding:
    7px
    12px
    !important;

  opacity:
    0.55;
}


.backgammon-legal-grid {
  display: grid;

  grid-template-columns:
    1fr;

  gap:
    8px;
}


.backgammon-legal-grid button {
  min-height:
    44px;

  padding:
    9px
    12px;
}


/* =========================================================
   MODAL LEGAL
========================================================= */

.backgammon-legal-dialog {
  width:
    min(
      92vw,
      760px
    );

  height:
    min(
      88dvh,
      780px
    );

  display: grid;

  grid-template-rows:
    auto
    1fr;

  overflow: hidden;

  padding:
    20px;
}


.backgammon-legal-dialog h2 {
  margin:
    0
    58px
    14px
    0;
}


.backgammon-legal-frame {
  width:
    100%;

  height:
    100%;

  border:
    0;

  border-radius:
    10px;

  background:
    #ffffff;
}
/* =========================================================
   A43 — MÚSICA / VOLUMEN
========================================================= */

.backgammon-music-control {
  display: grid;

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

  align-items: center;

  gap:
    12px;
}


.backgammon-volume-control {
  display: grid;

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

  align-items: center;

  gap:
    8px;

  min-width:
    220px;
}


.backgammon-volume-label {
  font-size:
    9px;

  letter-spacing:
    0.10em;

  color:
    #c9aa60;
}


.backgammon-volume-slider {
  width:
    100%;

  accent-color:
    #d9aa39;

  cursor:
    pointer;
}


.backgammon-volume-value {
  min-width:
    38px;

  text-align:
    right;

  font-size:
    10px;

  color:
    #f3d47d;
}


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

  .backgammon-music-control {
    gap:
      8px;
  }


  .backgammon-volume-control {
    min-width:
      180px;

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

    gap:
      6px;
  }

}