/* SirEdwards Quiz 2.3 — modo claro renovado. Solo presentación; solo actúa con el tema claro; se carga después de las demás hojas salvo theme.css (que va la última).
 *
 * Qué corrige (el claro era crema sobre crema, con el damasco asomando por detrás de las tarjetas):
 *  1. Lienzo: el damasco se vela con marfil para que sea una textura y no un dibujo que compita con el contenido.
 *  2. Profundidad: las tarjetas pasan a papel marfil opaco, más claro que el lienzo, con filete dorado y una sombra
 *     cálida (marrón, no gris) que las separa del fondo.
 *  3. Tarjetas de modos: sin el tinte grisáceo del color de cada modo; el color queda en el filete superior.
 *  4. Texto secundario algo más oscuro para leerse sobre el papel (contraste ≥ 5:1).
 * Para volver atrás basta con quitar el <link> de index.html (y su línea en sw.js).
 */
:root:not([data-theme="dark"]) {
  --lr-paper: #fffaec;
  --lr-paper-2: #faf0d4;
  --bg: #e8d9ae;
  /* Escala de claridad (de más oscuro a más claro): lienzo < marco < papel de sección < campos con datos (teselas, filas, chips). */
  --card: #fffcf3;
  --badge-bg: #fbf2da;
  --lr-line: rgba(176, 134, 36, .40);
  --lr-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 1px 2px rgba(74, 48, 8, .10), 0 10px 22px -10px rgba(74, 48, 8, .28);
  --lr-sub: #4a5262;
  --sub: #4a5262;
}

/* El marco que rodea cada pantalla conserva su tono cálido (antes lo daba --card, que ahora es el de los campos con datos). */
:root:not([data-theme="dark"]) .card:not([class*="theme-"]) { background-color: #f3e6c3; }

/* 1. Lienzo: sin dibujo, pergamino cálido dorado; pergamino un punto más oscuro que las tarjetas para que estas destaquen,
      y un tinte suave del color de cada pantalla. */
:root:not([data-theme="dark"]) .view:not(#view-game) {
  --lr-tint: 232, 200, 116;
  background-image:
    radial-gradient(130% 55% at 50% -6%, rgba(var(--lr-tint), .34), transparent 62%),
    radial-gradient(90% 40% at 50% 108%, rgba(var(--lr-tint), .18), transparent 70%);
  background-size: auto;
  background-color: #eadcb2;
}
:root:not([data-theme="dark"]) #view-modes    { --lr-tint: 59, 111, 214; }
:root:not([data-theme="dark"]) #view-duelo    { --lr-tint: 190, 52, 90; }
:root:not([data-theme="dark"]) #view-stats    { --lr-tint: 59, 111, 214; }
:root:not([data-theme="dark"]) #view-medals   { --lr-tint: 232, 180, 60; }
:root:not([data-theme="dark"]) #view-encargos { --lr-tint: 214, 150, 40; }
:root:not([data-theme="dark"]) #view-settings { --lr-tint: 100, 116, 139; }

/* 2. Superficies: papel opaco con filete dorado y sombra cálida */
:root:not([data-theme="dark"]) .stats-dossier,
:root:not([data-theme="dark"]) .achievements-progress-box,
:root:not([data-theme="dark"]) .fragments-progress-box,
:root:not([data-theme="dark"]) .ach-group,
:root:not([data-theme="dark"]) .enc-card:not(.is-great),
:root:not([data-theme="dark"]) .settings-section,
:root:not([data-theme="dark"]) .home-small-card {
  background-color: var(--lr-paper);
  background-image: linear-gradient(180deg, var(--lr-paper), var(--lr-paper-2));
  border: 1px solid var(--lr-line);
  box-shadow: var(--lr-shadow);
}
/* Estadísticas y Ajustes: sus secciones llevaban fondo transparente (theme.css les pone solo la franja dorada), así que se confundían con el lienzo.
   Ahora son papel, con la franja dorada lateral que ya tenían. */
:root:not([data-theme="dark"]) #view-stats .stats-section,
:root:not([data-theme="dark"]) #view-stats .history-container,
:root:not([data-theme="dark"]) #view-settings .settings-section:not(.settings-danger-zone) {
  background: linear-gradient(180deg, var(--lr-paper), var(--lr-paper-2));
  border-top: 1px solid var(--lr-line);
  border-right: 1px solid var(--lr-line);
  border-bottom: 1px solid var(--lr-line);
  box-shadow: var(--lr-shadow);
}
/* Los grupos de ajustes van dentro de una sección: un escalón más sutil. */
:root:not([data-theme="dark"]) .settings-group {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(176, 134, 36, .26);
  box-shadow: none;
}
/* Tarjetas pequeñas de la home: papel + filete superior del color de su sección (se conserva) */
:root:not([data-theme="dark"]) .home-small-card {
  background-image: linear-gradient(var(--hc, #c9a227), var(--hc, #c9a227)), linear-gradient(180deg, var(--lr-paper), var(--lr-paper-2));
  background-size: 100% 3px, auto;
  background-position: top, 0 0;
  background-repeat: no-repeat;
}

/* 3. Tarjetas de modos (Jugar y Duelos): papel limpio, color del modo solo en el filete superior */
:root:not([data-theme="dark"]) #duel-home .seq-d-card,
:root:not([data-theme="dark"]) #view-modes .modes-grid .mode-card:not(.locked) {
  background: linear-gradient(var(--hc), var(--hc)) top / 100% 4px no-repeat, linear-gradient(180deg, #fffaec, #f8ebc8) !important;
  border: 1.5px solid color-mix(in srgb, var(--hc) 55%, #8a6a1a) !important;
  box-shadow: 0 1px 0 #fff inset, 0 2px 3px rgba(74, 48, 8, .16), 0 12px 24px -10px rgba(74, 48, 8, .40) !important;
}
/* «Continuar»: papel como el resto de tarjetas (filete y borde del color del modo en curso); el modo se lee en el título y en la etiqueta «EN CURSO» */
:root:not([data-theme="dark"]) #resume-game-card.mode-card {
  background: linear-gradient(var(--hc), var(--hc)) top / 100% 5px no-repeat, linear-gradient(180deg, #fffaec, #f8ebc8) !important;
  border: 1.5px solid color-mix(in srgb, var(--hc) 60%, #8a6a1a) !important;
  box-shadow: 0 1px 0 #fff inset, 0 2px 3px rgba(74, 48, 8, .16), 0 12px 24px -10px rgba(74, 48, 8, .40) !important;
}
:root:not([data-theme="dark"]) #resume-game-card h3 { color: color-mix(in srgb, var(--hc) 72%, #1c2340); }
:root:not([data-theme="dark"]) #resume-game-card .mode-subtitle {
  display: inline-block; align-self: flex-start; width: auto; padding: 3px 10px; border-radius: 999px;
  background: var(--hc); color: #fff; letter-spacing: .08em; border: 0;
}
/* Color del modo en curso (filete, brillo, título y etiqueta) */
:root:not([data-theme="dark"]) #resume-game-card { --hc: #2d5bb8; }
:root:not([data-theme="dark"]) #resume-game-card.mode-review { --hc: #0d9488; }
:root:not([data-theme="dark"]) #resume-game-card.mode-survival { --hc: #b9740a; }
:root:not([data-theme="dark"]) #resume-game-card.mode-sudden { --hc: #c0262d; }
:root:not([data-theme="dark"]) #resume-game-card.mode-timetrial { --hc: #d6336c; }
:root:not([data-theme="dark"]) #resume-game-card.mode-mentalcalc { --hc: #15803d; }
:root:not([data-theme="dark"]) #resume-game-card.mode-lucidez { --hc: #6d28d9; }
/* Bloqueadas: apagadas pero limpias (papel más gris, sombra mínima, texto legible) */
:root:not([data-theme="dark"]) #view-modes .modes-grid .mode-card.locked {
  background: linear-gradient(color-mix(in srgb, var(--hc) 38%, transparent), color-mix(in srgb, var(--hc) 38%, transparent)) top / 100% 3px no-repeat, linear-gradient(180deg, #f1e8d2, #e9dec2) !important;
  border: 1px dashed rgba(120, 98, 50, .38) !important;
  box-shadow: none !important;
  opacity: 1;
}
:root:not([data-theme="dark"]) #view-modes .modes-grid .mode-card.locked :is(.mode-subtitle, .mode-req, p) { color: #5a5445; }
:root:not([data-theme="dark"]) #view-modes .modes-grid .mode-card.locked .mode-card-icon { filter: grayscale(.55) opacity(.85); }

/* Modo secreto y fragmentos: el violeta se queda, sin el velo gris verdoso */
:root:not([data-theme="dark"]) .fragments-progress-box {
  background-image: linear-gradient(180deg, #fbf6ff, #f1e8fb);
  border: 1.5px dashed rgba(124, 58, 237, .45);
}
:root:not([data-theme="dark"]) .fragment-milestone.is-locked { background: rgba(255, 255, 255, .6); opacity: .85; }

/* 4. Texto secundario */
:root:not([data-theme="dark"]) .mode-card p,
:root:not([data-theme="dark"]) .home-small-card p,
:root:not([data-theme="dark"]) .home-small-sub,
:root:not([data-theme="dark"]) .settings-note { color: var(--lr-sub); }
/* «✓ DISPONIBLE» con el color de su modo, como en oscuro (la regla de arriba lo dejaba gris) */
:root:not([data-theme="dark"]) .mode-standard p.mode-subtitle { color: #2563eb; }
:root:not([data-theme="dark"]) .mode-review p.mode-subtitle { color: #0f766e; }
:root:not([data-theme="dark"]) .mode-survival p.mode-subtitle { color: #b45309; }
:root:not([data-theme="dark"]) .mode-sudden p.mode-subtitle { color: #b91c1c; }
:root:not([data-theme="dark"]) .mode-timetrial p.mode-subtitle { color: #be185d; }
:root:not([data-theme="dark"]) .mode-mentalcalc p.mode-subtitle { color: #14532d; }
:root:not([data-theme="dark"]) .mode-lucidez p.mode-subtitle { color: #6d28d9; }

/* Barras de progreso: más definidas sobre el papel */
:root:not([data-theme="dark"]) .progress-bar { background: #e6dcc3; box-shadow: inset 0 1px 2px rgba(74, 48, 8, .18); }

/* 5. Partida: respuestas como fichas de papel (el estado correcto/incorrecto/seleccionado no se toca) */
:root:not([data-theme="dark"]) body.in-game .choice-btn:not(.correct):not(.incorrect):not(.selected),
:root:not([data-theme="dark"]) #view-game .choice-btn:not(.correct):not(.incorrect):not(.selected),
:root:not([data-theme="dark"]) .card[class*="theme-"]:not(.theme-lucidez) #choice-options .choice-btn:not(.correct):not(.incorrect):not(.selected) {
  background: linear-gradient(180deg, #fffdf7, #fbf2d9) !important;
  border: 1px solid var(--lr-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 5px 12px -8px rgba(74, 48, 8, .35);
}
:root:not([data-theme="dark"]) #view-game .choice-btn:not(.correct):not(.incorrect):not(.selected):hover:not(:disabled) {
  border-color: var(--se-gold, #c9992e);
}
:root:not([data-theme="dark"]) #view-game .choice-btn:disabled:not(.correct):not(.incorrect) { opacity: .72; }
/* Caja de la pregunta: papel, no el gris azulado */
:root:not([data-theme="dark"]) #view-game .q-box {
  background: linear-gradient(180deg, #fffdf7, #fbf2d9) !important;
  box-shadow: var(--lr-shadow);
}
/* Cabecera de la partida (icono del modo + racha): papel con filete, no el azul grisáceo */
:root:not([data-theme="dark"]) #view-game .mode-header.game-hud {
  background: linear-gradient(180deg, #fffdf7, #fbf2d9) !important;
  border: 1px solid var(--lr-line) !important;
  box-shadow: var(--lr-shadow);
}

/* El marco de la partida es papel cálido, un escalón más oscuro que las fichas (respuestas, pregunta, cabecera) que lleva dentro */
:root:not([data-theme="dark"]) .card[class*="theme-"]:not(.theme-lucidez) { background-color: #f4e6c2; }

/* 6. Inicio: Jugar y Duelo como PERGAMINO ILUMINADO (marco de oro doble, color de la sección en el brillo
      y en el botón), no como el oscuro. Título con el color de la sección; texto legible sobre papel. */
:root:not([data-theme="dark"]) .home-big-card.home-card-jugar { --acc: #2d5bb8; }
:root:not([data-theme="dark"]) .home-big-card.home-card-duelo { --acc: #a3203f; }
:root:not([data-theme="dark"]) .home-big-card.home-card-jugar,
:root:not([data-theme="dark"]) .home-big-card.home-card-duelo {
  background:
    radial-gradient(70% 130% at 14% 50%, color-mix(in srgb, var(--acc) 11%, transparent), transparent 65%),
    linear-gradient(165deg, #fff8e6, #f0dcaa);
  border: 2px solid #c9992e;
  box-shadow: inset 0 0 0 4px #fffaf0, inset 0 0 0 5px rgba(201, 153, 46, .6), 0 14px 26px -12px rgba(74, 48, 8, .45);
}
:root:not([data-theme="dark"]) .home-big-card.home-card-jugar::before,
:root:not([data-theme="dark"]) .home-big-card.home-card-duelo::before { background: radial-gradient(120% 90% at 12% -15%, rgba(255, 255, 255, .55), transparent 55%); }
:root:not([data-theme="dark"]) .home-big-card .home-big-title { color: color-mix(in srgb, var(--acc) 78%, #1c2340); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
:root:not([data-theme="dark"]) .home-big-card .home-big-sub { color: #3d4454; opacity: 1; }
:root:not([data-theme="dark"]) .home-big-card .home-big-arrow { background: var(--acc); border-color: #fffaf0; box-shadow: 0 0 0 2px #c9992e, 0 3px 8px rgba(0, 0, 0, .25); }

/* 7. Encargos: en el claro, hoja de oro batido con tinta marino (el Gran Encargo, igual pero más intenso) */
:root:not([data-theme="dark"]) .home-encargos,
:root:not([data-theme="dark"]) .enc-card.is-great {
  background: linear-gradient(180deg, #f8e3a0, #e2b955);
  color: #1c2340;
  border: 1.5px solid #a9791a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px -10px rgba(74, 48, 8, .55);
}
:root:not([data-theme="dark"]) .home-encargos-kicker { color: #6b4a07; }
:root:not([data-theme="dark"]) .home-encargos-line { color: #1c2340; }
:root:not([data-theme="dark"]) .home-encargos-tail { color: #6b4a07; }
:root:not([data-theme="dark"]) .home-encargos-img { background: rgba(255, 255, 255, .35); }
:root:not([data-theme="dark"]) .home-encargos-bar,
:root:not([data-theme="dark"]) .enc-card.is-great .enc-bar { background: rgba(28, 35, 64, .22); }
:root:not([data-theme="dark"]) .home-encargos-fill,
:root:not([data-theme="dark"]) .enc-card.is-great .enc-bar-fill { background: linear-gradient(90deg, #1c2340, #34427a); }
:root:not([data-theme="dark"]) .enc-card.is-great .enc-card-xp,
:root:not([data-theme="dark"]) .enc-card.is-great.is-done .enc-card-xp,
:root:not([data-theme="dark"]) .enc-card.is-great.is-done .enc-card-prog { color: #6b4a07; }

/* Zona de peligro (Ajustes): claramente aparte, en rojo (fondo rosado, borde y franja rojos, botón sólido) */
:root:not([data-theme="dark"]) #view-settings .settings-danger-zone {
  background: linear-gradient(180deg, #fff3ef, #fbddd4);
  border: 1.5px solid #c0392b;
  border-left: 6px solid #b0201a;
  border-radius: 14px;
  opacity: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 10px 20px -12px rgba(150, 30, 20, .5);
}
:root:not([data-theme="dark"]) #view-settings .settings-danger-zone h3 { color: #9a1b14 !important; font-size: 15px; }
:root:not([data-theme="dark"]) #view-settings .settings-danger-zone .settings-note { color: #6b2a24; }
:root:not([data-theme="dark"]) #view-settings .settings-danger-zone .btn-danger {
  background: #b0201a; color: #fff; border: 1px solid #8f1812; font-weight: 800;
  box-shadow: 0 2px 0 #7a130e, 0 8px 14px -8px rgba(150, 30, 20, .7);
}

/* Logros (claro): los desbloqueados lucen (fila dorada, icono grande con halo y color); los bloqueados, apagados pero claros, sin el gris oscuro */
:root:not([data-theme="dark"]) .ach-row.is-done {
  background: transparent; /* mismo papel que la cabecera de la familia; lo desbloqueado se distingue por la franja, el halo y el check */
  border-left: 4px solid #d9a21f;
  padding-left: 12px;
}
:root:not([data-theme="dark"]) .ach-row.is-done .ach-ico-wrap::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 74, .75) 0%, rgba(255, 207, 74, .28) 52%, transparent 72%);
  pointer-events: none;
}
:root:not([data-theme="dark"]) .ach-row.is-done .ach-ico.has-img { width: 60px !important; height: 60px !important; position: relative; }
:root:not([data-theme="dark"]) .ach-row.is-done .ach-ico.has-img .ach-img {
  filter: saturate(1.25) contrast(1.05) drop-shadow(0 4px 7px rgba(150, 100, 10, .5));
}
:root:not([data-theme="dark"]) .ach-row.is-done .ach-title { font-size: 15.5px; color: #1c2340; }
:root:not([data-theme="dark"]) .ach-row.is-done .ach-check { width: 21px; height: 21px; font-size: 12px; right: -4px; bottom: -4px; box-shadow: 0 2px 5px rgba(22, 120, 60, .45); }
:root:not([data-theme="dark"]) .ach-row.is-done .ach-desc { color: #4a4636; }
:root:not([data-theme="dark"]) .ach-row.is-locked .ach-ico.has-img { filter: grayscale(.7) brightness(1.18) contrast(.9); opacity: .78; }
:root:not([data-theme="dark"]) .ach-row.is-locked .ach-title { color: #5b5648; }
:root:not([data-theme="dark"]) .ach-row.is-locked .ach-desc { color: #6a6454; }

/* Logros (claro): la familia completada lleva el mismo tono de papel que las que faltan por completar (solo cambia el contenido: filas y cuenta) */
:root:not([data-theme="dark"]) .ach-group.is-complete {
  background-color: var(--lr-paper);
  background-image: none;
}
:root:not([data-theme="dark"]) .ach-group.is-complete .ach-g-ico { background: var(--badge-bg); }

/* Fragmentos de Mente (claro): los obtenidos se ven con color y brillo; los que faltan, apagados */
:root:not([data-theme="dark"]) .ach-frag { padding: 2px 6px; }
:root:not([data-theme="dark"]) .ach-frag:not(.got) { background: #f0ecf6; border-color: rgba(124, 58, 237, .22); }
:root:not([data-theme="dark"]) .ach-frag:not(.got) img { filter: grayscale(.75); opacity: .6; }
:root:not([data-theme="dark"]) .ach-frag.got {
  background: radial-gradient(circle at 50% 35%, #f3e8ff, #c4a1fb);
  border: 1.5px solid #7c3aed;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, .28), 0 3px 9px rgba(124, 58, 237, .5);
}
:root:not([data-theme="dark"]) .ach-frag.got img { width: 22px; height: 22px; filter: saturate(1.4) drop-shadow(0 1px 2px rgba(76, 29, 149, .6)); }
:root:not([data-theme="dark"]) .fragment-milestone.is-unlocked {
  background: linear-gradient(90deg, #e7d6ff, #f6eeff);
  border: 2px solid #7c3aed;
  box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .6);
}
:root:not([data-theme="dark"]) .fragment-milestone.is-unlocked .fragment-milestone-icon { filter: saturate(1.3) drop-shadow(0 2px 4px rgba(124, 58, 237, .5)); }
:root:not([data-theme="dark"]) .fragment-milestone.is-unlocked .fragment-milestone-title { color: #3b0f8f; }
:root:not([data-theme="dark"]) .fragment-milestone.is-unlocked .fragment-milestone-state {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #7c3aed; color: #fff; font-size: 14px;
}
:root:not([data-theme="dark"]) .fragment-milestone.is-locked { opacity: .78; background: rgba(255, 255, 255, .7); }

/* Estadísticas (claro): «Últimas partidas» — filas en crema algo más cálido y con filete dorado, para que no floten como cajas blancas sobre el papel */
:root:not([data-theme="dark"]) #view-stats .history-item.hist-row {
  background: #fbf2da;
  border: 1px solid rgba(176, 134, 36, .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(74, 48, 8, .08);
}

/* Logros (claro): la familia llevaba un degradado de papel a lo largo de toda su altura, así que las filas de abajo salían más oscuras que la cabecera. Papel liso: cabecera y filas, del mismo tono. */
:root:not([data-theme="dark"]) .ach-group:not(.is-complete) {
  background-image: none;
  background-color: var(--lr-paper);
}

/* Barras de progreso (claro): la pista era gris azulado frío sobre papel crema; pasa a beige cálido (el relleno no cambia). La barra de la partida no se toca. */
:root:not([data-theme="dark"]) :is(#view-home, #view-modes, #view-duelo, #view-stats, #view-medals, #view-encargos) :is(.progress-bar, .progress-track, .dominio-bar, .ach-g-bar, .ach-bar),
:root:not([data-theme="dark"]) .enc-card:not(.is-great) .enc-bar {
  background: rgba(138, 106, 26, .22);
}

/* Amigos / Duelos (claro): los botones secundarios de las filas (Reto, Rechazar, Cancelar) eran crema sobre papel blanco, sin borde, y no se veían.
   Ahora llevan fondo dorado suave, filete dorado y sombra, a la altura del botón primario de al lado. */
:root:not([data-theme="dark"]) #seq-duel-root .seq-pl-row .btn.btn-secondary {
  background: linear-gradient(180deg, #fbefcf, #f0dba6);
  border: 1.5px solid #b98a1d;
  color: #1c2340;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 0 rgba(138, 106, 26, .35);
}
/* El primario desactivado (amigo sin conexión) deja de ser un gris plano: mismo botón, apagado. */
:root:not([data-theme="dark"]) #seq-duel-root .seq-pl-row .btn.btn-primary:disabled {
  background: linear-gradient(180deg, #c9cfdd, #aab2c6);
  border: 1.5px solid #8a93ab;
  opacity: .8;
  box-shadow: none;
}
/* «En línea»: el verde de modo oscuro (#5fd08b) casi no se leía sobre papel claro. */
:root:not([data-theme="dark"]) .seq-d-on { color: #17803f; }

/* Rankings (claro): los escalones del podio eran beige sobre beige; algo más de dorado y filete firme para que se lean como peldaños. */
:root:not([data-theme="dark"]) .seq-v21-pod-step {
  background: linear-gradient(180deg, #f3d98a, #f8ebc2);
  border-color: #b98a1d;
}

/* ==== Tarjeta final de partida y de Duelo/Reto en modo claro ====
   Papel claro liso con el mismo marco y cinta que en oscuro, y tinta oscura. El oscuro no se toca. */
:root:not([data-theme="dark"]) #results-card.results-card, :root:not([data-theme="dark"]) .seq-d-results.results-card {
  --rc-superficie: var(--lr-paper-2);
  --text: #2b2114; --sub: #5e4d34; --card: rgba(255, 250, 236, .66); --badge-bg: rgba(255, 250, 236, .7);
  --border: rgba(138, 106, 26, .45); --badge-border: rgba(138, 106, 26, .4);
  background: var(--rc-superficie) !important;
  box-shadow: 0 14px 34px rgba(80, 56, 12, .28) !important;
}
:root:not([data-theme="dark"]) #results-card .metric-label, :root:not([data-theme="dark"]) .seq-d-results .metric-label { color: #5e4d34; }
/* En Duelo/Reto la regla móvil de online.css pone otro fondo plano: aquí se repone el papel de la tarjeta (solo en claro). */
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results.results-card {
  background: var(--rc-superficie) !important;
  box-shadow: 0 14px 34px rgba(80, 56, 12, .28) !important;
}

/* Botones secundarios de las tarjetas finales en claro: «Compartir resultado» con relleno y borde visibles pero discretos,
   y «Volver a Duelos» como botón de contorno navy (distinto del principal). */
:root:not([data-theme="dark"]) #results-card .btn-share,
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results .btn-share,
:root:not([data-theme="dark"]) #results-card > div:last-child .btn.btn-share.btn-share-quiet,
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results > div:last-child .btn.btn-share.btn-share-quiet {
  background: rgba(255, 250, 236, .74) !important; border: 1.5px solid rgba(109, 40, 217, .62) !important; color: #2b2114 !important;
  box-shadow: 0 2px 6px rgba(80, 56, 12, .12) !important;
}
:root:not([data-theme="dark"]) #results-card .btn-share:hover,
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results .btn-share:hover { background: rgba(255, 250, 236, .92) !important; border-color: rgba(109, 40, 217, .6) !important; }
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results .btn-secondary {
  background: rgba(255, 250, 236, .74) !important; border: 1.5px solid #2a3560 !important; color: #1c2340 !important;
  box-shadow: 0 2px 6px rgba(80, 56, 12, .12) !important;
}
:root:not([data-theme="dark"]) #seq-duel-root .seq-d-results .btn-secondary:hover { background: rgba(255, 250, 236, .92) !important; }