@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-display: block;
}

:root {
  --yellow: #ffe14d;
  --orange: #ff7a1a;
  --celeste: #7fd3ff;
  --bg: #1a0b2e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #3a1450 0%, var(--bg) 55%, #07030f 100%) fixed;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  -webkit-tap-highlight-color: transparent;
}

.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 2.4vh;
  padding: max(3vh, env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right)) max(3vh, env(safe-area-inset-bottom)) max(4vw, env(safe-area-inset-left));
  text-align: center;
}

.logo canvas { width: min(80vw, 66vh); height: auto; image-rendering: pixelated; display: block; }

.hint { margin: 0; font-size: clamp(10px, 2vh, 14px); color: var(--celeste); text-shadow: 2px 2px 0 #000; }
.tiny { margin: 0; font-size: clamp(6px, 1.1vh, 9px); color: #bbb; line-height: 1.7; }

.editions { display: flex; gap: 3vw; flex-wrap: wrap; justify-content: center; }

.edition {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  width: min(42vw, 60vh, 440px);
  padding: 1.2vh 1.2vh 1.8vh;
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid var(--celeste);
  box-shadow: 6px 6px 0 #000;
  cursor: pointer;
}
.edition canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; display: block; }
.edition .name { font-size: clamp(11px, 2.6vh, 20px); color: var(--yellow); text-shadow: 2px 2px 0 #000; }
.edition .blurb { font-size: clamp(7px, 1.4vh, 10px); color: var(--celeste); line-height: 1.6; }
.edition:hover, .edition:focus-visible { outline: none; border-color: var(--yellow); background: rgba(255, 122, 26, 0.3); }
.edition:hover .name, .edition:focus-visible .name { color: #fff; }

/* until /api/config answers: an open-looking card, no badge, not a link yet */
.edition.pending { pointer-events: none; }
.edition.soon { cursor: default; border-color: #555; }
.edition.soon canvas { filter: grayscale(0.6) brightness(0.6); }
.edition.soon .name { color: #aaa; }
.edition.soon:hover { background: rgba(0, 0, 0, 0.55); }
.badge {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 1vh 1.4vh;
  font-size: clamp(9px, 2vh, 16px);
  color: #1a0b2e;
  background: var(--yellow);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
}
.edition:not(.soon) .badge { display: none; }

@media (orientation: portrait) {
  .edition { width: min(88vw, 440px); }
}