/* PLAYCITY GAMES — shared layout, with each game's drawing and palette kept local.
   Paper aliases have fallbacks for games that load the lighter lab stylesheet. */
:root {
  --game-width: 960px;
  --game-width-wide: 1200px;
  --game-entry-width: 580px;
  --game-gutter: var(--space-5, 20px);
  --game-gap: var(--space-3, 12px);
  --game-section-gap: var(--space-8, 32px);
  --game-panel-padding: var(--space-4, 16px);
  --game-heading-gap: var(--space-4, 16px);
  --game-title-size: var(--font-size-3xl, 2rem);
  --game-title-size-small: var(--font-size-2xl, 1.5rem);
  --game-text-size: var(--font-size-sm, .875rem);
  --game-label-size: var(--font-size-xs, .75rem);
  --game-entry-size: var(--font-size-xl, 1.25rem);
  --game-title-leading: var(--line-height-tight, 1.3);
  --game-control-height: 44px;
  --game-control-padding: var(--space-2, 8px) var(--space-3, 12px);
  --game-radius: 0;
  --game-motion: var(--transition-fast, 150ms ease);
}
/* Resolve colour aliases where each game's body accent is defined. */
body {
  --game-rule: 1px solid var(--line);
  --game-border: 1px solid var(--line-strong);
  --game-focus: 2px solid var(--accent);
}

/* The title stays close to the game; the home page keeps its own curation layout. */
.t-hero {
  padding-block: var(--game-panel-padding);
  background-image: none;
  border-bottom: 0;
}
.t-hero h1 {
  font-size: var(--game-title-size);
  line-height: var(--game-title-leading);
  letter-spacing: -.035em;
}
.t-hero .t-lede {
  margin-top: var(--space-1, 4px);
  font-size: var(--game-text-size);
}
.t-sec { margin-top: var(--game-section-gap); }
.t-wrap { max-width: var(--game-width); padding-inline: var(--game-gutter); }
.t-doc, .t-faq { overflow-wrap: anywhere; }

/* These aliases let older games share the layout without changing game logic. */
:is(.game-top, .taller-top, .typing-top, .mt-top) {
  display: flex;
  justify-content: space-between;
  gap: var(--game-gap);
  padding-block: var(--space-3, 12px);
  color: var(--ink-2);
  font-size: var(--game-label-size);
}
:is(.game-top, .taller-top, .typing-top, .mt-top) a { text-underline-offset: 4px; }
:is(.game-heading, .taller-heading, .typing-heading, .mt-heading) {
  padding-bottom: var(--game-heading-gap);
}
:is(.game-heading, .taller-heading, .typing-heading, .mt-heading) h1 {
  margin: 0;
  font-size: var(--game-title-size);
  line-height: var(--game-title-leading);
  letter-spacing: -.035em;
}
:is(.game-heading, .taller-heading, .typing-heading, .mt-heading) p {
  margin-top: var(--space-1, 4px);
  color: var(--ink-2);
  font-size: var(--game-text-size);
}
:is(.game-panel, .taller-game, .typing-game, .mt-game) {
  min-width: 0;
  border: var(--game-border);
  border-radius: var(--game-radius);
  background: var(--surface);
}
.qz, .apt-form, .bm-stage, .cv-stage, .t-register {
  min-width: 0;
  border: var(--game-border);
  border-radius: var(--game-radius);
}
.qz-top { flex-wrap: wrap; gap: var(--space-2, 8px); }
.qz-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-btn { min-width: 0; border-radius: var(--game-radius); overflow-wrap: anywhere; }
.qz-btn--shortcut { flex-wrap: wrap; gap: var(--space-2, 8px); }
:is(.game-scorebar, .taller-score, .typing-hud, .mt-hud) {
  display: flex;
  align-items: center;
  gap: var(--game-gap);
  padding: var(--space-2, 8px) var(--game-panel-padding);
  border-bottom: var(--game-rule);
  font-size: var(--game-text-size);
  font-variant-numeric: tabular-nums;
}
:is(.game-actions, .taller-result-actions, .typing-result-actions, .bm-actions, .ra-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}
:is(.game-details, .taller-details, .typing-records, .mt-help) {
  border-top: var(--game-rule);
}
:is(.game-details, .taller-details, .typing-records, .mt-help) summary {
  min-height: var(--game-control-height);
  padding-block: var(--space-2, 8px);
  font-size: var(--game-text-size);
  cursor: pointer;
}

.t-btn {
  min-height: var(--game-control-height);
  padding: var(--game-control-padding);
  border: 1px solid var(--accent);
  border-radius: var(--game-radius);
  background: var(--accent);
  color: var(--text-inverse, var(--surface));
  font-size: var(--game-text-size);
  touch-action: manipulation;
  transition: background var(--game-motion), border-color var(--game-motion);
}
.t-btn:hover { background: var(--accent); filter: brightness(.94); }
.t-btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.t-btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); filter: none; }
.t-btn--sm { font-size: var(--game-label-size); }
.t-btn:disabled { cursor: default; }
.t-records-action .t-btn, .lab-account-save .t-btn { min-height: var(--game-control-height); }
.chip, .apt-opt { min-height: var(--game-control-height); border-radius: var(--game-radius); }

:is(.bm-input, .mt-input-row input, .typing-entry input) {
  min-width: 0;
  min-height: var(--game-control-height);
  padding: var(--space-2, 8px) var(--game-panel-padding);
  border: 1px solid var(--ink);
  border-radius: var(--game-radius);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--game-entry-size) var(--font-sans);
}
:is(.bm-input, .mt-input-row input, .typing-entry input):focus-visible {
  outline: var(--game-focus);
  outline-offset: 2px;
}
.bm-result { border: var(--game-border); border-radius: var(--game-radius); padding: var(--game-panel-padding); }
.t-faq summary { min-height: var(--game-control-height); }

@media (max-width: 600px) {
  :root { --game-gutter: var(--space-4, 16px); }
  .t-hero h1,
  :is(.game-heading, .taller-heading, .typing-heading, .mt-heading) h1 { font-size: var(--game-title-size-small); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --game-motion: 0s; }
}