/* Guardianes de la Noche — noche de luna, cuadros ichimatsu del haori de Tanjiro y filo de nichirin. */

:root {
  --bg: #0f1413;
  --fondo:
    radial-gradient(700px 360px at 50% -120px, rgba(214, 64, 69, .28), transparent),
    conic-gradient(from 0deg at 50% 50%, rgba(22, 120, 90, .07) 0 25%, transparent 0 50%, rgba(22, 120, 90, .07) 0 75%, transparent 0) 0 0 / 56px 56px,
    #0f1413;
  --surface: #1b2220;
  --surface-2: #25302d;
  --borde: rgba(255, 255, 255, .1);
  --texto: #f1ece4;
  --suave: #a3aaa5;
  --acento: #d64045;
  --grad: linear-gradient(180deg, #e2555a, #b52f34);
  --sobre-acento: #fff;
  --ok: #1f8a63;
  --sobre-ok: #fff;
  --casi: #e0b33c;
  --sobre-casi: #241a00;
  --mal: #6d2327;
  --sobre-mal: #ffe6e6;
  --r: 8px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Yuji Syuku', 'Inter', serif;
  --cab-bg: conic-gradient(#16785a 0 25%, #111 0 50%, #16785a 0 75%, #111 0) 0 0 / 24px 24px;
}

/* Cabecera: el patrón ichimatsu verde y negro */
.top { border-bottom: 3px solid var(--acento); backdrop-filter: none; }
.top .logo, .top .tema-link { color: #fff; text-shadow: 0 1px 3px #000; }
.top .logo b { background: none; color: #ff8a8e; -webkit-text-fill-color: #ff8a8e; }
.top .tema-link { font-family: 'Yuji Syuku', serif; font-size: 18px; }
.top .nav a { color: #fff; text-shadow: 0 1px 3px #000; }
.top .nav a:hover, .top .nav a.on { background: rgba(0, 0, 0, .55); color: #fff; }
.top .nav a.on { box-shadow: inset 0 -3px 0 var(--acento); }
.top .icono { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 860px) { .top .nav { background: #111; } }

h1.titulo { font-weight: 400; letter-spacing: 1px; }
.btn { font-family: 'Yuji Syuku', serif; font-weight: 400; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .tecnica { border-left: 4px solid var(--acento) !important; }

.ds-hero { text-align: center; padding: 18px 0 30px; }
.ds-hero .haori { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 12px; border: 3px solid #0b0b0b;
  background: conic-gradient(#16785a 0 25%, #111 0 50%, #16785a 0 75%, #111 0) 0 0 / 28px 28px; transform: rotate(45deg); }
.ds-hero h1 { font: 400 clamp(38px, 9vw, 78px)/1.1 var(--font-d); color: #fff; text-shadow: 0 4px 0 #6d2327, 0 0 30px rgba(214, 64, 69, .4); }
.ds-hero p { color: var(--suave); margin-top: 10px; }
.juego .cuerpo b { font: 400 26px/1 var(--font-d); }
.juego .muestra { background: conic-gradient(#1c2a26 0 25%, #161d1b 0 50%, #1c2a26 0 75%, #161d1b 0) 0 0 / 40px 40px; }

/* Técnica: pergamino con el nombre */
.tecnica { text-align: center; padding: 34px 18px; border-radius: 8px; background: linear-gradient(180deg, #f3ead6, #e1d3b2); color: #231a10; }
.tecnica small { display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #7a2a2d; }
.tecnica b { display: block; margin-top: 10px; font: 400 clamp(28px, 7vw, 42px)/1.1 var(--font-d); }