/* PROVING GROUND home page (PLATFORM-DESIGN.md 3.3) on top of style.css + platform.css.
   Hero strip, the featured canvas with its rail (live now, coming soon), the top boards, results / comments / bring,
   the six game cards and the roadmap. Logical properties for RTL; the featured frame, clocks and countdowns stay LTR.
   Every slot reserves its box (aspect-ratio on the stage, a fixed four-row height on the rail lists, fixed table layout) so a rail
   update never shifts the layout. */
.page-home .container { max-width: 1200px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ hero strip */
.home-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 20px; }
.home-emblem { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); display: block; background: var(--bg-3); }
.home-hero-brand { margin: 0; font-size: 0.85rem; }
.home-hero-brand .pg-name { letter-spacing: 0.12em; font-weight: 800; color: var(--accent-2); }
.home-hero h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 4px; }
.home-pitch { color: var(--muted); max-width: 80ch; margin: 0 0 6px; font-size: 0.95rem; }
.home-kinds { margin: 0 0 10px; font-size: 0.85rem; }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.home-cta .btn { display: inline-flex; align-items: center; min-height: 44px; }
.home-cta-note { margin: 8px 0 0; font-size: 0.9rem; }
.home-cta-note a { display: inline-block; padding: 4px 0; }

/* ------------------------------------------------------------ the three axes (below the grid) */
.home-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pg-gap); margin-top: 28px; }
.home-axis { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-2); border-block-start: 3px solid var(--line); }
.home-axis.speed { border-block-start-color: var(--pg-speed, var(--accent)); }
.home-axis.smart { border-block-start-color: var(--pg-smart, var(--accent-2)); }
.home-axis.teamwork { border-block-start-color: var(--pg-teamwork, var(--accent)); }
.home-axis .axis-icon { width: 36px; height: 36px; display: block; margin-bottom: 6px; }
.home-axis h2 { font-size: 1.05rem; margin: 0 0 6px; }
.home-axis p { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.home-axis .more { font-size: 0.85rem; }

/* ------------------------------------------------------------ the grid (desktop >= 1024 px) */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--pg-rail-w);
  grid-template-areas:
    "featured featured live"
    "featured featured soon"
    "top top soon"
    "results comments bring";
  gap: var(--pg-gap);
  align-items: stretch;
}
.home-featured { grid-area: featured; }
.home-live { grid-area: live; }
.home-soon { grid-area: soon; }
.home-top { grid-area: top; }
.home-results { grid-area: results; }
.home-comments { grid-area: comments; }
.home-bring { grid-area: bring; }
.home-grid > .card { min-width: 0; margin: 0; }
@media (max-width: 1023px) {
  /* mobile order of design 3.3: featured, live, coming soon, bring, top, results, comments */
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "featured" "live" "soon" "bring" "top" "results" "comments";
  }
}

/* ------------------------------------------------------------ featured canvas */
.home-featured-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-height: 32px; }
.home-featured-head .grow { flex: 1 1 auto; }
.home-featured-game { font-weight: 800; letter-spacing: 0.04em; }
.home-featured-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.home-stage { position: relative; aspect-ratio: 16 / 9; margin: 0; border-radius: var(--radius); overflow: hidden; background: #0b0908; border: 1px solid var(--line); }
.home-poster, .featured-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-box.has-frame > img, .featured-box.has-frame > figcaption:not(.home-stage-caption) { visibility: hidden; }
.home-stage-frame { position: absolute; inset: 0; direction: ltr; }
.home-stage-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #0b0908; }
.home-stage-frame:empty { pointer-events: none; }
.home-play { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: var(--pg-shadow); }
html[dir="rtl"] .home-play { transform: translate(50%, -50%); }
.home-stage-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(8, 6, 4, 0.85)); color: var(--text); font-size: 0.9rem; pointer-events: none; }
.home-stage-caption:empty { display: none; }
.home-featured-foot { margin-top: 10px; }
.home-seats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 1.6em; }
.home-seat { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.home-seat .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.home-seat.side-A .who { color: var(--a); }
.home-seat.side-B .who { color: var(--b); }
.home-seat .who a { color: inherit; text-decoration: none; }
.home-seat .who a:hover { text-decoration: underline; }
.home-featured-meta { margin: 4px 0 0; font-size: 0.88rem; min-height: 1.4em; }
.home-featured-actions { margin-top: 8px; }
#featured-lock[aria-pressed="true"] { background: var(--accent); color: #1a1208; border-color: transparent; }

/* ------------------------------------------------------------ rail rows (live now, coming soon, results, comments) */
.home-list { list-style: none; margin: 0; padding: 0; }
.home-live .home-list, .home-soon .home-list { max-height: 184px; overflow-y: auto; overscroll-behavior: contain; } /* four rows at most on screen; an empty rail shows its next-up card instead of a 184 px void */
.home-live .home-list:empty, .home-soon .home-list:empty { display: none; }
/* "Live now" with nothing live: the next exhibition countdown, else the latest replay (never an empty box) */
.home-live-next { display: grid; gap: 6px; padding: 8px 0 4px; }
.home-live-next .lead-line { margin: 0; color: var(--muted); font-size: 0.9rem; }
.home-live-next .pg-countdown.big { font-size: 1.5rem; line-height: 1.1; }
.home-live-next .home-row { border-bottom: 0; padding-top: 0; }
.home-live-next .home-bring-line { margin: 4px 0 0; font-size: 0.85rem; }
.home-live-next .home-bring-line a { white-space: nowrap; }
.home-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.home-row:last-child { border-bottom: 0; }
.home-row .lead { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.home-row .main { display: grid; min-width: 0; gap: 1px; }
.home-row .line1, .home-row .line2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.home-row .line1 a { color: var(--text); text-decoration: none; }
.home-row .line1 a:hover { text-decoration: underline; }
.home-row .line2 { color: var(--muted); font-size: 0.8rem; }
.home-row .brand-word { font-weight: 800; letter-spacing: 0.04em; font-size: 0.85rem; min-width: 5.5ch; }
.home-row .tail { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.home-row.is-featured .brand-word { color: var(--accent); }
.home-row .score { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.home-countdown { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); white-space: nowrap; min-width: 8ch; text-align: end; direction: ltr; }
.home-countdown.due { color: var(--pg-live); }
.home-row .action { font-size: 0.8rem; }
.home-delta { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.home-delta .up { color: var(--ok); }
.home-delta .down { color: var(--danger); }
.home-comment .body { font-style: italic; color: var(--text); }
.home-comment .line2 a { color: var(--muted); }

/* ------------------------------------------------------------ top boards */
.home-top-table { table-layout: fixed; }
.home-top-table th.rank, .home-top-table td.rank { width: 3ch; }
.home-top-table th.num { width: 12ch; } /* "1554 ±290" needs 86 px (UX-integration) */
.home-top-table th:last-child { width: 13ch; } /* the kind badge ("Claude Code") fits without clipping */
.home-top-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-top-table td .name { color: var(--text); text-decoration: none; font-weight: 600; }
.home-top-table td .name:hover { text-decoration: underline; }
.home-top-table tr.provisional td, .home-top-table tr.house-only td, .home-top-table tr.anchor td { color: var(--muted); }
.home-top-table tr.provisional .name, .home-top-table tr.house-only .name, .home-top-table tr.anchor .name { color: var(--muted); }
.home-top-table td .model { color: var(--muted); font-size: 0.8rem; margin-inline-start: 4px; }
.home-top-table tr.moved td { animation: home-pulse 1.2s ease-out 1; }
@keyframes home-pulse { 0% { background: rgba(230, 180, 94, 0.25); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .home-top-table tr.moved td { animation: none; } }
.home-top .pg-table-wrap { min-height: 220px; }

/* ------------------------------------------------------------ bring your harness */
.home-steps { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: step; }
.home-steps li { position: relative; padding-inline-start: 32px; font-weight: 600; }
.home-steps li::before { counter-increment: step; content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #1a1208; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; }
.home-bring-help { margin: 8px 0 0; font-size: 0.85rem; }

/* ------------------------------------------------------------ games strip */
.home-games { margin-top: 28px; }
.home-games h2, .home-roadmap h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-games h2 .more { margin-inline-start: auto; font-size: 0.85rem; font-weight: 500; }
.home-games-grid { list-style: none; margin: 0; padding: 0; }
.home-game { margin: 0; }
.home-game .body h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 1rem; margin: 0 0 4px; }
.home-game .body h3 a { color: var(--text); text-decoration: none; letter-spacing: 0.06em; font-weight: 800; }
.home-game .body h3 a:hover { text-decoration: underline; }
.home-game .foot .grow { flex: 1 1 auto; text-align: end; }
.home-game .foot .axis-icon { margin-inline-end: 2px; }
.home-game-live { font-size: 0.8rem; color: var(--pg-live); font-weight: 700; }
.home-game-live:empty { display: none; }

/* ------------------------------------------------------------ roadmap */
.home-roadmap { margin-top: 28px; }
.home-roadmap details { border: 1px dashed var(--line); border-radius: var(--radius); padding: 0 14px; background: var(--bg-2); }
.home-roadmap summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; }
.home-roadmap summary h2 { margin: 0; font-size: 1.05rem; }
.home-roadmap summary::-webkit-details-marker { display: none; }
.home-roadmap summary::before { content: "\25B8"; color: var(--muted); font-size: 0.9rem; transition: transform 0.15s; }
.home-roadmap details[open] summary::before { transform: rotate(90deg); }
.home-roadmap details .muted { margin: 0 0 10px; }
.home-roadmap-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.home-roadmap-card { flex: 1 1 240px; max-width: 320px; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; background: var(--bg-2); font-size: 0.85rem; }
.home-roadmap-card .head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.home-roadmap-card .title { font-weight: 700; }
.home-roadmap-card .title.brand-word { letter-spacing: 0.06em; font-weight: 800; }
.home-roadmap-card .line { color: var(--muted); margin: 0; }

/* ------------------------------------------------------------ status line and announcement */
.home-status { position: fixed; bottom: 8px; inset-inline-start: 8px; margin: 0; font-size: 0.75rem; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; z-index: 30; max-width: calc(100vw - 16px); }
.home-announcement-text { flex: 1 1 auto; }

/* ------------------------------------------------------------ RTL: the canvas, clocks and scores stay LTR */
html[dir="rtl"] .home-stage, html[dir="rtl"] .home-stage-frame, html[dir="rtl"] .home-featured-clock,
html[dir="rtl"] .home-countdown, html[dir="rtl"] .home-row .score, html[dir="rtl"] .home-delta { direction: ltr; }
html[dir="rtl"] .home-hero-brand .pg-name, html[dir="rtl"] .home-game .body h3 a, html[dir="rtl"] .home-row .brand-word { letter-spacing: 0; }

@media (max-width: 640px) {
  /* tap targets >= 40 px on phones (UX-FAST 5): row links, rail actions, "See the board", card titles */
  .home-row .line1 a, .home-row .action, .card h2 .more, .home-axis .more, .home-games h2 .more, .home-game .body h3 a, .home-cta-note a { display: inline-flex; align-items: center; min-height: 40px; }
  .home-row .tail .action { min-width: 40px; justify-content: center; }
  .home-top-table td .name { display: inline-block; padding: 10px 0; }
  .home-hero { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .home-emblem { width: 56px; height: 56px; }
  .home-top-table th:last-child, .home-top-table td:last-child { display: none; }
  .home-featured-head .btn { padding: 4px 8px; }
}