/* The shared site shell (facelift 2026-10, packet 2): header, small-screen menu, player menu,
   footer, the compact market strip and the shared buttons. Loaded by every public page after
   src/design-tokens.css; the markup comes from src/site-shell.mjs. It never styles game views:
   the header and footer step aside while a game is on screen. */

.site-skip { position: fixed; top: 8px; left: 8px; z-index: 10001; padding: 12px 18px; color: var(--site-ink); background: var(--site-brass); border-radius: var(--radius-control); font: 600 15px/1.2 var(--font-body); text-decoration: none; transform: translateY(-160%); }
.site-skip:focus { transform: none; outline: none; box-shadow: var(--site-focus); }

/* ---------------------------------------------------------------- buttons */

.site-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-control); font: 600 15px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .1s ease; }
.site-button:active { transform: translateY(1px); }
.site-button--brass { color: var(--site-ink); background: var(--site-brass); border-color: var(--site-brass); }
.site-button--brass:hover { background: var(--site-paper); border-color: var(--site-paper); }
.site-button--ghost { color: var(--site-paper); background: transparent; border-color: var(--site-rule-strong); }
.site-button--ghost:hover { border-color: var(--site-silver); background: var(--site-panel); }
.site-button:focus-visible, .site-header a:focus-visible, .site-header button:focus-visible, .site-footer a:focus-visible, .site-chyron button:focus-visible { outline: none; box-shadow: var(--site-focus); }

/* ---------------------------------------------------------------- header */

.site-header { position: relative; z-index: 60; background: var(--site-ink); border-bottom: 1px solid var(--site-rule); color: var(--site-paper); font-family: var(--font-body); }
.site-header__bar { box-sizing: border-box; display: flex; align-items: center; gap: 24px; width: 100%; max-width: calc(var(--site-max) + 2 * var(--site-gutter)); min-height: 72px; margin: 0 auto; padding: 8px var(--site-gutter); }
.site-header__brand { flex: 0 0 auto; display: block; line-height: 0; margin-right: auto; border-radius: var(--radius-control); }
.site-header__brand img { width: 150px; height: auto; }
.site-header .site-nav { display: block; min-width: 0; margin: 0; }
.site-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--site-muted); border-radius: var(--radius-control); font: 400 15px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.site-nav__link:hover { color: var(--site-paper); background: var(--site-panel); }
.site-nav__link[aria-current="page"] { color: var(--site-paper); }
.site-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--site-brass); border-radius: 2px; }
.site-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.site-nav__secondary { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.site-header__icon-button { text-transform: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--site-muted); background: transparent; border: 1px solid var(--site-rule); border-radius: var(--radius-control); cursor: pointer; }
.site-header__icon-button:hover, .site-header__icon-button[aria-expanded="true"] { color: var(--site-paper); border-color: var(--site-rule-strong); background: var(--site-panel); }
.site-header__cta { min-height: 40px; padding: 8px 16px; }
.site-header__menu-button { display: none; align-items: center; text-transform: none; letter-spacing: 0; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--site-paper); background: transparent; border: 1px solid var(--site-rule-strong); border-radius: var(--radius-control); font: 600 15px/1 var(--font-body); cursor: pointer; }
.site-header__menu-button .site-icon--close { display: none; }
.site-header__menu-button[aria-expanded="true"] .site-icon--menu { display: none; }
.site-header__menu-button[aria-expanded="true"] .site-icon--close { display: block; }

/* The player menu (signed in) or the Sign in button (guest), filled by official-shell-routes.mjs. */
.site-account { position: relative; display: flex; align-items: center; }
.site-account__trigger { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 44px; padding: 4px 12px 4px 4px; color: var(--site-paper); background: var(--site-panel); border: 1px solid var(--site-rule-strong); border-radius: var(--radius-control); font: 600 14px/1.2 var(--font-body); cursor: pointer; }
.site-account__trigger:hover, .site-account__trigger[aria-expanded="true"] { border-color: var(--site-silver); }
.site-account__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-account__trigger .nav-avatar, .site-account__trigger img { width: 34px; height: 34px; border-radius: 4px; }
.site-account__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--site-panel); border: 1px solid var(--site-rule-strong); border-radius: var(--radius-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.site-account__menu[hidden] { display: none; }
.site-account__menu a, .site-account__menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; color: var(--site-paper); background: none; border: 0; border-radius: var(--radius-control); font: 400 15px/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.site-account__menu a:hover, .site-account__menu button:hover, .site-account__menu a:focus-visible, .site-account__menu button:focus-visible { background: var(--site-panel-raised); outline: none; box-shadow: inset 0 0 0 2px var(--site-brass); }
.site-account__meta { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--site-rule); color: var(--site-muted); font: 13px/1.4 var(--font-body); }
.site-account__meta strong { display: block; color: var(--site-paper); font-family: var(--font-score); font-size: 13px; }

/* Small screens: logo, jukebox, Menu. The links open as a panel under the bar once the script
   has wired the button; without script they stay a scrollable row. */
@media (max-width: 760px) {
  .site-header__bar { flex-wrap: wrap; gap: 8px 12px; min-height: 64px; }
  .site-header__brand img { width: 124px; }
  .site-header__cta { display: none; }
  .site-nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  .site-nav__link { padding: 8px 10px; font-size: 14px; }
  .site-header[data-menu-ready] .site-header__menu-button { display: inline-flex; }
  .site-header[data-menu-ready] .site-nav { display: none; }
  .site-header[data-menu-ready][data-menu-open] .site-nav { display: block; padding: 4px 0 12px; border-top: 1px solid var(--site-rule); }
  .site-header[data-menu-ready] .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-header[data-menu-ready] .site-nav__secondary { display: list-item; }
  .site-header[data-menu-ready] .site-nav__link { display: flex; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .site-header[data-menu-ready] .site-nav__link[aria-current="page"] { background: var(--site-panel); }
  .site-header[data-menu-ready] .site-nav__link[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .site-account__trigger .site-account__name { display: none; }
  /* Phones: logo, jukebox, Menu. Guests sign in from the home page or their profile page. */
  .site-header[data-menu-ready] .site-account__sign-in { display: none; }
  .site-account__trigger { padding: 4px; }
}
@media (max-width: 380px) { .site-header__menu-button span { display: none; } }

/* ---------------------------------------------------------------- market strip (secondary) */

.site-chyron { --chyron-height: 32px; z-index: 30; justify-content: flex-start; gap: 0; background: var(--site-panel); border-bottom: 1px solid var(--site-rule); color: var(--site-muted); font: 400 13px/1 var(--font-body); }
.site-chyron__viewport { flex: 1 1 auto; min-width: 0; }
.site-chyron__label { color: var(--site-blue-text); font: 600 11px/1 var(--font-body); letter-spacing: .08em; }
.site-chyron__welcome strong { color: var(--site-brass); }
.site-chyron__divider { color: var(--site-rule-strong); }
.site-chyron__change--up { color: var(--site-mint); }
.site-chyron__change--down { color: var(--site-danger); }
.site-chyron__controls { flex: 0 0 auto; display: flex; align-items: center; align-self: stretch; gap: 2px; padding: 0 6px; border-left: 1px solid var(--site-rule); background: var(--site-panel); }
.site-chyron__button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; color: var(--site-paper); background: transparent; border: 0; border-radius: 4px; font: 600 12px/1 var(--font-body); cursor: pointer; }
.site-chyron__button:hover { background: var(--site-panel-raised); }
.site-chyron__button .site-icon { width: 14px; height: 14px; }
.site-chyron--paused .site-chyron__track, .site-chyron--resting .site-chyron__track { animation-play-state: paused !important; }
.site-chyron__summary { display: none; margin: 0; align-items: center; gap: 8px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-chyron__summary strong { color: var(--site-brass); }
.site-chyron__summary a { color: var(--site-paper); }
/* Phones open on the arcade update; Markets expands the moving strip on request. */
@media (max-width: 640px) {
  .site-chyron[data-collapsed] .site-chyron__viewport { display: none; }
  .site-chyron[data-collapsed] .site-chyron__summary { display: flex; flex: 1 1 auto; min-width: 0; }
  .site-chyron[data-collapsed] [data-chyron-pause] { display: none; }
}
@media (min-width: 641px) { .site-chyron [data-chyron-markets] { display: none; } }

/* ---------------------------------------------------------------- footer */

.site-footer { position: relative; margin-top: 0; padding: 56px var(--site-gutter) 24px; background: var(--site-ink); border-top: 1px solid var(--site-rule); color: var(--site-muted); font: 400 15px/1.6 var(--font-body); }
.site-footer::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 2px; background: var(--site-cobalt); opacity: .5; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 48px; max-width: var(--site-max); margin: 0 auto; }
.site-footer__brand { display: inline-block; line-height: 0; border-radius: var(--radius-control); }
.site-footer__brand img { width: 160px; height: auto; }
.site-footer__descriptor { margin: 16px 0 8px; color: var(--site-paper); font: 800 26px/1.05 var(--font-heading); letter-spacing: .01em; text-transform: uppercase; }
.site-footer__note { max-width: 34ch; margin: 0; font-size: 14px; }
.site-footer__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer .site-footer__group { display: block; margin: 0; }
.site-footer__group h2 { margin: 0 0 12px; color: var(--site-paper); font: 800 18px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; }
.site-footer__group ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-footer__group a { display: inline-flex; align-items: center; min-height: 36px; color: var(--site-muted); text-decoration: none; border-radius: 4px; }
.site-footer__group a:hover { color: var(--site-paper); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: var(--site-max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--site-rule); font-size: 13px; }
.site-footer__legal strong { color: var(--site-paper); font-weight: 600; }
.site-footer__network { color: var(--site-mint); }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .site-footer__groups { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .site-footer { padding-top: 40px; } }

/* While a game is on screen the shell steps aside (parent lifecycle sets data-ingame). */
html[data-ingame="true"] .site-header,
html[data-ingame="true"] .site-footer,
html[data-ingame="true"] .site-chyron { display: none !important; }

/* ---------------------------------------------------------------- static pages */

body.site-page { margin: 0; background: var(--site-ink); color: var(--site-paper); font: 400 17px/1.6 var(--font-body); }
:where(body.site-page) :where(h1, h2, h3) { font-family: var(--font-heading); font-weight: 800; letter-spacing: .005em; line-height: 1.02; text-wrap: balance; }
:where(body.site-page) a { color: var(--site-blue-text); text-underline-offset: 3px; }
:where(body.site-page) :where(.site-header, .site-footer) a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .site-button, .site-nav__link, .site-header__icon-button { transition: none; }
  .site-button:active { transform: none; }
}
/* Page titles on the static pages and the journal take the heading face (their own sheets set an
   older display font with a more specific selector). */
body.site-page :is(.guide-header, .trust-intro, .game-detail-hero) h1 { font-family: var(--font-heading); font-weight: 800; letter-spacing: .005em; }
body.site-page .guide-kicker { font-family: var(--font-body); letter-spacing: .1em; }

/* Tune-up 2026-10: footer links reach the 44 px touch target without changing the desktop rhythm. */
@media (hover: none) { .site-footer__group a { display: inline-block; padding: 8px 0; } }