/* ==========================================================================
   BASE: estructura y layout. NO contiene colores ni fuentes propias:
   todo viene de las variables que define el tema (css/themes/*.css).

   Variables que debe definir un tema:
   --bg --surface --surface-hover --border --text --muted
   --accent --accent-2 --good --bad --warn --on-accent
   --radius --radius-sm --font-display --font-body --backdrop
   --confetti-1 ... --confetti-5
   Opcional: --pu en .inv-slot[data-id="..."] y .pu-card[data-id="..."] (color de cada power-up;
   ids: vida salto reubicar eliminar pm100 inversion centena blindaje menormayor adivino duo comodin iman vecino escoba premio fotocopia pacto bomba pandora hucha compresor escalera fantasma radiactivo ofrenda correlativo espejo elevador rebobinar zombie semilla apuesta idolo huevo telarana glorioso evolucion eco prisma desfase camaleon platillo lampara disquete pedido cupido trilero equilibrio dividir pisoton reanimar chatarra acciones ceguera plazo topo amuleto tombola retrete limpieza purga parche frenesi ascenso avaricia volcan jackpot corazonada matrioska alquiler testamento ayuno monje).
   Opcional: color de cada rareza en [data-rarity="raro"] / [data-rarity="epico"] (etiqueta .rarity y tarjeta .pu-card)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
/* Tamaño de letra elegido en Configuración (--fs lo pone game.js: 1 = normal). Todo el texto está en rem, así que escala junto. */
html { font-size: calc(100% * var(--fs, 1)); }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ---------- Cabecera ---------- */
.topbar {
    position: relative;
    z-index: 40;   /* el menú de temas se despliega por encima del tablero */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(12px, 3vw, 32px);
}

.logo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.logo span { color: var(--accent); }

.actions { position: relative; display: flex; gap: 8px; }



.icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: color .2s, border-color .2s, background .2s, transform .15s;
}
.icon-btn svg { width: 22px; height: 22px; }
@media (hover: hover) { .icon-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface-hover); } }
.icon-btn:active { transform: scale(.92); }
.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#soundBtn .slash { display: none; }
#soundBtn[aria-pressed="false"] .slash { display: block; }
#soundBtn[aria-pressed="false"] .waves { display: none; }

/* ---------- Layout ---------- */
.layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 520px);
    justify-content: center;
    align-items: start;
    gap: clamp(16px, 3vw, 40px);
    padding: 8px clamp(12px, 3vw, 32px) 24px;
    width: 100%;
}

/* ---------- Panel lateral ---------- */
.panel {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.stat-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.bump { animation: bump .3s ease; }

/* El contador de colocados junto a la barra solo se ve en móvil (en escritorio están las cajitas de estadísticas) */
.progress-row { display: block; }
.progress-count { display: none; }
.progress {
    height: 8px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
/* Un segmento por casilla por rellenar (los pone game.js); se encienden los primeros tantos como casillas colocadas */
.progress-bar {
    display: flex;
    gap: 2px;
    height: 100%;
    width: 100%;
    border-radius: inherit;
}
.progress-bar i {
    flex: 1;
    min-width: 0;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    transition: background .3s;
}
.progress-bar i.on { background: var(--accent); }

.draw-zone { display: flex; flex-direction: column; gap: 14px; }

.draw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 190px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.draw-label { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.draw-value {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 9vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.draw-card.has-number .draw-value { color: var(--text); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.draw-card.is-stuck { border-color: var(--bad); }
/* Glorioso: destellos en las esquinas de la tarjeta del número marcado (position absolute: no cambian el tamaño); color y animación, del tema */
.star-spark { display: none; position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none; }
.star-spark svg { display: block; width: 100%; height: 100%; }
.star-spark.tl { top: 8px; left: 8px; }
.star-spark.tr { top: 8px; right: 8px; }
.star-spark.bl { bottom: 8px; left: 8px; }
.star-spark.br { bottom: 8px; right: 8px; }
.draw-card.is-star .star-spark { display: block; }

/* Victoria: la tarjeta muestra un trofeo en lugar del número */
.draw-card.is-won { border-color: var(--warn); }
.draw-card.is-won .draw-label { visibility: hidden; }
.draw-card.is-won .draw-value { color: var(--warn); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.draw-value svg { width: 1em; height: 1em; display: block; }
.draw-card.is-won .draw-value svg { animation: trophy-float 2.6s ease-in-out infinite; }

.draw-actions { display: flex; flex-direction: column; gap: 8px; }
.draw-actions .btn { width: 100%; }
.draw-actions[hidden] { display: none; }

.draw-card.is-rolling .draw-value { color: var(--accent); }

/* Lo que anuncian el Adivino (próximos números) y el Dúo */
.draw-note { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.draw-note[hidden] { display: none; }

/* Iconos de los efectos preparados (Blindaje, Dúo) bajo el aviso */
.draw-badges { display: flex; justify-content: center; gap: 8px; }
.draw-badges:empty { display: none; }
.draw-badge { --pu: var(--accent); width: 24px; height: 24px; color: var(--pu); animation: badge-pulse 1.6s ease-in-out infinite; }
.draw-badge svg { width: 100%; height: 100%; display: block; }
@keyframes badge-pulse { 50% { transform: scale(1.18); } }

/* Etiqueta que sube y se desvanece sobre la tarjeta ("Vida usada", "Blindaje") */
.draw-fx {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bad);
}
.draw-fx.show { animation: fx-rise 1.5s ease-out forwards; }
.draw-card.has-fx .draw-label { visibility: hidden; }
@keyframes fx-rise {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
    70% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}

/* El número descartado se encoge y desaparece (gana a las animaciones del estado "atascado" de cada tema) */
.draw-card.is-stuck.is-dismissing .draw-value { animation: dismiss-number .45s ease-in forwards; }
@keyframes dismiss-number { to { transform: scale(0) rotate(-20deg); opacity: 0; } }

/* Dúo: dos números lado a lado para elegir uno */
.draw-card.is-duo .draw-value { display: flex; gap: 12px; font-size: clamp(2rem, 6vw, 3rem); }
/* Póker: 3-4 números en cuadrícula de dos columnas */
.draw-card.is-multi .draw-value { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 6px 8px; }
.duo-pick {
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: transform .15s, background .2s, box-shadow .2s;
}
.duo-pick.is-previewed { background: var(--surface-hover); transform: translateY(-3px); }
@media (hover: hover) { .duo-pick:hover { background: var(--surface-hover); transform: translateY(-3px); } }

/* Inventario de power-ups: 3 huecos con icono y nombre. Debajo (escritorio) o en una hoja sobre la barra (móvil)
   van el aviso de atasco y la ficha del power-up seleccionado. Cada tema puede dar color propio a un power-up
   con [data-id="salto"] { --pu: ... } */
.inventory { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 4px; }
.inv-slots { display: grid; grid-template-columns: repeat(var(--inv-slots, 4), 1fr); gap: 8px; }   /* --inv-slots lo pone game.js (INV_MAX) */
.inv-slot, .pu-card { --pu: var(--accent); }
.inv-badge { position: absolute; top: 4px; right: 5px; font-size: .85rem; line-height: 1; font-variant-numeric: tabular-nums; }   /* contador en la esquina del hueco (Hucha); vacío = oculto */
.inv-badge:empty { display: none; }
.inv-badge:has(svg:not(.arrow)) { top: 2px; right: 0; }   /* la marca del Camaleón, pegada a la esquina */
.cham-arrow { display: inline-block; vertical-align: -.1em; }   /* la flecha «Camaleón → Imán» de la ficha: SVG, porque la fuente pixelada no tiene el glyph «→» y sale como una raya */
.cham-arrow svg { display: block; width: 1.5em; height: 1.2em; }
.preview-arrow { display: inline-block; vertical-align: middle; transform: translateY(-2px); margin: 0 10px; }   /* la flecha de las vistas previas de la ficha (Inversión, Dividir): sutil, centrada con las cifras (medidas elegidas por el usuario) */
.preview-arrow svg { display: block; width: .8em; height: 1.2em; }
.inv-btn .preview-arrow { margin: 0 6px; }
.inv-btn .preview-arrow svg { width: .6em; }   /* dentro de un botón de la ficha (±100 y futuros): más estrecha; las vistas previas (Inversión, Dividir) no cambian */
.inv-badge svg:not(.arrow) { display: block; width: 1.2rem; height: 1.2rem; }   /* Camaleón: su icono hace de marca de esquina (tamaño fijo en rem: un % haría crecer el hueco) */
.inv-slot {
    position: relative;
    min-width: 0;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
@media (hover: hover) { .inv-slot:not(.is-empty):hover { background: var(--surface-hover); border-color: var(--pu); } }
.inv-slot:not(.is-empty):active { transform: scale(.96); }
.inv-slot[aria-pressed="true"] { border-color: var(--pu); background: var(--surface-hover); }
.inv-icon { width: 36px; height: 36px; color: var(--pu); }
.inv-icon svg, .pu-icon svg { width: 100%; height: 100%; display: block; }
.inv-name { font-size: .8rem; font-weight: 700; line-height: 1.05; text-align: center; letter-spacing: .02em; }
.inv-slot.is-empty { border-style: dashed; cursor: default; }
.inv-slot.is-empty .inv-name { color: var(--muted); font-weight: 500; }
.inv-slot.is-empty .inv-icon { visibility: hidden; }
.inv-slot.is-dim .inv-icon, .inv-slot.is-dim .inv-name { opacity: .4; }   /* power-up que ahora no serviría (p. ej. centena que no cabe) */
.inv-slot.is-rescue { border-color: var(--warn); animation: rescue-pulse 1s ease-in-out infinite; }
.inv-slot.just-added { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }

/* Copia de un power-up gastado que se anima encima de su hueco y desaparece; la Vida lleva un efecto más largo */
.inv-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; animation: ghost-use .6s ease-in forwards; }
.inv-ghost.is-life { animation: ghost-life 1.3s ease-in-out forwards; }
@keyframes ghost-use {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    30% { transform: translateY(-18px) scale(1.12); opacity: 1; }
    100% { transform: translateY(-48px) scale(1.7); opacity: 0; }
}
@keyframes ghost-life {
    0% { transform: rotate(0) scale(1); opacity: 1; }
    8% { transform: rotate(-30deg) scale(1.05); }
    24% { transform: rotate(30deg) scale(1.08); }
    40% { transform: rotate(-30deg) scale(1.1); }
    56% { transform: rotate(30deg) scale(1.12); opacity: 1; }
    68% { transform: rotate(0) scale(1.15); opacity: 1; }
    100% { transform: rotate(0) scale(2.8); opacity: 0; }
}

/* Segmentos hasta el próximo power-up (uno por colocación) */
.reward-meter { display: flex; justify-content: center; gap: 6px; }
.reward-meter i {
    width: 20px;
    height: 6px;
    border-radius: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background .3s, border-color .3s, box-shadow .3s;
}
.reward-meter i.is-on { background: var(--accent); border-color: var(--accent); }
.reward-meter i.is-next { border-color: var(--accent); animation: meter-blink 1s ease-in-out infinite; }

/* Rareza: etiqueta junto al nombre del power-up */
.rarity { font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inv-detail h3 .rarity { margin-left: 8px; }
.rarity[data-rarity="raro"] { color: var(--accent); }
.rarity[data-rarity="epico"] { color: var(--accent-2); }

.inv-panel { display: flex; flex-direction: column; gap: 8px; }
.inv-stuck, .inv-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    text-align: left;
}
.inv-stuck { border-color: var(--bad); }
.inv-stuck[hidden], .inv-detail[hidden], .rail-magnet[hidden] { display: none; }
.inv-stuck p, .inv-detail p, .inv-detail h3 { margin: 0; }
.inv-detail h3 { font-family: var(--font-display); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.inv-detail p, .inv-stuck p { color: var(--muted); font-size: .95rem; line-height: 1.25; }
.inv-stuck strong { color: var(--text); }
.inv-detail .inv-why { color: var(--warn); }
.inv-hint.is-good, .pu-hint.is-good { color: var(--good); }
.inv-hint.is-bad, .pu-hint.is-bad { color: var(--bad); }
.pu-hint { font-size: .8rem; font-weight: 700; line-height: 1.15; }
.inv-detail .inv-preview { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.inv-actions { display: flex; gap: 8px; }
/* Decreto: campo numérico de la ficha (colores y bordes: el tema) */
.inv-input { width: 100%; padding: 8px 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-family: var(--font-display); font-size: 1.15rem; text-align: center; }
.inv-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-btn {
    flex: 1;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: background .2s, opacity .2s;
}
@media (hover: hover) { .inv-btn:hover:not(:disabled) { background: var(--surface-hover); } }
.inv-btn:disabled { opacity: .4; cursor: not-allowed; }
.inv-btn.danger { border-color: var(--bad); }

/* Recompensa: tarjetas grandes de power-up */
.reward-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-bottom: 20px; }
.pu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--surface);
    border: 1px solid var(--pu);
    border-radius: var(--radius-sm);
    transition: transform .15s, background .2s, box-shadow .2s;
}
@media (hover: hover) { .pu-card:hover { background: var(--surface-hover); transform: translateY(-3px); } }
.pu-card:disabled { opacity: .4; cursor: not-allowed; }   /* p. ej. el Ídolo maldito en la ventana de sustituir */
.pu-icon { width: 44px; height: 44px; color: var(--pu); }
.pu-name { font-family: var(--font-display); font-size: .9rem; font-weight: 700; }
.pu-desc { color: var(--muted); font-size: .85rem; line-height: 1.2; }

.btn {
    padding: 16px 24px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .15s, filter .2s, opacity .2s;
}
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); } }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.attention { animation: shake .4s; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }

/* ---------- Tablero ---------- */
.board-wrap { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; min-height: 0; }

.rail { position: relative; }
.rail-track { position: absolute; top: calc(50% / var(--rows, 20)); bottom: calc(50% / var(--rows, 20)); left: 0; right: 0; }   /* medio hueco de fila arriba y abajo; --rows lo pone game.js */
.rail-track::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 6px;
    width: 2px;
    background: var(--border);
}
.rail-marker {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 44px;
    padding: 3px 6px;
    transform: translateY(-50%) scale(0);
    border-radius: 6px;
    background: var(--accent-2);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    transition: top .5s cubic-bezier(.2, .8, .2, 1), transform .3s;
}
.rail-marker.visible { transform: translateY(-50%) scale(1); }
/* Rango que el Imán obliga a cumplir al siguiente número */
.rail-magnet {
    position: absolute;
    right: 2px;
    width: 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-2) 55%, transparent);
    border: 1px solid var(--accent-2);
    transition: top .4s, height .4s;
}

.board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(var(--rows, 20), var(--row-h, minmax(var(--row-min, 46px), 1fr)));   /* --rows y --row-h los pone game.js según la dificultad; un tema puede ajustar --row-min */
    gap: 6px;
}
.board > li { min-height: 0; }

.slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;   /* el número de fila a la izquierda y el valor a la derecha (márgenes auto, abajo); los iconos de fila (regalo, corazón, topo, cubilete, cuentas atrás, Wi-Fi) quedan juntos en el centro */
    gap: 6px;
    padding: 0 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.slot-prize { display: none; width: 1.5rem; height: 1.5rem; flex: none; }   /* tamaño fijo: un % o aspect-ratio haría crecer la fila */   /* regalo del Premio: solo con .is-prize; su color lo pone el tema */
.slot.is-prize .slot-prize { display: block; }
.slot-heart { display: none; width: 2.6rem; height: 1.3rem; flex: none; }   /* corazón de Cupido con su flecha (dibujo 16x8: doble de ancho que de alto): solo con .is-heart; alto fijo menor que el de la fila */
.slot.is-heart .slot-heart { display: block; }
.slot-mole { display: none; width: 1.5rem; height: 1.5rem; flex: none; }   /* topo del power-up Topo: solo con .is-mole; mismo tamaño fijo que el corazón */
.slot.is-mole .slot-mole { display: block; }
.slot-cup { display: none; width: 1.5rem; height: 1.5rem; flex: none; }   /* cubilete del Trilero: marca las tres casillas elegidas mientras se decide */
.slot.is-cup .slot-cup { display: block; }
.reward-gift { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto .6rem; }   /* regalo sobre el título de la recompensa del Premio */
/* Wi-Fi: va dentro de .slot-ghosts como un grupo más: un icono por turno que queda en la casilla del router (1,5 rem, como los demás) y uno
   pequeño en las casillas que alcanza (.wifi-pip). Junto a otro efecto, queda a su lado con un hueco */
.wifi-grp { display: flex; gap: 3px; align-items: center; }
.wifi-grp:not(:first-child) { margin-left: 8px; }
.wifi-pip svg { width: .95rem; height: .95rem; }
/* Número puesto por un power-up (Semilla, Correlativo, Espejo, Suerte): icono del power-up junto al número, junto al número de fila (position absolute: no cambia la altura de la fila) */
.slot-mark { display: none; position: absolute; left: 2.6rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -.6rem; pointer-events: none; }
.slot-mark svg { display: block; width: 100%; height: 100%; }
.slot.is-marked .slot-mark { display: block; }
.slot.is-marked { position: relative; }
.slot-ghosts { display: none; gap: 3px; align-items: center; }   /* cuenta atrás del Fantasma: un fantasmita por número que falta */
.slot.is-ghost .slot-ghosts, .slot.is-rad .slot-ghosts, .slot.is-zombie .slot-ghosts, .slot.is-seed .slot-ghosts, .slot.is-egg .slot-ghosts, .slot.is-web .slot-ghosts, .slot.is-mine .slot-ghosts, .slot.is-cursed .slot-ghosts, .slot.is-ufo .slot-ghosts, .slot.is-wifi .slot-ghosts, .slot.is-wifi-range .slot-ghosts, .slot.is-infected .slot-ghosts, .slot.is-portal .slot-ghosts { display: flex; }
/* Telaraña: dos telarañas de esquina y hilos entre ellas, a lo largo de la casilla (position absolute: no cambia el tamaño de la fila); su color y animaciones los pone el tema */
.slot-web { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.slot-web svg { position: absolute; }
.slot-web .web-c { top: 0; left: 0; height: 100%; aspect-ratio: 1; }   /* esquina cuadrada, con la altura de la fila: sin estirar */
.slot-web .web-br { top: auto; left: auto; right: 0; bottom: 0; transform: rotate(180deg); }
.slot-web .web-t { inset: 0; width: 100%; height: 100%; }   /* hilos rectos entre las esquinas */
.slot-web * { vector-effect: non-scaling-stroke; }
.slot.is-web { position: relative; }
/* Platillo: capa que tapa la casilla mientras abduce su número (colores y animación: el tema) */
.slot.is-abducting { position: relative; }
.ufo-fx { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.ufo-fx svg { width: 2rem; height: 2rem; flex: none; }
.slot.is-ufo .slot-ghosts svg { width: 2rem; height: 2rem; }   /* el platillo que baja, algo mayor que los iconos de cuenta atrás (1.5rem) */
.slot.is-web .slot-web { display: block; }
.slot.is-seed { cursor: default; }
/* Radiactivo: dos anillos que salen de la casilla (position absolute: no cambian el tamaño de la fila); su animación y color los pone el tema */
.slot.is-rad, .slot.is-cursed { position: relative; }
.slot.is-rad::before, .slot.is-rad::after { content: ''; position: absolute; inset: 0; border: 3px solid currentColor; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; }
.slot-ghosts svg { width: 1.5rem; height: 1.5rem; flex: none; }   /* tamaño fijo: un % haría crecer la fila */
.reward-gift > svg { display: block; width: 100%; height: 100%; }   /* cuando el icono va envuelto (Pacto) */
/* Línea de la Codicia en la ventana de recompensa: icono pequeño (tamaño fijo en rem) a la izquierda del texto */
.reward-greed { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: -8px 0 16px; font-size: 1.05rem; color: var(--text); }
.reward-greed[hidden] { display: none; }
.reward-greed svg { width: 1.2rem; height: 1.2rem; flex: none; }
/* Botón «¡Lo quiero todo!» de la Codicia: desactivado si no caben todas las opciones */
/* Botón «Barajar» de la Baraja, sobre «Renunciar»: icono pequeño a la izquierda del texto */
.reward-shuffle { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 18px; }
.reward-shuffle[hidden] { display: none; }
.reward-shuffle svg { width: 1.2rem; height: 1.2rem; flex: none; }
#rewardSkip:disabled { opacity: .4; cursor: not-allowed; }
.reward-warn { margin: 6px 0 0; text-align: center; font-size: .95rem; color: var(--muted); }   /* aviso bajo «Renunciar» (Pacto) */
.slot-index { margin-right: auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot-value { margin-left: auto; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.slot.is-empty .slot-value { color: var(--muted); }
@media (hover: hover) { .slot.is-empty:hover { border-color: var(--accent); background: var(--surface-hover); transform: translateX(4px); } }
.slot.is-fixed, .slot.is-filled { cursor: default; }
.slot.is-fixed { border-color: var(--accent-2); }
.slot.is-fixed .slot-value { color: var(--accent-2); }
.slot.is-filled { border-color: var(--good); }
.slot.is-filled .slot-value { color: var(--good); }
.slot.is-wild { cursor: default; border-color: var(--warn); }
.slot.is-wild .slot-value { color: var(--warn); }
.slot.is-valid { border-color: var(--warn); border-style: dashed; }
.slot.is-magnet { border-color: var(--accent-2); border-style: dashed; }
/* Casillas elegibles por un power-up en curso; `is-source` es el número que se está moviendo */
.slot.is-target { cursor: pointer; border-color: var(--accent); border-style: dashed; animation: target-pulse 1.1s ease-in-out infinite; }
/* El número elegido con Reubicar se "levanta" y se mueve sin parar hasta que se elige destino (cada tema cambia la animación) */
.slot.is-source { border-color: var(--accent-2); border-style: solid; transform: translateX(-6px) scale(1.02); animation: source-lift .9s ease-in-out infinite; }
@keyframes source-lift {
    0%, 100% { transform: translateX(-6px) scale(1.02); }
    50% { transform: translateX(-13px) scale(1.05); }
}
.slot.is-wrong { border-color: var(--bad); animation: shake .4s; }
.slot.just-placed { animation: place .5s cubic-bezier(.2, 1.3, .4, 1); }

/* ---------- Toast ---------- */
/* El aviso es un popover (index.php): así vive en la capa superior del navegador y se ve también sobre las ventanas abiertas con showModal()
   (la de recompensa, etc.). Los reajustes de abajo anulan los estilos por defecto de los popover. */
.toast {
    top: auto;
    right: auto;
    margin: 0;
    color: inherit;
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 20;
    max-width: calc(100vw - 32px);
    padding: 12px 20px;
    transform: translate(-50%, 24px);
    opacity: 0;
    pointer-events: none;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 99px;
    font-weight: 600;
    text-align: center;
    transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--bad); }
.toast.good { border-color: var(--good); }

/* ---------- Modal ---------- */
.modal {
    width: min(92vw, 520px);   /* mismo ancho para todas (Ayuda, Configuración, Recompensa, resultado); Reiniciar es más estrecha */
    overflow-x: hidden;        /* con letra grande nunca debe salir scroll horizontal */
    padding: 32px 28px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    text-align: center;
}
@media (max-width: 899px) { .modal { padding: 22px 18px; } }   /* móvil: un poco menos de margen interior para aprovechar el ancho (Configuración conserva su padding-top por la X) */
.modal::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.modal[open] { animation: pop .4s cubic-bezier(.2, 1.3, .4, 1); }
.modal-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; letter-spacing: .06em; }
.modal-text { margin: 0 0 20px; color: var(--muted); font-size: 1.1rem; }
.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.modal-stats .stat { align-items: center; }
.modal .btn { width: 100%; }
.modal.is-win { border-color: var(--good); }
.modal.is-lose { border-color: var(--bad); }

.help-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.35;
}
.help-list strong { color: var(--text); }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- Animaciones ---------- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes place { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes bump { 50% { transform: scale(1.25); } }
@keyframes trophy-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-8px) rotate(6deg); }
}
@keyframes rescue-pulse { 50% { transform: translateY(-3px); } }
@keyframes meter-blink { 50% { background: var(--accent); } }
@keyframes target-pulse { 50% { background: var(--surface-hover); } }

/* ---------- Derrota: sacudida de toda la pantalla y capa de efectos (cada tema añade la suya) ----------
   La sacudida mueve .app con left/top, no con transform: un transform haría que la barra de power-ups fija del móvil se midiera contra .app. */
.lose-fx {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 40%, color-mix(in srgb, var(--bad) 60%, transparent) 100%);
}
html.is-lost .app { animation: lose-shake .55s linear; }
html.is-lost .lose-fx { animation: lose-vignette var(--lose-ms, 1500ms) ease-out forwards; }   /* --lose-ms = LOSE_DELAY (lo pone game.js): el efecto termina justo cuando aparece el mensaje final */
@keyframes lose-shake {
    0%, 100% { left: 0; top: 0; }
    10% { left: -14px; top: 5px; }
    20% { left: 12px; top: -6px; }
    30% { left: -10px; top: 4px; }
    45% { left: 8px; top: -3px; }
    60% { left: -5px; top: 2px; }
    80% { left: 3px; top: -1px; }
}
@keyframes lose-vignette { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: .45; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* Sacudida: vibración horizontal de toda la pantalla (solo el eje X, mismo método que la derrota). Normal: muy leve y corta. Rota: brusca y
   un poco más larga (.5 s → .75 s) para que se note la diferencia */
html.is-shaken .app { animation: shake-light .22s linear; }
html.is-broken .app { animation: broken-shake .75s linear; }
@keyframes shake-light {
    0%, 100% { left: 0; }
    25% { left: -3px; }
    50% { left: 3px; }
    75% { left: -2px; }
}
@keyframes broken-shake {
    0%, 100% { left: 0; }
    6% { left: -18px; }
    12% { left: 16px; }
    19% { left: -14px; }
    26% { left: 12px; }
    34% { left: -10px; }
    42% { left: 8px; }
    51% { left: -6px; }
    61% { left: 4px; }
    72% { left: -3px; }
    85% { left: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    html.is-shaken .app, html.is-broken .app { animation: none; }
    html.is-lost .app { animation: none; }
    html.is-lost .lose-fx { animation: none; opacity: .55; }
    html.is-lost .lose-fx::before, html.is-lost .lose-fx::after { display: none; }
}
/* ---------- Etiqueta del modo bajo el logo ---------- */
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Configuración ---------- */
.modal.settings { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.modal.settings .modal-title { margin-bottom: 4px; }
.set-now { margin: 0 0 16px; color: var(--muted); font-size: .95rem; }
.set-group { margin: 0 0 18px; }
.set-group h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.set-for { margin-left: 6px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg button {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 10px 6px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: background .2s, border-color .2s, color .2s;
}
.seg button small { font-size: .72rem; font-weight: 500; color: var(--muted); }
@media (hover: hover) { .seg button:hover { background: var(--surface-hover); } }
.seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-hover); color: var(--accent); }
.set-desc { margin: 8px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.25; }
.set-stats { width: 100%; margin-bottom: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.set-stats th, .set-stats td { padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.set-stats th { font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.set-stats tr.is-selected td { color: var(--accent); }
.modal.settings { position: relative; padding-top: 28px; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--text); }
.modal-x svg { width: 20px; height: 20px; }
.modal.confirm { width: min(88vw, calc(380px * var(--fs, 1))); }   /* crece con el tamaño de letra para que los dos botones quepan en una fila */
/* Sustituir un power-up con 4 huecos: 4 tarjetas en una fila (en pantallas estrechas vuelve al reparto automático) */
@media (min-width: 700px) {
    .modal.reward.wide4 { width: min(92vw, 720px); }
    .modal.reward.wide4 .reward-options { grid-template-columns: repeat(4, 1fr); }
}
/* Pedido: catálogo en secciones apiladas por rareza (común, raro, épico), cada una con su rejilla de celdas «icono + nombre» (4 columnas y ventana de 720 en escritorio; 2 en móvil),
   con scroll propio; debajo, la descripción del elegido y «Pedir» (siempre a la vista). */
.reward-options.catalog { display: block; margin-bottom: 14px; }
.cat-grid { max-height: min(46vh, 400px); overflow-y: auto; overflow-x: hidden; padding: 0 2px 4px; }
.cat-sec { margin-bottom: 25px; }
.cat-cells { padding-top: 4px; padding-bottom: 4px; }   /* dentro de la sección (no en ella): el título fijo solo se mueve dentro de su contenido y así llega a tapar la sombra de la última fila; el de arriba evita que el título (.cat-head, con fondo) tape el borde superior de la primera fila al seleccionarla */
.cat-head { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 0 6px; background: var(--bg); text-align: left; font-family: var(--font-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; }
.cat-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 700px) {   /* escritorio: ventana de 720 y 4 columnas (como la de sustituir con 4 huecos) */
    .modal.reward.wide-cat { width: min(92vw, 720px); }
    .cat-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cat-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 8px; min-width: 0; text-align: left; background: var(--surface); border: 1px solid var(--pu, var(--border)); border-radius: var(--radius-sm); color: var(--text); }
.cat-item.is-sel { background: var(--surface-hover); }
@media (hover: hover) { .cat-item:hover { background: var(--surface-hover); } }
.cat-item.is-sel { outline: 2px solid var(--accent); }
.cat-icon { flex: none; width: 24px; height: 24px; color: var(--pu, var(--text)); }
.cat-icon svg { display: block; width: 100%; height: 100%; }
.cat-name { min-width: 0; font-family: var(--font-display); font-size: .7rem; line-height: 1.2; overflow-wrap: anywhere; }
.cat-detail { min-height: 7.5rem; margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cat-detail h3 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-display); font-size: .9rem; }
.cat-detail p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; line-height: 1.25; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-actions.single { grid-template-columns: 1fr; }
.set-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.set-version { margin: 12px 0 0; text-align: center; font-size: .6rem; letter-spacing: .06em; color: var(--muted); opacity: .7; user-select: text; }
.modal .btn.small { width: auto; padding: 8px 14px; font-size: .72rem; }

/* ---------- Ayuda según el modo ---------- */
.only-classic { display: none; }
html[data-mode="classic"] .only-classic { display: list-item; }
html[data-mode="classic"] .only-powerups { display: none; }
.inv-slot[hidden] { display: none; }

/* ---------- Modo clásico: solo Vidas (sin medidor, sin nombres) ---------- */
html[data-mode="classic"] .reward-meter { display: none; }
html[data-mode="classic"] .inv-name { display: none; }
html[data-mode="classic"] .inv-slot { min-height: 54px; cursor: default; }
html[data-mode="classic"] .inv-slot.is-empty .inv-icon { visibility: visible; }   /* una Vida gastada se queda como corazón apagado */
@media (max-width: 899px) {
    html[data-mode="classic"] { --inv-h: 64px; }
    html[data-mode="classic"] .inv-slot { min-height: 0; }   /* la altura sale de --inv-h, para que la barra mida lo que se espera */
}
/* Zona de la barra de estado del móvil (hora, batería...): en modo app (pantalla completa) la lista de números se ve pasar por detrás.
   Se tapa con una franja fija del color del fondo que cubre las dos formas en que los móviles tratan esa zona:
   - la franja en sí, de la altura de la zona segura (env), por si la página llega hasta arriba del todo (con muesca);
   - su ::before, que se extiende POR ENCIMA del borde superior de la ventana, por si el móvil pone el borde de la ventana debajo de la barra
     de estado pero sigue dibujando la página por detrás (en ese caso env vale 0 y el contenido asoma por encima, como en iOS).
   En un navegador normal, o en un móvil sin esa zona, no se ve nada: la franja mide 0 y el ::before queda fuera de la pantalla. */
.safe-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--bg);
    z-index: 60;
    pointer-events: none;
}
.safe-top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 160px;
    background: var(--bg);
}
/* ---------- iPhone en modo app (html.ios-app, lo pone game.js) ----------
   El borde de la ventana queda bajo la barra de estado (hora, batería), pero si se desplaza la PÁGINA el contenido sigue pintándose por
   detrás de esa barra. Solución: la página no se desplaza (html y body fijos) y el que se desplaza es .app, cuyo borde superior es el
   de la ventana: lo que queda fuera de ese recuadro no se pinta. El panel sticky y la barra fija de abajo funcionan igual. */
@media (max-width: 899px) {
    html.ios-app, html.ios-app body { height: 100%; overflow: hidden; }
    html.ios-app body { position: fixed; inset: 0; width: 100%; }
    html.ios-app .app { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: scroll; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
    /* .app es una columna flex de alto fijo: sin esto sus hijos (sobre todo .layout, que tiene flex: 1 y min-height: 0) se encogen para caber
       en vez de desbordar, y entonces no hay nada que desplazar */
    html.ios-app .app > * { flex-shrink: 0; }
    html.ios-app .layout { flex: none; }
    html.ios-app:has(dialog[open]) .app { overflow-y: hidden; }   /* con una ventana abierta, el desplazamiento no se contagia a la página de detrás */
}
/* ---------- Pantallas altas: el tablero ocupa toda la altura ---------- */
@media (min-width: 900px) and (min-height: 900px) {
    /* Solo con el tablero normal (20 casillas): con más o menos filas la altura es la natural, data-size="free" */
    html:not([data-size="free"]) .app { height: 100dvh; }
    html:not([data-size="free"]) .layout { align-items: stretch; }
    html:not([data-size="free"]) .board-wrap { height: 100%; }
}


/* ---------- Móvil ---------- */
@media (max-width: 899px) {
    .actions { gap: 6px; }
    .icon-btn { width: 38px; height: 38px; }
    .logo { min-width: 0; }
    .layout { grid-template-columns: minmax(0, 520px); padding-top: 0; }

    :root { --inv-h: 104px; }   /* alto de la barra de power-ups fija abajo */
    /* --sheet-h (lo mide game.js) es el alto de la ficha del power-up cuando está abierta: se suma al margen inferior para poder desplazar
       la página hasta que las últimas filas del tablero queden por encima de ella */
    /* --bar-h es el alto real de la barra de power-ups (lo mide game.js; ya incluye la zona segura inferior); --inv-h es solo una estimación de respaldo */
    .app { padding-bottom: calc(var(--bar-h, calc(var(--inv-h) + env(safe-area-inset-bottom))) + var(--sheet-h, 0px)); }
    /* El aviso emergente va justo encima de la barra de power-ups y, si hay una ficha abierta, encima de ella (--sheet-h la mide game.js):
       así no se pisa con la ficha ni, al perder, con el rótulo de fin de partida del centro */
    .toast { bottom: calc(var(--bar-h, calc(var(--inv-h) + env(safe-area-inset-bottom))) + var(--sheet-h, 0px) + 12px); width: max-content; max-width: calc(100vw - 48px); }

    .panel {
        top: 0;
        z-index: 10;
        gap: 10px;
        margin: 0 calc(-1 * clamp(12px, 3vw, 32px));
        padding: 10px clamp(12px, 3vw, 32px);
    }
    /* El fondo desenfocado va en un pseudo-elemento: un backdrop-filter en .panel haría que la barra fija (position: fixed) se midiera contra el panel */
    .panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: color-mix(in srgb, var(--bg) 90%, transparent);
        backdrop-filter: blur(10px);
    }
    /* En móvil las cajitas de estadísticas no se muestran (ahorran altura para el tablero): solo el contador junto a la barra */
    .panel .stats { display: none; }
    .progress-row { display: flex; align-items: center; gap: 10px; }
    .progress-row .progress { flex: 1; }
    .progress-count { display: flex; align-items: baseline; flex: none; font-family: var(--font-display); font-size: .8rem; line-height: 1; white-space: nowrap; }
    .progress-count small { align-self: center; margin-right: 8px; line-height: 1; font-family: var(--font-body); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .progress-count b { font-weight: 700; font-variant-numeric: tabular-nums; }
    .progress-count b.bump { animation: bump .3s ease; }
    .stat { padding: 6px 8px; }
    .stat-label { font-size: .6rem; letter-spacing: .06em; }
    .stat-label .long { display: none; }
    .stat-value { font-size: 1rem; }

    /* Caja del número y botón en fila: el botón (35 % del ancho y de la misma altura que la caja) solo se ve antes de empezar y al
       terminar. Durante la partida la caja ocupa todo el ancho, así que el texto del botón nunca cambia su tamaño. */
    .draw-zone { flex-direction: row; align-items: stretch; gap: 10px; }
    .draw-card { flex: 1; min-width: 0; min-height: 0; padding: 8px; }
    .draw-label { font-size: .65rem; letter-spacing: .15em; }
    .draw-value { font-size: 2.6rem; }
    .draw-actions { flex: 0 0 50%; }   /* PRUEBA: era 35 % */
    .btn { padding: 10px 16px; font-size: .85rem; }
    .draw-actions .btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px; line-height: 1.25; text-align: center; }
    /* PRUEBA (fácil de revertir: borrar este bloque y la línea `is-intro` de render() en game.js): antes de empezar la partida se oculta la caja
       «Tu número» y el botón ocupa todo el ancho. La caja sigue en el flujo (sin ancho, invisible) para que la zona mantenga la misma altura
       y el tablero no salte al empezar. */
    .draw-zone.is-intro { gap: 0; }
    .draw-zone.is-intro .draw-card { flex: 0 0 0; padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; overflow: hidden; visibility: hidden; white-space: nowrap; }
    .draw-zone.is-intro .draw-actions { flex: 1; }
    .draw-zone.is-intro .draw-actions .btn { font-size: .8rem; }

    /* Barra de power-ups fija abajo a todo el ancho; la ficha sube como una hoja encima */
    .inventory {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        flex-direction: column;
        margin: 0;
        padding: 8px clamp(12px, 3vw, 32px) calc(8px + env(safe-area-inset-bottom));
        background: var(--bg);
        border-top: 1px solid var(--accent);
    }
    .inv-slots { width: 100%; max-width: 520px; margin: 0 auto; gap: 8px; }
    /* El indicador pasa a una línea fina segmentada sobre los huecos */
    .reward-meter { width: 100%; max-width: 520px; margin: 0 auto 6px; gap: 4px; }
    .reward-meter i { flex: 1; width: auto; height: 3px; }
    .draw-note { font-size: .62rem; }
    .draw-badge { width: 18px; height: 18px; }
    .draw-fx { top: 6px; font-size: .62rem; }
    .draw-card.is-duo .draw-value { gap: 8px; font-size: 1.7rem; }
    .duo-pick { padding: 4px 8px; }
    .inv-slot { min-height: 0; height: calc(var(--inv-h) - 18px); gap: 4px; }
    .inv-icon { width: 30px; height: 30px; }
    .inv-name { font-size: .72rem; }
    .inv-panel {
        position: absolute;
        left: clamp(12px, 3vw, 32px);
        right: clamp(12px, 3vw, 32px);
        bottom: 100%;
        max-width: 520px;
        margin: 0 auto 8px;
    }

    .board-wrap { grid-template-columns: 44px minmax(0, 1fr); }
    .board { grid-template-rows: repeat(var(--rows, 20), 50px); }
}

@media (prefers-reduced-motion: reduce) {
    /* Una sola pasada: sin esto las animaciones infinitas (parpadeos, pistas) se repetirían unas 100.000 veces por segundo y se verían como un temblor */
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.inv-badge svg.arrow { display: inline-block; width: .6rem; height: .6rem; margin-left: 2px; }   /* Acciones: flecha del último movimiento junto al valor */

/* Jackpot: recuadro con la cifra de los rodillos, centrado sobre el tablero (el aspecto lo pone el tema) */
.jackpot-reel { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 50; pointer-events: none; text-align: center; }

/* Catálogo de descubiertos (se abre desde Configuración): tres columnas con icono, nombre y rareza; el resto, casillas anónimas con «?».
   Al tocar una sale su ficha (.inv-detail) fija abajo */
.modal.catalog { position: relative; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding-top: 28px; text-align: left; }
.modal.catalog .modal-title { margin-bottom: 4px; }
.cat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; padding: 4px 2px; }
.pu-card.cat-tile, .cat-lock { aspect-ratio: 1; }   /* todas cuadradas (la tarjeta crece si el texto no cabe) */
.pu-card.cat-tile { justify-content: center; gap: 6px; padding: 8px 6px; min-width: 0; text-align: center; }
.cat-tile .pu-icon { width: 46px; height: 46px; }
.cat-tile .pu-name { overflow-wrap: break-word; }
.cat-tile.is-sel { outline: 2px solid var(--accent); }
.cat-lock { display: grid; place-items: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-family: var(--font-display); font-size: 1.1rem; }
.catalog .cat-head { position: static; margin: 4px 0 6px; padding: 6px 0; border-bottom: 2px solid var(--border); }   /* sin título fijo: al desplazarse se montaba sobre las tarjetas */
.catalog .cat-sec { margin-bottom: 18px; }
#catalogDetail { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; }
@media (min-width: 700px) {   /* escritorio: ventana más ancha y 4 columnas */
    .modal.catalog { width: min(92vw, 720px); }
    .cat-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}