/* Annual pages share the journal's existing palette, typography and controls. */
.annual-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.annual-intro p { margin: 0; color: var(--muted); font-size: 12px; }
.annual-year-control { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.annual-year-control .select-wrap select { min-width: 110px; }
.annual-year-control .select-wrap>svg { position: absolute; right: 11px; top: 12px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.annual-layout { --annual-column-space: 40px; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: start; gap: var(--annual-column-space); padding-top: 30px; }
.annual-timeline-section, .annual-right-column, .annual-statistics, .annual-favorites { min-width: 0; }
.annual-right-column { display: grid; gap: 36px; padding-left: var(--annual-column-space); border-left: 1px solid var(--line); }
.annual-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.annual-section-heading h2 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.annual-export-title { padding: 0; border: 0; border-radius: var(--control-radius); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; transition: color 150ms ease-out; }
.annual-export-title:hover, .annual-export-title:focus-visible { color: var(--accent-bright); }
.annual-export-title-status { color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
.annual-section-heading>span { color: var(--muted); font-size: 12px; }
.annual-section-heading>svg { width: 18px; height: 18px; color: var(--muted); }
.annual-section-heading .text-button { color: var(--accent-bright); min-height: 32px; }
.annual-section-heading .text-button svg { width: 14px; height: 14px; }
.annual-timeline { list-style: none; padding: 0; margin: 0; }
.annual-month { position: relative; padding: 0 0 24px 64px; min-height: 74px; }
.annual-month::before { content: ""; position: absolute; left: 44px; top: 8px; bottom: -8px; width: 1px; background: var(--line-strong); }
.annual-month::after { content: ""; position: absolute; top: 7px; left: 41px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.annual-month:last-child::before { bottom: 24px; }
.annual-month-empty { min-height: 56px; }
.annual-month-empty::after { background: var(--muted); width: 5px; height: 5px; left: 42px; top: 8px; }
.annual-month-label { position: absolute; top: -1px; left: 0; width: 33px; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.annual-month-label time { font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.annual-month-label time small { margin-left: 3px; font-size: 11px; font-weight: 400; }
.annual-month-label>span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.annual-month-content>p { color: var(--muted); font-size: 12px; margin: 0; padding-top: 1px; }
.annual-month-covers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.annual-game-card, .annual-favorite-card { display: block; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; border-radius: var(--media-radius); }
.annual-cover { position: relative; display: block; aspect-ratio: 16/9; width: 100%; overflow: hidden; border-radius: var(--media-radius); background: var(--backdrop); }
.annual-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.annual-image-fallback { display: none; position: absolute; inset: 0; place-items: center; color: var(--muted); }
.annual-image-fallback svg { width: 23px; height: 23px; }
.annual-cover-empty .annual-image-fallback, .annual-image-failed .annual-image-fallback { display: grid; }
.annual-image-failed img { visibility: hidden; }
.annual-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.annual-game-card:not(:disabled):hover .annual-cover::after, .annual-game-card:focus-visible .annual-cover::after, .annual-game-card[aria-pressed="true"] .annual-cover::after, .annual-favorite-card:not(:disabled):hover .annual-cover::after, .annual-favorite-card:focus-visible .annual-cover::after, .annual-favorite-card[aria-pressed="true"] .annual-cover::after { box-shadow: inset 0 0 0 2px var(--accent-bright); }
.annual-game-card:focus-visible, .annual-favorite-card:focus-visible { outline: none; }
.annual-card-title { display: block; margin-top: 5px; color: var(--secondary); font-size: 11px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annual-month-more { margin-top: 7px; min-height: 28px; font-size: 11px; gap: 4px; }
.annual-month-more svg, .annual-picker-more svg { width: 13px; height: 13px; }
.annual-month-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.annual-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
.annual-totals dt { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.annual-totals dd { font-size: 21px; line-height: 1.5; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.annual-totals dd small { font-size: 11px; color: var(--muted); font-weight: 400; }
.annual-table-scroll { overflow: auto; max-width: 100%; }
.annual-history-scroll { --annual-row-height: 44px; --annual-head-height: 36px; height: calc(var(--annual-head-height) + var(--annual-row-height) * var(--annual-visible-rows) + var(--annual-horizontal-scrollbar, 0px)); overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-color: transparent transparent; }
.annual-history-scroll::-webkit-scrollbar-track, .annual-history-scroll::-webkit-scrollbar-thumb { background: transparent; }
.annual-history-scroll.has-more-years.is-scrolling { scrollbar-color: var(--muted) transparent; }
.annual-history-scroll.has-more-years.is-scrolling::-webkit-scrollbar-thumb { background: var(--muted); }
.annual-stat-table { width: 100%; border-collapse: collapse; min-width: 300px; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; }
.annual-stat-table th, .annual-stat-table td { border-bottom: 1px solid var(--line); height: 41px; padding: 5px 9px; text-align: right; }
.annual-stat-table thead th { height: 34px; color: var(--secondary); font-size: 11px; font-weight: 400; white-space: nowrap; }
.annual-stat-table th:first-child { width: 76px; text-align: left; padding-left: 0; }
.annual-stat-table th:nth-child(2) { width: 38%; }
.annual-stat-table tbody th { font-weight: 400; }
.annual-stat-table tbody th button { display: inline-flex; align-items: center; padding: 4px 7px; border: 0; min-height: 32px; color: var(--secondary); border-radius: var(--control-radius); background: transparent; }
.annual-stat-table tbody th button:hover { background: var(--field); color: var(--text); }
.annual-stat-table tbody th button[aria-pressed="true"] { color: var(--accent-bright); font-weight: 600; }
.annual-history-table { border-collapse: separate; border-spacing: 0; }
.annual-history-table th, .annual-history-table td { height: var(--annual-row-height); }
.annual-history-table thead th { position: sticky; top: 0; z-index: 3; height: var(--annual-head-height); background: var(--canvas); }
.annual-history-table .annual-table-spacer>td { height: calc(var(--annual-row-height) * var(--empty-rows)); border: 0; padding: 0; }
.annual-selected-year { background: var(--field); }
.annual-bar-cell { position: relative; isolation: isolate; }
.annual-bar-track { position: absolute; z-index: -1; inset: 7px 6px; }
.annual-data-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--bar-size); background: var(--accent); opacity: .23; border-radius: var(--control-radius); }
.annual-bar-finishedCount .annual-data-bar { background: var(--positive); opacity: .18; }
.annual-bar-achievementCount .annual-data-bar { background: var(--purple); opacity: .2; }
.annual-stat-note { margin: 13px 0 0; font-size: 11px; line-height: 1.85; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annual-stat-actions { display: flex; align-items: center; gap: 14px; }
.annual-stat-actions>svg { width: 18px; height: 18px; color: var(--muted); }
.annual-stat-actions .annual-compare-toggle { color: var(--accent-bright); font-size: 12px; }
.annual-comparison { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.annual-comparison h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.annual-compare-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.annual-compare-selectors>label { min-width: 0; }
.annual-compare-selectors>label>span:first-child { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.annual-compare-selectors .select-wrap>select { min-width: 0; padding-left: 9px; font-size: 12px; }
.annual-compare-selectors .select-wrap>svg { position: absolute; right: 9px; top: 12px; width: 13px; height: 13px; color: var(--muted); pointer-events: none; }
.annual-compare-empty { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.annual-favorites { padding-top: 28px; border-top: 1px solid var(--line); }
.annual-favorites .annual-section-heading { margin-bottom: 12px; }
.annual-favorites-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.annual-favorites-actions .text-button { white-space: nowrap; }
.annual-favorites-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.annual-view-switch { display: inline-flex; gap: 3px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); padding: 3px; }
.annual-view-switch button { height: 31px; padding: 0 10px; background: transparent; color: var(--secondary); font-size: 12px; border: 0; border-radius: var(--control-radius); white-space: nowrap; }
.annual-view-switch button:hover { background: var(--surface-hover); }
.annual-view-switch button[aria-pressed="true"] { background: var(--field); color: var(--accent-bright); }
.annual-selection-count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.annual-favorites-grid { --muted: #aaaab1; display: grid; gap: 24px 16px; padding: 20px; border: 1px solid var(--glass-line); border-radius: var(--glass-radius); background: var(--glass-surface); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(110%); backdrop-filter: blur(var(--glass-blur)) saturate(110%); }
.annual-favorites-monthly { grid-template-columns: repeat(4,minmax(0,1fr)); }
.annual-favorites-annual { grid-template-columns: repeat(3,minmax(0,1fr)); }
.annual-favorite-item { min-width: 0; }
.annual-favorite-card .annual-cover { aspect-ratio: 16/11; }
.annual-cover-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; line-height: 1.6; padding: 1px 5px; color: var(--text); background: #1d1d1fe6; border-radius: var(--control-radius); max-width: calc(100% - 12px); white-space: nowrap; }
.annual-favorite-empty:disabled { cursor: default; opacity: 1; }
.annual-favorite-empty .annual-cover { background: var(--field); }
.annual-favorite-empty .annual-image-fallback svg { width: 20px; height: 20px; }
.annual-favorite-empty .annual-card-title { color: var(--muted); }
.annual-slot-tools { display: flex; align-items: center; gap: 1px; min-height: 30px; flex-wrap: wrap; }
.annual-slot-tools .icon-button { width: 27px; height: 30px; }
.annual-slot-tools .icon-button svg { width: 13px; height: 13px; }
.annual-slot-tools .text-button { margin-left: auto; font-size: 10px; min-height: 30px; }
.annual-favorites-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.annual-picker { margin-top: 20px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); scroll-margin-top: 120px; }
.annual-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.annual-picker-heading h3 { font-size: 14px; font-weight: 600; margin: 0; }
.annual-picker-heading .icon-button { width: 28px; height: 28px; }
.annual-picker-heading .icon-button svg { width: 16px; height: 16px; }
.annual-picker-search { width: 100%; min-width: 0; }
.annual-picker-scopes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.annual-picker-count { margin: 12px 0; }
.annual-picker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 9px; }
.annual-picker-grid .annual-game-card { position: relative; }
.annual-pick-selected { position: absolute; top: 5px; right: 5px; background: var(--backdrop); color: var(--secondary); font-size: 10px; padding: 0 4px; border-radius: var(--control-radius); }
.annual-picker-empty { color: var(--secondary); font-size: 12px; line-height: 1.8; margin: 18px 0 4px; }
.annual-picker-more { margin-top: 12px; }
.annual-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 20px; }
.annual-editor-actions>.form-note { flex-basis: 100%; }
#annualSaveError { margin: 16px 0 0; }
/* The temporary export keeps the same composition on desktop and mobile. */
.annual-favorites-export { width: 960px; padding: 32px; border: 0; border-radius: 24px; background: var(--canvas); }
.annual-favorites-export .annual-section-heading h2 { font-size: 18px; }
.annual-favorites-export .annual-favorites-grid { gap: 24px 16px; padding: 20px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.annual-favorites-export .annual-cover { height: auto; }
.annual-favorites-export .annual-cover::after { box-shadow: none !important; }
.annual-favorites-export .annual-cover-badge { top: 6px; left: 6px; padding: 1px 5px; }
.annual-favorites-export .annual-view-switch button { min-height: 0; height: 31px; padding-inline: 10px; }
.annual-timeline-section.annual-timeline-export { width: 640px; padding: 32px; border: 0; border-radius: 24px; background: var(--canvas); }
.annual-timeline-export .annual-section-heading { margin-bottom: 24px; }
.annual-timeline-export .annual-section-heading h2 { font-size: 18px; }
.annual-timeline-export .annual-month { padding-left: 64px; padding-bottom: 24px; }
.annual-timeline-export .annual-month::before { left: 44px; }
.annual-timeline-export .annual-month::after { left: 41px; }
.annual-timeline-export .annual-month-empty::after { left: 42px; }
.annual-timeline-export .annual-month-covers { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.annual-timeline-export .annual-cover::after { box-shadow: none !important; }
.annual-statistics.annual-statistics-export { width: 800px; padding: 32px; border: 0; border-radius: 24px; background: var(--canvas); }
.annual-statistics-export .annual-section-heading h2 { font-size: 18px; }
.annual-statistics-export .annual-table-scroll { height: auto; max-height: none; overflow: visible; scrollbar-gutter: auto; }
.annual-statistics-export .annual-history-table thead th { position: static; }
.annual-statistics-export .annual-bar-track { z-index: 0; }
.annual-statistics-export .annual-bar-cell>span:last-child { position: relative; z-index: 1; }
.annual-statistics-export .annual-stat-note { white-space: normal; overflow: visible; }
@media (min-width:768px) and (max-width:1099px) {
  .site-header { height: auto; }
  .header-inner { height: auto; min-height: 102px; flex-wrap: wrap; gap: 0 24px; }
  .header-inner .brand, .header-inner .header-actions { height: 58px; }
  .main-nav { order: 3; width: 100%; height: 44px; gap: 30px; }
  html { scroll-padding-top: 118px; }
  .annual-layout { --annual-column-space: 24px; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
  .annual-month { padding-left: 54px; }
  .annual-month::before { left: 37px; }
  .annual-month::after { left: 34px; }
  .annual-month-empty::after { left: 35px; }
  .annual-month-covers { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .annual-favorites-grid { gap: 20px 12px; padding: 16px; }
  .annual-cover-badge { left: 4px; top: 4px; }
}
@media (max-width:767px) {
  .main-nav { justify-content: space-between; gap: 12px; min-width: 0; overflow-x: auto; }
  .main-nav a { flex-shrink: 0; }
  .annual-intro { align-items: flex-start; gap: 20px; padding-bottom: 22px; flex-wrap: wrap; }
  .annual-intro h1 { font-size: 26px; }
  .annual-year-control { margin-left: auto; }
  .annual-year-control .icon-button { width: 32px; min-height: 40px; }
  .annual-layout { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; }
  .annual-timeline-section, .annual-right-column { width: 100%; }
  .annual-right-column { border-left: 0; padding: 0; gap: 30px; }
  .annual-section-heading h2 { font-size: 17px; }
  .annual-month { padding-left: 54px; padding-bottom: 20px; }
  .annual-month::before { left: 37px; }
  .annual-month::after { left: 34px; }
  .annual-month-empty::after { left: 35px; }
  .annual-month-covers { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 8px; }
  .annual-month-empty { min-height: 48px; }
  .annual-favorites-grid { gap: 20px 10px; padding: 12px; }
  .annual-cover-badge { top: 4px; left: 4px; font-size: 10px; padding: 0 4px; }
  .annual-view-switch button { min-height: 36px; padding-inline: 9px; }
  .annual-picker { padding: 12px; }
  .annual-picker-grid { gap: 12px 8px; }
  .annual-picker-search input { font-size: 13px; }
  .annual-slot-tools .icon-button { min-height: 36px; }
  .annual-statistics { padding-top: 26px; border-top: 1px solid var(--line); }
}