/* Morpion Arena — public page (ADR-0014 §C6 §D2 + ADR-0016 socle tokens) * * Visual register: socle palette `ecolier` partagé avec play (ink/paper, * fil rouge marge, encre Waterman), résolu par `gallery/tokens.css` via * ``. Niveau-L (cette feuille) garde ce qui * est local-arena : font UI monospace, tables denses, leaderboard, replay * modal, hero-board, distribution-chart, tints bot/human pour * disambiguation des deux scales (cf. §C6). Variables niveau-S/F * (--paper, --ink, --rule-margin, --rule-grid, --accent, --paper-step) * ne sont PAS redéclarées ici — gate CI T-TOKENS-SINGLE-SOURCE. * * `./tokens.css` est une COPIE À PLAT de `gallery/tokens.css` produite * par `make ship-arena` (Makefile target dédié, pattern analogue à * `make ship` côté play). PAS un symlink — Cloudflare Pages ne * dérefère pas les symlinks de façon fiable, l'ancien * `dist-arena/tokens.css -> ../gallery/tokens.css` rendait un fichier * vide ou texte-brut en prod (palette aggressive : fond blanc, serif * Times au lieu du theme arena ecolier). delib-20260501-af79 §C5 §S1. * Ne JAMAIS réécrire en `../gallery/tokens.css` ici : Cloudflare sert * dist-arena comme racine, le `..` 404 silencieusement. Single source * of truth (ADR-0016 §6) préservée par la discipline `make * verify-ship-arena` qui rejette toute dérive entre la copie et le * socle gallery. * * `./code-block.css` suit EXACTEMENT la même discipline — copie à plat * de `gallery/code-block.css` produite par `make ship-arena`, gardée en * sync par `make verify-ship-arena`. Helper `.code-block` + * `.code-block-copy` partagé cross-surface (delib-20260501-af79 §C4/§D2 * Q2=(b) — Julien-litéral *« petit carré pour copier »* retenu). */ @import url('./tokens.css'); @import url('./code-block.css'); /* Niveau-L arena — alias historiques + tints scales-séparées (§C6). `--paper-soft` et `--margin-rule` / `--grid-rule` sont des renames locaux des tokens socle (`--paper-bg`, `--rule-margin`, `--rule-grid`) préservés ici pour ne pas réécrire 80+ usages du fichier. La règle : ils CONSOMMENT le socle, ne le SHADOWENT pas. */ :root { --paper-soft: var(--paper-bg); --margin-rule: var(--rule-margin); --grid-rule: var(--rule-grid); --ink-faint: rgba(31, 42, 68, 0.32); --accent-soft: rgba(46, 125, 50, 0.14); --bot-tint: #4a90d9; --bot-tint-soft: rgba(74, 144, 217, 0.14); --human-tint: #c0392b; --human-tint-soft:rgba(192, 57, 43, 0.10); --unranked: rgba(31, 42, 68, 0.40); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; background: var(--paper-soft); color: var(--ink); -webkit-font-smoothing: antialiased; } a { color: var(--bot-tint); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--ink); } code, pre { font-family: var(--font-ui); } /* ─── header ──────────────────────────────────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 24px; background: var(--paper); border-bottom: 1px solid rgba(31, 42, 68, 0.12); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { font-family: var(--font-ui); letter-spacing: -0.5px; color: var(--ink); opacity: 0.7; } .brand-name { font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink); } .site-nav { display: flex; gap: 20px; font-size: 0.9rem; } .site-nav a { color: var(--ink-soft); text-decoration: none; } .site-nav a:hover { color: var(--ink); } /* ─── hero ────────────────────────────────────────────────────────── */ .hero { background: var(--paper); border-bottom: 1px solid rgba(31, 42, 68, 0.12); padding: 48px 24px 56px; } .hero-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .hero-title { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.25; color: var(--ink); max-width: 28ch; } .hero-sub { font-family: var(--font-school); font-style: italic; font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-soft); } .hero-board { width: min(540px, 92vw); background: var(--paper-soft); border: 1px solid var(--ink-faint); border-radius: 4px; padding: 14px; box-shadow: 0 12px 24px -16px rgba(31, 42, 68, 0.25); } #hero-board-svg { display: block; width: 100%; height: auto; } .hero-board-caption { margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .btn { display: inline-block; padding: 10px 18px; border-radius: 6px; border: 1px solid var(--ink-faint); background: var(--paper-soft); color: var(--ink); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; } .btn:hover { background: rgba(31, 42, 68, 0.06); } .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-primary:hover { background: #2c3a58; color: var(--paper); } /* ─── shared section head ─────────────────────────────────────────── */ .section-head { max-width: 1100px; margin: 0 auto 24px; padding: 0 24px; } .section-head h2 { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; color: var(--ink); } .section-sub { margin-top: 6px; font-size: 0.95rem; color: var(--ink-soft); max-width: 70ch; } /* ─── leaderboard ─────────────────────────────────────────────────── */ .leaderboard { padding: 48px 0; } .leaderboard-cols { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 800px) { .leaderboard-cols { grid-template-columns: 1fr; } } .lb-col { background: var(--paper); border: 1px solid rgba(31, 42, 68, 0.12); border-radius: 6px; padding: 16px 18px; /* C6: separate scales — visually distinct backgrounds with a tint */ } .lb-col-humans { border-left: 3px solid var(--human-tint); } .lb-col-bots { border-left: 3px solid var(--bot-tint); } .lb-col-head h3 { font-family: var(--font-school); font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 8px; } .lb-tag { font-family: var(--font-ui); font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .lb-col-sub { margin-top: 4px; font-size: 0.82rem; color: var(--ink-soft); } .lb-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; } .lb-table thead th { font-weight: 500; text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(31, 42, 68, 0.18); color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; } .lb-table tbody td { padding: 8px; border-bottom: 1px solid rgba(31, 42, 68, 0.06); vertical-align: middle; } .lb-table tbody tr:last-child td { border-bottom: none; } .lb-table .lb-rank { width: 2.2em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .lb-table .lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-table .lb-name { font-weight: 500; } .lb-table .lb-name .lb-name-rev { color: var(--ink-soft); font-weight: 400; font-size: 0.8em; } .lb-table .lb-action { width: 1%; text-align: right; white-space: nowrap; } .lb-table .lb-action button { background: none; border: 1px solid var(--ink-faint); border-radius: 4px; padding: 4px 8px; font-size: 0.78rem; font-family: var(--font-ui); color: var(--ink-soft); cursor: pointer; } .lb-table .lb-action button:hover { color: var(--ink); border-color: var(--ink); } .lb-table .lb-empty td { text-align: center; color: var(--ink-soft); padding: 20px 8px; font-style: italic; } .lb-row-unranked td { color: var(--unranked); } .lb-row-unranked .lb-rank::after { content: ""; } .lb-row-anh td { background: var(--accent-soft); } .lb-row-anh .lb-rank { color: var(--accent); font-weight: 600; } .lb-row-anh .lb-name { color: var(--accent); } .lb-pill { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 3px; background: var(--ink-faint); color: var(--paper); margin-left: 6px; font-family: var(--font-ui); letter-spacing: 0.3px; } .lb-pill-unranked { background: var(--unranked); } /* ─── distribution chart block ───────────────────────────────────── */ .distribution-block { max-width: 1100px; margin: 32px auto 0; padding: 0 24px; } .distribution-head h3 { font-family: var(--font-hand); font-weight: 400; font-size: 1.4rem; color: var(--ink); } /* Legend — meta-object pour la figure parent (3 panneaux côte-à-côte partagent une seule légende au-dessus, jamais N intra-SVG répétées). delib-20260501-af79 §C3/§S3 (jr). */ .distribution-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 4px; padding: 0; list-style: none; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; color: var(--ink-soft, #5a5a72); } .distribution-legend li { display: inline-flex; align-items: center; gap: 6px; } .distribution-legend-swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid currentColor; background: currentColor; /* fill-opacity 0.18 sur le SVG → opacité du fond, bord plein. */ background-clip: content-box; padding: 0; opacity: 1; } .distribution-legend-swatch[data-series="humans"] { color: #c0392b; background-color: rgba(192, 57, 43, 0.18); } .distribution-legend-swatch[data-series="algos"] { color: #6c757d; background-color: rgba(108, 117, 125, 0.18); } .distribution-legend-swatch[data-series="frontier"] { color: #4a90d9; background-color: rgba(74, 144, 217, 0.18); } .distribution-legend-swatch[data-series="reference"] { color: #2e7d32; background-color: rgba(46, 125, 50, 0.18); } .distribution-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--paper-step, 16px); margin-top: 16px; } @media (max-width: 800px) { .distribution-grid { grid-template-columns: 1fr; } } .distribution-grid figure { background: var(--paper); border: 1px solid rgba(31, 42, 68, 0.12); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0; display: flex; flex-direction: column; align-items: stretch; } .distribution-grid figcaption { margin-top: 8px; text-align: center; font-family: var(--font-school); font-size: 0.95rem; color: var(--ink); letter-spacing: 0.3px; } .distribution-grid svg { display: block; width: 100%; min-width: 240px; height: auto; } .distribution-caption { margin-top: 10px; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; } /* ─── methodology ─────────────────────────────────────────────────── */ .methodology { background: var(--paper); border-top: 1px solid rgba(31, 42, 68, 0.12); padding: 48px 0 56px; } .method-grid { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 700px) { .method-grid { grid-template-columns: 1fr; } } .method-card { background: var(--paper-soft); border: 1px solid rgba(31, 42, 68, 0.10); border-radius: 5px; padding: 18px 20px; } .method-card h3 { font-family: var(--font-school); font-size: 1.05rem; color: var(--ink); margin-bottom: 8px; } .method-card p { font-size: 0.92rem; line-height: 1.6; margin-bottom: 8px; } .method-card p:last-child { margin-bottom: 0; } .method-card pre { background: var(--paper); border: 1px solid rgba(31, 42, 68, 0.10); border-radius: 4px; padding: 10px 12px; margin: 8px 0; font-size: 0.82rem; overflow-x: auto; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .method-card code { font-size: 0.88em; } .method-card .method-foot { color: var(--ink-soft); font-size: 0.85rem; font-style: italic; } .method-card-anchor { scroll-margin-top: 80px; } /* ─── replay viewer modal ─────────────────────────────────────────── */ .replay-modal { max-width: 760px; width: min(760px, 96vw); max-height: 92vh; border: 1px solid rgba(31, 42, 68, 0.18); border-radius: 8px; padding: 0; background: var(--paper); color: var(--ink); overflow: hidden; } .replay-modal::backdrop { background: rgba(20, 20, 40, 0.55); } .replay-modal[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto; max-width: 760px; } .replay-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(31, 42, 68, 0.12); } .replay-head h3 { font-family: var(--font-school); font-size: 1rem; font-weight: 600; } .replay-close { background: none; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); padding: 4px 8px; } .replay-close:hover { color: var(--ink); } .replay-meta { padding: 10px 18px; font-size: 0.85rem; color: var(--ink-soft); border-bottom: 1px solid rgba(31, 42, 68, 0.10); display: flex; flex-wrap: wrap; gap: 4px 16px; } .replay-meta strong { color: var(--ink); font-weight: 500; } .replay-board-wrap { flex: 1 1 auto; min-height: 0; padding: 14px; background: var(--paper-soft); display: flex; align-items: center; justify-content: center; overflow: auto; } #replay-board-svg { display: block; max-width: 100%; height: auto; } .replay-controls { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid rgba(31, 42, 68, 0.10); flex-wrap: wrap; } .replay-controls button { background: var(--paper-soft); border: 1px solid var(--ink-faint); border-radius: 4px; padding: 6px 10px; font-family: var(--font-ui); font-size: 0.95rem; cursor: pointer; color: var(--ink); min-width: 36px; } .replay-controls button:hover { background: rgba(31, 42, 68, 0.06); } .replay-controls .replay-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .replay-controls .replay-primary:hover { background: #2c3a58; } .replay-progress { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--ink-soft); } #replay-scrubber { flex: 1 1 200px; min-width: 100px; accent-color: var(--bot-tint); } .replay-status { padding: 0 18px 12px; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; min-height: 1.4em; } .replay-status.replay-status-err { color: var(--margin-rule); } /* ─── prompt template modal body (ADR-0014 §D2) ──────────────────── */ .prompt-body { flex: 1 1 auto; min-height: 0; margin: 0; padding: 14px 18px; background: var(--paper-soft); font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; overflow: auto; } /* SVG board styles (same vocab as dist-play) — re-declared for the * arena because we don't import dist-play/style.css. */ .dot-orig { fill: var(--ink); stroke: rgba(31,42,68,0.6); stroke-width: 1; } .dot-new { fill: var(--accent); stroke: var(--ink); stroke-width: 1; } .dot-current { fill: var(--margin-rule); stroke: var(--ink); stroke-width: 1.4; } .line-history { stroke-width: 2.2; opacity: 0.55; fill: none; stroke-linecap: round; } .line-history-last { stroke-width: 3.0; opacity: 0.95; fill: none; stroke-linecap: round; } .line-axis-H { stroke: #4a90d9; } .line-axis-V { stroke: #3bd684; } .line-axis-D1 { stroke: #e87c1e; } .line-axis-D2 { stroke: #7d3bd6; } /* ─── footer ──────────────────────────────────────────────────────── */ .site-footer { padding: 24px; text-align: center; font-size: 0.82rem; color: var(--ink-soft); background: var(--paper-soft); border-top: 1px solid rgba(31, 42, 68, 0.10); } /* a11y */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; transition-duration: 1ms !important; } } :focus-visible { outline: 2px solid var(--bot-tint); outline-offset: 2px; }