/* Only what Bagholder needs beyond /design/*.css. Tokens only: see design/DESIGN.md. */
.hidden { display: none !important; }
.big:not(button):not(.button):not(.chips) { font-size: var(--size-2xl); font-weight: var(--weight-black); }
.url { margin: var(--space-0); word-break: break-all; }
.self-center { align-self: center; }
/* Fast taps must never zoom the page, and a focused field must not zoom it either. */
#play, #play button, #play a, #play input, #play select { touch-action: manipulation; }
#play button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#play input, #play select { font-size: var(--size-md); }
.stack > h2, .stack > p { margin: var(--space-0); }
.sheet.stack { gap: var(--space-3); }
.card > .tabs { margin-top: var(--space-0); }

/* Toasts: the shared look, in a stack at the top */
#toasts { position: fixed; left: var(--space-0); right: var(--space-0); top: var(--space-2); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); pointer-events: none; z-index: var(--z-toast); padding: var(--space-0) var(--space-3); }
#toasts .toast { padding-right: var(--space-4); max-width: min(100%, calc(var(--space-16) * 8)); font-size: var(--size-sm); animation: toastIn var(--dur-base) var(--ease-out); }
.toast.error { border: var(--border-thick) solid var(--danger); }
.toast.warn { border: var(--border-thick) solid var(--highlight); }
.toast.ok { border: var(--border-thick) solid var(--positive); }
.toast.spy { border: var(--border-thick) solid var(--special); }
@keyframes toastIn { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } }

/* Big overlay effects */
#fx { position: fixed; inset: var(--space-0); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: var(--z-fx); }
.fx-banner { background: var(--surface); border: var(--border-thick) solid var(--highlight); padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); font-size: var(--size-banner); font-weight: var(--weight-black); text-align: center; animation: pop var(--dur-base) var(--ease-out); max-width: 90vw; box-shadow: var(--shadow-raised); }
.fx-bell { font-size: var(--size-bell); animation: ring var(--dur-fast) ease-in-out 8 alternate; filter: drop-shadow(0 0 var(--space-8) var(--highlight)); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.bp-summary { margin-top: var(--space-3); animation: pop var(--dur-slow) var(--ease-out); }
@keyframes ring { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.flash { animation: flash var(--dur-slower) ease-out; }
@keyframes flash { from { background: var(--highlight-bg); } }
.pulse { animation: pulse var(--dur-pulse) ease-in-out infinite; }
@keyframes pulse { 50% { opacity: var(--opacity-disabled); } }

/* The server's QR is a bare svg inside the shared .qr box */
.qr svg { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* How to play: a native dialog with the shared .sheet look. Padding sits inside so a click on the dialog itself means the backdrop. */
dialog#how { color: var(--text); padding: var(--space-0); margin: auto auto var(--space-0); }
dialog#how::backdrop { background: var(--scrim); }
@media (min-width: 40rem) { dialog#how { margin: auto; } }
.how-body { padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.how-body h2 { margin: var(--space-0) var(--space-0) var(--space-2); }
.how-body h3 { margin: var(--space-3) var(--space-0) var(--space-0-5); }
.how-body p { margin: var(--space-0); color: var(--text-muted); }

/* Wordmarks. Ballpark's letters are chalk and infield dirt, through the SVG filters in common.js. */
.logo .logo-start { color: var(--text); }
.logo .logo-end { color: var(--logo-end); }
.logo--ballpark span { display: inline-block; }
.logo--ballpark .logo-start { filter: url(#logo-chalk); }
.logo--ballpark .logo-end { filter: url(#logo-dirt); }
.logo-filters { position: absolute; width: 0; height: 0; }

/* Bagholder's ticker tape: paper fed in short jerks. The run holds its text twice, so sliding by half loops without a seam. */
.tape { margin-top: var(--space-3); padding: var(--space-1) var(--space-0); overflow: hidden; background: var(--tape-bg); color: var(--on-tape); font-size: var(--size-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-code); font-variant-numeric: tabular-nums; white-space: pre; text-align: left; box-shadow: var(--shadow-raised); }
.tape-run { display: inline-block; animation: tape-feed var(--dur-tape) steps(240) infinite; }
.tape-up { color: var(--tape-up); }
.tape-down { color: var(--tape-down); }
@keyframes tape-feed { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none; } }

/* No way out of the site in the middle of a game or on the big screen */
#cinema:not(.hidden) ~ .earflick-crumb, #play:not(.hidden) ~ .earflick-crumb { display: none; }

/* A site with 1 game hides Random game, so Quick game takes the whole row. */
.actions:has(.hidden) { grid-template-columns: 1fr; }
.actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }