/* Shell for every game page: head, toolbar, controls, stage, results, help and dialogs.
   Loaded after landing-site.css, which holds the tokens. Each game's own board styles
   live in its page and should use the game tokens (--board, --highlight, --player-*). */

.shell.game {
  width: min(560px, 100% - 2 * var(--gutter));
  padding: var(--space-5) 0 var(--space-7);
}

.shell.game.wide {
  width: min(760px, 100% - 2 * var(--gutter));
}

main.game {
  position: relative;
}

main.game [hidden] {
  display: none !important;
}

/* ---------- Head: title and stats ---------- */

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

h1 {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 100%;
}

.stat {
  min-width: 64px;
  max-width: 100%;
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
  overflow-wrap: anywhere;
}

.stat span {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.stat b {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* ---------- Toolbar: settings on the left, actions on the right ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.toolbar .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
  max-width: 100%;
  margin-left: auto;
}

/* ---------- Buttons ---------- */

.btn,
.option select {
  appearance: none;
  min-height: var(--target-min);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease), color var(--motion) var(--ease);
}

.btn {
  max-width: 100%;
  padding: 0 var(--space-4);
  touch-action: manipulation;
  user-select: none;
}

.btn:hover,
.option select:hover {
  border-color: var(--accent);
}

/* On the dark board the ring is drawn inside the control, in white, so it stays visible. */
.stage .btn:focus-visible {
  outline-color: var(--focus-inverse);
  outline-offset: calc(-1 * var(--focus-offset) - var(--focus-width));
}

.stage .btn.primary:focus-visible {
  outline-color: var(--on-accent);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn:disabled:hover {
  border-color: var(--border-strong);
}

.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.btn.primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.btn.quiet {
  border-color: transparent;
  background: transparent;
}

.btn.quiet:hover:not(:disabled) {
  background: var(--surface-2);
}

.btn.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--on-danger);
}

.btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Square icon-only button (sound toggle). */
.btn.icon {
  display: grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
}

.btn.icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}

.btn.icon .wave,
.btn.icon .mute {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.btn.icon[aria-pressed="true"] .mute,
.btn.icon[aria-pressed="false"] .wave {
  display: none;
}

/* ---------- Settings: labelled select and segmented choice ---------- */

.option {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* The arrow comes from a token, so it follows the theme. */
.option select {
  min-width: 0;
  max-width: 100%;
  padding: 0 34px 0 var(--space-3);
  background-image: var(--icon-chevron);
  background-position: right 10px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

@media (forced-colors: active) {
  .option select {
    appearance: auto;
    background-image: none;
    padding-right: var(--space-3);
  }
}

/* Two to four exclusive choices: native radios styled as one control. */
.segmented {
  display: inline-flex;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.segmented label {
  position: relative;
  display: inline-flex;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-1);
}

.segmented input:focus-visible + span {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: 0;
}

/* Power and aim sliders. */
.range {
  width: 100%;
  min-height: var(--target-min);
  accent-color: var(--accent);
}

/* ---------- Status line ---------- */

.banner {
  min-height: 1.5em;
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.banner.win { color: var(--success); }
.banner.lose { color: var(--danger); }

/* ---------- Stage and result overlay ---------- */

.stage {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--board);
  overflow: hidden;
  box-shadow: var(--elev-1);
  touch-action: pinch-zoom;
  user-select: none;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--scrim);
  color: var(--on-board);
  text-align: center;
}

.overlay[hidden] {
  display: none;
}

.overlay-box {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: 300px;
}

.overlay-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.overlay-text {
  margin: 0;
  color: rgb(255 255 255 / 0.85);
  font-size: var(--text-sm);
  line-height: var(--leading);
}

.overlay .btn {
  margin-top: var(--space-2);
  padding: 0 var(--space-5);
}

/* ---------- On-screen pads and keys ---------- */

.pad {
  display: none;
  margin: var(--space-4) auto 0;
  gap: var(--space-2);
  justify-content: center;
}

.pad .btn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  padding: 0;
}

.pad svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  pointer-events: none;
}

/* Touch devices get the on-screen pad; keyboards don't need it. */
@media (hover: none), (pointer: coarse) {
  .pad {
    display: grid;
  }
}

/* ---------- Breadcrumbs ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs [aria-current] {
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* ---------- Loading and failure ---------- */

.game-load-status {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.game-load-status .btn {
  display: inline-flex;
  align-items: center;
  margin: var(--space-1) var(--space-2) 0 0;
}

.game-load-status a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
}

/* Paint initialized game content together, rather than moving instructions as an
   empty DOM board fills in. The startup message remains usable if boot fails. */
@media (scripting: enabled) {
  main.game[data-game-state="loading"] { min-height: 100vh; min-height: 100svh; }
  main.game[data-game-state="loading"] > :not(.crumbs):not(.game-head):not(.game-load-status):not(noscript) { visibility: hidden; }
  main.game[data-game-state="loading"] #game-startup { position: absolute; top: 180px; left: 0; right: 0; }
}

@media (scripting: none) {
  #game-startup { display: none; }
}

/* ---------- Under the game: quick controls, related games, help ---------- */

.quick-controls,
.related-games {
  margin-top: var(--space-5);
}

.quick-controls h2,
.related-games h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.controls-more {
  display: inline-block;
  padding: var(--space-3) 0;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#full-controls {
  scroll-margin-top: var(--space-5);
}

.controls {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.controls div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.controls dt {
  font-weight: var(--weight-medium);
}

.controls dd {
  margin: 0;
  color: var(--text-muted);
}

.more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.more a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}

.more a:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.more img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.more span {
  display: block;
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}

.more small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

/* How to play, rules, controls and FAQ: a quiet reading column. */
.about {
  max-width: 65ch;
  margin-top: var(--space-6);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
}

.about h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-lg);
}

.about p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  line-height: 1.6;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.facts b {
  margin-right: var(--space-1);
  color: var(--text);
  font-weight: var(--weight-medium);
}

.rules {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
  line-height: var(--leading);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  min-height: var(--target-min);
  padding: var(--space-3) 0;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.faq details p {
  margin: 0 0 var(--space-3);
}

/* ---------- Dialogs (shared/dialog.js, shared/stats.js) ---------- */

.confirm-dialog {
  max-width: min(360px, 100vw - 2 * var(--gutter));
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-2);
}

.confirm-dialog::backdrop {
  background: rgb(23 26 29 / 0.45);
}

.confirm-dialog p {
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.stats-dialog h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.stats-dialog dl {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.stats-dialog dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.stats-dialog dt {
  color: var(--text-muted);
}

.stats-dialog dd {
  margin: 0;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stats-dialog .stats-note {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .shell.game,
  .shell.game.wide {
    padding-top: var(--space-4);
  }
}

@media (max-width: 479px) {
  .toolbar {
    gap: 6px;
  }

  .toolbar .btn:not(.icon) {
    padding: 0 10px;
  }

  .option select {
    padding-left: 10px;
  }

  .stat {
    min-width: 56px;
    padding: 6px var(--space-2);
  }

  .more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop split, opted into with main.game.split: the board on the left, title, stats,
   settings, status and the game's own side controls in a panel on the right. The board
   spans the panel rows; the last row is flexible so panel items stay packed at the top.
   A page marks its board with .game-board and extra panel items with .game-side, and may
   set --board-max to its board's widest size. */
@media (min-width: 1024px) and (min-height: 560px) {
  .shell.game.split {
    display: grid;
    grid-template-columns: minmax(0, var(--board-max, 560px)) minmax(300px, 340px);
    grid-template-rows: auto repeat(7, auto) 1fr;
    justify-content: center;
    align-items: start;
    column-gap: var(--space-6);
    width: min(1040px, 100% - 2 * var(--gutter));
  }

  .shell.game.split > * {
    grid-column: 1 / -1;
  }

  .shell.game.split > .game-board {
    grid-column: 1;
    grid-row: 2 / 10;
    max-width: 100%;
    margin-top: 0;
  }

  .shell.game.split > :is(.game-head, .toolbar, .banner, .game-side, .quick-controls) {
    grid-column: 2;
  }

  .shell.game.split > .game-head {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Settings as label + full-width select rows, actions on one row below. */
  .shell.game.split > .toolbar {
    display: grid;
    gap: var(--space-2);
  }

  .shell.game.split > .toolbar .option {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .shell.game.split > .toolbar .option select {
    width: 100%;
  }

  .shell.game.split > .toolbar .actions {
    margin: var(--space-1) 0 0;
  }

  .shell.game.split > .toolbar .btn:not(.icon) {
    padding: 0 var(--space-3);
  }

  .shell.game.split > .quick-controls {
    margin-top: var(--space-4);
  }

  .shell.game.split > .quick-controls .controls div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Phone held sideways: every pixel of height goes to the board and its controls. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header:not(.sticky) .topbar {
    min-height: 48px;
    padding: var(--space-1) 0;
  }

  .crumbs {
    line-height: var(--leading-snug);
  }

  .stat {
    padding: 2px var(--space-2);
  }

  .stat b {
    font-size: var(--text-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .option select,
  .more a {
    transition: none;
  }

  .more a:hover {
    transform: none;
  }
}