/* A game up close (pase/shared/_game_sheet, _game_card), opened from a tile
 * of «Juegos que llevan»: in the app (layouts/pase) and on the invitation
 * (layouts/pase_meetup_page). One sheet for both pages, so its own tokens and
 * nothing borrowed from either page's stylesheet. A sheet up from the bottom
 * on a phone, a card in the middle of a wider screen. On the 4px grid; every
 * control at least 44px tall. The dialog is `dialog.game-sheet`, and what
 * the invitation styles by element under its own class — every dialog, img,
 * button and link's focus — is written under it too, so this sheet wins
 * there (it also loads after). */

dialog.game-sheet {
  --gs-ink: #17150F;
  --gs-ink-2: #4A463B;
  --gs-muted: #5E5745;
  --gs-paper: #FFFFFF;
  --gs-sand: #FFFBEF;
  --gs-sand-2: #F1ECDC;
  --gs-sand-3: #E2DAC4;
  --gs-yellow: #F9C901;
  --gs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100%; max-width: 430px; max-height: none; margin: auto auto 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; color: var(--gs-ink);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 24px; text-align: left;
}
dialog.game-sheet::backdrop { background: rgb(23 21 15 / .6); }
dialog.game-sheet:focus { outline: none; }
.game-sheet-in {
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--gs-paper); border: 2px solid var(--gs-ink); border-bottom: 0; border-radius: 20px 20px 0 0;
}
.game-sheet[open] .game-sheet-in { animation: game-sheet-up .2s ease-out; }
@keyframes game-sheet-up { from { transform: translateY(32px); opacity: .5; } }
@media (min-width: 600px) {
  dialog.game-sheet { max-width: 480px; margin: auto; }
  .game-sheet-in { padding-bottom: 24px; border-bottom: 2px solid var(--gs-ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--gs-ink); }
  .game-sheet[open] .game-sheet-in { animation-name: game-sheet-in; }
  @keyframes game-sheet-in { from { transform: scale(.96); opacity: .5; } }
}
@media (prefers-reduced-motion: reduce) {
  .game-sheet[open] .game-sheet-in { animation: none; }
}

.game-card { display: flex; flex-direction: column; gap: 16px; }
.game-card h2, .game-card p, .game-card dl, .game-card dd { margin: 0; }
.game-card-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.game-card-kicker {
  flex: 1; font-family: var(--gs-mono); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted);
}
.game-card-close {
  width: 44px; height: 44px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gs-sand-3); border-radius: 50%; background: none; color: var(--gs-ink); cursor: pointer;
}
.game-card-close:active { background: var(--gs-sand-2); }
dialog.game-sheet .game-card-close:focus-visible, dialog.game-sheet .game-card-go:focus-visible,
dialog.game-sheet .game-card-act:focus-visible { outline: 3px solid var(--gs-ink); outline-offset: 2px; }

.game-card-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
dialog.game-sheet .game-card-cover {
  width: 112px; height: 112px; max-width: none; flex: none; object-fit: contain; padding: 4px;
  background: var(--gs-paper); border: 2px solid var(--gs-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--gs-ink);
}
.game-card-cover--blank {
  display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 44px; font-weight: 900;
  background: var(--gs-sand-2); border-style: dashed; box-shadow: none;
}
.game-card-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.game-card-name h2 { font-size: 24px; line-height: 28px; font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.game-card-name p { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--gs-ink-2); overflow-wrap: anywhere; }

/* Four figures in a row, the pass's fields: a mono label over a bold value. */
.game-card-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px;
  padding: 12px; background: var(--gs-sand); border: 2px solid var(--gs-ink); border-radius: 12px;
}
.game-card-facts > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.game-card-facts dt, .game-card-rows dt {
  font-family: var(--gs-mono); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted);
}
.game-card-facts dd { font-size: 16px; line-height: 20px; font-weight: 800; overflow-wrap: anywhere; }

.game-card-summary { font-size: 16px; line-height: 24px; color: var(--gs-ink-2); }
.game-card-gone { font-size: 20px; line-height: 24px; font-weight: 900; }

.game-card-rows { display: flex; flex-direction: column; gap: 12px; }
.game-card-rows > div { display: flex; flex-direction: column; gap: 4px; }
.game-card-rows dd { font-size: 16px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }

.game-card-go {
  min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--gs-ink); border-radius: 999px; background: var(--gs-yellow); color: var(--gs-ink);
  box-shadow: 4px 4px 0 var(--gs-ink); font-size: 16px; line-height: 20px; font-weight: 800; text-decoration: none;
  transition: transform .06s ease-out;
}
.game-card-go:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gs-ink); }
/* Beside the app's own buttons, the ficha is the second thing to do. */
.game-card-go--alt { background: var(--gs-paper); }

/* The app's own (pase/meetups/_game_card): «Quiero jugarlo», pressed once it
 * is said; «Yo lo llevo»; the quieter second thing under them. */
.game-card-actions { display: flex; flex-direction: column; gap: 8px; }
.game-card-actions form { margin: 0; }
.game-card-act {
  width: 100%; min-height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--gs-ink); border-radius: 999px; background: var(--gs-yellow); color: var(--gs-ink);
  box-shadow: 4px 4px 0 var(--gs-ink); font: inherit; font-size: 16px; line-height: 20px; font-weight: 800; cursor: pointer;
  transition: transform .06s ease-out;
}
.game-card-act:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gs-ink); }
.game-card-act svg { flex: none; }
.game-card-act--on { background: var(--gs-ink); color: var(--gs-yellow); }
.game-card-act--on svg { fill: currentColor; }
.game-card-act--quiet { background: none; border-color: var(--gs-sand-3); box-shadow: none; color: var(--gs-ink-2); font-weight: 700; }
.game-card-act--quiet:active { transform: none; background: var(--gs-sand-2); box-shadow: none; }
.game-card-note { margin-top: -8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--gs-muted); text-align: center; }