/* Guildhall, the Core Cards player app (formerly the Player Hub). The house look shared with corelcs.com (Website/src/app/globals.css) and the lobby TV slides
   (signage/): near-black ground with a breath of green, ink surfaces, paper and silver type, Core green as the one accent,
   gold for small labels. Big Shoulders Display carries the headlines and Geist Mono the small tracked labels, as on the
   slides; the body is the site's own system grotesque. Both fonts are self-hosted (SIL OFL) because the app's CSP allows
   font-src 'self'.
   Surfaces rise by lightness alone, ground → ink → ink-2 → ink-3, with no outline on a card at rest; outlines are for
   controls, the dashed frame of an empty slot, and a state that needs one (an open table, an equipped cosmetic). */
@font-face { font-family: "Big Shoulders Display"; src: url(fonts/BigShouldersDisplay-700-900.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --black: #0c0f0a;
  --ink: #161a13;
  --ink-2: #1e241a;
  --ink-3: #2a3124;
  --paper: #f2f4ee;
  --silver: #c8cdc4;
  --muted: #8f968a;
  --green: #7ac142;
  --green-bright: #8fd653;
  --green-dark: #4e8a25;
  --gold: #e6be64;
  --gold-soft: #e6be64;
  --red: #c8102e; /* the logo's red: the Pokémon mark and the bell's dot, nothing else */
  --blue: #4c7cf5; /* the Riftbound mark */
  --danger: #e07060;
  /* The page's surfaces and text, read by every route. */
  --ground: var(--black);
  --surface: var(--ink);
  --surface-2: var(--ink-2);
  --surface-3: var(--ink-3);
  --text: var(--paper);
  --text-2: var(--silver);
  --max: 1180px;
  --pill: 4px; /* chips, tabs and seats stay rectangular (elo#7); buttons are the site's pills */
  --round: 999px;
  --control: 8px;
  --radius: 12px;
  --touch: 44px;
  --rule: 1px solid rgba(200, 205, 196, 0.15);
  --rule-green: 1px solid rgba(122, 193, 66, 0.25);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--ground);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-bright); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; width: 100%; }
.display, h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }
.label { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: var(--black); padding: 8px 16px; z-index: 100; font-weight: 800; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The home page's buttons: green for the one call to action, a green outline into each game. */
.btn.btn-white, .btn.btn-red, .btn.btn-blue, .btn.btn-green { min-height: 42px; padding: 9px 18px; gap: 10px; }
.btn.btn-white { background: transparent; border-color: var(--green); color: var(--green-bright); }
.btn.btn-white:hover { background: rgba(122, 193, 66, 0.12); }
.btn.btn-red, .btn.btn-blue, .btn.btn-green { background: var(--green); color: var(--black); }
.btn.btn-red:hover, .btn.btn-blue:hover, .btn.btn-green:hover { background: var(--green-bright); color: var(--black); }
.arrow::after { content: "→"; font-weight: 700; }

/* ---------- Nav ---------- */
/* The site's bar: near-black, a green hairline under it, silver links that turn green, the current section underlined
   in green, one green pill for the call to action. The icons the links carry stay out of the way. */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(12, 15, 10, 0.97); border-bottom: var(--rule-green); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; color: var(--paper); }
.brand img { width: 40px; height: 40px; flex: none; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.brand-name small { display: block; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); font-weight: 700; margin-top: 4px; }
/* The Guildhall wordmark: GUILD in paper and HALL on a green tab, both in the display face, as the slides set it. */
.wordmark { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; font-size: 1.55rem; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; color: var(--paper); }
.wordmark b { margin-left: 3px; padding: 2px 5px 1px; border-radius: 3px; background: var(--green); color: var(--black); font-weight: 900; }
.beta { font-family: var(--mono); color: var(--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-left: 7px; vertical-align: top; }
.nav-links { display: flex; gap: 2px; align-items: center; margin: 0 auto; flex: 0 1 auto; min-width: 0; }
.nav-links a, .nav-games > summary { color: var(--silver); text-decoration: none; font-weight: 600; font-size: 0.92rem; min-height: 40px; padding: 8px 11px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-links a:hover, .nav-games > summary:hover, .nav-games[open] > summary { color: var(--green-bright); }
.nav-links a[aria-current="page"], .nav-games > summary.current { color: var(--green-bright); box-shadow: inset 0 -2px var(--green); }
.nav-links svg { display: none; }
.nav-games .caret { font-size: 0.65em; opacity: 0.7; }
.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }
/* Dropdown panels: ink cards with green headers, as the site's menus. */
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: var(--ink-2); border: 1px solid rgba(122, 193, 66, 0.35); border-radius: var(--control); padding: 10px 8px; display: flex; flex-direction: column; z-index: 60; box-shadow: var(--shadow-lg); }
.dropdown-menu a, .dropdown-menu button { color: var(--paper); text-decoration: none; font-weight: 600; padding: 9px 14px; min-height: 40px; display: flex; align-items: center; gap: 8px; border-radius: var(--pill); text-align: left; font-size: 0.95rem; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: rgba(122, 193, 66, 0.12); color: var(--green-bright); }
.dropdown-menu a[aria-current="page"] { color: var(--green-bright); }
.menu-head { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding: 10px 14px 4px; }
.menu-head + .menu-head, .menu-rule { border-top: var(--rule); margin-top: 6px; padding-top: 10px; }
.menu-rule { padding: 0; margin: 6px 0; }
.nav-games-menu { left: 0; right: auto; min-width: 200px; }
.nav-game .event-dot { margin-right: 2px; }
.menu-sub { color: var(--muted); font-weight: 600; font-size: 0.85rem; padding: 8px 14px 0; }
.menu-sheet .nav-game { padding-left: 26px; }
.menu-sheet .menu-waiting { color: var(--muted); font-size: 0.85rem; padding: 4px 14px 8px; }
.menu-toggle { display: none; }
.nav-scan { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: var(--round); border: 1px solid var(--green); color: var(--green-bright); font-weight: 700; flex: none; }
.nav-scan:hover { background: rgba(122, 193, 66, 0.12); }
/* With the staff Scan button in the bar there is less room: the bar packs tighter and the search keeps only its icon. */
.nav-inner:has(.nav-scan:not([hidden])) .nav-links a, .nav-inner:has(.nav-scan:not([hidden])) .nav-games > summary { padding: 8px 9px; font-size: 0.86rem; }
.nav-inner:has(.nav-scan:not([hidden])) .brand-name small, .nav-inner:has(.nav-scan:not([hidden])) .search-label, .nav-inner:has(.nav-scan:not([hidden])) .search-field kbd { display: none; }
.nav-inner:has(.nav-scan:not([hidden])) .search-field { min-width: 0; padding: 8px 10px; }
/* The search field opens the players-or-decks form; ⌘K (Ctrl+K) opens it from the keyboard. */
.search-field { display: flex; align-items: center; gap: 8px; border: var(--rule); border-radius: var(--control); padding: 8px 14px; min-width: 150px; min-height: 40px; white-space: nowrap; color: var(--silver); font-size: 0.85rem; background: var(--ink); font-weight: 500; }
.search-field svg { width: 16px; height: 16px; }
.search-field kbd { margin-left: auto; font: 700 0.68rem var(--mono); border: var(--rule); border-radius: 4px; padding: 1px 6px; background: var(--ink-2); color: var(--silver); }
.nav-search[open] .search-field { border-color: var(--green); }
.nav-search-menu { min-width: 320px; padding: 12px; }
.hub-search { display: grid; gap: 8px; }
.search-bar { display: block; width: 100%; margin: 0; }
.search-bar input { width: 100%; min-height: 46px; font-size: 1rem; border-radius: var(--control); padding: 10px 14px; background: var(--ink); border: 1px solid rgba(200, 205, 196, 0.3); }
.search-tabs { display: inline-flex; gap: 2px; }
.search-tabs .tab { border-radius: var(--pill); padding: 4px 12px; font-weight: 700; font-size: 0.85rem; color: var(--text-2); min-height: 32px; display: inline-flex; }
.search-tabs .tab[aria-pressed="true"] { background: var(--green); color: var(--black); }
/* The bell: what is waiting on the player; the logo's red dot while anything is. */
.bell { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--silver); }
.bell:hover, .dropdown[open] > .bell { color: var(--green-bright); background: var(--ink); }
.bell svg { width: 20px; height: 20px; }
.bell i { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 2px solid var(--black); }
.bell-menu { min-width: 260px; }
.bell-menu .menu-empty { color: var(--muted); font-size: 0.9rem; padding: 8px 14px 10px; }
/* The player: avatar and first name. */
.account-button { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--paper); min-height: 40px; padding: 0 8px 0 0; border-radius: var(--pill); }
.account-button:hover, .dropdown[open] > .account-button { color: var(--green-bright); }
.account-button .avatar { width: 38px; height: 38px; font-size: 0.8rem; }
.account-button .caret { font-size: 0.65em; opacity: 0.7; }
.nav-right .cta { background: var(--green); color: var(--black); padding: 8px 18px; border-radius: var(--round); font-weight: 700; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-right .cta:hover { background: var(--green-bright); color: var(--black); }

/* ---------- Game community pages ---------- */
/* The game's card art fills the right of the band, plain. */
.game-hero { position: relative; overflow: hidden; border-bottom: var(--rule-green); background: radial-gradient(ellipse at 15% 0%, rgba(122, 193, 66, 0.14), transparent 50%), var(--black); }
.game-hero-art { position: absolute; inset: 0 0 0 46%; background: var(--page-art, var(--game-art)) center 30% / cover; border-left: var(--rule-green); }
.game-hero.track-pokemon { --page-art: url(art/page-pokemon.webp); }
.game-hero.track-magic { --page-art: url(art/page-magic.webp); }
.game-hero.track-riftbound { --page-art: url(art/page-riftbound.webp); }
.game-hero .hero-inner { padding: 36px 24px 32px; min-height: 220px; }
.game-hero h1 { margin: 6px 0 8px; font-size: clamp(2.6rem, 5.4vw, 3.6rem); max-width: 14ch; }
.game-hero .lede { color: var(--silver); font-size: 1.15rem; max-width: 40ch; }
.game-hero .kicker { color: var(--gold); }
.event-rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A game page: what is on, how to start and your stamps in the wide column; where to play and the ladder beside it,
   staying in view while the long column scrolls. */
.game-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; align-items: start; }
.game-main .event-rows-2, .game-main .league-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .game-main .league-stamp { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .game-main .league-stamp > .muted:first-child { grid-column: 1 / -1; }
}
.game-side { position: sticky; top: 72px; }
.game-side #play .row { gap: 10px; }
.pp-destinations.game-page-track { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
/* Community: the feed, with bounties, trades and the stores beside it. */
.community-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; align-items: start; }
.community-feed .panel { padding-top: 24px; }
.people { display: grid; gap: 8px; }
.people h3 { margin: 0; }
.learn-copy { max-width: 64ch; }
.learn-copy p { color: var(--text-2); }
.learn-copy b { color: var(--text); }
.learn .game-card-next { margin-top: 12px; }

.league-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 24px; align-items: start; }
.league-stamp { display: grid; gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--surface); }
.league-stamp-card { display: flex; gap: 14px; align-items: center; }
.league-stamp-card > div { display: grid; gap: 2px; }
.pp-first-league { border-left: 4px solid var(--track); padding-left: 20px; }
/* ---------- Home ---------- */
/* The welcome: the three games in a band on the right (each game's card art), so the
   first thing on screen is already the three doors. */
.hero { position: relative; overflow: hidden; border-bottom: var(--rule-green); background: radial-gradient(ellipse at 20% 120%, rgba(122, 193, 66, 0.26), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(122, 193, 66, 0.1), transparent 50%), var(--black); }
.hero-art { position: absolute; inset: 0 0 0 44%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: rgba(122, 193, 66, 0.25); border-left: var(--rule-green); }
.hero-art i { display: block; background: var(--game-art) center 30% / cover; }
.hero-art i.track-pokemon { background-image: url(art/hero-pokemon.webp); }
.hero-art i.track-magic { background-image: url(art/hero-magic.webp); }
.hero-art i.track-riftbound { background-image: url(art/hero-riftbound.webp); }
.hero-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 44px 24px 36px; min-height: 230px; }
.hero-title { font-size: clamp(3rem, 6.4vw, 4.8rem); color: var(--paper); max-width: 12ch; margin: 0; }
.hero-title span { color: var(--green); }
.hero-lede { margin-top: 12px; font-size: 1.2rem; color: var(--silver); max-width: min(46ch, 38vw); }
.hero-row { margin-top: 18px; }
/* Find your game: three cards, each an art panel above a dark copy panel, so nothing is ever placed over a
   publisher's art, logos or legal line. Each panel is the publisher's card art, cropped and nothing else, with the
   publisher's own logo in its corner. Scoped to .game-cards because
   .game-card is also a match card elsewhere. */
.home-games { padding: 8px 0 0; }
.game-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.game-cards > .game-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; transition: background 150ms ease; }
.game-card-art { position: relative; height: 200px; flex: none; background: #000 var(--game-art) center 52% / cover no-repeat; }
.game-card-logo { position: absolute; top: 14px; left: 14px; height: 48px; width: auto; max-width: 190px; object-fit: contain; object-position: left; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
/* The Magic wordmark is black; the site shows it inverted on the dark ground. */
.track-magic .game-card-logo { filter: brightness(0) invert(0.92); }
.game-card-body { position: relative; flex: 1; padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; background: var(--ink); transition: background 150ms ease; }
.game-cards > .game-card:hover .game-card-body { background: var(--ink-2); }
.game-cards h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; font-size: 2.1rem; margin: 0; }
.game-cards .game-card-body p { font-size: 0.93rem; color: var(--silver); }
.game-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.game-cards .btn.btn-white { padding: 8px 16px 8px 10px; text-decoration: none; }

.game-card-next { font-size: 0.8rem; font-weight: 600; background: rgba(200, 205, 196, 0.08); padding: 6px 10px; border-radius: var(--pill); color: var(--silver); min-height: 0; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-card-next a { color: var(--paper); font-weight: 700; }
.game-tag { display: inline-block; vertical-align: middle; margin-left: 8px; font: 700 0.62rem var(--mono); letter-spacing: 0.12em; color: var(--gold); border: 1px solid rgba(230, 190, 100, 0.5); padding: 2px 8px; border-radius: var(--pill); }
.discover-link { font-weight: 700; }
/* Room for the blocks that fill in after the fetches, so nothing below them jumps. */
#home-discover { min-height: 190px; margin-top: 18px; }
#home-events { min-height: 150px; }
.event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track-dot, var(--track)); flex: none; transform: translateY(1px); }
/* Discover another game: an ink banner with the destination game's card art; the deck's cards
   cross-fade in place. */
.discover { position: relative; margin-top: 18px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(ellipse at 100% 50%, rgba(122, 193, 66, 0.18), transparent 55%), var(--ink); min-height: 300px; }
.discover-cards { display: grid; }
.discover-card { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 300px; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.discover-card { align-content: start; }
.discover-card.on { opacity: 1; visibility: visible; transition: opacity 600ms ease; }
.discover-copy { padding: 22px 26px 20px; display: flex; flex-direction: column; gap: 6px; }
.discover:has(.discover-dots) .discover-copy { padding-bottom: 48px; }
.discover-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.discover-chip { font: 600 0.78rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--silver); border: var(--rule); padding: 3px 9px; border-radius: var(--pill); }
.discover-copy h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; font-size: 2.4rem; color: var(--paper); margin: 0; max-width: 34ch; }
.discover-copy p { color: var(--silver); max-width: 50ch; font-size: 1rem; }
.discover-perks { display: flex; gap: 22px; align-items: center; margin-top: 6px; font-size: 0.9rem; font-weight: 600; color: var(--silver); flex-wrap: wrap; }
.discover-perks span::before { content: "✦"; color: var(--green); margin-right: 6px; }
.discover-copy .row { gap: 16px; margin-top: 8px; }
.discover-skip { color: var(--silver); font-size: 0.88rem; font-weight: 600; min-height: 40px; }
.discover-skip:hover { color: var(--paper); }
.discover-art { position: relative; min-height: 190px; background: var(--game-art) 50% 30% / cover; border-left: var(--rule); }
/* Invitations with no single destination game (the Passport, a season) show the Core logo. */
.discover-art.mascot { background: var(--ink-2) url(core-logo.png) center / auto 56% no-repeat; }
.discover-dots { position: absolute; left: 20px; bottom: 6px; display: flex; gap: 4px; }
.discover-dots button { width: 32px; height: 36px; padding: 0; display: grid; place-items: center; }
.discover-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(200, 205, 196, 0.3); transition: background 150ms ease; }
.discover-dots button[aria-pressed="true"]::before { background: var(--green); }
.track-season { --track: #f59e0b; --track-a: #fbbf24; --track-b: #9a3412; --track-dot: #d97706; }
/* Coming up at Core: an ink card of three events, each with a date box and the event's own picture. */
.home-events { margin-top: 18px; background: var(--ink); border-radius: var(--radius); padding: 22px 22px 22px; }
.home-events .spread { margin-bottom: 14px; align-items: center; }
.home-events h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; font-size: 1.9rem; margin: 0; display: flex; align-items: center; gap: 12px; }

.events-link { font-weight: 700; font-size: 0.95rem; white-space: nowrap; color: var(--green-bright); text-decoration: none; }
.events-link:hover { text-decoration: underline; }
.event-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.event-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 84px; gap: 14px; align-items: center; padding: 12px; border-radius: var(--control); background: var(--ink-2); color: inherit; text-decoration: none; transition: background 150ms ease; }
.event-row:hover { background: var(--ink-3); }
.event-when { text-align: center; background: var(--black); border-radius: 6px; padding: 8px 4px 7px; line-height: 1; }
.event-when small { display: block; font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.62rem; color: var(--gold); }
.event-when b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--paper); }
.event-text { display: grid; min-width: 0; }
.event-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
/* The game as a quiet tag: its calendar colour is the dot, the name stays silver. */
.event-game { font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); color: var(--silver); border: 1px solid rgba(200, 205, 196, 0.25); margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.event-game::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--track-dot, var(--track)); margin-right: 5px; vertical-align: 1px; }
.event-meta { font-size: 0.82rem; color: var(--silver); margin-top: 2px; }
.event-meta b { color: var(--paper); font-weight: 600; }
.event-thumb { width: 84px; height: 68px; flex: none; border-radius: 6px; object-fit: cover; object-position: center 30%; background: #000 var(--game-art) 63% 52% / cover no-repeat; }
/* Pokémon events show the official program logo, scaled only; its lettering is dark, so it sits on paper. */
.event-thumb.logo-league { background: var(--paper) url(art/logo-pokemon-league.png) center / 54% auto no-repeat; }
.event-thumb.logo-prerelease { background: var(--paper) url(art/logo-play-prerelease.png) center / 60% auto no-repeat; }
.chev { color: var(--muted); font-size: 1.1rem; }
/* Your corner, Community highlights and New here?: ink panels in a row. */
.home-secondary { display: grid; gap: 16px; margin: 18px 0 36px; align-items: start; }
.home-secondary.member { grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.2fr) minmax(0, 1.8fr); }
.home-secondary.visitor { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.panel { background: var(--ink); border-radius: var(--radius); padding: 22px; }
.panel h2 { font-size: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 16px; }
.panel h2 .see { margin-left: auto; font: 600 0.82rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--green-bright); white-space: nowrap; text-decoration: none; }
/* Your corner: who you are across the top, then your Passport level and your next stamp side by side. */
.corner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.corner-who, .corner-cell { background: var(--ink-2); border-radius: var(--control); padding: 14px 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.corner-who { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.corner-who > div { display: grid; gap: 2px; min-width: 0; }
.corner-who .avatar.large { width: 56px; height: 56px; font-size: 1.1rem; }
.corner-name { font-family: var(--display); font-size: 1.7rem; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; }
.corner-cell small { color: var(--silver); font-size: 0.8rem; font-weight: 600; }
.corner-cell b { font-family: var(--display); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: 0.01em; }
.corner-cell a { font-size: 0.88rem; font-weight: 700; }
.corner-cell .pp-bar { margin: 2px 0; }
.corner-waiting { margin-top: 16px; padding-top: 14px; border-top: var(--rule); display: flex; gap: 8px 18px; align-items: center; font-size: 0.92rem; flex-wrap: wrap; }
.newto { position: relative; overflow: hidden; background: var(--ink-2); }
.newto p { color: var(--silver); font-size: 0.95rem; max-width: 22ch; }
.newto.mascot { min-height: 250px; padding-bottom: 120px; }
.newto-mascot { position: absolute; right: 18px; bottom: 18px; width: 88px; height: 88px; background: url(core-logo.png) center / contain no-repeat; }
.steps { list-style: none; display: grid; gap: 8px; counter-reset: s; margin-top: 4px; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; color: var(--silver); font-size: 0.92rem; }
.steps li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--ink-2); color: var(--green-bright); font: 700 0.72rem var(--mono); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(122, 193, 66, 0.4); }
.steps b { color: var(--paper); }
.newto-row { margin-top: 12px; }
.newto-line { padding: 2px 4px; }
.hl { list-style: none; display: grid; }
.hl li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: var(--rule); font-size: 0.9rem; }
.hl li:first-child { padding-top: 0; }
.hl li:last-child { border-bottom: 0; padding-bottom: 0; }
.hl-line { font-size: 0.9rem; color: var(--silver); display: grid; min-width: 0; }
.hl-line b { color: var(--paper); }
.hl-line small { color: var(--muted); font-size: 0.78rem; }
.hl li > a { color: var(--muted); font-size: 1.1rem; min-width: var(--touch); min-height: var(--touch); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hl li > a:hover { color: var(--green-bright); }
.hl-mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.hl-bounty { border-radius: 50%; background: rgba(230, 190, 100, 0.25); color: var(--gold); font-weight: 800; }
.hl-trade { border-radius: 50%; background: rgba(122, 193, 66, 0.15); color: var(--green-bright); font-weight: 800; font-size: 1.1rem; }
.hl .pp-badge { justify-self: center; }
.hl-deck { border-radius: var(--pill); background: var(--ink-3); border: 1px solid rgba(200, 205, 196, 0.25); }
.data-table tr.row-head td { background: rgba(200, 205, 196, 0.03); }
.data-table .indent { padding-left: 16px; color: var(--text-2); }
.ladder { display: flex; flex-direction: column; gap: 4px; }
.ladder-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-radius: var(--pill); }
.ladder-row.plain { grid-template-columns: 1fr auto; }
.ladder-row .rank { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder-row .rank.top { color: var(--green-bright); }
.ladder-row b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0.01em; }
.account { display: flex; align-items: center; gap: 10px; }
.account a { display: inline-flex; align-items: center; gap: 8px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid rgba(122, 193, 66, 0.5); color: var(--green-bright); font-weight: 800; font-size: 0.78rem; flex: none; letter-spacing: 0.02em; }
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.large { width: 64px; height: 64px; font-size: 1.3rem; }
.lede .avatar.large { vertical-align: middle; margin-right: 8px; }

/* ---------- Page ---------- */
/* Tall enough that the footer starts below the first screen, so it does not jump when a page draws. */
main { flex: 1; min-height: 80vh; }
.page-head { padding: 44px 0 0; border-bottom: var(--rule); }
.page-head:not(:has(.subnav)) { padding-bottom: 28px; }
.kicker { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
h1 { font-size: clamp(2.6rem, 5vw, 3.7rem); margin: 4px 0 10px; }
h1 span { color: var(--green); }
.lede { color: var(--text-2); max-width: 640px; font-size: 1.08rem; }
.subnav { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 22px; }
.subnav a { color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 0.95rem; padding: 6px 0; min-height: var(--touch); display: inline-flex; align-items: center; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--green-bright); }
.subnav a[aria-current="page"] { box-shadow: inset 0 -3px var(--green); }
.page-head .spread { align-items: flex-end; }
section.block { padding: 44px 0 4px; }
section.block:last-child { padding-bottom: 24px; }
h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; font-size: 1.9rem; margin: 0 0 18px; }
.spread:has(> h2) { margin-bottom: 18px; align-items: baseline; }
.spread > h2 { margin: 0; }
h2.plain { font-family: inherit; text-transform: none; letter-spacing: -0.01em; line-height: 1.3; font-size: 1.1rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
p + p { margin-top: 10px; }
.muted { color: var(--text-2); }
.small { font-size: 0.88rem; }
.tabular, .num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
.positive { color: var(--green-bright); }
.negative { color: var(--danger); }
.gold { color: var(--gold); }

/* ---------- Buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; text-decoration: none; font-weight: 700; font-size: 0.95rem; padding: 8px 20px; border-radius: var(--round); border: 1px solid transparent; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; white-space: nowrap; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--black); }
.btn-primary:hover { background: var(--green-bright); color: var(--black); }
.btn-secondary { border-color: var(--green); color: var(--green-bright); background: transparent; }
.btn-secondary:hover { background: rgba(122, 193, 66, 0.12); }
.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:hover { color: var(--green-bright); }
.btn-danger { border-color: rgba(224, 112, 96, 0.6); color: var(--danger); background: transparent; }
.btn-danger:hover { background: rgba(224, 112, 96, 0.12); }
.btn-sm { min-height: 34px; padding: 5px 14px; font-size: 0.88rem; }
.btn-xs { min-height: 28px; padding: 2px 12px; font-size: 0.8rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--pill); padding: 1px 7px; font-size: 0.76rem; font-weight: 700; border: 1px solid rgba(200, 205, 196, 0.35); color: var(--silver); text-decoration: none; white-space: nowrap; background: transparent; }
.chip-active, .chip-confirmed { border-color: rgba(122, 193, 66, 0.6); color: var(--green-bright); }
.chip-warning, .chip-pending { border-color: rgba(230, 190, 100, 0.6); color: var(--gold); }
.chip-cancelled, .chip-disputed { border-color: rgba(224, 112, 96, 0.6); color: var(--danger); }
.chip-private { border-style: dashed; }
.chip-solid { background: var(--green); color: var(--black); border-color: var(--green); }
.chip-soon { color: var(--muted); border-color: rgba(200, 205, 196, 0.18); cursor: default; }
.chip-soon small { font-weight: 600; margin-left: 2px; font-size: 0.72rem; }
.filter-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-group .label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-right: 4px; }
.filter-group button.chip { min-height: 30px; padding: 2px 10px; font-size: 0.85rem; cursor: pointer; }
.filter-group button.chip[aria-pressed="true"] { background: var(--ink-2); color: var(--paper); border-color: rgba(200, 205, 196, 0.5); }
.filter-group button.chip:hover { color: var(--green-bright); }
.filters { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 4px; }
.filters.row { flex-direction: row; align-items: center; gap: 14px; }
.filter-select { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 0.85rem; color: var(--text-2); }
.filter-select select { width: auto; min-height: 34px; padding: 4px 28px 4px 10px; font-size: 0.9rem; font-weight: 600; border-radius: var(--pill); }

/* ---------- Surfaces ---------- */
.surface { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 16px 18px; }
.surface-raised { background: var(--surface-2); }
.surface-interactive { transition: border-color 150ms ease, background 150ms ease; text-decoration: none; color: inherit; display: block; }
.surface-interactive:hover { background: var(--surface-2); }
.surface-green { box-shadow: inset 3px 0 var(--green); }
.surface-gold { box-shadow: inset 3px 0 var(--gold); }
.callout { border-left: 4px solid var(--green); background: rgba(122, 193, 66, 0.08); padding: 12px 16px; border-radius: 0 var(--control) var(--control) 0; color: var(--text-2); font-size: 0.93rem; }
.callout strong { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(200, 205, 196, 0.1); border-radius: var(--radius); overflow: hidden; margin: 24px 0; }
.stat { background: var(--surface); padding: 18px 20px; }
.stat b { display: block; font-family: var(--display); font-size: 2.3rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat b small { font-size: 0.85rem; color: var(--text-2); font-weight: 600; margin-left: 4px; }
.stat small { color: var(--text-2); font-weight: 600; font-size: 0.82rem; }
.stat-strip { background: var(--surface); border-radius: var(--radius); padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 20px 0; }
.stat-strip b { display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-strip small { color: var(--text-2); font-weight: 600; font-size: 0.85rem; }
.empty { padding: 18px 20px; border: 1px dashed rgba(200, 205, 196, 0.22); border-radius: var(--radius); color: var(--text-2); }
.empty strong { font-weight: 700; color: var(--text); }
.empty p { display: inline; margin-left: 6px; }
.loading { padding: 60px 0; text-align: center; color: var(--text-2); }
.error-summary { border: 1px solid rgba(224, 112, 96, 0.6); border-radius: var(--control); padding: 12px 16px; margin: 16px 0; color: var(--danger); }

/* ---------- Ruled lists (website "card" pattern) ---------- */
.ruled { border-top: 1px solid rgba(200, 205, 196, 0.28); }
.ruled-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; border-bottom: 1px solid rgba(200, 205, 196, 0.18); padding: 16px 0; text-decoration: none; color: inherit; }
.ruled-row .tag { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.ruled-row p { color: var(--text-2); font-size: 0.95rem; }
.ruled-row b { color: var(--text); }
.card-top { border-top: 1px solid rgba(122, 193, 66, 0.4); padding-top: 14px; }
.card-top h3 { margin-bottom: 6px; }
.card-top p { color: var(--text-2); font-size: 0.95rem; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: 0.82rem; font-weight: 600; color: var(--text-2); padding: 6px 10px; border-bottom: 1px solid rgba(200, 205, 196, 0.25); white-space: nowrap; }
.data-table td { padding: 9px 10px; border-bottom: var(--rule); vertical-align: middle; }
.data-table tr:hover td { background: rgba(200, 205, 196, 0.04); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .rank { color: var(--text-2); font-weight: 800; width: 48px; }
.data-table tr:first-child .rank.top { color: var(--green-bright); }
.data-table .rating { font-weight: 800; font-size: 1.05rem; }
.player-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.player-link:hover { color: var(--green-bright); }
.player-link small { display: block; color: var(--text-2); font-weight: 500; font-size: 0.8rem; }
.pagination { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; align-items: center; color: var(--text-2); font-size: 0.88rem; }
.bar { height: 6px; background: rgba(200, 205, 196, 0.15); border-radius: 6px; overflow: hidden; min-width: 80px; }
.bar i { display: block; height: 100%; background: var(--green); }

/* ---------- Bounties ---------- */
.bounty-card { background: linear-gradient(160deg, rgba(230, 190, 100, 0.12), var(--surface) 60%); border: 1px solid rgba(230, 190, 100, 0.4); border-radius: var(--control); padding: 22px; text-align: center; }
.bounty-card .avatar { margin: 6px auto 10px; border-color: var(--gold); color: var(--gold); }
.bounty-card h3 { font-size: 1.25rem; }
.bounty-icon { font-size: 1.6rem; color: var(--gold); letter-spacing: 0.2em; }
.streak-track { display: flex; gap: 4px; }
.streak-track i { flex: 1; height: 8px; border-radius: 4px; background: rgba(200, 205, 196, 0.15); }
.streak-track i.on { background: var(--green); }
.streak-track i.gold { background: var(--gold); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.field { margin-bottom: 16px; }
.field .help { color: var(--text-2); font-size: 0.82rem; margin-top: 4px; font-weight: 400; }
input[type="text"], input[type="search"], input[type="number"], input[type="url"], input[type="month"], select, textarea {
  width: 100%; min-height: var(--touch); padding: 10px 12px; border-radius: var(--control); font-size: 1rem; font-family: inherit;
  background: var(--surface-2); border: 1px solid rgba(200, 205, 196, 0.25); color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 90px; resize: vertical; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.placement-list { list-style: none; display: grid; gap: 8px; }
.placement-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; background: var(--surface-2); border: var(--rule); border-radius: var(--control); padding: 8px 12px; }
.placement-list .place { font-weight: 900; color: var(--green-bright); font-size: 1.1rem; }
.placement-list .move { display: flex; gap: 4px; }
.placement-list li.tied { border-color: rgba(230, 190, 100, 0.5); margin-top: -4px; }
.placement-list li.tied .place { color: var(--gold); font-size: 0.95rem; }

/* ---------- Dialog & notice ---------- */
dialog { margin: auto; background: var(--surface); border: var(--rule-green); border-radius: 14px; color: var(--text); width: min(640px, calc(100% - 32px)); max-height: 90vh; padding: 24px; overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; }
.dialog-head h2 { margin: 0; }
.close { font-size: 1.6rem; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); }
.close:hover { color: var(--text); background: var(--surface-2); }
.beta-notice p { color: var(--text-2); }
.beta-notice b { color: var(--text); }
.beta-notice .signature { color: var(--green-bright); font-weight: 700; margin-top: 4px; }
.beta-notice .form-actions { justify-content: flex-start; margin-top: 4px; }
#dialog-error { color: var(--danger); font-weight: 700; margin-top: 12px; font-size: 0.9rem; }
#notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(560px, calc(100% - 32px)); background: var(--surface-2); border: 1px solid rgba(122, 193, 66, 0.6); padding: 12px 20px; border-radius: var(--control); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.36); font-weight: 600; }
#notice.error { border-color: rgba(224, 112, 96, 0.7); color: var(--danger); }
.bounty-bar { display: block; background: rgba(230, 190, 100, 0.2); border-bottom: 1px solid rgba(230, 190, 100, 0.5); color: var(--text); text-decoration: none; text-align: center; font-size: 0.92rem; padding: 9px 24px; min-height: var(--touch); }
.bounty-bar:hover { background: rgba(230, 190, 100, 0.4); }
.bounty-bar b { color: var(--gold); }
.bounty-star { color: var(--gold); margin-right: 8px; }
.preview-banner { background: var(--gold); color: var(--black); text-align: center; font-size: 0.88rem; padding: 8px 24px; font-weight: 600; }
.preview-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-options button { text-align: left; padding: 12px 14px; border-radius: var(--control); background: var(--surface-2); border: var(--rule); display: flex; gap: 10px; align-items: center; }
.preview-options button:hover { border-color: var(--green); }
.preview-options small { display: block; color: var(--text-2); }

/* ---------- Deck editor ---------- */
.deck-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.deck-head .full { grid-column: 1 / -1; }
.deck-editor { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 28px; align-items: start; }
.board { margin-bottom: 20px; }
.board h3 { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(122, 193, 66, 0.4); padding-bottom: 6px; }
.board h3 small { color: var(--text-2); font-weight: 600; font-size: 0.82rem; }
.card-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: var(--rule); }
.card-row .qty { display: inline-flex; align-items: center; border: var(--rule); border-radius: var(--pill); overflow: hidden; }
.card-row .qty button { width: 26px; height: 28px; color: var(--text-2); }
.card-row .qty button:hover { color: var(--green-bright); background: var(--surface-2); }
.card-row .qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.9rem; }
.card-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-row .name button { font-weight: inherit; text-align: left; }
.card-row .name button:hover { color: var(--green-bright); }
.card-row .name small { color: var(--text-2); font-weight: 500; margin-left: 6px; }
.card-row .tools { display: flex; gap: 2px; }
.card-row .tools button { color: var(--text-2); width: 28px; height: 28px; border-radius: 50%; font-size: 0.85rem; }
.card-row .tools button:hover { color: var(--text); background: var(--surface-2); }
.card-row.view { grid-template-columns: 36px 1fr; }
.card-row.view .count { color: var(--green-bright); font-weight: 800; text-align: right; }
.search-panel { position: sticky; top: 84px; }
.search-results { max-height: 60vh; overflow: auto; margin-top: 12px; }
.search-result { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: var(--rule); }
.search-result img { width: 44px; border-radius: 3px; background: var(--surface-2); aspect-ratio: 5 / 7; object-fit: cover; }
.search-result strong { font-size: 0.93rem; display: block; }
.search-result small { color: var(--text-2); display: block; font-size: 0.8rem; }
.card-preview { position: fixed; z-index: 70; width: 240px; border-radius: 11px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.504); pointer-events: none; background: var(--surface-2); }
.deck-cover { height: 110px; border-radius: var(--control) var(--control) 0 0; background: radial-gradient(ellipse at 80% 120%, rgba(122, 193, 66, 0.35), transparent 60%), var(--surface-2); position: relative; overflow: hidden; }
.deck-cover .chip { position: absolute; left: 14px; top: 14px; }
.deck-cover.has-art { background-size: cover; background-position: center 30%; }
.deck-cover.has-art .chip { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.432); }
.deck-hero { height: 220px; border-radius: var(--control); margin: 24px 0 8px; background: radial-gradient(ellipse at 80% 120%, rgba(122, 193, 66, 0.35), transparent 60%), var(--surface-2); background-size: cover; background-position: center 25%; position: relative; overflow: hidden; border: var(--rule); }
.deck-hero.has-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12, 15, 10, 0.92)); }
/* The caption sits on that dark gradient, so it keeps light text whatever the page's palette. */
.deck-hero.has-art { --text: #f2f4ee; --text-2: #c8cdc4; color: var(--text); }
.deck-hero-caption { position: absolute; left: 20px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.deck-hero-caption b { font-size: 1.25rem; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.504); }
.card-row .tools button.on { color: var(--gold); }
.deck-card { padding: 0; overflow: hidden; }
.deck-card .body { padding: 16px 18px 18px; }
.deck-card h3 { margin-bottom: 4px; }

/* ---------- Game cards ---------- */
.game-card .seats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 12px; }
.seat { display: inline-flex; align-items: baseline; gap: 5px; color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.seat:hover { color: var(--green-bright); }
.seat .place { color: var(--text-2); font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.seat.first, .seat.first .place { color: var(--green-bright); }
.game-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ledger-delta { font-weight: 800; }
.game-card .row .chip { min-height: 36px; }
.share { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; border-color: rgba(122, 193, 66, 0.35); }
.share-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.share-qr img { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
.share-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.share-link code, .qr-large code { font-size: 0.85rem; color: var(--text); background: var(--surface-2); padding: 8px 12px; border-radius: 8px; overflow-wrap: anywhere; word-break: break-all; flex: 1 1 200px; min-width: 0; }
.qr-large img { width: min(78vw, 60vh, 520px); height: auto; margin: 0 auto; background: #fff; padding: 14px; border-radius: 12px; }
.callout, .error-summary { overflow-wrap: anywhere; }

/* ---------- Trades ---------- */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--round); background: var(--green); color: var(--black); font-size: 0.72rem; font-weight: 800; }
.card-row .thumb, .card-name .thumb { display: inline-block; width: 22px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 2px; margin-right: 8px; vertical-align: middle; background: var(--surface-2); }
.card-row .name .chip { margin-left: 8px; font-size: 0.66rem; padding: 1px 8px; vertical-align: middle; }
.card-row .name .note, .data-table .note { display: block; margin-left: 0; color: var(--text-2); font-weight: 400; white-space: normal; }
.card-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.card-name button:hover, .card-row .name button:hover { color: var(--green-bright); }
.card-name small { color: var(--text-2); font-weight: 500; }
.pick-list { display: grid; gap: 6px; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin: 0; padding: 8px 12px; background: var(--surface); border: var(--rule); border-radius: var(--control); font-weight: 600; cursor: pointer; }
.pick.on { border-color: rgba(122, 193, 66, 0.7); background: rgba(122, 193, 66, 0.08); }
.pick .name { overflow: hidden; text-overflow: ellipsis; }
.pick .name small { color: var(--text-2); font-weight: 500; margin-left: 6px; }
.pick .name .chip { margin-left: 8px; font-size: 0.66rem; padding: 1px 8px; }
.pick input.pick-qty { width: 64px; min-height: 36px; padding: 4px 8px; }
.trade-history { list-style: none; display: grid; gap: 10px; }
.trade-history li { background: var(--surface); border-radius: var(--control); padding: 12px 16px; }
.trade-history li p { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Forms shared by the Passport pages ---------- */
.label-text { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border: var(--rule); border-radius: var(--pill); padding: 4px; }
.segmented button, .seg-option { position: relative; border-radius: var(--pill); padding: 6px 16px; font-weight: 700; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); margin: 0; cursor: pointer; font-size: 0.92rem; }
.segmented button[aria-pressed="true"], .seg-option:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px rgba(122, 193, 66, 0.6); }
.seg-option input { position: absolute; opacity: 0; pointer-events: none; }
.seg-option:has(input:focus-visible) { outline: 3px solid var(--green-bright); outline-offset: 2px; }
.data-table tr.voided td:not(:last-child), .pp-history li.voided { opacity: 0.55; }
.data-table tr.voided b { text-decoration: line-through; }
.scanner { position: relative; aspect-ratio: 1; max-height: 60vh; margin: 0 auto; background: #000; border-radius: var(--control); overflow: hidden; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 16%; border: 3px solid var(--green); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.24); }

/* ---------- Core Player Passport ---------- */
/* Track colors match the website calendar's game colors; the badge gradients run from them to a deep shade. */
/* Track colors match the website calendar's game colors; the badge gradients run from them to a deep shade.
   --track-dot is the game's colour as a dot or chip on white; --game-art is the game's card art, the only page
   imagery for that game (the Passport's cosmetic banners are a player's own, not page art). */
.track-pokemon { --track: #facc15; --track-a: #fde047; --track-b: #b45309; --track-dot: var(--red); --game-art: url(art/pokemon.webp); --track-art: var(--game-art); }
.track-magic { --track: #a855f7; --track-a: #c084fc; --track-b: #4c1d95; --track-dot: #7a3cf0; --game-art: url(art/magic.webp); --track-art: var(--game-art); }
.track-riftbound { --track: #38bdf8; --track-a: #7dd3fc; --track-b: #1e40af; --track-dot: var(--blue); --game-art: url(art/riftbound.webp); --track-art: var(--game-art); }
.track-community { --track: #7ac142; --track-a: #a3e635; --track-b: #2f5e14; --track-dot: var(--green); --track-art: linear-gradient(135deg, #a3e635, #2f5e14); }
.track-hub { --track: #2dd4bf; --track-a: #5eead4; --track-b: #0f4c45; --track-dot: #0f766e; --track-art: linear-gradient(135deg, #5eead4, #0f4c45); }
.tier-common { --rim: #9aa395; } .tier-uncommon { --rim: #e2e6df; } .tier-rare { --rim: #e6be64; } .tier-epic { --rim: #d8b4fe; } .tier-legendary { --rim: #ffe08a; }

.pp-badge { --ring: 2px; position: relative; display: inline-block; width: var(--size); height: var(--size); flex: none; }
.pp-badge-ring { position: absolute; inset: 0; display: block; overflow: visible; }
.pp-badge-mark { position: absolute; inset: 7%; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--track-b, #2f5e14) 30%, var(--ink)); border: var(--ring) solid var(--track-a, #a3e635); box-shadow: 0 0 0 2px var(--rim); color: var(--track-a, #a3e635); font-family: var(--display); font-weight: 900; font-size: calc(var(--size) * 0.34); line-height: 1; letter-spacing: 0.02em; }
.pp-badge.tier-uncommon { --ring: 3px; } .pp-badge.tier-rare { --ring: 4px; } .pp-badge.tier-epic, .pp-badge.tier-legendary { --ring: 5px; }
.pp-badge.tier-epic .pp-badge-mark { box-shadow: 0 0 0 2px var(--rim), 0 0 10px rgba(216, 180, 254, 0.45); }
.pp-badge.tier-legendary .pp-badge-mark { box-shadow: 0 0 0 2px var(--rim), 0 0 14px rgba(255, 224, 138, 0.6); }
.pp-badge.locked { --rim: #4a5245; }
.pp-badge.locked .pp-badge-mark { background: #1a1f17; border-color: #4a5245; color: #8f978a; box-shadow: none; }
.pp-badge.pending .pp-badge-mark { border-style: dashed; }
.pp-lock { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b4661' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid rgba(200, 205, 196, 0.35); }
.pp-badge.fresh { animation: pp-pop 900ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pp-pop { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }

/* The profile card */
.pp-card { --text: #f2f4ee; --text-2: #c8cdc4; --surface-2: #2b3326; color: var(--text); --pp-accent: #7ac142; --pp-accent-2: #8fd653; --pp-surface: #161a13; background: var(--pp-surface); border: 1px solid color-mix(in srgb, var(--pp-accent) 35%, transparent); border-radius: 16px; overflow: hidden; }
/* A banner is the publisher's card art (every launch banner has some), else its tint as a flat ground with a
   slight tonal step toward the card; no picture is drawn for it. */
.pp-banner { position: relative; height: 170px; overflow: hidden; background: var(--pp-banner, none) center 30% / cover no-repeat, linear-gradient(160deg, color-mix(in srgb, var(--pp-tint) 84%, #f2f4ee), var(--pp-tint) 70%); border-bottom: 1px solid color-mix(in srgb, var(--pp-accent) 35%, transparent); }
.pp-banner-name { position: absolute; left: 24px; right: 92px; top: 16px; font-family: var(--display); font-weight: 900; font-size: 3rem; line-height: 0.9; text-transform: uppercase; letter-spacing: 0.01em; color: color-mix(in srgb, var(--pp-tint) 45%, #f2f4ee); opacity: 0.55; overflow-wrap: anywhere; }
.pp-tile-art .pp-banner-name { left: 10px; right: 10px; top: 10px; font-size: 1.35rem; }
/* An emblem is its name's initials in a chip of its rarity's colour. */
.pp-emblem, .pp-emblem-chip { display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 3px solid var(--rim); color: var(--rim); font-family: var(--display); font-weight: 900; line-height: 1; letter-spacing: 0.02em; }
.pp-emblem { position: absolute; top: 14px; right: 16px; width: 56px; height: 56px; font-size: 1.3rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.36); }
.pp-emblem-chip { width: 52px; height: 52px; font-size: 1.2rem; }
.pp-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: end; padding: 0 24px; margin-top: -64px; position: relative; }
.pp-who { padding-bottom: 6px; min-width: 0; }
.pp-nameplate { display: inline-block; max-width: 100%; padding: 4px 16px; border-radius: 10px; font-weight: 900; font-size: clamp(1.25rem, 3.5vw, 1.7rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--plate-text); background: linear-gradient(135deg, var(--plate-a), var(--plate-b)); border: 1px solid var(--plate-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); overflow-wrap: anywhere; }
.pp-title { color: var(--title); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; margin: 6px 0 6px 4px; }
/* The title can sit on the edge of a banner's card art, so it carries the card's ground with it. */
.pp-card .pp-title { display: inline-block; margin-left: 0; padding: 2px 8px; border-radius: 6px; background: var(--pp-surface); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-2); font-size: 0.85rem; font-weight: 600; align-items: center; }
.pp-points { color: var(--gold); font-weight: 800; text-decoration: none; }
.pp-points:hover { text-decoration: underline; }
.pp-balance { color: var(--gold); font-weight: 800; font-size: 1.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-price { color: var(--gold); font-weight: 800; }
.pp-buy-preview .pp-tile { max-width: 260px; }
.pp-level { color: var(--text); }
.pp-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; justify-content: flex-end; }
.pp-bio { padding: 14px 24px 0; color: var(--text); max-width: 70ch; overflow-wrap: anywhere; }
.pp-card-level { padding: 16px 24px 0; }
.pp-level-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; }
.pp-level-head b { font-size: 1.05rem; }
.pp-bar { height: 10px; border-radius: var(--pill); background: rgba(200, 205, 196, 0.1); overflow: hidden; }
.pp-bar.small { height: 6px; flex: 1 1 80px; }
.pp-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pp-accent, var(--green)), var(--pp-accent-2, var(--green-bright))); transition: width 600ms ease; }
.pp-avatar { --av: 112px; position: relative; flex: none; width: var(--av); height: var(--av); border-radius: 50%; padding: var(--frame-w); background: var(--frame); box-shadow: 0 0 0 4px var(--pp-surface, var(--surface)); }
.pp-avatar.glow { box-shadow: 0 0 0 4px var(--pp-surface, var(--surface)), 0 0 22px 2px color-mix(in srgb, var(--frame-glow) 70%, transparent); }
.pp-avatar .avatar.large { width: 100%; height: 100%; font-size: calc(var(--av) * 0.3); border: 0; background: var(--surface-2); }
.pp-card-body .pp-avatar { margin: 0 6px 6px 14px; }

.pp-showcase { padding: 18px 24px 24px; }
.pp-showcase.grid, .pp-showcase.seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.pp-show-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px; border-radius: 12px; background: rgba(200, 205, 196, 0.04); border: 1px solid rgba(200, 205, 196, 0.06); }
.pp-show-name { font-weight: 800; font-size: 0.9rem; line-height: 1.25; }
.pp-show-tier { font-size: 0.76rem; color: var(--text-2); font-weight: 600; }
.pp-showcase.spotlight { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.pp-spot { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--pp-accent) 22%, transparent), transparent 70%), rgba(200, 205, 196, 0.04); }
.pp-spot > div { display: flex; flex-direction: column; gap: 4px; }
.pp-spot .pp-show-name { font-size: 1.1rem; }
.pp-spot-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.pp-showcase.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.pp-show-track { padding: 14px; border-radius: 12px; background: rgba(200, 205, 196, 0.04); border-top: 3px solid var(--track); display: grid; gap: 6px; }
.pp-show-track .pp-bar span { background: var(--track); }
.pp-privacy { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Destinations and stamps */
.pp-destinations { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.pp-destination { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 92px 18px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid transparent; color: inherit; text-decoration: none; overflow: hidden; transition: border-color 150ms ease, transform 150ms ease; }
.pp-destination:hover { border-color: var(--track); transform: translateY(-2px); }
.pp-dest-art { position: absolute; inset: 0 0 auto 0; height: 84px; background: var(--track-art) center 30% / cover; }
.pp-destination h3 { margin: 0; position: relative; }
.pp-dest-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-2); margin-top: auto; padding-top: 8px; }
.pp-dest-stats b { color: var(--text); }
.pp-stamp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.pp-stamps { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pp-stamp { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid transparent; }
.pp-stamp.locked { background: transparent; border: 1px dashed rgba(200, 205, 196, 0.2); }
.pp-stamp-text { min-width: 0; display: grid; gap: 3px; }
.pp-stamp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pp-tier-tag { font-size: 0.76rem; font-weight: 700; color: var(--rim); }
.pp-recent, .pp-history { list-style: none; display: grid; gap: 10px; }
.pp-recent li > .grow { flex: 1; }
.pp-vouch-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pp-vouch-chosen { display: flex; gap: 8px; flex-wrap: wrap; min-height: 0; margin: 4px 0 8px; }
.pp-vouch-chosen:empty { display: none; }
.pp-unpick { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0 0 0 4px; }
.pp-vouch-results { display: grid; gap: 4px; margin-bottom: 12px; max-height: 240px; overflow-y: auto; }
.pp-vouch-results:empty { display: none; }
.pp-vouch-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--control); background: var(--surface); border: var(--rule); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-vouch-pick:hover, .pp-vouch-pick:focus-visible { border-color: var(--green); }
@media (max-width: 560px) { .pp-vouches .pp-recent li { flex-wrap: wrap; } .pp-vouches .pp-vouch-actions { width: 100%; justify-content: flex-start; } }
.pp-recent li, .pp-history li { display: flex; gap: 12px; align-items: center; }
.pp-recent li > div, .pp-history li > div { display: grid; min-width: 0; }
.pp-history li > button { margin-left: auto; }
.pp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track, var(--text-2)); flex: none; }
.split-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.pp-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
/* A season's Passport card: a grid of stamps on autumn paper, and the goals for filling it in. */
.pp-season-card { --track: #f59e0b; --track-a: #fbbf24; --track-b: #9a3412; --text: #f2f4ee; --text-2: #c8cdc4; --surface: #1e1a13; --surface-2: #2a251c; color: var(--text); padding: 20px; border-radius: 16px; border: 1px solid rgba(245, 158, 11, 0.35);
  background: radial-gradient(ellipse at 100% 0%, rgba(245, 158, 11, 0.16), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(185, 28, 28, 0.14), transparent 55%), #17110a; display: grid; gap: 16px; }
.pp-card-count { color: var(--text-2); white-space: nowrap; }
.pp-card-count b { color: #fbbf24; font-size: 1.4rem; }
.pp-card-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-card-cell { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 12px; border: 1px dashed rgba(251, 191, 36, 0.3); }
.pp-card-cell.filled { border-style: solid; background: rgba(251, 191, 36, 0.08); }
.pp-season-card.compact .pp-card-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.pp-season-card.compact .pp-card-cell { padding: 8px 2px; }
.pp-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pp-goal { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(12, 15, 10, 0.5); }
.pp-goal.reached { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5); }
.pp-goal-rewards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pp-reward { font-size: 0.8rem; font-weight: 700; padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--rim); color: var(--text); }
.pp-reward small { color: var(--text-2); font-weight: 600; }
.shop-jump { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 16px 0 4px; }
.shop-jump a { color: var(--text-2); font-weight: 700; font-size: 0.92rem; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.shop-jump a:hover { color: var(--green-bright); }
.shop-jump .muted { margin-left: auto; }
.pp-shop-season { --text: #f2f4ee; --text-2: #c8cdc4; --surface: #1e1a13; --surface-2: #2a251c; color: var(--text); padding: 20px; border-radius: 16px; border: 1px solid rgba(245, 158, 11, 0.35); background: radial-gradient(ellipse at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%), #15100a; }
.pp-season { display: grid; gap: 8px; }
.pp-steps { padding-left: 22px; display: grid; gap: 10px; color: var(--text-2); }
.pp-steps b { color: var(--text); }
.pp-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--control); border: var(--rule); cursor: pointer; }
.pp-pick:has(input:checked) { border-color: var(--green); background: rgba(122, 193, 66, 0.08); }
.pp-code { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pp-code img { background: #fff; padding: 10px; border-radius: 12px; width: min(260px, 70vw); height: auto; }
.pp-code-text { font: 800 1.5rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; }

/* Customization */
.pp-customize { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; padding-top: 28px; }
.pp-preview { position: sticky; top: 84px; display: grid; gap: 12px; }
.pp-slot-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pp-slot-tabs a { color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 0.88rem; padding: 6px 12px; border-radius: var(--pill); border: var(--rule); min-height: 34px; display: inline-flex; align-items: center; }
.pp-slot-tabs a[aria-current="page"] { background: var(--surface-2); color: var(--text); border-color: rgba(200, 205, 196, 0.5); }
.pp-tiles, .pp-unlocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pp-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid transparent; }
.pp-tile.equipped { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.pp-tile.locked .pp-tile-art { filter: saturate(0.25) brightness(0.7); }
.pp-tile .row { margin-top: auto; gap: 6px; }
.pp-tile-art { display: grid; place-items: center; height: 92px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.pp-tile-art.banner { position: relative; place-items: start; background: var(--pp-banner, none) center 30% / cover no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--pp-tint) 82%, #f2f4ee), var(--pp-tint)); }
.pp-tile-art.theme { display: flex; gap: 6px; background: var(--pp-surface); }
.pp-tile-art.theme i { width: 26px; height: 26px; border-radius: 50%; background: var(--pp-accent); }
.pp-tile-art.theme i:nth-child(2) { background: var(--pp-accent-2); }
.pp-tile-art.theme i:nth-child(3) { background: transparent; border: 2px solid var(--pp-accent); }
.pp-tile-art.title { color: var(--title); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; text-align: center; padding: 0 8px; }
.pp-tile-art .pp-nameplate { font-size: 1rem; }
.pp-tile-art.layout { display: grid; grid-template-columns: repeat(4, 22px); gap: 6px; }
.pp-tile-art.layout i { width: 22px; height: 22px; border-radius: 6px; background: rgba(122, 193, 66, 0.5); }
.pp-tile-art.layout-spotlight { grid-template-columns: 44px 22px 22px; }
.pp-tile-art.layout-spotlight i:first-child { width: 44px; height: 44px; grid-row: span 2; }
.pp-tile-art.layout-tracks { grid-template-columns: 70px; gap: 6px; }
.pp-tile-art.layout-tracks i { width: 70px; height: 8px; }
.pp-tile-art.layout-tracks i:nth-child(1) { background: #facc15; } .pp-tile-art.layout-tracks i:nth-child(2) { background: #a855f7; } .pp-tile-art.layout-tracks i:nth-child(3) { background: #38bdf8; } .pp-tile-art.layout-tracks i:nth-child(4) { display: none; }
.pp-tile-art.layout-seasons i { border-radius: 50%; background: rgba(230, 190, 100, 0.6); }
.pp-tile .pp-avatar { --av: 64px; }
.pp-panel .pp-radio, .pp-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-weight: 600; cursor: pointer; }
.pp-radio > span { display: grid; }
.pp-radio input, .pp-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.pp-profile-form fieldset { border: 0; padding: 0; margin: 14px 0; }
.pp-picked { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.pp-picked li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: var(--rule); }
.pp-picked li .row { margin-left: auto; gap: 4px; }
.pp-pickable { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pp-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 10px; border: var(--rule); background: var(--surface); text-align: center; font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.pp-pick:not(:disabled):hover { border-color: var(--green); }
.pp-pick:disabled:not(.static) { opacity: 0.45; }
.pp-profile { padding-top: 28px; }
.pp-profile-recent { margin-top: 16px; }
.pp-mini { display: inline-flex; }

/* The staff counter: built for one hand and a phone, a few seconds per player */
.pp-counter-head { padding-top: 20px; }
.pp-eventbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--control); background: rgba(122, 193, 66, 0.12); border: 1px solid rgba(122, 193, 66, 0.4); font-weight: 600; }
.pp-eventbar.off { background: rgba(230, 190, 100, 0.08); border-color: rgba(230, 190, 100, 0.4); color: var(--text-2); }
.pp-eventbar .pp-dot { display: inline-block; margin-right: 8px; vertical-align: middle; }
.pp-counter-who { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.pp-counter-who .pp-avatar { --av: 72px; }
.pp-counter-name { margin: 2px 0 4px; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.pp-counter { display: grid; gap: 14px; }
.pp-big { width: 100%; min-height: 64px; font-size: 1.15rem; border-radius: 16px; }
.pp-result { padding: 16px; border-radius: 14px; background: rgba(122, 193, 66, 0.12); border: 1px solid rgba(122, 193, 66, 0.5); display: grid; gap: 14px; animation: pp-flash 600ms ease-out; }
.pp-result.earned { border-color: rgba(230, 190, 100, 0.7); background: linear-gradient(135deg, rgba(230, 190, 100, 0.16), rgba(122, 193, 66, 0.1)); }
@keyframes pp-flash { from { background: rgba(122, 193, 66, 0.45); } }
.pp-result-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pp-result-head > div { flex: 1 1 200px; }
.pp-result-head .btn { margin-left: auto; }
.pp-result .pp-check { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--black); font-weight: 900; font-size: 1.2rem; display: inline-grid; place-items: center; padding: 0; cursor: default; }
.pp-unlocked { display: grid; gap: 10px; }
.pp-fresh { margin: 0 0 8px; padding: 16px; border-radius: 14px; border: 1px solid rgba(230, 190, 100, 0.6); background: linear-gradient(135deg, rgba(230, 190, 100, 0.14), rgba(122, 193, 66, 0.08)); }
.pp-fresh h2 { margin-bottom: 10px; }
.pp-unlock { display: flex; gap: 14px; align-items: center; }
.pp-unlock > span { display: grid; }
.pp-unlock-line { font-size: 0.85rem; color: var(--text-2); }
.pp-unlock-line b { color: var(--text); }
.pp-unlock-line small { color: var(--text-2); }
.pp-more summary { cursor: pointer; color: var(--text-2); font-weight: 700; min-height: var(--touch); display: flex; align-items: center; }
.pp-act-group { margin-top: 14px; }
.pp-act-group h3 { color: var(--track); font-size: 0.95rem; display: flex; gap: 8px; align-items: center; }
.pp-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pp-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 64px; padding: 10px 12px; border-radius: var(--control); background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--track) 45%, transparent); font-weight: 700; line-height: 1.25; touch-action: manipulation; }
.pp-act small { color: var(--text-2); font-weight: 600; font-size: 0.78rem; margin-top: auto; }
.pp-act:hover { background: color-mix(in srgb, var(--track) 14%, var(--surface-2)); }
.pp-act.current { border-color: var(--track); box-shadow: inset 0 0 0 1px var(--track); }
.pp-act:active { transform: scale(0.98); }
.pp-event-group { border: 0; padding: 0; margin: 12px 0 0; }
.pp-event-group legend { color: var(--track); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.pp-event-option { display: flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 0 8px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.pp-event-option:has(input:checked) { background: color-mix(in srgb, var(--track) 16%, transparent); }
.pp-event-option input { width: 18px; height: 18px; accent-color: var(--green); }
.pp-card-print { display: flex; gap: 16px; align-items: center; width: 3.375in; height: 2.125in; padding: 0.15in; border: 1px dashed #999; border-radius: 10px; background: #fff; color: #000; }
.pp-card-print div { display: grid; gap: 4px; font-size: 10pt; }
.pp-card-print b { font-size: 11pt; }
.pp-card-print small { font-size: 8pt; }
.pp-card-print .muted { color: #555; }
.pp-card-print img { width: 1.4in; height: 1.4in; }
@media print {
  @page { margin: 0.4in; }
  body { background: #fff; color: #000; }
  .nav, .tabbar, footer, .bounty-bar, .preview-banner, .print-hide, .no-print, #notice, .skip-link { display: none !important; }
}


/* ---------- Footer ---------- */
/* The close: the wordmark set large on its own ink tile, the two stores, and the sections, as tiles of one board;
   the legal line under them. */
footer { max-width: var(--max); width: 100%; margin: 72px auto 0; padding: 0 24px 28px; color: var(--silver); font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 4fr); gap: 8px; }
.foot-tile { background: var(--ink); border-radius: var(--radius); padding: 26px 26px 24px; }
.foot-brand { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 220px; }
.foot-mark .wordmark { font-size: clamp(3.4rem, 7.4vw, 6.4rem); letter-spacing: 0.02em; }
.foot-mark .wordmark b { margin-left: 0.08em; padding: 0.04em 0.12em 0; border-radius: 0.06em; }
footer .tagline { color: var(--paper); font-weight: 700; font-size: 1.1rem; }
.foot-by { color: var(--silver); }
.foot-stores { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.foot-stores b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--paper); letter-spacing: 0.01em; }
.foot-stores p + p { margin-top: 10px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 2px 16px; }
.foot-links a { min-height: 36px; display: flex; align-items: center; font-weight: 600; text-decoration: none; }
footer a { color: var(--silver); }
footer a:hover { color: var(--green-bright); }
footer .legal { font-size: 0.78rem; max-width: 92ch; margin-top: 18px; color: var(--muted); }


/* ---------- Responsive ---------- */
/* The bar gives up its extras as the window narrows: the attribution line and the key hint first, then the search
   label. The wordmark always stays. */
@media (max-width: 1460px) {
  .brand-name small { display: none; }
  .search-field { min-width: 0; }
  .search-field kbd { display: none; }
}
@media (max-width: 1280px) {
  .search-label { display: none; }
  .search-field { padding: 8px 10px; }
  .nav-links a, .nav-games > summary { padding: 8px 8px; font-size: 0.86rem; }
}
/* On a tablet the bar keeps the icons and drops the words; the current section is still underlined in green. */
@media (max-width: 1140px) and (min-width: 901px) {
  .nav-label { display: none; }
  .nav-links a, .nav-games > summary { padding: 8px 10px; }
  .nav-links svg { display: block; width: 20px; height: 20px; }
  .nav-scan { padding: 6px 9px; }
}
@media (max-width: 900px) {
  .split, .deck-editor { grid-template-columns: 1fr; }
  .home-secondary.member { grid-template-columns: 1fr 1fr; }
  .home-secondary.member > .panel:first-child { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .event-rows-2, .league-grid { grid-template-columns: minmax(0, 1fr); }
  .game-side { position: static; }
  .community-grid { grid-template-columns: minmax(0, 1fr); }
  /* One column, with where to play straight after what is on, as before the page had two. */
  .game-page { display: flex; flex-direction: column; align-items: stretch; }
  .game-main, .game-side { display: contents; }
  .game-page #week { order: 1; } .game-page #play { order: 2; } .game-page #stamps { order: 3; }
  .game-page #league { order: 4; } .game-page #learn { order: 5; } .game-page #standings { order: 6; }
  .event-rows { grid-template-columns: 1fr; gap: 10px; }
  .search-panel { position: static; }
  .deck-head { grid-template-columns: 1fr 1fr; }
}
/* The bar has six sections, search, the bell, the player and the staff Scan button: below 900 px it folds into the menu,
   earlier than the rest of the phone layout, so nothing in it can overlap. */
@media (max-width: 900px) {
  .nav-links, .nav-right { display: none; }
  .menu-toggle { display: block; position: relative; }
  .menu-toggle summary { list-style: none; cursor: pointer; color: var(--green-bright); font-weight: 700; min-height: var(--touch); display: inline-flex; align-items: center; padding: 0 8px; }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .menu-sheet { min-width: 250px; max-height: calc(100vh - 80px); overflow: auto; }
  .nav-inner { padding: 10px 16px; }
  .brand-name { font-size: 0.95rem; }
  .nav-inner:has(.nav-scan:not([hidden])) .brand-name small { display: none; }
  .nav-scan { padding: 6px 12px; }
}
@media (max-width: 767px) {
  /* The home page, standing up: the headline, then the art band, then the first card. */
  .hero-art { inset: auto 0 0 0; height: 170px; border-left: 0; border-top: var(--rule-green); }
  .hero-inner { padding: 26px 16px 190px; min-height: 0; }
  .hero-title { font-size: 2.8rem; }
  .hero-lede { font-size: 1.05rem; max-width: 46ch; }
  .hero-row { margin-top: 14px; }
  .game-hero-art { inset: auto 0 0 0; height: 150px; border-left: 0; border-top: var(--rule-green); }
  .game-hero .hero-inner { padding: 24px 16px 160px; min-height: 0; }
  .home-games { padding-top: 14px; }
  .game-cards { grid-template-columns: 1fr; gap: 12px; }
  .game-card-art { height: 180px; }
  .game-card-logo { height: 40px; top: 14px; left: 14px; }
  .discover, #home-discover { margin-top: 14px; }
  #home-discover { min-height: 420px; }
  #home-events { min-height: 330px; }
  .discover-card { grid-template-columns: 1fr; min-height: 0; }
  .discover { min-height: 0; }
  .discover-art { order: -1; min-height: 150px; }
  .discover-art { border-left: 0; border-bottom: var(--rule); }
  .discover-copy { padding: 18px 18px 6px; }
  .discover:has(.discover-dots) .discover-copy { padding-bottom: 6px; }
  .discover-copy h2 { font-size: 1.6rem; }
  .discover-perks { gap: 12px; }
  .discover-dots { position: static; padding: 0 10px 6px; }
  .home-events { padding: 18px 16px; }
  .home-events h2 { font-size: 1.6rem; }
  .event-row { grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 12px; padding: 10px; }
  .event-thumb { width: 64px; height: 56px; }
  .events-link { font-size: 0.85rem; }
  .home-secondary.member, .home-secondary.visitor { grid-template-columns: 1fr; }
  .corner-grid { gap: 8px; }
  .panel { padding: 16px; }
  .page-head { padding: 22px 0 14px; }
  .subnav { margin-top: 12px; }
  .lede { font-size: 0.95rem; }
  .ruled-row { grid-template-columns: 1fr; gap: 4px; }
  .form-grid, .deck-head, .preview-options { grid-template-columns: 1fr; }
  .card-row { grid-template-columns: 76px minmax(0, 1fr); }
  .card-row .tools { grid-column: 2; justify-content: flex-end; }
  .pp-card-body { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 0 16px; gap: 10px; margin-top: -52px; }
  .pp-card-body .pp-avatar { --av: 92px; }
  .pp-who { padding-bottom: 0; margin-top: 8px; }
  .pp-card-actions { justify-content: flex-start; padding-bottom: 0; }
  .pp-banner { height: 128px; }
  .pp-emblem { width: 44px; height: 44px; font-size: 1.05rem; }
  .pp-banner-name { left: 16px; right: 72px; top: 12px; font-size: 2rem; }
  .pp-bio, .pp-card-level { padding-left: 16px; padding-right: 16px; }
  .pp-showcase { padding: 14px 16px 18px; }
  .pp-showcase.grid { grid-template-columns: repeat(2, 1fr); }
  .pp-showcase.spotlight { grid-template-columns: 1fr; }
  .pp-stamps { grid-template-columns: 1fr; }
  .pp-season-card.compact .pp-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-card-cell b { font-size: 0.85rem; }
  .pp-card-cell .small { display: none; }
  .pp-customize { grid-template-columns: 1fr; padding-top: 16px; }
  .pp-preview { position: static; }
  .pp-tiles, .pp-unlocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The counter: the result and "Scan the next player" stay on the first screen of a phone. */
  .pp-counter-head { padding: 12px 0 0; }
  .pp-eventbar { flex-wrap: nowrap; padding: 6px 6px 6px 12px; font-size: 0.88rem; }
  .pp-eventbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-eventbar .btn { flex: none; }
  .pp-counter-who { margin-top: 10px; gap: 12px; }
  .pp-counter-who .pp-avatar { --av: 52px; }
  .pp-counter-name { font-size: 1.35rem; margin: 0 0 2px; }
  .pp-counter-head .subnav { column-gap: 16px; margin-top: 2px; }
  .pp-counter-head .subnav a { font-size: 0.88rem; }
  .pp-counter { padding-top: 14px; }
  .pp-picked li { flex-wrap: wrap; }
  .pick { grid-template-columns: auto minmax(0, 1fr); }
  .pick .pick-qty, .pick > small { grid-column: 2; }
  .deck-hero { height: 160px; }
  .share { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .share-link { justify-content: center; }
  .wrap { padding: 0 16px; }
  /* Thumbs, not cursors: every control is at least 44px tall on a phone. */
  .btn-sm, .btn-xs, .filter-group button.chip, .card-row .tools button, .card-row .qty button, .placement-list .move button { min-height: var(--touch); }
  .card-row .tools button, .card-row .qty button { width: 40px; }
  .placement-list li { grid-template-columns: 40px 1fr auto; padding: 6px 10px; }
  select, input, textarea { font-size: 16px; } /* iOS zooms into anything smaller */
  .filter-select { flex: 1 1 140px; }
  .filter-select select { flex: 1; }
  .page-head .row .btn { width: 100%; }
  .form-actions .btn { flex: 1 1 auto; }
  dialog { padding: 18px; width: calc(100% - 16px); max-height: 92vh; }
  .stat-strip { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .data-table th, .data-table td { padding: 10px 8px; }
  footer { padding: 0 16px 24px; margin-top: 48px; }
}
/* ---------- The phone app ---------- */
/* On an iPhone Guildhall behaves like an app: a slim glass bar at the top with the logo, search, the bell and the player;
   the sections in a tab bar at the bottom; menus and dialogs rise from the bottom as sheets; section tabs scroll sideways.
   Saved to the home screen it runs full screen, so every edge keeps clear of the notch and the home indicator. */
.tabbar, .game-switch { display: none; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { from { transform: translateY(-16px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 767px) {
  :root { --tabbar: 54px; --bar: 52px; }
  html { -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--bar) + env(safe-area-inset-top) + 8px); }
  body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); touch-action: manipulation; }
  #main > * { animation: fade-in 180ms ease-out; }
  .btn, .tabbar a, .tabbar button, .dropdown-menu a, .dropdown-menu button, .subnav a, .game-switch a { transition: transform 120ms ease, opacity 120ms ease, background 150ms ease; }
  .btn:active, .game-cards > .game-card:active { transform: scale(0.97); }
  .tabbar a:active, .tabbar button:active { opacity: 0.55; }

  /* The top bar: glass over the page, under the status bar when Guildhall runs from the home screen. */
  .nav { background: rgba(12, 15, 10, 0.78); border-bottom: 1px solid rgba(200, 205, 196, 0.1); padding-top: env(safe-area-inset-top); }
  .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
  .nav-inner { min-height: var(--bar); gap: 4px; padding: 4px max(12px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); }
  .brand { margin-right: auto; gap: 8px; min-width: 0; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 1rem; }
  .brand-name small, .nav-inner:has(.nav-scan:not([hidden])) .brand-name small { display: none; }
  .wordmark { font-size: 1.3rem; }
  .brand .beta { display: none; }
  .nav-right { display: flex; gap: 0; }
  .nav-scan { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border: 0; border-radius: 50%; }
  .nav-scan .nav-label { display: none; }
  .nav-scan svg { width: 22px; height: 22px; }
  .search-field, .nav-inner:has(.nav-scan:not([hidden])) .search-field { width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--silver); }
  .search-field svg { width: 21px; height: 21px; }
  .search-label, .search-field kbd { display: none; }
  .nav-search[open] .search-field { color: var(--green-bright); }
  .account-button { padding: 0 0 0 4px; min-height: 40px; }
  .account-button > span:not(.avatar) { display: none; }
  .account-button .avatar { width: 32px; height: 32px; font-size: 0.72rem; }
  .nav-right .cta { min-height: 36px; padding: 6px 12px; font-size: 0.88rem; margin-left: 4px; }
  .nav-right .cta-tail { display: none; }
  .menu-toggle { display: block; position: static; }
  .menu-toggle summary { display: none; }

  /* Menus are sheets: they rise from the bottom over a dimmed page and close on a tap outside. */
  body:has(.nav details[open]:not(.nav-search)) { overflow: hidden; }
  .nav details.dropdown[open]::before { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.55); animation: fade-in 200ms ease-out; }
  .nav .dropdown-menu, .menu-sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 2; min-width: 0; max-height: 84vh; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 1px solid rgba(122, 193, 66, 0.35); border-radius: 16px 16px 0 0; padding: 26px max(12px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); animation: sheet-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); }
  .nav .dropdown-menu::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(200, 205, 196, 0.3); }
  .nav .dropdown-menu a, .nav .dropdown-menu button { min-height: 50px; font-size: 1.02rem; padding: 10px 14px; border-radius: 0; border-bottom: 1px solid rgba(200, 205, 196, 0.08); }
  .nav .dropdown-menu a:hover, .nav .dropdown-menu button:hover { background: none; color: var(--paper); }
  .nav .dropdown-menu a:active, .nav .dropdown-menu button:active { background: rgba(122, 193, 66, 0.12); }
  .nav .dropdown-menu a[aria-current="page"] { color: var(--green-bright); }
  .menu-head { padding: 18px 14px 6px; }
  .menu-head + .menu-head, .menu-rule { border-top: 0; }
  .menu-sheet .menu-head:first-child { padding-top: 4px; }
  .menu-sheet .nav-game { padding-left: 30px; }
  .menu-sheet .in-tabbar { display: none; }
  /* Search drops from the top bar instead, so the keyboard never covers it. */
  .nav .nav-search-menu { top: calc(var(--bar) + env(safe-area-inset-top)); bottom: auto; border-top: 0; border-bottom: 1px solid rgba(122, 193, 66, 0.35); border-radius: 0 0 16px 16px; padding: 14px 16px 18px; animation: sheet-down 200ms ease-out; }
  .nav .nav-search-menu::before { display: none; }
  .nav details.nav-search[open]::before { top: calc(var(--bar) + env(safe-area-inset-top)); }

  /* The tab bar. */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); background: rgba(12, 15, 10, 0.84); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid rgba(200, 205, 196, 0.12); -webkit-user-select: none; user-select: none; }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; color: var(--muted); text-decoration: none; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; }
  .tabbar svg { width: 25px; height: 25px; }
  .tabbar a[aria-current="page"], .tabbar button.current, .tabbar button[aria-expanded="true"] { color: var(--green-bright); }
  .tabbar .count-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.66rem; font-style: normal; border: 2px solid var(--black); box-sizing: content-box; }

  /* Banners stay one line; a toast clears the tab bar. */
  .preview-banner { font-size: 0.76rem; padding: 6px 16px; line-height: 1.4; }
  .bounty-bar { text-align: left; font-size: 0.84rem; padding: 10px 16px; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #notice { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px); width: calc(100% - 24px); text-align: center; }

  /* Large titles, and section tabs as a sideways strip of segments. */
  .page-head { padding: 18px 0 0; }
  .page-head h1 { font-size: 2.5rem; line-height: 0.95; margin: 4px 0 8px; }
  .page-head .lede { color: var(--text-2); }
  .subnav { flex-wrap: nowrap; gap: 8px; column-gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 14px; padding-bottom: 14px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a, .pp-counter-head .subnav a { flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--pill); background: var(--ink); border: 1px solid rgba(200, 205, 196, 0.12); font-size: 0.88rem; }
  .subnav a:last-child { margin-right: 32px; }
  .subnav a[aria-current="page"] { box-shadow: none; background: rgba(122, 193, 66, 0.14); border-color: rgba(122, 193, 66, 0.6); }

  /* A game page switches games from its own head, like a segmented control. */
  .game-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; margin-bottom: 16px; background: rgba(12, 15, 10, 0.7); border: 1px solid rgba(200, 205, 196, 0.12); border-radius: var(--control); }
  .game-switch a { text-align: center; padding: 7px 4px; border-radius: 6px; color: var(--silver); text-decoration: none; font-weight: 700; font-size: 0.86rem; }
  .game-switch a[aria-current="page"] { background: var(--ink-3); color: var(--paper); }

  /* Heads give the first screen back to the content under them. */
  .hero-inner { padding: 20px 16px 140px; }
  .hero-title { font-size: 2.5rem; }
  .hero-lede { font-size: 1rem; margin-top: 8px; }
  .hero-art { height: 130px; }
  .game-hero .hero-inner { padding: 14px 16px 136px; }
  .game-hero h1 { font-size: 2.4rem; }
  .game-hero .lede { font-size: 1rem; }
  .game-hero-art { height: 128px; }
  .shop-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .shop-jump::-webkit-scrollbar { display: none; }
  .shop-jump > * { flex: none; }
  /* Filter chips scroll sideways in one line each instead of stacking up the screen. */
  .filter-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-group > * { flex: none; }
  .filter-group > :last-child { margin-right: 32px; }

  /* The home page's three games sit side by side and swipe, the next one peeking in. */
  .game-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .game-cards::-webkit-scrollbar { display: none; }
  .game-cards > .game-card { scroll-snap-align: start; }
  .game-card-art { height: 160px; }

  /* Dialogs are sheets too. */
  dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; border: 0; border-top: 1px solid rgba(122, 193, 66, 0.35); border-radius: 16px 16px 0 0; padding: 26px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overscroll-behavior: contain; }
  dialog[open] { animation: sheet-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  dialog::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(200, 205, 196, 0.3); }
  .dialog-head { position: sticky; top: -26px; z-index: 1; background: var(--surface); margin: -26px 0 14px; padding: 26px 0 10px; }
  .dialog-head .close { min-width: var(--touch); min-height: var(--touch); }
  dialog .form-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--surface); padding: 12px 0 calc(18px + env(safe-area-inset-bottom)); margin-bottom: calc(-18px - env(safe-area-inset-bottom)); }

  /* The footer keeps the wordmark, the stores and the legal line; the links are in the tab bar and More. */
  footer { margin-top: 36px; padding: 0 16px 18px; }
  .foot-grid { grid-template-columns: 1fr; gap: 6px; }
  .foot-tile { padding: 20px; }
  .foot-brand { min-height: 0; }
  .foot-mark .wordmark { font-size: 3.6rem; }
  .foot-links { display: none; }
  .foot-stores { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 14px 28px; }
  .foot-stores p + p { margin-top: 0; }
}
/* The inner pages on a phone, with the same treatment as the home page: short sections with a heading and a quiet
   "see all" link; anything to browse (paths, challenges) swipes sideways; decks and games are compact rows that
   open on a tap; long lists show six and "Show all". */
.deck-format, .fold-more { display: none; }
@media (max-width: 767px) {
  section.block { padding: 30px 0 2px; }
  h2 { font-size: 1.6rem; }
  .spread:has(> h2) { flex-wrap: nowrap; align-items: baseline; margin-bottom: 12px; }
  .spread > h2 { margin: 0; }
  .spread:has(> h2) > a { flex: none; font-size: 0.86rem; font-weight: 700; text-decoration: none; }

  /* A page's own actions sit under its title, side by side and full width. */
  .page-head .spread { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .spread > .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }

  /* Sideways rows. */
  .pp-destinations, h2 + .pp-stamps { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .pp-destinations::-webkit-scrollbar, h2 + .pp-stamps::-webkit-scrollbar { display: none; }
  .pp-destinations > *, h2 + .pp-stamps > * { scroll-snap-align: start; }

  /* Decks: a thumbnail and three lines. */
  .deck-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: stretch; }
  .deck-cover { height: auto; min-height: 92px; border-radius: var(--control) 0 0 var(--control); }
  .deck-cover .chip { display: none; }
  .deck-card .body { padding: 12px 14px; align-self: center; }
  .deck-card .body .spread { margin-top: 4px !important; }
  .deck-card h3 { font-size: 1rem; }
  .deck-format { display: inline; }
  .grid-2, .grid-3 { gap: 10px; }

  /* Games: tighter, and a game whose only action is Details opens with a tap anywhere on it. The Details link
     stays the card's link for the keyboard and screen readers: it shows as the chevron, and its hit area stretches
     over the card, under the player links. */
  .game-card { padding: 12px 14px; position: relative; }
  .game-card .spread { gap: 2px 10px; }
  .game-card .seats { margin: 6px 0 8px; gap: 2px 14px; position: relative; z-index: 1; }
  .game-card:has(> .row > a.btn:only-child) { padding-right: 34px; }
  .game-card:has(> .row > a.btn:only-child) .seats { margin-bottom: 0; }
  .game-card > .row:has(> a.btn:only-child) { height: 0; margin: 0; }
  .game-card > .row > a.btn:only-child { position: static; min-height: 0; padding: 0; border: 0; font-size: 0; line-height: 0; }
  .game-card > .row > a.btn:only-child::before { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.4rem; line-height: 1; }
  .game-card > .row > a.btn:only-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .game-card:has(> .row > a.btn:only-child:focus-visible) { outline: 3px solid var(--green-bright); outline-offset: 2px; }
  .game-card > .row > a.btn:only-child:focus-visible { outline: 0; }
  .game-card:has(> .row > a.btn:only-child:active) { background: var(--surface-2); }

  /* Tables keep the columns that matter, and names stay on one line without their avatars. */
  .data-table .opt { display: none; }
  .data-table .card-name, .data-table .card-name button { text-align: left; }
  .data-table td .player-link .avatar { display: none; }
  .data-table td { padding: 10px 8px; }
  .pp-slot-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .pp-slot-tabs::-webkit-scrollbar { display: none; }
  .pp-slot-tabs > * { flex: none; }
  .pp-slot-tabs > :last-child { margin-right: 32px; }
  .pp-destinations:has(> :only-child), h2 + .pp-stamps:has(> :only-child) { grid-auto-columns: 100%; }
  .pp-customize { grid-template-columns: minmax(0, 1fr); }

  /* Long lists fold. */
  .folded > :nth-child(n + 7) { display: none; }
  .fold-more { display: flex; width: 100%; align-items: center; justify-content: center; min-height: var(--touch); margin-top: 10px; border: var(--rule); border-radius: var(--control); background: var(--surface); color: var(--green-bright); font-weight: 700; font-size: 0.92rem; }
  .fold-more:active { background: var(--surface-2); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .btn:active, .game-cards > .game-card:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }