/* Arcade games on the site shell: /steam-higher-lower/, /cs2-map-quiz/,
   /minecraft-crafting-quiz/, /spot-the-anomaly/ (games, pink). Loaded last,
   after games.css (page frame), random-tools.css (base controls, article,
   FAQ), assets/arcade/style.css (arcade shell mechanics, expanded view) and
   the game's own sheet (the board itself, left as each game draws it).
   This layer redraws the shell around the board in the system: the game
   card, the toolbar, the hint line and the more-games row. Tokens only,
   logical properties, one accent via body[data-accent]. */

/* The SEO container below the game is the site container, not the 1000px game column (assets/arcade/style.css):
   the 68ch article stays centred inside it, while more games and the FAQ open on the h1 edge. */
.seo-section > .container.arcade-page { max-inline-size: var(--container); }

/* ── Game card ────────────────────────────────────────────────────────── */
.arcade-page .arcade-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 64rem;
  margin-inline: auto !important;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--border);
  border-block-start-color: var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.arcade-page .arcade-shell::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 1;
  block-size: 2px;
  background: var(--accent);
  pointer-events: none;
}
@media (min-width: 768px) {
  .arcade-page .arcade-shell { padding: var(--space-4) var(--space-5) var(--space-5); }
}
.arcade-page .arcade-shell > * { margin: 0; }

/* ── Toolbar: mode tabs, then the actions at the inline end ────────────── */
.arcade-page .arcade-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: 0 0 var(--space-3);
  border-block-end: 1px solid var(--border);
}
.arcade-page .arcade-toolbar > button {
  min-block-size: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--step--1);
  white-space: nowrap;
  overflow-wrap: normal;
}
.arcade-page .arcade-toolbar > button[data-arcade-mode] { border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) {
  .arcade-page .arcade-toolbar > button:hover:not(:disabled) { border-color: transparent; background: var(--surface-2); color: var(--text); }
}
.arcade-page .arcade-toolbar > button[data-arcade-mode][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--text);
  box-shadow: var(--shadow-1);
}
/* Actions: small secondary buttons with a drawn icon. */
.arcade-page .arcade-toolbar > button:not([data-arcade-mode]) {
  min-block-size: 36px;
  padding-inline: var(--space-3);
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  position: relative;
}
.arcade-page .arcade-toolbar > button:not([data-arcade-mode])::after { content: ''; position: absolute; inset: -4px 0; }
.arcade-page .arcade-toolbar > button:not([data-arcade-mode])::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9em;
  color: var(--accent);
}
.arcade-page #arcade-new::before { content: '\f2f9'; }
.arcade-page #arcade-share::before { content: '\f1e0'; }
.arcade-page #arcade-fullscreen::before { content: '\f065'; }
.arcade-page #arcade-fullscreen[aria-pressed="true"]::before { content: '\f066'; }
.arcade-page .arcade-toolbar > #arcade-new,
.arcade-page .arcade-toolbar > #arcade-share { margin-inline-start: auto; }
.arcade-page .arcade-toolbar > #arcade-new:not([hidden]) ~ #arcade-share { margin-inline-start: 0; }
@media (hover: hover) and (pointer: fine) {
  .arcade-page .arcade-toolbar > button:not([data-arcade-mode]):hover:not(:disabled) { border-color: var(--border-control); background: var(--surface-3); }
}
.arcade-page .arcade-toolbar > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .arcade-page .arcade-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arcade-page .arcade-toolbar > button { padding-inline: var(--space-2); white-space: normal; line-height: 1.15; }
  .arcade-page .arcade-toolbar > button:not([data-arcade-mode]) { grid-column: span 3; min-block-size: 40px; margin: 0 !important; }
  .arcade-page .arcade-toolbar:has(#arcade-fullscreen, .play-inline-expand) > :is(#arcade-fullscreen, .play-inline-expand) { grid-column: 3; margin: 0; inline-size: 100%; }
  .arcade-page .arcade-toolbar:has(#arcade-fullscreen, .play-inline-expand) > #arcade-share { grid-column: 1 / span 2; }
  .arcade-page .arcade-toolbar > #arcade-new:not([hidden]) { grid-column: 1 / -1; }
}

/* Hint, best score and share status: Mist small lines. */
.arcade-page .arcade-mode-hint,
.arcade-page .arcade-best,
.arcade-page .arcade-share-status { min-block-size: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.5; }
.arcade-page .arcade-best:empty,
.arcade-page .arcade-share-status:empty { display: none; }
.arcade-page .arcade-share-status input { margin-block-start: var(--space-2); }
.arcade-page .arcade-game { min-block-size: 22rem; }
.arcade-page .arcade-game h2,
.arcade-page .arcade-game h3 { color: var(--text); }
.arcade-page .arcade-result h2 { color: var(--accent); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.arcade-page .arcade-game [role="alert"] { color: var(--danger); }

/* Expanded view keeps the page ground. */
.arcade-page .arcade-shell.arcade-expanded { border-radius: 0; background: var(--bg); }
.arcade-page .arcade-expanded .arcade-toolbar { background: var(--bg); }
.arcade-page .arcade-expanded::before { display: none; }

/* ── Board tweaks that read the system (game sheets keep the board) ───── */
.arcade-page .steam-card { border-color: var(--border); border-radius: var(--radius-md); background: var(--bg-raised); }
.arcade-page .steam-card .steam-count { color: var(--accent); font-family: var(--font-display); }
.arcade-page .steam-choices [data-result="correct"] { border-color: var(--success) !important; color: var(--success) !important; }
.arcade-page .cs2-view,
.arcade-page .cs2-reveal-image { background: var(--bg-raised); border-radius: var(--radius-md); }
.arcade-page .cs2-quiz .cs2-primary { color: var(--accent-ink); }
.arcade-page .anomaly-viewport { background: var(--bg-raised); border-radius: var(--radius-md); }
.arcade-page .anomaly-primary,
.arcade-page .anomaly-level-grid button[aria-current] { background: var(--primary); color: var(--primary-ink); }
.arcade-page .anomaly-game { --anomaly-line: var(--border-strong); }
.arcade-page .anomaly-game ::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: var(--text); }
.arcade-page .anomaly-final-score { font-family: var(--font-display); }

/* ── More games: centred Mist heading over link chips ─────────────────── */
.arcade-page.container > h2 {
  margin-block-start: var(--space-8) !important;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  text-transform: none;
}
.arcade-page .arcade-related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3) !important;
}
.arcade-page .arcade-related > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.arcade-page .arcade-related > a::before {
  content: '\f11b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.9em;
  color: var(--accent);
}
.arcade-page .arcade-related > a::after { content: ''; position: absolute; inset: -4px 0; }
.arcade-page .arcade-related > a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface-3); color: var(--text); }

/* First viewport at 1366x768: from 1080px the hint shares the toolbar's
   rhythm and the Steam pair narrows so the Higher / Lower keys land on the
   first screen. */
@media (min-width: 1080px) {
  .arcade-page .arcade-shell { gap: var(--space-2); padding-block-start: var(--space-3); }
  .arcade-page .arcade-toolbar { padding-block-end: var(--space-2); }
  .arcade-page .steam-pair { max-inline-size: 40rem; margin-inline: auto; }
  .arcade-page .steam-card-copy { padding: var(--space-2) var(--space-3); }
  .arcade-page .steam-card:first-child .steam-card-copy { padding-block-end: 64px; }
  .arcade-page .steam-card h3 { min-block-size: 2.4em; }
  .arcade-page .steam-card .steam-count { margin-block-start: 0; font-size: var(--step-3); }
  .arcade-page .steam-question { margin-block: var(--space-2); }
  .arcade-page .steam-choices { margin-block-start: var(--space-2); }
}

/* The crafting board is its own Minecraft world: its headings keep the
   board's ink and face (the site h2/h3 rules would paint Starlight Teko on
   the light inventory panels). */
.arcade-page .arcade-game .cw-game :is(h2, h3, h4) { color: inherit; font-family: inherit; text-transform: none; letter-spacing: 0; }

/* The CS2 crop is drawn by sizing and offsetting the full screenshot inside
   the 16:9 view; arcade/style.css's `.arcade-game img { max-width: 100% }`
   out-ranks the game's `.cs2-image { max-width: none }` and would squeeze
   the crop out of frame. */
.arcade-page .arcade-game img.cs2-image { max-inline-size: none; }

/* Mode selection is the colorful edge of the game, not another framed window. */
.arcade-page .arcade-shell::before { display: none; }
.arcade-page .arcade-toolbar { gap: var(--space-2); }
.arcade-page .arcade-toolbar > button[data-arcade-mode][aria-pressed="true"] { background: var(--accent); color: var(--primary-ink); border-color: transparent; box-shadow: none; }
.arcade-page .arcade-toolbar > .play-inline-expand { margin-inline-start: auto; }
.arcade-page .arcade-toolbar #arcade-share { margin-inline-start: auto; }
.arcade-page .arcade-toolbar:has(.play-inline-expand) #arcade-share { margin-inline-start: auto; }
.arcade-page .arcade-toolbar #arcade-share + .play-inline-expand { margin-inline-start: 0; }
.arcade-page .arcade-toolbar:has(.play-inline-expand) > #arcade-fullscreen { display: none; }
.arcade-page .arcade-toolbar > button:not([data-arcade-mode]) { border: 0; background: color-mix(in srgb, var(--accent) 13%, var(--bg-raised)); }