/* The visitors' front page in the site's own look (2.71.0, templates/front.html; owner 31 Oct: "our splash page to look
   like our site, just the logged out version"). The front page's own blocks (the game Admin → Arcade picks, Shop Talk,
   AptoCalc) were made for the old coming-soon page, which had its own colour names: they're pointed at the site
   theme's here, with the frames those blocks need. Everything else is the site's own style. */
.front-page {
  --void: var(--bg-base); --steel: var(--text-main); --amber: var(--accent); --muted: var(--text-muted);
  --panel: var(--bg-panel); --link: var(--accent-bright); --rivet: var(--border-hairline, rgba(127, 127, 127, .25));
  --cold: color-mix(in srgb, var(--bg-panel) 70%, var(--text-main) 30%);
}

/* The game cabinet (Admin → Arcade → the game on the front page) */
.front-page .cabinet { width: 100%; margin: 0 auto; position: relative; }
.front-page .arcade-screen, .front-page .pool-screen { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--rivet); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.front-page .arcade-screen { background: #0b0807; }
.front-page .pool-screen { background: #0b0908; }
.front-page .arcade-screen canvas, .front-page .pool-screen canvas { width: 100%; height: 100%; display: block; }
.front-page .arcade-screen canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.front-page .arcade-screen canvas:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.front-page .howto { margin: 10px auto 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.front-page .howto b { color: var(--steel); }
.front-page .credits { margin: 6px auto 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
.front-page .hall { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 12px auto 0;
  padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); color: var(--steel); font-size: 15px; width: fit-content; max-width: 100%; }
.front-page .hall[hidden] { display: none; }
.front-page .shoptalk { margin: 0 auto; max-width: none; }

/* AptoCalc's keypad in its frame (/aptocalc) */
.sb-apto .sb-title { font-size: 24px; color: var(--amber); margin: 0 0 4px; }
.sb-apto-sub { display: block; font-size: 15px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.sb-apto-how { margin: 0 0 12px; font-size: 16px; color: var(--steel); }
.sb-apto-how b { color: var(--amber); }
.sb-apto-frame { display: block; width: 100%; height: 640px; border: 0; border-radius: 12px; background: transparent; color-scheme: normal; }
.sb-apto-more { margin: 8px 0 0; font-size: 15px; text-align: right; }
.sb-apto-frame.is-over { position: fixed; inset: 0; width: 100vw !important; height: 100% !important; z-index: 10000; border-radius: 0; }
html.apto-over, html.apto-over body { overflow: hidden; }
/* phones: the keypad needs the width more than the panel needs its edges */
@media (max-width: 640px) {
  .front-page .block-panel:has(.sb-apto) { padding-left: 4px; padding-right: 4px; }
  .front-page .block-panel:has(.sb-apto) > .block-content { padding-left: 2px; padding-right: 2px; }
  .sb-apto .sb-title, .sb-apto-how, .sb-apto-more { padding: 0 8px; }
}
/* 2.71.2: the visitors' wider left column (for the sign-in block) is in style.css now, on every page */