/* ================================================
   Miniatura del tablero de un tema (réplica ligera del escenario 16:9 del motor).
   La dibuja assets/js/board-preview.js; colores y fuente vienen del theme.json del tema
   como variables --s-* en línea (includes/game/game_themes.php → gameThemePreviewStyle()).
   Tamaños en cqw: escala igual que el escenario 1920×1080 a cualquier ancho.
   ================================================ */

.b-stage {
    container-type: inline-size;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--s-letterbox);
    color: var(--s-text);
    font-family: var(--s-font);
    font-weight: var(--s-weight, 800);
}
img.b-stage { object-fit: cover; }   /* capturas: reales del motor nuevo o las de los temas viejos */

.b-stage .bp-inner {
    position: absolute;
    inset: 2.4cqw;
    display: grid;
    gap: 1.6cqw;
}
.b-stage.m90 .bp-inner { grid-template-columns: 74% 1fr; }
.b-stage.m75 .bp-inner { grid-template-rows: 1fr 30%; }

.bp-board {
    display: grid;
    gap: 0.45cqw;
    padding: 0.9cqw;
    border-radius: 1.4cqw;
    background: var(--s-bg);
    min-height: 0;
}
.m90 .bp-board { grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(9, 1fr); }
.m75 .bp-board { grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(5, 1fr); }

.bp-cell {
    display: grid;
    place-items: center;
    border-radius: 0.6cqw;
    background: var(--s-surface);
    border: 1px solid var(--s-cell-border);
    color: var(--s-cell-text);
    font-size: 1.75cqw;
    line-height: 1;
}
.m75 .bp-cell { font-size: 2cqw; }
.bp-cell.on {
    background: var(--s-primary);
    color: var(--s-primary-text);
    border-color: transparent;
}
.bp-cell.on.alt {
    background: var(--s-secondary);
    color: var(--s-secondary-text);
}
.bp-cell.last { box-shadow: 0 0 0 0.35cqw var(--s-text); }

.bp-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1cqw;
    padding: 1.4cqw 1cqw;
    border-radius: 1.4cqw;
    background: var(--s-bg);
    text-align: center;
    min-height: 0;
}
.m75 .bp-panel { flex-direction: row; padding: 1cqw 2cqw; }
.bp-logo {
    font-size: 3.4cqw;
    line-height: 1;
    background: linear-gradient(135deg, var(--s-primary), var(--s-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bp-ball {
    width: 13cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--s-primary), var(--s-secondary));
    color: var(--s-primary-text);
    font-size: 6.6cqw;
    line-height: 1;
    box-shadow: 0 0 0 0.5cqw var(--s-cell-border);
}
.m75 .bp-ball { width: 11cqw; font-size: 5.6cqw; }
.bp-group { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; }
.bp-label {
    font-size: 1.3cqw;
    color: var(--s-cell-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bp-last { display: flex; gap: 0.8cqw; justify-content: center; }
.bp-last span {
    width: 4.4cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--s-surface);
    border: 0.25cqw solid var(--s-cell-border);
    color: var(--s-text);
    font-size: 2cqw;
}
.bp-count { font-size: 1.9cqw; }