/* Naruto — noche en Konoha: remolino de la Hoja, bandana metálica y el naranja de Naruto. */

:root {
  --bg: #161a26;
  --fondo:
    repeating-radial-gradient(circle at 50% 30%, rgba(255, 123, 0, .05) 0 2px, transparent 2px 26px),
    radial-gradient(800px 400px at 50% -120px, rgba(255, 123, 0, .22), transparent),
    #161a26;
  --surface: #222838;
  --surface-2: #2c3448;
  --borde: rgba(255, 255, 255, .1);
  --texto: #f1ede4;
  --suave: #a6a9b8;
  --acento: #ff7b00;
  --grad: linear-gradient(180deg, #ff8f1f, #e86400);
  --sobre-acento: #1a0e00;
  --ok: #3e9f5a;
  --sobre-ok: #fff;
  --casi: #e8b22e;
  --sobre-casi: #251b00;
  --mal: #a8323e;
  --sobre-mal: #fff;
  --r: 10px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Shojumaru', 'Inter', serif;
  --cab-bg: linear-gradient(180deg, #d9dde4, #9aa2ad 55%, #7e8792);
  --tela: #1d2c52;
}

/* Cabecera: placa metálica de la bandana, con la tela azul debajo */
.top { border-bottom: 6px solid var(--tela); backdrop-filter: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.top .logo { color: #1d2230; }
.top .logo b { background: none; color: #d45a00; -webkit-text-fill-color: #d45a00; }
.top .tema-link { font-family: 'Shojumaru', serif; font-size: 18px; color: #1d2230; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.top .nav a { color: #2d3240; }
.top .nav a:hover, .top .nav a.on { background: rgba(0, 0, 0, .1); color: #0e1118; }
.top .nav a.on { box-shadow: inset 0 -2px 0 #d45a00; }
.top .icono { background: rgba(255, 255, 255, .45); border-color: rgba(0, 0, 0, .2); color: #1d2230; }
@media (max-width: 860px) { .top .nav { background: #b7bdc6; } }

h1.titulo { font-weight: 400; color: var(--acento); letter-spacing: 1px; text-shadow: 0 3px 0 #000; }
.btn { font-family: 'Shojumaru', serif; font-weight: 400; letter-spacing: .5px; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .jutsu { border-left: 4px solid var(--acento) !important; }

.nr-hero { text-align: center; padding: 18px 0 30px; }
/* Remolino de la Hoja dibujado con CSS */
.nr-hero .hoja { width: 78px; height: 78px; margin: 0 auto 10px; border-radius: 50%; border: 5px solid var(--acento); position: relative;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 123, 0, .25) 70% 100%); }
.nr-hero .hoja::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid var(--acento); border-right-color: transparent; }
.nr-hero h1 { font: 400 clamp(56px, 13vw, 100px)/1 var(--font-d); color: var(--acento); text-shadow: 0 5px 0 #000, 0 0 30px rgba(255, 123, 0, .35); }
.nr-hero p { color: var(--suave); margin-top: 10px; }
.juego .cuerpo b { font: 400 26px/1 var(--font-d); color: var(--acento); }
.juego .muestra { background: repeating-radial-gradient(circle at 50% 50%, #2a3143 0 3px, #262c3d 3px 22px); }

.jutsu { position: relative; border-radius: 14px; overflow: hidden; background: #0e111a; }
.jutsu img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.jutsu .rotulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); }
.jutsu .rotulo b { display: block; font: 400 24px/1.1 var(--font-d); color: var(--acento); }
.jutsu .rotulo small { color: #ccc; }
.kekkei { display: inline-block; padding: 1px 6px; margin: 1px; border-radius: 4px; background: rgba(0, 0, 0, .25); font-size: 11px; }