/* ============================================================
   El Juego de Gaudí — juego.css
   Tablero tipo "oca" (serpentina), ruleta creativa, panel de
   jugadores y modales de casilla. Escenario 16:9 (body.app).
   Reutiliza tokens de main.css.
   ============================================================ */

.juego-stage {
  --c-obra: var(--eje-estructura);
  --c-autor: var(--azul-profundo);
  --c-reto: var(--turquesa);
  --c-dato: var(--amarillo);
  --c-creatividad: var(--eje-creatividad);
  --c-piensa: var(--coral);
  --c-actividad: var(--eje-arte);
  --c-extra: var(--amarillo);
  --c-mover: var(--eje-geometria);
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  display: flex; flex-direction: column;
  color: var(--tinta);
}
.juego-bg {
  position: absolute; inset: 0; z-index: 0;
  background: #3fcddb;
}

/* ---------- Barra superior ---------- */
.juego-top {
  position: relative; z-index: 3;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(16px,2.6vw,30px) clamp(14px,2.2vw,28px);
  padding-left: 12%; padding-right: 12%;
  min-height: clamp(84px,11vw,128px);
  background: linear-gradient(180deg, var(--blanco), #eef7f7);
  border-bottom: 1px solid rgba(10,34,64,0.10);
}
/* Sello 100 años · Año Gaudí 2026 (esquina superior derecha del escenario) */
.sello-100 {
  position: absolute; top: 2.4%; right: 2.2%; z-index: 9;
  height: 11%; width: auto; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(10,34,64,0.15));
}
/* Icono "volver al inicio": esquina superior izquierda, antes del logo de la Junta */
.juego-back {
  position: absolute; top: 2.4%; left: 2.2%; z-index: 10;
  height: 7.6%; display: inline-flex; align-items: center;
  text-decoration: none; color: var(--azul-profundo); font-weight: 700;
  transition: transform var(--transicion);
}
.juego-back:hover, .juego-back:focus-visible { transform: translateY(-2px) scale(1.05); outline: none; }
.juego-back-ico { height: 100%; width: auto; filter: drop-shadow(0 2px 5px rgba(10,34,64,0.18)); }
/* El logo de la Junta se desplaza a la derecha del icono de inicio */
.juego-stage .marca-junta { left: 8%; }
.juego-brand {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; line-height: 1; pointer-events: none;
}
.juego-logo { height: clamp(60px,8.8vw,114px); width: auto; display: inline-block; vertical-align: middle; }

/* ---------- Zona principal ---------- */
.juego-main {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr clamp(200px,23%,300px);
  gap: clamp(8px,1.2vw,16px);
  padding: clamp(6px,1vw,14px);
}
.board-wrap { min-width: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- Tablero serpentina ---------- */
.board {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(4px,0.7vw,9px);
}
.tile {
  position: relative;
  border-radius: clamp(7px,0.9vw,12px);
  background-color: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  border: 2px solid var(--tile, rgba(10,34,64,0.12));
  box-shadow: var(--sombra-suave);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px; text-align: center; overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
/* Skin ilustrado: las fichas recortadas traen número, icono y etiqueta */
.board--art { gap: clamp(2px,0.4vw,5px); }
.board--art .tile { background-color: transparent; border-color: transparent; box-shadow: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.board--art .tile::before { display: none; }
.board--art .tile-num, .board--art .tile-ico, .board--art .tile-lbl { display: none; }
.board--art .tile.is-current { box-shadow: 0 0 0 3px var(--tile); }
.tile::before {
  content: ''; position: absolute; inset: 0; background: var(--tile); opacity: 0.10;
}
.tile-num {
  position: absolute; top: 3px; left: 5px; z-index: 1;
  font-size: clamp(8px,0.95vw,12px); font-weight: 800; color: var(--tinta-suave);
}
.tile-ico { position: relative; z-index: 1; font-size: clamp(16px,2.3vw,30px); line-height: 1; }
.tile-ico--svg { color: var(--tile); display: grid; place-items: center; }
.tile-ico--svg svg { width: clamp(20px,2.9vw,38px); height: clamp(20px,2.9vw,38px); display: block; }
.obra-ico { display: inline-flex; vertical-align: -0.28em; color: #fff; }
.obra-ico svg { width: 1.3em; height: 1.3em; }
.tile-lbl {
  position: relative; z-index: 1;
  font-size: clamp(7px,0.85vw,11px); font-weight: 700; color: var(--tinta);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.tile.is-target { animation: tilePulse 0.9s ease infinite alternate; }
.tile.is-current { box-shadow: 0 0 0 3px var(--tile), var(--sombra); }
@keyframes tilePulse { from { transform: none; } to { transform: scale(1.05); } }

.tile--salida { --tile: var(--arena-oscura); }
.tile--meta   { --tile: var(--amarillo); }
.tile--obra        { --tile: var(--c-obra); }
.tile--autor       { --tile: var(--c-autor); }
.tile--reto        { --tile: var(--c-reto); }
.tile--dato        { --tile: var(--c-dato); }
.tile--creatividad { --tile: var(--c-creatividad); }
.tile--piensa      { --tile: var(--c-piensa); }
.tile--actividad   { --tile: var(--c-actividad); }
.tile--extra       { --tile: var(--c-extra); }
.tile--mover       { --tile: var(--c-mover); }
.tile--meta .tile-ico { font-size: clamp(20px,2.8vw,38px); }

/* ---------- Fichas (tokens) ---------- */
.token {
  position: absolute; z-index: 5; top: 0; left: 0;
  width: clamp(16px,2vw,26px); height: clamp(16px,2vw,26px);
  border-radius: 50%; border: 2px solid #fff;
  background: var(--tk, var(--turquesa));
  box-shadow: 0 3px 8px rgba(10,34,64,0.35);
  display: grid; place-items: center;
  font-size: clamp(9px,1.1vw,13px);
  transform: translate(-50%, -50%);
  transition: left 0.26s ease, top 0.26s ease;
}
.token.activo { box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 3px 10px rgba(10,34,64,0.5); }
@media (prefers-reduced-motion: reduce) { .token { transition: none; } }

/* ---------- Panel lateral ---------- */
.panel {
  min-width: 0; display: flex; flex-direction: column;
  gap: clamp(8px,1.2vw,14px);
  overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin;
}
.panel::-webkit-scrollbar { width: 7px; }
.panel::-webkit-scrollbar-thumb { background: rgba(10,34,64,0.22); border-radius: 999px; }

/* Ruleta */
.ruleta-box {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-suave);
  padding: clamp(8px,1.2vw,14px); text-align: center;
  flex: 0 0 auto;
}
.ruleta-fila { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px,0.8vw,10px); margin-bottom: 8px; }
.ruleta-drac { height: clamp(96px,13vw,164px); width: auto; flex: 0 1 auto; min-width: 0; align-self: flex-end; margin-bottom: -4px; filter: drop-shadow(0 3px 7px rgba(10,34,64,0.20)); }
.ruleta-wrap { position: relative; width: clamp(90px,11vw,140px); margin: 0 auto 8px; aspect-ratio: 1; }
.ruleta-fila .ruleta-wrap { margin: 0; }
.ruleta { cursor: pointer; }
.ruleta:hover { filter: brightness(1.05); }
.ruleta:active { filter: brightness(0.97); }
.ruleta-pico {
  position: absolute; top: -4px; left: 50%; z-index: 2; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 14px solid var(--azul-profundo);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}
.ruleta {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 4px 14px rgba(10,34,64,0.22), inset 0 0 0 2px rgba(10,34,64,0.06);
  background: conic-gradient(
    var(--turquesa) 0 60deg, var(--eje-estructura) 60deg 120deg,
    var(--amarillo) 120deg 180deg, var(--coral) 180deg 240deg,
    var(--eje-geometria) 240deg 300deg, var(--eje-arte) 300deg 360deg);
  transition: transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.ruleta-num {
  --rnum: clamp(26px,3.3vw,42px);
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 1.4em; height: 1.4em; margin: -0.7em;
  display: grid; place-items: center; line-height: 1;
  font-weight: 800; color: #fff; font-size: clamp(11px,1.35vw,16px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--rnum))) rotate(calc(-1 * var(--a)));
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) { .ruleta { transition: none; } }
.btn-tirar { width: 100%; justify-content: center; background: var(--azul-profundo); }
.btn-tirar:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
/* Acceso a los mazos hojeables desde el panel de juego */
.deck-access { display: flex; align-items: center; justify-content: center; gap: clamp(8px,1.4vw,18px); flex: 0 0 auto; }
.deck-chip {
  flex: 0 1 auto; min-width: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; line-height: 0;
  transition: transform var(--transicion), filter var(--transicion);
}
.deck-chip-ico { width: auto; height: clamp(76px,10vw,116px); max-width: 100%; }
.deck-chip:hover, .deck-chip:focus-visible {
  transform: translateY(-2px) scale(1.04); outline: none;
  filter: drop-shadow(0 3px 6px rgba(10,34,64,0.22));
}

/* Lista de jugadores */
.jugadores { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.jug {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border-radius: var(--radio); padding: 11px 14px;
  box-shadow: var(--sombra-suave); border: 2px solid transparent;
  font-size: clamp(13px,1.5vw,17px);
}
.jug.activo { border-color: var(--jk); background: color-mix(in srgb, var(--jk) 12%, #fff); box-shadow: var(--sombra-suave), 0 0 0 1px var(--jk); }
.jug-ficha {
  width: clamp(26px,3vw,34px); height: clamp(26px,3vw,34px); border-radius: 50%;
  background: var(--jk); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  flex: 0 0 auto; display: grid; place-items: center; font-size: clamp(13px,1.5vw,17px);
}
.jug-nombre { flex: 1 1 auto; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jug-estrellas { flex: 0 0 auto; font-weight: 800; color: var(--naranja); white-space: nowrap; font-size: 1.05em; }
.jug-cpu { font-size: 0.85em; color: var(--tinta); }

/* Leyenda */
.leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: clamp(9.5px,1.15vw,13px); color: var(--tinta); flex: 0 0 auto; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; background: var(--lc); flex: 0 0 auto; }

.log {
  margin: 0; font-size: clamp(11px,1.35vw,15px); color: var(--tinta);
  background: rgba(10,34,64,0.04); border-radius: var(--radio-s);
  padding: 7px 10px; flex: 1 1 auto; overflow: auto; min-height: 0;
}

/* ============================================================
   Modal de casilla
   ============================================================ */
.modal {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(10,20,34,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: clamp(12px,2.5vw,40px);
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  width: min(760px, 95%); max-height: 92%; overflow: auto;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra); border-top: 6px solid var(--mc, var(--turquesa));
  padding: clamp(20px,3vw,40px);
  animation: cardIn 0.28s ease;
}
/* Botón continuar en la esquina superior derecha (fichas con foto) */
.modal-cerrar {
  position: absolute; top: clamp(18px,2.6vw,28px); right: 14px; z-index: 3;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--mc, var(--turquesa)); color: #fff; font-weight: 800;
  font-size: clamp(0.85rem,1.3vw,1rem); padding: 9px 18px;
  box-shadow: 0 4px 12px rgba(10,34,64,0.22);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.modal-cerrar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sombra); }
.modal-cerrar:disabled { opacity: 0.6; cursor: default; }
.modal-card.has-corner h2 { padding-right: clamp(96px,16vw,150px); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }
.modal-tipo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: var(--mc, var(--turquesa)); border-radius: 999px; padding: 4px 12px; margin: 0 0 10px;
}
.modal-card h2 { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.4rem); margin: 0 0 10px; }
.modal-card p { font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.5; }
.modal-obra-img {
  width: 100%; height: clamp(230px,44vh,400px); object-fit: cover; object-position: center 35%;
  border-radius: var(--radio-s); margin: 4px 0 14px; background: rgba(10,34,64,0.06);
}
.modal-cita { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem,1.9vw,1.5rem); color: var(--azul); margin: 6px 0; }
.modal-obra-tag { font-size: 0.85rem; font-weight: 700; color: var(--tinta-suave); margin-bottom: 4px; }

/* Retos dentro del modal */
.q-opciones { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; gap: 9px; }
.q-opciones button {
  width: 100%; text-align: left; border: 2px solid rgba(10,34,64,0.12); background: #fff;
  border-radius: var(--radio-s); padding: 11px 14px; font-size: clamp(0.92rem,1.4vw,1.05rem);
  font-weight: 600; color: var(--tinta); transition: border-color var(--transicion), background var(--transicion);
}
.q-opciones button:hover:not(:disabled) { border-color: var(--turquesa); }
.q-opciones.vf { grid-template-columns: 1fr 1fr; }
.q-opciones button.ok { border-color: var(--verde); background: rgba(46,158,91,0.12); }
.q-opciones button.ko { border-color: var(--coral); background: rgba(255,122,89,0.12); }
.q-opciones button:disabled { cursor: default; }
.q-huecos { font-size: clamp(0.98rem,1.6vw,1.18rem); line-height: 2.1; }
.q-huecos input {
  font: inherit; font-weight: 700; text-align: center; border: none; border-bottom: 2px solid var(--turquesa);
  background: rgba(26,188,156,0.08); border-radius: 6px 6px 0 0; padding: 2px 6px; min-width: 70px; color: var(--azul-profundo);
}

/* Huecos arrastrables */
.q-huecos-dnd { font-size: clamp(1rem,1.7vw,1.25rem); line-height: 2.5; margin: 6px 0 4px; }
.hk-seg { white-space: pre-wrap; }
.hk-slot {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: clamp(82px,11vw,120px); min-height: 1.9em; margin: 0 4px; padding: 2px 6px;
  border: 2px dashed var(--turquesa); border-radius: 8px; background: rgba(26,188,156,0.07);
  cursor: pointer; transition: background var(--transicion), border-color var(--transicion);
}
.hk-slot.filled { border-style: solid; background: #fff; padding: 0; }
.hk-slot.drop { background: rgba(26,188,156,0.22); border-color: var(--azul-profundo); }
.hk-slot.ok { border-color: var(--verde); background: rgba(46,158,91,0.14); }
.hk-slot.ko { border-color: var(--coral); background: rgba(255,122,89,0.14); }
.hk-hint { font-size: clamp(0.82rem,1.2vw,0.95rem); color: var(--tinta-suave); margin: 6px 0 10px; }
.hk-bank { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 6px; min-height: 44px;
  padding: 8px; border-radius: var(--radio-s); background: rgba(10,34,64,0.04); }
.hk-word {
  border: 2px solid rgba(10,34,64,0.16); background: #fff; border-radius: 999px;
  padding: 9px 16px; font-weight: 700; font-size: clamp(0.92rem,1.4vw,1.08rem);
  color: var(--azul-profundo); cursor: grab; transition: transform var(--transicion), border-color var(--transicion), background var(--transicion);
}
.hk-word:hover { border-color: var(--turquesa); }
.hk-word.sel { border-color: var(--turquesa); background: rgba(26,188,156,0.16); box-shadow: var(--sombra-suave); transform: translateY(-1px); }
.hk-word.drag { opacity: 0.5; }
.hk-word.en-slot { cursor: pointer; border-style: solid; border-color: var(--mc,var(--turquesa)); margin: 0; }
.hk-slot.ok .hk-word { border-color: var(--verde); }
.hk-slot.ko .hk-word { border-color: var(--coral); }

/* Relacionar: dos columnas de fichas que se emparejan (clic → clic) */
.rel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px,2vw,22px); margin: 12px 0 4px; }
.rel-col { display: flex; flex-direction: column; gap: 9px; }
.rel-ficha {
  position: relative; text-align: left; cursor: pointer;
  border: 2px solid rgba(10,34,64,0.16); background: #fff; border-radius: var(--radio-s);
  padding: 10px 12px; font-weight: 600; font-size: clamp(0.86rem,1.3vw,1.02rem);
  color: var(--azul-profundo); line-height: 1.25;
  transition: transform var(--transicion), border-color var(--transicion), background var(--transicion);
}
.rel-ficha:hover:not(.linked) { border-color: var(--turquesa); }
.rel-ficha.sel { border-color: var(--turquesa); background: rgba(26,188,156,0.16); box-shadow: var(--sombra-suave); transform: translateY(-1px); }
.rel-ficha.linked { cursor: default; border-style: solid; }
.rel-ficha.ok { border-color: var(--verde); background: rgba(46,158,91,0.12); }
.rel-ficha.ko { border-color: var(--coral); background: rgba(255,122,89,0.12); }
.rel-badge {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: 6px;
  border-radius: 999px; background: var(--azul-profundo); color: #fff;
  font-size: 0.78em; font-weight: 800; vertical-align: middle;
}
.rel-ficha.ok .rel-badge { background: var(--verde); }
.rel-ficha.ko .rel-badge { background: var(--coral); }
.rel-hint { font-size: clamp(0.82rem,1.2vw,0.95rem); color: var(--tinta-suave); margin: 8px 0 10px; }
.q-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radio-s); margin: 4px 0 12px; background: rgba(10,34,64,0.08); }

/* Reto: imagen de la obra a todo el ancho, debajo del enunciado */
.reto-img {
  display: block; width: 100%; height: clamp(150px,26vh,260px);
  object-fit: cover; object-position: center 35%;
  border-radius: var(--radio-s); margin: 8px 0 14px;
  background: rgba(10,34,64,0.06); box-shadow: var(--sombra-suave);
}
.modal-feedback { font-weight: 700; margin: 12px 0 4px; min-height: 1.2em; }
.modal-feedback.ok { color: var(--verde); }
.modal-feedback.ko { color: var(--coral); }
.modal-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.modal-nota { width: 100%; min-height: 80px; font: inherit; border: 2px solid rgba(10,34,64,0.12); border-radius: var(--radio-s); padding: 10px; resize: vertical; }
.modal-estrella { color: var(--naranja); font-weight: 800; }

/* ============================================================
   Configuración inicial
   ============================================================ */
.setup, .fin {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center; overflow: auto;
  background:
    radial-gradient(circle at 15% 12%, rgba(26,188,156,0.18), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(255,122,89,0.18), transparent 50%),
    var(--blanco);
  padding: clamp(8px,1.6vw,20px);
}
.setup[hidden], .fin[hidden] { display: none; }
.setup-card, .fin-card {
  width: min(680px, 96%); background: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra); padding: clamp(14px,2vw,26px); text-align: center;
}
.setup-eyebrow { color: var(--coral); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; margin: 0 0 4px; }
.setup-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem,4vw,3rem); margin: 0 0 8px; }
.setup-lema { color: var(--tinta-suave); max-width: 52ch; margin: 0 auto 18px; }
.setup-logo { height: clamp(54px,7.6vw,96px); width: auto; display: block; margin: 0 auto 8px; }
.setup-hola { display: flex; align-items: center; gap: clamp(8px,1.6vw,16px); text-align: left; margin: 0 0 12px; }
.setup-drac { flex: 0 0 clamp(92px,14vw,146px); width: clamp(92px,14vw,146px); height: auto; align-self: flex-end; filter: drop-shadow(0 3px 7px rgba(10,34,64,0.2)); }
.setup-hola-tx { flex: 1 1 auto; min-width: 0; }
.setup-hola .setup-title { font-size: clamp(1.2rem,2.5vw,1.9rem); margin: 0 0 4px; color: #02417c; }
.setup-hola .setup-lema { margin: 0; max-width: none; color: var(--tinta); }
@media (max-width: 540px) { .setup-hola { flex-direction: column; text-align: center; align-items: center; } .setup-drac { align-self: center; } }
.setup-group { border: none; margin: 0 0 10px; padding: 0; text-align: left; }
.setup-group legend { font-weight: 800; color: #02417c; margin-bottom: 6px; font-size: clamp(0.95rem,1.6vw,1.15rem); }
.setup-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .setup-modos { grid-template-columns: 1fr; } }
.modo {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  border: 2px solid rgba(10,34,64,0.12); background: #fff; border-radius: var(--radio);
  padding: 9px 10px; transition: border-color var(--transicion), transform var(--transicion), background var(--transicion);
}
.modo:hover { transform: translateY(-2px); border-color: var(--turquesa); }
.modo.sel { border-color: var(--turquesa); background: rgba(26,188,156,0.10); box-shadow: var(--sombra-suave); }
.modo-ico { font-size: 1.5rem; line-height: 1.1; }
.modo strong { font-size: clamp(0.92rem,1.4vw,1.05rem); color: var(--azul-profundo); }
.modo small { color: var(--tinta-suave); font-size: 0.8rem; line-height: 1.25; }
.setup-num { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.setup-num button {
  border: 2px solid rgba(10,34,64,0.12); background: #fff; border-radius: 999px;
  padding: 7px 16px; font-weight: 700; color: var(--tinta); transition: border-color var(--transicion), background var(--transicion);
}
.setup-num button.sel { border-color: var(--turquesa); background: rgba(26,188,156,0.12); }
.setup-nombres { display: grid; gap: 8px; }
.setup-nombre { display: flex; align-items: center; gap: 10px; }
.setup-nombre .pip { width: 18px; height: 18px; border-radius: 50%; background: var(--jk); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); flex: 0 0 auto; }
.setup-nombre input { flex: 1 1 auto; font: inherit; border: 2px solid rgba(10,34,64,0.12); border-radius: var(--radio-s); padding: 8px 12px; }
.setup-nombre input:focus-visible { outline: none; border-color: var(--turquesa); }
.btn-empezar { margin-top: 4px; font-size: clamp(1rem,1.7vw,1.2rem); padding: 11px 28px; }
.btn-empezar:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }

/* ============================================================
   Pantalla final
   ============================================================ */
.fin-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem,4vw,3rem); margin: 0 0 6px; }
.fin-sub { color: var(--tinta-suave); margin: 0 0 18px; }
.fin-rank { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; text-align: left; }
.fin-rank li { display: flex; align-items: center; gap: 10px; background: rgba(10,34,64,0.04); border-radius: var(--radio-s); padding: 10px 14px; font-weight: 700; }
.fin-rank li.ganador { background: rgba(255,209,102,0.25); box-shadow: inset 0 0 0 2px var(--amarillo); }
.fin-rank .pos { font-size: 1.2rem; }
.fin-rank .pip { width: 18px; height: 18px; border-radius: 50%; background: var(--jk); border: 2px solid #fff; }
.fin-rank .nm { flex: 1 1 auto; }
.fin-drac {
  display: flex; align-items: center; gap: clamp(10px,2vw,18px); text-align: left;
  background: linear-gradient(180deg, rgba(63,205,219,0.12), rgba(26,188,156,0.10));
  border: 1px solid rgba(26,188,156,0.28); border-radius: var(--radio);
  padding: clamp(12px,1.8vw,18px); margin: 0 0 18px;
}
.fin-drac-img { flex: 0 0 auto; width: clamp(64px,10vw,96px); height: auto; }
.fin-drac-tx { margin: 0; font-size: clamp(0.92rem,1.4vw,1.05rem); line-height: 1.45; color: var(--tinta); }
.fin-drac-tx strong { color: var(--azul-profundo); }
.fin-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Mascota (el Drac)
   ============================================================ */
.mascota {
  position: absolute; top: 13%; left: 8%; z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; max-width: min(46%, 300px);
  animation: mascotaWander 34s ease-in-out infinite;
}
@keyframes mascotaWander {
  0%   { top: 13%; left: 8%; }
  20%  { top: 19%; left: 30%; }
  40%  { top: 12%; left: 52%; }
  60%  { top: 21%; left: 33%; }
  80%  { top: 15%; left: 13%; }
  100% { top: 13%; left: 8%; }
}
.mascota[hidden] { display: none; }
.mascota-cara {
  pointer-events: auto; padding: 0; overflow: hidden;
  width: clamp(104px,13vw,160px); height: clamp(104px,13vw,160px);
  border-radius: 50%; border: 3px solid #fff;
  background: #fff;
  box-shadow: var(--sombra); font-size: clamp(24px,3.4vw,40px);
  display: grid; place-items: center; cursor: pointer;
  animation: mascotaBob 3s ease-in-out infinite;
  transition: transform var(--transicion);
}
.mascota-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mascota-cara:hover { transform: scale(1.06); }
@keyframes mascotaBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mascota-bocadillo {
  pointer-events: none; position: relative;
  max-width: clamp(180px,26vw,320px);
  background: #fff; border-radius: 16px; padding: 11px 15px;
  box-shadow: var(--sombra); font-size: clamp(11px,1.35vw,15px); font-weight: 600; line-height: 1.4;
  color: var(--tinta);
  opacity: 0; transform: translateY(-10px) scale(0.96); transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mascota-bocadillo.show { opacity: 1; transform: none; }
.mascota-bocadillo::after {
  content: ''; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: #fff; border-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mascota-cara { animation: none; }
  .mascota { animation: none; }
}

:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Mazo hojeable de cartas (obras / autor)
   ============================================================ */
.deck {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: clamp(6px,1.4vw,18px);
  background: rgba(10,20,34,0.55);
}
.deck[hidden] { display: none; }
.deck-panel {
  width: min(1000px, 96%); max-height: 97%; height: 97%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
}
.deck-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: clamp(10px,1.6vw,18px); border-bottom: 1px solid rgba(10,34,64,0.08); flex: 0 0 auto;
}
.deck-tabs { display: flex; align-items: center; gap: clamp(6px,1.2vw,14px); }
.deck-tab {
  border: none; background: none; padding: 2px; cursor: pointer; line-height: 0; border-radius: 999px;
  opacity: 0.5; filter: grayscale(0.35);
  transition: opacity var(--transicion), transform var(--transicion), filter var(--transicion);
}
.deck-tab:hover { opacity: 0.85; }
.deck-tab.activo { opacity: 1; filter: none; transform: scale(1.04); }
.deck-tab:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }
.deck-tab-ico { height: clamp(54px,7.4vw,88px); width: auto; display: block; }
.deck-close {
  border: none; background: rgba(10,34,64,0.06); color: var(--azul-profundo);
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; flex: 0 0 auto;
}
.deck-carril {
  flex: 1 1 auto; min-height: 0; display: flex; gap: clamp(12px,2vw,20px);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: clamp(14px,2.5vw,28px); cursor: grab;
}
.deck-carril.agarrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.deck-carta {
  flex: 0 0 clamp(258px,62%,420px); scroll-snap-align: center;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(10,34,64,0.08); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra-suave);
}
.deck-foto { height: clamp(130px,22vh,220px); background: rgba(10,34,64,0.06); flex: 0 0 auto; }
.deck-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.deck-cuerpo { padding: clamp(14px,2vw,22px); display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.deck-sup { margin: 0; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--turquesa); }
.deck-cuerpo h3 { font-family: var(--font-display); font-size: clamp(1.2rem,2.2vw,1.7rem); margin: 0 0 4px; color: var(--azul-profundo); }
.deck-tx { margin: 0; font-size: clamp(0.95rem,1.5vw,1.1rem); line-height: 1.5; color: var(--tinta); }
.deck-idx { margin-top: auto; padding-top: 10px; font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); }
.deck-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: clamp(8px,1.4vw,14px); border-top: 1px solid rgba(10,34,64,0.08); flex: 0 0 auto;
}
.deck-prev, .deck-next {
  border: none; background: var(--azul-profundo); color: #fff; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; flex: 0 0 auto;
}
.deck-prev:hover, .deck-next:hover { background: var(--azul); }
.deck-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 64%; }
.deck-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: rgba(10,34,64,0.22); cursor: pointer; transition: transform var(--transicion), background var(--transicion); }
.deck-dots button.activo { background: var(--turquesa); transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .deck-carril { scroll-behavior: auto; } }