/* === Tipografías: Capture it + Special Elite === */

/* 1) Special Elite — Google Fonts (IMPORT SIEMPRE ARRIBA) */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* 2) Capture it — autoalojada (asegúrate del nombre de archivo con MAYÚSCULA) */
@font-face {
  font-family: 'CaptureIt';
  src: url('assets/fonts/CaptureIt.woff2') format('woff2'),
       url('assets/fonts/CaptureIt.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Subtítulos/narrativa con Special Elite */
.subtitle,
.narrative,
h3.subtitle,
h4.subtitle,
p.subtitle,
.hero .subtitle,
.hero .narrative,
blockquote,
figcaption {
  font-family: 'Special Elite';
} 

/* === Estilos por rol tipográfico === */
:root {
  --title-tracking: 1.5px; /* espaciado entre letras para títulos */
}

h1, h2, .hero, .hero-card, .title {
  font-family: 'CaptureIt';
  text-transform: uppercase;
  letter-spacing: var(--title-tracking);
  font-size: 1.3rem;
}

/* Subtítulos / narrativa */
.subtitle, .narrative, blockquote, figcaption {
  font-family: 'Special Elite';
}

/* Jerarquía de tamaños */
h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 1.8vw + .8rem, 2.2rem); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 1.2vw + .7rem, 1.6rem); line-height: 1.3; }


/* Narrativa con look vintage */
.narrative {
  font-size: 0.80rem;
  letter-spacing: .3px;
}

/* Marca en navbar con la tipografía de títulos */
.navbar .brand .span { 
  font-family: 'CaptureIt'; 
  letter-spacing: var(--title-tracking);
}

/* ====== Estilos existentes de tu app (no toco) ====== */
* { box-sizing: border-box; }
body { margin: 0; font-family: CaptureIt; background: #0f172a; color: #e2e8f0; }
.container { max-width: 1000px; margin: 0 auto; padding: 24px; }
h1 { text-align: center; margin-bottom: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { display: block; background: #111827; padding: 16px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid #1f2937; transition: transform .1s, border-color .15s; }
.card:hover { transform: translateY(-2px); border-color: #60a5fa; }
input, textarea, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #374151; background:#0b1220; color:#e5e7eb; }
button, .btn { padding: 10px 14px; border: 0; border-radius: 10px; background: #1d4ed8; color: white; cursor: pointer; }
button:hover, .btn:hover { background: #2563eb; }
.flash { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.flash.error { background: #7f1d1d; }
.flash.success { background: #14532d; }
.table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { padding: 10px; border-bottom: 1px solid #374151; text-align: left; }
.flex { display:flex; gap: 8px; align-items:center; }
header.nav { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }
a.link { color: #93c5fd; text-decoration: none; }
a.link:hover { text-decoration: underline; }
.badge { background:#1f2937; padding:4px 8px; border-radius: 999px; border:1px solid #374151; font-size:.85rem;}
footer { margin-top: 24px; text-align: center; color: #9ca3af; }
hr.sep { border:0; border-top:1px solid #1f2937; margin: 16px 0; }
pre { white-space: pre-wrap; }
label { display:block; margin-bottom:6px; color:#cbd5e1; font-size:.95rem;}
.form-row { margin-bottom: 12px; }
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #9ca3af; }
.btn-secondary { background:#374151; }
.btn-danger { background:#991b1b; }
.btn-danger:hover { background:#b91c1c; }
.text-right { text-align:right; }
.timer { font-weight: bold; }
.level-pill { background:#0b3b19; border:1px solid #1a5e2a; padding:4px 8px; border-radius:999px; }

/* ==== Fondo nevado + lienzo ==== */
#snow {
  position: fixed;
  inset: 0;
  z-index: 0;          /* detrás del contenido */
  pointer-events: none;
}

/* Fallback estático: “textura” de nieve con gradientes */
body {
  background:
    radial-gradient(2px 2px at 20% 20%, rgba(255,255,255,0.08) 50%, transparent 51%) 0 0/ 120px 120px,
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,0.06) 50%, transparent 51%) 0 0/ 160px 160px,
    #0f172a; /* tu fondo base */
}

/* Asegurar que el contenido quede por encima del canvas */
.navwrap, .hero-card, .panel, .card, footer {
  position: relative;
  z-index: 1;
}

/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce) {
  #snow { display: none; }
}