:root {
  color-scheme: dark;
  --paper: #101311;
  --surface: #181d19;
  --surface-soft: #1e2520;
  --surface-raised: #27312a;
  --shell: #131814;
  --shell-translucent: #131814f5;
  --top-bg: #101311f2;
  --ink: #edf2ec;
  --muted: #a4afa6;
  --line: #303a32;
  --line-strong: #526456;
  --accent: #00ffaa;
  --accent-ink: #052819;
  --accent-soft: #103c2b;
  --accent-hover: #72ffce;
  --on-strong: #101711;
  --gold: #ffd36d;
  --gold-ink: #302200;
  --gold-soft: #3b3018;
  --notice-ink: #f8c28d;
  --notice-bg: #30261d;
  --ps: #9bc0ff;
  --ps-bg: #1a2e4d;
  --xb: #9ddd91;
  --xb-bg: #233b24;
  --sw: #ffa2a1;
  --sw-bg: #432629;
  --pc: #c1cde3;
  --pc-bg: #2b3343;
  --genre-warm: #ffc198;
  --genre-warm-bg: #412d24;
  --genre-blue: #a7d8f0;
  --genre-blue-bg: #223a43;
  --genre-gold: #e5d589;
  --genre-gold-bg: #383621;
  --genre-pink: #efb7cf;
  --genre-pink-bg: #3a2832;
  --genre-green: #b6dba5;
  --genre-green-bg: #2c3827;
  --header-height: 76px;
  --sidebar: 216px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f6f2;
  --surface: #fff;
  --surface-soft: #ecefe8;
  --surface-raised: #e3e9df;
  --shell: #fafbf7;
  --shell-translucent: #fafbf7f5;
  --top-bg: #f5f6f2f2;
  --ink: #20291f;
  --muted: #626e61;
  --line: #dce2d6;
  --line-strong: #a0b09a;
  --accent: #087a52;
  --accent-ink: #fff;
  --accent-soft: #daf5e7;
  --accent-hover: #056443;
  --on-strong: #fff;
  --gold: #ffd36d;
  --gold-ink: #302200;
  --gold-soft: #fff1c6;
  --notice-ink: #804716;
  --notice-bg: #fff0de;
  --ps: #285ca6;
  --ps-bg: #e8f0ff;
  --xb: #35632c;
  --xb-bg: #e9f3e3;
  --sw: #a32f3b;
  --sw-bg: #fdebee;
  --pc: #505d78;
  --pc-bg: #edf0f6;
  --genre-warm: #964b23;
  --genre-warm-bg: #fff0e5;
  --genre-blue: #2a667e;
  --genre-blue-bg: #e6f3fa;
  --genre-gold: #6a5a18;
  --genre-gold-bg: #f5f0d7;
  --genre-pink: #904267;
  --genre-pink-bg: #f8eaf1;
  --genre-green: #526c37;
  --genre-green-bg: #edf3e3;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { color: var(--accent-ink); background: var(--accent); }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; }
button, a, select { touch-action: manipulation; }
button, .btn, .art, .news-link, .news-game { transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
button:active, a:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; }
button:disabled:active { transform: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 700; }
.skip-link { position: fixed; top: -70px; left: 16px; background: var(--ink); color: var(--on-strong); padding: 12px; z-index: 100; }
.skip-link:focus { top: 10px; }

/* Navigation : trois destinations, des outils à leur place. */
.sidebar { width: var(--sidebar); position: fixed; inset: 0 auto 0 0; padding: 29px 20px 24px; background: var(--shell); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 24px; font-weight: 800; letter-spacing: -1.15px; white-space: nowrap; }
.brand img { width: 36px; height: 36px; }
.brand-period { color: var(--accent); }
.nav-caption { color: var(--muted); font-size: 9px; letter-spacing: 1.5px; font-weight: 600; margin: 51px 12px 13px; }
.primary-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { min-height: 46px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 6px; padding: 10px 12px; background: transparent; color: var(--muted); text-align: left; font-size: 13px; font-weight: 500; }
.nav-item.active { background: var(--surface-raised); color: var(--ink); font-weight: 700; }
.nav-item.active > .icon { color: var(--accent); }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 20px; padding: 0 5px; margin-left: auto; background: var(--surface-raised); border-radius: 4px; font-size: 10px; font-variant-numeric: tabular-nums; }
.unread-count:not(:empty) { color: var(--accent); background: var(--accent-soft); }
.followed-shortcut { display: flex; align-items: center; gap: 8px; padding: 12px; margin-top: 13px; color: var(--muted); background: none; border: 0; text-align: left; font-size: 11px; }
.followed-shortcut .icon { width: 14px; height: 14px; }
.sidebar-bottom { margin-top: auto; padding: 20px 7px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.sidebar-bottom p { margin: 9px 0 19px; font-size: 9px; }
.live-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.sidebar-signature { color: var(--muted); font-size: 9px; }
.workspace { margin-left: var(--sidebar); }
.top { position: sticky; top: 0; z-index: 25; background: var(--top-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topin { height: 76px; max-width: 1440px; margin: auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.top-context { color: var(--muted); font-size: 12px; }
.tools { display: flex; align-items: center; gap: 16px; }
.search-wrap { display: flex; align-items: center; gap: 10px; width: clamp(220px, 26vw, 360px); height: 39px; padding: 0 12px; background: var(--surface-soft); border: 1px solid transparent; border-radius: 6px; }
.search-wrap:focus-within { border-color: var(--accent); background: var(--surface); }
.search-wrap > .icon { width: 17px; height: 17px; color: var(--muted); }
.search { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; outline: none; }
.search::placeholder { color: var(--muted); }
.search-wrap kbd { font-family: inherit; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; font-size: 10px; width: 17px; text-align: center; }
.options-button { min-height: 40px; border: 0; padding: 7px 0 7px 10px; background: none; display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 500; }
.options-button .icon { width: 18px; height: 18px; }

/* Titres, filtres et états. */
.page-heading, .calendar-tools, .status-wrap, main, footer { max-width: 1440px; margin-inline: auto; padding-inline: 40px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 38px; padding-bottom: 26px; }
.page-eyebrow { font-size: 9px; color: var(--muted); letter-spacing: 1.6px; font-weight: 600; margin-bottom: 8px; }
.page-heading h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -1.7px; margin: 0 0 9px; font-weight: 800; }
.page-heading h1 > span { color: var(--accent); }
.page-description { margin: 0; color: var(--muted); font-size: 12px; }
.page-date { text-align: right; display: flex; flex-direction: column; gap: 6px; font-size: 11px; padding-bottom: 2px; white-space: nowrap; }
.page-date > :first-child { font-weight: 600; }
.count { color: var(--muted); font-size: 10px; }
.calendar-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 22px; }
.filters { display: flex; align-items: center; gap: 3px; }
.f { min-height: 36px; border: 1px solid transparent; border-radius: 5px; padding: 6px 10px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.f:not([data-p="all"])::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.f.on { background: var(--ink); color: var(--on-strong); }
.f.ps5 { color: var(--ps); background: var(--ps-bg); }.f.xbox { color: var(--xb); background: var(--xb-bg); }.f.switch { color: var(--sw); background: var(--sw-bg); }.f.pc { color: var(--pc); background: var(--pc-bg); }
.f:not([data-p="all"]).on { border-color: currentColor; box-shadow: inset 0 -2px currentColor; }
.filter-controls { display: flex; align-items: center; gap: 8px; }
.filter-toggle { display: none; }
.field { min-width: 0; }
.field select { height: 36px; padding: 6px 25px 6px 10px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--surface); color: var(--muted); font-size: 10px; max-width: 164px; }
.view-switch { display: flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 5px; }
.view-switch .tog { width: 32px; height: 30px; min-height: 30px; padding: 5px; justify-content: center; border: 0; background: transparent; }
.view-switch .tog[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #20221f16; }
.view-switch .icon { width: 16px; height: 16px; }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex-basis: 100%; color: var(--muted); font-size: 11px; }
.active-filters button { background: none; border: 0; padding: 4px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.status { color: var(--notice-ink); background: var(--notice-bg); border-left: 2px solid var(--accent); padding: 10px 14px; font-size: 12px; margin: 0 0 16px; }
.status:empty { display: none; }
main { padding-bottom: 48px; min-height: 55vh; }
.btn, .tog { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; text-decoration: none; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn .icon { width: 16px; height: 16px; transition: transform 160ms ease-out; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tog { color: var(--muted); }
.tog[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-strong); }
.icon-button { border: 1px solid var(--line); background: var(--surface); border-radius: 50%; width: 40px; height: 40px; padding: 9px; display: inline-flex; justify-content: center; align-items: center; }
.empty, .error { padding: 72px 24px; text-align: center; background: var(--shell); border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); }
.empty > .icon { display: block; width: 35px; height: 35px; margin: 0 auto 18px; color: var(--muted); }
.empty h2, .error h2 { color: var(--ink); font-size: 22px; letter-spacing: -.6px; margin-bottom: 8px; }
.empty p, .error p { max-width: 390px; margin: 0 auto 20px; font-size: 13px; }
.loading-state { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.loading-state p { color: var(--muted); grid-column: 1/-1; font-size: 12px; }
.skeleton { min-height: 300px; background: var(--surface-soft); border-radius: 7px; }

/* Une vedette visuelle et un aperçu court de la semaine. */
.spotlight { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(245px, 1fr); gap: 20px; margin: 0 0 32px; }
.hero { position: relative; min-height: 326px; padding: 29px 28px; color: #f0f6ed; background: #1b2820; border: 1px solid #344e3d; border-radius: 9px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 38%; gap: 20px; align-items: center; }
.hero::before { content: ''; position: absolute; width: 215px; height: 215px; border: 1px solid #41664c; border-radius: 50%; right: -80px; top: -115px; opacity: .45; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.kicker { font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600; margin: 0 0 19px; }
.hero .kicker { color: #b7d7c1; display: flex; align-items: center; gap: 7px; }
.hero .kicker::before { content: ''; display: block; width: 5px; height: 5px; background: #00ffaa; border-radius: 50%; box-shadow: 0 0 9px #00ffaa45; }
.hero h2 { font-size: clamp(25px, 2.9vw, 37px); line-height: 1.1; letter-spacing: -1.3px; margin: 0 0 17px; overflow-wrap: anywhere; }
.heroMeta { color: #becbc0; font-size: 11px; margin: 13px 0 19px; }
.hero .pls { margin-top: 0; }
.heroActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.heroActions .btn.primary { background: #00ffaa; border-color: #00ffaa; color: #052819; font-size: 11px; min-height: 38px; }
.hero-follow { width: 38px; height: 38px; padding: 9px; color: #edf2ec; background: #ffffff0c; border: 1px solid #ffffff35; border-radius: 5px; }
.hero-follow[aria-pressed="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
/* La hauteur découle de la vraie jaquette : aucune partie n'est recadrée. */
.heroArt { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 12px 28px #0005; }
.hero-art-link { position: relative; display: block; width: min(100%,220px); justify-self: center; transition: transform 220ms ease-out; }
.hero-countdown { position: absolute; right: 8px; bottom: 8px; background: var(--gold); color: var(--gold-ink); padding: 8px 11px; display: flex; align-items: baseline; gap: 4px; border-radius: 3px; box-shadow: 0 2px 12px #0003; }
.hero-countdown strong { font-size: 25px; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.hero-countdown span { color: #534211; font-size: 9px; }
.week-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 19px 20px 12px; min-width: 0; }
.section-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-label h2 { font-size: 14px; letter-spacing: -.3px; margin: 0; }
.section-label > span { font-size: 10px; color: var(--muted); }
.week-panel ul { list-style: none; padding: 0; margin: 10px 0 6px; }
.week-panel li + li { border-top: 1px solid var(--line); }
.week-game { display: grid; grid-template-columns: 36px minmax(0,1fr) 30px; align-items: center; gap: 10px; padding: 11px 0; text-decoration: none; }
.week-game img, .week-placeholder { width: 36px; height: 45px; border-radius: 3px; object-fit: cover; background: var(--surface-soft); }
.week-game strong { display: block; font-size: 11px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.week-game small { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
.week-date { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.week-date small { font-size: 8px; font-weight: 400; letter-spacing: 0; }
.text-action { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 0; border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 500; text-decoration: none; }
.text-action .icon { width: 14px; height: 14px; }
.week-panel .none { margin-top: 30px; }

/* Une sélection de la semaine, avec les informations utiles avant d'ouvrir la fiche. */
.weekly-brief { margin: 0 0 36px; }
.weekly-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.weekly-heading h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.6px; }
.weekly-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.weekly-heading > button { flex-shrink: 0; min-height: 36px; font-size: 11px; }
.weekly-heading > button .icon { width: 14px; height: 14px; }
.weekly-more { margin-top: 14px; }
.weekly-more > summary { padding: 12px 0; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
#weeklyTitle { scroll-margin-top: calc(var(--header-height) + 20px); }
.weekly-more > summary:active { transform: scale(.97); }
.weekly-selection { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.weekly-card { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 16px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.weekly-cover { display: block; align-self: start; width: 80px; min-height: 106px; overflow: hidden; border-radius: 4px; background: var(--surface-soft); text-decoration: none; transition: transform 180ms ease-out; }
.weekly-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; }
.weekly-cover .noart { min-height: 106px; padding: 8px; font-size: 9px; }
.weekly-cover .noart .icon { width: 22px; height: 22px; }
.weekly-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.weekly-info h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; letter-spacing: -.25px; overflow-wrap: anywhere; }
.weekly-info h3 a { text-decoration: none; }
.weekly-date, .weekly-info > time { display: block; margin: 0 0 10px; color: var(--accent); font-size: 10px; font-weight: 600; line-height: 1.5; }
.weekly-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.weekly-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 3px; }
.weekly-meta .genre-badge { margin: 0; }
.weekly-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; }
.weekly-actions .btn { min-height: 36px; padding: 7px 11px; font-size: 10px; }
.weekly-actions .btn .icon { width: 14px; height: 14px; }
.weekly-follow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); }
.weekly-follow .icon { width: 18px; height: 18px; transition: fill 160ms ease-out, transform 200ms ease-out; }
.weekly-follow[aria-pressed="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.weekly-follow[aria-pressed="true"] .icon { fill: currentColor; }

/* Calendrier : date de repère, jaquette, titre et plateformes. */
.results-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.results-header h2 { font-size: 17px; letter-spacing: -.55px; margin: 0; }
.results-header .lede { font-size: 11px; margin: 0; }
.lede { font-size: 12px; color: var(--muted); line-height: 1.6; }
.month h2 { margin: 28px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); font-weight: 600; }
.month:first-child h2 { margin-top: 0; }
.month-grid { padding-top: 22px; }
.day { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.railin { position: sticky; top: calc(var(--header-height) + 20px); display: flex; align-items: flex-start; flex-direction: column; }
.dnum { font-size: 36px; font-weight: 600; letter-spacing: -1.8px; line-height: 1; }
.dmon { font-size: 11px; color: var(--muted); margin-top: 4px; }
.dwd { font-size: 9px; color: var(--muted); margin-top: 4px; }
.dcount { font-size: 9px; color: var(--muted); margin-top: 12px; }
.rail .cd { margin-top: 10px; font-size: 8px; padding: 3px 5px; }
.day.is-today .dnum { color: var(--accent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(156px,1fr)); gap: 26px 18px; align-items: start; }
.card { position: relative; min-width: 0; }
.art { display: block; position: relative; background: var(--surface-soft); aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; text-decoration: none; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 240ms ease-out; }
.noart { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding: 20px; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--muted); }
.noart .icon { width: 30px; height: 30px; opacity: .55; }
.art .cd { position: absolute; left: 8px; top: 10px; max-width: calc(100% - 50px); background: #121a14eb; color: #f2f5e9; box-shadow: 0 1px 5px #0003; border: 1px solid #ffffff30; backdrop-filter: blur(5px); }
.art .cd.now { background: var(--accent); color: var(--accent-ink); }
.cd { font-size: 9px; font-weight: 600; line-height: 1.3; white-space: nowrap; display: inline-block; padding: 4px 7px; border-radius: 3px; background: var(--surface-raised); color: var(--ink); }
.cd.soon, .art .cd.soon { background: var(--gold); color: var(--gold-ink); border-color: transparent; }.cd.now { background: var(--accent); color: var(--accent-ink); }.cd.past { color: var(--muted); }
.play { position: absolute; bottom: 0; inset-inline: 0; padding: 25px 12px 13px; background: linear-gradient(transparent, #000a); color: #fff; opacity: 0; transition: opacity 180ms ease-out; font-size: 11px; }
.art:focus-visible .play { opacity: 1; }
.fav { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 7px; background: #121a14e8; border: 1px solid #ffffff45; border-radius: 5px; color: #f2f5e9; z-index: 2; box-shadow: 0 1px 5px #0003; backdrop-filter: blur(5px); }
.fav .icon { width: 17px; height: 17px; }
.fav[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.fav[aria-pressed="true"] .icon, .hero-follow[aria-pressed="true"] .icon, .detail-actions [aria-pressed="true"] .icon { fill: currentColor; }
.fav .icon, .hero-follow .icon { transition: fill 160ms ease-out, transform 200ms ease-out; }
.body { padding: 12px 1px 0; }
.when { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.card h4 { font-size: 14px; line-height: 1.35; font-weight: 650; letter-spacing: -.2px; margin: 0 0 8px; overflow-wrap: anywhere; }
.card h4 a { text-decoration: none; }
.pls { display: flex; gap: 4px 6px; align-items: center; flex-wrap: wrap; }
.pl { display: inline-flex; gap: 4px; align-items: center; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; font-size: 9px; line-height: 1.3; font-weight: 600; color: var(--pc); background: var(--pc-bg); white-space: nowrap; }
.pl::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.pl.ps5 { color: var(--ps); background: var(--ps-bg); }.pl.xbox { color: var(--xb); background: var(--xb-bg); }.pl.switch { color: var(--sw); background: var(--sw-bg); }
.pls.big .pl { font-size: 10px; padding: 4px 7px; }
.pdate { font-size: 9px; color: var(--muted); }
.meta { margin-top: 7px; font-size: 10px; color: var(--muted); }
.genre-badge { display: inline-flex; align-items: center; max-width: 100%; margin: 1px 3px 2px 0; padding: 3px 6px; border-radius: 3px; color: var(--pc); background: var(--pc-bg); font-size: 9px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.genre-badge:is([data-genre="Action"], [data-genre="Combat"], [data-genre="Combat et action"], [data-genre="Tir"], [data-genre="Course"], [data-genre="Arcade"]) { color: var(--genre-warm); background: var(--genre-warm-bg); }
.genre-badge:is([data-genre="Aventure"], [data-genre="Plateforme"], [data-genre="Indépendant"], [data-genre="Sport"]) { color: var(--genre-green); background: var(--genre-green-bg); }
.genre-badge:is([data-genre="RPG"], [data-genre="Jeu de rôle"], [data-genre="Cartes et jeux de société"], [data-genre="Arène multijoueur"]) { color: var(--genre-gold); background: var(--genre-gold-bg); }
.genre-badge:is([data-genre^="Stratégie"], [data-genre="Simulation"], [data-genre="Tactique"], [data-genre="Réflexion"], [data-genre="Puzzle"], [data-genre="Pointer et cliquer"]) { color: var(--genre-blue); background: var(--genre-blue-bg); }
.genre-badge:is([data-genre="Horreur"], [data-genre="Roman visuel"], [data-genre="Musique"], [data-genre="Quiz"], [data-genre="Flipper"]) { color: var(--genre-pink); background: var(--genre-pink-bg); }
.tag { display: inline-block; font-size: 8px; font-weight: 500; padding: 2px 4px; margin-left: 4px; border-radius: 2px; vertical-align: 1px; }
.tag.new { background: var(--accent-soft); color: var(--accent); }.tag.shift { background: var(--notice-bg); color: var(--notice-ink); }
.foot { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ytb { font-size: 9px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ytb .icon { width: 11px; height: 11px; }
.want { font-size: 9px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.want .icon { width: 11px; height: 11px; }
.compact .grid { grid-template-columns: minmax(0,1fr); gap: 0; }
.compact .card { display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 15px; align-items: center; padding: 12px 45px 12px 0; border-bottom: 1px solid var(--line); }
.compact .card:last-child { border-bottom: 0; }
.compact .art { width: 48px; height: 64px; }
.compact .art .cd, .compact .play, .compact .meta { display: none; }
.compact .body { padding: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 20px; }
.compact .body > :not(.foot) { grid-column: 1; }
.compact .body h4 { margin-bottom: 6px; }
.compact .foot { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-content: center; justify-content: flex-end; }
.compact .fav { right: 0; top: calc(50% - 18px); background: transparent; border-color: var(--line); color: var(--muted); box-shadow: none; }
.compact .fav[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.compact .noart { padding: 5px; font-size: 7px; }.compact .noart .icon { display: none; }

/* Actualités : un fil de lecture, avec les jeux comme repères. */
.news-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.news-heading h2 { font-size: 18px; margin: 0 auto 0 0; letter-spacing: -.5px; }
.news-filters { display: flex; gap: 4px; }
.news-filters .tog, #readNews { min-height: 36px; font-size: 11px; padding: 7px 12px; }
.news > .lede { margin: 16px 0; max-width: 720px; font-size: 11px; }
.news-total { color: var(--muted); font-size: 10px; margin-bottom: 20px; }
.news ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.news-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.news-link { display: block; padding: 23px; flex: 1; text-decoration: none; }
.news-visual { float: right; display: flex; gap: 8px; margin: 0 0 12px 20px; width: 75px; height: 100px; overflow: hidden; }
.news-visual img { width: 75px; height: 100px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.news-reading { display: inline-flex; gap: 5px; align-items: center; font-size: 9px; color: var(--accent); margin-bottom: 10px; }
.news-reading::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.is-read .news-reading { color: var(--muted); }
.nt { display: block; font-size: 20px; line-height: 1.3; letter-spacing: -.6px; font-weight: 650; overflow-wrap: anywhere; }
.nr { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.nm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 9px; color: var(--muted); margin-top: 16px; }
.news-games { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 23px 16px; }
.news-game { font-size: 9px; color: var(--muted); border: 1px solid var(--line); padding: 4px 7px; text-decoration: none; border-radius: 3px; overflow-wrap: anywhere; }
.news-read-button { padding: 12px 23px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--muted); text-align: left; font-size: 10px; }
.none { color: var(--muted); font-size: 12px; padding: 16px 0; line-height: 1.7; }
.news .none { grid-column: 1/-1; }

/* Fiche et options : dialogues natifs, fermeture toujours accessible. */
body.detail-open, body.options-open, body.media-open { overflow: hidden; }
.game-detail { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; padding: 0 30px calc(30px + env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.game-detail[open] { animation: detail-in 220ms ease-out; }
dialog::backdrop { background: #060b08b8; backdrop-filter: blur(4px); }
@keyframes detail-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.detail-top { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; padding: calc(15px + env(safe-area-inset-top)) 0 15px; z-index: 3; background: var(--paper); font-size: 9px; font-weight: 600; letter-spacing: 1px; }
.detail-art { display: block; width: 170px; max-width: 50%; height: auto; object-fit: contain; border-radius: 5px; margin: 6px 0 24px; box-shadow: 0 7px 20px #0002; }
.game-detail .kicker { margin-bottom: 10px; }
.game-detail h2 { font-size: 31px; line-height: 1.15; letter-spacing: -1px; margin: 0 0 12px; overflow-wrap: anywhere; }
.detail-date { color: var(--muted); font-size: 12px; margin-bottom: 15px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.detail-actions .btn { font-size: 11px; }
.detail-actions [data-id][aria-pressed="true"] { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.detail-facts { margin: 0; }
.detail-facts > div { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.detail-facts dt { color: var(--muted); }.detail-facts dd { margin: 0; overflow-wrap: anywhere; }
.game-detail h3 { font-size: 13px; letter-spacing: -.2px; margin: 27px 0 10px; }
.platform-dates { list-style: none; margin: 0; padding: 0; }
.platform-dates li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 11px; }
.detail-summary { color: var(--muted); font-size: 12px; line-height: 1.8; white-space: pre-line; }
.detail-news { margin-top: 24px; }.detail-news ul { grid-template-columns: minmax(0,1fr); margin-top: 14px; }.detail-news .nt { font-size: 16px; }
.media-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--surface); padding: 4px 0 12px; margin: 0; }
.media-shot { min-width: 0; display: block; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; scroll-snap-align: start; text-decoration: none; transition: border-color 180ms ease-out, transform 180ms ease-out; }
.media-shot:focus-visible { outline-offset: -3px; }
.media-shot img { width: 100%; height: auto; aspect-ratio: 16/9; display: block; object-fit: contain; background: #080e0a; }
.media-shot :is(figcaption, span) { display: block; padding: 9px 11px; color: var(--muted); font-size: 10px; }
.media-viewer { width: min(1160px,calc(100% - 40px)); max-width: 100%; max-height: calc(100dvh - 40px); margin: auto; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); overscroll-behavior: contain; }
.media-viewer[open] { animation: content-in 200ms ease-out; }
.media-viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 12px; }
.media-viewer-top h2 { font-size: 14px; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.media-viewer-top .icon-button { flex-shrink: 0; }
.media-viewer figure { margin: 0; }
.media-viewer figure > img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 210px); object-fit: contain; background: #080e0a; border-radius: 4px; }
.media-viewer figcaption { color: var(--muted); font-size: 11px; text-align: center; margin: 10px 0; }
.media-viewer-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.media-viewer-controls > :not(button) { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.game-ratings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.game-rating { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 5px; background: var(--surface); font-size: 11px; }
.rating-value { display: block; color: var(--accent); font-size: 32px; line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.rating-value :is(small,span) { margin-left: 2px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.rating-label { color: var(--ink); font-size: 11px; font-weight: 600; }
.game-rating > :is(small,p) { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 0; }
.game-rating a { color: var(--muted); text-underline-offset: 3px; }
.help { font-size: 10px; color: var(--muted); margin: 12px 0 0; line-height: 1.7; }
.options-dialog { width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 25px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.options-dialog[open] { animation: content-in 200ms ease-out; }
.options-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.options-heading h2 { font-size: 23px; letter-spacing: -.8px; margin: 0; }
.option-section { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: 15px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.option-section > .icon { color: var(--accent); margin-top: 2px; }
.option-section h3 { font-size: 14px; margin-bottom: 8px; }
.option-section p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 15px; }
.option-section .help { font-size: 10px; margin-bottom: 0; }
.options-note { font-size: 10px; color: var(--muted); margin: 20px 0 0; }
.options-dialog .status { margin-top: 15px; }
footer { border-top: 1px solid var(--line); padding-block: 23px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 9px; }
footer > :first-child { color: var(--ink); font-weight: 700; font-size: 13px; }
.footer-credit { color: var(--muted); font-weight: 400; font-size: 9px; margin-left: 12px; }
footer a { text-decoration: none; }.footer-credit a { text-decoration: underline; text-underline-offset: 2px; }
footer > a { display: flex; gap: 4px; align-items: center; white-space: nowrap; }footer .icon { width: 11px; height: 11px; }
.creator-credit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; font-weight: 400; }
.creator-link { display: inline-flex; align-items: baseline; gap: 0; color: #00ffaa; font: 600 12px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; text-decoration: none; white-space: nowrap; }
.terminal-cursor { display: inline-block; color: inherit; margin-left: 1px; transition: opacity 140ms ease-out; }
.terminal-cursor.is-hidden { opacity: 0; }
.theme-switch { display: flex; flex-wrap: wrap; gap: 7px; }
.theme-switch :is(.btn,.tog)[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.totop { position: fixed; bottom: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); z-index: 15; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; box-shadow: 0 2px 8px #20221f0a; }
.totop .icon { transform: rotate(-90deg); width: 17px; height: 17px; }.totop.show { opacity: 1; pointer-events: auto; }

/* Une courte séquence de démarrage, rejouable et toujours passable. */
.splash { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 30px 20px; border: 0; background: var(--paper); color: var(--ink); flex-direction: column; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transition: opacity 250ms ease-out, transform 250ms ease-out; }
.splash[open] { display: flex; }.splash::backdrop { background: var(--paper); transition: opacity 250ms ease-out; }
.intro-visible { overflow: hidden; }
.splash-scene { position: relative; width: 260px; height: 245px; display: grid; place-items: center; }
.splash-mascot { width: 250px; height: 250px; position: relative; z-index: 1; filter: drop-shadow(0 16px 32px #00ffaa12); }
.splash:not([open]) * { animation: none !important; }
.splash-orbit { position: absolute; color: #ffd36d; opacity: 0; animation: orbit-pop 650ms ease-out 850ms forwards; }
.orbit-cross { left: 7px; top: 56px; font: 30px/1 ui-monospace, monospace; transform: rotate(-15deg); }
.orbit-circle { right: 0; top: 135px; width: 14px; height: 14px; border: 3px solid #83b5ff; border-radius: 50%; animation-delay: 1150ms; }
.orbit-square { left: 30px; bottom: 27px; width: 12px; height: 12px; border: 2px solid var(--accent); transform: rotate(15deg); animation-delay: 1450ms; }
.splash-name { font-size: 38px; font-weight: 800; letter-spacing: -1.8px; margin: -10px 0 8px; animation: content-in 450ms ease-out 250ms both; }
.splash-caption { color: var(--muted); font-size: 12px; margin: 0; animation: content-in 450ms ease-out 500ms both; }
.splash-progress { display: flex; gap: 5px; margin-top: 25px; }
.splash-progress i { width: 15px; height: 5px; border-radius: 1px; background: var(--accent); opacity: .16; animation: pixel-ready 180ms ease-out forwards; }
.splash-progress i:nth-child(1) { animation-delay: 780ms; }
.splash-progress i:nth-child(2) { animation-delay: 1010ms; }
.splash-progress i:nth-child(3) { animation-delay: 1240ms; }
.splash-progress i:nth-child(4) { animation-delay: 1470ms; }
.splash-progress i:nth-child(5) { animation-delay: 1700ms; }
.splash-progress i:nth-child(6) { animation-delay: 1930ms; }
.splash-progress i:nth-child(7) { animation-delay: 2160ms; }
.splash-progress i:nth-child(8) { animation-delay: 2390ms; }
.splash-skip { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); min-height: 44px; padding: 10px 14px; border: 0; background: none; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 12px; }
.splash-skip:focus-visible { outline-offset: 2px; }
.splash.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.splash.is-leaving::backdrop { opacity: 0; }
@keyframes orbit-pop { 0% { opacity: 0; scale: .4; translate: 0 8px; } 55% { opacity: 1; scale: 1.15; } 100% { opacity: .7; scale: 1; translate: 0 0; } }
@keyframes pixel-ready { to { opacity: 1; } }
.credit-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex-shrink: 0; }
.credit-code { color: var(--muted); }.credit-code .code-left, .credit-code .code-right { animation: code-tap 2400ms ease-out infinite; }.credit-code .code-right { animation-name: code-tap-right; }
.credit-heart { color: #fa8aac; width: 15px; height: 15px; fill: #fa8aac22; animation: heart-beat 2400ms ease-out infinite; transform-origin: center; }
@keyframes code-tap { 10%,25% { transform: translateX(-1.7px); } 40%,100% { transform: none; } }
@keyframes code-tap-right { 10%,25% { transform: translateX(1.7px); } 40%,100% { transform: none; } }
@keyframes heart-beat { 12% { transform: scale(1.16); } 24% { transform: scale(1); } 32% { transform: scale(1.1); } 48%,100% { transform: scale(1); } }
.options-credit { margin-top: 24px; }.option-intro { padding-top: 20px; }
[data-theme="light"] .creator-link { color: #087a52; }
[data-theme="light"] .credit-heart { color: #bc315d; fill: #bc315d18; }
.platform-logo { display: block; flex: 0 0 auto; fill: currentColor; width: 34px; height: 15px; }
.logo-ps5 { width: 39px; height: 9px; }.logo-xbox { width: 34px; height: 15px; }.logo-switch { width: 23px; height: 13px; }.logo-pc { width: 13px; height: 13px; fill: none; }
.pl::before, .f::before { display: none !important; }
.pl { min-height: 23px; }.f { min-width: 47px; justify-content: center; }
.f .logo-ps5 { width: 51px; height: 12px; }.f .logo-xbox { width: 43px; height: 19px; }.f .logo-switch { width: 34px; height: 19px; }.f .logo-pc { width: 17px; height: 17px; }
.brand img { width: 44px; height: 44px; margin: -4px; }
.view-enter { animation: content-in 240ms ease-out; }
@keyframes content-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mark-in { from { opacity: 0; transform: translateY(12px) scale(.86) rotate(-7deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--surface-raised); color: var(--ink); }
  .btn:hover, .icon-button:hover { border-color: var(--line-strong); }
  .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .hero .btn.primary:hover { background: #72ffce; border-color: #72ffce; }
  .f:not(.on):hover { border-color: currentColor; }
  .art:hover img { transform: scale(1.025); }.art:hover .play { opacity: 1; }
  .hero-art-link:hover { transform: translateY(-3px) rotate(1deg); }
  .btn:hover .icon { transform: translateX(1px); }
  .card h4 a:hover, .week-game:hover strong { text-decoration: underline; text-underline-offset: 3px; }
  .fav:hover, .hero-follow:hover { border-color: var(--gold); color: var(--gold); }.fav[aria-pressed="true"]:hover, .hero-follow[aria-pressed="true"]:hover { color: var(--gold-ink); background: #ffe49c; }
  .fav:hover .icon, .hero-follow:hover .icon { transform: rotate(-9deg) scale(1.08); }
  .news-link:hover .nt { color: var(--accent); }.news-read-button:hover { color: var(--ink); background: var(--surface-soft); }
  .news-game:hover { border-color: var(--line-strong); }.text-action:hover, .followed-shortcut:hover { color: var(--accent); }
  .media-shot:hover { border-color: var(--accent); transform: translateY(-2px); }
  .creator-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .weekly-cover:hover { transform: translateY(-2px); }
  .weekly-info h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .weekly-follow:hover { color: var(--gold); border-color: var(--gold); }.weekly-follow[aria-pressed="true"]:hover { color: var(--gold-ink); background: #ffe49c; }
  .weekly-follow:hover .icon { transform: rotate(-9deg) scale(1.08); }
}
.hero-art-link:active, .media-shot:active, .weekly-cover:active { transform: scale(.97); }
@media (max-width: 1200px) {
  :root { --sidebar: 186px; }
  .sidebar { padding-inline: 14px; }.brand { font-size: 22px; gap: 8px; }.brand img { width: 32px; height: 32px; }
  .page-heading, .calendar-tools, .status-wrap, main, footer, .topin { padding-inline: 26px; }
  .hero { padding: 23px; gap: 15px; }.hero h2 { font-size: 29px; }.spotlight { gap: 16px; grid-template-columns: minmax(0,1.7fr) minmax(230px,1fr); }
  .week-panel { padding-inline: 15px; }.grid { grid-template-columns: repeat(auto-fill,minmax(145px,1fr)); gap: 22px 15px; }
  .field select { max-width: 150px; }
}
@media (max-width: 960px) {
  .sidebar { display: contents; }
  .sidebar .brand { position: absolute; top: 22px; left: 24px; z-index: 45; }
  .nav-caption, .followed-shortcut, .sidebar-bottom { display: none; }
  .primary-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px 15px calc(6px + env(safe-area-inset-bottom)); background: var(--shell-translucent); border-top: 1px solid var(--line); }
  .nav-item { flex: 1; max-width: 160px; min-height: 50px; flex-direction: column; gap: 4px; position: relative; padding: 5px; font-size: 9px; border-radius: 0; }.nav-item.active { background: transparent; color: var(--accent); }
  .nav-item .icon { width: 20px; height: 20px; }.nav-count { position: absolute; top: 0; left: calc(50% + 11px); min-width: 16px; height: 16px; font-size: 8px; }
  .workspace { margin-left: 0; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .topin { justify-content: flex-end; }.top-context { display: none; }.search-wrap { width: clamp(240px,40vw,380px); }
  .page-heading { padding-top: 28px; }.page-heading h1 { font-size: 38px; }
  .totop { bottom: calc(83px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .spotlight { grid-template-columns: minmax(0,1fr); }.week-panel { display: none; }
  .weekly-selection { grid-template-columns: minmax(0,1fr); }.weekly-heading { align-items: flex-start; gap: 12px; }.weekly-heading h2 { font-size: 19px; }
  .hero { min-height: 280px; grid-template-columns: minmax(0,1fr) 34%; padding: 25px; }.hero-art-link { max-width: 180px; }.hero h2 { font-size: 33px; }
  .page-date { display: none; }.page-heading h1 { font-size: 34px; }
  .calendar-tools { gap: 12px; }.filter-controls { width: 100%; }.field { flex: 1; }.field select { width: 100%; max-width: none; }
  .day { grid-template-columns: 47px minmax(0,1fr); gap: 14px; }.dnum { font-size: 29px; }
  .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px 13px; }
  .compact .body { display: block; }.compact .foot { margin-top: 6px; justify-content: flex-start; }.compact .card { padding-right: 43px; }
  .news ul { grid-template-columns: minmax(0,1fr); }.news-heading { gap: 10px; }.news-heading h2 { display: none; }#readNews { margin-left: auto; }
  footer { flex-wrap: wrap; }.footer-credit { display: block; margin: 6px 0 0; }
  .results-header { align-items: baseline; }.results-header .lede { font-size: 10px; text-align: right; }
}
@media (max-width: 520px) {
  .sidebar .brand { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 18px; font-size: 23px; }.sidebar .brand img { width: 31px; height: 31px; }
  .topin { padding: calc(65px + env(safe-area-inset-top)) 18px 12px; height: auto; }.tools { width: 100%; }.search-wrap { width: 100%; height: 37px; }.search-wrap kbd { display: none; }
  .options-button { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 15px; width: 40px; height: 40px; justify-content: center; padding: 9px; border: 1px solid var(--line); border-radius: 6px; }.options-button span { display: none; }
  .page-heading, .calendar-tools, .status-wrap, main, footer { padding-inline: 18px; }.page-heading { padding-top: 24px; padding-bottom: 22px; }.page-heading h1 { font-size: 31px; letter-spacing: -1.2px; }.page-eyebrow { font-size: 8px; }.page-description { font-size: 11px; }
  .filters { width: 100%; overflow-x: auto; scrollbar-width: none; }.filters::-webkit-scrollbar { display: none; }.f { flex-shrink: 0; padding: 6px 9px; font-size: 10px; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 11px; }.filter-toggle .icon { width: 15px; height: 15px; }
  .filter-controls { display: none; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 7px; }.filters-open .filter-controls { display: grid; }.filter-controls .field:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }.view-switch { grid-column: 3; grid-row: 1 / 3; align-self: start; }.view-switch .tog { width: 29px; }.field select { font-size: 11px; padding-right: 16px; height: 38px; }
  .hero { padding: 23px 20px; min-height: 260px; gap: 13px; grid-template-columns: minmax(0,1fr) 35%; }.hero h2 { font-size: 25px; letter-spacing: -.7px; }.hero .kicker { font-size: 8px; letter-spacing: .7px; margin-bottom: 15px; }.heroMeta { font-size: 10px; margin: 11px 0 16px; }.heroActions { gap: 6px; }.heroActions .btn.primary { padding-inline: 10px; font-size: 10px; }.heroActions .btn .icon { display: none; }.hero-countdown { right: 5px; bottom: 5px; padding: 6px; }.hero-countdown strong { font-size: 21px; }.hero-countdown span { font-size: 8px; }.hero .pl { font-size: 8px; padding: 2px 4px; }
  .spotlight { margin-bottom: 27px; }.results-header h2 { font-size: 15px; }.results-header .lede { max-width: 125px; font-size: 9px; }
  .day { display: block; padding-top: 18px; }.railin { position: static; flex-direction: row; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }.dnum { font-size: 23px; letter-spacing: -.8px; }.dmon, .dwd, .dcount, .rail .cd { margin: 0; }.dwd { font-size: 9px; }.dcount { margin-left: auto; font-size: 9px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 15px; }.card h4 { font-size: 14px; }.fav { width: 42px; height: 42px; top: 7px; right: 7px; }.art .cd { top: 11px; left: 7px; font-size: 9px; padding: 3px 5px; }
  .card .foot { gap: 5px; flex-direction: column; align-items: flex-start; }.compact .card .foot { flex-direction: row; }.when { font-size: 10px; }.ytb, .want { font-size: 10px; }
  .news-heading { align-items: flex-start; }#readNews { font-size: 9px; padding: 7px 8px; }.news-filters .tog { font-size: 10px; padding: 7px 10px; }.news-link { padding: 19px; }.nt { font-size: 18px; }.nr { font-size: 12px; }.news-games { padding-inline: 19px; }.news-read-button { padding-inline: 19px; }
  .game-detail { padding-inline: 21px; }.game-detail h2 { font-size: 28px; }.detail-facts > div { grid-template-columns: 100px minmax(0,1fr); }.detail-art { width: 135px; }.options-dialog { padding: 20px; }.option-section { gap: 10px; }
  .media-gallery { grid-auto-columns: 92%; gap: 10px; }.game-rating { padding: 12px; }.rating-value { font-size: 28px; }
  .media-viewer { width: 100%; max-height: 100dvh; padding: calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); border-inline: 0; border-radius: 0; }.media-viewer figure > img { max-height: calc(100dvh - 230px); }.media-viewer-controls { gap: 10px; }.media-viewer-controls .btn { padding: 9px 10px; font-size: 11px; }
  .weekly-heading { flex-wrap: wrap; gap: 7px; }.weekly-heading > button { min-height: 36px; padding-block: 4px; }.weekly-heading p { font-size: 10px; }.weekly-selection { gap: 12px; }
  .weekly-card { grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding: 14px; }.weekly-cover { width: 64px; min-height: 85px; }.weekly-cover .noart { min-height: 85px; }.weekly-info h3 { font-size: 14px; }.weekly-description { font-size: 11px; }
  .weekly-actions .btn { min-height: 40px; }.weekly-follow { width: 40px; height: 40px; }
  footer { font-size: 8px; padding-block: 20px; }.loading-state { grid-template-columns: repeat(2,1fr); }.loading-state .skeleton:nth-child(3) { display: none; }.skeleton { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .splash-orbit { opacity: .7; }.splash-progress i { opacity: 1; }
  .terminal-cursor, .terminal-cursor.is-hidden { opacity: 1; }
}