/* El Señor de los Anillos — pergamino y oro élfico del Anillo Único sobre la noche de la Tierra Media. */

:root {
  --bg: #16130e;
  --fondo:
    radial-gradient(800px 380px at 50% -120px, rgba(214, 170, 76, .25), transparent),
    radial-gradient(1200px 600px at 50% 120%, rgba(90, 60, 20, .25), transparent),
    #16130e;
  --surface: #221d15;
  --surface-2: #2d271c;
  --borde: rgba(214, 170, 76, .18);
  --texto: #efe6d0;
  --suave: #b0a489;
  --acento: #d6aa4c;
  --grad: linear-gradient(180deg, #e7c26a, #b98a2c);
  --sobre-acento: #231800;
  --ok: #4b8f4f;
  --sobre-ok: #fff;
  --casi: #d9a93a;
  --sobre-casi: #241900;
  --mal: #7a2b22;
  --sobre-mal: #fff;
  --r: 6px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Cinzel', 'Inter', serif;
  --cab-bg: linear-gradient(180deg, #3a3022, #262017);
}

.top { border-bottom: 1px solid var(--acento); backdrop-filter: none; }
.top .logo, .top .tema-link { color: var(--texto); }
.top .logo b { background: none; color: var(--acento); -webkit-text-fill-color: var(--acento); }
.top .tema-link { font-family: 'Cinzel', serif; font-size: 16px; color: var(--acento); }
.top .nav a { color: #d8ccb0; }
.top .nav a:hover, .top .nav a.on { background: rgba(214, 170, 76, .12); color: #fff; }
.top .nav a.on { box-shadow: inset 0 -2px 0 var(--acento); }
@media (max-width: 860px) { .top .nav { background: #1d1912; } }

h1.titulo { font-weight: 700; color: var(--acento); letter-spacing: 1px; }
.btn { font-family: 'Cinzel', serif; font-weight: 700; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .actor { border-color: rgba(214, 170, 76, .35) !important; }

.lotr-hero { text-align: center; padding: 18px 0 30px; }
/* El Anillo Único */
.lotr-hero .anillo { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; border: 9px solid transparent;
  background: linear-gradient(#16130e, #16130e) padding-box, conic-gradient(#f6dc8a, #b98a2c, #f6dc8a, #8c6519, #f6dc8a) border-box;
  box-shadow: 0 0 30px rgba(255, 120, 30, .45); }
.lotr-hero h1 { font: 700 clamp(34px, 8vw, 68px)/1.1 var(--font-d); color: var(--acento); text-shadow: 0 0 24px rgba(214, 170, 76, .35); }
.lotr-hero p { color: var(--suave); margin-top: 10px; max-width: 560px; margin-inline: auto; }
.juego .cuerpo b { font: 700 24px/1 var(--font-d); color: var(--acento); }
.juego .muestra { background: radial-gradient(400px 200px at 50% 100%, rgba(214, 170, 76, .12), transparent), #1d1912; }

/* Actor: el nombre sobre pergamino */
.actor { text-align: center; padding: 34px 18px; border-radius: 6px; background: linear-gradient(180deg, #f1e4c3, #d9c596); color: #2a1e0b; }
.actor small { display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #6f5522; }
.actor b { display: block; margin-top: 10px; font: 700 clamp(26px, 7vw, 40px)/1.1 var(--font-d); }