/* ============================================================
   base.css — Reset, tipografía base, utilidades y efectos globales
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Scrollbar sutil (Webkit) */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Líneas de scan globales (CRT/holograma muy sutil) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.5;
  mix-blend-mode: overlay;
}

::selection { background: var(--cyan); color: var(--bg); }
a { color: inherit; text-decoration: none; }

/* Custom elements (light-DOM) se comportan como bloques */
site-nav, hero-section, mechanic-section, modes-section,
consumables-section, ranking-section, final-cta, site-footer,
blind-game, visible-game { display: block; }
rank-panel, draft-panel { display: contents; }
/* Evita parpadeo de contenido sin estilar antes de que el componente monte */
:not(:defined) { visibility: hidden; }

/* ---- Utilidades ---- */
.wrap { width: var(--wrap); margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); letter-spacing: 0.04em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* Botón con corte diagonal */
.btn {
  --c: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--c);
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  clip-path: var(--cut);
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px -2px var(--c); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn.ghost:hover { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 18px -6px var(--cyan); }
.btn.violet { --c: var(--violet); }
.btn.green  { --c: var(--green); }

/* Estructura de sección y encabezados */
section { position: relative; padding: clamp(80px, 12vh, 140px) 0; }
.sec-head { max-width: 640px; margin-bottom: 56px; }
.sec-head h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  margin-top: 18px;
  line-height: 1.1;
}
.sec-head p { margin-top: 16px; color: #9a9ab4; font-size: 1.04rem; }

.div-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* Reveal sutil al hacer scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-bg { transform: none !important; }
}