/* Cabos-gories · Tokens y componentes compartidos (jugador, proyector, host) */
:root{
  --navy:#1B2B4B;--navy-mid:#243761;--gold:#F5A623;--gold-dim:#E8931A;--gold-pale:#FFF8EC;
  --teal:#0D87A6;--teal-pale:#D6EFF7;--bg:#F3F7FC;--warm:#FFFBF4;--white:#FFFFFF;
  --g100:#EFF3F8;--g200:#D6E2EE;--g400:#8FA3BB;--g600:#4A6080;
  --red:#E53E3E;--red-pale:#FEF2F2;--green:#2D9E58;--green-pale:#E8FAF0;--amber:#D97706;--amber-pale:#FFFBEB;
  --serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --gold-grad:linear-gradient(135deg,var(--gold),var(--gold-dim));
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--navy);line-height:1.3;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{display:block;max-width:100%}
.hidden{display:none!important}
kbd{background:var(--g100);border:1px solid var(--g200);border-radius:5px;padding:1px 7px;font-family:inherit;font-size:.9em}

/* ── Wordmark ── */
.wordmark{font-family:var(--sans)}
.wordmark .wm-title{font-family:var(--serif);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.wordmark .wm-title b{color:var(--gold);font-weight:900}
.wordmark .wm-edition{font-weight:700;letter-spacing:.09em;color:var(--teal);text-transform:uppercase;margin-top:.18em}
.wordmark .wm-tagline{color:var(--g600);font-style:italic;margin-top:.3em}
.wordmark.light .wm-title{color:var(--white)}
.wordmark.light .wm-edition{color:var(--gold)}
.wordmark.light .wm-tagline{color:rgba(255,255,255,.7)}
.wordmark.center{text-align:center}

/* ── Tags / pills ── */
.tag{display:inline-block;background:var(--g100);color:var(--g600);border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:700;white-space:nowrap;line-height:1.4}
.tag.navy{background:var(--navy);color:var(--white)}
.tag.green{background:var(--green-pale);color:var(--green)}
.tag.teal{background:var(--teal-pale);color:var(--teal)}
.tag.teal-solid{background:var(--teal);color:var(--white)}
.tag.gold{background:var(--gold);color:var(--navy)}
.tag.amber{background:var(--amber-pale);color:var(--amber)}
.tag.red{background:var(--red-pale);color:var(--red)}
.pill{display:inline-block;background:var(--g100);color:var(--g600);border-radius:10px;padding:8px 18px;font-size:15px;font-weight:700;white-space:nowrap}
.pill.green{background:var(--green-pale);color:var(--green)}
.pill.navy{background:var(--navy);color:var(--white)}
.pill.gold{background:var(--gold);color:var(--navy)}
.pill.teal{background:var(--teal-pale);color:var(--teal)}

/* ── Botón dorado ── */
.btn-gold{display:block;width:100%;background:var(--gold-grad);border-radius:14px;padding:15px;text-align:center;box-shadow:0 8px 24px rgba(245,166,35,.33);font-weight:800;font-size:16px;color:var(--navy);transition:transform .15s,opacity .15s}
.btn-gold:active{transform:scale(.98)}
.btn-gold:disabled{opacity:.55;cursor:default;transform:none}
.btn-gold.big{border-radius:20px;padding:16px;border:2.5px solid #FFE0A0;font-family:var(--serif);font-weight:900;font-size:28px;letter-spacing:2px}
.btn-gold.big small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:0;color:rgba(27,43,75,.6);margin-top:2px}

/* ── Burbuja de letra ── */
.letter-bubble{border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 .125em .4em rgba(245,166,35,.4)}
.letter-bubble.noglow{box-shadow:none}
.letter-bubble span{font-family:var(--serif);font-weight:900;color:var(--navy);line-height:1;font-size:.62em}

/* ── Patrocinadores ── */
.sponsor-strip{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sponsor-strip .sp{background:var(--white);border:1px solid var(--g200);border-radius:7px;padding:4px 9px;font-size:9.5px;font-weight:600;color:var(--g600);white-space:nowrap;display:flex;align-items:center;gap:6px}
.sponsor-strip .sp img{height:1.6em;width:auto;max-width:6em;object-fit:contain}
.sponsor-strip .sp.more{background:none;border:none;color:var(--teal);font-weight:700}
.sponsor-strip.dark .sp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.sponsor-strip.dark .sp.more{color:var(--gold)}
.partners-label{font-size:8.5px;color:var(--g400);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:7px}

/* ── Olas decorativas ── */
.waves{position:absolute;bottom:0;left:0;width:100%;pointer-events:none}

/* ── Rayos del reveal (de ruleta-referencia) ── */
.reveal-rays{position:absolute;top:46%;left:50%;width:250vmax;height:250vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(245,166,35,.10) 0deg 6deg,transparent 6deg 30deg);animation:raysSpin 24s linear infinite;pointer-events:none}
@keyframes raysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes countdownPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes clockPulse{50%{transform:scale(1.06)}}
@keyframes dotBlink{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Ruleta (de ruleta-referencia) ── */
.wheel-wrap{position:relative;border-radius:50%;box-shadow:0 12px 60px rgba(27,43,75,.18);margin:0 auto}
.wheel-pointer{position:absolute;top:-8%;left:50%;transform:translateX(-50%);font-size:1.6em;color:var(--gold-dim);z-index:3;text-shadow:0 4px 10px rgba(232,147,26,.4);line-height:1}
.wheel-svg{width:100%;height:100%;border-radius:50%;display:block}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:29%;height:29%;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(245,166,35,.5);z-index:2}
.wheel-hub span{font-family:var(--serif);font-weight:900;color:var(--navy);font-size:2.4em;line-height:1}

/* ── Loading overlay (de ruleta-referencia) ── */
#loading-overlay{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .5s}
#loading-overlay.hide{opacity:0;pointer-events:none}
.loading-logo{height:110px;width:auto;animation:loadingPulse 1.6s ease-in-out infinite}
@keyframes loadingPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}
.loading-bar{width:min(320px,70vw);height:8px;background:var(--g200);border-radius:4px;overflow:hidden}
.loading-fill{height:100%;width:30%;background:linear-gradient(90deg,var(--gold),var(--gold-dim));border-radius:4px;animation:loadSlide 1.2s ease-in-out infinite}
@keyframes loadSlide{0%{margin-left:-30%}100%{margin-left:100%}}
.loading-text{font-size:13px;color:var(--g400);letter-spacing:1px}

/* ── Aviso de conexión ── */
.net-banner{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--amber);color:var(--white);font-size:12px;font-weight:700;text-align:center;padding:6px;display:none}
.net-banner.on{display:block}