/* Shared ink, paper and controls; each game retains its table composition. */
@font-face {
  font-family: Chewy;
  src: url("../assets/fonts/Chewy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
:root {
  --pop-ink: #282820;
  --pop-paper: #fff4d6;
  --pop-wood: #d8b67d;
  --pop-wood-edge: #b78c55;
  --pop-felt: #477f61;
  --pop-felt-edge: #315b47;
  --pop-yellow: #f4d35e;
  --pop-title: var(--font-ui);
  --pop-body: var(--font-ui);
  --pop-border: 2px solid var(--pop-ink);
  --pop-shadow: 4px 5px 0 var(--pop-ink);
}
.paper-piece {
  color: var(--pop-ink);
  background: var(--pop-paper);
  border: var(--pop-border);
  border-radius: 3px 7px 4px 5px;
  box-shadow: var(--pop-shadow);
}
/* The same visual language throughout the collection. */
body {
  min-height: 100dvh;
  color: var(--pop-ink);
  font-family: var(--pop-body);
  background: var(--pop-wood);
  background-image: repeating-linear-gradient(0deg, transparent 0 148px, #9b6b3420 148px 150px, transparent 150px 300px);
  --serif: var(--pop-title);
  --gold: var(--pop-yellow);
  --muted: #4d503e;
  --line: #28282040;

  .app-shell { max-width: 1600px; padding: 14px 28px 0; }
  .topbar { margin-bottom: 4px; min-height: 54px; }
  .brand { gap: 12px; }
  .eyebrow { color: #484936; font: 11px var(--pop-body); letter-spacing: .13em; }
  h1 { font: 34px/1 var(--pop-title); letter-spacing: 0; margin-top: 2px; }
  h2 { font-family: var(--pop-title); font-weight: 400; }
  .button {
    color: var(--pop-ink); background: var(--pop-paper); border: var(--pop-border);
    box-shadow: 2px 3px 0 var(--pop-ink); border-radius: 5px;
    min-height: 44px; padding: 7px 14px; font: 18px/1.2 var(--pop-title);
    transition: transform 120ms;
  }
  .button.gold { background: var(--pop-yellow); }
  .button:hover:not(:disabled) { background: #fff9e6; transform: translateY(-2px); }
  .button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
  .button:disabled { opacity: .55; box-shadow: none; }
  .text-button { color: inherit; min-height: 44px; padding: 8px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
  .text-button:hover:not(:disabled) { color: inherit; background: #fff4d630; }
  :is(button, a, summary, select, input):focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
  .local-badge { color: #484936; font-size: 12px; }
  .local-badge i { background: var(--pop-felt-edge); }
  .game-navigation { margin: 0; min-height: 44px; }
  .game-navigation > span { color: #484936; }
  dialog {
    color: var(--pop-ink); background: var(--pop-paper); border: var(--pop-border);
    border-radius: 7px; box-shadow: 7px 8px 0 var(--pop-ink); padding: 24px;
  }
  dialog::backdrop { background: #202b25b3; backdrop-filter: none; }
  dialog p, dialog .small, .rules-list, .rules-list strong, .score-row span, .muted { color: #484936; }
  dialog input, dialog select { color: var(--pop-ink); background: #fffcf0; border: var(--pop-border); min-height: 44px; }
  .close-button { color: var(--pop-ink); width: 44px; height: 44px; border: var(--pop-border); border-radius: 4px; }
  .dialog-heading { margin-bottom: 8px; }
  .rank-guide { background: #e4d5af; }
  .rank-guide b { color: inherit; }
}
@media (max-width: 700px) {
  body {
    .app-shell { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
    .topbar { min-height: 48px; }
    .brand { gap: 8px; }
    h1 { font-size: 27px; }
    .eyebrow { font-size: 8px; }
    .top-actions { gap: 7px; }
    .top-actions .button { font-size: 15px; padding: 6px 8px; min-height: 44px; }
    .local-badge, .game-navigation > span { display: none; }
    dialog { padding: 18px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}