/* Hunter x Hunter — verde de Gon, licencia de cazador y naipes de Hisoka. */

:root {
  --bg: #0f1a14;
  --fondo:
    radial-gradient(800px 380px at 50% -120px, rgba(76, 201, 110, .25), transparent),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 12px, transparent 12px 24px),
    #0f1a14;
  --surface: #1a2821;
  --surface-2: #23352b;
  --borde: rgba(255, 255, 255, .1);
  --texto: #eef3ec;
  --suave: #a0b0a6;
  --acento: #4cc96e;
  --grad: linear-gradient(180deg, #5ed880, #33a756);
  --sobre-acento: #06200f;
  --ok: #2f9e54;
  --sobre-ok: #fff;
  --casi: #e6b43a;
  --sobre-casi: #241a00;
  --mal: #9b2f3a;
  --sobre-mal: #fff;
  --r: 10px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Bowlby One', 'Inter', sans-serif;
  --cab-bg: linear-gradient(180deg, #2c3a33, #1b2620);
}

.top { border-bottom: 3px solid var(--acento); backdrop-filter: none; }
.top .logo, .top .tema-link { color: #fff; }
.top .logo b { background: none; color: var(--acento); -webkit-text-fill-color: var(--acento); }
.top .tema-link { font-family: 'Bowlby One', sans-serif; font-size: 17px; }
.top .nav a { color: #d7e6dc; }
.top .nav a:hover, .top .nav a.on { background: rgba(76, 201, 110, .15); color: #fff; }
.top .nav a.on { box-shadow: inset 0 -3px 0 var(--acento); }
@media (max-width: 860px) { .top .nav { background: #16241c; } }

h1.titulo { font-weight: 400; letter-spacing: .5px; }
.btn { font-family: 'Bowlby One', sans-serif; font-weight: 400; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .hatsu { border-radius: 12px; }

.hxh-hero { text-align: center; padding: 18px 0 30px; }
/* Licencia de cazador: tarjeta con la "H" */
.hxh-hero .licencia { width: 64px; height: 86px; margin: 0 auto 12px; border-radius: 8px; display: grid; place-items: center;
  font: 400 40px/1 var(--font-d); color: #0f1a14; background: linear-gradient(135deg, #f5f1e3, #cfc7ad); box-shadow: 0 6px 0 #000, 0 0 30px rgba(76, 201, 110, .35); transform: rotate(-8deg); }
.hxh-hero h1 { font: 400 clamp(44px, 11vw, 88px)/1 var(--font-d); color: #fff; text-shadow: 0 5px 0 #000; }
.hxh-hero h1 span { color: var(--acento); }
.hxh-hero p { color: var(--suave); margin-top: 10px; }
.juego .cuerpo b { font: 400 24px/1 var(--font-d); }
.juego .muestra { background: repeating-linear-gradient(45deg, #1d2b24 0 12px, #1a2821 12px 24px); }

/* Hatsu: un naipe */
.hatsu { text-align: center; padding: 34px 18px; background: #f7f3ea; color: #1b1b1b; border: 3px solid #1b1b1b; position: relative; }
.hatsu::before, .hatsu::after { content: '♠'; position: absolute; font-size: 22px; color: #b3243a; }
.hatsu::before { left: 12px; top: 8px; }
.hatsu::after { right: 12px; bottom: 8px; transform: rotate(180deg); }
.hatsu small { display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #555; }
.hatsu b { display: block; margin-top: 10px; font: 400 clamp(26px, 7vw, 40px)/1.1 var(--font-d); }