/* =====================================================================
   BROADSHEET: the puzzle page of a morning paper.
   Newsprint, ink rules, square corners, Fraunces for reading and headlines,
   IBM Plex Mono for every label. Red is the one accent; buttons are set in ink.
   Spec: docs/themes/broadsheet.md
   ===================================================================== */
:root[data-theme="broadsheet"] {
  color-scheme: light;
  --bg: #f2ede2; --surface: #f9f6ef; --surface-2: #e8e1d2;
  --text: #161513; --muted: #5b574f; --faint: #767063; --border: #c9c0ad; --rule: #161513;
  --accent: #b3261e;
  --primary: #161513; --primary-strong: #000; --primary-contrast: #f9f6ef; --primary-soft: #e3dbc9;
  --danger: #b3261e; --danger-soft: #f1d6cd; --success: #2f6b3a;
  --radius: 0px; --r-ctl: 0px; --r-ctl-in: 0px; --r-dialog: 0px; --r-menu: 0px; --r-board: 0px; --r-cell: 0px; --r-pill: 0px;
  --content-w: 1100px;
  --shadow: none;
  --dialog-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--rule), 0 24px 60px rgba(22, 21, 19, .25);
  --menu-shadow: 5px 5px 0 var(--rule);
  --overlay: rgba(22, 21, 19, .4);
  --font: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --toast-bg: #161513; --toast-fg: #f2ede2; --toast-action: #f2d77e;
  --record-bg: #161513; --record-fg: #f9f6ef;
  /* 2048 */
  --g-board: #161513; --g-slot: #2e2b27;
  --t2: #f9f6ef; --t4: #ebe3d2; --t8: #dccaa6; --t16: #caa978; --t32: #c27a4c; --t64: #b3261e;
  --t128: #8c1c16; --t256: #23458a; --t512: #1b3566; --t1024: #5b574f; --t2048: #f2d77e;
  --t-ink: #161513; --t-paper: #f9f6ef; --t8-fg: #161513; --t16-fg: #161513; --t2048-fg: #161513;
  /* memory grid */
  --flash: #161513; --tile: #e8e1d2;
  /* card table: no felt, a halftone tint box */
  --table-bg: radial-gradient(rgba(22, 21, 19, .16) .9px, transparent 1.1px) 0 0 / 4px 4px, #e6dfd0;
  --table-frame: 0 0 0 1px var(--rule);
  --slot-line: rgba(22, 21, 19, .55);
  --card-paper: #f9f6ef; --card-r: 0;
  --card-shadow: 0 0 0 1px rgba(22, 21, 19, .55);
  --court-panel: #efe8d9; --court-rule: inset 0 0 0 1px currentColor;
  --suit-red: #b3261e; --suit-black: #161513;
  --card-back-art:
    repeating-linear-gradient(45deg, rgba(249, 246, 239, .18) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(249, 246, 239, .18) 0 1px, transparent 1px 5px), #161513;
  --back-edge: #f9f6ef; --back-edge-w: .05; --back-shadow: 0 0 0 1px #161513;
  --font-card: var(--font);
}
[data-theme="broadsheet"] ::selection { background: #f2d77e; }
/* the backdrop: a halftone screen with ink clouds drifting through it (js/backdrops/broadsheet.js); faint over the content column */
[data-theme="broadsheet"] .backdrop { --veil: .3; }

/* every label, button and figure: mono, small caps-style uppercase */
[data-theme="broadsheet"] :is(.btn, .segmented button, .tool, .stat-label, .game-status, .offline-badge, .theme-btn, .toast-action, .record, .main-nav a, .field label, .footer-links, .version, .t-label, .icon-tile span, .keypad button.accent) {
  font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- chrome ---------- */
[data-theme="broadsheet"] .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 3px double var(--rule); }
[data-theme="broadsheet"] body[data-route="home"] .topbar { border-bottom-color: transparent; }
[data-theme="broadsheet"] .brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] body[data-route="home"] .brand { visibility: hidden; }
[data-theme="broadsheet"] .main-nav a { color: var(--text); border-radius: 0; }
[data-theme="broadsheet"] .main-nav a:hover { background: var(--surface-2); }
[data-theme="broadsheet"] .main-nav a[aria-current="true"] { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--rule); }
[data-theme="broadsheet"] .theme-btn { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .theme-btn:hover { background: var(--surface-2); }
[data-theme="broadsheet"] .theme-btn .theme-swatch { width: 30px; height: 28px; }
[data-theme="broadsheet"] .theme-menu { border-color: var(--rule); }
[data-theme="broadsheet"] .theme-opt .ico { color: var(--accent); }
[data-theme="broadsheet"] .theme-opt .apps i { border-color: var(--rule); border-radius: 0; color: var(--text); }

/* ---------- controls ---------- */
[data-theme="broadsheet"] .btn { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .btn:hover:not(:disabled) { background: var(--surface-2); }
[data-theme="broadsheet"] .btn-primary { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .btn-primary:hover:not(:disabled) { background: #000; }
[data-theme="broadsheet"] .btn-danger { color: var(--accent); border-color: var(--accent); }
[data-theme="broadsheet"] .segmented { padding: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .segmented button { padding: 9px 12px; color: var(--text); }
[data-theme="broadsheet"] .segmented button[aria-pressed="true"] { background: var(--rule); color: var(--surface); box-shadow: none; }
[data-theme="broadsheet"] .stats { gap: 0; }
[data-theme="broadsheet"] .stat { align-items: flex-start; padding: 0 12px; background: transparent; border: 0; border-left: 1px solid var(--rule); }
[data-theme="broadsheet"] .stat-value { font-size: 1.3rem; font-weight: 800; }
[data-theme="broadsheet"] .tool { font-size: .64rem; color: var(--text); }
[data-theme="broadsheet"] .tool[aria-pressed="true"] { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .tool .badge { background: var(--accent); color: #fff; font-family: var(--font-mono); border-radius: 0; }
[data-theme="broadsheet"] .hint-text { font-size: .92rem; }
[data-theme="broadsheet"] .field input { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .switch { width: 44px; height: 24px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .switch::before { top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 0; background: var(--rule); box-shadow: none; }
[data-theme="broadsheet"] .switch[aria-checked="true"] { background: var(--rule); }
[data-theme="broadsheet"] .switch[aria-checked="true"]::before { transform: translateX(20px); background: var(--surface); }
[data-theme="broadsheet"] :is(.check input, .range) { accent-color: var(--rule); }

/* ---------- surfaces, dialog, toast ---------- */
[data-theme="broadsheet"] .box { border-color: var(--rule); background: transparent; }
[data-theme="broadsheet"] .box > h3 { padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] .dialog { border: 1px solid var(--rule); }
[data-theme="broadsheet"] .dialog h2, [data-theme="broadsheet"] .settings-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
[data-theme="broadsheet"] .rules, [data-theme="broadsheet"] .dialog p { color: var(--text); }
[data-theme="broadsheet"] .dialog .stats .stat { padding: 4px 12px; }
[data-theme="broadsheet"] #toast { font-family: var(--font-mono); font-size: .82rem; }
[data-theme="broadsheet"] .install-banner { background: transparent; border: 1px solid var(--rule); margin-bottom: 24px; }
[data-theme="broadsheet"] .install-banner span { color: var(--text); }
[data-theme="broadsheet"] .drawer { border-left: 1px solid var(--rule); box-shadow: -14px 0 40px rgba(22, 21, 19, .18); }
[data-theme="broadsheet"] .setting { border-top-color: var(--rule); }
[data-theme="broadsheet"] .setting-text small { color: var(--text); }
[data-theme="broadsheet"] .icon-tile { border-color: var(--rule); background: transparent; color: var(--text); }
[data-theme="broadsheet"] .swatch-item i { border-radius: 0; }

/* ---------- home: masthead, dateline, ruled three-column page ---------- */
[data-theme="broadsheet"] .view { padding-top: 4px; }
[data-theme="broadsheet"] .home-hero { display: flex; flex-direction: column; text-align: center; margin-bottom: 28px; }
[data-theme="broadsheet"] .hero-title {
  display: block; order: 1;
  padding: 4px 0 12px;
  font-size: clamp(3rem, 12.4vw, 7.6rem); font-weight: 900; line-height: .92; letter-spacing: -.04em;
  font-variation-settings: "opsz" 144;
}
[data-theme="broadsheet"] .hero-meta {
  display: flex; justify-content: space-between; gap: 16px; order: 2;
  padding: 7px 2px;
  border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule);
  font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
[data-theme="broadsheet"] .date-short { display: none; }
[data-theme="broadsheet"] .intro { order: 3; max-width: 58ch; margin: 18px auto 0; color: var(--text); font-size: 1.08rem; line-height: 1.5; }

/* section heads: a headline, then the count in red mono at the right */
[data-theme="broadsheet"] .section-head { align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
[data-theme="broadsheet"] .section-title { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
[data-theme="broadsheet"] .section-count { display: block; margin-left: auto; color: var(--accent); font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
[data-theme="broadsheet"] .section-count::after { content: " " attr(data-unit); }
[data-theme="broadsheet"] .section-note { flex-basis: 100%; color: var(--muted); font: 600 .68rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-theme="broadsheet"] .home-section + .home-section { margin-top: 40px; }

[data-theme="broadsheet"] .game-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  overflow: hidden;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
}
[data-theme="broadsheet"] .game-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px;
  padding: 22px 22px 24px;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: -1px 0 0 var(--rule), 0 -1px 0 var(--rule);
  transition: none;
}
[data-theme="broadsheet"] .game-card:hover, [data-theme="broadsheet"] .game-card:active { transform: none; }
[data-theme="broadsheet"] .game-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
[data-theme="broadsheet"] .game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="broadsheet"] .game-card .game-icon { order: 2; width: 46px; height: 46px; border-radius: 0; background: var(--rule); color: var(--rule); box-shadow: none; }
[data-theme="broadsheet"] .game-icon svg { width: 34px; height: 34px; }
[data-theme="broadsheet"] .game-icon svg [fill="#fff"] { fill: var(--surface); }
[data-theme="broadsheet"] .game-icon svg [stroke="#fff"] { stroke: var(--surface); }
[data-theme="broadsheet"] .kind-line .game-card .game-icon { color: var(--surface); }
[data-theme="broadsheet"] .kind-line .game-card .game-icon svg { width: 26px; height: 26px; }
[data-theme="broadsheet"] .game-num { display: block; margin-bottom: 8px; color: var(--accent); font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; }
[data-theme="broadsheet"] .game-num::before { content: "No. "; }
[data-theme="broadsheet"]:lang(de) .game-num::before { content: "Nr. "; }
[data-theme="broadsheet"] .game-meta h3 { font-size: 1.5rem; font-weight: 750; line-height: 1.08; letter-spacing: -.02em; }
[data-theme="broadsheet"] .game-meta p { margin-top: 8px; color: var(--text); font-size: .98rem; line-height: 1.45; }
[data-theme="broadsheet"] .game-status { margin-top: 12px; color: var(--muted); font-size: .66rem; }
/* the lead story: the entry marked .lead (in an app, the first game of the page) spans two
   columns. The gallery marks the first entry of every layout so each lead can be seen. */
[data-theme="broadsheet"] .home-section .game-card.lead { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); gap: 26px; padding: 26px 26px 28px 0; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-icon { order: 0; width: 120px; height: 120px; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-icon svg { width: 92px; height: 92px; }
[data-theme="broadsheet"] .home-section .kind-line .game-card.lead .game-icon svg { width: 70px; height: 70px; }
[data-theme="broadsheet"] .home-section .game-card.lead h3 { font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 850; letter-spacing: -.035em; }
[data-theme="broadsheet"] .home-section .game-card.lead p { font-size: 1.15rem; max-width: 34ch; }
[data-theme="broadsheet"] .home-section .game-card.lead .game-num::after { content: " · Today's lead game"; }
[data-theme="broadsheet"]:lang(de) .home-section .game-card.lead .game-num::after { content: " · Das Spiel des Tages"; }
[data-theme="broadsheet"] .home-footer { margin-top: 18px; }

/* art panels: the art is a halftone panel with a 1px ink frame, above the text */
[data-theme="broadsheet"] .kind-art .game-card { display: flex; flex-direction: column; align-items: stretch; padding: 16px 16px 24px; }
[data-theme="broadsheet"] .kind-art .game-card .game-icon { order: 0; width: auto; height: auto; aspect-ratio: 16 / 9; background: var(--table-bg); box-shadow: 0 0 0 1px var(--rule); --art-scale: 1.12; }
[data-theme="broadsheet"] .kind-art .game-card .game-meta { padding: 0; }
[data-theme="broadsheet"] .home-section .kind-art .game-card.lead { padding: 24px 16px 24px; }
[data-theme="broadsheet"] .home-section .kind-art .game-card.lead .game-icon { width: auto; height: 260px; --art-scale: 2.1; }

/* the icon page repeats game cards; no lead story there */
[data-theme="broadsheet"] .icon-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- footer ---------- */
[data-theme="broadsheet"] .site-footer { border-top: 3px double var(--rule); color: var(--text); }
[data-theme="broadsheet"] .footer-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
[data-theme="broadsheet"] .footer-note { font-style: italic; }

/* ---------- game pieces ---------- */
[data-theme="broadsheet"] .keypad button { border-color: var(--rule); background: transparent; font-weight: 800; }
[data-theme="broadsheet"] .keypad button:hover { background: var(--surface-2); }
[data-theme="broadsheet"] .keypad button.accent { background: var(--rule); color: var(--surface); }
[data-theme="broadsheet"] .table { margin: 0; }
[data-theme="broadsheet"] .slot { box-shadow: none; outline: 1px dashed var(--slot-line); outline-offset: -1px; }

@media (max-width: 860px) {
  [data-theme="broadsheet"] .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-theme="broadsheet"] .hero-meta .meta-note { display: none; }
  [data-theme="broadsheet"] .game-list { grid-template-columns: minmax(0, 1fr); }
  [data-theme="broadsheet"] .game-card { padding: 18px 0 20px; }
  [data-theme="broadsheet"] .home-section .game-card.lead { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; padding: 22px 0; }
  [data-theme="broadsheet"] .home-section .game-card.lead .game-icon { order: 2; width: 72px; height: 72px; }
  [data-theme="broadsheet"] .home-section .game-card.lead .game-icon svg { width: 54px; height: 54px; }
  [data-theme="broadsheet"] .home-section .game-card.lead h3 { font-size: 2.1rem; }
}

/* ---------- hover: everything clickable has to visibly react ---------- */
/* words underline like a link in the paper; boxes and keys get a heavier rule */
[data-theme="broadsheet"] :is(.btn, .segmented button, .tool, .main-nav a):hover:not(:disabled, [aria-pressed="true"], [aria-current="true"]),
[data-theme="broadsheet"] .theme-opt:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
[data-theme="broadsheet"] :is(.btn, .theme-btn, .icon-btn, .keypad button):hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="broadsheet"] .keypad button.accent:hover:not(:disabled) { background: var(--surface); color: var(--rule); }
[data-theme="broadsheet"] .btn-danger:hover:not(:disabled) { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--accent); }