/* =========================================================
   A21 — STYLES
   GENERALA PUCARÁ
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

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

html {
  background:
    #07110d;
}

body {
  min-height:
    100vh;

  min-height:
    100dvh;

  overflow-x:
    hidden;

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

  color:
    #f5ead1;

  background:
    radial-gradient(
      circle at top,
      #17352a 0%,
      #0c2018 38%,
      #07110d 100%
    );
}

button,
input,
select,
textarea {
  font:
    inherit;
}

button {
  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   APP
========================================================= */

.generala-app {
  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;
}


/* =========================================================
   PANTALLAS
========================================================= */

.generala-screen {
  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    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)
    );
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

.generala-primary-button,
.generala-menu-button,
.generala-small-button,
.generala-roll-button {
  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.85
    );

  outline:
    none;

  cursor:
    pointer;

  color:
    #f8e8b5;

  background:
    linear-gradient(
      180deg,
      rgba(
        45,
        42,
        27,
        0.98
      ),
      rgba(
        17,
        22,
        18,
        0.98
      )
    );

  box-shadow:
    0 6px 14px
    rgba(
      0,
      0,
      0,
      0.32
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.08
    );

  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.generala-primary-button:hover,
.generala-menu-button:hover,
.generala-small-button:hover,
.generala-roll-button:hover {
  filter:
    brightness(1.08);
}

.generala-primary-button:active,
.generala-menu-button:active,
.generala-small-button:active,
.generala-roll-button:active {
  transform:
    translateY(1px)
    scale(0.99);
}

.generala-primary-button:disabled,
.generala-menu-button:disabled,
.generala-small-button:disabled,
.generala-roll-button:disabled {
  opacity:
    0.45;

  cursor:
    default;

  filter:
    none;

  transform:
    none;
}

.generala-primary-button {
  min-width:
    190px;

  min-height:
    48px;

  padding:
    12px 24px;

  border-radius:
    12px;

  font-size:
    16px;

  font-weight:
    800;

  letter-spacing:
    1px;

  background:
    linear-gradient(
      180deg,
      #604c1e,
      #2b2414
    );

  box-shadow:
    0 7px 18px
    rgba(
      0,
      0,
      0,
      0.35
    ),
    inset 0 1px 0
    rgba(
      255,
      240,
      180,
      0.16
    );
}

.generala-menu-button {
  width:
    100%;

  min-height:
    44px;

  padding:
    10px 16px;

  border-radius:
    10px;

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    0.7px;
}

.generala-small-button {
  min-height:
    34px;

  padding:
    7px 12px;

  border-radius:
    9px;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.6px;
}


/* =========================================================
   INTRO
========================================================= */

.generala-intro-screen {
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(
        46,
        91,
        69,
        0.58
      ),
      transparent 46%
    );
}

.generala-intro-card {
  width:
    min(
      520px,
      94vw
    );

  min-height:
    440px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    28px;

  padding:
    38px 28px;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.72
    );

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(
        12,
        39,
        29,
        0.98
      ),
      rgba(
        5,
        20,
        15,
        0.98
      )
    );

  box-shadow:
    0 24px 70px
    rgba(
      0,
      0,
      0,
      0.48
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    );
}

.generala-intro-brand {
  text-align:
    center;
}

.generala-intro-title {
  font-size:
    clamp(
      42px,
      9vw,
      72px
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    4px;

  color:
    #f3d57f;

  text-shadow:
    0 3px 0
    rgba(
      0,
      0,
      0,
      0.38
    );
}

.generala-intro-subtitle {
  margin-top:
    8px;

  font-size:
    18px;

  font-weight:
    700;

  letter-spacing:
    8px;

  color:
    #c9ac61;
}

.generala-intro-dice {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  color:
    #f2e5c4;

  font-size:
    clamp(
      40px,
      8vw,
      60px
    );

  line-height:
    1;
}

.generala-intro-dice span {
  display:
    block;

  filter:
    drop-shadow(
      0 5px 5px
      rgba(
        0,
        0,
        0,
        0.4
      )
    );
}

.generala-intro-version {
  font-size:
    11px;

  letter-spacing:
    1px;

  color:
    rgba(
      239,
      226,
      192,
      0.56
    );
}


/* =========================================================
   START SCREEN
========================================================= */

.generala-start-card {
  width:
    min(
      620px,
      95vw
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.72
    );

  border-radius:
    22px;

  background:
    rgba(
      5,
      25,
      18,
      0.97
    );

  box-shadow:
    0 24px 70px
    rgba(
      0,
      0,
      0,
      0.46
    );
}

.generala-start-header {
  padding:
    25px 22px 20px;

  text-align:
    center;

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.3
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        37,
        71,
        53,
        0.5
      ),
      rgba(
        8,
        26,
        19,
        0
      )
    );
}

.generala-start-title {
  font-size:
    clamp(
      30px,
      7vw,
      48px
    );

  font-weight:
    900;

  letter-spacing:
    4px;

  color:
    #f3d57f;
}

.generala-start-subtitle {
  margin-top:
    5px;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    6px;

  color:
    #b99c54;
}

.generala-start-content {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      180px,
      0.55fr
    );

  gap:
    24px;

  padding:
    24px;
}

.generala-start-section {
  min-width:
    0;
}

.generala-start-section-title {
  margin-bottom:
    12px;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    1.3px;

  color:
    #d2b66f;
}

.generala-start-actions {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}

.generala-start-variant {
  padding:
    15px;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.38
    );

  border-radius:
    11px;

  color:
    #f0dfae;

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

  text-align:
    center;

  font-weight:
    700;
}

.generala-start-footer {
  padding:
    12px 18px;

  border-top:
    1px solid
    rgba(
      216,
      176,
      74,
      0.2
    );

  text-align:
    center;
}

.generala-start-version {
  font-size:
    10px;

  letter-spacing:
    0.8px;

  color:
    rgba(
      236,
      221,
      181,
      0.48
    );
}


/* =========================================================
   GAME SCREEN
========================================================= */

.generala-game-screen {
  align-items:
    stretch;

  padding:
    10px;
}

.generala-game-shell {
  position:
    relative;

  width:
    min(
      1180px,
      100%
    );

  min-height:
    calc(
      100dvh - 20px
    );

  margin:
    0 auto;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.55
    );

  border-radius:
    18px;

  background:
    rgba(
      4,
      23,
      16,
      0.96
    );

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


/* =========================================================
   GAME HEADER
========================================================= */

.generala-game-header {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 14px;

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.32
    );

  background:
    rgba(
      14,
      45,
      32,
      0.88
    );
}

.generala-game-brand {
  font-size:
    18px;

  font-weight:
    900;

  letter-spacing:
    2px;

  color:
    #edcf77;
}

.generala-game-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* =========================================================
   GAME LAYOUT
========================================================= */

.generala-game-layout {
  flex:
    1;

  min-height:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      0.35fr
    )
    minmax(
      0,
      1fr
    );
}


/* =========================================================
   SCORE PANEL
========================================================= */

.generala-score-panel {
  min-width:
    0;

  padding:
    14px;

  border-right:
    1px solid
    rgba(
      216,
      176,
      74,
      0.25
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        13,
        49,
        34,
        0.82
      ),
      rgba(
        5,
        28,
        19,
        0.96
      )
    );
}

.generala-score-panel-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;

  padding-bottom:
    10px;

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.26
    );
}

.generala-player-label {
  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1.2px;

  color:
    rgba(
      237,
      213,
      150,
      0.62
    );
}

.generala-current-player {
  font-size:
    16px;

  font-weight:
    900;

  color:
    #f0d37c;
}

.generala-scorecard {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


/* =========================================================
   SCORE ROWS
========================================================= */

.generala-score-row {
  width:
    100%;

  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius:
    8px;

  color:
    #eee1be;

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

  text-align:
    left;

  cursor:
    pointer;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.generala-score-row:not(:disabled):hover {
  transform:
    translateX(2px);

  border-color:
    rgba(
      216,
      176,
      74,
      0.65
    );
}

.generala-score-row.is-available {
  border-color:
    rgba(
      216,
      176,
      74,
      0.35
    );

  background:
    rgba(
      216,
      176,
      74,
      0.08
    );
}

.generala-score-row.is-used {
  opacity:
    0.6;

  cursor:
    default;

  background:
    rgba(
      0,
      0,
      0,
      0.12
    );
}

.generala-score-label {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    700;
}

.generala-score-value {
  min-width:
    32px;

  text-align:
    right;

  font-size:
    15px;

  font-weight:
    900;

  color:
    #f1d680;
}

.generala-total-row {
  margin-top:
    10px;

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    10px 12px;

  border-top:
    1px solid
    rgba(
      216,
      176,
      74,
      0.48
    );

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.48
    );

  font-size:
    14px;

  font-weight:
    900;

  color:
    #ecd187;
}

.generala-total-row strong {
  font-size:
    20px;
}


/* =========================================================
   TABLE PANEL
========================================================= */

.generala-table-panel {
  min-width:
    0;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  padding:
    16px;

  background:
    radial-gradient(
      circle at center,
      #1f563f 0%,
      #16442f 52%,
      #0d2c1e 100%
    );
}

.generala-table-panel::before {
  content:
    "";

  position:
    absolute;

  inset:
    12px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      218,
      180,
      85,
      0.28
    );

  border-radius:
    18px;
}


/* =========================================================
   TURN INFO
========================================================= */

.generala-turn-info {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-bottom:
    18px;
}

.generala-turn-info-item {
  min-width:
    110px;

  padding:
    7px 13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.4
    );

  border-radius:
    10px;

  background:
    rgba(
      4,
      22,
      15,
      0.5
    );
}

.generala-turn-info-item span {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.8px;

  color:
    rgba(
      239,
      223,
      181,
      0.7
    );
}

.generala-turn-info-item strong {
  font-size:
    17px;

  color:
    #efd47f;
}


/* =========================================================
   TABLE AREA
========================================================= */

.generala-table-area {
  position:
    relative;

  z-index:
    1;

  flex:
    1;

  min-height:
    350px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    34px;
}


/* =========================================================
   DADOS
========================================================= */

.generala-dice-container {
  width:
    100%;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    clamp(
      10px,
      2vw,
      22px
    );

  padding:
    16px;
}

.generala-die {
  width:
    clamp(
      62px,
      8vw,
      96px
    );

  aspect-ratio:
    1 / 1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    3px solid
    rgba(
      237,
      226,
      198,
      0.84
    );

  border-radius:
    18px;

  color:
    #171916;

  background:
    linear-gradient(
      145deg,
      #fffef6,
      #d7cfb5
    );

  box-shadow:
    0 10px 18px
    rgba(
      0,
      0,
      0,
      0.34
    ),
    inset 0 2px 2px
    rgba(
      255,
      255,
      255,
      0.7
    );

  cursor:
    pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    filter 0.15s ease;
}

.generala-die:hover {
  transform:
    translateY(-3px);
}

.generala-die:active {
  transform:
    translateY(0)
    scale(0.98);
}

.generala-die.is-held {
  transform:
    translateY(-10px);

  border-color:
    #e6bd49;

  box-shadow:
    0 0 0 3px
    rgba(
      226,
      181,
      60,
      0.24
    ),
    0 14px 22px
    rgba(
      0,
      0,
      0,
      0.38
    ),
    inset 0 2px 2px
    rgba(
      255,
      255,
      255,
      0.7
    );
}

.generala-die.is-inactive {
  cursor:
    default;

  opacity:
    0.76;
}

.generala-die.is-inactive:hover {
  transform:
    none;
}

.generala-die-face {
  font-size:
    clamp(
      54px,
      8vw,
      86px
    );

  line-height:
    1;
}


/* =========================================================
   BOTÓN TIRAR
========================================================= */

.generala-roll-button {
  min-width:
    230px;

  min-height:
    54px;

  padding:
    12px 26px;

  border-radius:
    14px;

  font-size:
    16px;

  font-weight:
    900;

  letter-spacing:
    1.2px;

  color:
    #fff0bd;

  background:
    linear-gradient(
      180deg,
      #705b24,
      #342910
    );
}


/* =========================================================
   STATUS
========================================================= */

.generala-game-status {
  position:
    relative;

  z-index:
    1;

  min-height:
    24px;

  padding-top:
    8px;

  text-align:
    center;

  font-size:
    12px;

  color:
    rgba(
      240,
      228,
      197,
      0.64
    );
}


/* =========================================================
   PAUSA
========================================================= */

.generala-pause-overlay {
  position:
    absolute;

  z-index:
    100;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

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

  backdrop-filter:
    blur(4px);
}

.generala-pause-overlay[hidden] {
  display:
    none;
}

.generala-pause-card {
  width:
    min(
      360px,
      92vw
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    11px;

  padding:
    26px;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.7
    );

  border-radius:
    18px;

  background:
    #0a2118;

  box-shadow:
    0 20px 50px
    rgba(
      0,
      0,
      0,
      0.5
    );
}

.generala-pause-title {
  margin-bottom:
    8px;

  text-align:
    center;

  font-size:
    28px;

  font-weight:
    900;

  letter-spacing:
    3px;

  color:
    #efd37b;
}


/* =========================================================
   RESULT SCREEN
========================================================= */

.generala-result-shell {
  width:
    min(
      920px,
      96vw
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.68
    );

  border-radius:
    20px;

  background:
    rgba(
      5,
      25,
      18,
      0.98
    );

  box-shadow:
    0 24px 70px
    rgba(
      0,
      0,
      0,
      0.48
    );
}

.generala-result-header {
  padding:
    20px;

  text-align:
    center;

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.3
    );
}

.generala-result-brand {
  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    2.5px;

  color:
    #c5a95f;
}

.generala-result-title {
  margin-top:
    6px;

  font-size:
    clamp(
      28px,
      6vw,
      42px
    );

  font-weight:
    900;

  letter-spacing:
    2px;

  color:
    #f0d47d;
}

.generala-result-content {
  padding:
    22px;
}

.generala-result-winner {
  margin-bottom:
    20px;

  text-align:
    center;

  font-size:
    clamp(
      18px,
      4vw,
      26px
    );

  font-weight:
    900;

  color:
    #f4df9d;
}

.generala-result-scoreboard {
  width:
    100%;

  overflow-x:
    auto;

  padding-bottom:
    4px;
}

.generala-result-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    24px;
}


/* =========================================================
   SCOREBOARD FINAL
========================================================= */

.generala-scoreboard {
  min-width:
    520px;

  display:
    grid;

  grid-auto-flow:
    column;

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

  border:
    1px solid
    rgba(
      216,
      176,
      74,
      0.38
    );

  border-radius:
    12px;

  overflow:
    hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );
}

.generala-score-category-column,
.generala-score-player-column {
  min-width:
    0;

  border-right:
    1px solid
    rgba(
      216,
      176,
      74,
      0.17
    );
}

.generala-score-category-column:last-child,
.generala-score-player-column:last-child {
  border-right:
    none;
}

.generala-score-category-header,
.generala-score-player-header {
  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    8px;

  border-bottom:
    1px solid
    rgba(
      216,
      176,
      74,
      0.3
    );

  background:
    rgba(
      216,
      176,
      74,
      0.08
    );

  font-size:
    12px;

  font-weight:
    900;

  color:
    #efd37c;

  text-align:
    center;
}

.generala-score-category-cell,
.generala-score-player-cell {
  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    6px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  font-size:
    12px;

  color:
    #e9ddb9;

  text-align:
    center;
}

.generala-score-category-cell {
  justify-content:
    flex-start;

  font-weight:
    700;
}

.generala-score-category-total,
.generala-score-player-total {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px;

  background:
    rgba(
      216,
      176,
      74,
      0.09
    );

  font-weight:
    900;

  color:
    #f2d987;
}

.generala-score-category-total {
  justify-content:
    flex-start;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (
  max-width: 760px
) {
  .generala-screen {
    padding:
      max(
        8px,
        env(safe-area-inset-top)
      )
      max(
        8px,
        env(safe-area-inset-right)
      )
      max(
        8px,
        env(safe-area-inset-bottom)
      )
      max(
        8px,
        env(safe-area-inset-left)
      );
  }

  .generala-start-content {
    grid-template-columns:
      1fr;
  }

  .generala-game-screen {
    padding:
      0;
  }

  .generala-game-shell {
    min-height:
      100dvh;

    border:
      none;

    border-radius:
      0;
  }

  .generala-game-header {
    min-height:
      50px;

    padding:
      7px 9px;
  }

  .generala-game-brand {
    font-size:
      14px;

    letter-spacing:
      1.3px;
  }

  .generala-small-button {
    min-height:
      32px;

    padding:
      6px 9px;

    font-size:
      10px;
  }

  .generala-game-layout {
    display:
      flex;

    flex-direction:
      column;
  }

  .generala-table-panel {
    order:
      1;

    min-height:
      340px;

    padding:
      12px;
  }

  .generala-score-panel {
    order:
      2;

    border-right:
      none;

    border-top:
      1px solid
      rgba(
        216,
        176,
        74,
        0.28
      );

    padding:
      10px 12px 16px;
  }

  .generala-table-area {
    min-height:
      255px;

    gap:
      24px;
  }

  .generala-dice-container {
    gap:
      8px;

    padding:
      8px;
  }

  .generala-die {
    width:
      clamp(
        50px,
        16vw,
        72px
      );

    border-radius:
      13px;
  }

  .generala-die-face {
    font-size:
      clamp(
        45px,
        15vw,
        64px
      );
  }

  .generala-roll-button {
    min-width:
      190px;

    min-height:
      48px;

    font-size:
      14px;
  }

  .generala-scorecard {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      5px;
  }

  .generala-score-row {
    min-height:
      36px;
  }

  .generala-total-row {
    margin-top:
      8px;
  }
}


/* =========================================================
   MOBILE ANGOSTO
========================================================= */

@media (
  max-width: 430px
) {
  .generala-intro-card {
    min-height:
      410px;

    padding:
      28px 18px;
  }

  .generala-start-actions {
    grid-template-columns:
      1fr;
  }

  .generala-turn-info {
    gap:
      6px;

    margin-bottom:
      10px;
  }

  .generala-turn-info-item {
    min-width:
      0;

    flex:
      1;

    padding:
      6px 9px;
  }

  .generala-table-area {
    min-height:
      235px;
  }

  .generala-dice-container {
    gap:
      5px;
  }

  .generala-die {
    width:
      min(
        17vw,
        63px
      );

    border-width:
      2px;

    border-radius:
      11px;
  }

  .generala-die-face {
    font-size:
      min(
        14vw,
        57px
      );
  }

  .generala-score-label {
    font-size:
      11px;
  }

  .generala-score-value {
    min-width:
      24px;

    font-size:
      13px;
  }

  .generala-score-row {
    padding:
      6px 8px;
  }
}


/* =========================================================
   LANDSCAPE BAJO
   ANDROID / EMULADORES
========================================================= */

@media (
  max-height: 650px
)
and (
  orientation: landscape
) {
  .generala-screen {
    align-items:
      flex-start;

    padding:
      6px;
  }

  .generala-intro-card {
    min-height:
      auto;

    gap:
      14px;

    padding:
      18px 22px;
  }

  .generala-intro-title {
    font-size:
      38px;
  }

  .generala-intro-dice {
    font-size:
      36px;
  }

  .generala-start-card {
    width:
      min(
        760px,
        96vw
      );
  }

  .generala-start-header {
    padding:
      12px;
  }

  .generala-start-title {
    font-size:
      28px;
  }

  .generala-start-content {
    padding:
      14px;

    gap:
      14px;
  }

  .generala-menu-button {
    min-height:
      36px;

    padding:
      7px 11px;

    font-size:
      12px;
  }

  .generala-game-screen {
    padding:
      0;
  }

  .generala-game-shell {
    width:
      100%;

    min-height:
      100dvh;

    border-radius:
      0;
  }

  .generala-game-header {
    min-height:
      42px;

    padding:
      5px 9px;
  }

  .generala-game-layout {
    display:
      grid;

    grid-template-columns:
      minmax(
        220px,
        0.36fr
      )
      minmax(
        0,
        1fr
      );
  }

  .generala-score-panel {
    order:
      initial;

    padding:
      8px;

    border-top:
      none;

    border-right:
      1px solid
      rgba(
        216,
        176,
        74,
        0.25
      );
  }

  .generala-score-panel-header {
    margin-bottom:
      6px;

    padding-bottom:
      6px;
  }

  .generala-scorecard {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      3px;
  }

  .generala-score-row {
    min-height:
      28px;

    padding:
      3px 6px;

    border-radius:
      6px;
  }

  .generala-score-label {
    font-size:
      10px;
  }

  .generala-score-value {
    min-width:
      20px;

    font-size:
      11px;
  }

  .generala-total-row {
    min-height:
      32px;

    margin-top:
      5px;

    padding:
      5px 7px;
  }

  .generala-total-row strong {
    font-size:
      15px;
  }

  .generala-table-panel {
    order:
      initial;

    min-height:
      0;

    padding:
      8px;
  }

  .generala-turn-info {
    margin-bottom:
      5px;
  }

  .generala-turn-info-item {
    min-width:
      90px;

    padding:
      4px 8px;
  }

  .generala-turn-info-item strong {
    font-size:
      14px;
  }

  .generala-table-area {
    min-height:
      0;

    gap:
      12px;
  }

  .generala-dice-container {
    padding:
      4px;

    gap:
      8px;
  }

  .generala-die {
    width:
      clamp(
        50px,
        9vh,
        68px
      );

    border-radius:
      12px;
  }

  .generala-die-face {
    font-size:
      clamp(
        44px,
        8vh,
        61px
      );
  }

  .generala-die.is-held {
    transform:
      translateY(-6px);
  }

  .generala-roll-button {
    min-height:
      38px;

    min-width:
      180px;

    padding:
      7px 18px;

    font-size:
      12px;
  }

  .generala-game-status {
    min-height:
      18px;

    padding-top:
      3px;

    font-size:
      10px;
  }
}


/* =========================================================
   UTILIDADES
========================================================= */

[hidden] {
  display:
    none !important;
}

.generala-legal-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 18px;
  color: rgba(241, 222, 159, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.generala-legal-nav a {
  color: #e9c85f;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.generala-legal-nav a:hover,
.generala-legal-nav a:focus-visible {
  color: #fff3b5;
  border-bottom-color: currentColor;
}

/* ANDROID / TELÉFONOS — COMPACTO Y RESPETANDO LA BARRA SUPERIOR */
@media (max-width: 430px) and (orientation: portrait) {
  .generala-start-screen {
    align-items: flex-start;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .generala-start-card {
    width: min(96vw, 410px);
  }

  .generala-start-header {
    min-height: 112px;
  }

  .generala-start-brand {
    padding: 7px 14px;
  }

  .generala-start-title {
    font-size: 24px;
  }

  .generala-start-content {
    gap: 8px;
    padding: 9px;
  }

  .generala-start-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .generala-start-actions .generala-menu-button {
    min-height: 50px;
    gap: 7px;
    padding: 6px 8px;
  }

  .generala-start-actions .generala-menu-button:last-child {
    grid-column: 1 / -1;
  }

  .generala-mode-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .generala-start-variant,
  .generala-start-side-block {
    min-height: 56px;
    margin-top: 5px;
  }

  .generala-game-screen {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  .generala-game-shell {
    min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}


/* =========================================================
   GENERALA PUCARÁ 2.0 — INTRO Y START PREMIUM
========================================================= */

.generala-intro-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(40,112,75,.42), transparent 36%),
    linear-gradient(rgba(1,9,6,.42), rgba(1,9,6,.82)),
    url("banner.webp") center/cover no-repeat;
}

.generala-intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 24%, transparent 76%, rgba(0,0,0,.72)),
    radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.62) 100%);
}

.generala-intro-card {
  position: relative;
  isolation: isolate;
  width: min(520px,92vw);
  min-height: min(680px,88dvh);
  gap: 16px;
  padding: 26px 30px 20px;
  border: 1px solid rgba(244,201,91,.64);
  border-radius: 34px;
  background: linear-gradient(155deg,rgba(8,30,21,.9),rgba(1,10,7,.94));
  box-shadow: 0 35px 100px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,240,170,.08), inset 0 0 70px rgba(175,122,24,.08);
  animation: generala-premium-enter .8s cubic-bezier(.2,.8,.2,1) both;
}

.generala-intro-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid rgba(211,165,55,.22);
  border-radius: 27px;
  pointer-events: none;
}

.generala-intro-halo {
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(231,186,70,.22),transparent 68%);
  transform: translateX(-50%);
}

.generala-intro-brand { width: 100%; }

.generala-intro-kicker,
.generala-start-kicker {
  margin-bottom: 9px;
  color: #e0bf68;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .34em;
}

.generala-intro-logo {
  display: block;
  width: min(280px,62vw);
  aspect-ratio: 1;
  margin: 0 auto -14px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.6));
}

.generala-intro-title {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(38px,8vw,62px);
  letter-spacing: .12em;
  background: linear-gradient(#fff3bd,#d6a83d 58%,#8a5a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.generala-intro-subtitle { font-size: 14px; letter-spacing: .52em; }

.generala-intro-dice {
  gap: 4px;
  margin: -2px 0 2px;
}

.generala-intro-dice img {
  width: clamp(48px,12vw,68px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.52));
}

.generala-intro-dice img:nth-child(1) { transform: rotate(-10deg); }
.generala-intro-dice img:nth-child(2) { transform: translateY(-6px); }
.generala-intro-dice img:nth-child(3) { transform: rotate(10deg); }

.generala-intro-card .generala-primary-button {
  min-width: min(280px,78vw);
  min-height: 52px;
  border-color: #f0c65d;
  border-radius: 15px;
  background: linear-gradient(180deg,#e5bd55,#9a6519);
  color: #0b160f;
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.5);
  letter-spacing: .13em;
}

.generala-start-screen {
  background:
    linear-gradient(90deg,rgba(0,8,5,.78),rgba(0,12,8,.36),rgba(0,8,5,.78)),
    url("banner.webp") center/cover fixed no-repeat;
}

.generala-start-card {
  width: min(940px,96vw);
  border-color: rgba(238,195,83,.72);
  border-radius: 28px;
  background: linear-gradient(145deg,rgba(4,24,16,.96),rgba(1,12,8,.98));
  box-shadow: 0 32px 90px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,235,160,.07);
}

.generala-start-header {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  background: #07170f;
}

.generala-start-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(0,0,0,.44),transparent 35%,transparent 65%,rgba(0,0,0,.44));
}

.generala-start-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.generala-start-brand {
  position: relative;
  z-index: 1;
  padding: 15px 28px;
  border: 1px solid rgba(238,197,91,.42);
  border-radius: 18px;
  background: rgba(0,15,10,.62);
  box-shadow: 0 10px 35px rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
}

.generala-start-title {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(32px,5vw,52px);
  background: linear-gradient(#fff2b1,#d3a13a 60%,#936018);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.generala-start-content {
  grid-template-columns: minmax(0,1fr) 230px;
  gap: 20px;
  padding: 22px;
}

.generala-start-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }

.generala-start-actions .generala-menu-button {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  text-align: left;
  background: linear-gradient(145deg,rgba(27,67,46,.88),rgba(5,27,18,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.22);
}

.generala-start-actions .generala-primary-button {
  border-color: #e3b94e;
  background: linear-gradient(145deg,rgba(54,103,70,.96),rgba(13,49,32,.98));
}

.generala-mode-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(233,190,77,.62);
  border-radius: 11px;
  color: #f2cf70;
  background: rgba(0,12,8,.52);
  font: 800 18px/1 Georgia,serif;
}

.generala-start-actions strong,
.generala-start-actions small { display: block; }
.generala-start-actions strong { color: #f6dfa0; font-size: 12px; letter-spacing: .06em; }
.generala-start-actions small { margin-top: 3px; color: rgba(238,226,193,.58); font-size: 9px; font-weight: 600; }

.generala-start-variant {
  min-height: 112px;
  display: grid;
  place-content: center;
  gap: 8px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0,rgba(192,145,39,.17),transparent 62%),rgba(255,255,255,.025);
}

.generala-start-variant span { color: rgba(231,204,136,.62); font-size: 9px; letter-spacing: .16em; }
.generala-start-variant strong { color: #f2d47d; font: 700 20px/1 Georgia,serif; }

@keyframes generala-premium-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width:760px) {
  .generala-intro-card { min-height: min(650px,92dvh); padding: 20px 18px 16px; }
  .generala-intro-logo { width: min(240px,60vw); }
  .generala-start-card { width: min(620px,96vw); }
  .generala-start-header { min-height: 170px; }
  .generala-start-content { grid-template-columns:1fr; gap:14px; padding:14px; }
  .generala-start-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .generala-start-variant { min-height:76px; }
}

@media (max-width:430px) {
  .generala-intro-card { gap:11px; }
  .generala-intro-logo { width:min(205px,56vw); }
  .generala-intro-title { font-size:34px; }
  .generala-intro-dice img { width:44px; }
  .generala-start-header { min-height:142px; }
  .generala-start-brand { padding:10px 18px; }
  .generala-start-title { font-size:28px; }
  .generala-start-actions { grid-template-columns:1fr; }
  .generala-start-actions .generala-menu-button { min-height:58px; }
}

/* LANZAMIENTO DE DADOS — ESTILO BACKGAMMON */
.generala-die {
  overflow: visible;
  border: 1px solid rgba(227,185,71,.26);
  background: radial-gradient(circle,rgba(52,103,72,.3),rgba(2,17,11,.5));
  box-shadow: inset 0 0 20px rgba(0,0,0,.2),0 8px 18px rgba(0,0,0,.24);
}

.generala-die-face {
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.48));
}

.generala-die.is-held {
  border-color: #f0c75d;
  background: radial-gradient(circle,rgba(229,187,74,.25),rgba(4,25,16,.62));
  box-shadow: 0 0 0 3px rgba(229,184,65,.2),0 0 28px rgba(230,185,66,.28),inset 0 0 18px rgba(255,220,116,.12);
}

.generala-die.is-held::after {
  content: "RESERVADO";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: #edca6c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.generala-die.is-roll-hidden { visibility: hidden; }

.generala-dice-roll-layer {
  position: fixed;
  inset: 0;
  z-index: 450;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
}

.generala-flying-die {
  position: fixed;
  left: var(--die-left);
  top: var(--die-top);
  width: var(--die-size);
  height: var(--die-size);
  margin: calc(var(--die-size) / -2);
  transform-style: preserve-3d;
  transform-origin: 50% 55%;
  will-change: transform,opacity,filter;
  filter: drop-shadow(0 14px 10px rgba(0,0,0,.55));
  animation: generala-die-throw 1080ms cubic-bezier(.16,.72,.22,1) forwards;
}

.generala-dice-cube {
  --dice-half: calc(var(--die-size) / 2);
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  animation: generala-cube-spin 1080ms cubic-bezier(.16,.72,.22,1) forwards;
}

.generala-dice-cube-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13%;
  background: #0b0d0b;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 3px rgba(255,255,255,.35),0 0 1px rgba(0,0,0,.8);
}

.generala-dice-cube-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.generala-dice-cube-face--front { transform:rotateY(0deg) translateZ(var(--dice-half)); }
.generala-dice-cube-face--back { transform:rotateY(180deg) translateZ(var(--dice-half)); }
.generala-dice-cube-face--right { transform:rotateY(90deg) translateZ(var(--dice-half)); }
.generala-dice-cube-face--left { transform:rotateY(-90deg) translateZ(var(--dice-half)); }
.generala-dice-cube-face--top { transform:rotateX(90deg) translateZ(var(--dice-half)); }
.generala-dice-cube-face--bottom { transform:rotateX(-90deg) translateZ(var(--dice-half)); }

.generala-flying-die--2 .generala-dice-cube { animation-duration:1040ms;animation-name:generala-cube-spin-reverse; }
.generala-flying-die--3 .generala-dice-cube { animation-duration:1100ms; }
.generala-flying-die--4 .generala-dice-cube { animation-duration:1060ms;animation-name:generala-cube-spin-reverse; }
.generala-flying-die--5 .generala-dice-cube { animation-duration:1120ms; }

@keyframes generala-cube-spin {
  0% { transform:rotateX(760deg) rotateY(-680deg) rotateZ(280deg); }
  58% { transform:rotateX(410deg) rotateY(500deg) rotateZ(-190deg); }
  82% { transform:rotateX(150deg) rotateY(-130deg) rotateZ(55deg); }
  100% { transform:rotateX(var(--final-rx)) rotateY(var(--final-ry)) rotateZ(0deg); }
}

@keyframes generala-cube-spin-reverse {
  0% { transform:rotateX(-720deg) rotateY(760deg) rotateZ(-310deg); }
  56% { transform:rotateX(460deg) rotateY(-540deg) rotateZ(210deg); }
  84% { transform:rotateX(-120deg) rotateY(145deg) rotateZ(-48deg); }
  100% { transform:rotateX(var(--final-rx)) rotateY(var(--final-ry)) rotateZ(0deg); }
}

.generala-flying-die--2 { animation-name:generala-die-throw-two;animation-duration:1040ms; }
.generala-flying-die--3 { animation-name:generala-die-throw-three;animation-duration:1100ms; }
.generala-flying-die--4 { animation-name:generala-die-throw-four;animation-duration:1060ms; }
.generala-flying-die--5 { animation-name:generala-die-throw-five;animation-duration:1120ms; }
.generala-flying-die.is-settling { filter:drop-shadow(0 8px 7px rgba(0,0,0,.48)); }

@keyframes generala-die-throw {
  0% { opacity:0;transform:translate3d(0,-190px,90px) rotate(-260deg) scale(.7); }
  10% { opacity:1; }
  54% { transform:translate3d(0,-24px,28px) rotate(410deg) scale(.98); }
  68% { transform:translate3d(var(--throw-x),8px,0) rotate(530deg) scale(1.06); }
  80% { transform:translate3d(10px,-18px,20px) rotate(615deg) scale(.98); }
  91% { transform:translate3d(-3px,3px,0) rotate(694deg) scale(1.015); }
  100% { opacity:1;transform:translate3d(0,0,0) rotate(720deg) scale(1); }
}

@keyframes generala-die-throw-two {
  0% { opacity:0;transform:translate3d(70px,-170px,80px) rotate(250deg) scale(.72); }
  58% { opacity:1;transform:translate3d(-18px,-18px,26px) rotate(-430deg) scale(1); }
  72% { transform:translate3d(13px,7px,0) rotate(-555deg) scale(1.05); }
  84% { transform:translate3d(-7px,-13px,16px) rotate(-640deg) scale(.99); }
  100% { transform:translate3d(0,0,0) rotate(-720deg) scale(1); }
}

@keyframes generala-die-throw-three {
  0% { opacity:0;transform:translate3d(-20px,-220px,100px) rotate(-320deg) scale(.66); }
  55% { opacity:1;transform:translate3d(15px,-27px,32px) rotate(390deg) scale(.98); }
  70% { transform:translate3d(-10px,8px,0) rotate(515deg) scale(1.07); }
  83% { transform:translate3d(5px,-17px,19px) rotate(630deg) scale(.98); }
  100% { transform:translate3d(0,0,0) rotate(720deg) scale(1); }
}

@keyframes generala-die-throw-four {
  0% { opacity:0;transform:translate3d(-75px,-165px,75px) rotate(-250deg) scale(.74); }
  57% { opacity:1;transform:translate3d(20px,-20px,24px) rotate(440deg) scale(1); }
  71% { transform:translate3d(-12px,7px,0) rotate(560deg) scale(1.05); }
  85% { transform:translate3d(8px,-12px,14px) rotate(650deg) scale(.99); }
  100% { transform:translate3d(0,0,0) rotate(720deg) scale(1); }
}

@keyframes generala-die-throw-five {
  0% { opacity:0;transform:translate3d(45px,-205px,96px) rotate(310deg) scale(.68); }
  56% { opacity:1;transform:translate3d(-15px,-25px,30px) rotate(-405deg) scale(.99); }
  69% { transform:translate3d(10px,8px,0) rotate(-530deg) scale(1.06); }
  82% { transform:translate3d(-6px,-16px,18px) rotate(-635deg) scale(.98); }
  100% { transform:translate3d(0,0,0) rotate(-720deg) scale(1); }
}

@media (max-width:430px) {
  .generala-die.is-held::after { bottom:-14px;font-size:6px; }
}

/* OVERLAYS PREMIUM 2.5 */
.generala-variant-trigger {
  width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border:1px solid rgba(225,183,70,.48);border-radius:11px;
  color:#f4dda0;background:linear-gradient(145deg,#123a28,#071e14);cursor:pointer;
}
.generala-variant-trigger strong { font:700 14px/1.1 Georgia,serif; }
.generala-variant-trigger i { color:#e4bc54;font:normal 26px/1 Georgia,serif; }

.generala-settings-modal { position:relative;overflow:hidden; }
.generala-settings-modal::before {
  content:"";position:absolute;inset:7px;z-index:-1;border:1px solid rgba(223,179,64,.16);border-radius:18px;pointer-events:none;
}
.generala-settings-modal header { background:radial-gradient(circle at 12% 0,rgba(198,147,35,.17),transparent 45%),rgba(1,16,10,.35); }
.generala-settings-list { gap:0; }
.generala-setting-row {
  position:relative;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid rgba(220,180,76,.14);cursor:pointer;
}
.generala-setting-row > span { font-size:13px;font-weight:900; }
.generala-setting-row > span small { display:block;margin-top:4px;color:rgba(236,222,184,.5);font-size:9px;font-weight:600; }
.generala-language-chip {
  padding:9px 13px;border:1px solid rgba(224,181,68,.42);border-radius:999px;color:#f0d88e;background:rgba(2,22,14,.72);font-size:10px;font-weight:900;
}
.generala-switch-input { position:absolute;opacity:0;pointer-events:none; }
.generala-switch {
  position:relative;width:50px;height:27px;flex:0 0 50px;border:1px solid rgba(220,181,76,.36);border-radius:999px;background:#06170f;box-shadow:inset 0 2px 5px rgba(0,0,0,.5);transition:.2s ease;
}
.generala-switch::after {
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:linear-gradient(#b5aa89,#74694c);box-shadow:0 2px 5px rgba(0,0,0,.5);transition:.2s ease;
}
.generala-switch-input:checked + .generala-switch { border-color:#e7bc51;background:linear-gradient(90deg,#765018,#bd8c2d);box-shadow:0 0 15px rgba(216,168,54,.22); }
.generala-switch-input:checked + .generala-switch::after { left:26px;background:linear-gradient(#fff1b3,#dbad43); }

.generala-volume-setting input[type="range"] {
  appearance:none;width:min(220px,48%);height:7px;border-radius:999px;background:linear-gradient(90deg,#d7aa3e 0 70%,#071a11 70% 100%);outline:none;
}
.generala-volume-setting input[type="range"]::-webkit-slider-thumb {
  appearance:none;width:22px;height:22px;border:2px solid #f0cb69;border-radius:50%;background:#143d2a;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;
}

.generala-setting-group { margin:16px 0 0;padding:13px;border:1px solid rgba(221,177,67,.25);border-radius:15px;background:rgba(255,255,255,.018); }
.generala-setting-group legend { padding:0 7px;color:#d8b45a;font-size:9px;font-weight:900;letter-spacing:.16em; }
.generala-segmented { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.generala-segmented input,.generala-dice-choice input,.generala-variant-cards input { position:absolute;opacity:0;pointer-events:none; }
.generala-segmented span {
  min-height:40px;display:grid;place-items:center;border:1px solid rgba(218,178,72,.24);border-radius:10px;color:rgba(241,224,177,.62);background:#071b12;font-size:11px;font-weight:900;cursor:pointer;
}
.generala-segmented input:checked + span { border-color:#e7bc51;color:#ffe69a;background:linear-gradient(145deg,#285f42,#0e3524);box-shadow:0 0 18px rgba(216,170,55,.16); }

.generala-dice-choice { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.generala-dice-choice label > span {
  min-height:86px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(218,178,72,.24);border-radius:12px;color:rgba(241,224,177,.7);background:#071b12;cursor:pointer;
}
.generala-dice-choice img { width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.generala-dice-choice strong { font-size:11px;letter-spacing:.05em; }
.generala-dice-choice input:checked + span { border-color:#edc45b;color:#ffe69a;background:radial-gradient(circle at 25% 0,rgba(221,174,57,.2),transparent 55%),#0d3020;box-shadow:0 0 20px rgba(216,170,55,.15); }

.generala-settings-modal footer { padding:0 22px 20px; }
.generala-settings-modal footer button {
  width:100%;min-height:46px;border:1px solid #e4b84d;border-radius:12px;color:#0a180f;background:linear-gradient(#e4bb55,#9a661b);font-size:11px;font-weight:900;letter-spacing:.12em;cursor:pointer;
}

.generala-variants-modal { width:min(620px,100%); }
.generala-variant-cards { display:grid;gap:10px;padding:18px 22px; }
.generala-variant-cards label > span {
  min-height:86px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:13px;padding:13px 15px;
  border:1px solid rgba(221,178,68,.25);border-radius:15px;background:linear-gradient(145deg,rgba(22,60,40,.74),rgba(4,24,15,.9));cursor:pointer;
}
.generala-variant-cards b { grid-row:1 / span 2;color:rgba(223,181,75,.42);font:700 27px/1 Georgia,serif; }
.generala-variant-cards strong { align-self:end;color:#f1d98f;font:700 16px/1.1 Georgia,serif; }
.generala-variant-cards small { align-self:start;margin-top:5px;color:rgba(237,222,181,.48);font-size:9px;font-weight:600; }
.generala-variant-cards input:checked + span { border-color:#edc458;background:radial-gradient(circle at 5% 50%,rgba(228,180,57,.18),transparent 35%),linear-gradient(145deg,#235d3f,#0b3322);box-shadow:0 0 22px rgba(216,170,55,.14); }
.generala-variant-cards input:checked + span b { color:#efca68; }

@media (max-width:430px) {
  .generala-setting-row { min-height:58px; }
  .generala-volume-setting input[type="range"] { width:44%; }
  .generala-dice-choice img { width:50px;height:50px; }
  .generala-variant-cards { padding:14px; }
  .generala-variant-cards label > span { min-height:74px; }
}

@media (max-height:650px) and (orientation:landscape) {
  .generala-intro-card { width:min(780px,96vw); min-height:auto; display:grid; grid-template-columns:1fr auto; padding:12px 22px; }
  .generala-intro-brand { grid-row:1 / span 3; }
  .generala-intro-logo { width:160px; margin-bottom:-8px; }
  .generala-intro-title { font-size:30px; }
  .generala-intro-dice img { width:42px; }
  .generala-start-card { width:min(920px,98vw); }
  .generala-start-header { min-height:108px; }
  .generala-start-content { grid-template-columns:minmax(0,1fr) 200px; padding:10px 14px; }
  .generala-start-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .generala-start-actions .generala-menu-button { min-height:50px; padding:6px 9px; }
  .generala-mode-icon { width:30px; height:30px; flex-basis:30px; }
}

/* PARTIDA PREMIUM */
.generala-game-header {
  min-height: 66px;
  border-bottom-color: rgba(232,190,77,.54);
  background: linear-gradient(180deg,#07170f,#03100b);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
}

.generala-game-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f2d477;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 18px;
  letter-spacing: .12em;
}

.generala-game-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 11px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.generala-game-brand span,.generala-game-brand small { display:block; }
.generala-game-brand small { margin-bottom:3px; color:rgba(225,191,100,.68); font:800 7px/1 Arial,sans-serif; letter-spacing:.24em; }

.generala-small-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(230,187,72,.48);
  border-radius: 12px;
  background: linear-gradient(180deg,rgba(23,57,39,.96),rgba(4,22,14,.98));
}

.generala-small-button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}

.generala-roll-button {
  min-width: 230px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border-color: #e7bc50;
  background: linear-gradient(180deg,#d7ac43,#875514);
  color: #07120c;
  box-shadow: 0 12px 30px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.45);
}

.generala-roll-button img {
  width: 58px;
  height: 46px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}

.generala-roll-button span { font-weight:900; letter-spacing:.08em; }

@media (max-width:760px) {
  .generala-game-header { min-height:56px; }
  .generala-game-brand img { width:36px; height:36px; }
  .generala-game-brand { font-size:13px; }
  .generala-small-button img { width:24px; height:24px; }
  .generala-small-button span { display:none; }
  .generala-roll-button { min-height:52px; min-width:205px; }
  .generala-roll-button img { width:44px; height:38px; }
}

/* CONFIGURACIÓN PREMIUM */
.generala-start-side-block {
  min-height: 74px;
  display: grid;
  place-content: center;
  gap: 7px;
  margin-top: 10px;
  border: 1px solid rgba(216,176,74,.3);
  border-radius: 14px;
  text-align: center;
  background: rgba(255,255,255,.025);
}

.generala-start-side-block span { color:rgba(231,204,136,.6);font-size:9px;letter-spacing:.15em; }
.generala-start-side-block strong { color:#f2d47d;font:700 18px/1 Georgia,serif; }
.generala-difficulty-trigger { width:100%; color:inherit; cursor:pointer; }
.generala-difficulty-trigger:hover,.generala-difficulty-trigger:focus-visible { border-color:#e7bc51; background:rgba(39,82,57,.52); }
.generala-difficulty-trigger i { margin-left:5px; font-style:normal; }
.generala-segmented button { min-height:40px; border:1px solid rgba(225,183,70,.32); border-radius:10px; color:#ccb96f; background:#071f15; font-weight:800; cursor:pointer; }
.generala-segmented button.is-selected { border-color:#e7bc51; color:#ffe69a; background:linear-gradient(145deg,#285f42,#0e3524); box-shadow:0 0 18px rgba(216,170,55,.16); }

.generala-start-variant label { color:rgba(231,204,136,.62);font-size:9px;letter-spacing:.16em; }
.generala-start-variant select,
.generala-settings-list select {
  width: 100%;
  min-height: 40px;
  padding: 7px 34px 7px 11px;
  border: 1px solid rgba(225,183,70,.46);
  border-radius: 10px;
  color: #f4dda0;
  background: #0b281b;
  font-weight: 800;
}

.generala-settings-button {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid rgba(233,190,77,.52);
  border-radius: 14px;
  color: #f3d782;
  background: linear-gradient(145deg,rgba(29,68,47,.9),rgba(4,25,16,.98));
  cursor: pointer;
}

.generala-settings-button img { width:40px;height:40px;object-fit:contain; }
.generala-settings-button span,.generala-settings-button small,.generala-settings-button strong { display:block; }
.generala-settings-button small { color:rgba(231,211,157,.58);font-size:8px;letter-spacing:.13em; }
.generala-settings-button strong { margin-top:3px;font-size:12px;letter-spacing:.1em; }

.generala-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background: rgba(0,7,4,.84);
  backdrop-filter: blur(12px);
}

.generala-settings-modal {
  width: min(520px,100%);
  max-height: min(720px,92dvh);
  overflow: auto;
  border: 1px solid rgba(238,194,80,.7);
  border-radius: 24px;
  color: #f1dfae;
  background: linear-gradient(155deg,#0c2b1e,#03130d);
  box-shadow: 0 30px 90px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,238,170,.06);
}

.generala-settings-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(225,181,67,.25);
}

.generala-settings-modal header small { color:#cba84e;font-size:9px;font-weight:900;letter-spacing:.2em; }
.generala-settings-modal h2 { margin:4px 0 0;color:#ffe59a;font:700 27px/1 Georgia,serif; }
.generala-settings-modal header button { width:38px;height:38px;border:1px solid rgba(226,183,72,.5);border-radius:50%;color:#f7dc8a;background:#061b12;font-size:24px;cursor:pointer; }

.generala-settings-list { display:grid;padding:10px 22px 22px; }
.generala-settings-list > label {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(220,180,76,.14);
}
.generala-settings-list > label > span { font-size:13px;font-weight:900; }
.generala-settings-list > label > span small { display:block;margin-top:3px;color:rgba(236,222,184,.52);font-size:9px;font-weight:600; }
.generala-settings-list select { width:min(180px,48%); }
.generala-settings-list input[type="checkbox"] { width:24px;height:24px;accent-color:#d7aa3e; }
.generala-settings-list input[type="range"] { width:min(210px,48%);accent-color:#d7aa3e; }

.reduce-generala-motion *,
.reduce-generala-motion *::before,
.reduce-generala-motion *::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }

@media (max-width:760px) {
  .generala-start-side-block { min-height:64px; }
  .generala-settings-button { min-height:58px; }
}

@media (max-width:430px) {
  .generala-settings-modal header { padding:16px; }
  .generala-settings-list { padding:6px 16px 16px; }
  .generala-settings-list > label { min-height:58px; }
  .generala-settings-list select { width:46%; }
}

/* AJUSTE FINAL ANDROID: START SIN SCROLL Y ÁREA SEGURA */
@media (max-width: 430px) and (orientation: portrait) {
  .generala-start-screen { align-items:flex-start; padding-top:max(6px,env(safe-area-inset-top),var(--native-status-safe,0px)); padding-bottom:max(6px,env(safe-area-inset-bottom)); }
  .generala-start-card { width:min(96vw,410px); }
  .generala-start-header { min-height:112px; }
  .generala-start-brand { padding:7px 14px; }
  .generala-start-title { font-size:24px; }
  .generala-start-content { gap:8px; padding:9px; }
  .generala-start-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .generala-start-actions .generala-menu-button { min-height:50px; gap:7px; padding:6px 8px; }
  .generala-start-actions .generala-menu-button:last-child { grid-column:1 / -1; }
  .generala-mode-icon { width:30px; height:30px; flex-basis:30px; }
  .generala-start-variant,.generala-start-side-block { min-height:56px; margin-top:5px; }
  .generala-settings-button { min-height:50px; margin-top:5px; }
  .generala-game-screen { box-sizing:border-box; padding-top:max(env(safe-area-inset-top),var(--native-status-safe,0px)); padding-right:env(safe-area-inset-right); padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); }
  .generala-game-shell { min-height:calc(100dvh - max(env(safe-area-inset-top),var(--native-status-safe,0px)) - env(safe-area-inset-bottom)); }
}

/* MARCADOR Y CAMBIO DE TURNO */
.generala-leaderboard {
  min-height:42px;
  display:flex;
  justify-content:center;
  gap:7px;
  padding:6px 10px;
  overflow-x:auto;
  border-bottom:1px solid rgba(224,181,67,.22);
  background:rgba(1,17,11,.82);
}
.generala-leaderboard[hidden] { display:none; }
.generala-leaderboard-player {
  min-width:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:6px 10px;
  border:1px solid rgba(219,178,68,.22);
  border-radius:10px;
  color:rgba(239,224,181,.66);
  background:#092219;
  font-size:11px;
  font-weight:800;
}
.generala-leaderboard-player strong { color:#f0cf70; font-size:15px; }
.generala-leaderboard-player.is-active { border-color:#f0c751; color:#fff0b1; box-shadow:0 0 14px rgba(224,176,49,.2); }
.generala-leaderboard-player.is-leader span { color:#ffd965; }
.generala-turn-notice {
  position:fixed;
  top:max(82px,calc(env(safe-area-inset-top) + 62px));
  left:50%;
  z-index:450;
  padding:10px 20px;
  border:1px solid #e5ba4b;
  border-radius:999px;
  color:#ffe69a;
  background:rgba(3,30,20,.96);
  box-shadow:0 12px 35px #0009;
  font-weight:900;
  letter-spacing:.08em;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-12px) scale(.96);
}
.generala-turn-notice.is-visible { animation:generala-turn-notice 1.5s ease both; }
@keyframes generala-turn-notice { 0%{opacity:0;transform:translate(-50%,-12px) scale(.96)} 15%,75%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-6px) scale(.98)} }
@media (max-width:430px) {
  .generala-leaderboard { justify-content:flex-start; min-height:36px; padding:4px 6px; }
  .generala-leaderboard-player { min-width:82px; padding:4px 7px; font-size:9px; }
  .generala-leaderboard-player strong { font-size:13px; }
  .generala-turn-notice { top:max(70px,calc(env(safe-area-inset-top) + 56px)); max-width:90vw; padding:8px 15px; font-size:12px; }
}