/* Tarjeta final según el resultado (2.3), sobre una superficie lisa (sin imagen de fondo).
   Se aplica a #results-card y a la tarjeta final de Duelo/Reto. El tono llega en data-tier:
   oro (perfecto/victoria), azul (bien), plata (mediocre), derrota, secreto (Lucidez). Sin tier = oro.
   Sin marco ni cinta de imagen: filete fino del color del tono, franja de acento arriba y título entre dos filetes. */
#results-card.results-card, .seq-d-results.results-card {
  --rc-superficie: #1a2233; /* la misma superficie oscura que el resto de tarjetas del juego */
  --rc-accent: #e8c874;
  --text: #f3ead8; --sub: #d3c8ae; --card: rgba(8,12,26,.62); --badge-bg: rgba(8,12,26,.55);
  --border: rgba(201,153,46,.38); --badge-border: rgba(201,153,46,.38);
}
#results-card[data-tier="azul"], .seq-d-results[data-tier="azul"] { --rc-accent: #8fb4f0; }
#results-card[data-tier="plata"], .seq-d-results[data-tier="plata"] { --rc-accent: #cbd3df; }
#results-card[data-tier="derrota"], .seq-d-results[data-tier="derrota"] { --rc-accent: #e08a80; }
#results-card[data-tier="secreto"], .seq-d-results[data-tier="secreto"] { --rc-accent: #c4b5fd; }
:root:not([data-theme="dark"]) #results-card.results-card, :root:not([data-theme="dark"]) .seq-d-results.results-card { --rc-accent: #8a6a1a; }
:root:not([data-theme="dark"]) #results-card[data-tier="azul"], :root:not([data-theme="dark"]) .seq-d-results[data-tier="azul"] { --rc-accent: #2a5db0; }
:root:not([data-theme="dark"]) #results-card[data-tier="plata"], :root:not([data-theme="dark"]) .seq-d-results[data-tier="plata"] { --rc-accent: #5a6578; }
:root:not([data-theme="dark"]) #results-card[data-tier="derrota"], :root:not([data-theme="dark"]) .seq-d-results[data-tier="derrota"] { --rc-accent: #9b2f26; }
:root:not([data-theme="dark"]) #results-card[data-tier="secreto"], :root:not([data-theme="dark"]) .seq-d-results[data-tier="secreto"] { --rc-accent: #6d28d9; }

#results-card.results-card, .seq-d-results.results-card {
  position: relative; overflow: hidden;
  background: var(--rc-superficie) !important;
  border: 1px solid color-mix(in srgb, var(--rc-accent) 38%, transparent) !important; border-radius: 18px !important;
  padding: 26px 20px 22px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
}
#results-card.results-card::after, .seq-d-results.results-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rc-accent) 22%, var(--rc-accent) 78%, transparent);
}
#results-card.results-card > *, .seq-d-results.results-card > * { position: relative; z-index: 1; }
#results-card.results-card h3, .seq-d-results.results-card h3 {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box;
  margin: 0 0 14px !important; padding: 0 !important;
  color: var(--rc-accent) !important; font-size: 11.5px !important; letter-spacing: 2px !important; font-weight: 800;
  white-space: nowrap;
}
#results-card.results-card h3::before, #results-card.results-card h3::after,
.seq-d-results.results-card h3::before, .seq-d-results.results-card h3::after {
  content: ""; flex: 1 1 0; min-width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc-accent) 70%, transparent));
}
#results-card.results-card h3::after, .seq-d-results.results-card h3::after { transform: scaleX(-1); }
#results-card .metric-box, .seq-d-results .metric-box { background: var(--card) !important; }
#results-card .metrics-grid, #results-card .results-metrics-grid, .seq-d-results .results-metrics-grid { background: rgba(201,153,46,.18) !important; border-color: rgba(201,153,46,.3) !important; }

/* Subida de nivel (src/ui/level-up.js) */
.lvlup-block { position: relative; height: 176px; margin: 0 0 10px; text-align: center; animation: luIn .55s var(--ease-decelerate, ease-out) both; }
.lvlup-block .lu-rays { position: absolute; left: 50%; top: -6px; width: 190px; margin-left: -95px; opacity: .6; animation: luRot 30s linear infinite; pointer-events: none; }
.lvlup-block .lu-badge { position: absolute; left: 50%; top: 10px; width: 104px; margin-left: -52px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.lvlup-block .lu-ribbon { position: absolute; left: 50%; top: 98px; width: 220px; margin-left: -110px; }
.lvlup-block .lu-ribbon img { width: 100%; display: block; }
.lvlup-block .lu-ribbon span { position: absolute; left: 0; right: 0; top: 27%; transform: translateY(-50%); padding-left: 2px; white-space: nowrap; -webkit-text-size-adjust: none; text-size-adjust: none; font-family: inherit; font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: 2px; color: #f6e6b8; text-align: center; text-shadow: 0 1px 2px #000; } /* centrado por su punto medio (no por su borde superior): con un tamaño de fuente mayor en el móvil sigue sobre la cinta */
@keyframes luRot { to { transform: rotate(360deg); } }
@keyframes luIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lvlup-block, .lvlup-block .lu-rays { animation: none; } }

.lvlup-block.lu-still, .lvlup-block.lu-still .lu-rays { animation: none; }