/* Breakpoint website. Colours are the game's PAL (src/core/palette.js) and keep
   their meanings: blue = you, red = enemy, gold = rewards and the main action.
   --u is one game UI pixel on screen. */
:root {
  --bg0: #070a14;
  --bg1: #0c1220;
  --panel: #0a0e18;
  --border: #2a3454;
  --border-b: #4a5a80;
  --white: #f4efd8;
  --dim: #96a0b4;
  --you: #58c8f0;
  --danger: #ff5858;
  --gold: #f0c848;
  --gold-lo: #806818;
  --gold-mid: #5a4a14;
  --u: 3px;
  color-scheme: dark;
}
@media (max-width: 599px) { :root { --u: 2px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg0); }
body {
  min-height: 100vh;
  background: var(--bg0);
  color: var(--white);
  font: 16px/1.4 system-ui, sans-serif;
  overflow-x: hidden;
}
img, video, canvas { display: block; }

/* pixel text: real words for readers, canvas for eyes */
px-text { display: inline-block; line-height: 0; vertical-align: middle; }
px-text canvas { image-rendering: pixelated; }
.px-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* the game's recessed panel: dark fill, border, brighter corner ticks */
.panel, .stage, .screen {
  background:
    linear-gradient(var(--border-b), var(--border-b)) top left / calc(var(--u) * 2) calc(var(--u) * 2) no-repeat,
    linear-gradient(var(--border-b), var(--border-b)) top right / calc(var(--u) * 2) calc(var(--u) * 2) no-repeat,
    linear-gradient(var(--border-b), var(--border-b)) bottom left / calc(var(--u) * 2) calc(var(--u) * 2) no-repeat,
    linear-gradient(var(--border-b), var(--border-b)) bottom right / calc(var(--u) * 2) calc(var(--u) * 2) no-repeat,
    var(--panel);
  border: var(--u) solid var(--border);
}

/* ---------- arcade score bar ---------- */
.hud {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 4);
  max-width: 1100px; margin: 0 auto;
  padding: calc(var(--u) * 5) 16px;
}
.hud-item { display: flex; align-items: center; gap: calc(var(--u) * 3); }
@media (max-width: 599px) {
  .hud { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; row-gap: 10px; }
  .hud-item:first-child { display: none; }
}

main, footer { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100vh - 120px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 10);
  text-align: center;
  padding: calc(var(--u) * 10) 0 calc(var(--u) * 20);
}
.logo { width: 688px; height: auto; max-width: 100%; image-rendering: pixelated; }
@media (max-width: 760px) { .logo { width: 344px; } }

/* a keycap: the face stands on a wall and sinks onto it when pressed (widgets.js drawButton) */
.key {
  --wall: calc(var(--u) * 3);
  display: inline-flex; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  border: var(--u) solid var(--gold);
  background: repeating-linear-gradient(-45deg, var(--gold-mid) 0 calc(var(--u) * 6), #6a5818 0 calc(var(--u) * 12));
  box-shadow: 0 var(--wall) 0 var(--gold-lo);
  text-decoration: none;
  transform: translateY(0);
}
.key:hover { background: repeating-linear-gradient(-45deg, #7a6420 0 calc(var(--u) * 6), #8a7428 0 calc(var(--u) * 12)); transform: translateY(calc(var(--u) * -1)); box-shadow: 0 calc(var(--wall) + var(--u)) 0 var(--gold-lo); }
.key:active { transform: translateY(calc(var(--u) * 2)); box-shadow: 0 var(--u) 0 var(--gold-lo); }
.key:focus-visible { outline: calc(var(--u) * 2) solid var(--white); outline-offset: calc(var(--u) * 2); }
/* the game's play triangle, 4x7 pixels */
.tri {
  width: calc(var(--u) * 8); height: calc(var(--u) * 14); background: #ffffff;
  clip-path: polygon(0 0, 25% 0, 25% 14.28%, 50% 14.28%, 50% 28.57%, 75% 28.57%, 75% 42.86%, 100% 42.86%,
    100% 57.14%, 75% 57.14%, 75% 71.43%, 50% 71.43%, 50% 85.71%, 25% 85.71%, 25% 100%, 0 100%);
}

/* ---------- sections ---------- */
main > section + section { margin-top: calc(var(--u) * 40); }
h2 { text-align: center; margin-bottom: calc(var(--u) * 10); }

.screen { padding: calc(var(--u) * 4); border-width: calc(var(--u) * 2); }
.screen video { width: 100%; height: auto; background: #000; }

.stages {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8);
}
@media (max-width: 899px) { .stages { grid-template-columns: minmax(0, 1fr); } }
.stage {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 6);
}
/* store screenshots are captures of the game, downscaled, so they scale smoothly;
   their crops differ slightly, so one frame shape fits them all */
.stage img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- footer ---------- */
footer {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 50);
  padding-bottom: calc(var(--u) * 20);
  text-align: center;
}
.fine { margin-top: calc(var(--u) * 6); }

/* ---------- background stage (js/stage.js) ---------- */
/* the canvas is a whole number of screen pixels per canvas pixel, so it can be a
   little larger than the viewport; the wrapper clips it */
.stage-wrap { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
#stage { image-rendering: pixelated; }

/* ---------- arcade chrome (js/arcade.js) ---------- */
/* CRT: faint scanlines one game pixel apart, and a soft dark edge */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* boot-in: a section wipes on top-down in four hard steps, like a screen drawing.
   The children are clipped, not the section: Chrome never reports a fully clipped
   element as intersecting, so the observer would never reveal it. */
.boot-ready .boot > * { clip-path: inset(0 0 100% 0); }
.boot-ready .boot.on > * { clip-path: inset(0 0 0 0); transition: clip-path 240ms steps(4, end); }

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  .boot-ready .boot > * { clip-path: none; }
}