/* =========================================================================
   Tema "Elegante" — pantallas públicas (tablero de posiciones y proyección).
   Esencia gráfica tomada del template Escape-codigo (tema oscuro):
   dorado #C09763, blanco cálido #F6F2ED, negros suaves y grises.
   Tipografías: Red Hat Display (títulos), Playfair Display (acentos serif),
   Inter (texto). Animaciones permanentes sutiles: brillo que recorre el
   perímetro de los marcos, destellos que viajan por las líneas, pulso suave.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700;900&family=Playfair+Display:ital,wght@0,500;0,700;1,500;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --gold:#C09763;
  --gold-light:#E8C99B;
  --gold-bright:#F5DFB8;
  --gold-deep:#8C6A3F;
  --ink:#0A0A0A;
  --surface-1:#141414;
  --surface-2:#191919;
  --surface-3:#1E1E1E;
  --gray-1:#696969;
  --gray-2:#8D8D8D;
  --warm-white:#F6F2ED;
  --hairline:rgba(255,255,255,.08);
  --gold-hairline:rgba(192,151,99,.35);
  --title-font:'Red Hat Display',Arial,sans-serif;
  --accent-font:'Playfair Display',Georgia,serif;
  --text-font:'Inter',Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ height:100%; }

/* ---- Fondo: gris casi negro con viñeta y bruma dorada arriba ---- */
body.elegant-body{
  min-height:100%;
  font-family:var(--text-font);
  color:var(--warm-white);
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(192,151,99,.14) 0%, transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 110%, rgba(192,151,99,.05) 0%, transparent 50%),
    linear-gradient(180deg, #111111 0%, var(--ink) 45%, #0d0d0d 100%);
  background-attachment:fixed;
  position:relative;
  overflow-x:hidden;
}
/* Motas doradas flotando muy lento (detalle permanente, casi subliminal). */
body.elegant-body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle 2px at 18% 32%, rgba(232,201,155,.5) 0%, transparent 100%),
    radial-gradient(circle 1px at 71% 18%, rgba(232,201,155,.6) 0%, transparent 100%),
    radial-gradient(circle 2px at 84% 61%, rgba(232,201,155,.35) 0%, transparent 100%),
    radial-gradient(circle 1px at 33% 78%, rgba(232,201,155,.45) 0%, transparent 100%),
    radial-gradient(circle 2px at 55% 45%, rgba(232,201,155,.28) 0%, transparent 100%),
    radial-gradient(circle 1px at 9% 64%, rgba(232,201,155,.5) 0%, transparent 100%),
    radial-gradient(circle 1px at 92% 85%, rgba(232,201,155,.4) 0%, transparent 100%);
  animation:dust-drift 26s ease-in-out infinite alternate;
}
@keyframes dust-drift{
  from{ transform:translate3d(0,0,0); opacity:.7; }
  50%{ opacity:1; }
  to{ transform:translate3d(-18px,-30px,0); opacity:.7; }
}

/* ---- Marco con brillo que recorre el perímetro (animación permanente) ---- */
@property --sweep{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
.glow-frame{
  position:relative;
  border-radius:22px;
  background:linear-gradient(180deg, var(--surface-2) 0%, #101010 100%);
  border:1px solid var(--gold-hairline);
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.glow-frame::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  padding:2px; pointer-events:none;
  background:conic-gradient(from var(--sweep),
    transparent 0turn,
    transparent .78turn,
    rgba(192,151,99,.55) .88turn,
    var(--gold-bright) .94turn,
    rgba(192,151,99,.55) .985turn,
    transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:perimeter-sweep 7s linear infinite;
}
/* Segundo destello más tenue, desfasado, para que el recorrido nunca "muera". */
.glow-frame::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  padding:2px; pointer-events:none; opacity:.45;
  background:conic-gradient(from var(--sweep),
    transparent 0turn,
    transparent .32turn,
    rgba(232,201,155,.5) .42turn,
    transparent .5turn,
    transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:perimeter-sweep 7s linear infinite;
}
@keyframes perimeter-sweep{ to{ --sweep:360deg; } }

/* ---- Línea divisoria con destello que la recorre ---- */
.shimmer-line{
  position:relative; height:1px; border:none;
  background:linear-gradient(90deg, transparent, var(--gold-hairline) 18%, var(--gold-hairline) 82%, transparent);
  overflow:hidden;
}
.shimmer-line::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:22%;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform:translateX(-120%);
  animation:line-sweep 4.5s ease-in-out infinite;
}
@keyframes line-sweep{
  0%{ transform:translateX(-120%); }
  55%,100%{ transform:translateX(560%); }
}

/* ---- Textos y detalles dorados ---- */
.gold-kicker{
  font-family:var(--title-font); font-weight:500; font-size:13px;
  letter-spacing:6px; text-transform:uppercase; color:var(--gold);
}
.gold-pulse{ animation:gold-pulse 3.2s ease-in-out infinite; }
@keyframes gold-pulse{
  0%,100%{ text-shadow:0 0 0 rgba(232,201,155,0); }
  50%{ text-shadow:0 0 18px rgba(232,201,155,.55); }
}

/* =========================================================================
   TABLERO DE POSICIONES (tablero.php)
   ========================================================================= */
body.board-body{ padding:34px 18px 46px; }
.board-wrap{
  max-width:1100px; margin:0 auto; position:relative; z-index:1;
  display:flex; flex-direction:column; gap:26px;
}

.board-head{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.board-head .logo-360{ width:84px; filter:grayscale(1) brightness(2.4) sepia(.55) saturate(2.4) hue-rotate(-18deg); opacity:.95; }
.board-head .logo-challenge{ width:190px; filter:grayscale(1) brightness(2.6) sepia(.45) saturate(2) hue-rotate(-15deg); opacity:.92; }
.board-title{
  font-family:var(--title-font); font-weight:900; font-size:34px;
  letter-spacing:7px; text-transform:uppercase; color:var(--warm-white);
}
.board-title em{
  font-family:var(--accent-font); font-style:italic; font-weight:700;
  color:var(--gold-light); letter-spacing:2px; text-transform:none;
}
.board-head .shimmer-line{ width:min(460px, 80%); }

/* El scroll horizontal vive en un div interno: si estuviera en la tarjeta,
   el brillo perimetral (::before con inset:-2px) dispararía la aparición
   intermitente de la barra de scroll y la tarjeta titilaría. */
.board-table-card{ padding:26px 28px; }
.board-table-scroll{ overflow-x:auto; }

table.board-table{ width:100%; border-collapse:collapse; }
.board-table th{
  font-family:var(--title-font); font-weight:700; font-size:12px;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--gold);
  padding:12px 14px 14px; text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--gold-hairline);
}
.board-table th.col-team{ text-align:left; }
.board-table td{
  padding:16px 14px; text-align:center;
  border-bottom:1px solid var(--hairline);
}
.board-table tr:last-child td{ border-bottom:none; }
.board-table tbody tr{ transition:background .3s ease; }
.board-table tbody tr:hover{ background:rgba(255,255,255,.02); }

.board-rank{
  font-family:var(--accent-font); font-style:italic; font-weight:700;
  font-size:26px; color:var(--gray-2); width:64px; white-space:nowrap;
}
.board-team{ text-align:left; min-width:200px; }
.board-team-name{
  display:flex; align-items:center; gap:12px;
  font-family:var(--title-font); font-weight:700; font-size:19px;
  letter-spacing:1px; color:var(--warm-white); white-space:nowrap;
}
.board-team-name::before{
  content:""; flex:0 0 11px; height:11px; border-radius:50%;
  background:var(--tc); box-shadow:0 0 12px var(--tc);
  animation:dot-breathe 3.6s ease-in-out infinite;
}
@keyframes dot-breathe{
  0%,100%{ box-shadow:0 0 6px var(--tc); }
  50%{ box-shadow:0 0 16px var(--tc); }
}
.board-points{ font-weight:600; font-size:17px; color:var(--gray-2); white-space:nowrap; }
.board-points.empty{ color:var(--gray-1); opacity:.55; }
.board-total{
  font-family:var(--title-font); font-weight:900; font-size:24px;
  color:var(--warm-white); white-space:nowrap;
}

/* Fila líder: baño dorado sutil + trofeo + total con pulso. */
tr.board-leader{
  background:linear-gradient(90deg, rgba(192,151,99,.14) 0%, rgba(192,151,99,.04) 60%, transparent 100%);
}
tr.board-leader .board-rank{ color:var(--gold-light); }
tr.board-leader .board-rank::after{ content:" 🏆"; font-size:15px; font-style:normal; }
tr.board-leader .board-team-name{ color:var(--gold-bright); }
tr.board-leader .board-total{ color:var(--gold-light); animation:gold-pulse 3.2s ease-in-out infinite; }

.board-empty-msg{ text-align:center; color:var(--gray-2); font-size:16px; padding:30px 0; }
.board-foot{
  text-align:center; font-family:var(--title-font); font-size:11px;
  color:var(--gray-1); letter-spacing:3px; text-transform:uppercase;
}

@media (max-width:600px){
  .board-title{ font-size:21px; letter-spacing:4px; }
  .board-head .logo-360{ width:60px; }
  .board-head .logo-challenge{ width:140px; }
  .board-table td, .board-table th{ padding:10px 8px; }
  .board-team-name{ font-size:15px; }
  .board-rank{ font-size:20px; }
  .board-total{ font-size:19px; }
  .board-table-card{ padding:16px; }
}

/* =========================================================================
   PANTALLA DE PROYECCIÓN DEL CHALLENGE (screen/index.php)
   Overrides sobre game.css: solo estética, ninguna clase/id que use el JS
   cambia de nombre. Se activa con body.elegant-stage.
   ========================================================================= */

/* Logos a tono dorado/crema (mismo filtro que el tablero). */
.elegant-stage .logo-360{ filter:grayscale(1) brightness(2.4) sepia(.55) saturate(2.4) hue-rotate(-18deg); }
.elegant-stage .logo-challenge{ filter:grayscale(1) brightness(2.6) sepia(.45) saturate(2) hue-rotate(-15deg); }

/* El "stage" pasa de arcade violeta a marco elegante con brillo perimetral. */
.elegant-stage .stage{
  background:linear-gradient(180deg, var(--surface-2) 0%, #0f0f0f 100%);
  border:1px solid var(--gold-hairline);
  border-radius:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.elegant-stage .stage::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:2px; pointer-events:none; z-index:6;
  background:conic-gradient(from var(--sweep),
    transparent 0turn,
    transparent .78turn,
    rgba(192,151,99,.55) .88turn,
    var(--gold-bright) .94turn,
    rgba(192,151,99,.55) .985turn,
    transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:perimeter-sweep 7s linear infinite;
}

/* Encabezado de marca: fuera del recuadro, arriba del stage. */
body.elegant-stage{ flex-direction:column; gap:14px; }
.elegant-stage .stage-brand{
  display:flex; align-items:center; justify-content:center; gap:12px;
  position:relative; z-index:1;
}
.elegant-stage .stage-brand .logo-360{ width:auto; height:24px; }
.elegant-stage .stage-brand .logo-challenge{ width:auto; height:12px; }
/* Dejar lugar para el encabezado sin que el stage se salga de la pantalla. */
.elegant-stage .stage{ max-height:calc(100vh - 90px); }
/* En espera y final los logos ya aparecen en grande dentro de la vista. */
body.elegant-stage:has(#screen-start.active) .stage-brand,
body.elegant-stage:has(#screen-final.active) .stage-brand{ display:none; }

/* Pantalla de espera. */
.elegant-stage .wait-shell{
  border:1px solid rgba(192,151,99,.25); border-radius:26px;
  background:linear-gradient(180deg, rgba(192,151,99,.08), rgba(0,0,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 22px 50px rgba(0,0,0,.28);
}
.elegant-stage .logo-badge{
  font-family:var(--title-font); color:var(--gold); border:1px solid var(--gold-hairline);
  letter-spacing:5px; background:rgba(192,151,99,.06);
}
.elegant-stage .wait-line{ background:linear-gradient(90deg, transparent 0%, rgba(192,151,99,.25) 20%, var(--gold-bright) 50%, rgba(192,151,99,.25) 80%, transparent 100%); box-shadow:0 0 18px rgba(192,151,99,.3); }
.elegant-stage .subtitle{ color:var(--gray-2); letter-spacing:3px; }
.elegant-stage .rules{ color:var(--gray-1); }
.elegant-stage #startMsg{ animation:soft-blink 2.8s ease-in-out infinite; }
@keyframes soft-blink{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* Chips de equipos: mantienen su color, pero sobre superficie oscura sobria. */
.elegant-stage .team-chip{ background:rgba(255,255,255,.03); border-width:1px; }
.elegant-stage .team-chip.active{
  background:var(--tc);
  box-shadow:0 0 18px var(--tc), 0 0 32px rgba(0,0,0,.45);
}
.elegant-stage .team-chip.active::after{
  background:#0f0f0f;
  color:var(--gold-light);
  border:1px solid var(--gold-hairline);
}
.elegant-stage .team-chip.correct{ background:var(--tc); }

/* Countdown dorado con pulso. */
.elegant-stage .countdown-num{
  font-family:var(--title-font); font-weight:900; color:var(--gold-light);
  text-shadow:0 0 40px rgba(192,151,99,.65);
}

/* Barra superior y progreso. */
.elegant-stage .pill{
  font-family:var(--title-font); background:rgba(255,255,255,.03);
  border:1px solid var(--gold-hairline); color:var(--gold-light); letter-spacing:2px;
}
.elegant-stage .progress-wrap{ background:#1a1a1a; border:1px solid var(--hairline); }
.elegant-stage .progress-bar{ background:linear-gradient(90deg, var(--gold-deep), var(--gold-light)); }

.elegant-stage .category-badge{
  background:transparent; border:1px solid var(--gold-hairline); color:var(--gold);
  font-family:var(--title-font); letter-spacing:3px; border-radius:999px; padding:5px 14px;
}
.elegant-stage .question-text{
  font-family:var(--title-font); font-weight:700; color:var(--warm-white);
  text-shadow:none; font-size:51px; line-height:1.12;
}
/* Preguntas largas: el JS marca q-long (>120 caracteres) y q-xlong (>200)
   para que el texto ceda espacio y las opciones no queden fuera de vista. */
.elegant-stage .question-text.q-long{ font-size:54px; }
.elegant-stage .question-text.q-xlong{ font-size:72px; line-height:1.2; }

/* Timer: conserva la urgencia pero en tonos del tema. */
.elegant-stage .timer-track{ background:#1a1a1a; border:1px solid var(--hairline); }
.elegant-stage .timer-fill{ background:linear-gradient(90deg, #8FB573, var(--gold-light), #C0574A); }
.elegant-stage .timer-label{ color:var(--gray-2); font-family:var(--title-font); }

/* Opciones: paneles gris oscuro con detalle dorado (sin bisel 3D arcade). */
.elegant-stage .opt,
.elegant-stage .opt.a, .elegant-stage .opt.b,
.elegant-stage .opt.c, .elegant-stage .opt.d, .elegant-stage .opt.e{
  background:linear-gradient(180deg, #232323 0%, #1a1a1a 100%);
  border:1px solid var(--hairline);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  color:var(--warm-white); font-family:var(--text-font); font-weight:600;
  font-size:19px; padding:18px; gap:12px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.elegant-stage .opt:hover:not(:disabled){ filter:none; border-color:var(--gold-hairline); }
.elegant-stage .opt .letter{
  background:rgba(192,151,99,.14); border:1px solid var(--gold-hairline);
  color:var(--gold-light); font-family:var(--title-font); font-weight:700;
  flex:0 0 34px; height:34px; font-size:17px;
}
.elegant-stage .opt:disabled{ opacity:.75; }
.elegant-stage .opt.correct{
  outline:none; opacity:1 !important;
  border-color:#8FB573; box-shadow:0 0 26px rgba(143,181,115,.45);
}
.elegant-stage .opt.correct .letter{ background:rgba(143,181,115,.2); border-color:#8FB573; color:#CDE3BC; }
.elegant-stage .opt.wrong{
  outline:none; opacity:1 !important;
  border-color:#C0574A; box-shadow:0 0 26px rgba(192,87,74,.4);
}

/* Imagen con puntos. */
.elegant-stage .image-frame{ border:1px solid var(--gold-hairline); }
.elegant-stage .image-hint{ color:var(--gray-2); }
.elegant-stage .hotspot{
  background:rgba(10,10,10,.66); border:1px solid var(--gold-light);
  color:var(--gold-light); font-family:var(--title-font);
}

/* Feedback al revelar. */
.elegant-stage .feedback{ font-family:var(--text-font); }
.elegant-stage .feedback.ok{ background:rgba(143,181,115,.08); border:1px solid #8FB573; }
.elegant-stage .feedback.bad{ background:rgba(192,87,74,.08); border:1px solid #C0574A; }
.elegant-stage .feedback h3{ font-family:var(--title-font); color:var(--warm-white); }
.elegant-stage .feedback p{ color:var(--gray-2); }
.elegant-stage .feedback .pts{ color:var(--gold-light); }

/* Podio final. */
.elegant-stage .final-label{
  font-family:var(--title-font); color:var(--gold); letter-spacing:6px;
}
.elegant-stage .final-title{
  font-family:var(--title-font); font-weight:900; color:var(--warm-white);
  text-shadow:none; letter-spacing:2px;
}
.elegant-stage .breakdown{ color:var(--gray-1); }
.elegant-stage .lb-row{
  background:rgba(255,255,255,.03); border:1px solid var(--tc);
}
.elegant-stage .lb-row .lb-rank{ font-family:var(--accent-font); font-style:italic; }
.elegant-stage .lb-row.winner{
  background:linear-gradient(90deg, rgba(192,151,99,.28) 0%, rgba(192,151,99,.08) 100%);
  border-color:var(--gold-light); box-shadow:0 0 30px rgba(192,151,99,.35);
}
.elegant-stage .lb-row.winner .lb-rank,
.elegant-stage .lb-row.winner .lb-name,
.elegant-stage .lb-row.winner .lb-score{ color:var(--gold-bright); }
.elegant-stage .lb-row.winner .lb-score{ animation:gold-pulse 3.2s ease-in-out infinite; }

/* Botones (portón de sonido y cualquier .btn de pantalla pública). */
.elegant-stage .btn{
  font-family:var(--title-font); font-weight:700; letter-spacing:2px;
  background:linear-gradient(180deg, #262626 0%, #191919 100%);
  border:1px solid var(--gold-hairline); color:var(--gold-light);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.elegant-stage .btn:hover{ border-color:var(--gold-light); box-shadow:0 0 22px rgba(192,151,99,.3); }
.elegant-stage .btn:active{ transform:translateY(1px); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.elegant-stage .sound-gate{ background:rgba(10,10,10,.9); }