:root {
  --navy: #0b1f4d;
  --blue: #17408b;
  --orange: #f2690d;
  --orange-lt: #ffb25b;
  --ink: #fff4e5;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--orange-lt); }

/* ---------- Reproductor ---------- */
body.player { background: #000; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; }

#splash {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center; background: var(--navy);
}
#splash .cart { width: 72px; height: auto; image-rendering: pixelated; animation: bob 1.6s steps(4) infinite; }
#splash h1 { margin: 8px 0 0; font: 700 22px/1.2 var(--mono); letter-spacing: .04em; color: var(--orange-lt); text-transform: uppercase; }
#splash p { margin: 0; max-width: 28ch; color: var(--ink); opacity: .9; }
#splash #splash-detail { max-width: 36ch; margin-top: 6px; font: 12px/1.4 var(--mono); opacity: .6; word-break: break-word; }
#splash .home { margin-top: 18px; font-size: 14px; opacity: .8; }
#splash.error h1 { color: #ffb4a8; }
#splash.error .cart { animation: none; filter: grayscale(1); opacity: .7; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #splash .cart { animation: none; } }

#hud {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); z-index: 950;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(11, 31, 77, .72); color: var(--orange-lt); font-size: 15px; line-height: 34px; text-align: center; cursor: pointer;
  backdrop-filter: blur(4px);
}
#hud[data-state="saving"] { animation: pulse 1s ease-in-out infinite; }
#hud[data-state="offline"], #hud[data-state="conflict"] { color: #ffd27a; }
@keyframes pulse { 50% { opacity: .45; } }

#modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0, 0, 0, .72);
}
#modal .box { max-width: 340px; width: 100%; padding: 20px; border-radius: 14px; background: var(--navy); border: 2px solid var(--orange); }
#modal p { margin: 0 0 16px; }
#modal .buttons { display: flex; flex-direction: column; gap: 10px; }
#modal button {
  min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--orange);
  background: var(--blue); color: var(--ink); font: 600 15px system-ui, sans-serif; cursor: pointer;
}
#modal button:first-child { background: var(--orange); color: var(--navy); }

/* ---------- Página de inicio ---------- */
body.site { min-height: 100%; }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.hero { text-align: center; padding: 40px 0 24px; }
.hero .cart { width: 88px; height: auto; margin-bottom: 8px; }
.hero h1 { margin: 0 0 8px; font: 700 clamp(28px, 7vw, 40px)/1.1 var(--mono); letter-spacing: .03em; color: var(--orange-lt); text-transform: uppercase; }
.hero p { margin: 0 auto 24px; max-width: 34ch; font-size: 18px; }
.btn {
  display: inline-block; min-height: 48px; padding: 12px 22px; border-radius: 12px;
  background: var(--orange); color: var(--navy); font: 700 16px var(--mono); text-decoration: none; letter-spacing: .04em;
  border: 2px solid var(--orange-lt);
}
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.steps { display: grid; gap: 12px; margin: 32px 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; padding: 14px 16px 14px 56px; position: relative; background: var(--blue); border-radius: 12px; }
.steps li::before {
  content: counter(s); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 8px;
  background: var(--navy); color: var(--orange-lt); font: 700 16px/30px var(--mono); text-align: center;
}
.steps b { display: block; color: var(--orange-lt); }
footer { margin-top: 40px; font-size: 14px; opacity: .8; text-align: center; }
footer a { margin: 0 8px; }
.doc h1, .doc h2 { font-family: var(--mono); color: var(--orange-lt); }
.doc h1 { font-size: 26px; }
.doc h2 { font-size: 18px; margin-top: 28px; }
.doc li { margin: 6px 0; }