/* Classic Arcade Games: shared play-experience layer (start / pause / game-over screens,
   sound + pause tools, "fit the game in the viewport" sizing, game facts + series nav).
   Loaded by all 20 game pages after each game's own style.css. See arcade-ux.js. */

/* ---------- Fit the play area in the viewport (no more car / controls below the fold) ----------
   Each game's own style.css caps its canvas to a fixed width. On a laptop screen (~700px tall)
   a 560px-tall canvas plus the header, stat pills and touch controls pushed the bottom of the
   road (and the player's car) below the fold. arcade-ux.js tags every canvas with .pjx-canvas
   and sets --pjx-nw (natural width) and --pjx-r (width / height); the width below is the
   smallest of: the column, the natural size, and whatever keeps the height inside the viewport. */
#game-root { min-height: 420px; }
#game-root canvas.pjx-canvas {
  --pjx-maxh: max(340px, calc(100vh - 240px));
  width: min(100%, calc(var(--pjx-nw) * 2.4px), calc(var(--pjx-maxh) * var(--pjx-r)));
  max-width: none;
  height: auto;
  aspect-ratio: var(--pjx-r);
}
@supports (height: 100svh) {
  #game-root canvas.pjx-canvas { --pjx-maxh: max(340px, calc(100svh - 240px)); }
}

/* ---------- Stat-row tools ---------- */
.stats-row { align-items: center; }
.pjx-tools { display: flex; gap: 8px; margin-left: auto; }
.pjx-tool {
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.pjx-tool:hover, .pjx-tool:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.pjx-tool[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Overlay on top of the canvas ---------- */
.pjx-overlay {
  position: absolute;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: rgba(8, 10, 20, 0.8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-align: center;
  touch-action: manipulation;
}
.pjx-overlay.is-open { display: flex; }
.pjx-card { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 280px; }
.pjx-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); font-weight: 800; }
.pjx-title { font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight: 800; line-height: 1.15; margin: 0; color: #fff; }
.pjx-body { margin: 0; color: #d6dbe6; font-size: 0.95rem; }
.pjx-best { margin: 0; color: var(--color-text-soft); font-size: 0.85rem; font-weight: 700; }
.pjx-play {
  min-height: 52px;
  min-width: 170px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #0e0f13;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(79, 216, 224, 0.28);
}
.pjx-play:hover { filter: brightness(1.08); }
.pjx-play:focus-visible, .pjx-tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pjx-hint { margin: 0; font-size: 0.82rem; color: #b9c0cf; }
.pjx-hint--kb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pjx-hint--kb { display: block; }
  .pjx-hint--touch { display: none; }
}
.pjx-keyhint { margin: 0; font-size: 0.75rem; color: var(--color-text-soft); display: none; }
@media (hover: hover) and (pointer: fine) { .pjx-keyhint { display: block; } }
.pjx-keyhint kbd {
  font: inherit; font-weight: 800; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.06);
}

/* ---------- Game facts row (crawlable, answer-first summary) ---------- */
.pjx-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.pjx-facts li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  color: var(--color-text-soft);
}
.pjx-facts li b { color: var(--color-text); font-weight: 700; }

/* ---------- Series switcher ---------- */
.pjx-series {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.pjx-series h2 { font-size: 1.02rem; margin: 0 0 10px; }
.pjx-series ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pjx-series a, .pjx-series span.pjx-current {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid var(--color-border);
  color: var(--color-text); font-weight: 700; font-size: 0.92rem;
}
.pjx-series a:hover, .pjx-series a:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.pjx-series span.pjx-current { border-color: var(--color-accent); color: var(--color-accent); }
.pjx-series small { color: var(--color-text-soft); font-weight: 600; white-space: nowrap; }

.pjx-noscript { padding: 24px; text-align: center; color: var(--color-text-soft); }

@media (prefers-reduced-motion: reduce) {
  .pjx-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Compact page header on these pages so the game sits higher on first paint ---------- */
.game-shell { padding-top: 14px; }
.game-shell .breadcrumb { margin-bottom: 8px; }
.game-shell__header { margin-bottom: 14px; }
.game-shell__title-group p { font-size: 0.95rem; }
.pjx-factcard .pjx-facts { margin: 0; }
.pjx-factcard .pjx-facts li { font-size: 0.85rem; }
/* ---------- Give the game the room: slimmer sticky header + panel on these pages ---------- */
.site-header__inner { padding-top: 8px; padding-bottom: 8px; }
.game-panel { padding: 14px 18px; }
#game-root { gap: 10px; }
#game-root > div { gap: 10px; }
.stats-row { margin-bottom: 4px; }
.game-message { min-height: 1.2em; margin: 0; }

.pjx-full {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.pjx-full:hover, .pjx-full:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
/* Slimmer stat pills so score + tools stay on one row, and a compact start card for short canvases */
.stats-row { gap: 8px; }
.stat-pill { padding: 6px 12px; font-size: 0.85rem; }
.pjx-overlay.pjx-compact .pjx-eyebrow,
.pjx-overlay.pjx-compact .pjx-keyhint { display: none; }
.pjx-overlay.pjx-compact .pjx-card { gap: 7px; }
.pjx-overlay.pjx-compact .pjx-play { min-height: 46px; min-width: 150px; }
.pjx-overlay.pjx-compact .pjx-title { font-size: 1.15rem; }
/* ---------- Phones: put the game, not the chrome, on the first screen ----------
   At 390px wide the two-row sticky header, wrapped breadcrumb, tagline and two stacked
   buttons used to push the canvas ~500px down the page. Everything below keeps its content
   (same text, same links) but takes about half the height. */
@media (max-width: 640px) {
  .site-header { position: static; }
  .site-header__inner { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: 8px; padding: 8px 14px; }
  .site-logo { font-size: 1.2rem; }
  .site-nav { gap: 12px; flex-wrap: nowrap; }
  .site-nav a { font-size: 0.8rem; white-space: nowrap; }
  .site-nav a:first-child { display: none; } /* the breadcrumb already links Home */
  .site-nav a[href="/category.html"] { display: none; } /* the magnifier opens the same page (search + categories); keeps the one-row header within 360px */
  .game-shell { padding-top: 8px; }
  .game-shell .breadcrumb { flex-wrap: nowrap; overflow: hidden; margin-bottom: 4px; font-size: 0.78rem; }
  .game-shell .breadcrumb li { white-space: nowrap; min-width: 0; }
  .game-shell .breadcrumb li[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; display: block; }
  .game-shell__header { gap: 8px; margin-bottom: 8px; }
  .game-shell__title-group h1 { font-size: 1.4rem; }
  .game-shell__title-group p {
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .game-shell__actions { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .game-shell__actions .btn { flex: 1 1 0; justify-content: center; padding: 8px 10px; font-size: 0.85rem; min-height: 44px; }
  .game-panel { padding: 10px; }
  .stat-pill { padding: 5px 10px; font-size: 0.8rem; }
  .pjx-tool { min-height: 44px; min-width: 44px; }
}
/* ---------- Responsive canvas: sharp at any size (see PJArcade.hd in arcade-ux.js) ----------
   The canvas backing store follows its on-screen size, so the width above may grow up to 2.4x
   the natural size without going blurry. */

/* ---------- Desktop "cockpit" layout (wide screen + mouse; class set by arcade-ux.js) ----------
   The page widens, the stat pills become a left rail, the on-screen touch controls a right rail,
   and the canvas takes the full height. #game-root and each game's .xx-wrap are display:contents
   so their children (canvas, controls, message) sit directly in the panel's grid. The overlay is
   position:absolute, so it is positioned against .game-panel__fs-scale (position:relative). */
html.pjx-cockpit .game-shell { padding-left: 20px; padding-right: 20px; } /* game-page.css zeroes the wrap's side padding */
html.pjx-cockpit .seo-content { max-width: 1180px; }
/* The canvas is height-limited, so the game panel has slack; a wider "How to play" column wraps less and
   stays no taller than the game (a taller card would leave an empty hole under the game) */
/* Panel column = canvas + both rails + gaps + padding (420px); "How to play" gets the rest. The container
   is only as wide as that needs, so the page is one centred, tight block on any screen. */
html.pjx-cockpit { --max-width: min(1560px, calc(var(--pjx-cw, 460px) + 964px)); }
html.pjx-cockpit .game-shell__layout {
  grid-template-columns: minmax(0, calc(var(--pjx-cw, 460px) + 420px)) minmax(300px, 1fr);
  align-items: stretch;
}
html.pjx-cockpit .instructions-panel:not(.pjx-factcard) { padding: 14px 18px; }
html.pjx-cockpit .instructions-panel:not(.pjx-factcard) h2 { margin: 0 0 8px; font-size: 1.05rem; }
html.pjx-cockpit .instructions-panel:not(.pjx-factcard) ul { gap: 6px; }
html.pjx-cockpit .instructions-panel:not(.pjx-factcard) li { font-size: 0.9rem; line-height: 1.4; margin-bottom: 4px; }
html.pjx-cockpit .game-panel { padding: 16px 20px; }
html.pjx-cockpit .game-panel__fs-scale {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 172px;
  grid-template-areas: "stats canvas ctrl" ". msg .";
  column-gap: 22px;
  row-gap: 8px;
  align-items: start;
}
html.pjx-cockpit #game-root,
html.pjx-cockpit #game-root > div { display: contents; }
html.pjx-cockpit #game-root canvas.pjx-canvas {
  /* --pjx-fit-h is measured by arcade-ux.js (window height minus everything above the canvas), so the whole
     game is visible on first paint without scrolling */
  --pjx-maxh: var(--pjx-fit-h, max(360px, calc(100svh - 230px)));
  grid-area: canvas;
  justify-self: center;
}
html.pjx-cockpit .stats-row {
  grid-area: stats;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
}
html.pjx-cockpit .stat-pill { text-align: left; }
html.pjx-cockpit .pjx-tools { margin: 6px 0 0; justify-content: flex-start; }
html.pjx-cockpit #game-root [class$="-controls"],
html.pjx-cockpit #game-root .mz-dpad {
  grid-area: ctrl;
  align-self: center;
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  width: auto;
}
html.pjx-cockpit #game-root .game-message { grid-area: msg; text-align: center; }
/* Right-rail arrangements per engine family */
html.pjx-cockpit #game-root .gi-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
html.pjx-cockpit #game-root .gi-btn--fire { grid-column: 1 / -1; order: -1; }
html.pjx-cockpit #game-root .sd-controls,
html.pjx-cockpit #game-root .ad-controls,
html.pjx-cockpit #game-root .bw-controls { flex-direction: column; gap: 14px; }

/* ---------- Fullscreen: no percentage widths (game-page.js measures the natural size with the
   parent at max-content, where a % width would fall back to the canvas's pixel size) ---------- */
html.pjx-fs #game-root canvas.pjx-canvas {
  --pjx-maxh: max(300px, calc(100svh - 300px));
  /* grows with tall screens, but never below the natural size (short landscape phones keep the old size) */
  width: max(calc(var(--pjx-nw) * 1px), min(calc(var(--pjx-nw) * 2.4px), calc(var(--pjx-maxh) * var(--pjx-r)), calc(100vw - 60px)));
}

/* ---------- Cockpit: compact chrome above the game so all of it fits on the first screen ---------- */
html.pjx-cockpit .site-header__inner { padding-top: 4px; padding-bottom: 4px; }
html.pjx-cockpit .game-shell { padding-top: 6px; padding-bottom: 40px; }
html.pjx-cockpit .game-shell .breadcrumb { margin-bottom: 2px; font-size: 0.8rem; }
html.pjx-cockpit .game-shell__header { margin-bottom: 8px; align-items: center; }
html.pjx-cockpit .game-shell__title-group h1 { font-size: 1.6rem; margin-bottom: 0; }
html.pjx-cockpit .game-shell__title-group p { font-size: 0.85rem; }
html.pjx-cockpit .game-shell__actions .btn { min-height: 40px; padding: 6px 16px; }
html.pjx-cockpit .game-panel { padding: 12px 16px; }

/* ---------- Wide layouts: no dead space under the game ----------
   The side column (how to play + game facts + more games) is much taller than the game panel, and a
   two-column grid stretched the row to the tall column, leaving hundreds of px of empty page under
   the game before the text. Placing the cards individually keeps "How to play" beside the game and
   moves the other two into a second row under it. */
@media (min-width: 900px) {
  .game-shell__layout { row-gap: 18px; align-items: start; }
  .side-stack { display: contents; }
  .game-shell__layout > .game-panel { grid-column: 1; grid-row: 1; }
  .side-stack > .instructions-panel:not(.pjx-factcard) { grid-column: 2; grid-row: 1; }
  .side-stack > .pjx-factcard { grid-column: 1 / -1; grid-row: 2; }
  .side-stack > .pjx-series { grid-column: 1 / -1; grid-row: 3; }
  .pjx-series ul { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
/* Stacked layout at 900-1279px (or touch): the panel is tall (canvas + controls below it), so "Game facts" goes
   under "How to play" in the right column, filling it, and only "More games" spans the full width. */
@media (min-width: 900px) {
  html:not(.pjx-cockpit) .game-shell__layout { grid-template-rows: auto 1fr auto; align-items: stretch; }
  html:not(.pjx-cockpit) .game-shell__layout > .game-panel { grid-row: 1 / span 2; }
  html:not(.pjx-cockpit) .side-stack > .pjx-factcard { grid-column: 2; grid-row: 2; align-self: stretch; }
  html:not(.pjx-cockpit) .side-stack > .pjx-series { grid-column: 1 / -1; grid-row: 3; }
  /* both columns end on the same line; if the game card is the shorter one, the game sits centred in it
     (never applied in fullscreen, whose own centring rules are left alone) */
  html:not(.pjx-cockpit):not(.pjx-fs) .game-panel { display: flex; flex-direction: column; justify-content: center; }
}
/* the generic ".instructions-panel ul" bullet padding was indenting the fact pills */
.instructions-panel .pjx-facts { padding-left: 0; }

/* ---------- Play next: cross-cluster related games (server-rendered links) under the series card ---------- */
.pjx-next { min-width: 0; }
.pjx-next ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* minmax(0,..): a long title must never widen the column */
.pjx-next li { margin: 0; padding: 0; min-width: 0; }
.pjx-next a { justify-content: flex-start; text-align: left; padding: 8px 10px; min-width: 0; }
.pjx-next__thumb { flex: 0 0 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.5rem; }
.pjx-next__text { display: flex; flex-direction: column; min-width: 0; }
.pjx-next__text b { font-size: 0.92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjx-next__text small { color: var(--color-text-soft); font-size: 0.78rem; line-height: 1.3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .side-stack > .pjx-next, html:not(.pjx-cockpit) .side-stack > .pjx-next { grid-column: 1 / -1; grid-row: 4; }
  .pjx-next ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
}