/* FUSE web — tokens del sistema de diseño de Figma ("FUSE – UI Redesign") + casillas neón del mapa del juego */
:root {
  --bg-base: #160c33;
  --surface-2: #2c1a63;
  --surface-inset: #120a2b;
  --line-soft: #3b2a7a;
  --line-neon: #a970ff;
  --violet: #9b5cff;
  --violet-hi: #c49bff;
  --text: #f4eeff;
  --muted: #a898d8;
  --on-accent: #120a2b;
  --success: #22e07a;
  --danger: #ff4566;
  --neon-yellow: #ffe98a;
  --neon-pink: #ff6ef2;
  --neon-cyan: #5ad8ff;
  --glow-violet: 0 0 8px rgba(155, 92, 255, .7), 0 0 24px rgba(155, 92, 255, .35);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-base);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--violet-hi); }

/* ---------- Fondo: degradado del mapa + circuito neón + estrellas ---------- */
.fx-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(155, 92, 255, .45) 0%, transparent 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(255, 110, 242, .18) 0%, transparent 60%),
    linear-gradient(180deg, #2a1452 0%, var(--bg-base) 55%, #0f0826 100%);
}
.fx-circuit { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.fx-circuit path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fx-circuit .c-y { stroke: var(--neon-yellow); filter: drop-shadow(0 0 6px rgba(255, 233, 138, .8)); }
.fx-circuit .c-p { stroke: var(--neon-pink); filter: drop-shadow(0 0 6px rgba(255, 110, 242, .8)); }
.fx-circuit .c-v { stroke: var(--line-neon); filter: drop-shadow(0 0 6px rgba(169, 112, 255, .8)); }
.fx-circuit rect { fill: #1a1226; stroke-width: 3; }
.fx-circuit .pulse { stroke-dasharray: 16 260; animation: pulse 5s linear infinite; stroke-width: 5; }
@keyframes pulse { to { stroke-dashoffset: -276; } }
.fx-stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.fx-stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; opacity: .5; animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity: .1; } }

/* ---------- Logo ---------- */
.logo { display: block; width: min(300px, 70vw); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35)); }
.logo-sm { width: 150px; }

/* ---------- Panel (ventana v3 del juego) ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(44, 26, 99, .92) 0%, rgba(26, 15, 64, .94) 100%);
  border: 2px solid var(--line-neon);
  border-radius: 28px;
  box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Chip (como V3_Chip encima del título de los popups) */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  background: var(--surface-inset); border: 1.5px solid var(--line-soft); color: var(--violet-hi);
}
.chip img { width: 16px; height: 16px; }
.chip.is-challenge { color: var(--neon-yellow); border-color: rgba(255, 233, 138, .45); }
.chip.is-revenge { color: #ff8aa0; border-color: rgba(255, 69, 102, .5); }
.chip.is-invite { color: #7af0b0; border-color: rgba(34, 224, 122, .45); }

/* ---------- Botones (componente Button de Figma) ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 32px; border-radius: 18px; border: 2px solid;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .2px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; color: var(--text);
  transition: transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: var(--violet); border-color: var(--violet-hi); box-shadow: 0 0 12px rgba(155, 92, 255, .35), 0 0 4px rgba(155, 92, 255, .7); }
.btn-success { background: var(--success); border-color: var(--success); color: var(--on-accent); box-shadow: 0 0 10px rgba(34, 224, 122, .3), 0 0 4px rgba(34, 224, 122, .6); }
.btn-secondary { background: var(--surface-2); border-color: var(--line-neon); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 14px; }
.btn img { width: 22px; height: 22px; }

/* ---------- Casilla neón (nivel del mapa) ---------- */
.tile {
  --c: var(--neon-yellow);
  position: relative; display: inline-grid; place-items: center;
  width: 96px; height: 96px; border-radius: 8px;
  background: #1a1226;
  box-shadow: 0 0 0 2px #0c0812, 0 8px 18px rgba(0, 0, 0, .45);
}
.tile::before {
  content: ""; position: absolute; inset: 9px; border-radius: 4px;
  border: 4px solid var(--c);
  box-shadow: 0 0 10px var(--c), inset 0 0 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.tile::after { content: ""; position: absolute; inset: 22px; border-radius: 3px; background: #2a2433; }
.tile > span {
  position: relative; z-index: 1;
  font-family: 'Exo 2', sans-serif; font-weight: 800; font-style: italic; font-size: 34px; line-height: 1;
  color: var(--c); text-shadow: 0 0 10px var(--c);
}
.tile.is-pink { --c: var(--neon-pink); }
.tile.is-red { --c: #ff5a6e; }
.tile.is-violet { --c: var(--violet-hi); }

/* Recuadro hundido (código de amigo, valores) */
.inset {
  background: var(--surface-inset); border: 1.5px solid var(--line-soft); border-radius: 18px;
  padding: 14px 16px;
}
.num { font-family: 'Exo 2', sans-serif; font-weight: 800; letter-spacing: .5px; }
.muted { color: var(--muted); }

/* ---------- Páginas legales ---------- */
.doc { width: min(760px, 100% - 32px); margin: 0 auto; padding: 40px 0 64px; }
.doc-head { text-align: center; margin-bottom: 28px; }
.doc-head h1 {
  margin-top: 20px; font-weight: 900; font-size: clamp(30px, 7vw, 44px); line-height: 1.1;
  text-transform: uppercase; font-style: italic; letter-spacing: .5px;
  text-shadow: 0 3px 0 #3a1690, 0 0 24px rgba(155, 92, 255, .6);
}
.doc-head .chip { margin-top: 14px; }
.doc .panel { padding: 28px clamp(18px, 5vw, 40px) 32px; }
.doc p, .doc li { color: #ddd3fa; font-size: 16px; }
.doc p { margin: 10px 0; }
.doc ul { margin: 8px 0 12px; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 22px; margin: 6px 0; }
.doc li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--violet); box-shadow: 0 0 6px var(--violet);
}
.doc strong { color: var(--text); }
.doc h2 {
  display: flex; align-items: center; gap: 14px;
  margin: 34px 0 10px; font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.doc h2:first-of-type { margin-top: 18px; }
.doc h2 .tile { width: 44px; height: 44px; flex: none; border-radius: 6px; }
.doc h2 .tile::before { inset: 5px; border-width: 2.5px; }
.doc h2 .tile::after { inset: 11px; }
.doc h2 .tile > span { font-size: 16px; }
.doc h3 { margin: 18px 0 4px; font-size: 17px; font-weight: 700; color: var(--violet-hi); }
.doc-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.doc-foot .btn { flex: 1 1 200px; max-width: 300px; padding: 0 16px; font-size: 16px; text-align: center; white-space: nowrap; }
.copyright { text-align: center; margin-top: 24px; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}