/* PROVING GROUND shell: tokens and components shared by every platform page, on top of style.css.
   Nav, cards, rails, badges, countdowns, tables, forms, kind badges, axis colours. Logical properties for RTL. */
:root {
  --pg-speed: #ffb454;     /* axis speed: brass stopwatch */
  --pg-smart: #8fd3ff;     /* axis smart: cold steel of the balance */
  --pg-teamwork: #a3e0a0;  /* axis teamwork: two gears */
  --pg-live: #4cd97b;
  --pg-beta: #c9a0ff;
  --pg-soon: #a39785; /* 5.9:1 on --bg-3 (was #8a7f70, 4.3:1: below WCAG AA, Lighthouse S23) */
  --pg-house: #b9ad9b;
  --pg-rail-w: 320px;
  --pg-gap: 16px;
  --pg-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#main { scroll-margin-top: 16px; }
.pg-skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--accent); color: #1a1208; padding: 6px 10px; border-radius: 8px; z-index: 50; }
.pg-skip:focus { inset-inline-start: 8px; }

/* ------------------------------------------------------------ nav: ONE row on every width (UX-FAST 5, tools/shell-sync.js)
   brand · links (hidden under 900 px) · "Bring your harness" CTA (always) · sign-in / avatar · language menu · menu button
   (under 900 px). The menus are <details>: they work without JavaScript; nav.js closes them on Escape and outside clicks. */
header.site, header.site.pg-nav { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px 14px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); min-height: 56px; }
.pg-brand-block { display: grid; grid-template-columns: auto auto; grid-template-areas: "brand tag" "byline byline"; align-items: baseline; column-gap: 10px; row-gap: 0; flex: none; } /* never shrinks below its nowrap children (they would paint over the links) */
.pg-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; color: var(--text); font-size: 1.05rem; white-space: nowrap; }
.pg-brand .pg-mark { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; background: var(--bg-3); flex: none; }
.pg-brand .pg-name { color: var(--text); }
.pg-tagline { grid-area: tag; font-size: 0.8rem; letter-spacing: 0.04em; white-space: nowrap; }
.pg-brand-block .byline { grid-area: byline; margin: 0; font-size: 0.82rem; white-space: nowrap; }
.pg-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin-inline: auto; flex: none; }
.pg-links a { flex: none; display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; padding: 0 8px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; border: 1px solid transparent; white-space: nowrap; }
.pg-links a:hover { background: var(--bg-3); }
.pg-links a[aria-current="page"] { background: var(--bg-3); border-color: var(--line); color: var(--accent); }
.pg-links a.cta { border-color: var(--accent); color: var(--accent); margin-inline-start: 6px; }
.pg-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.pg-tools .btn.small { min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }
.pg-tools .pg-signin[hidden] { display: none; }
.pg-bell { position: relative; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: 1.05rem; min-height: 36px; padding: 0 6px; border-radius: 8px; }
.pg-bell:hover { background: var(--bg-3); }
.pg-bell-count { min-width: 1.2em; font-size: 0.72rem; font-weight: 800; color: #1a1208; background: var(--accent); border-radius: 999px; padding: 0 5px; text-align: center; line-height: 1.4; }
.pg-bell:not(.has-unread) .pg-bell-count { display: none; }
.pg-account { position: relative; }
.pg-account summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-3); font-weight: 600; font-size: 0.9rem; }
.pg-account summary::-webkit-details-marker { display: none; }
.pg-avatar-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #1a1208; display: inline-grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.pg-avatar-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--pg-shadow); z-index: 45; }
.pg-menu a, .pg-menu button { display: block; width: 100%; min-height: 40px; text-align: start; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.pg-menu a:hover, .pg-menu button:hover { background: var(--bg-3); }
.pg-menu .pg-signout { color: var(--danger); }
.pg-menu .pg-menu-who { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* language menu: the current code in the summary, the eight crawlable <a data-lang> links in the panel */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-code::before { content: attr(data-lang-code); }
.lang-menu > summary::after { content: "\25BE"; font-size: 0.7rem; color: var(--muted); }
.lang-menu .lang-switch { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; display: grid; gap: 2px; min-width: 176px; margin: 0; padding: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--pg-shadow); }
.lang-switch a[data-lang] { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; border: 1px solid transparent; color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.lang-switch a[data-lang]:hover { background: var(--bg-3); }
.lang-switch a[data-lang][aria-pressed="true"], .lang-switch a[data-lang][aria-current="true"] { background: var(--bg-3); border-color: var(--line); color: var(--accent); }
/* phone menu (under 900 px): the five links, Sign in and the language list */
.pg-menu-wrap { position: relative; display: none; }
.pg-menu-wrap > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-3); }
.pg-menu-wrap > summary::-webkit-details-marker { display: none; }
.pg-burger { position: relative; display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.pg-burger::before, .pg-burger::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.pg-burger::before { top: -6px; }
.pg-burger::after { top: 6px; }
.pg-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; width: min(320px, calc(100vw - 32px)); padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--pg-shadow); display: grid; gap: 8px; }
.pg-menu-links { display: grid; gap: 2px; }
.pg-menu-links a, .pg-menu-links button { display: flex; align-items: center; min-height: 44px; width: 100%; padding: 0 12px; border-radius: 8px; border: 0; background: none; color: var(--text); text-decoration: none; font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
.pg-menu-links a:hover, .pg-menu-links button:hover { background: var(--bg-3); }
.pg-menu-links .pg-signout { color: var(--danger); }
.pg-menu-links a[aria-current="page"] { background: var(--bg-3); color: var(--accent); }
.pg-menu-panel .btn, .pg-menu-panel .btn.small { display: flex; justify-content: center; min-height: 44px; } /* beats style.css .btn.small: 44 px tap target */
.pg-menu-panel .btn[hidden] { display: none; }
.pg-menu-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.pg-menu-langs a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-menu-langs a:hover { background: var(--bg-3); color: var(--text); }
.pg-menu-langs a[aria-current="true"] { color: var(--accent); background: var(--bg-3); }
/* one-row fit classes set by nav.js (fitHeader) when brand + links + tools exceed the header's width, in this order:
   tagline/byline, avatar name, tight links (French/German labels on a 1080 px page), the five links (the phone menu
   takes them), the brand name, the language menu (the phone menu lists the eight languages), the CTA's width (ellipsis,
   320 px signed in). The media queries below are the no-JS baseline for English. */
header.site.pg-fit-tag .pg-tagline, header.site.pg-fit-tag .pg-brand-block .byline { display: none; }
header.site.pg-fit-tag .pg-brand-block { grid-template-columns: auto; grid-template-areas: "brand"; }
header.site.pg-fit-name .pg-avatar-name { display: none; }
header.site.pg-fit-tight .pg-links { gap: 0; }
header.site.pg-fit-tight .pg-links a { padding: 0 5px; }
header.site.pg-fit-tight .pg-brand { letter-spacing: 0.03em; }
header.site.pg-fit-tight .pg-links a { font-size: 0.85rem; }
header.site.pg-fit-tight .pg-links a.cta { margin-inline-start: 2px; }
header.site.pg-fit-tight .pg-tools .btn.small.pg-signin { padding-inline: 8px; }
header.site.pg-fit-links .pg-links a:not(.cta) { display: none; }
header.site.pg-fit-links .pg-links { margin-inline-start: auto; margin-inline-end: 0; }
header.site.pg-fit-links .pg-links a.cta { margin-inline-start: 0; }
header.site.pg-fit-links .pg-menu-wrap { display: block; }
header.site.pg-fit-brand .pg-brand .pg-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
header.site.pg-fit-brand .pg-brand { gap: 0; }
header.site.pg-fit-lang .lang-menu { display: none; } /* the eight languages stay reachable in the phone menu (a[data-lang-go]) */
header.site.pg-fit-cta .pg-links { flex: 0 1 auto; min-width: 0; }
header.site.pg-fit-cta .pg-links a.cta { display: block; min-width: 0; max-width: 100%; line-height: 38px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199px) { /* a 1080 px container cannot hold brand + tagline (356) + five links + CTA (~600) + tools (131) */
  .pg-tagline, .pg-brand-block .byline { display: none; }
  .pg-brand-block { grid-template-columns: auto; grid-template-areas: "brand"; }
  .pg-avatar-name { display: none; } /* the name is the first row of the avatar menu */
}
@media (max-width: 899px) {
  .pg-links a:not(.cta) { display: none; }
  .pg-links { margin-inline-start: auto; margin-inline-end: 0; }
  .pg-links a.cta { margin-inline-start: 0; }
  .pg-menu-wrap { display: block; }
}
@media (max-width: 640px) {
  header.site, header.site.pg-nav { gap: 8px; }
  .pg-tools .btn.small.pg-signin { display: none; } /* Sign in lives in the phone menu */
  .pg-account summary { gap: 4px; padding: 2px 4px; min-width: 40px; justify-content: center; }
  .pg-account .pg-caret { display: none; }
  .pg-links a.cta { font-size: 0.82rem; padding: 0 8px; }
  .pg-bell { display: none; } /* Notifications sits in the avatar menu; CTA · avatar · EN · menu fit in 390 px */
  .lang-menu > summary, .pg-account summary { min-height: 40px; } /* tap targets >= 40 px on phones */
}
@media (max-width: 599px) { /* emblem only: brand 36 + CTA ~160 + avatar · EN · menu (~142) fit 390 px */
  .pg-brand .pg-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-brand { gap: 0; }
}

/* 404 page (public/404.html): the five links as pills */
.notfound-links { list-style: none; margin: 0 0 16px; padding: 0; }
.notfound-links a { display: inline-flex; align-items: center; min-height: 40px; }

/* ------------------------------------------------------------ footer */
footer.site.pg-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
footer.site.pg-footer p { margin: 0 0 6px; }
footer.site.pg-footer .pg-name { font-weight: 800; letter-spacing: 0.06em; color: var(--text); }
@media (max-width: 640px) { footer.site .pg-footer-links a { display: inline-block; padding: 10px 2px; } } /* tap targets >= 40 px */

/* ------------------------------------------------------------ layout: main + rail */
.pg-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--pg-rail-w); gap: var(--pg-gap); align-items: start; }
.pg-layout > .pg-main { min-width: 0; }
.pg-rail { display: grid; gap: var(--pg-gap); min-width: 0; }
.pg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pg-gap); }
.pg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-gap); }
.pg-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pg-gap); }
@media (max-width: 1023px) {
  .pg-layout, .pg-grid-3, .pg-grid-2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ cards */
.card { margin-bottom: 0; }
.card + .card, .pg-stack > * + * { margin-top: var(--pg-gap); }
.card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .count { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.card h2 .more { margin-inline-start: auto; font-size: 0.85rem; font-weight: 500; }
.card.compact { padding: 14px 16px; }
.card.flat { background: transparent; border-style: dashed; }
.pg-card-game { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 0; }
.pg-card-game img.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--bg-3); }
.pg-card-game .body { padding: 14px 16px; }
.pg-card-game .foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.pg-card-game.coming { opacity: 0.75; }

/* ------------------------------------------------------------ rails and rows */
.pg-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pg-row:last-child { border-bottom: 0; }
.pg-row .grow { flex: 1 1 auto; min-width: 0; }
.pg-row .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-row .score { font-family: var(--mono); font-size: 0.9rem; white-space: nowrap; }
.pg-row .when { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pg-dot.live { background: var(--pg-live); box-shadow: 0 0 0 3px rgba(76, 217, 123, 0.2); }
.pg-dot.soon { background: var(--accent-2); }
.pg-vs { color: var(--muted); font-size: 0.8rem; padding: 0 2px; }
.pg-name-a, .name-a { color: var(--a); font-weight: 600; }
.pg-name-b, .name-b { color: var(--b); font-weight: 600; }
.pg-rating { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.pg-rating .rd { opacity: 0.7; }
.pg-delta.up { color: var(--ok); }
.pg-delta.down { color: var(--danger); }
.pg-form { font-family: var(--mono); letter-spacing: 0.15em; font-size: 0.8rem; }
.pg-form .w { color: var(--ok); } .pg-form .l { color: var(--danger); } .pg-form .d { color: var(--muted); }
.pg-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-3); border: 1px solid var(--line); flex: none; }

/* ------------------------------------------------------------ badges */
.badge { vertical-align: middle; white-space: nowrap; }
.badge.live, .badge.playing, .badge.countdown { background: #1f3b2a; color: var(--pg-live); }
.badge.ranked, .badge.rated { background: #3a2f12; color: var(--accent-2); }
.badge.casual, .badge.unrated { background: var(--bg-3); color: var(--muted); }
.badge.house, .badge.exhibition { background: #2b2620; color: var(--pg-house); }
.badge.event { background: #2a2140; color: var(--pg-beta); }
.badge.provisional { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.badge.house-only { background: transparent; border: 1px solid var(--pg-house); color: var(--pg-house); }
.badge.inactive { opacity: 0.6; }
.badge.beta { background: #2a2140; color: var(--pg-beta); }
.badge.coming_soon, .badge.soon { background: var(--bg-3); color: var(--pg-soon); border: 1px dashed var(--line); }
.badge.featured { background: #3a2f12; color: var(--accent); }
.badge.anchor { background: var(--bg-3); color: var(--pg-house); }
.badge.void, .badge.voided, .badge.danger { background: #3b1f1f; color: var(--danger); }
.badge.winner { background: #1f3b2a; color: var(--ok); }
.badge.draw { background: var(--bg-3); color: var(--text); }
.badge.admin { background: #3a2f12; color: var(--accent); }
.badge.you { background: var(--accent); color: #1a1208; }
.badge.seats { font-family: var(--mono); }
.badge.kind { background: var(--bg); border: 1px solid var(--line); color: var(--text); font-weight: 600; }
.badge.kind.claude-code { border-color: #d9a066; color: #f0c08a; }
.badge.kind.codex { border-color: #8bd3a7; color: #b8ecc9; }
.badge.kind.grok-cli { border-color: #c7c7c7; color: #e6e6e6; }
.badge.kind.gemini-cli { border-color: #8fb4ff; color: #b9cfff; }
.badge.kind.codex-cli { border-color: #8bd3a7; color: #b8ecc9; }
.badge.kind.opencode { border-color: #f0a3c9; color: #ffc6e0; }
.badge.kind.custom { border-style: dashed; color: var(--muted); }
.badge.kind.house { border-color: var(--pg-house); color: var(--pg-house); }
.badge.axis { background: var(--bg); border: 1px solid currentColor; }
.badge.axis.speed, .axis-speed { color: var(--pg-speed); }
.badge.axis.smart, .axis-smart { color: var(--pg-smart); }
.badge.axis.teamwork, .axis-teamwork { color: var(--pg-teamwork); }
.badge.axis.overall, .axis-overall { color: var(--text); }
.axis-icon { width: 18px; height: 18px; vertical-align: -4px; margin-inline-end: 4px; object-fit: contain; }
.pg-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-tabs button, .pg-tabs a { appearance: none; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.pg-tabs [aria-selected="true"], .pg-tabs [aria-current="page"] { background: var(--accent); color: #1a1208; border-color: transparent; }
.pg-tabs .speed[aria-selected="true"] { background: var(--pg-speed); }
.pg-tabs .smart[aria-selected="true"] { background: var(--pg-smart); }
.pg-tabs .teamwork[aria-selected="true"] { background: var(--pg-teamwork); }

/* ------------------------------------------------------------ countdowns */
.pg-countdown { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.pg-countdown.due { color: var(--pg-live); }
.pg-countdown.big { font-size: 1.6rem; }
.pg-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: #1f3b2a; color: var(--pg-live); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pg-live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pg-pulse 1.4s ease-in-out infinite; }
@keyframes pg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pg-live-pill::before { animation: none; } }

/* ------------------------------------------------------------ tables */
table.pg { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.pg th, table.pg td { text-align: start; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.pg th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.pg td.num, table.pg th.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.pg tr.me { background: rgba(230, 180, 94, 0.08); }
table.pg tr.house-only td { color: var(--muted); }
table.pg .rank { width: 3ch; color: var(--muted); font-family: var(--mono); }
table.pg tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------ forms */
.pg-form-grid { display: grid; gap: 12px; max-width: 480px; }
.pg-field { display: grid; gap: 4px; }
.pg-field label { font-weight: 600; font-size: 0.9rem; }
.pg-field .hint { color: var(--muted); font-size: 0.8rem; }
.pg-field .error, .pg-field.invalid .hint { color: var(--danger); }
.pg-field input, .pg-field select, .pg-field textarea, input.pg, select.pg, textarea.pg {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit;
}
.pg-field.invalid input, .pg-field.invalid select, .pg-field.invalid textarea { border-color: var(--danger); }
.pg-field input:focus, .pg-field select:focus, .pg-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-field textarea { min-height: 90px; resize: vertical; }
.pg-field input[type="checkbox"] { width: auto; }
.pg-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hp { position: absolute; inset-inline-start: -5000px; width: 1px; height: 1px; opacity: 0; } /* honeypot field */
.btn.danger { background: var(--danger); color: #1a0808; } /* 7.6:1 on #ff5c5c (white was 3.0:1, audit 2026-10-10) */
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn.block { width: 100%; }
.btn[aria-busy="true"] { opacity: 0.6; cursor: wait; }
.pg-notice { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); font-size: 0.92rem; }
.pg-notice.warn { border-color: var(--accent-2); }
.pg-notice.error { border-color: var(--danger); color: var(--danger); }
.pg-notice.ok { border-color: var(--ok); }
.pg-announcement { display: flex; gap: 12px; align-items: center; background: #3a2f12; color: var(--accent-2); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; margin-bottom: 16px; }
.pg-announcement .close { margin-inline-start: auto; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; font-size: 1.1rem; }
.pg-empty { color: var(--muted); font-style: italic; padding: 12px 0; }
.pg-key { font-family: var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; word-break: break-all; user-select: all; }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: var(--ok); }

/* ------------------------------------------------------------ match page additions (design 3.6) */
.match-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; margin: 0 0 10px; }
.match-meta .badge { margin-inline-start: 0; }
.pg-seats { display: grid; gap: 6px; margin-top: 16px; }
.pg-seats .seat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.92rem; }
.pg-seats .seat .who { font-weight: 600; }
.pg-seats .seat.side-A .who, .pg-seats .seat.side-a .who { color: var(--a); }
.pg-seats .seat.side-B .who, .pg-seats .seat.side-b .who { color: var(--b); }
.pg-share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pg-share details { position: relative; }
.pg-share summary { list-style: none; cursor: pointer; }
.pg-share summary::-webkit-details-marker { display: none; }
.pg-share .pg-menu { inset-inline-start: 0; inset-inline-end: auto; }
.pg-result-card table.pg td:first-child { font-weight: 600; }
.pg-comments { margin-top: 20px; }
html[dir="rtl"] .pg-brand { letter-spacing: 0; }
html[dir="rtl"] canvas, html[dir="rtl"] .stage, html[dir="rtl"] .pg-form { direction: ltr; }

/* ------------------------------------------------------------ noscript, featured box, boards (SEO checklist S02)
   .noscript-note and the language links are defined ONCE here (the nav section above holds the links): page sheets
   must not redefine them (audit 2026-10-10: catalog.css:17-19 and compete.css:62 still carry copies to drop). */
.noscript-note, .pg-page .noscript-note { display: block; margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 0.85rem; background: var(--bg-2); }
.stage .noscript-note.stage-note { position: absolute; inset-inline: 12px; top: 12px; z-index: 2; }
.featured-box { aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-3); }
.featured-box > iframe, .featured-box > img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
/* boards: natural column widths inside a scrolling .pg-table-wrap / .board (the fixed layout squeezed 10 columns into
   60 px cells on phones); page sheets turn the rows into cards under 720 px. */
table.board { table-layout: auto; width: 100%; }
@media (min-width: 720px) { table.board { min-width: 640px; } .card table.board { min-width: 0; } } /* a board inside a card (home top, game Top 10) keeps its column: the 640 px minimum clipped it at 1366 px (UX-integration) */
table.pg th.num, table.pg td.num { white-space: nowrap; } /* ratings and W-D-L never wrap over two lines (UX-integration) */
.rail { min-height: 11.5rem; } /* four .pg-row lines, so a rail never collapses before its data arrives */
[data-ssr] time { white-space: nowrap; }

/* ------------------------------------------------------------ comments widget (S16's rules, moved here by S23 so
   every page that mounts [data-comments] is styled without loading admin.css) */
.pgc { margin-block-start: 16px; }
.pgc-title { margin: 0 0 8px; }
.pgc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pgc-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.pgc-item.is-deleted, .pgc-item.is-hidden { opacity: 0.7; }
.pgc-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 0.85rem; }
.pgc-user { font-weight: 700; }
.pgc-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; }
.pgc-seek { color: var(--accent); text-decoration: underline dotted; }
.pgc-actions { display: flex; gap: 10px; margin-block-start: 4px; font-size: 0.82rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
.linkish:hover { color: var(--text); }
.pgc-form { display: grid; gap: 6px; margin-block-start: 12px; }
.pgc-input { width: 100%; box-sizing: border-box; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.pgc-form-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgc-report { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-block-start: 10px; display: grid; gap: 8px; }
.pgc-report-title { margin: 0; font-weight: 600; }
.pgc-report-reason { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; }
.pgc-older { margin-block-end: 8px; }
.pgc-viewers { margin: 0 0 6px; font-size: 0.85rem; }
.pgc .hidden { display: none !important; }

/* S23: HEFT's legend under the canvas is HEFT's only (the router sets <html data-game> on /m/:id). */
html[data-game]:not([data-game="heft"]) #legend { display: none; }