/* Dunder Bingo – gemensam stil (ljus version) */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2-variations'), url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plexmono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f1ece2;
  --paper-2: #e8e2d5;
  --white: #fffdf8;
  --ink: #0b0b0b;
  --muted: #5f5a52;
  --rule: rgba(11, 11, 11, 0.14);
  --pink: #ff3d9a;
  --cyan: #22c8ec;
  --acid: #e4ff2e;
  --tape: #ffd60a;
  --mint: #3fe0a5;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --mono: 'Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Kondenserad tung display-typografi */
.cond { font-family: var(--display); font-weight: 900; font-stretch: 68%; letter-spacing: -0.01em; line-height: 0.88; text-transform: uppercase; }
.mono { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.label { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Loggan ligger fritt på pappret med en hård skugga */
.logo-block { display: inline-flex; align-items: center; justify-content: center; }
.logo-block img { display: block; height: 100%; width: auto; filter: drop-shadow(3px 3px 0 #0b0b0b); }

/* Varningstejp */
.tape {
  background: var(--tape);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
}
.tape-track { display: inline-block; animation: tape 18s linear infinite; }
.tape-track span { font-family: var(--display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; padding-right: 0.6em; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Pop-dekor */
.deco { position: absolute; pointer-events: none; }
.deco svg { display: block; width: 100%; height: auto; overflow: visible; }
.float { animation: float 6s ease-in-out infinite; }
.float.slow { animation-duration: 9s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}