:root {
  /* NO SIGNAL — ver src/theme.js */
  --bg: #0b0b0b; --ink: #f2f0ea; --acc: #d4ff00; --acc2: #ff2a1f; --acc3: #8a8a8a; --muted: #1f1f1f;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; touch-action: none; cursor: crosshair; }

.ui {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  font: 11px/1.3 var(--font-mono);
  color: var(--ink); mix-blend-mode: difference;
  text-transform: uppercase; letter-spacing: .06em;
}
.ui > * { position: absolute; }
.meta { top: max(16px, env(safe-area-inset-top)); left: 16px; }
.nav { top: 12px; right: 16px; display: flex; gap: 6px; pointer-events: auto; }
.nav a { color: inherit; text-decoration: none; border: 1px solid currentColor; padding: 4px 8px; }
.nav a.home { border-color: transparent; }
.nav a.on, .nav a:hover { background: var(--ink); color: var(--bg); }
.help { bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; right: 16px; }
@media (max-width: 700px) {
  .ui { font-size: 9px; }
  .meta { left: 12px; }
  .nav { right: 8px; gap: 4px; }
  .nav a { padding: 8px 9px; }
  .help { left: 12px; right: 12px; bottom: 10px; }
  .flash small { font-size: 10px; letter-spacing: .2em; }
}
.flash {
  top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100vw - 32px); text-align: center;
  opacity: 0; transition: opacity .45s; text-transform: uppercase;
}
.flash b {
  display: block; font: clamp(64px, 17vw, 300px)/.82 var(--font-display); color: var(--acc); letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.flash small { display: block; margin-top: 14px; font: 13px var(--font-mono); letter-spacing: .3em; }
.flash.pop b { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.6) skewX(-12deg); } }

.enter {
  position: fixed; inset: 0; z-index: 3; display: grid; place-items: center;
  background: var(--bg); cursor: pointer; padding: 16px; box-sizing: border-box;
}
.enter button {
  all: unset; cursor: pointer; color: var(--ink); text-align: center; max-width: 11ch;
  font: clamp(36px, 10vw, 150px)/.86 var(--font-display); letter-spacing: -.03em;
}
.enter small {
  display: block; margin-top: 28px; letter-spacing: .25em;
  font: 12px var(--font-mono); color: var(--acc); animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ?shot: captura para compartir (1200×630). Solo la escena y la tarjeta. */
body.shot > :not(canvas):not(.shotcard):not(.ui), body.shot .ui > :not(.flash) { display: none !important; }
body.shot::before { content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(20deg, rgba(11, 11, 11, .92) 18%, rgba(11, 11, 11, 0) 58%); }
.shotcard {
  position: fixed; left: 56px; bottom: 48px; z-index: 4; color: var(--ink);
  font: 14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.shotcard b { display: block; font: 132px/.85 var(--font-display); letter-spacing: -.04em; margin: 14px 0 18px; }
.shotcard small:first-child { color: var(--acc); }
/* titular del golpe en la captura: igual que en la demo (mezcla incluida), solo más arriba para
   que se vea la madera abriéndose debajo */
body.shot .flash { top: 30%; }