@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');

:root {
  --night: #24123d;
  --night-2: #33195a;
  --night-3: #45246f;
  --ink: #160a28;
  --paper: #fff4df;
  --paper-dim: #cbb9e6;
  --marquee: #ffcf3d;
  --coral: #ff6b5b;
  --mint: #3fd1a8;
  --sky: #5aa9ff;
  --font: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --hard: 0.18em 0.18em 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Dekalrubriken: det enda "högljudda" elementet. Tjock text med hård skugga. */
.sticker {
  display: inline-block;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--marquee);
  text-shadow: 0.06em 0.06em 0 var(--ink);
  transform: rotate(-2deg);
}

.dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  flex: none;
}

button { font-family: inherit; }

:focus-visible { outline: 3px solid var(--marquee); outline-offset: 3px; }

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

/* Tröjor (Tröjkriget) */
.shirt { position: relative; width: 100%; aspect-ratio: 200 / 210; container-type: inline-size; }
.shirt-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0.3rem 0.3rem 0 var(--ink)); }
.shirt-img { position: absolute; left: 30%; top: 18%; width: 40%; aspect-ratio: 1; object-fit: contain; }
.shirt-slogan {
  position: absolute; left: 23%; right: 23%; top: 66%; bottom: 5%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em;
  font-size: 8cqw; overflow-wrap: anywhere; overflow: hidden;
}

/* Namnet: "Stöffes" litet ovanför, "Vol. 1" som en lapp */
.sticker.brand { display: inline-flex; flex-direction: column; align-items: flex-start; }
.sticker .brand-small { font-size: 0.42em; margin-bottom: 0.04em; margin-left: 0.08em; }
.sticker .vol {
  align-self: flex-end; margin-top: -0.1em; margin-right: -0.2em;
  font-size: 0.26em; letter-spacing: 0.04em; text-shadow: none;
  background: var(--coral); color: var(--ink); padding: 0.18em 0.55em 0.22em; border-radius: 0.4em;
  box-shadow: 0.12em 0.12em 0 var(--ink); transform: rotate(4deg);
}

/* Kort mot mänskligheten */
.bcard {
  background: #0d0618; color: #fff; border-radius: 0.9em; padding: 1.1em 1.2em 0.9em;
  box-shadow: 0.25em 0.25em 0 var(--marquee); border: 2px solid #3a2a55;
  display: flex; flex-direction: column; gap: 1em; text-align: left;
}
.bcard p { margin: 0; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
.bcard .blank { display: inline-block; min-width: 4.5em; border-bottom: 0.12em solid #fff; margin: 0 0.15em; }
.bcard .fill { background: var(--marquee); color: var(--ink); border-radius: 0.25em; padding: 0 0.25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bcard-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.55em; font-weight: 600; color: #b9a8d6; }
.bcard-foot .pick { background: #fff; color: #0d0618; border-radius: 99px; padding: 0.15em 0.7em; font-weight: 800; }
.wcard {
  background: #fffdf8; color: var(--ink); border-radius: 0.8em; padding: 0.9em 1em;
  box-shadow: 0.2em 0.2em 0 var(--ink); border: 2px solid #e6dcc8; text-align: left;
}
.wcard p { margin: 0; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }