/* Belboudou Games: 90s title-screen look. One column of "screens" (title, game select, continue). */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #141a3a;      /* CRT background */
  --night-2: #1e2756;    /* raised panels */
  --night-3: #2a3570;    /* bevel light */
  --ink: #f4efe0;        /* text */
  --muted: #a3abd8;      /* secondary text */
  --grenadine: #e8364f;
  --mint: #3fd6a0;
  --lemon: #ffd23f;
  --curacao: #2fa8e6;
  --shadow: #0a0d22;     /* bevel dark */
  --pixel: "Press Start 2P", "Courier New", monospace;
  --term: "VT323", "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--term);
  font-size: 22px;
  line-height: 1.3;
  -webkit-font-smoothing: none;
  -webkit-text-size-adjust: 100%;
}
/* CRT scanlines */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  z-index: 50;
}
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; }
.pix { display: block; }

/* Header */
.top { border-bottom: 4px solid var(--shadow); background: var(--night-2); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--pixel); font-size: 11px; letter-spacing: .04em; }
.brand svg { height: 30px; width: auto; transform: rotate(18deg); }
.brand span { color: var(--mint); }
.nav { display: flex; align-items: center; gap: 16px; font-family: var(--pixel); font-size: 10px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--lemon); }
.nav .links { display: none; gap: 16px; }
.lang { display: flex; border: 2px solid var(--shadow); }
.lang a { padding: 7px 8px; background: var(--night); }
.lang a[aria-current="page"] { background: var(--lemon); color: var(--night); }
.lang a[aria-current="page"]:hover { color: var(--night); }

/* Title screen */
.hero { text-align: center; padding-block: 48px 56px; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.logo { position: relative; width: min(230px, 62vw); aspect-ratio: 1; }
.logo .burst { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo .tubes { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.logo .tubes svg { width: 17%; height: auto; margin: 0 -1%; filter: drop-shadow(3px 3px 0 var(--shadow)); }
.logo .tubes svg:nth-child(1) { transform: rotate(-16deg) translateY(5%); }
.logo .tubes svg:nth-child(2) { transform: translateY(-4%); position: relative; z-index: 1; }
.logo .tubes svg:nth-child(3) { transform: rotate(16deg) translateY(5%); }
.logo .pow {
  position: absolute; right: -6%; top: 4%;
  font-family: var(--pixel); font-size: clamp(10px, 3vw, 13px);
  background: var(--grenadine); color: var(--ink);
  padding: 6px 7px; transform: rotate(12deg);
  border: 3px solid var(--shadow);
  box-shadow: 3px 3px 0 var(--shadow);
}
.wordmark { margin: 0; font-family: var(--pixel); font-weight: 400; line-height: 1.25; text-wrap: balance; }
.wordmark .big {
  display: block; font-size: clamp(26px, 8.4vw, 58px); color: var(--lemon);
  text-shadow: 3px 3px 0 var(--grenadine), 6px 6px 0 var(--shadow);
  letter-spacing: .02em;
}
.wordmark .small {
  display: block; margin-top: 14px; font-size: clamp(13px, 3.6vw, 20px); color: var(--mint);
  letter-spacing: .5em; padding-left: .5em;
  text-shadow: 3px 3px 0 var(--shadow);
}

/* Beveled buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pixel); font-size: 11px; line-height: 1.4; letter-spacing: .04em;
  text-decoration: none; text-transform: uppercase;
  padding: 12px 16px; cursor: pointer;
  color: var(--night); background: var(--lemon);
  border: 3px solid; border-color: #fff3b8 var(--shadow) var(--shadow) #fff3b8;
  box-shadow: 0 0 0 2px var(--shadow);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { border-color: var(--shadow) #fff3b8 #fff3b8 var(--shadow); transform: translate(1px, 1px); }
.btn.mint { background: var(--mint); border-color: #b9f5df var(--shadow) var(--shadow) #b9f5df; }
.btn.mint:active { border-color: var(--shadow) #b9f5df #b9f5df var(--shadow); }
.btn.blue { background: var(--curacao); border-color: #b5e2fb var(--shadow) var(--shadow) #b5e2fb; }
.btn.blue:active { border-color: var(--shadow) #b5e2fb #b5e2fb var(--shadow); }
.btn.off {
  background: var(--night-2); color: var(--muted); cursor: default;
  border-color: var(--night-3) var(--shadow) var(--shadow) var(--night-3);
}
.btn.off:hover { filter: none; }
.btn.off:active { transform: none; border-color: var(--night-3) var(--shadow) var(--shadow) var(--night-3); }
.press { font-size: 13px; padding: 16px 22px; }
.press .caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Screens */
.screen { padding-block: 48px; border-top: 4px solid var(--shadow); }
.screen-head { margin-bottom: 28px; }
.screen-head h2 {
  margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(16px, 4.4vw, 24px);
  color: var(--ink); text-shadow: 3px 3px 0 var(--shadow); text-wrap: balance;
}
.screen-head h2 .arrow { color: var(--grenadine); }

/* Game cards */
.games { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; margin: 0; padding: 0; }
.game {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--night-2);
  border: 3px solid; border-color: var(--night-3) var(--shadow) var(--shadow) var(--night-3);
  box-shadow: 6px 6px 0 var(--shadow);
}
.cover {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 3px solid var(--shadow);
  padding-bottom: 15%; /* the dark title band: 24% of the cover's height, which is 62.5% of its width */
}
.cover .pix { width: 26%; height: auto; position: relative; z-index: 1; filter: drop-shadow(4px 4px 0 rgba(10,13,34,.6)); }
.cover .stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-title {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 1;
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 12px; letter-spacing: .1em; color: var(--ink);
  text-shadow: 2px 2px 0 var(--shadow);
}
.cover.boss { background: linear-gradient(to bottom, #3a0f2a 0 25%, #5a1530 25% 45%, #8a1d3a 45% 62%, #c22a46 62% 76%, #1a0c22 76%); }
.cover.vastum { background: linear-gradient(to bottom, #1a1238 0 30%, #2b1a4a 30% 55%, #3e2258 55% 76%, #120c26 76%); }
.cover.secret { background: linear-gradient(to bottom, #0b0e24 0 30%, #12163a 30% 55%, #1a2050 55% 76%, #080a1c 76%); }
.cover.vastum .pix { width: 34%; }
.game-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; flex: 1; }
.game h3 { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--lemon); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  font-family: var(--pixel); font-size: 8px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 7px; border: 2px solid currentColor; line-height: 1.3;
}
.badge.live { color: var(--mint); }
.badge.store { color: var(--curacao); }
.badge.dev { color: var(--lemon); }
.badge.tag { color: var(--muted); border-style: dashed; }
.badge.secret { color: var(--grenadine); }
.actions { margin-top: auto; padding-top: 6px; display: flex; }
.actions .btn { flex: 1 1 100%; }

/* Continue screen */
.continue { text-align: center; }
.continue .wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.continue h1,
.continue h2 {
  margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(22px, 6vw, 36px);
  color: var(--grenadine); text-shadow: 3px 3px 0 var(--shadow);
}
.continue p { margin: 0; max-width: 40ch; color: var(--muted); }

/* Footer */
.foot { border-top: 4px solid var(--shadow); background: var(--night-2); }
.foot .wrap { padding-block: 18px; font-size: 19px; color: var(--muted); }

@media (min-width: 640px) {
  .nav .links { display: flex; }
  .brand { font-size: 12px; }
}
@media (min-width: 900px) {
  .games { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: 72px 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .press .caret { animation: none; }
}