/* =========================================================
   C5 — START SCREEN
   DAMAS PUCARÁ
========================================================= */

.start-screen {
  position: relative;

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

  display: grid;
  place-items: center;

  padding: 18px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(212, 175, 55, 0.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #07150f,
      #020403 72%
    );
}


/* =========================================================
   C5.1 — GLOW
========================================================= */

.start-screen__glow {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      82vw,
      620px
    );

  aspect-ratio:
    1 / 1;

  transform:
    translate(-50%, -50%);

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

  border-radius: 50%;

  box-shadow:
    0 0 120px
    rgba(212, 175, 55, 0.08),

    inset 0 0 90px
    rgba(212, 175, 55, 0.05);

  pointer-events: none;
}


/* =========================================================
   C5.2 — TARJETA PRINCIPAL
========================================================= */

.start-card {
  position: relative;

  z-index: 2;

  width:
    min(
      500px,
      calc(100vw - 28px)
    );

  box-sizing: border-box;

  max-height: calc(100dvh - 24px);
  overflow-y: auto;

  padding:
    22px 24px;

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

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(8, 24, 17, 0.98),
      rgba(2, 10, 7, 0.98)
    );

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.60);

  animation:
    start-card-arrive
    500ms
    ease-out
    both;
}


/* =========================================================
   C5.3 — MARCA
========================================================= */

.start-card__brand {
  display: grid;

  grid-template-columns:
    108px
    1fr;

  align-items: center;

  gap: 18px;
}


/* =========================================================
   C5.4 — ICONO
========================================================= */

.start-card__icon {
  display: block;

  width: 108px;
  height: 108px;

  object-fit: contain;

  user-select: none;

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

  pointer-events: none;

  filter:
    drop-shadow(
      0
      10px
      18px
      rgba(0, 0, 0, 0.70)
    )
    drop-shadow(
      0
      0
      12px
      rgba(212, 175, 55, 0.16)
    );
}


/* =========================================================
   C5.5 — TEXTO DE MARCA
========================================================= */

.start-card__brand-text {
  min-width: 0;
}


.start-card__brand-text > span {
  display: block;

  color:
    #c79b3e;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.34em;
}


.start-card__brand-text h1 {
  margin:
    4px
    0
    0;

  color:
    #f4d778;

  font-size:
    clamp(
      34px,
      7vw,
      52px
    );

  line-height:
    1;

  letter-spacing:
    0.09em;

  text-shadow:
    0 5px 16px
    rgba(0, 0, 0, 0.85);
}


.start-card__brand-text small {
  display: block;

  margin-top:
    8px;

  color:
    #b98a34;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.18em;
}


/* =========================================================
   C5.6 — DIVISOR
========================================================= */

.start-card__divider {
  width: 100%;
  height: 1px;

  margin:
    18px
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.55),
      transparent
    );
}


/* =========================================================
   C5.7 — CONFIGURACIÓN
========================================================= */

.start-settings h2 {
  margin: 0;

  color:
    #e9cd70;

  font-size:
    15px;

  letter-spacing:
    0.12em;

  text-align: center;
}


.start-settings__label {
  margin:
    16px
    0
    8px;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.20em;
}


/* =========================================================
   C5.8 — VARIANTES
========================================================= */

.start-variants {
  display: grid;

  gap: 9px;
}


.start-variant {
  width: 100%;

  display: grid;

  grid-template-columns:
    22px
    1fr;

  align-items: center;

  gap: 12px;

  padding:
    11px
    13px;

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

  border-radius:
    10px;

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

  color:
    #e6d395;

  text-align:
    left;

  cursor: pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}


.start-variant:hover {
  border-color:
    rgba(212, 175, 55, 0.60);

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


.start-variant:active {
  transform:
    scale(0.99);
}


/* =========================================================
   C5.9 — INDICADOR
========================================================= */

.start-variant__indicator {
  width: 16px;
  height: 16px;

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

  border-radius: 50%;

  box-sizing: border-box;

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


.start-variant.is-active {
  border-color:
    rgba(243, 211, 106, 0.90);

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


.start-variant.is-active
.start-variant__indicator {
  background:
    #e5c65d;

  box-shadow:
    inset 0 0 0 3px
    rgba(4, 14, 10, 1),

    0 0 8px
    rgba(229, 198, 93, 0.55);
}


/* =========================================================
   C5.10 — TEXTO VARIANTE
========================================================= */

.start-variant__content {
  min-width: 0;
}


.start-variant__content strong {
  display: block;

  color:
    #ead57f;

  font-size:
    11px;

  letter-spacing:
    0.06em;
}


.start-variant__content small {
  display: block;

  margin-top:
    3px;

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

  font-size:
    9px;

  line-height:
    1.25;
}


/* =========================================================
   C5.11 — JUGAR
========================================================= */

.start-play-button {
  width: 100%;

  margin-top:
    20px;

  padding:
    12px
    16px;

  border:
    1px solid
    rgba(241, 207, 95, 0.84);

  border-radius:
    10px;

  background:
    linear-gradient(
      180deg,
      #d5a936,
      #8d6516
    );

  color:
    #090804;

  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  cursor: pointer;

  box-shadow:
    0 8px 18px
    rgba(0, 0, 0, 0.30);

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


.start-play-button:hover {
  filter:
    brightness(1.08);
}


.start-play-button:active {
  transform:
    scale(0.985);
}


/* =========================================================
   C5.12 — VOLVER
========================================================= */

.start-back-button {
  width: 100%;

  margin-top:
    9px;

  padding:
    9px
    14px;

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

  border-radius:
    9px;

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

  color:
    #c7a54f;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  cursor: pointer;
}


/* =========================================================
   C5.13 — ANIMACIÓN
========================================================= */

@keyframes start-card-arrive {

  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      none;
  }

}


/* =========================================================
   C5.14 — LANDSCAPE / ANDROID
========================================================= */

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

  .start-screen {
    padding:
      8px 12px;
  }


  .start-card {
    width:
      min(
        620px,
        calc(100vw - 24px)
      );

    padding:
      10px 16px;
  }


  .start-card__brand {
    grid-template-columns:
      78px
      1fr;

    gap:
      12px;
  }


  .start-card__icon {
    width:
      78px;

    height:
      78px;
  }


  .start-card__brand-text h1 {
    font-size:
      clamp(
        28px,
        5vw,
        40px
      );
  }


  .start-card__brand-text > span {
    font-size:
      8px;
  }


  .start-card__brand-text small {
    margin-top:
      4px;

    font-size:
      8px;
  }


  .start-card__divider {
    margin:
      8px
      0;
  }


  .start-settings h2 {
    font-size:
      12px;
  }


  .start-settings__label {
    margin:
      7px
      0
      5px;

    font-size:
      8px;
  }


  .start-variants {
    grid-template-columns:
      1fr
      1fr;

    gap:
      7px;
  }


  .start-variant {
    padding:
      7px 9px;
  }


  .start-variant__content strong {
    font-size:
      9px;
  }


  .start-variant__content small {
    font-size:
      7px;
  }


  .start-play-button {
    margin-top:
      9px;

    padding:
      8px 14px;

    font-size:
      11px;
  }


  .start-back-button {
    margin-top:
      5px;

    padding:
      6px 12px;

    font-size:
      9px;
  }

}

/* AUDIO Y LEGALES — sincronizados con la configuración del juego */
.start-audio { display: grid; gap: 7px; }
.start-audio__toggle,
.start-audio__volume {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 9px;
  color: #e8d798;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  box-sizing: border-box;
}
.start-audio__toggle input { position: absolute; opacity: 0; }
.start-audio__switch {
  position: relative;
  width: 38px;
  height: 21px;
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 20px;
  background: #07110d;
}
.start-audio__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8e8158;
  transition: transform .18s ease;
}
.start-audio__toggle input:checked + .start-audio__switch::after {
  transform: translateX(17px);
  background: #f1d36c;
}
.start-audio__volume input { width: 150px; accent-color: #d4af37; }
.start-audio__volume output { width: 38px; text-align: right; color: #f1d36c; }
.start-legal { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.start-legal a {
  padding: 8px 4px;
  border: 1px solid rgba(212,175,55,.4);
  border-radius: 8px;
  color: #e9cf72;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

@media (max-height: 650px) and (orientation: landscape) {
  .start-card { width: min(720px, calc(100vw - 24px)); padding: 12px 18px; }
  .start-card__brand { grid-template-columns: 78px 1fr; }
  .start-settings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .start-settings h2 { grid-column: 1 / -1; }
  .start-settings__label { margin-top: 5px; }
  .start-audio { align-content: start; }
  .start-legal { grid-column: 1 / -1; }
  .start-play-button { margin-top: 7px; }
}