/* Swinger Party — pantalla «Elige tu tablero» (Fase 18, D2). Reproduce design/referencia-elegir-tablero (1440×640) y la adapta a móvil y tele.
 * Misma idea que css/home.css: base de móvil; html.home-wide (PC: maqueta de 1440×640 en la unidad --sp-u; tele: 1920×960, letra desde 28 px a 1080p).
 * Cuanto más intenso el tablero (data-level 1…5), más brillo, más saturación y más tamaño de Piñita; en la tele el brillo se queda pequeño y crece el borde.
 * Compatibilidad con Chromium ~60: sin gap en flexbox, inset, aspect-ratio ni min()/max()/clamp(); grid con grid-gap; var() siempre con reserva.
 * (Escrito con la notación U(--variable, valor) y expandido a calc(); se edita a mano.) */

.board-screen {
  display: flex; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 270; padding: 0; text-align: left;
  background: radial-gradient(520px 420px at 50% 60%, #3a1260 0%, rgba(58, 18, 96, 0) 70%), #0f0a1c;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.board-screen .bs-inner { box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px 72px; }

/* ---------- cabecera (fija arriba al desplazar) ---------- */
.bs-head { display: flex; flex-wrap: wrap; align-items: center; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px 10px; background: #0f0a1c; background: rgba(15, 10, 28, 0.96); }
.bs-head h2 { margin: 0 auto 0 0; color: #f6f1fa; font: 800 26px/1.15 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; }
.bs-sub { order: 3; flex-basis: 100%; margin: 4px 0 0; color: #cdbfe6; font: 400 14px/1.3 'DM Sans', system-ui, sans-serif; }
.board-screen .bs-head button { order: 2; margin: 0; }

/* ---------- tarjetas: en el móvil, una por fila, con la pose a la izquierda ---------- */
.bs-grid { display: grid; grid-template-columns: 1fr; grid-gap: 10px; margin-top: 8px; }
.board-screen .bs-card {
  --bc: #f6f1fa; --bc-rgb: 246, 241, 250;
  position: relative; display: grid; grid-template-columns: 104px 1fr; grid-column-gap: 10px; align-items: center; box-sizing: border-box; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 14px 12px 14px 8px; overflow: hidden;
  border: 3px solid #f6f1fa; border: 3px solid var(--bc, #f6f1fa); border-radius: 18px;
  background: rgba(246, 241, 250, 0.1); background: rgba(var(--bc-rgb, 246, 241, 250), 0.1);
  box-shadow: 0 0 14px rgba(246, 241, 250, 0.45); box-shadow: 0 0 14px rgba(var(--bc-rgb, 246, 241, 250), 0.45);
  color: #f6f1fa; -webkit-text-fill-color: #f6f1fa; font: 400 14px/1.3 'DM Sans', system-ui, sans-serif; text-align: left; transform: none; filter: none; cursor: pointer;
}
.board-screen .bs-card * { -webkit-text-fill-color: currentColor; }   /* tv.css pone el texto de los botones en blanco con esta propiedad: aquí cada texto conserva su color */
.board-screen .bs-card[data-level="1"] { background: rgba(246, 241, 250, 0.07); background: rgba(var(--bc-rgb, 246, 241, 250), 0.07); }
.board-screen .bs-card[data-level="5"] { background: rgba(255, 61, 79, 0.12); background: rgba(var(--bc-rgb, 255, 61, 79), 0.12); }
.board-screen .bs-card:hover { transform: none; filter: none; }
/* elegido: relleno más claro, anillo propio del color del tablero (distinto del aro blanco del foco) y pestaña «ELEGIDO» */
.board-screen .bs-card[aria-checked="true"] { background: rgba(246, 241, 250, 0.26); background: rgba(var(--bc-rgb, 246, 241, 250), 0.26); box-shadow: 0 0 0 3px #0f0a1c, 0 0 0 6px #f6f1fa, 0 0 22px 6px rgba(246, 241, 250, 0.55); box-shadow: 0 0 0 3px #0f0a1c, 0 0 0 6px var(--bc, #f6f1fa), 0 0 22px 6px rgba(var(--bc-rgb, 246, 241, 250), 0.55); }
.board-screen .bs-card:focus { outline: 3px solid #fff; outline-offset: 3px; }
.board-screen .bs-card[aria-checked="true"]:focus { outline-offset: 9px; }
.board-screen .bs-card:focus:not(:focus-visible) { outline: 0; }
.board-screen .bs-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.board-screen .bs-card[aria-checked="true"]:focus-visible { outline-offset: 9px; }
.bs-halo { position: absolute; left: 8px; top: 50%; width: 104px; height: 104px; margin: -52px 0 0; border-radius: 50%; background: radial-gradient(circle, rgba(246, 241, 250, 0.4) 0%, rgba(0, 0, 0, 0) 70%); background: radial-gradient(circle, rgba(var(--bc-rgb, 246, 241, 250), 0.4) 0%, rgba(0, 0, 0, 0) 70%); }
.bs-chosen { display: none; position: absolute; z-index: 2; right: 14px; top: 0; padding: 2px 12px 3px; border-radius: 0 0 10px 10px; background: #f6f1fa; background: var(--bc, #f6f1fa); color: #0f0a1c; -webkit-text-fill-color: #0f0a1c; font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.board-screen .bs-card[aria-checked="true"] .bs-chosen { display: block; }
.bs-lab { position: relative; grid-column: 2; margin-bottom: 2px; color: #f6f1fa; color: var(--bc, #f6f1fa); font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; overflow-wrap: break-word; word-wrap: break-word; }
.bs-pic { position: relative; display: block; grid-column: 1; grid-row: 1 / span 4; justify-self: center; margin: 0; }
.bs-img { display: block; width: auto; height: 100px; filter: drop-shadow(0 0 8px rgba(246, 241, 250, 0.5)); filter: drop-shadow(0 0 8px rgba(var(--bc-rgb, 246, 241, 250), 0.5)); }
.bs-card[data-level="2"] .bs-img { height: 104px; filter: drop-shadow(0 0 9px rgba(78, 224, 143, 0.6)); filter: drop-shadow(0 0 9px rgba(var(--bc-rgb, 78, 224, 143), 0.6)); }
.bs-card[data-level="3"] .bs-img { height: 108px; filter: drop-shadow(0 0 10px rgba(255, 201, 77, 0.7)) saturate(1.1); filter: drop-shadow(0 0 10px rgba(var(--bc-rgb, 255, 201, 77), 0.7)) saturate(1.1); }
.bs-card[data-level="4"] .bs-img { height: 112px; filter: drop-shadow(0 0 12px rgba(255, 138, 61, 0.8)) saturate(1.2); filter: drop-shadow(0 0 12px rgba(var(--bc-rgb, 255, 138, 61), 0.8)) saturate(1.2); }
.bs-card[data-level="5"] .bs-img { height: 116px; filter: drop-shadow(0 0 14px rgba(255, 61, 79, 0.9)) saturate(1.3) contrast(1.05); filter: drop-shadow(0 0 14px rgba(var(--bc-rgb, 255, 61, 79), 0.9)) saturate(1.3) contrast(1.05); }
.bs-card[data-level="0"] .bs-img { height: 80px; }
.bs-name { position: relative; grid-column: 2; margin: 0; color: #f6f1fa; font: 800 22px/1.15 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; overflow-wrap: break-word; word-wrap: break-word; }
.bs-sub2 { position: relative; display: block; grid-column: 2; min-height: 0; max-height: 4em; overflow: hidden; margin: 4px 0 0; color: #e3d9ff; font: 400 14px/1.3 'DM Sans', system-ui, sans-serif; overflow-wrap: break-word; word-wrap: break-word; }
.bs-fl { position: relative; display: block; grid-column: 2; min-height: 18px; margin-top: 6px; font-size: 16px; letter-spacing: 3px; line-height: 1.1; }
@media (max-width: 359px) { .bs-head h2 { font-size: 22px; } .bs-lab { letter-spacing: 1px; } }

/* ============================== COMPOSICIÓN ANCHA: PC y TELE ============================== */
html.home-wide {
  --bs-w: 1440; --bs-h: 640; --bs-padv: 40; --bs-padh: 48;
  --bs-title: 34; --bs-sub: 16; --bs-sub-ml: 16; --bs-head-gap: 22;
  --bs-grid-gap: 16; --bs-r: 22; --bs-bw: 3; --bs-pt: 26; --bs-pb: 16; --bs-ph: 14; --bs-g: 6;
  --bs-halo: 200; --bs-halo-top: 56; --bs-lab: 12; --bs-lab-ls: 2; --bs-name: 26; --bs-sub2: 13; --bs-sub2-h: 34; --bs-fl: 18; --bs-fl-ls: 3;
  --bs-i1: 250; --bs-i2: 260; --bs-i3: 270; --bs-i4: 280; --bs-i5: 290; --bs-i0: 150;
  --bs-glow: 26; --bs-inset: 20; --bs-glow-on: 44; --bs-ds1: 10; --bs-ds2: 12; --bs-ds3: 14; --bs-ds4: 16; --bs-ds5: 20;
  --bs-chosen: 12; --bs-chosen-pv: 3; --bs-chosen-ph: 14; --bs-back-h: 46; --bs-back: 16;
}
html.home-wide.tv-mode {
  --bs-w: 1920; --bs-h: 960; --bs-padv: 48; --bs-padh: 64;
  --bs-title: 56; --bs-sub: 28; --bs-sub-ml: 24; --bs-head-gap: 28;
  --bs-grid-gap: 20; --bs-r: 26; --bs-bw: 4; --bs-pt: 60; --bs-pb: 22; --bs-ph: 16; --bs-g: 8;
  --bs-halo: 280; --bs-halo-top: 80; --bs-lab: 28; --bs-lab-ls: 1; --bs-name: 44; --bs-sub2: 28; --bs-sub2-h: 74; --bs-fl: 34; --bs-fl-ls: 4;
  --bs-i1: 330; --bs-i2: 342; --bs-i3: 354; --bs-i4: 366; --bs-i5: 378; --bs-i0: 200;
  --bs-glow: 10; --bs-inset: 0; --bs-glow-on: 16; --bs-ds1: 4; --bs-ds2: 5; --bs-ds3: 6; --bs-ds4: 7; --bs-ds5: 8;
  --bs-chosen: 28; --bs-chosen-pv: 4; --bs-chosen-ph: 22; --bs-back-h: 58; --bs-back: 28;
}

html.home-wide .board-screen { background: radial-gradient(calc(900 * var(--sp-u, 1px)) calc(500 * var(--sp-u, 1px)) at 50% 60%, #3a1260 0%, rgba(58, 18, 96, 0) 70%), #0f0a1c; }
html.home-wide .bs-head { position: static; margin: 0; padding: 0; background: none; }
html.home-wide .board-screen .bs-inner { margin: auto; width: calc(var(--bs-w, 1440) * var(--sp-u, 1px)); max-width: none; min-height: calc(var(--bs-h, 640) * var(--sp-u, 1px)); padding: calc(var(--bs-padv, 40) * var(--sp-u, 1px)) calc(var(--bs-padh, 48) * var(--sp-u, 1px)); }
html.home-wide .bs-head { flex-wrap: nowrap; align-items: baseline; }
html.home-wide .bs-head h2 { margin: 0; font-size: calc(var(--bs-title, 34) * var(--sp-u, 1px)); }
html.home-wide .bs-sub { order: 2; flex-basis: auto; margin: 0 0 0 calc(var(--bs-sub-ml, 16) * var(--sp-u, 1px)); font-size: calc(var(--bs-sub, 16) * var(--sp-u, 1px)); }
html.home-wide .board-screen .bs-head button { order: 3; margin: 0 0 0 auto; align-self: center; height: calc(var(--bs-back-h, 46) * var(--sp-u, 1px)); min-height: calc(var(--bs-back-h, 46) * var(--sp-u, 1px)); padding: 0 calc(24 * var(--sp-u, 1px)); font-size: calc(var(--bs-back, 16) * var(--sp-u, 1px)); border-radius: calc(32 * var(--sp-u, 1px)); }
html.home-wide .bs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: calc(var(--bs-grid-gap, 16) * var(--sp-u, 1px)); margin-top: calc(var(--bs-head-gap, 22) * var(--sp-u, 1px)); }
html.home-wide .board-screen .bs-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--bs-pt, 26) * var(--sp-u, 1px)) calc(var(--bs-ph, 14) * var(--sp-u, 1px)) calc(var(--bs-pb, 16) * var(--sp-u, 1px)); border-width: calc(var(--bs-bw, 3) * var(--sp-u, 1px)); border-radius: calc(var(--bs-r, 22) * var(--sp-u, 1px)); font-size: calc(var(--bs-sub2, 13) * var(--sp-u, 1px));
  box-shadow: 0 0 calc(var(--bs-glow, 26) * var(--sp-u, 1px)) rgba(246, 241, 250, 0.53), inset 0 0 calc(var(--bs-inset, 20) * var(--sp-u, 1px)) rgba(246, 241, 250, 0.2); box-shadow: 0 0 calc(var(--bs-glow, 26) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 246, 241, 250), 0.53), inset 0 0 calc(var(--bs-inset, 20) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 246, 241, 250), 0.2);
}
html.home-wide .board-screen .bs-card[aria-checked="true"] { background: rgba(246, 241, 250, 0.26); background: rgba(var(--bc-rgb, 246, 241, 250), 0.26); box-shadow: 0 0 0 calc(3 * var(--sp-u, 1px)) #0f0a1c, 0 0 0 calc(6 * var(--sp-u, 1px)) #f6f1fa, 0 0 calc(var(--bs-glow-on, 44) * var(--sp-u, 1px)) #f6f1fa; box-shadow: 0 0 0 calc(3 * var(--sp-u, 1px)) #0f0a1c, 0 0 0 calc(6 * var(--sp-u, 1px)) var(--bc, #f6f1fa), 0 0 calc(var(--bs-glow-on, 44) * var(--sp-u, 1px)) var(--bc, #f6f1fa); }
html.home-wide .board-screen .bs-card:focus, html.home-wide .board-screen .bs-card:focus-visible { outline-offset: calc(4 * var(--sp-u, 1px)); }
html.home-wide .board-screen .bs-card[aria-checked="true"]:focus, html.home-wide .board-screen .bs-card[aria-checked="true"]:focus-visible { outline-offset: calc(10 * var(--sp-u, 1px)); }
html.home-wide .bs-halo { left: 50%; margin-top: 0; top: calc(var(--bs-halo-top, 56) * var(--sp-u, 1px)); width: calc(var(--bs-halo, 200) * var(--sp-u, 1px)); height: calc(var(--bs-halo, 200) * var(--sp-u, 1px)); margin-left: calc(var(--bs-halo, 200) * -0.5 * var(--sp-u, 1px)); }
html.home-wide .bs-chosen { right: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: calc(var(--bs-chosen-pv, 3) * var(--sp-u, 1px)) calc(var(--bs-chosen-ph, 14) * var(--sp-u, 1px)); border-radius: 0 0 calc(12 * var(--sp-u, 1px)) calc(12 * var(--sp-u, 1px)); font-size: calc(var(--bs-chosen, 12) * var(--sp-u, 1px)); letter-spacing: calc(1.5 * var(--sp-u, 1px)); }
html.home-wide .bs-lab { margin-bottom: 0; font-size: calc(var(--bs-lab, 12) * var(--sp-u, 1px)); letter-spacing: calc(var(--bs-lab-ls, 2) * var(--sp-u, 1px)); }
html.home-wide .bs-pic { justify-self: auto; margin-top: calc(var(--bs-g, 6) * var(--sp-u, 1px)); }
html.home-wide .bs-img { height: calc(var(--bs-i1, 250) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(var(--bs-ds1, 10) * var(--sp-u, 1px)) rgba(246, 241, 250, 0.5)); filter: drop-shadow(0 0 calc(var(--bs-ds1, 10) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 246, 241, 250), 0.5)); }
html.home-wide .bs-card[data-level="2"] .bs-img { height: calc(var(--bs-i2, 260) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(var(--bs-ds2, 12) * var(--sp-u, 1px)) rgba(78, 224, 143, 0.6)); filter: drop-shadow(0 0 calc(var(--bs-ds2, 12) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 78, 224, 143), 0.6)); }
html.home-wide .bs-card[data-level="3"] .bs-img { height: calc(var(--bs-i3, 270) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(var(--bs-ds3, 14) * var(--sp-u, 1px)) rgba(255, 201, 77, 0.7)) saturate(1.1); filter: drop-shadow(0 0 calc(var(--bs-ds3, 14) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 255, 201, 77), 0.7)) saturate(1.1); }
html.home-wide .bs-card[data-level="4"] .bs-img { height: calc(var(--bs-i4, 280) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(var(--bs-ds4, 16) * var(--sp-u, 1px)) rgba(255, 138, 61, 0.8)) saturate(1.2); filter: drop-shadow(0 0 calc(var(--bs-ds4, 16) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 255, 138, 61), 0.8)) saturate(1.2); }
html.home-wide .bs-card[data-level="5"] .bs-img { height: calc(var(--bs-i5, 290) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(var(--bs-ds5, 20) * var(--sp-u, 1px)) rgba(255, 61, 79, 0.9)) saturate(1.3) contrast(1.05); filter: drop-shadow(0 0 calc(var(--bs-ds5, 20) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 255, 61, 79), 0.9)) saturate(1.3) contrast(1.05); }
html.home-wide .bs-card[data-level="0"] .bs-img { height: calc(var(--bs-i0, 150) * var(--sp-u, 1px)); }
html.home-wide .bs-name { margin-top: auto; padding-top: calc(var(--bs-g, 6) * var(--sp-u, 1px)); font-size: calc(var(--bs-name, 26) * var(--sp-u, 1px)); }
html.home-wide .bs-sub2 { max-height: none; overflow: visible; min-height: calc(var(--bs-sub2-h, 34) * var(--sp-u, 1px)); margin-top: calc(var(--bs-g, 6) * var(--sp-u, 1px)); font-size: calc(var(--bs-sub2, 13) * var(--sp-u, 1px)); }
html.home-wide .bs-fl { min-height: calc(var(--bs-fl, 18) * var(--sp-u, 1px)); margin-top: calc(var(--bs-g, 6) * var(--sp-u, 1px)); font-size: calc(var(--bs-fl, 18) * var(--sp-u, 1px)); letter-spacing: calc(var(--bs-fl-ls, 3) * var(--sp-u, 1px)); }

/* ---------- TELE: sin inset ni brillos grandes ni saturación extra; el borde crece con el nivel (Piñita y el color ya dicen el resto) ---------- */
html.tv-mode .board-screen { background: radial-gradient(calc(900 * var(--sp-u, 1px)) calc(500 * var(--sp-u, 1px)) at 50% 60%, rgba(58, 18, 96, 0.9) 0%, rgba(58, 18, 96, 0) 70%), #0f0a1c; }
html.tv-mode .board-screen .bs-card[data-level="3"], html.tv-mode .board-screen .bs-card[data-level="4"] { border-width: calc(5 * var(--sp-u, 1px)); }
html.tv-mode .board-screen .bs-card[data-level="5"] { border-width: calc(6 * var(--sp-u, 1px)); }
html.tv-mode .bs-card[data-level="3"] .bs-img, html.tv-mode .bs-card[data-level="4"] .bs-img, html.tv-mode .bs-card[data-level="5"] .bs-img { filter: drop-shadow(0 0 calc(var(--bs-ds3, 6) * var(--sp-u, 1px)) rgba(var(--bc-rgb, 255, 255, 255), 0.7)); }
.bs-pic.is-anim .bs-img { visibility: hidden; }
.bs-pic .pa { position: absolute; left: 50%; bottom: 0; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }