/*
 * Spielothek: a video store at night. Neon over the door, shelves of tapes
 * in the dark, 90s carpet — and in the middle the spinner rack with the games.
 */
@font-face {
  font-family: "Monoton";
  src: url("/fonts/monoton-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 500;
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 800;
  font-style: italic;
  src: url("/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  font-weight: 700;
  src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --night: #140c24;
  --night-2: #1f1338;
  --neon-pink: #ff3d9a;
  --neon-cyan: #3ef0ff;
  --sodium: #fff4b8;
  --wire: #c9c6d6;
  --ink: #1b1424;
  --ok: #49f28a;
  --off: #ff5a5a;

  /* Cover size: everything on the rack scales from it */
  --w: clamp(176px, 21vw, 264px);
  --h: calc(var(--w) * 1.5);
  /* Distance of a face from the axis of a three-sided rack: w / (2·tan 60°) */
  --r: calc(var(--w) * 0.2887 + 6px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  color: var(--sodium);
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 0%, rgb(255 61 154 / 0.22), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 18%, rgb(62 240 255 / 0.14), transparent 70%),
    /* Rows of tapes on the shelves, out of focus */
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.035) 0 14px,
      rgb(255 61 154 / 0.05) 14px 16px,
      rgb(255 255 255 / 0.02) 16px 31px,
      rgb(62 240 255 / 0.045) 31px 33px,
      transparent 33px 46px
    ),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 62%);
  background-size: auto, auto, 100% 58%, auto;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

/* 90s carpet on the floor */
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 34vh;
  z-index: -1;
  background-color: #241640;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 61 154 / 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgb(62 240 255 / 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgb(255 244 184 / 0.35) 0 1.5px, transparent 2.5px),
    linear-gradient(180deg, rgb(20 12 36 / 1), rgb(20 12 36 / 0.2));
  background-size: 38px 38px, 52px 52px, 29px 29px, 100% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
}

/* ── Neon sign ─────────────────────────────────────────────────────────── */

.sign-wrap {
  text-align: center;
  padding: max(1.4rem, env(safe-area-inset-top)) 1rem 0;
}

.sign {
  margin: 0;
  font-family: "Monoton", "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #ffd6ea;
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--neon-pink),
    0 0 28px var(--neon-pink),
    0 0 60px rgb(255 61 154 / 0.6);
  animation: power-on 1.6s steps(1, end) both;
}

.sign-o {
  color: #d6fbff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--neon-cyan),
    0 0 28px var(--neon-cyan),
    0 0 60px rgb(62 240 255 / 0.6);
  animation: flicker 2.4s steps(1, end) 0.4s both;
}

.sign-sub {
  margin: 0.4rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: rgb(255 244 184 / 0.7);
}

@keyframes power-on {
  0% { opacity: 0.08; }
  12% { opacity: 1; }
  16% { opacity: 0.2; }
  24% { opacity: 1; }
  28% { opacity: 0.35; }
  34%, 100% { opacity: 1; }
}

@keyframes flicker {
  0% { opacity: 0.1; }
  40% { opacity: 1; }
  46% { opacity: 0.3; }
  52%, 100% { opacity: 1; }
}

/* ── Store layout ──────────────────────────────────────────────────────── */

.store {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.rack-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.rack-sign {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.9rem;
  border-radius: 4px;
  color: var(--ink);
  background: var(--sodium);
  box-shadow: 0 0 18px rgb(255 244 184 / 0.35);
  transform: rotate(-2deg);
}

/* ── The spinner rack ──────────────────────────────────────────────────── */

.scene {
  width: calc(var(--w) * 1.45);
  height: calc(var(--h) + 70px);
  perspective: 1100px;
  perspective-origin: 50% 30%;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.scene.dragging {
  cursor: grabbing;
}

.rack {
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(-7deg) rotateY(0deg);
}

.rack.snapping {
  transition: transform 0.65s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

.pole {
  position: absolute;
  left: 50%;
  top: -42px;
  bottom: -40px;
  width: 8px;
  margin-left: -4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6d6880, #e8e6f0 45%, #8a859c);
  transform: translateZ(0);
}

.cap {
  position: absolute;
  left: 50%;
  width: calc(var(--w) * 1.1);
  height: calc(var(--w) * 1.1);
  margin-left: calc(var(--w) * -0.55);
  border-radius: 50%;
  background: radial-gradient(circle, #3a2f4f 0 30%, #2a2140 60%, #4c4462 61%, #2a2140 66%);
  border: 3px solid var(--wire);
}

.cap-top {
  top: calc(var(--w) * -0.55);
  transform: translateY(-14px) rotateX(90deg);
}

.cap-bottom {
  bottom: calc(var(--w) * -0.55);
  transform: translateY(12px) rotateX(90deg);
  box-shadow: 0 0 60px rgb(255 61 154 / 0.25);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Wire frame of the rack */
  padding: 7px;
  border: 2px solid var(--wire);
  border-radius: 6px;
  background:
    linear-gradient(var(--wire), var(--wire)) 50% 28% / 100% 2px no-repeat,
    linear-gradient(var(--wire), var(--wire)) 50% 72% / 100% 2px no-repeat,
    rgb(255 255 255 / 0.03);
}

.face {
  transform: rotateY(calc(var(--i) * 120deg)) translateZ(var(--r));
}

.box {
  display: block;
  height: 100%;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.55);
  -webkit-user-drag: none;
}

/* ── Covers ────────────────────────────────────────────────────────────── */

.cover {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  padding-left: 14%;
  isolation: isolate;
}

/* Glossy plastic sleeve */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.05) 28%, transparent 40%, transparent 70%, rgb(255 255 255 / 0.09) 100%);
}

.spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 14%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  color: #fff;
  border-right: 1px solid rgb(255 255 255 / 0.15);
}

.spine span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: calc(var(--w) * 0.06);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.title {
  position: relative;
  z-index: 3;
  line-height: 0.9;
}

.tagline {
  position: absolute;
  z-index: 3;
  left: 14%;
  right: 0;
  bottom: 6%;
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--w) * 0.06);
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
}

.sticker {
  position: absolute;
  z-index: 6;
  right: 4%;
  top: 34%;
  padding: 0.35em 0.45em;
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 0.95;
  width: 26%;
  font-weight: 800;
  font-style: italic;
  font-size: calc(var(--w) * 0.058);
  color: var(--ink);
  background: #ffd23d;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.45);
  transform: rotate(12deg);
}

.sticker-new {
  background: var(--neon-pink);
  color: #fff;
  font-size: calc(var(--w) * 0.08);
}

.sticker-violet {
  background: #d9a441;
}

/* Doppelkopf: the walnut table of the game */
.cover-doko {
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 220 180 / 0.12), transparent 65%),
    repeating-linear-gradient(97deg, rgb(0 0 0 / 0.1) 0 2px, transparent 2px 9px, rgb(255 255 255 / 0.03) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #4f3727, #1e140e);
}

.spine-doko,
.cover-doko .spine {
  background: #7a1f24;
}

.doko-cards {
  position: absolute;
  z-index: 2;
  left: 16%;
  right: 2%;
  bottom: 13%;
  width: auto;
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.5));
}

.title-doko {
  padding: 9% 6% 0 8%;
  font-weight: 800;
  font-style: italic;
  font-size: calc(var(--w) * 0.19);
  color: #f3ead9;
  text-shadow: 0 3px 0 #7a1f24, 0 5px 12px rgb(0 0 0 / 0.6);
}

/* Ausgebremst: race track art and the comic racers */
.cover-race {
  background: #1f8a5b url("/covers/track.jpg") center 30% / cover;
}

.cover-race::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.45), transparent 40%, rgb(0 0 0 / 0.55));
}

.spine-race {
  background: #ff8a00;
  color: #111;
}

.checker {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 0;
  top: 0;
  height: 4.5%;
  background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / calc(var(--w) * 0.045) calc(var(--w) * 0.045);
}

.title-race {
  padding: 13% 4% 0 6%;
  font-weight: 800;
  font-style: italic;
  font-size: calc(var(--w) * 0.17);
  text-transform: uppercase;
  color: #ff8a00;
  -webkit-text-stroke: 1.5px #111;
  text-shadow: 3px 3px 0 #111;
  hyphens: manual;
}

.car {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.55));
  -webkit-user-drag: none;
}

.car-front { width: 72%; left: 24%; bottom: 13%; }
.car-mid { width: 50%; left: 46%; bottom: 33%; transform: rotate(-5deg); }
.car-back { width: 40%; left: 18%; bottom: 40%; transform: rotate(4deg); }

/* Molthar: the wardrobe portal and three characters */
.cover-molthar {
  background: #2a1240 url("/covers/portal.jpg") center / cover;
}

.cover-molthar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, rgb(192 77 255 / 0.15), rgb(27 15 46 / 0.75) 80%);
}

.spine-molthar {
  background: #3a1066;
  color: #f1d38a;
}

.title-molthar {
  padding: 9% 4% 0;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: calc(var(--w) * 0.12);
  color: #f1d38a;
  text-shadow: 0 0 10px rgb(192 77 255 / 0.9), 0 2px 2px #000;
}

.title-molthar small {
  display: block;
  font-size: 0.5em;
  margin: 0.15em 0;
}

.char-fan {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 0;
  bottom: 14%;
  height: 46%;
}

.char-fan img {
  position: absolute;
  bottom: 0;
  width: 42%;
  border-radius: 5px;
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.6);
  -webkit-user-drag: none;
}

.char-fan img:nth-child(1) { left: 6%; transform: rotate(-14deg); }
.char-fan img:nth-child(2) { left: 52%; transform: rotate(14deg); }
.char-fan img:nth-child(3) { left: 29%; bottom: 6%; z-index: 1; }

/* ── Controls ──────────────────────────────────────────────────────────── */

.controls {
  position: relative;
  z-index: 2;
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.spin {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--neon-cyan);
  background: transparent;
  color: var(--neon-cyan);
  font: 700 1.6rem/1 "Barlow Condensed", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 10px rgb(62 240 255 / 0.35), inset 0 0 8px rgb(62 240 255 / 0.25);
}

.spin:hover {
  background: rgb(62 240 255 / 0.12);
}

.dots {
  display: flex;
  gap: 0.6rem;
}

.dot {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgb(255 244 184 / 0.6);
  background: transparent;
  cursor: pointer;
}

.dot[aria-selected="true"] {
  background: var(--sodium);
  box-shadow: 0 0 10px rgb(255 244 184 / 0.7);
}

/* ── Shelf talker: what the front game is about ────────────────────────── */

.talker {
  position: relative;
  max-width: 26rem;
  padding: 1.4rem 1.5rem 1.3rem;
  color: var(--ink);
  background: var(--sodium);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5), 0 0 50px rgb(255 244 184 / 0.12);
  transform: rotate(1.2deg);
}

/* Tape holding the card */
.talker::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 90px;
  height: 24px;
  margin-left: -45px;
  background: rgb(255 255 255 / 0.45);
  transform: rotate(-3deg);
}

.talker-genre {
  font-weight: 700;
  font-size: 1.05rem;
  color: #8a2a5e;
}

.talker-title {
  margin: 0.1rem 0 0.4rem;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 0.95;
}

.talker-text {
  margin: 0 0 0.9rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem;
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
}

.facts dt {
  color: rgb(27 20 36 / 0.6);
}

.facts dd {
  margin: 0;
  font-weight: 700;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.lamp {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #9a948a;
}

.status.online .lamp {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.status.offline .lamp {
  background: var(--off);
  box-shadow: 0 0 8px var(--off);
}

.cta {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-style: italic;
  font-size: 1.5rem;
  color: #fff;
  background: var(--neon-pink);
  box-shadow: 0 4px 0 #a01a5c, 0 0 24px rgb(255 61 154 / 0.55);
  transition: transform 0.08s;
}

.cta:hover {
  filter: brightness(1.08);
}

.cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #a01a5c, 0 0 24px rgb(255 61 154 / 0.55);
}

.hint {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  color: rgb(27 20 36 / 0.55);
}

.foot {
  padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.95rem;
  color: rgb(255 244 184 / 0.35);
}

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  :root {
    --w: min(46vw, 210px);
  }

  .store {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding-top: 0.4rem;
  }

  .talker {
    margin: 0 auto;
    transform: none;
    width: 100%;
  }

  .hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sign,
  .sign-o {
    animation: none;
  }

  .rack.snapping {
    transition: none;
  }
}