/*
  home.css - how the Arcade home page (www.mcc.place) looks.

  CONTENTS
    1. Lettering        the two typefaces
    2. Colours          night (the default) and day
    3. Basics           the page, links, buttons, focus rings
    4. The masthead     the top bar, the street picture and its neon sign
    5. The welcome      the lines under the picture and PRESS START
    6. The cabinets     one per game: marquee, screen, panel
    7. Coming soon      the empty cabinets
    8. The perks        "How the arcade works"
    9. Page not found   the GAME OVER page
   10. Less motion      for visitors who ask their device for it

  Written phone-first: the plain rules are for a narrow screen, and the
  @media blocks widen things. The addresses of pictures and typefaces are
  swapped for the built files' names by scripts/build_home.py, which also
  writes the line marked SIGN from the picture's own measurements.
*/

/* 1. LETTERING ------------------------------------------------------------ */

/* Atkinson Hyperlegible Next: body text and every number. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-latin-wght.18b2a1a39a.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
/* Bricolage Grotesque: headings, buttons and labels. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght.a97804dc9f.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* 2. COLOURS -------------------------------------------------------------- */

/* Where the sign sits on the street picture (from src-home/art/home_art.py). */
:root { --sign-x: 189; --sign-y: 31; --sign-w: 261; --scene-w: 640; --scene-h: 200; }

:root {
  --cyan: #3EE8FF;
  --pink: #FF4FD8;
  --yellow: #FFD23F;
  --green: #4EBC61;
  --ink: #17141F;

  /* Night: the neon arcade. */
  --page: #0E0B24;
  --page-raised: #17122E;
  --text: #F7F3FF;
  --muted: #C4BEE2;
  --link: #8FDDF5;
  --focus: #FFD23F;
  --rule: #3A3270;
  --lead-one: #3EE8FF;
  --lead-two: #FFD23F;
  --bar: #07061C;
  --bar-text: #F7F3FF;
  --road: #212244;
  --road-line: #C8A040;
  --ground: #47486D;
  --sky: url("../img/sky-night-8x.1ae0008fe1.png");
  --street: url("../img/street-night-4x.b5bb4909a1.png");
  --drift: url("../img/stars-8x.3fe6fd9882.png");
  --drift-w: 320;
  --drift-h: 160;
  --drift-time: 240s;
}

/* Day: the same street in sunshine. home/js/theme.js sets data-theme. */
:root[data-theme="day"] {
  --page: #FFF6E4;
  --page-raised: #FFFFFF;
  --text: #17141F;
  --muted: #4A4458;
  --link: #0A5F7D;
  --focus: #0A5F7D;
  --rule: #E0CFA8;
  --lead-one: #0A5F7D;
  --lead-two: #B3261E;
  --bar: #17122E;        /* the top bar stays dark, like a cabinet's own display */
  --bar-text: #FFFFFF;
  --road: #4A4854;
  --road-line: #F4E8B0;
  --ground: #B9B2A4;
  --sky: url("../img/sky-day-8x.4010276fd7.png");
  --street: url("../img/street-day-4x.b609789e8d.png");
  --drift: url("../img/clouds-8x.4eb3d71d0f.png");
  --drift-w: 480;
  --drift-h: 100;
  --drift-time: 300s;
}

/*
  SHARP ON EVERY SCREEN. The street picture fills the width of the screen,
  and comes 2560, 3840 and 5120 pixels wide. What counts is how many real
  pixels the screen has across: its width times its sharpness ("dppx": 1
  on an ordinary monitor, 2 on a high-density one). Up to 2560 the first
  is enough; up to 3840 (a 4K monitor) the second; beyond that the third.
*/
@media (min-width: 2561px),
       (min-width: 1708px) and (min-resolution: 1.5dppx),
       (min-width: 1281px) and (min-resolution: 2dppx),
       (min-width: 854px) and (min-resolution: 3dppx),
       (min-resolution: 3.1dppx) {
  :root { --street: url("../img/street-night-6x.35393a3252.png"); }
  :root[data-theme="day"] { --street: url("../img/street-day-6x.d3f7fd03da.png"); }
}
@media (min-width: 3841px),
       (min-width: 2561px) and (min-resolution: 1.5dppx),
       (min-width: 1921px) and (min-resolution: 2dppx),
       (min-width: 1281px) and (min-resolution: 3dppx) {
  :root { --street: url("../img/street-night-8x.6ba51df9a2.png"); }
  :root[data-theme="day"] { --street: url("../img/street-day-8x.0c32ad4f23.png"); }
}
/* Wider still than the largest picture: enlarge it as sharp squares, not a blur. */
@media (min-width: 5121px) { .hero__street, .hero__sign img { image-rendering: pixelated; } }

/* Pictures that belong to one theme only. */
:root[data-theme="day"] .only-night,
:root:not([data-theme="day"]) .only-day { display: none; }

/* 3. BASICS --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/*
  BIG SCREENS. Every size in this file is in rem, so the whole page is
  one size on screens up to 1920 pixels wide and then grows in step with
  the screen: at 2560 wide (1440p) everything is a third larger, at 3840
  wide (4K) twice the size. So a cabinet takes the same share of a 4K
  monitor as of a 1080p one, instead of sitting small in the middle.
  (0.8334vw is 16px at 1920 wide.)
*/
html {
  font-size: clamp(100%, 0.8334vw, 250%);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 1em; }
img { max-width: 100%; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.125rem; }

:focus-visible { outline: 0.1875rem solid var(--focus); outline-offset: 0.1875rem; border-radius: 0.25rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The first thing a keyboard reaches: jump past the picture to the games. */
.skip {
  position: absolute;
  left: 0.5rem; top: -5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  border-radius: 0.375rem;
}
.skip:focus { top: 0.5rem; }

/* The big arcade button. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.625rem 1.75rem;
  border: 0.1875rem solid var(--ink);
  border-radius: 0.875rem;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0.375rem 0 #9A6A00, 0 0.375rem 0 0.1875rem var(--ink);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  cursor: pointer;
}
.button:hover { background: #FFE27A; }
.button:active { transform: translateY(0.25rem); box-shadow: 0 0.125rem 0 #9A6A00, 0 0.125rem 0 0.1875rem var(--ink); }

/* 4. THE MASTHEAD --------------------------------------------------------- */

/* The top bar: the credit counter and the day and night switch. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--bar);
  color: var(--bar-text);
}

.credit {
  margin: 0;
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.credit__count { font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-weight: 700; color: var(--yellow); }
.credit.is-bumped .credit__count { animation: bump 300ms ease-out; }
@keyframes bump { 50% { transform: translateY(-0.25rem); } }
.credit__count { display: inline-block; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.875rem 0.25rem 0.625rem;
  border: 0.125rem solid currentColor;
  border-radius: 62.4375rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.switch:hover { background: rgba(255, 255, 255, 0.14); }
.switch[hidden] { display: none; }
.switch__icon { width: 1.5rem; height: 1.5rem; image-rendering: pixelated; }

/*
  The picture. Everything in it is measured in "u": one drawn pixel of the
  street picture (640 x 200 of them), however big the picture is shown.
    - On a wide screen the picture fills the width (its height is the
      width divided by 3.2).
    - On a narrow screen it is 16.25rem high and its sides are cropped, but
      never so much that the sign is cut (the 69vw limit).
*/
.hero {
  --hero-h: max(31.25vw, min(260px, 69vw));
  --u: calc(var(--hero-h) / 200);
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--ground);
}
.hero__sky {
  position: absolute;
  inset: 0;
  background: var(--sky) repeat-x;
  background-size: auto 100%;
}
/* Stars by night, clouds by day: one sheet repeated sideways and slid
   slowly left by exactly its own width, so the loop has no join. */
.hero__drift {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% + var(--u) * var(--drift-w));
  height: calc(var(--u) * var(--drift-h));
  background: var(--drift) repeat-x;
  background-size: calc(var(--u) * var(--drift-w)) 100%;
  animation: drift var(--drift-time) linear infinite;
}
@keyframes drift { to { transform: translateX(calc(var(--u) * var(--drift-w) * -1)); } }

.hero__street {
  position: absolute;
  bottom: 0; left: 50%;
  width: calc(var(--u) * var(--scene-w));
  height: 100%;
  transform: translateX(-50%);
  background: var(--street) center / 100% 100% no-repeat;
}
/* The neon sign is the page's main heading, laid over the sign board. */
.hero__sign {
  position: absolute;
  left: calc(50% + var(--u) * (var(--sign-x) - var(--scene-w) / 2));
  top: calc(var(--u) * var(--sign-y));
  width: calc(var(--u) * var(--sign-w));
  margin: 0;
  line-height: 0;
  animation: hum 5s ease-in-out infinite;
}
.hero__sign img { display: block; width: 100%; height: auto; }
/* A neon tube's slow hum: a small, gentle change of brightness. */
@keyframes hum { 50% { opacity: 0.9; } }

/* The road in front of the arcade. */
.road {
  height: 1.375rem;
  background:
    repeating-linear-gradient(90deg, var(--road-line) 0 1.875rem, transparent 1.875rem 3.75rem) center / 100% 0.25rem no-repeat,
    var(--road);
}

/* 5. THE WELCOME ---------------------------------------------------------- */

.welcome {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 0.75rem;
  text-align: center;
}
.welcome__lead {
  margin: 0 0 0.75rem;
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: clamp(1.9rem, 6.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--lead-one);
}
.welcome__nowrap { white-space: nowrap; color: var(--lead-two); }
.welcome__text { max-width: 34em; margin: 0 auto 1.375rem; color: var(--muted); font-size: 1.125rem; }
.button--start { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon {
  50% { box-shadow: 0 0.375rem 0 #9A6A00, 0 0.375rem 0 0.1875rem var(--ink), 0 0 1.625rem 0.25rem rgba(255, 210, 63, 0.45); }
}

/* 6. THE CABINETS --------------------------------------------------------- */

.games {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 1.25rem;
  scroll-margin-top: 0.5rem;
}
.games:focus { outline: none; }
.games__title {
  margin: 0 0 1.375rem;
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
}
.games__title::before, .games__title::after { content: "\2605"; color: var(--pink); font-size: 0.7em; margin: 0 0.6em; vertical-align: 0.15em; }

.shelf {
  display: grid;
  gap: 1.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  A cabinet. Cabinets are dark in both themes, like the real thing, so the
  words on them are always light. --trim is the cabinet's own colour, set
  for each game by the build from games.json.
*/
.cab {
  --trim: #FFD23F;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0.25rem solid var(--trim);
  border-radius: 1.25rem 1.25rem 0.75rem 0.75rem;
  background: #1F1A40;
  color: #F7F3FF;
  box-shadow: 0 0 0 0.25rem #0A0719, 0 0.75rem 0 0 rgba(10, 7, 25, 0.35);
  overflow: hidden;
}

/* The marquee: the game's title, lit from behind. */
.cab__marquee {
  padding: 0.875rem 1rem 0.75rem;
  background: linear-gradient(#FFFFFF66, #FFFFFF00 45%), var(--trim);
  border-bottom: 0.25rem solid #0A0719;
  text-align: center;
  box-shadow: inset 0 0 0 0.1875rem rgba(255, 255, 255, 0.45);
}
.cab__title {
  color: var(--ink);
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The screen's surround, and the screen: a real screenshot under the title. */
.cab__bezel { padding: 0.875rem 0.875rem 0.5rem; background: #0A0719; }
.cab__screen { display: grid; }
.shot {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.shot.is-on { opacity: 1; visibility: visible; transition: opacity 700ms ease, visibility 0s; }
.shot__glass {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  background: #000000;
  overflow: hidden;
  box-shadow: 0 0 0 0.1875rem #2A2457, 0 0 1.375rem rgba(62, 232, 255, 0.18);
}
.shot__glass img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A little of the old tube: faint scanlines, darker corners, a glint. */
.shot__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.34) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 0.1875rem, rgba(0, 0, 0, 0.10) 0.1875rem 0.25rem);
}
.shot__caption {
  padding: 0.5rem 0.25rem 0;
  color: var(--trim);
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Pause and Next for the changing screenshots (shown by home.js). */
.cab__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding-top: 0.375rem;
}
.cab__controls[hidden] { display: none; }
.cab__count { margin: 0; min-width: 3.2em; color: #C4BEE2; font-size: 0.9375rem; text-align: center; }
.chip-button {
  min-width: 5.25rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.875rem;
  border: 0.125rem solid #4B4388;
  border-radius: 62.4375rem;
  background: #1F1A40;
  color: #F7F3FF;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.chip-button:hover { border-color: var(--trim); }
.chip-button:focus-visible, .cab .button:focus-visible, .cab a:focus-visible { outline-color: #FFFFFF; }

/* The control panel: what the game is, and PLAY. */
.cab__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.25rem 1.375rem;
  border-top: 0.25rem solid #0A0719;
  background: linear-gradient(#2A2457, #1F1A40 60%);
}
.cab__pitch { margin: 0 0 0.875rem; font-size: 1.125rem; }
.cab__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.125rem;
  padding: 0;
  list-style: none;
}
.cab__facts li {
  padding: 0.1875rem 0.75rem;
  border: 0.125rem solid #4B4388;
  border-radius: 62.4375rem;
  color: #E4DFFA;
  font-size: 0.9375rem;
}
.cab__status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 0.125rem solid var(--pink);
  border-radius: 0.625rem;
  background: #2A1440;
  font-size: 1rem;
}
.cab__status[hidden] { display: none; }
.cab__status strong {
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  color: #FF9CEA;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cab__go { margin: auto 0 0.75rem; }
.button--play { width: 100%; font-size: 1.75rem; min-height: 4rem; }
.cab__credit { margin: 0; color: #C4BEE2; font-size: 0.9375rem; text-align: center; }

/* 7. COMING SOON ---------------------------------------------------------- */

.cab--soon { --trim: #4B4388; }
.cab--soon .cab__marquee { background: #2A2457; box-shadow: inset 0 0 0 0.1875rem rgba(255, 255, 255, 0.08); }
.cab--soon .cab__title { color: #C4BEE2; font-size: clamp(1.3rem, 4.5vw, 1.75rem); }
.cab__snow {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  background: #1A1830 url("../img/static-8x.8a0c518057.png") center / cover;
  box-shadow: 0 0 0 0.1875rem #2A2457;
  overflow: hidden;
}
.cab__insert {
  margin: 0;
  padding: 0.375rem 0.875rem;
  background: rgba(10, 7, 25, 0.82);
  border-radius: 0.375rem;
  color: #F7F3FF;
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: wait 3s ease-in-out infinite;
}
@keyframes wait { 50% { opacity: 0.55; } }
.cab--soon .cab__bezel { padding-bottom: 0.875rem; }
.cab--soon .cab__pitch { margin: 0; color: #C4BEE2; text-align: center; }

/* Wider screens: two cabinets to a row. A lone game takes the whole first
   row, large, with the empty cabinets side by side under it. */
@media (min-width: 720px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf--solo .shelf__slot--game { grid-column: 1 / -1; justify-self: center; width: min(100%, 53.75rem); }
  .shelf__slot--alone { grid-column: 1 / -1; justify-self: center; width: min(100%, 32rem); }
  .cab__panel { padding: 1.25rem 1.75rem 1.625rem; }
  .cab__bezel { padding: 1.125rem 1.125rem 0.625rem; }
  .button--play { width: auto; min-width: 17.5rem; align-self: center; }
  .cab__go { text-align: center; }
}

/* 8. THE PERKS ------------------------------------------------------------ */

.perks {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 2.25rem 1rem 3.5rem;
}
.perks__title { margin: 0 0 1.25rem; text-align: center; font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.perks__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.perk {
  padding: 1.125rem 1.125rem 0.375rem;
  border: 0.125rem solid var(--rule);
  border-radius: 0.875rem;
  background: var(--page-raised);
}
.perk__icon { display: block; width: 3rem; height: 3rem; margin-bottom: 0.625rem; image-rendering: pixelated; }
.perk__name { margin: 0 0 0.375rem; font-size: 1.3rem; }
.perk p { color: var(--muted); }
@media (min-width: 560px) { .perks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .perks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 9. PAGE NOT FOUND ------------------------------------------------------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
  background: var(--sky) repeat-x var(--page);
  background-size: auto 100%;
}
.lost__box {
  width: min(100%, 35rem);
  padding: 1.75rem 1.5rem 1.875rem;
  border: 0.25rem solid var(--yellow);
  border-radius: 1.125rem;
  background: #1F1A40;
  color: #F7F3FF;
  text-align: center;
  box-shadow: 0 0 0 0.25rem #0A0719, 0 0.75rem 0 0 rgba(10, 7, 25, 0.35);
}
.lost__code { margin: 0; color: #C4BEE2; font-weight: 700; letter-spacing: 0.3em; }
.lost__title {
  margin: 0.25rem 0 0.875rem;
  color: var(--pink);
  font-size: clamp(2.4rem, 11vw, 4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 1.125rem rgba(255, 79, 216, 0.55);
}
.lost__text { color: #E4DFFA; }
.lost__continue {
  margin: 0 0 1rem;
  color: var(--yellow);
  font-family: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: wait 2.4s ease-in-out infinite;
}
.lost a:focus-visible { outline-color: #FFFFFF; }

/* 10. LESS MOTION --------------------------------------------------------- */

/* For visitors whose device asks for reduced motion: nothing drifts, hums,
   pulses or fades, and jumping to the games is instant. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Each game's cabinet colour (from src-home/data/games.json). */
.cab--stair-dash { --trim: #FFD23F; }