/* Swinger Party — pantalla de inicio (Fase 18, D1). Reproduce design/referencia-inicio (1440×900) y la adapta a móvil y tele.
 *
 * Tres composiciones:
 *  · MÓVIL / ventana estrecha (base, sin html.home-wide): una columna; Piñita grande a la derecha, parcialmente tras el título; «Iniciar partida» a ancho completo arriba.
 *  · PC (html.home-wide): dos columnas a escala de la maqueta: todo va en la unidad --sp-u (= 1 px de la maqueta, la fija js/home.js; 1440×900 en PC).
 *  · TELE (html.home-wide.tv-mode): la misma composición con una maqueta de 1920×1080 y letra desde 28 px a 1080p; sin desenfoques ni brillos pesados.
 * Los tamaños de la composición ancha son variables --w-* (PC | tele) para no repetir reglas.
 * Compatibilidad con Chromium ~60: sin gap en flexbox (márgenes), sin inset, aspect-ratio ni min()/max()/clamp(); grid con grid-gap; var() siempre con reserva.
 * (Este archivo se escribió con la notación U(--variable, valor) y se expandió a calc(); no se vuelve a generar: se edita a mano.) */

/* ---------- cabecera: en el inicio manda el título grande; el h1 sigue ahí, solo para lectores de pantalla y buscadores ---------- */
html.show-mascot .brand-bar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
html.show-mascot body { padding: 0; }

#setup.home {
  max-width: none; margin: 0; padding: 0; text-align: left; overflow-x: hidden; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(360px 300px at 70% 160px, #4a1670 0%, rgba(74, 22, 112, 0) 70%), radial-gradient(320px 260px at 20% 520px, #6b0f4a 0%, rgba(107, 15, 74, 0) 70%), #0f0a1c;
}

/* ============================== BASE: MÓVIL ============================== */
.home-stage {
  position: relative; box-sizing: border-box; min-height: 100vh; max-width: 560px; margin: 0 auto; padding: 14px 16px 64px;   /* en una ventana estrecha pero ancha (tableta) queda una columna de móvil centrada */
}
.home-light { display: none; }
.home-sign {
  position: absolute; z-index: 3; right: 12px; top: 12px; padding: 3px 8px; border: 2px solid #3de0c8; border-radius: 8px; background: rgba(15, 10, 28, 0.85);
  color: #3de0c8; font: 800 11px/1.2 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; letter-spacing: 2px;
  text-shadow: 0 0 6px #3de0c8; box-shadow: 0 0 10px rgba(61, 224, 200, 0.55), inset 0 0 6px rgba(61, 224, 200, 0.35);
}
#btnUnlockAudio.home-sound {
  position: absolute; z-index: 4; right: 12px; top: 50px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
  font-size: 20px; line-height: 1; color: #e3d9ff; background: rgba(139, 92, 255, 0.12); border: 2px solid #8b5cff; border-radius: 50%; box-shadow: 0 0 10px rgba(139, 92, 255, 0.45);
}
#btnUnlockAudio.home-sound svg { display: block; margin: 0 auto; width: 55%; height: 55%; fill: currentColor; }
.home-pinita { position: absolute; z-index: 1; right: 16px; top: 22px; width: 190px; height: 282px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.home-halo { position: absolute; left: 0; top: 30px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 61, 139, 0.45) 0%, rgba(255, 61, 139, 0) 70%); }
.home-pinita picture { position: relative; display: block; }
.hero-anim { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 2; }
.hero-anim .pa { height: 100%; filter: drop-shadow(0 0 14px rgba(255, 61, 139, 0.55)); }
.home-pinita.is-anim picture { visibility: hidden; }
.home-pinita img { position: relative; display: block; height: 276px; width: auto; filter: drop-shadow(0 0 14px rgba(255, 61, 139, 0.55)); }

.home-col { position: relative; z-index: 2; }
.home-top { position: relative; min-height: 292px; }
.home-head { width: 62%; }
.home-title {
  padding-bottom: 14px; color: #fff; font: 400 52px/1.02 'Pacifico', 'Brush Script MT', cursive;
  text-shadow: 0 0 4px #ff3d8b, 0 0 12px #ff3d8b, 0 0 26px rgba(255, 61, 139, 0.8);
}
.home-sub { display: flex; align-items: center; }
.home-age { padding: 3px 11px; border: 2px solid #ffc94d; border-radius: 16px; color: #ffc94d; font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; white-space: nowrap; }
.home-tag { display: none; }
.home-bubble {
  position: relative; box-sizing: border-box; width: 62%; max-width: 250px; margin: 14px 0 0; padding: 10px 14px; border-radius: 16px;
  background: #f6f1fa; color: #1b1527; font: 700 15px/1.3 'DM Sans', system-ui, sans-serif;
}
.home-bubble:after { content: ''; position: absolute; right: -14px; top: 22px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 16px solid #f6f1fa; }

#setup.home .start-actions { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin: 6px 0 0; }
#setup.home .start-actions button { margin: 0; }
#setup.home .start-actions #btnChooseGame { position: static; grid-column: 1 / -1; width: auto; }
#setup.home .start-actions #btnPadSetup { grid-column: 1 / -1; }

/* botones: principal (protagonista), secundario violeta, móvil turquesa */
#setup.home .start-actions #btnChooseGame {
  height: 64px; min-height: 64px; padding: 0 40px; border: 0; border-radius: 32px;
  background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; font: 700 22px 'DM Sans', system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 24px rgba(255, 61, 139, 0.7);
}
#setup.home .start-actions button.secondary {
  height: 52px; min-height: 52px; padding: 0 22px; border: 2px solid #8b5cff; border-radius: 26px; background: rgba(139, 92, 255, 0.12); background-image: none;
  color: #e3d9ff; font: 700 16px 'DM Sans', system-ui, sans-serif; box-shadow: 0 0 14px rgba(139, 92, 255, 0.45);
}
#setup.home .start-actions button.pad { border-color: #3de0c8; background: rgba(61, 224, 200, 0.1); color: #bff5ec; box-shadow: 0 0 14px rgba(61, 224, 200, 0.4); }
#setup.home .start-actions button:hover { transform: none; filter: brightness(1.1); }
#setup.home .start-actions button:disabled { opacity: 0.55; box-shadow: none; }

/* tablero */
#setup.home .setup-error { text-align: left; margin: 10px 0 0; }
#setup.home .resume-box { justify-content: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
#setup.home .home-label { display: block; margin: 20px 0 8px; color: #cdbfe6; font: 400 13px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
#setup.home .board-pills { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; margin: 0; overflow: visible; padding: 0; }
#setup.home .board-pills .board-card {
  --bc: #f6f1fa; --bc-rgb: 246, 241, 250;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: auto; max-width: none; min-width: 0; height: 56px; min-height: 56px; margin: 0; padding: 0 8px;
  border: 2px solid #f6f1fa; border: 2px solid var(--bc, #f6f1fa); border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 8px rgba(0, 0, 0, 0);
  color: #fff; font: 700 15px/1.15 'DM Sans', system-ui, sans-serif; white-space: nowrap; overflow: hidden;
}
#setup.home .board-pills .board-card[data-board="suave"] { --bc: #4ee08f; --bc-rgb: 78, 224, 143; }
#setup.home .board-pills .board-card[data-board="picante"] { --bc: #ffc94d; --bc-rgb: 255, 201, 77; }
#setup.home .board-pills .board-card[data-board="hot"] { --bc: #ff8a3d; --bc-rgb: 255, 138, 61; }
#setup.home .board-pills .board-card[data-board="intenso"] { --bc: #ff3d4f; --bc-rgb: 255, 61, 79; }
#setup.home .board-pills .board-card[data-board="mio"] { --bc: #a5b4fc; --bc-rgb: 165, 180, 252; }
#setup.home .board-pills .board-card .badge { align-self: center; margin: 0 0 2px; padding: 0; border-radius: 0; background: none; color: #f6f1fa; color: var(--bc, #f6f1fa); font: 700 11px/1.1 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; }
#setup.home .board-pills .board-card .board-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin: 0; font: 700 15px/1.15 'DM Sans', system-ui, sans-serif; }
#setup.home .board-pills .board-card[aria-checked="true"] { background: rgba(255, 255, 255, 0.22); background: rgba(var(--bc-rgb, 246, 241, 250), 0.22); box-shadow: 0 0 22px #f6f1fa; box-shadow: 0 0 22px var(--bc, #f6f1fa); }
#setup.home .board-desc { margin: 10px 0 0; min-height: 2.6em; text-align: left; color: #cdbfe6; font-size: 14px; line-height: 1.35; opacity: 1; }
#setup.home #boardMsg { text-align: left; margin: 4px 0 0; }

/* jugadores: fila de avatares + «N jugadores · Editar» */
.players-summary { display: flex; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
.ps-avatars { display: flex; margin-right: 6px; }
.ps-av { display: flex; align-items: center; justify-content: center; box-sizing: content-box; width: 46px; height: 46px; margin-right: -10px; border: 2px solid #0f0a1c; border-radius: 50%; background: #211a30; font-size: 24px; line-height: 1; }
.ps-av.ps-more { color: #cdbfe6; font: 700 14px 'DM Sans', system-ui, sans-serif; }
.ps-text { margin: 0 0 0 14px; color: #cdbfe6; font: 400 16px/1.2 'DM Sans', system-ui, sans-serif; }
#setup.home .ps-edit, #setup.home .home-link { min-height: 0; margin: -12px -6px; padding: 12px 6px; border: 0; border-radius: 6px; background: none; box-shadow: none; color: #ffc94d; font: 700 16px 'DM Sans', system-ui, sans-serif; cursor: pointer; }
#setup.home .ps-edit:hover, #setup.home .home-link:hover { filter: brightness(1.15); box-shadow: none; }
.home-label-row { display: flex; align-items: baseline; }
#setup.home .home-link { margin-left: 14px; margin-right: -6px; }
#setup.home .players-section { margin: 14px 0 0; padding: 12px 10px 14px; border: 1px solid rgba(139, 92, 255, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
#setup.home .players-section.is-collapsed { display: none; }

#setup.home .home-foot { padding: 0 16px 56px; text-align: center; }
#setup.home .home-foot .advanced { text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }

@media (max-width: 374px) { .home-title { font-size: 48px; } .home-bubble { font-size: 14px; } }
@media (max-height: 700px) {
  .home-top { min-height: 272px; }
  .home-pinita { top: 24px; height: 262px; }
  .home-pinita img { height: 258px; }
}

/* ============================== COMPOSICIÓN ANCHA: PC y TELE ============================== */
html.home-wide {
  --w-padx: 80; --w-pady: 70; --w-colw: 700;
  --w-title: 98; --w-title-pb: 34;
  --w-age: 15; --w-age-pv: 4; --w-age-ph: 14; --w-age-bw: 2; --w-age-r: 20; --w-tag: 18; --w-sub-gap: 12; --w-sub-mt: 6;
  --w-bub: 20; --w-bub-pv: 14; --w-bub-ph: 20; --w-bub-max: 420; --w-bub-r: 20; --w-tail-w: 22; --w-tail-h: 12; --w-tail-top: 30; --w-tail-out: 18;
  --w-gap: 26; --w-gap-a: 32; --w-gap-l: 36;
  --w-start-h: 64; --w-start: 22; --w-start-ph: 40; --w-start-r: 32; --w-start-glow: 28;
  --w-btn-h: 52; --w-btn: 16; --w-btn-ph: 22; --w-btn-r: 26; --w-btn-bw: 2; --w-btn-gap: 12; --w-btn-glow: 14;
  --w-lab: 14; --w-bd-h: 56; --w-bd-w: 110; --w-bd: 16; --w-bd-cap: 11; --w-bd-ph: 16; --w-bd-r: 14; --w-bd-gap: 10; --w-bd-bw: 2; --w-bd-glow: 22;
  --w-desc: 15;
  --w-av: 46; --w-av-fs: 24; --w-av-ov: -10; --w-ps: 16; --w-ps-ml: 24;
  --w-pin-left: 760; --w-pin-top: 120; --w-pin-w: 560; --w-pin-h: 700; --w-pin-img: 690; --w-halo: 460; --w-halo-left: 50; --w-halo-top: 90;
  --w-sign: 22; --w-sign-bw: 3; --w-sign-pv: 8; --w-sign-ph: 18; --w-sign-r: 12; --w-sign-right: 56; --w-sign-top: 44; --w-sign-ls: 3;
  --w-snd: 46; --w-snd-top: 118;
  --w-stage-w: 1440; --w-stage-h: 900;
  --w-g1w: 900; --w-g1h: 600; --w-g2w: 700; --w-g2h: 500;
}
html.home-wide.tv-mode {
  --w-padx: 96; --w-pady: 56; --w-colw: 1080;
  --w-title: 128; --w-title-pb: 36;
  --w-age: 28; --w-age-pv: 6; --w-age-ph: 22; --w-age-bw: 3; --w-age-r: 32; --w-tag: 28; --w-sub-gap: 18; --w-sub-mt: 8;
  --w-bub: 30; --w-bub-pv: 18; --w-bub-ph: 26; --w-bub-max: 600; --w-bub-r: 26; --w-tail-w: 28; --w-tail-h: 16; --w-tail-top: 38; --w-tail-out: 24;
  --w-gap: 30; --w-gap-a: 36; --w-gap-l: 40;
  --w-start-h: 84; --w-start: 32; --w-start-ph: 44; --w-start-r: 42; --w-start-glow: 14;
  --w-btn-h: 72; --w-btn: 28; --w-btn-ph: 26; --w-btn-r: 36; --w-btn-bw: 3; --w-btn-gap: 18; --w-btn-glow: 0;
  --w-lab: 28; --w-bd-h: 112; --w-bd-w: 150; --w-bd: 28; --w-bd-cap: 28; --w-bd-ph: 22; --w-bd-r: 20; --w-bd-gap: 16; --w-bd-bw: 3; --w-bd-glow: 14;
  --w-desc: 28;
  --w-av: 64; --w-av-fs: 34; --w-av-ov: -14; --w-ps: 28; --w-ps-ml: 28;
  --w-pin-left: 1180; --w-pin-top: 128; --w-pin-w: 640; --w-pin-h: 880; --w-pin-img: 850; --w-halo: 560; --w-halo-left: 40; --w-halo-top: 110;
  --w-sign: 30; --w-sign-bw: 4; --w-sign-pv: 10; --w-sign-ph: 24; --w-sign-r: 16; --w-sign-right: 72; --w-sign-top: 56; --w-sign-ls: 4;
  --w-snd: 64; --w-snd-top: 150;
  --w-stage-w: 1920; --w-stage-h: 1080;
  --w-g1w: 1080; --w-g1h: 720; --w-g2w: 840; --w-g2h: 600;
}

html.home-wide #setup.home {
  /* los dos degradados de la maqueta (78 % 40 % y 10 % 90 % del ESCENARIO), a todo el ancho de la ventana: sin bandas a los lados */
  background: radial-gradient(calc(var(--w-g1w, 900) * var(--sp-u, 1px)) calc(var(--w-g1h, 600) * var(--sp-u, 1px)) at calc(50% + var(--w-stage-w, 1440) * 0.28 * var(--sp-u, 1px)) calc(var(--w-stage-h, 900) * 0.4 * var(--sp-u, 1px)), #4a1670 0%, rgba(74, 22, 112, 0) 70%), radial-gradient(calc(var(--w-g2w, 700) * var(--sp-u, 1px)) calc(var(--w-g2h, 500) * var(--sp-u, 1px)) at calc(50% - var(--w-stage-w, 1440) * 0.4 * var(--sp-u, 1px)) calc(var(--w-stage-h, 900) * 0.9 * var(--sp-u, 1px)), #6b0f4a 0%, rgba(107, 15, 74, 0) 70%), #0f0a1c;
}
html.home-wide .home-stage {
  width: calc(var(--w-stage-w, 1440) * var(--sp-u, 1px)); max-width: none; min-height: calc(var(--w-stage-h, 900) * var(--sp-u, 1px)); margin: 0 auto; padding: calc(var(--w-pady, 70) * var(--sp-u, 1px)) calc(var(--w-padx, 80) * var(--sp-u, 1px)) calc(var(--w-pady, 70) * var(--sp-u, 1px));
}
html.home-wide.tv-mode .home-stage { padding-bottom: calc(20 * var(--sp-u, 1px)); }   /* la tele no desplaza: todo cabe en 1080 */
html.home-wide .home-col { width: calc(var(--w-colw, 700) * var(--sp-u, 1px)); }
html.home-wide .home-top { min-height: 0; }
html.home-wide .home-head { width: auto; }
html.home-wide .home-title {
  padding-bottom: calc(var(--w-title-pb, 34) * var(--sp-u, 1px)); font-size: calc(var(--w-title, 98) * var(--sp-u, 1px)); line-height: 1.05;
  text-shadow: 0 0 calc(6 * var(--sp-u, 1px)) #ff3d8b, 0 0 calc(18 * var(--sp-u, 1px)) #ff3d8b, 0 0 calc(42 * var(--sp-u, 1px)) #ff3d8b, 0 0 calc(80 * var(--sp-u, 1px)) rgba(255, 61, 139, 0.8);
}
html.home-wide .home-sub { margin-top: calc(var(--w-sub-mt, 6) * var(--sp-u, 1px)); }
html.home-wide .home-age { padding: calc(var(--w-age-pv, 4) * var(--sp-u, 1px)) calc(var(--w-age-ph, 14) * var(--sp-u, 1px)); border-width: calc(var(--w-age-bw, 2) * var(--sp-u, 1px)); border-radius: calc(var(--w-age-r, 20) * var(--sp-u, 1px)); font-size: calc(var(--w-age, 15) * var(--sp-u, 1px)); letter-spacing: calc(1 * var(--sp-u, 1px)); }
html.home-wide .home-tag { display: block; margin-left: calc(var(--w-sub-gap, 12) * var(--sp-u, 1px)); color: #cdbfe6; font: 400 calc(var(--w-tag, 18) * var(--sp-u, 1px)) 'DM Sans', system-ui, sans-serif; }
html.home-wide .home-bubble {
  box-sizing: content-box; width: auto; max-width: calc(var(--w-bub-max, 420) * var(--sp-u, 1px)); margin: calc(var(--w-gap, 26) * var(--sp-u, 1px)) 0 0; padding: calc(var(--w-bub-pv, 14) * var(--sp-u, 1px)) calc(var(--w-bub-ph, 20) * var(--sp-u, 1px)); border-radius: calc(var(--w-bub-r, 20) * var(--sp-u, 1px)); font-size: calc(var(--w-bub, 20) * var(--sp-u, 1px));
}
html.home-wide .home-bubble:after {
  right: calc(-1 * var(--w-tail-out, 18) * var(--sp-u, 1px)); top: calc(var(--w-tail-top, 30) * var(--sp-u, 1px));
  border-top-width: calc(var(--w-tail-h, 12) * var(--sp-u, 1px)); border-bottom-width: calc(var(--w-tail-h, 12) * var(--sp-u, 1px)); border-left-width: calc(var(--w-tail-w, 22) * var(--sp-u, 1px));
}

html.home-wide #setup.home .start-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0; margin: calc(var(--w-gap-a, 32) * var(--sp-u, 1px)) 0 calc(-1 * var(--w-btn-gap, 12) * var(--sp-u, 1px)); }
html.home-wide #setup.home .start-actions button { margin: 0 calc(var(--w-btn-gap, 12) * var(--sp-u, 1px)) calc(var(--w-btn-gap, 12) * var(--sp-u, 1px)) 0; }
html.home-wide #setup.home .start-actions button:last-child { margin-right: 0; }
html.home-wide #setup.home .start-actions #btnChooseGame {
  width: auto; height: calc(var(--w-start-h, 64) * var(--sp-u, 1px)); min-height: calc(var(--w-start-h, 64) * var(--sp-u, 1px)); padding: 0 calc(var(--w-start-ph, 40) * var(--sp-u, 1px)); border-radius: calc(var(--w-start-r, 32) * var(--sp-u, 1px)); font-size: calc(var(--w-start, 22) * var(--sp-u, 1px));
  box-shadow: 0 0 calc(var(--w-start-glow, 28) * var(--sp-u, 1px)) rgba(255, 61, 139, 0.7);
}
html.home-wide #setup.home .start-actions button.secondary {
  height: calc(var(--w-btn-h, 52) * var(--sp-u, 1px)); min-height: calc(var(--w-btn-h, 52) * var(--sp-u, 1px)); padding: 0 calc(var(--w-btn-ph, 22) * var(--sp-u, 1px)); border-width: calc(var(--w-btn-bw, 2) * var(--sp-u, 1px)); border-radius: calc(var(--w-btn-r, 26) * var(--sp-u, 1px)); font-size: calc(var(--w-btn, 16) * var(--sp-u, 1px));
  box-shadow: 0 0 calc(var(--w-btn-glow, 14) * var(--sp-u, 1px)) rgba(139, 92, 255, 0.45);
}
html.home-wide #setup.home .start-actions button.pad { box-shadow: 0 0 calc(var(--w-btn-glow, 14) * var(--sp-u, 1px)) rgba(61, 224, 200, 0.4); }

html.home-wide #setup.home .home-label { margin: calc(var(--w-gap-l, 36) * var(--sp-u, 1px)) 0 calc(var(--w-bd-gap, 10) * var(--sp-u, 1px)); font-size: calc(var(--w-lab, 14) * var(--sp-u, 1px)); letter-spacing: calc(1 * var(--sp-u, 1px)); }
html.home-wide #setup.home .setup-error { margin-top: calc(var(--w-bd-gap, 10) * var(--sp-u, 1px)); }
html.home-wide #setup.home .board-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; grid-gap: 0; gap: 0; }
html.home-wide #setup.home .board-pills .board-card {
  min-width: calc(var(--w-bd-w, 110) * var(--sp-u, 1px)); width: auto; height: calc(var(--w-bd-h, 56) * var(--sp-u, 1px)); min-height: calc(var(--w-bd-h, 56) * var(--sp-u, 1px)); margin: 0 calc(var(--w-bd-gap, 10) * var(--sp-u, 1px)) calc(var(--w-bd-gap, 10) * var(--sp-u, 1px)) 0; padding: 0 calc(var(--w-bd-ph, 16) * var(--sp-u, 1px));
  border-width: calc(var(--w-bd-bw, 2) * var(--sp-u, 1px)); border-radius: calc(var(--w-bd-r, 14) * var(--sp-u, 1px)); font-size: calc(var(--w-bd, 16) * var(--sp-u, 1px));
}
html.home-wide #setup.home .board-pills .board-card .badge { font-size: calc(var(--w-bd-cap, 10) * var(--sp-u, 1px)); margin-bottom: calc(2 * var(--sp-u, 1px)); letter-spacing: calc(1.5 * var(--sp-u, 1px)); }
html.home-wide #setup.home .board-pills .board-card .board-name { font-size: calc(var(--w-bd, 16) * var(--sp-u, 1px)); }
html.home-wide #setup.home .board-pills .board-card[aria-checked="true"] { box-shadow: 0 0 calc(var(--w-bd-glow, 22) * var(--sp-u, 1px)) #f6f1fa; box-shadow: 0 0 calc(var(--w-bd-glow, 22) * var(--sp-u, 1px)) var(--bc, #f6f1fa); }
html.home-wide #setup.home .board-desc { margin-top: 0; min-height: 2.7em; font-size: calc(var(--w-desc, 15) * var(--sp-u, 1px)); }

html.home-wide .players-summary { margin-top: calc(6 * var(--sp-u, 1px)); }
html.home-wide .ps-av { width: calc(var(--w-av, 46) * var(--sp-u, 1px)); height: calc(var(--w-av, 46) * var(--sp-u, 1px)); margin-right: calc(var(--w-av-ov, -10) * var(--sp-u, 1px)); border-width: calc(2 * var(--sp-u, 1px)); font-size: calc(var(--w-av-fs, 24) * var(--sp-u, 1px)); }
html.home-wide .ps-av.ps-more { font-size: calc(var(--w-ps, 16) * var(--sp-u, 1px)); }
html.home-wide .ps-text { margin-left: calc(var(--w-ps-ml, 14) * var(--sp-u, 1px)); font-size: calc(var(--w-ps, 16) * var(--sp-u, 1px)); }
html.home-wide #setup.home .ps-edit, html.home-wide #setup.home .home-link { font-size: calc(var(--w-ps, 16) * var(--sp-u, 1px)); }
html.home-wide #setup.home .home-link { margin-left: calc(18 * var(--sp-u, 1px)); }

html.home-wide .home-sign {
  right: calc(var(--w-sign-right, 56) * var(--sp-u, 1px)); top: calc(var(--w-sign-top, 44) * var(--sp-u, 1px)); padding: calc(var(--w-sign-pv, 8) * var(--sp-u, 1px)) calc(var(--w-sign-ph, 18) * var(--sp-u, 1px)); border-width: calc(var(--w-sign-bw, 3) * var(--sp-u, 1px)); border-radius: calc(var(--w-sign-r, 12) * var(--sp-u, 1px));
  font-size: calc(var(--w-sign, 22) * var(--sp-u, 1px)); letter-spacing: calc(var(--w-sign-ls, 3) * var(--sp-u, 1px)); text-shadow: 0 0 calc(12 * var(--sp-u, 1px)) #3de0c8; box-shadow: 0 0 calc(18 * var(--sp-u, 1px)) rgba(61, 224, 200, 0.55), inset 0 0 calc(12 * var(--sp-u, 1px)) rgba(61, 224, 200, 0.35);
}
html.home-wide #btnUnlockAudio.home-sound { box-shadow: 0 0 calc(14 * var(--sp-u, 1px)) rgba(139, 92, 255, 0.45); right: calc(var(--w-sign-right, 56) * var(--sp-u, 1px)); top: calc(var(--w-snd-top, 118) * var(--sp-u, 1px)); bottom: auto; width: calc(var(--w-snd, 46) * var(--sp-u, 1px)); min-width: 44px; height: calc(var(--w-snd, 46) * var(--sp-u, 1px)); min-height: 44px;  }
html.home-wide .home-pinita { left: calc(var(--w-pin-left, 760) * var(--sp-u, 1px)); right: auto; top: calc(var(--w-pin-top, 120) * var(--sp-u, 1px)); width: calc(var(--w-pin-w, 560) * var(--sp-u, 1px)); height: calc(var(--w-pin-h, 700) * var(--sp-u, 1px)); }
html.home-wide .home-halo { left: calc(var(--w-halo-left, 50) * var(--sp-u, 1px)); top: calc(var(--w-halo-top, 90) * var(--sp-u, 1px)); width: calc(var(--w-halo, 460) * var(--sp-u, 1px)); height: calc(var(--w-halo, 460) * var(--sp-u, 1px)); }
html.home-wide .hero-anim { top: auto; height: calc(var(--w-pin-img, 690) * var(--sp-u, 1px)); }
html.home-wide .hero-anim .pa { filter: drop-shadow(0 0 calc(22 * var(--sp-u, 1px)) rgba(255, 61, 139, 0.55)); }
html.home-wide .home-pinita img { height: calc(var(--w-pin-img, 690) * var(--sp-u, 1px)); filter: drop-shadow(0 0 calc(22 * var(--sp-u, 1px)) rgba(255, 61, 139, 0.55)); }

/* cuatro luces decorativas (PC: círculos desenfocados como en la maqueta) */
html.home-wide .home-light { display: block; position: absolute; border-radius: 50%; pointer-events: none; }
html.home-wide .hl1 { left: calc(980 * var(--sp-u, 1px)); top: calc(60 * var(--sp-u, 1px)); width: calc(120 * var(--sp-u, 1px)); height: calc(120 * var(--sp-u, 1px)); background: #ff3d8b; opacity: 0.18; filter: blur(18px); }
html.home-wide .hl2 { left: calc(1240 * var(--sp-u, 1px)); top: calc(260 * var(--sp-u, 1px)); width: calc(160 * var(--sp-u, 1px)); height: calc(160 * var(--sp-u, 1px)); background: #3de0c8; opacity: 0.14; filter: blur(22px); }
html.home-wide .hl3 { left: calc(900 * var(--sp-u, 1px)); top: calc(640 * var(--sp-u, 1px)); width: calc(140 * var(--sp-u, 1px)); height: calc(140 * var(--sp-u, 1px)); background: #ffc94d; opacity: 0.14; filter: blur(20px); }
html.home-wide .hl4 { left: calc(40 * var(--sp-u, 1px)); top: calc(300 * var(--sp-u, 1px)); width: calc(100 * var(--sp-u, 1px)); height: calc(100 * var(--sp-u, 1px)); background: #8b5cff; opacity: 0.2; filter: blur(16px); }

html.home-wide #setup.home .home-foot { width: calc(var(--w-colw, 700) * var(--sp-u, 1px)); max-width: 100%; margin: 0 0 0 calc(50% - var(--w-stage-w, 1440) * 0.5 * var(--sp-u, 1px) + var(--w-padx, 80) * var(--sp-u, 1px)); padding: 24px 0 56px; }

/* ---------- TELE: sin filter: blur; luces con degradado suave y fijas; brillos pequeños; título con solo las dos primeras capas ---------- */
html.tv-mode .home-title { text-shadow: 0 0 calc(6 * var(--sp-u, 1px)) #ff3d8b, 0 0 calc(18 * var(--sp-u, 1px)) #ff3d8b; }
html.tv-mode .home-sign { text-shadow: 0 0 4px #3de0c8; box-shadow: 0 0 8px rgba(61, 224, 200, 0.5); }
html.tv-mode .home-light { filter: none; opacity: 1; }
html.tv-mode .hl1 { background: radial-gradient(circle, rgba(255, 61, 139, 0.2) 0%, rgba(255, 61, 139, 0) 70%); width: calc(240 * var(--sp-u, 1px)); height: calc(240 * var(--sp-u, 1px)); }
html.tv-mode .hl2 { background: radial-gradient(circle, rgba(61, 224, 200, 0.16) 0%, rgba(61, 224, 200, 0) 70%); width: calc(320 * var(--sp-u, 1px)); height: calc(320 * var(--sp-u, 1px)); }
html.tv-mode .hl3 { background: radial-gradient(circle, rgba(255, 201, 77, 0.16) 0%, rgba(255, 201, 77, 0) 70%); width: calc(280 * var(--sp-u, 1px)); height: calc(280 * var(--sp-u, 1px)); }
html.tv-mode .hl4 { background: radial-gradient(circle, rgba(139, 92, 255, 0.22) 0%, rgba(139, 92, 255, 0) 70%); width: calc(200 * var(--sp-u, 1px)); height: calc(200 * var(--sp-u, 1px)); }
html.tv-mode .home-halo { background: radial-gradient(circle, rgba(255, 61, 139, 0.4) 0%, rgba(255, 61, 139, 0) 70%); }
html.tv-mode .home-pinita img { filter: drop-shadow(0 0 8px rgba(255, 61, 139, 0.5)); }
html.tv-mode .hero-anim .pa { filter: none; }
html.tv-mode #setup.home .start-actions button.secondary { -webkit-text-fill-color: #e3d9ff; }
html.tv-mode #setup.home .start-actions button.pad { -webkit-text-fill-color: #bff5ec; }
html.tv-mode #setup.home .ps-edit, html.tv-mode #setup.home .home-link { -webkit-text-fill-color: #ffc94d; }
html.tv-mode #setup.home .home-link { padding: 2px 6px; margin-top: -2px; margin-bottom: -2px; }
html.home-wide #setup.home .home-label-row { margin-bottom: calc(6 * var(--sp-u, 1px)); }