@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ==========================================================================
   CineLingo · arcade brand skin (TranslaStars)
   Una sola hoja para todo el juego: portada, partida, poster, paneles,
   cuenta atras, resultado y ranking.
   Colores de marca tomados del logo oficial: morado #522D6E, naranja #E04307,
   oro #EF8903. El naranja brillante #FF6B00 es el que ya usaba el juego.
   Regla: esta hoja solo cambia color, borde, sombra y tipografia.
   No toca display, position, width ni height, para no romper la maquetacion.
   Tema oscuro por defecto (:root y [data-theme="dark"]) y tema claro real
   ([data-theme="light"]). Ambas paletas usan las mismas variables.
   ========================================================================== */

:root, [data-theme="dark"] {
  /* marca */
  --ts-purple:#522D6D; --ts-purple-deep:#2a1440; --ts-purple-dark:#33184a;
  --ts-violet:#7B3FAF; --ts-violet-soft:#c9a6ee;
  --ts-orange:#E04307; --ts-orange-bright:#FF6B00; --ts-orange-soft:#F4511E;
  --ts-orange-deep:#b8330a;
  --ts-gold:#EF8903; --ts-amber:#FFC23D; --ts-amber-bright:#FFC23D;
  /* tinta y superficies */
  --ts-ink:#f4edff; --ts-ink-dim:#c3b0e0; --ts-ink-mute:#9d86bd;
  --ts-panel:#2a1843; --ts-panel-2:#1c1030; --ts-screen:#120a20; --ts-edge:#553d7c;
  --ts-input:rgba(0,0,0,.32);
  --ts-chip:rgba(255,255,255,.10);
  --ts-well:rgba(0,0,0,.22);
  --ts-row-odd:rgba(255,255,255,.03);
  --ts-opt-a:#2f1c4c; --ts-opt-b:#1a1030;
  --ts-pu-a:#3b2470; --ts-pu-b:#241442;
  --ts-ghost-bg:rgba(0,0,0,.25);
  --ts-hero:#fdf8ff;
  --ts-bevel-top:rgba(255,255,255,.10); --ts-bevel-bot:rgba(0,0,0,.5);
  --ts-drop:rgba(0,0,0,.45);
  --ts-body-1:rgba(123,63,175,.42); --ts-body-2:rgba(224,67,7,.20);
  --ts-grid-1:rgba(169,120,214,.14); --ts-grid-2:rgba(224,67,7,.13);
  --ts-line:#3a2758;

  /* remapeo de las variables que ya usan las dos paginas */
  --bg:var(--ts-screen); --surface:var(--ts-panel); --border:var(--ts-edge);
  --fg:var(--ts-ink); --muted:var(--ts-ink-mute);
  --p500:#f0e6ff; --p700:var(--ts-purple-dark); --p300:var(--ts-violet-soft);
  --orange:var(--ts-orange-bright); --orange2:var(--ts-orange-soft);
  --green:#3ddc84; --green2:rgba(61,220,132,.16);
  --red:#ff4d6d; --red2:rgba(255,77,109,.16);
  --radius:12px;
}

/* Tema claro real: fondo claro, tinta oscura, mismo caracter retro.
   No es una inversion: los paneles son blancos, la tinta es morada oscura y
   el naranja y el morado de marca se mantienen con contraste suficiente. */
[data-theme="light"] {
  --ts-violet:#6b2fa0; --ts-violet-soft:#5f2b93;
  --ts-gold:#b96b00; --ts-amber:#8a4a00; --ts-amber-bright:#FFC23D;
  --ts-ink:#2b1b3d; --ts-ink-dim:#4f3d68; --ts-ink-mute:#6d5c86;
  --ts-panel:#ffffff; --ts-panel-2:#f2ebfb; --ts-screen:#f6f2fc; --ts-edge:#c9b6e3;
  --ts-input:#ffffff;
  --ts-chip:rgba(82,45,109,.10);
  --ts-well:rgba(82,45,109,.06);
  --ts-row-odd:rgba(82,45,109,.05);
  --ts-opt-a:#ffffff; --ts-opt-b:#f5eefc;
  --ts-pu-a:#efe6fa; --ts-pu-b:#e3d6f5;
  --ts-ghost-bg:rgba(82,45,109,.08);
  --ts-hero:#3a2450;
  --ts-bevel-top:rgba(255,255,255,.9); --ts-bevel-bot:rgba(82,45,109,.14);
  --ts-drop:rgba(82,45,109,.16);
  --ts-body-1:rgba(123,63,175,.16); --ts-body-2:rgba(224,67,7,.10);
  --ts-grid-1:rgba(123,63,175,.10); --ts-grid-2:rgba(224,67,7,.08);
  --ts-line:#d8c9ee;

  --p500:#3f2159; --p300:#6b2fa0; --p700:#4a2566;
  --green:#0f7a45; --green2:rgba(15,122,69,.12);
  --red:#c31d4b; --red2:rgba(195,29,75,.10);
}

body {
  font-family:"Rajdhani",system-ui,sans-serif;
  background:
    radial-gradient(120% 70% at 50% -12%, var(--ts-body-1), transparent 62%),
    radial-gradient(90% 55% at 50% 108%, var(--ts-body-2), transparent 62%),
    var(--ts-screen) !important;
  background-attachment:fixed !important;
  color:var(--ts-ink);
}
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--ts-grid-1) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, var(--ts-grid-2) 0 2px, transparent 2px 64px);
  transform:perspective(340px) rotateX(58deg) translateY(12%);
  transform-origin:50% 100%;
  mask-image:linear-gradient(to bottom, transparent 46%, #000 82%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 46%, #000 82%);
}
body > * { position:relative; z-index:1; }

/* ---- tipografia ---- */
h1, .hero h1, .cl-nav .brand b, .logo, .card h2, .mode h2, .strip h3, .box h3,
.mp-head h2, .duel-head h3, .lb-head h3, .endTitle, #endTitle,
.score-big, .verdict, .sgTitle, #sgTitle, .q-label, .num, .big {
  font-family:"Bungee",cursive;
  letter-spacing:.5px;
}
h1, .hero h1 { text-shadow:0 0 10px rgba(255,107,0,.45); }
.hero h1 .accent, .accent { color:var(--ts-orange-bright); }

/* ---- barra superior ---- */
.cl-nav, .topbar {
  background:linear-gradient(180deg,var(--ts-purple),var(--ts-purple-dark)) !important;
  border-bottom:2px solid var(--ts-gold);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.cl-nav .brand .dot { background:var(--ts-gold); }
.cl-nav-right, .lang-sel, .lang-sel .ico { color:var(--ts-ink-dim); }
.lang-sel select, .tn {
  background:rgba(0,0,0,.28); border-color:rgba(255,194,61,.45); color:#fff;
}
.lang-sel select option { color:#2b1b3d; background:#fff; }
.tn:hover, .lang-sel select:focus { border-color:var(--ts-gold); }

/* ---- paneles y tarjetas ---- */
.card, .mp-card, .setup, .strip, .box, .feat .f, .mode, .sg-field, .lb-mini,
.stat-grid > *, .nc-field, .panel, .fact, .factBox, .challenge-box, .score-big,
.namecard, .de-result, .hud, .hud-duel, .lb, .opt, .options, .cover-wrap, .cover {
  background:linear-gradient(180deg,var(--ts-panel),var(--ts-panel-2)) !important;
  border-color:var(--ts-edge) !important;
  box-shadow:inset 0 2px 0 var(--ts-bevel-top), inset 0 -4px 0 var(--ts-bevel-bot), 0 10px 26px var(--ts-drop);
}
.mode:hover, .card:hover {
  border-color:var(--ts-orange-bright) !important;
  box-shadow:inset 0 2px 0 var(--ts-bevel-top), 0 0 22px rgba(255,107,0,.35), 0 12px 28px var(--ts-drop);
}
.mode h2, .card h2, .strip h3, .box h3, .mp-head h2, .lb-head h3 { color:var(--ts-ink) !important; }
.strip h3, .box h3, .lb-head h3 { color:var(--ts-amber) !important; }
.mode p, .card p, .mp-head p, .setup label, .feat .f span, .lb-empty, .lb-load,
.meta, .q-prompt, .txt, .verdict { color:var(--ts-ink-dim) !important; }
.setup label, .mp-field label, .sg-field label, .q-label { color:var(--ts-violet-soft) !important; }

/* ---- botones ----
   Todos los botones de accion y de modalidad (Solo, 1 vs 1, Equipos y los
   CTA de las tarjetas) van en el naranja de marca, con relieve retro. */
.cl-btn, .btn, .mp-save, .sg-field button, button.cl-btn, .mode .cta, .mode.multi .cta {
  color:#fff !important;
  background:linear-gradient(180deg,var(--ts-orange-bright),var(--ts-orange)) !important;
  text-transform:uppercase; letter-spacing:1.4px;
  text-shadow:0 1px 0 rgba(90,26,0,.55);
  box-shadow:0 4px 0 #6d1f00, 0 8px 16px var(--ts-drop) !important;
}
.cl-btn, .btn, .mp-save, .sg-field button, button.cl-btn { border:2px solid rgba(255,255,255,.35) !important; }
.mode .cta, .mode.multi .cta {
  border:2px solid rgba(255,255,255,.35) !important; border-radius:999px;
  cursor:pointer; font-family:"Rajdhani",sans-serif;
}
.cl-btn:hover, .btn:hover, .mode .cta:hover { filter:brightness(1.08); }
.cl-btn:active, .btn:active, .mode .cta:active { transform:translateY(3px); box-shadow:0 1px 0 #6d1f00 !important; }
/* La modalidad destacada (1 vs 1) sigue en naranja, pero mas profunda y con
   filo dorado, para distinguirse del resto sin salir de la marca. */
.cl-btn.solid {
  background:linear-gradient(180deg,var(--ts-orange),var(--ts-orange-deep)) !important;
  border-color:var(--ts-amber-bright) !important;
  box-shadow:0 4px 0 #4d1600, 0 8px 16px var(--ts-drop) !important;
}
.cl-btn.solid:hover { filter:brightness(1.1); }
/* Estado deshabilitado: se apaga el naranja y se nota que no se puede pulsar. */
.cl-btn:disabled, .btn:disabled, .mp-save:disabled, .mode .cta:disabled,
.pg-play:disabled, button:disabled {
  opacity:.5 !important; filter:grayscale(.6) brightness(.85); cursor:not-allowed !important;
  box-shadow:0 2px 0 rgba(0,0,0,.35) !important; transform:none !important;
}
.ghost { background:var(--ts-ghost-bg) !important; color:var(--ts-ink) !important; border-color:var(--ts-edge) !important; box-shadow:none !important; }
.tb-btn, .btn.ghost, .sfxBtn { background:var(--ts-ghost-bg) !important; color:var(--ts-ink) !important; }

/* ---- controles de formulario ---- */
select, input, .setup select, .duel-code, .mp-field input, .sg-row select,
.sg-row input, .cb-row input, .pg-name {
  background:var(--ts-input) !important; color:var(--ts-ink) !important;
  border-color:var(--ts-edge) !important;
}
select:focus, input:focus { border-color:var(--ts-gold) !important; }
select option { background:var(--ts-panel); color:var(--ts-ink); }

/* ---- opciones de respuesta ---- */
.opt, .options .opt {
  background:linear-gradient(180deg,var(--ts-opt-a),var(--ts-opt-b)) !important;
  border:2px solid var(--ts-edge) !important; color:var(--ts-ink) !important;
}
.opt:hover { border-color:var(--ts-gold) !important; box-shadow:0 0 18px rgba(239,137,3,.35) !important; }
.opt .k { background:var(--ts-chip) !important; color:var(--ts-ink) !important; }
.opt.correct, .opt.ok { background:linear-gradient(180deg,#1f7a4a,#0f5a34) !important; border-color:#3ddc84 !important; color:#eafff4 !important; }
.opt.wrong, .opt.bad { background:linear-gradient(180deg,#8c1f36,#5e1226) !important; border-color:#ff4d6d !important; color:#ffe8ee !important; }
.opt.correct .k { background:rgba(61,220,132,.22) !important; color:#8ff0bb !important; }
.opt.wrong .k { background:rgba(255,77,109,.20) !important; color:#ffb3c4 !important; }

/* ---- cuenta atras, marcador y rachas ---- */
.timer, .timerBox, .track, .ring { border-color:var(--ts-edge) !important; }
.fill, .tfill { background:linear-gradient(90deg,var(--ts-amber-bright),var(--ts-orange)) !important; }
.hud .lbl, .hud-duel .lbl { color:var(--ts-ink-mute) !important; }
.score, .q-score, .tnum { color:var(--ts-amber) !important; }
.streak-chip, .streakChip, .modechip, .unit {
  background:rgba(239,137,3,.16) !important; color:var(--ts-amber) !important; border-color:rgba(239,137,3,.5) !important;
}
.pu, .power, .powerRow > * {
  background:linear-gradient(180deg,var(--ts-pu-a),var(--ts-pu-b)) !important; border-color:var(--ts-violet) !important; color:var(--ts-ink) !important;
}
.power .pu .cnt { background:var(--ts-violet) !important; color:#fff !important; }

/* ---- ranking ---- */
.lb-row, .row { border-bottom-color:var(--ts-line) !important; color:var(--ts-ink-dim) !important; }
.lb-row:nth-child(odd), .row:nth-child(odd) { background:var(--ts-row-odd) !important; }
.lb-row.me, .row.me { background:rgba(255,107,0,.12) !important; border-color:rgba(255,107,0,.4) !important; }
.lb-row .nm, .row .nm { color:var(--ts-ink) !important; }
.lb-me, .rank { color:var(--ts-violet-soft) !important; }

/* ---- resultado ---- */
.end, .multi-end, .de-result, .me-result { color:var(--ts-ink) !important; }
.de-vs, .ppLabel { color:var(--ts-gold) !important; }
.de-score, .score-big { color:var(--ts-amber) !important; text-shadow:0 0 14px rgba(255,194,61,.5); }

/* ---- avisos y estados ---- */
.market-notice, .nc-err, .duel-msg { color:var(--ts-ink-mute) !important; }
.nc-err { color:#ff8fa3 !important; }
.duel-box { border-color:var(--ts-violet) !important; background:rgba(123,63,175,.10) !important; }
footer { color:var(--ts-ink-mute) !important; border-top-color:var(--ts-line) !important; }
.fact .lbl { color:var(--ts-violet-soft) !important; }
.fact .titles { color:var(--ts-ink) !important; }
.fact .meta b, .fact .row .fl { color:var(--ts-ink) !important; }
.fact .meta { border-top-color:var(--ts-line) !important; }

/* ---- ranking: filtro por modalidad (Solo, 1 contra 1, Equipos) ---- */
.lb-modes { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.lb-mode {
  font-family:"Rajdhani",sans-serif; font-weight:700; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ts-ink); background:var(--ts-ghost-bg); border:2px solid var(--ts-edge); border-radius:999px;
  padding:6px 14px; cursor:pointer; transition:filter .12s;
}
.lb-mode:hover { filter:brightness(1.15); }
.lb-mode.on {
  color:#fff; background:linear-gradient(180deg,var(--ts-orange-bright),var(--ts-orange));
  border-color:var(--ts-amber-bright); box-shadow:0 3px 0 #6d1f00; text-shadow:0 1px 0 rgba(90,26,0,.5);
}

/* ---- pantalla de victoria del duelo y del modo por equipos ---- */
@keyframes wsPulse { 0%,100%{width:74%} 50%{width:92%} }
@keyframes wsFlash { 0%,54%{opacity:1} 55%,100%{opacity:.45} }
@keyframes winIn { from{transform:scale(.72) rotate(-7deg); opacity:0} to{transform:scale(1) rotate(-2deg); opacity:1} }

.win-seq { text-align:center; margin:0 0 14px; }
.ws-lbl { font-size:10.5px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--ts-ink-mute); margin-bottom:6px; }
.ws-bar { width:min(420px,86%); height:14px; margin:0 auto; border:2px solid var(--ts-edge); border-radius:4px; overflow:hidden; background:rgba(0,0,0,.45); }
.ws-bar i { display:block; height:100%; width:78%; background:linear-gradient(90deg,var(--ts-amber-bright),var(--ts-orange-bright),var(--ts-orange)); animation:wsPulse 1s ease-in-out infinite; }
.ws-count { font-family:"Bungee",cursive; font-size:26px; letter-spacing:6px; color:var(--ts-orange-bright); margin-top:6px; text-shadow:0 0 12px rgba(255,107,0,.8), 0 3px 0 var(--ts-purple-deep); }
.ws-ko { font-family:"Bungee",cursive; font-size:40px; color:#fff; line-height:1; margin:10px 0 0; transform:rotate(-4deg); animation:wsFlash .7s steps(1,end) infinite;
  text-shadow:-3px -3px 0 var(--ts-purple-deep),3px -3px 0 var(--ts-purple-deep),-3px 3px 0 var(--ts-purple-deep),3px 3px 0 var(--ts-purple-deep),0 7px 0 var(--ts-orange); }

.win-plate-wrap { text-align:center; margin:4px 0 14px; }
.win-plate { display:inline-block; padding:8px 28px; background:linear-gradient(180deg,var(--ts-orange-bright),var(--ts-orange));
  border:3px solid var(--ts-amber-bright); clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
  box-shadow:0 8px 0 #6d1f00, 0 16px 30px var(--ts-drop); }
.win-plate-wrap:not(.hidden) .win-plate { animation:winIn .35s cubic-bezier(.2,.9,.3,1.3); }
.win-banner { font-family:"Bungee",cursive; font-size:clamp(30px,8vw,64px); color:#fff; margin:0; letter-spacing:2px; transform:rotate(-2deg);
  text-shadow:-4px -4px 0 var(--ts-purple-deep),4px -4px 0 var(--ts-purple-deep),-4px 4px 0 var(--ts-purple-deep),4px 4px 0 var(--ts-purple-deep),-4px 0 0 var(--ts-purple-deep),4px 0 0 var(--ts-purple-deep),0 -4px 0 var(--ts-purple-deep),0 4px 0 var(--ts-purple-deep),0 10px 0 rgba(0,0,0,.45); }
.win-sub { font-size:14px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ts-ink-dim); margin:14px 0 0; }
.win-notice { text-align:center; font-size:14px; font-weight:700; letter-spacing:1px; color:var(--ts-ink-dim); background:var(--ts-ghost-bg);
  border:2px dashed var(--ts-edge); border-radius:12px; padding:14px; margin:0 0 14px; }

.win-pips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 14px; }
.win-pips .prow { display:flex; align-items:center; gap:5px; }
.win-pips .plbl { font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--ts-ink-mute); margin-right:2px; }
.win-pips .pip { width:12px; height:12px; border-radius:3px; border:2px solid var(--ts-edge); background:rgba(0,0,0,.35); }
.win-pips .pip.on { background:linear-gradient(180deg,var(--ts-orange-bright),var(--ts-orange)); border-color:var(--ts-amber-bright); box-shadow:0 0 8px rgba(255,107,0,.5); }

.win-arena { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.win-side { background:linear-gradient(180deg,var(--ts-panel),var(--ts-panel-2)); border:2px solid var(--ts-edge); border-radius:14px; padding:12px;
  box-shadow:inset 0 2px 0 var(--ts-bevel-top), inset 0 -4px 0 var(--ts-bevel-bot), 0 10px 26px var(--ts-drop); text-align:center; }
.win-side.win { border-color:var(--ts-orange-bright); box-shadow:inset 0 2px 0 var(--ts-bevel-top), 0 0 24px rgba(255,107,0,.45), 0 10px 26px var(--ts-drop); }
.win-side.lose { opacity:.6; filter:grayscale(.5); }
.win-side .wtag { font-size:9.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ts-ink-mute); }
.win-side .wname { font-family:"Bungee",cursive; font-size:16px; color:var(--ts-ink); margin:4px 0 6px; word-break:break-word; }
.win-side .wscore { font-family:"Bungee",cursive; font-size:38px; line-height:1; color:var(--ts-amber); }
.win-side .wbar { height:10px; border:2px solid var(--ts-edge); border-radius:3px; overflow:hidden; background:rgba(0,0,0,.4); margin:8px 0 3px; }
.win-side .wbar i { display:block; height:100%; background:linear-gradient(90deg,var(--ts-amber-bright),var(--ts-orange-bright)); }
.win-side .wsub { font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ts-ink-mute); }
.win-members { display:flex; flex-direction:column; gap:5px; margin:7px 0 0; }
.win-member { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ts-ink-dim); }
.win-member .nm { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win-member .sc { font-family:"Bungee",cursive; font-size:12px; color:var(--ts-ink); }
.win-vs { font-family:"Bungee",cursive; font-size:22px; color:var(--ts-violet-soft); text-shadow:0 3px 0 var(--ts-purple-deep); align-self:center; }

@media(max-width:560px){
  .win-arena { grid-template-columns:1fr; }
  .win-vs { padding:2px 0; }
  .win-banner { font-size:clamp(28px,11vw,44px); }
  .win-plate { padding:6px 16px; }
  .win-side .wscore { font-size:30px; }
  .win-pips .pip { width:10px; height:10px; }
}
@media(prefers-reduced-motion:reduce){
  .ws-bar i, .ws-ko { animation:none; }
  .win-plate-wrap:not(.hidden) .win-plate { animation:none; }
}

/* ---- portada: marquesina, bombillas y START NOW ---- */
.marquee {
  position:relative; text-align:center; padding:20px 18px 16px; border-radius:16px;
  background:radial-gradient(125% 145% at 50% 0%,#6b3a94,#31174c 68%);
  border:2px solid #8a5ab5;
  box-shadow:inset 0 0 44px rgba(224,67,7,.26), 0 0 24px rgba(255,107,0,.26);
  margin-bottom:18px;
}
.bulbs { display:flex; justify-content:center; gap:10px; margin-bottom:12px; }
.bulb { width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2c8,#EF8903 62%,#8a4a00); box-shadow:0 0 9px rgba(239,137,3,.95); animation:clBlink 1.1s steps(1,end) infinite; }
.bulb:nth-child(2n) { animation-delay:.55s; }
@keyframes clBlink { 0%,49%{opacity:1} 50%,100%{opacity:.28} }
.tslogo { display:block; margin:0 auto 10px; width:230px; max-width:60%; height:auto; filter:drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.marquee .game-name { font-family:"Bungee",cursive; font-size:clamp(34px,7.4vw,72px); line-height:1.06; color:#fff; margin:2px 0 4px;
  text-shadow:0 0 6px #fff, 0 0 16px rgba(255,107,0,.9), 0 0 44px rgba(224,67,7,.85), 0 4px 0 #40113a; }
.marquee .game-name .accent { color:var(--ts-orange-bright); text-shadow:0 0 6px #fff,0 0 18px var(--ts-orange-bright),0 0 48px var(--ts-orange),0 4px 0 #5a1a00; }
.marquee .studio { font-weight:600; font-size:12.5px; letter-spacing:3px; text-transform:uppercase; color:#e2cff5; }
.startnow { margin-top:12px; font-family:"Rajdhani",sans-serif; font-weight:700; font-size:15px; letter-spacing:5px;
  text-transform:uppercase; color:var(--ts-amber-bright); text-shadow:0 0 10px rgba(255,194,61,.85);
  animation:clBlink 1.05s steps(1,end) infinite; }
.tsrule { margin:12px auto 0; max-width:640px; display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#cdb4e8; }
.tsrule i { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(239,137,3,.75),transparent); }

/* subtitulo de portada: dos lineas y mas luz */
.hero p, #heroSub {
  color:var(--ts-hero) !important;
  font-size:17px !important; line-height:1.5 !important;
  max-width:760px !important;
  text-shadow:0 0 12px rgba(255,214,160,.35), 0 1px 0 rgba(0,0,0,.5);
}
#heroSub b, .hero p b { color:var(--ts-gold); }
#heroSub .l2 { display:block; }
[data-theme="light"] .hero p, [data-theme="light"] #heroSub { text-shadow:none; }

/* ---- portada: la tarjeta del modo abre su panel DENTRO, sin tapar nada ---- */
.mode { position:relative; }
.mode .face.back { text-align:left; }
.mode .cta { border:none; cursor:pointer; font-family:"Rajdhani",sans-serif; text-transform:uppercase; letter-spacing:1.2px; }
.ptitle { font-family:"Bungee",cursive; font-size:19px; color:var(--ts-ink); margin:0 0 12px; }
.pg-step { margin-bottom:10px; }
.pg-lbl { display:block; font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ts-violet-soft); margin-bottom:5px; }
.pg-name { width:100%; font-family:"Rajdhani",sans-serif; font-size:15px; padding:9px 12px; border:2px solid var(--ts-edge); border-radius:9px; background:var(--ts-input); color:var(--ts-ink); outline:none; }
.pg-flags { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; max-height:210px; overflow:auto; padding:6px; border:2px solid var(--ts-edge); border-radius:10px; background:var(--ts-well); }
/* Buscador de pais: filtra la lista mientras se escribe. */
.pg-search { width:100%; font-family:"Rajdhani",sans-serif; font-size:14px; padding:8px 11px; border:2px solid var(--ts-edge); border-radius:9px; background:var(--ts-input); color:var(--ts-ink); outline:none; margin-bottom:6px; }
.pg-search:focus { border-color:var(--ts-gold); }
.pg-search::placeholder { color:var(--ts-ink-mute); }
.pg-group { grid-column:1 / -1; font-size:9.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ts-amber); margin:4px 0 2px; }
.pg-none { grid-column:1 / -1; font-size:12px; color:var(--ts-ink-mute); padding:10px; text-align:center; }
.flagchip.main { border-color:rgba(239,137,3,.5); }
.flagchip .cn { max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:break-word; overflow:visible; }
.flagchip { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border:2px solid transparent; border-radius:8px; background:var(--ts-chip); color:var(--ts-ink-dim); cursor:pointer; font-family:"Rajdhani",sans-serif; font-size:9px; letter-spacing:.4px; line-height:1.1; text-transform:uppercase; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.4); }
.flagchip .fl { font-size:20px; line-height:1; filter:saturate(1.15) contrast(1.1); }
.flagchip:hover { border-color:var(--ts-gold); }
.flagchip.on { border-color:var(--ts-orange-bright); background:rgba(255,107,0,.18); color:var(--ts-ink); box-shadow:0 0 14px rgba(255,107,0,.45); }
.pg-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:12px; }
.pg-play { width:100%; justify-content:center; gap:8px; }
.pg-play svg { flex:none; }
.pg-join { display:flex; gap:8px; margin-top:8px; }
.pg-join .duel-code { flex:1; min-width:0; }
.pg-back { margin-top:12px; background:none; border:none; color:var(--ts-ink-mute); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; text-decoration:underline; }
.lb-block { margin-top:26px; }
.lb-block .lb { background:linear-gradient(180deg,var(--ts-panel),var(--ts-panel-2)); border:2px solid var(--ts-edge); border-radius:14px; padding:18px; box-shadow:inset 0 2px 0 var(--ts-bevel-top), inset 0 -4px 0 var(--ts-bevel-bot), 0 10px 26px var(--ts-drop); }
@media(max-width:640px){ .pg-flags { grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); max-height:170px; } }
/* Con el panel de un modo abierto, las DOS tarjetas siguen lado a lado.
   Antes habia aqui una regla que ponia una sola columna y acotaba la altura
   a la ventana, y era lo que hacia que la otra modalidad cayera debajo y se
   pisaran. Fuera. En pantallas estrechas si se apilan. */
@media(max-width:640px){
  .modes { grid-template-columns:1fr; }
  .pg-search { padding:8px 10px; }
}

/* ---- banderas como imagen, con tratamiento de ficha retro ----
   Los emoji de bandera no existen en todos los sistemas: se sustituyen por
   imagenes SVG guardadas en el repositorio, con esquinas rectas y tamano fijo. */
.flagchip .fl { width:30px; height:20px; object-fit:cover; display:block; border:1px solid rgba(0,0,0,.6); border-radius:0; }
img.flagimg, .mc-flag img, .q-head .flag img, .row .fl img, .lb-row .flag img, .flag img {
  width:22px; height:15px; object-fit:cover; vertical-align:middle; border:1px solid rgba(0,0,0,.55); border-radius:0;
}
.lb-row .flag img { width:20px; height:14px; }



/* ===== Barras de scroll estilo arcade (recuperadas) =====
   Carril oscuro, pulgar naranja de marca, esquinas rectas y fina.
   Con las dos sintaxis: WebKit y la estandar, para que no vuelva la del sistema. */
:root {
  --ts-sb-track: rgba(0,0,0,.42);
  --ts-sb-thumb: #FF6B00;
  --ts-sb-thumb-2: #E04307;
  --ts-sb-line: #553d7c;
}
[data-theme="light"] {
  --ts-sb-track: rgba(82,45,109,.14);
  --ts-sb-thumb: #E04307;
  --ts-sb-thumb-2: #b8330a;
  --ts-sb-line: #c9b6e3;
}
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:var(--ts-sb-track); border-radius:0; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--ts-sb-thumb),var(--ts-sb-thumb-2)); border:2px solid var(--ts-sb-line); border-radius:0; background-clip:padding-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#FF8A2B,var(--ts-sb-thumb)); background-clip:padding-box; }
::-webkit-scrollbar-thumb:active { background:linear-gradient(180deg,var(--ts-sb-thumb-2),#8f2605); background-clip:padding-box; }
::-webkit-scrollbar-corner { background:var(--ts-sb-track); }
::-webkit-scrollbar-button { width:0; height:0; display:none; }
html { scrollbar-width:thin; scrollbar-color:var(--ts-sb-thumb) var(--ts-sb-track); }
* { scrollbar-width:thin; scrollbar-color:var(--ts-sb-thumb) var(--ts-sb-track); }