/* myfree.games - the arcade hall. The photo is the room you walk into; the site's name hangs in it
   as a neon sign; the games stand below as real cabinets (lit marquee, bezel, control deck,
   coloured T-molding), and the one you pick is lit as if a lamp hung over it. Colours are taken
   from the photo: carpet, brick, tungsten amber, sign red and teal, warm cream.
   Type has three jobs: the rounded face is neon, the condensed face is anything printed on a
   cabinet or the page, and the pixel face is only for what appears on a screen or scoreboard. */
@font-face {
  font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/PressStart2P.woff2") format("woff2");
}
:root {
  --carpet: #140d0b;       /* the floor under everything */
  --brick: #3b1f18;        /* the hall's walls */
  --laminate: #0a0807;     /* cabinet black */
  --amber: #ffb24a;        /* the pendant lamps: the one lit thing is your choice */
  --sign-red: #ff4234;
  --sign-teal: #29d6c8;
  --cream: #f2e4c8;
  --cream-dim: #c9b596;
  --pix: "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  --printed: "DIN Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --neon: ui-rounded, "Arial Rounded MT Bold", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  --vp-wide: 1280px;
}
* { box-sizing: border-box; }
html { background: var(--carpet); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; color: var(--cream);
  font: 400 16px/1.5 var(--printed); letter-spacing: 0.01em;
  background: var(--carpet); overflow-x: clip;
}
/* the hall again, far behind the cabinets: blurred and dark, as if the lights were down */
body::before {
  content: ""; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
  background: url("/img/arcade-hall-small.webp") center 40% / cover no-repeat;
  filter: blur(16px) brightness(0.22) saturate(1.2);
}

/* ---------------- the hall: the photo, with the sign hanging in it ---------------- */
.hall {
  position: relative; width: 100%; min-height: clamp(340px, 44vw, 620px);
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(to bottom, #140d0b99 0%, #140d0b00 22%, #140d0b00 50%, #140d0bcc 86%, #140d0ba8 100%),
    url("/img/arcade-hall.webp") center 35% / cover no-repeat;
}
@media (max-width: 767.98px) {
  .hall { background:
    linear-gradient(to bottom, #140d0b99 0%, #140d0b00 22%, #140d0b00 45%, #140d0bcc 86%, #140d0ba8 100%),
    url("/img/arcade-hall-small.webp") center 35% / cover no-repeat; }
}
.led-bar { display: flex; justify-content: space-between; gap: 12px; padding: 16px; }
.led {
  font: 12px/1.4 var(--pix); color: #9dffb0; text-shadow: 0 0 6px #3dff6a99;
  background: #000c; padding: 8px 12px; border-radius: 3px; border: 1px solid #ffffff14;
}
.led.amber { color: var(--amber); text-shadow: 0 0 6px #ffb24a99; }

.sign-wrap { padding: 0 16px clamp(28px, 5vw, 56px); text-align: center; }
/* a neon sign like the ones on the hall's wall: red tube letters in a teal tube frame */
.sign { margin: 0; display: inline-block; }
.tube {
  display: inline-block; padding: 0.16em 0.5em 0.2em;
  font: 700 clamp(40px, 8vw, 104px)/1.1 var(--neon); letter-spacing: 0.01em;
  color: #fff1ea;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--sign-red), 0 0 18px var(--sign-red), 0 0 40px #ff423499, 0 0 80px #ff423455;
  border: 0.06em solid #c9fff9; border-radius: 0.28em;
  box-shadow: 0 0 6px var(--sign-teal), 0 0 18px var(--sign-teal), inset 0 0 6px var(--sign-teal), inset 0 0 22px #29d6c855, 0 0 60px #29d6c833;
  background: #0a0404b3;
  animation: ignite 1.4s linear 0.2s both;
}
/* the one moment of motion: the tubes flicker on when you walk in */
@keyframes ignite {
  0% { opacity: 0.08; } 8% { opacity: 1; } 12% { opacity: 0.15; } 20% { opacity: 0.9; } 24% { opacity: 0.3; }
  34% { opacity: 1; } 38% { opacity: 0.55; } 46%, 100% { opacity: 1; }
}
.tagline {
  margin: 16px auto 0; max-width: 48ch; text-wrap: balance; line-height: 1.4; font-size: clamp(18px, 2.2vw, 24px); color: var(--cream);
  text-shadow: 0 2px 10px #000, 0 0 2px #000;
}

/* ---------------- the floor: a row of cabinets ---------------- */
main { width: 100%; max-width: var(--vp-wide); margin: 0 auto; padding: 8px 16px 32px; }
.floor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin: 0 0 24px; }
.floor-title { margin: 0; font: 400 clamp(24px, 3vw, 32px)/1.2 var(--printed); color: var(--cream); letter-spacing: 0.02em; }
.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.games:focus-visible { outline: 2px solid var(--amber); outline-offset: 8px; border-radius: 6px; }

/* each game's own colour: its marquee light and the T-molding down its sides */
.cab { --c: #9a8a70; }
.cab[data-game="battlezone"] { --c: #4ee06a; }
.cab[data-game="asteroids"] { --c: #8fa4ff; }
.cab[data-game="defender"] { --c: #ff8a2a; }
.cab[data-game="galaga"] { --c: #ff4a4a; }
.cab[data-game="pacman"] { --c: #ffd21a; }
.cab[data-game="gauntlet"] { --c: #d8321e; }
.cab[data-game="joust"] { --c: #ffae1a; }
.cab[data-game="tron"] { --c: #2ea8ff; }
.cab[data-game="tempest"] { --c: #ff4a2e; }
.cab[data-game="wolf"] { --c: #d8322a; }
.cab[data-game="duke"] { --c: #f2b01e; }
.cab[data-game="mspacman"] { --c: #ff7eb6; }
.cab[data-game="starwars"] { --c: #ffc800; }
.cab[data-game="centipede"] { --c: #3ddc4a; }

.cab {
  position: relative; cursor: pointer; outline: none;
  padding: 0 12px 16px; border-radius: 8px 8px 4px 4px;
  background: var(--laminate);
  border-left: 5px solid var(--c); border-right: 5px solid var(--c);
  box-shadow: inset 5px 0 8px -4px #000c, inset -5px 0 8px -4px #000c, 0 18px 24px -12px #000;
  transition: transform 0.15s ease-out;
}
/* a lamp over the chosen cabinet */
.cab::before {
  content: ""; position: absolute; left: -30%; right: -30%; top: -46px; height: 180px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 20%, #ffb24a55, #ffb24a00 70%);
  opacity: 0; transition: opacity 0.2s ease-out;
}
.cab[aria-selected="true"] { transform: translateY(-6px); box-shadow: inset 5px 0 8px -4px #000c, inset -5px 0 8px -4px #000c, 0 0 0 2px var(--amber), 0 22px 36px -10px #000, 0 0 44px #ffb24a44; }
.cab[aria-selected="true"]::before { opacity: 1; }

/* the marquee: a light box with the game's name on it */
.cab-marquee {
  margin: 0 -12px 12px; padding: 16px 8px 12px; border-radius: 6px 6px 0 0; text-align: center;
  font: 700 26px/1.1 var(--printed); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1a0e06; text-shadow: 0 1px 0 #ffffff80;
  background: radial-gradient(ellipse 60% 120% at 50% 50%, color-mix(in srgb, var(--c) 60%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 50%, #000) 100%);
  box-shadow: inset 0 -3px 0 #0008, inset 0 3px 0 #ffffff55;
  filter: brightness(0.78);
}
.cab[aria-selected="true"] .cab-marquee { filter: brightness(1.08); }

/* the screen inside its black bezel */
.screen {
  display: block; width: 100%; aspect-ratio: 4 / 3; background: #000;
  border-radius: 12px / 16px; border: 10px solid #050404;
  box-shadow: 0 0 0 1px #2a2420, inset 0 0 30px #000;
}

/* the control deck: a stick and two buttons */
.deck {
  display: flex; align-items: center; gap: 12px; height: 32px; margin: 12px -4px 0; padding: 0 16px;
  border-radius: 4px; background: linear-gradient(#2a2420, #15110f); box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #000;
}
.stick { flex: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a8a, #d4201a 55%, #6a0a06); box-shadow: 0 5px 0 -2px #111, 0 6px 4px -1px #0009; }
.btn { flex: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 45%, #000)); box-shadow: 0 2px 0 #000; }

.cab-panel { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 16px; color: var(--cream-dim); }
.cab-panel > span:first-child { white-space: nowrap; }
.cab-panel { flex-wrap: wrap; row-gap: 2px; }   /* every card: players on one line, the high score on the next, so all cabinets match */
.cab-panel .hi { font: 12px/1.5 var(--pix); color: var(--amber); text-align: right; flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PRESS START shows on the bottom of the chosen cabinet's screen, as attract-mode text did */
.deck { position: relative; }
.deck .cab-start { position: absolute; left: 0; right: 0; bottom: calc(100% + 20px); pointer-events: none; }
.stick { margin-right: auto; }
.cab-start { margin: 0; white-space: nowrap; font: 12px/1.4 var(--pix); color: var(--amber); text-shadow: 0 0 8px #ffb24a99; text-align: center; visibility: hidden; }
.cab[aria-selected="true"] .cab-start { visibility: visible; animation: blink 0.9s steps(1) infinite; }   /* the arcade attract blink: Todd asked for it back */
@keyframes blink { 50% { opacity: 0; } }

/* a cabinet still being built: dark marquee, no colour on its edges */
.cab.soon { cursor: default; --c: #3a322c; }
.cab.soon .cab-marquee { font-size: 18px; color: #8a7a66; text-shadow: none; filter: none; background: #221c18; }
.cab.soon .cab-start { color: var(--cream-dim); text-shadow: none; }
.cab.soon .cab-panel .hi { color: var(--cream-dim); }

.help { margin: 0; color: var(--cream-dim); font-size: 16px; }
footer { width: 100%; max-width: var(--vp-wide); margin: 0 auto; padding: 16px 16px 40px; color: var(--cream-dim); font-size: 16px; border-top: 1px solid #ffffff14; }
footer p { margin: 0; max-width: 70ch; }
footer .small { margin-top: 8px; font-size: 14px; opacity: 0.85; }
footer a { color: var(--sign-teal); display: inline-block; padding: 10px 4px; margin: -10px 0; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------------- everything on one screen: the hall shrinks to a band and the cabinets
   share what is left, two rows of four (four rows of two on a phone). The screens keep 4:3 inside
   their bezels. Very short windows (a phone on its side) fall back to scrolling. ---------------- */
@media (min-height: 520px) {
  body { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .hall { flex: none; min-height: 0; height: clamp(140px, 26vh, 300px); }
  .led-bar { padding: 12px 16px; }
  .sign-wrap { padding-bottom: clamp(8px, 2vh, 24px); }
  .tube { font-size: clamp(30px, min(7vw, 8.5vh), 96px); }
  .tagline { margin-top: 8px; font-size: clamp(14px, 2vh, 20px); }
  main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 8px 16px; }
  .floor-head { flex: none; margin-bottom: 12px; }
  .floor-title { font-size: clamp(20px, 3vh, 28px); }
  .games { flex: 1 1 0; min-height: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }   /* ten cabinets: two even rows of five */
  .cab { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
  .cab-marquee { flex: none; margin-bottom: 8px; padding: 8px 8px 8px; font-size: clamp(16px, 2.6vh, 24px); }
  .screen { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; object-fit: contain; border-width: 6px; }
  .deck { flex: none; height: 28px; margin-top: 8px; }
  .cab-panel { flex: none; margin-top: 4px; font-size: 14px; line-height: 1.4; }
  .cab.soon .cab-start { flex: none; margin-top: 4px; text-align: center; }
  .cab[aria-selected="true"] { transform: translateY(-4px); }
  footer { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 24px; max-width: none; padding: 8px 16px 12px; font-size: 14px; }
  footer p { max-width: none; }
  footer .small { margin: 0; font-size: 12px; }
}
@media (min-height: 520px) and (min-width: 768px) and (max-width: 1023.98px) {
  .games { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
}
@media (min-height: 520px) and ((max-height: 760px) or (max-width: 1099.98px)) {
  .cab-panel { display: none; }          /* short windows: the tagline on each cabinet makes room for the screen */
}
@media (min-height: 520px) and (max-width: 767.98px) {
  .led-bar { padding: 8px; }
  .led { padding: 4px 8px; }
  .hall { height: clamp(120px, 20vh, 200px); }
  .tagline, .help, footer .small { display: none; }
  main { padding: 4px 12px; }
  .floor-head { margin-bottom: 8px; }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .cab { padding: 0 6px 6px; border-left-width: 3px; border-right-width: 3px; }
  .cab-marquee { margin: 0 -6px 4px; padding: 4px; font-size: 14px; letter-spacing: 0.02em; }
  .screen { border-width: 4px; }
  .deck { height: 24px; margin: 4px 0 0; padding: 0 8px; gap: 4px; }
  .stick { width: 12px; height: 12px; } .btn { width: 10px; height: 10px; }
  .deck .cab-start { bottom: calc(100% + 12px); }
  .cab-panel { display: none; }
  footer { padding: 4px 12px 8px; font-size: 12px; }
}
@media (max-width: 767.98px) {
  .games { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) and (min-height: 520px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .led-bar { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tube, .cab[aria-selected="true"] .cab-start { animation: none; }
  .cab, .cab::before { transition: none; }
}