/* ---------------------------------------------------------------
   Corona — paleta inspirada en el tablero de Catan

   Pensado para iPhone: una sola columna, objetivos táctiles de 44px,
   nada que dependa de :hover y márgenes seguros para el notch.
   --------------------------------------------------------------- */
:root {
  /* Mar y marco */
  --sea:        #1b5e8c;
  --frame:      #7b4b2a;
  --frame-dark: #5c3720;

  /* Terrenos */
  --wood:   #4a7c3f;   /* bosque   */
  --brick:  #b1502f;   /* arcilla  */
  --wheat:  #e3ac2a;   /* trigo    */
  --sheep:  #9dc45f;   /* pasto    */
  --ore:    #6e7b87;   /* montaña  */
  --desert: #e6d3a3;   /* desierto */

  /* Superficies */
  --parchment:   #f6ecd6;
  --parchment-2: #efe1c4;
  --card:        #fffaf0;

  /* Texto */
  --ink:       #33251a;
  --ink-soft:  #6d5a45;
  --ink-faint: #9c8a74;

  --radius: 10px;
  --shadow: 0 2px 0 rgba(51, 37, 26, 0.08), 0 8px 24px rgba(16, 64, 95, 0.18);
}

* { box-sizing: border-box; }

html {
  /* iOS agranda el texto por su cuenta al girar el móvil si no se le dice esto */
  /* pan-x pan-y deja desplazar pero no ampliar con los dedos */
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;

  /* Sin rebote al llegar al final. Ese rebote es lo que destapa la zona que
     Safari rellena con color liso, donde la trama no puede llegar. Si no se
     destapa, no hay franja. */
  overscroll-behavior: none;

  /* El color del mar va aquí y sólo el color. Safari rellena el área que queda
     fuera del documento —el rebote al desplazar, la zona del indicador de
     inicio— usando el background-color y nunca una imagen, así que la trama
     nunca podrá llegar hasta ahí. La pinta la capa de abajo. */
  background-color: var(--sea);
}

/* La trama hexagonal, en una capa fija que se desvanece antes del borde
   inferior.

   El problema nunca fue la franja lisa de Safari, que es inevitable: era su
   borde, la línea donde la textura se cortaba en seco. Con la máscara, en el
   último 18% de la pantalla los hexágonos se van apagando hasta desaparecer,
   de modo que allí donde empieza el relleno del navegador ya no queda textura
   que pueda hacer contraste. No hay línea porque no hay final abrupto. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
  /* Sin máscara: la trama llega entera hasta abajo. La capa desborda 20vh por
     debajo del viewport, para que su propio borde no pueda verse nunca. */
  bottom: -20vh;
}

/* En la ruleta manda el rojo plano */
html.vista-ruleta body::after { display: none; }

/* Cualquier cosa que se toque: sin retardo de 300 ms, sin zoom por doble toque
   y sin el destello gris de Safari (se sustituye por un :active propio). */
button,
input,
a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { user-select: none; -webkit-user-select: none; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh; /* en iOS descuenta las barras del navegador */
  display: flex;
  flex-direction: column;
}


h1, h2 {
  font-family: Cinzel, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---------------------------------------------- topbar */
.topbar {
  background: linear-gradient(180deg, var(--frame) 0%, var(--frame-dark) 100%);
  border-bottom: 3px solid rgba(0, 0, 0, 0.25);
  /* El inset superior aparta el contenido de la isla dinámica / notch cuando la
     app se añade a la pantalla de inicio y corre a pantalla completa. */
  padding-top: calc(0.9rem + env(safe-area-inset-top));
  padding-bottom: 0.9rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}

.backbtn {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--desert);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(230, 211, 163, 0.35);
  border-radius: 50%;
  cursor: pointer;
}

.backbtn:active { background: rgba(0, 0, 0, 0.35); }
.backbtn[hidden] { display: none; }

.crown-mark {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--wheat);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.brand-text { min-width: 0; }

.brand-text h1 {
  color: var(--desert);
  font-size: 1.5rem;
  line-height: 1.1;
}

.tagline {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(230, 211, 163, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav { margin-left: auto; }

.navlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.9rem;
  font-family: Cinzel, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--desert);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  border: 1px solid rgba(230, 211, 163, 0.4);
  border-radius: 999px;
}

.navlink:hover,
.navlink:active { background: rgba(230, 211, 163, 0.15); }

/* ---------------------------------------------- pantalla */
.screen[hidden] { display: none; }

.screen {
  /* Ocupa el alto que sobra bajo la cabecera, para que el pie pueda irse abajo
     del todo aunque haya pocos grupos. */
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

.card {
  background: var(--parchment);
  border: 2px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}

.empty-hint {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-faint);
}

/* ---------------------------------------------- lista de grupos */
.group-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.group-item button {
  width: 100%;
  display: grid;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.3);
  border-left: 4px solid var(--wheat);
  border-radius: 8px;
  cursor: pointer;
}

.group-item button:active { background: var(--parchment-2); }

.group-name {
  font-family: Cinzel, serif;
  font-weight: 600;
  font-size: 1.15rem;
}

.group-meta {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.group-meta .dot,
.board-meta .dot { color: var(--ink-faint); }

.group-leader {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.leader-name { font-weight: 600; }
.leader-none { font-style: italic; color: var(--ink-faint); }

/* ---------------------------------------------- formularios y botones */
input[type="text"],
input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  /* Hereda los 17px del body. Por debajo de 16px, Safari hace zoom solo al
     enfocar el campo y deja la página descuadrada: no bajar de ahí. */
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.4);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--wheat);
  outline-offset: 1px;
}

.new-group { display: grid; gap: 0.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px es el objetivo táctil mínimo que pide Apple */
  min-height: 44px;
  font-family: Cinzel, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--frame);
  background: var(--parchment-2);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { background: var(--desert); }
.btn:active { background: var(--desert); transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(180deg, var(--wheat), #c9941f);
  border-color: var(--frame-dark);
  color: #3a2a10;
}

.btn-primary:hover,
.btn-primary:active { background: linear-gradient(180deg, var(--wheat), #c9941f); }

.btn-ghost {
  font-family: inherit;
  letter-spacing: 0;
  min-width: 44px;
  padding: 0.25rem 0.5rem;
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}

.btn-ghost:hover,
.btn-ghost:active { background: var(--parchment-2); color: var(--brick); }

/* El +1 es la acción principal de la app: en el móvil tiene que cantar */
.btn-win {
  min-width: 3.25rem;
  font-size: 1rem;
  background: linear-gradient(180deg, var(--wheat), #c9941f);
  border-color: var(--frame-dark);
  color: #3a2a10;
}

.btn-win:hover,
.btn-win:active { background: linear-gradient(180deg, var(--wheat), #c9941f); }

.btn-danger {
  width: 100%;
  background: transparent;
  border-color: var(--brick);
  color: var(--brick);
}

.btn-danger:hover,
.btn-danger:active { background: var(--brick); color: var(--parchment); }

.danger-zone { padding: 0.75rem; }

/* ---------------------------------------------- cabecera del grupo */
.group-title {
  font-family: Cinzel, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  /* Siempre con aspecto de campo: en táctil no hay hover que lo revele */
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.35);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.group-title:focus { border-color: var(--frame); }

.board-meta {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------- clasificación */
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.lb-row {
  display: grid;
  grid-template-columns: 2.1rem 0.9rem minmax(6rem, 1fr) minmax(3rem, 9rem) auto auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.28);
  border-radius: 8px;
}

.lb-row.is-leader {
  border-color: var(--wheat);
  box-shadow: inset 0 0 0 1px var(--wheat);
}

.rank {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.35rem;
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #3a2a10;
  background: var(--desert);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.lb-row.is-leader .rank { background: var(--wheat); }

.chip {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: var(--player, var(--ore));
  flex: none;
}

.lb-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-weight: 600;
}

.lb-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La corona marca a quien va primero. flex:none para que no la aplaste un
   nombre largo: lo que se recorta es el nombre, no el distintivo. */
.corona-lider {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--wheat);
}

.bar {
  height: 0.55rem;
  background: rgba(123, 75, 42, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  display: block; /* es un span: en línea no admite ancho ni alto */
  height: 100%;
  background: var(--player, var(--ore));
  border-radius: 999px;
  /* Contorno interior: el jugador blanco tenía la barra llena y parecía vacía,
     porque blanco sobre el carril claro no se distingue. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.wins {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wins small {
  display: block;
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* iPhone en vertical: cabe el puesto, el color, el nombre, las victorias y el
   +1. La barra comparativa se cae porque es lo único prescindible. */
@media (max-width: 620px) {
  /* Dos filas por jugador: nombre arriba y barra debajo, en la misma columna.
     Puesto, color, victorias y botones ocupan las dos filas. Así la barra cabe
     en el iPhone sin quitar sitio a los botones. */
  .lb-row {
    grid-template-columns: 2.1rem 0.9rem minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "rank chip name wins undo win"
      "rank chip bar  wins undo win";
    gap: 0.2rem 0.45rem;
    padding: 0.45rem 0.55rem;
  }

  .lb-row.solo {
    grid-template-columns: 2.1rem 0.9rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank chip name wins"
      "rank chip bar  wins";
  }

  .lb-row .rank     { grid-area: rank; }
  .lb-row .chip     { grid-area: chip; }
  .lb-row .lb-name  { grid-area: name; }
  .lb-row .bar      { grid-area: bar; }
  .lb-row .wins     { grid-area: wins; }
  .lb-row .btn-undo { grid-area: undo; }
  .lb-row .btn-win  { grid-area: win; }

  .lb-row .bar { display: block; height: 0.45rem; margin-top: 0.1rem; }
  .lb-name { font-size: 1.05rem; }
}

/* ---------------------------------------------- miembros */
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.member-row,
.add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.member-row input,
.add-row input { flex: 1; min-width: 0; }

.add-member { margin-top: 0.75rem; }

/* El punto de color es además el botón que abre la paleta, así que necesita
   un área de toque de 44px sin engordar el círculo. */
.chip-btn {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.35);
}

.chip-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.chip-btn:active { box-shadow: 0 0 0 3px var(--wheat); }

/* ---------------------------------------------- paleta de colores */
.swatches {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.3);
  border-radius: 8px;
}

.swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: var(--player);
  cursor: pointer;
}

.swatch.is-current {
  border-color: var(--frame-dark);
  box-shadow: 0 0 0 3px var(--wheat);
}

/* Ya lo lleva otro jugador: se puede elegir igual, pero se avisa */
.swatch.is-taken { opacity: 0.4; }

/* ---------------------------------------------- historial */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  border-bottom: 1px dotted rgba(123, 75, 42, 0.3);
}

.history-row .who { flex: 1; font-weight: 600; }
.history-row .when { font-size: 0.85rem; color: var(--ink-faint); }

/* ---------------------------------------------- diálogo de confirmación */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(16, 64, 95, 0.55);
  backdrop-filter: blur(2px);
}

.overlay[hidden] { display: none; }

.dialog {
  width: 100%;
  max-width: 420px;
  padding: 1.25rem;
  background: var(--parchment);
  border: 2px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.dialog h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.dialog p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
}

.dialog-actions {
  display: flex;
  gap: 0.6rem;
}

.dialog-actions .btn { flex: 1; }

.dialog-actions .btn-danger {
  background: var(--brick);
  color: var(--parchment);
  border-color: var(--brick);
}

/* ---------------------------------------------- cuenta y login */
.topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}


.login form { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }

.lead { margin: 0 0 1rem; color: var(--ink-soft); }

/* El código es lo único que se mira en esa pantalla: grande y espaciado */
.code-input {
  font-family: Cinzel, serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  text-indent: 0.5em;
}

.field-hint { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }

.error {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  color: #6d2a17;
  background: rgba(177, 80, 47, 0.12);
  border: 1px solid var(--brick);
  border-left-width: 4px;
  border-radius: 6px;
}

button[disabled] { opacity: 0.6; cursor: default; }

/* ---------------------------------------------- correos con acceso */
.email-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.email-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
  border-bottom: 1px dotted rgba(123, 75, 42, 0.3);
}

.email-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-text em { color: var(--ink-faint); font-size: 0.85rem; }

.row-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.row-form input { flex: 1; min-width: 0; }

/* ---------------------------------------------- miembro con correo */
.member-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

/* El correo es secundario frente al nombre: mismo tamano de letra, para que
   Safari no haga zoom al enfocarlo, pero mas apagado. */
.member-email {
  color: var(--ink-soft);
  background: var(--parchment-2);
  border-style: dashed;
}

.member-email:focus {
  background: var(--card);
  border-style: solid;
}

.add-member {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(123, 75, 42, 0.35);
}

.otros-acceso {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dotted rgba(123, 75, 42, 0.3);
}

/* ---------------------------------------------- tu balance */
.balance-fila {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}

.balance-num {
  font-family: Cinzel, serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--frame-dark);
  font-variant-numeric: tabular-nums;
}

.balance-titulo {
  font-family: Cinzel, serif;
  font-weight: 600;
  font-size: 1.05rem;
}

.balance-sub { font-size: 0.95rem; color: var(--ink-soft); }

.balance .bar { display: block; }

/* ---------------------------------------------- administracion */
.sesion-botones { display: flex; gap: 0.25rem; flex-wrap: wrap; }

.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.admin-item {
  padding: 0.7rem 0.8rem;
  background: var(--card);
  border: 1px solid rgba(123, 75, 42, 0.3);
  border-left: 4px solid var(--ore);
  border-radius: 8px;
}

.admin-nombre { font-family: Cinzel, serif; font-weight: 600; font-size: 1.1rem; }
.admin-meta { font-size: 0.9rem; color: var(--ink-soft); }
.admin-emails { word-break: break-all; color: var(--ink-faint); }

.admin-abrible { cursor: pointer; }
.admin-abrible:active { background: var(--parchment-2); }

/* Grupo en sólo consulta: sin la columna de los botones */
.lb-row.solo {
  grid-template-columns: 2.1rem 0.9rem minmax(6rem, 1fr) minmax(3rem, 9rem) auto;
}

.solo-lectura {
  margin: 0 0.25rem;
  text-align: center;
  font-style: italic;
  color: rgba(246, 236, 214, 0.85);
}

.admin-usuario { border-left-color: var(--wood); }
.admin-pendiente { border-left-color: var(--desert); }
.admin-usuario .admin-nombre,
.admin-pendiente .admin-nombre { font-family: inherit; font-size: 1rem; word-break: break-all; }

.admin-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  font-family: Cinzel, serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a2a10;
  background: var(--wheat);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------------------------------------------- tarjeta de sesion */
.sesion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
}

.sesion-email {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------- vista de la ruleta
   Se activa poniendo la clase en <html>. Mientras esta puesta, la pagina deja
   de desplazarse y cambia de fondo.

   El fondo es un ROJO PLANO, el mismo en <html> y en el <body>.

   Aqui hubo un degradado a pantalla completa y dejaba una banda en el borde
   inferior, tanto en Safari como en la webapp. Se intento moverlo al elemento
   raiz, igualar el color de debajo y desbordar la capa 25vh por cada lado: la
   banda seguia, y con un borde horizontal limpio que un degradado no sabe
   producir. Es el limite de algun elemento, no la imagen.

   Sin transicion de color no hay nada que pueda hacer costura: caiga donde
   caiga ese limite, a los dos lados hay exactamente el mismo rojo. El brillo
   central lo pone el halo de sol del propio tablero, que va dentro del SVG y
   se escala con el. */
html.vista-ruleta,
html.vista-ruleta body {
  height: 100%;
  background: #a31e22;
}

html.vista-ruleta body {
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: #f6e3b8;
  user-select: none;
  -webkit-user-select: none;
}

.ruleta {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.ruleta[hidden] { display: none; }

.ruleta .exp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.2vh;
}

.ruleta .exp-label {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(12px, 3.4vw, 16px);
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.ruleta .switch {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(246, 227, 184, 0.45);
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
  cursor: pointer;
}

.ruleta .switch::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f6e3b8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s;
}

.ruleta .switch.on { background: #e8b54a; border-color: #e8b54a; }
.ruleta .switch.on::after { transform: translateX(22px); background: #6f1013; }

/* Con la cabecera arriba queda menos alto util, de ahi el 58vh */
.ruleta .stage {
  position: relative;
  width: min(94vw, 58vh);
  height: min(94vw, 58vh);
}

#board { width: 100%; height: 100%; display: block; }
#arrowG { will-change: transform; transform-origin: 0 0; }

.ruleta .label {
  margin-top: 1.6vh;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(14px, 4vw, 20px);
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.3s;
  min-height: 1.6em;
}

.ruleta .label.spinning { opacity: 0.35; }

.ruleta .hint {
  margin-top: 0.6vh;
  font-size: clamp(10px, 2.8vw, 13px);
  opacity: 0.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: -apple-system, system-ui, sans-serif;
}

@keyframes pulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.35; }
}

.chosen { animation: pulse 1.1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  #arrowG { transition: none !important; }
  .chosen { animation: none; }
}

/* ---------------------------------------------- pie de la lista de grupos
   Crear grupo y la sesion se van abajo del todo. margin-top:auto se come el
   espacio sobrante, asi que con pocos grupos quedan al fondo de la pantalla y
   con muchos empujan hacia abajo con normalidad. */
.pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn-ancho { width: 100%; }

.new-group-acciones {
  display: flex;
  gap: 0.6rem;
}

.new-group-acciones .btn { flex: 1; }

/* ---------------------------------------------- pantalla de un grupo */
.group-titulo {
  font-family: Cinzel, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

/* Los miembros de un vistazo, en la misma tarjeta que el titulo */
.member-chips {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.member-chips li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

/* Separador entre bloques dentro de la tarjeta de edicion */
.section-title.bloque {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(123, 75, 42, 0.35);
}

.edicion-pie {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(123, 75, 42, 0.35);
}

/* ---------------------------------------------- sesion en la tarjeta del pie */
.sesion-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(123, 75, 42, 0.35);
}


/* ---------------------------------------------- quien anoto la partida
   Al pulsar la linea aparece un texto flotante encima y se va solo a los
   2,5 s. En la fila no queda nada permanente. Solo son pulsables las lineas
   con algo que ensenar; 44px de alto minimo para el dedo. */
.history-row { position: relative; min-height: 44px; }
.history-row[data-action] { cursor: pointer; }
.history-row[data-action]:active { background: rgba(123, 75, 42, 0.08); }

.history-row .by {
  position: absolute;
  left: 2rem;
  bottom: calc(100% - 0.25rem);
  z-index: 3;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--parchment);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}

.history-row.is-open .by { opacity: 1; transform: none; }

/* ---------------------------------------------- partidas eliminadas */
.history-row.eliminada .who {
  text-decoration: line-through;
  color: var(--ink-faint);
}

/* El -1 del ranking: quita la ultima victoria. Mas discreto que el +1, que
   es la accion principal, pero con 44px de alto para el dedo. */
.btn-undo {
  min-width: 2.75rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.95rem;
  background: transparent;
  border-color: rgba(123, 75, 42, 0.45);
  color: var(--brick);
}

.btn-undo:hover,
.btn-undo:active { background: rgba(177, 80, 47, 0.12); }

.btn-undo[disabled] { opacity: 0.3; }