/* ============================================================
   Large-screen scaling (QHD / 2K / 4K) — desktop only.
   ------------------------------------------------------------
   Why this file exists:
   - The base desktop UI was tuned at ~1920px CSS width (1080p).
     Many sizes are fixed px (tabs 42px, card images 170px,
     round buttons 40-50px, map controls 22px) while the panel
     itself is fluid (30vw). On much wider viewports the panel
     keeps growing but the fixed-px content does not, so everything
     looks tiny / detached.
   - Expanded cards use clamp() with vw, but their font/upper caps
     were tuned for 1080p, so the card grows while text caps out.
   - There were only max-width (mobile) queries, no min-width
     large-screen queries.

   What this file does:
   - ONLY applies at >=1921px CSS width, so 1080p and below
     (including all mobile/tablet rules) are 100% untouched.
   - Progressively scales fixed-px desktop UI so proportions at
     2K/4K feel like they do at 1080p. No layout/JS changes.
   - Tiers: A = 1921-2559, B = 2560-3839 (full 2K), C = 4K+.

   NOTE: Firefox "Responsive Design Mode" at 2560/3840 shows raw
   CSS pixels with no OS display scaling. Real 2K/4K monitor users
   usually run 125-200% OS scaling, so their actual CSS viewport is
   more like 1280-1920px and the effect is milder than the emulator
   suggests. This file covers the emulator case AND real users who
   do have a wide CSS viewport.
   ============================================================ */

/* ================= Tier A: >1080p up to QHD (1921-2559) ================= */
@media (min-width: 1921px) and (max-width: 2559px) {
  html { font-size: 19px; } /* scales rem-based text (top-right links, expanded vars) */
  #side-panel { font-size: 19px; padding: 26px; } /* scales em-based card text */
  .card-backdrop { width: calc(30vw + 52px); }

  /* Tabs fused to panel edge at ANY resolution.
     Root cause of the drift: JS pins tabs at left:32.7vw (inline style)
     while the panel's true outer edge is 30vw + fixed padding — a
     vw-vs-px mismatch tuned for ~1536px CSS width that opens a growing
     gap on wider viewports (and subpixel rounding adds hairlines).
     This margin corrects it to a constant 2px overlap (hidden under the
     panel, so always seamless). No !important: it only matches while the
     panel is .active, so the closed-panel hide (JS sets left:-50px)
     keeps working untouched. */
  #side-panel.active ~ .panel-tabs { margin-left: calc(-2.7vw + 51px); }
  .panel-tabs { top: 26px; gap: 5px; transition: left 0.3s, margin-left 0.3s; }
  .tab { width: 60px; height: 60px; font-size: 20px; }
  .tab.active { width: 46px; }
  .tab svg { width: 32px; height: 32px; }

  #toggle-panel { padding: 20px 9px; font-size: 19px; }
  .panel-content h2 { font-size: 20px; }
  /* Context card scales with the tier (two-column single card) */
  #home-content > h2, #history-content > h2, #people-content > h2, #video-content > h2 { margin: 15px 0 15px 15px; padding: 11px 52px 11px 17px; min-height: 78px; }
  #home-content > h2::before, #history-content > h2::before, #people-content > h2::before, #video-content > h2::before,
  #home-content .mobile-time-info::before, #history-content .mobile-time-info::before, #people-content .mobile-time-info::before, #video-content .mobile-time-info::before { font-size: 12px; }
  #home-content > h2 #selected-location, #history-content > h2 #history-selected-location, #people-content > h2 #people-selected-location, #video-content > h2 #video-selected-location { font-size: 19px; }
  #home-content .mobile-time-info > span:not(:first-child), #history-content .mobile-time-info > span:not(:first-child), #people-content .mobile-time-info > span:not(:first-child), #video-content .mobile-time-info > span:not(:first-child) { font-size: 17px; }
  #home-content > h2 #clear-location, #history-content > h2 #history-clear-location, #people-content > h2 #people-clear-location, #video-content > h2 #video-clear-location, .ctx-time-reset, #video-info-btn { width: 33px; height: 33px; font-size: 20px; }
  #video-content > h2 .video-info-wrap { margin: 0; }
  #video-info-btn { right: 49px; }
  #video-info-btn::after { font-size: 17px; }
  #home-content .mobile-time-info, #history-content .mobile-time-info, #people-content .mobile-time-info, #video-content .mobile-time-info { margin: 15px 15px 15px 0; padding: 11px 52px 11px 17px; min-height: 78px; }
  .ctx-time-reset i { font-size: 20px; }

  /* Search / sort / filters */
  #search-input { font-size: 17px; padding: 10px 15px; padding-right: 36px; height: 32px; min-width: 185px; }
  #search-button, #random-button,
  #history-random-button, #people-random-button { width: 52px; height: 52px; font-size: 24px; }
  #random-button .random-icon,
  #history-random-button .random-icon,
  #people-random-button .random-icon { font-size: 27px; }
  .sort-container label { font-size: 16px; }
  #sort-select, #history-sort-select, #people-sort-select, #lists-sort-select,
  #video-sort-select, #list-detail-sort-select { font-size: 15px; padding: 8px 13px; }
  .filters-dropdown-button { font-size: 17px; padding: 12px 20px; min-height: 50px; min-width: 160px; }
  .filter-label { font-size: 17px; }
  #results-summary, #people-results-summary, #video-results-summary { font-size: 17px; }
  #item-count, #people-count, #video-count { font-size: 22px; }
  #clear-location, #history-clear-location, #people-clear-location,
  #video-clear-location, .clear-search-btn { font-size: 24px; }

  /* Collapsed cards: image/text proportion like 1080p */
  .book-image-container, .movie-image-container, .tvshow-image-container { width: 215px; min-width: 215px; }
  .book-card, .movie-card, .tvshow-card { padding: 13px; margin-bottom: 19px; border-radius: 10px; }
  .item-card { margin-bottom: 25px; border-radius: 14px; }
  .book-content, .movie-content, .tvshow-content { padding: 19px; padding-bottom: 44px; }
  .item-content { padding: 19px; }
  .item-image-container { height: 250px; }
  .more-button { padding: 6px 19px; }
  .load-more-btn { width: 62px; height: 62px; font-size: 19px; }

  /* Bottom-right floating stack keeps spacing + size ratio */
  .toggle-time-slider { width: 50px; height: 50px; font-size: 22px; bottom: 125px; right: 25px; }
  .reset-time-button { width: 50px; height: 50px; font-size: 22px; bottom: 195px; right: 25px; }
  .time-picker-button { width: 50px; height: 50px; font-size: 22px; bottom: 250px; right: 25px; }
  .auth-button { width: 62px; height: 62px; font-size: 30px; bottom: 390px; right: 19px; }
  .theme-mode-toggle { width: 50px; height: 50px; font-size: 22px; bottom: 315px; right: 25px; }
  .user-info { bottom: 465px; right: 25px; font-size: 17px; max-width: 310px; padding: 15px 20px; }

  /* Time slider + time circle */
  .time-slider-container { height: 112px; padding-bottom: 12px; }
  .time-display { width: 120px; height: 120px; right: 25px; bottom: 19px; }
  .time-node { width: 17px; height: 17px; }
  .time-node:hover, .time-node.active { width: 22px; height: 22px; }
  .time-node-label, .decade-sector-label, .year-zero-label { font-size: 15px; }
  .century-info { font-size: 12px; }

  /* Map controls (beat map.css !important compact rules) */
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-icon,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-compass span { width: 16px !important; height: 16px !important; }
  .maplibregl-ctrl-top-right .toggle-city-viz-control { width: 28px !important; height: 28px !important; font-size: 15px !important; }
  .maplibregl-ctrl-attrib, .maplibregl-ctrl-scale { font-size: 12px !important; }
  .maplibregl-popup { max-width: 375px !important; }
  .maplibregl-popup-content { padding: 19px !important; }
  .maplibregl-popup-close-button { font-size: 20px !important; }

  /* Expanded cards: raise capped maxima so text grows with the vw-sized card */
  :root {
    --font-size-title: clamp(1.5rem, 2.5vw, 2.8rem);
    --font-size-subtitle: clamp(1.1rem, 1.8vw, 1.6rem);
    --font-size-body: clamp(1rem, 1.5vw, 1.3rem);
    --font-size-meta: clamp(0.85rem, 1.1vw, 1.1rem);
    --button-size: clamp(2.2rem, 3vw, 3.2rem);
    --card-padding: clamp(0.4rem, 0.7vw, 1rem);
  }

  /* Dialogs / popups / misc windows */
  .popup-content { max-width: 500px; }
  .help-content { max-width: 750px; }
  .about-content { max-width: 1125px; }
  .contact-content { max-width: 625px; }
  .youtube-popup-content { max-width: 1060px; }
  .time-picker-window { width: 440px; }
  .auth-window { max-width: 500px; }
  #loading-indicator { padding: 26px; }
  .news-grid, #newsGrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ================= Tier B: full 2K (2560-3839) ================= */
@media (min-width: 2560px) and (max-width: 3839px) {
  html { font-size: 20px; }
  #side-panel { font-size: 21px; padding: 30px; }
  .card-backdrop { width: calc(30vw + 60px); }

  #side-panel.active ~ .panel-tabs { margin-left: calc(-2.7vw + 59px); }
  .panel-tabs { top: 30px; gap: 6px; transition: left 0.3s, margin-left 0.3s; }
  .tab { width: 68px; height: 68px; font-size: 22px; }
  .tab.active { width: 52px; }
  .tab svg { width: 36px; height: 36px; }

  #toggle-panel { padding: 22px 10px; font-size: 21px; }
  .panel-content h2 { font-size: 22px; }
  /* Context card scales with the tier (two-column single card) */
  #home-content > h2, #history-content > h2, #people-content > h2, #video-content > h2 { margin: 17px 0 17px 17px; padding: 13px 59px 13px 19px; min-height: 87px; }
  #home-content > h2::before, #history-content > h2::before, #people-content > h2::before, #video-content > h2::before,
  #home-content .mobile-time-info::before, #history-content .mobile-time-info::before, #people-content .mobile-time-info::before, #video-content .mobile-time-info::before { font-size: 14px; }
  #home-content > h2 #selected-location, #history-content > h2 #history-selected-location, #people-content > h2 #people-selected-location, #video-content > h2 #video-selected-location { font-size: 21px; }
  #home-content .mobile-time-info > span:not(:first-child), #history-content .mobile-time-info > span:not(:first-child), #people-content .mobile-time-info > span:not(:first-child), #video-content .mobile-time-info > span:not(:first-child) { font-size: 20px; }
  #home-content > h2 #clear-location, #history-content > h2 #history-clear-location, #people-content > h2 #people-clear-location, #video-content > h2 #video-clear-location, .ctx-time-reset, #video-info-btn { width: 37px; height: 37px; font-size: 22px; }
  #video-content > h2 .video-info-wrap { margin: 0; }
  #video-info-btn { right: 53px; }
  #video-info-btn::after { font-size: 19px; }
  #home-content .mobile-time-info, #history-content .mobile-time-info, #people-content .mobile-time-info, #video-content .mobile-time-info { margin: 17px 17px 17px 0; padding: 13px 59px 13px 19px; min-height: 87px; }
  .ctx-time-reset i { font-size: 23px; }

  #search-input { font-size: 19px; padding: 11px 16px; padding-right: 40px; height: 36px; min-width: 210px; }
  #search-button, #random-button,
  #history-random-button, #people-random-button { width: 58px; height: 58px; font-size: 27px; }
  #random-button .random-icon,
  #history-random-button .random-icon,
  #people-random-button .random-icon { font-size: 30px; }
  .sort-container label { font-size: 18px; }
  #sort-select, #history-sort-select, #people-sort-select, #lists-sort-select,
  #video-sort-select, #list-detail-sort-select { font-size: 16px; padding: 9px 14px; }
  .filters-dropdown-button { font-size: 19px; padding: 14px 22px; min-height: 56px; min-width: 180px; }
  .filter-label { font-size: 19px; }
  #results-summary, #people-results-summary, #video-results-summary { font-size: 19px; }
  #item-count, #people-count, #video-count { font-size: 25px; }
  #clear-location, #history-clear-location, #people-clear-location,
  #video-clear-location, .clear-search-btn { font-size: 27px; }

  .book-image-container, .movie-image-container, .tvshow-image-container { width: 240px; min-width: 240px; }
  .book-card, .movie-card, .tvshow-card { padding: 15px; margin-bottom: 21px; border-radius: 11px; }
  .item-card { margin-bottom: 28px; border-radius: 16px; }
  .book-content, .movie-content, .tvshow-content { padding: 21px; padding-bottom: 49px; }
  .item-content { padding: 21px; }
  .item-image-container { height: 280px; }
  .more-button { padding: 7px 21px; }
  .load-more-btn { width: 70px; height: 70px; font-size: 21px; }

  .toggle-time-slider { width: 56px; height: 56px; font-size: 25px; bottom: 140px; right: 28px; }
  .reset-time-button { width: 56px; height: 56px; font-size: 25px; bottom: 218px; right: 28px; }
  .time-picker-button { width: 56px; height: 56px; font-size: 25px; bottom: 280px; right: 28px; }
  .auth-button { width: 70px; height: 70px; font-size: 33px; bottom: 436px; right: 21px; }
  .theme-mode-toggle { width: 56px; height: 56px; font-size: 25px; bottom: 350px; right: 28px; }
  .user-info { bottom: 522px; right: 28px; font-size: 19px; max-width: 350px; padding: 17px 22px; }

  .time-slider-container { height: 126px; padding-bottom: 14px; }
  .time-display { width: 134px; height: 134px; right: 28px; bottom: 21px; }
  .time-node { width: 19px; height: 19px; }
  .time-node:hover, .time-node.active { width: 25px; height: 25px; }
  .time-node-label, .decade-sector-label, .year-zero-label { font-size: 16px; }
  .century-info { font-size: 13px; }

  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-icon,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-compass span { width: 18px !important; height: 18px !important; }
  .maplibregl-ctrl-top-right .toggle-city-viz-control { width: 31px !important; height: 31px !important; font-size: 17px !important; }
  .maplibregl-ctrl-attrib, .maplibregl-ctrl-scale { font-size: 13px !important; }
  .maplibregl-popup { max-width: 420px !important; }
  .maplibregl-popup-content { padding: 21px !important; }
  .maplibregl-popup-close-button { font-size: 22px !important; }

  :root {
    --font-size-title: clamp(1.6rem, 2.5vw, 3.2rem);
    --font-size-subtitle: clamp(1.2rem, 1.8vw, 1.8rem);
    --font-size-body: clamp(1.05rem, 1.5vw, 1.45rem);
    --font-size-meta: clamp(0.9rem, 1.1vw, 1.2rem);
    --button-size: clamp(2.4rem, 3vw, 3.6rem);
    --card-padding: clamp(0.45rem, 0.7vw, 1.1rem);
  }

  .popup-content { max-width: 560px; }
  .help-content { max-width: 840px; }
  .about-content { max-width: 1260px; }
  .contact-content { max-width: 700px; }
  .youtube-popup-content { max-width: 1190px; }
  .time-picker-window { width: 490px; }
  .auth-window { max-width: 560px; }
  #loading-indicator { padding: 30px; }
  .news-grid, #newsGrid { grid-template-columns: repeat(auto-fit, minmax(336px, 1fr)); }
}

/* ================= Tier C: 4K and above (>=3840) ================= */
@media (min-width: 3840px) {
  /* True 2x of the 1080p baseline: raw 3840 CSS px is exactly twice
     1920, so doubling every fixed size reproduces 1080p proportions
     and physical sizes 1:1. (2K needs no change: it already matches.) */
  html { font-size: 30px; }
  #side-panel { font-size: 30px; padding: 40px; }
  .card-backdrop { width: calc(30vw + 80px); }

  #side-panel.active ~ .panel-tabs { margin-left: calc(-2.7vw + 79px); }
  .panel-tabs { top: 40px; gap: 6px; transition: left 0.3s, margin-left 0.3s; }
  .tab { width: 84px; height: 84px; font-size: 28px; }
  .tab.active { width: 64px; }
  .tab svg { width: 44px; height: 44px; }

  #toggle-panel { padding: 32px 14px; font-size: 30px; }
  .panel-content h2 { font-size: 32px; }
  /* Context card scales with the tier (two-column single card) */
  #home-content > h2, #history-content > h2, #people-content > h2, #video-content > h2 { margin: 24px 0 24px 24px; padding: 18px 84px 18px 28px; min-height: 124px; }
  #home-content > h2::before, #history-content > h2::before, #people-content > h2::before, #video-content > h2::before,
  #home-content .mobile-time-info::before, #history-content .mobile-time-info::before, #people-content .mobile-time-info::before, #video-content .mobile-time-info::before { font-size: 20px; }
  #home-content > h2 #selected-location, #history-content > h2 #history-selected-location, #people-content > h2 #people-selected-location, #video-content > h2 #video-selected-location { font-size: 30px; }
  #home-content .mobile-time-info > span:not(:first-child), #history-content .mobile-time-info > span:not(:first-child), #people-content .mobile-time-info > span:not(:first-child), #video-content .mobile-time-info > span:not(:first-child) { font-size: 28px; }
  #home-content > h2 #clear-location, #history-content > h2 #history-clear-location, #people-content > h2 #people-clear-location, #video-content > h2 #video-clear-location, .ctx-time-reset, #video-info-btn { width: 52px; height: 52px; font-size: 32px; }
  #video-content > h2 .video-info-wrap { margin: 0; }
  #video-info-btn { right: 68px; }
  #video-info-btn::after { font-size: 28px; }
  #home-content .mobile-time-info, #history-content .mobile-time-info, #people-content .mobile-time-info, #video-content .mobile-time-info { margin: 24px 24px 24px 0; padding: 18px 84px 18px 28px; min-height: 124px; }
  .ctx-time-reset i { font-size: 32px; }

  #search-input { font-size: 28px; padding: 16px 24px; padding-right: 60px; height: 52px; min-width: 300px; }
  #search-button, #random-button,
  #history-random-button, #people-random-button { width: 80px; height: 80px; font-size: 40px; }
  #random-button .random-icon,
  #history-random-button .random-icon,
  #people-random-button .random-icon { font-size: 44px; }
  .sort-container label { font-size: 26px; }
  #sort-select, #history-sort-select, #people-sort-select, #lists-sort-select,
  #video-sort-select, #list-detail-sort-select { font-size: 24px; padding: 12px 20px; }
  .filters-dropdown-button { font-size: 28px; padding: 20px 32px; min-height: 80px; min-width: 260px; }
  .filter-label { font-size: 28px; }
  #results-summary, #people-results-summary, #video-results-summary { font-size: 28px; }
  #item-count, #people-count, #video-count { font-size: 36px; }
  #clear-location, #history-clear-location, #people-clear-location,
  #video-clear-location, .clear-search-btn { font-size: 40px; }

  .book-image-container, .movie-image-container, .tvshow-image-container { width: 340px; min-width: 340px; }
  .book-card, .movie-card, .tvshow-card { padding: 20px; margin-bottom: 30px; border-radius: 16px; }
  .item-card { margin-bottom: 40px; border-radius: 24px; }
  .book-content, .movie-content, .tvshow-content { padding: 30px; padding-bottom: 70px; }
  .item-content { padding: 30px; }
  .item-image-container { height: 400px; }
  .more-button { padding: 10px 30px; }
  .load-more-btn { width: 100px; height: 100px; font-size: 30px; }

  .toggle-time-slider { width: 80px; height: 80px; font-size: 36px; bottom: 200px; right: 40px; }
  .reset-time-button { width: 80px; height: 80px; font-size: 36px; bottom: 310px; right: 40px; }
  .time-picker-button { width: 80px; height: 80px; font-size: 36px; bottom: 400px; right: 40px; }
  .auth-button { width: 100px; height: 100px; font-size: 48px; bottom: 620px; right: 30px; }
  .theme-mode-toggle { width: 80px; height: 80px; font-size: 36px; bottom: 500px; right: 40px; }
  .user-info { bottom: 680px; right: 40px; font-size: 28px; max-width: 500px; padding: 24px 32px; }

  .time-slider-container { height: 180px; padding-bottom: 20px; }
  .time-display { width: 190px; height: 190px; right: 40px; bottom: 30px; }
  .time-node { width: 28px; height: 28px; }
  .time-node:hover, .time-node.active { width: 36px; height: 36px; }
  .time-node-label, .decade-sector-label, .year-zero-label { font-size: 24px; }
  .century-info { font-size: 20px; }

  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-icon,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-compass span { width: 26px !important; height: 26px !important; }
  .maplibregl-ctrl-top-right .toggle-city-viz-control { width: 44px !important; height: 44px !important; font-size: 24px !important; }
  .maplibregl-ctrl-attrib, .maplibregl-ctrl-scale { font-size: 20px !important; }
  .maplibregl-popup { max-width: 600px !important; }
  .maplibregl-popup-content { padding: 30px !important; }
  .maplibregl-popup-close-button { font-size: 32px !important; }

  :root {
    /* px maxima = exactly 2x the 1080p capped sizes (vw mids would
       overshoot since the 1080p baseline itself was capped). */
    --font-size-title: clamp(1.8rem, 2.5vw, 64px);
    --font-size-subtitle: clamp(1.4rem, 1.8vw, 38px);
    --font-size-body: clamp(1.2rem, 1.5vw, 32px);
    --font-size-meta: clamp(1rem, 1.1vw, 29px);
    --button-size: clamp(3rem, 3vw, 80px);
    --card-padding: clamp(0.55rem, 0.7vw, 26px);
  }

  .popup-content { max-width: 800px; }
  .help-content { max-width: 1200px; }
  .about-content { max-width: 1800px; }
  .contact-content { max-width: 1000px; }
  .youtube-popup-content { max-width: 1700px; }
  .time-picker-window { width: 700px; }
  .auth-window { max-width: 800px; }
  #loading-indicator { padding: 40px; }
  .news-grid, #newsGrid { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }
}

/* ============================================================
   PART 2 — Time-slider dial, secondary card types, timeline
   button, expanded history/people images.
   Same 3 tiers, same rule: >=1921px only. 1080p + mobile
   untouched. No JS changes (year buttons + sectors are
   %-positioned, so enlarging the dial keeps arc geometry).
   ============================================================ */

/* ================= Tier A: 1921-2559 ================= */
@media (min-width: 1921px) and (max-width: 2559px) {
  /* --- Half-circle time dial: scale the shape, not just the text --- */
  .decade-selector, .curved-year-selector {
    width: 375px; height: 188px;
    border-radius: 188px 188px 0 0;
    bottom: 31px;
  }
  .curved-year-selector .year-btn { width: 25px; height: 25px; font-size: 12px; }
  .decade-sector-label { font-size: 14px; padding: 3px 6px; }
  .decade-selector-century { font-size: 15px; bottom: 6px; padding: 4px 13px; }
  .time-node-label { font-size: 15px; top: -40px; padding: 4px 10px; }
  .century-info { bottom: -31px; padding: 3px 8px; }
  .year-zero-marker { width: 8px; height: 31px; }
  .year-zero-label { top: -38px; padding: 4px 10px; }
  .time-node::after { width: 50px; height: 50px; }
  .time-mode-buttons { right: 162px; bottom: 162px; gap: 13px; }
  .time-mode-button { font-size: 15px; padding: 6px 19px; border-radius: 19px; }
  .time-mode-button i { font-size: 14px; }
  .confirm-period-button { font-size: 16px; padding: 10px 19px; }
  .time-range-marker { width: 15px; height: 44px; top: -6px; }
  .marker-label { font-size: 12px; top: -25px; padding: 3px 8px; }
  .period-error-message { font-size: 15px; }

  /* --- Collapsed cards: restore height so nothing looks cramped --- */
  /* History tab */
  .history-card { min-height: 250px; margin-bottom: 25px; }
  .history-image-container { height: 200px; }
  .history-content { padding: 20px; }
  /* Video tab */
  .youtube-card { min-height: 250px; margin-bottom: 25px; }
  .youtube-thumbnail-container { height: 200px; }
  .youtube-play-overlay { width: 75px; height: 75px; }
  .youtube-play-overlay::after { border-left-width: 22px; border-top-width: 15px; border-bottom-width: 15px; }
  /* People tab: wider portrait restores the 1080p image/text balance */
  .person-card { min-height: 125px; padding: 13px; margin-bottom: 19px; }
  .person-image-container { width: 215px; min-width: 215px; min-height: 188px; }
  .person-image { min-height: 188px; }
  .person-content { padding: 19px; padding-bottom: 15px; }
  /* Lists tab + explore showcase (both reuse .user-list-card / covers stack) */
  .list-covers-stack { height: 250px; }
  .user-list-card, .public-list-card { border-radius: 15px; }
  .user-list-card .list-card-content, .public-list-card .list-card-content { padding: 20px; }
  /* Inner item cards inside history / people expanded panels */
  .history-item-card, .person-item-card { min-height: 175px; gap: 30px; margin-bottom: 22px; }
  .history-item-card .history-image-container,
  .person-item-card .person-image-container { width: 150px; height: 150px; min-width: 150px; min-height: 150px; margin: 22px 0 22px 22px; }
  .history-item-card .history-content,
  .person-item-card .person-content { padding: 13px 15px; }
  /* Similar-items cards inside expanded cards */
  .similar-item-card { min-height: 238px; padding: 13px; }
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container,
  .similar-item-card .history-image-container { width: 150px; height: 200px; margin-right: 19px; }

  /* --- Timeline button: taller so the banner image shows like 1080p --- */
  .timeline-list-btn { height: 172px; border-radius: 18px; }
  .timeline-btn-img { border-radius: 15px; }

  /* --- History/people expanded: lift image caps that were tuned for 1080p --- */
  .history-expanded-left { width: clamp(125px, 32%, 425px); min-width: clamp(125px, 32%, 425px); }
  .history-expanded-image-container { min-height: 388px; max-height: 625px; }
  .history-expanded-meta { font-size: clamp(1.05rem, 1.2vw, 1.2rem); }
}

/* ================= Tier B: full 2K (2560-3839) ================= */
@media (min-width: 2560px) and (max-width: 3839px) {
  .decade-selector, .curved-year-selector {
    width: 420px; height: 210px;
    border-radius: 210px 210px 0 0;
    bottom: 35px;
  }
  .curved-year-selector .year-btn { width: 28px; height: 28px; font-size: 13px; }
  .decade-sector-label { font-size: 15px; padding: 3px 7px; }
  .decade-selector-century { font-size: 16px; bottom: 7px; padding: 4px 14px; }
  .time-node-label { font-size: 16px; top: -45px; padding: 4px 11px; }
  .century-info { bottom: -35px; padding: 3px 9px; }
  .year-zero-marker { width: 9px; height: 35px; }
  .year-zero-label { top: -42px; padding: 4px 11px; }
  .time-node::after { width: 56px; height: 56px; }
  .time-mode-buttons { right: 182px; bottom: 182px; gap: 14px; }
  .time-mode-button { font-size: 16px; padding: 7px 21px; border-radius: 21px; }
  .time-mode-button i { font-size: 15px; }
  .confirm-period-button { font-size: 18px; padding: 11px 21px; }
  .time-range-marker { width: 17px; height: 49px; top: -7px; }
  .marker-label { font-size: 13px; top: -28px; padding: 3px 9px; }
  .period-error-message { font-size: 16px; }

  .history-card { min-height: 280px; margin-bottom: 28px; }
  .history-image-container { height: 224px; }
  .history-content { padding: 22px; }
  .youtube-card { min-height: 280px; margin-bottom: 28px; }
  .youtube-thumbnail-container { height: 224px; }
  .youtube-play-overlay { width: 84px; height: 84px; }
  .youtube-play-overlay::after { border-left-width: 25px; border-top-width: 17px; border-bottom-width: 17px; }
  .person-card { min-height: 140px; padding: 15px; margin-bottom: 21px; }
  .person-image-container { width: 240px; min-width: 240px; min-height: 210px; }
  .person-image { min-height: 210px; }
  .person-content { padding: 21px; padding-bottom: 17px; }
  .list-covers-stack { height: 280px; }
  .user-list-card, .public-list-card { border-radius: 17px; }
  .user-list-card .list-card-content, .public-list-card .list-card-content { padding: 22px; }
  .history-item-card, .person-item-card { min-height: 196px; gap: 34px; margin-bottom: 25px; }
  .history-item-card .history-image-container,
  .person-item-card .person-image-container { width: 168px; height: 168px; min-width: 168px; min-height: 168px; margin: 25px 0 25px 25px; }
  .history-item-card .history-content,
  .person-item-card .person-content { padding: 15px 17px; }
  .similar-item-card { min-height: 266px; padding: 15px; }
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container,
  .similar-item-card .history-image-container { width: 168px; height: 224px; margin-right: 21px; }

  .timeline-list-btn { height: 195px; border-radius: 20px; }
  .timeline-btn-img { border-radius: 17px; }

  .history-expanded-left { width: clamp(140px, 32%, 476px); min-width: clamp(140px, 32%, 476px); }
  .history-expanded-image-container { min-height: 434px; max-height: 700px; }
  .history-expanded-meta { font-size: clamp(1.1rem, 1.2vw, 1.35rem); }
}

/* ================= Tier C: 4K and above (>=3840) ================= */
@media (min-width: 3840px) {
  /* Dial shape doubled: 300x150 -> 600x300 (JS positions year buttons
     in %, so the arc geometry stays correct automatically). */
  .decade-selector, .curved-year-selector {
    width: 600px; height: 300px;
    border-radius: 300px 300px 0 0;
    bottom: 50px;
  }
  .curved-year-selector .year-btn { width: 40px; height: 40px; font-size: 20px; }
  .decade-sector-label { font-size: 22px; padding: 4px 10px; }
  .decade-selector-century { font-size: 24px; bottom: 10px; padding: 6px 20px; }
  .time-node-label { font-size: 24px; top: -64px; padding: 6px 16px; }
  .century-info { bottom: -50px; padding: 4px 12px; }
  .year-zero-marker { width: 12px; height: 50px; }
  .year-zero-label { top: -60px; padding: 6px 16px; }
  .time-node::after { width: 80px; height: 80px; }
  .time-mode-buttons { right: 260px; bottom: 260px; gap: 20px; }
  .time-mode-button { font-size: 24px; padding: 10px 30px; border-radius: 30px; }
  .time-mode-button i { font-size: 22px; }
  .confirm-period-button { font-size: 26px; padding: 16px 30px; }
  .time-range-marker { width: 24px; height: 70px; top: -10px; }
  .marker-label { font-size: 20px; top: -40px; padding: 4px 12px; }
  .period-error-message { font-size: 24px; }

  .history-card { min-height: 400px; margin-bottom: 40px; }
  .history-image-container { height: 320px; }
  .history-content { padding: 32px; }
  .youtube-card { min-height: 400px; margin-bottom: 40px; }
  .youtube-thumbnail-container { height: 320px; }
  .youtube-play-overlay { width: 120px; height: 120px; }
  .youtube-play-overlay::after { border-left-width: 36px; border-top-width: 24px; border-bottom-width: 24px; margin-left: 8px; }
  .person-card { min-height: 200px; padding: 20px; margin-bottom: 30px; }
  .person-image-container { width: 340px; min-width: 340px; min-height: 300px; }
  .person-image { min-height: 300px; }
  .person-content { padding: 30px; padding-bottom: 24px; }
  .list-covers-stack { height: 400px; }
  .user-list-card, .public-list-card { border-radius: 24px; }
  .user-list-card .list-card-content, .public-list-card .list-card-content { padding: 32px; }
  .history-item-card, .person-item-card { min-height: 280px; gap: 48px; margin-bottom: 36px; }
  .history-item-card .history-image-container,
  .person-item-card .person-image-container { width: 240px; height: 240px; min-width: 240px; min-height: 240px; margin: 36px 0 36px 36px; }
  .history-item-card .history-content,
  .person-item-card .person-content { padding: 20px 24px; }
  .similar-item-card { min-height: 380px; padding: 20px; }
  .similar-item-card .book-image-container,
  .similar-item-card .movie-image-container,
  .similar-item-card .game-image-container,
  .similar-item-card .tvshow-image-container,
  .similar-item-card .history-image-container { width: 240px; height: 320px; margin-right: 30px; }

  .timeline-list-btn { height: 276px; border-radius: 28px; }
  .timeline-btn-img { border-radius: 24px; }

  .history-expanded-left { width: clamp(200px, 32%, 680px); min-width: clamp(200px, 32%, 680px); }
  .history-expanded-image-container { min-height: 620px; max-height: 1000px; }
  .history-expanded-meta { font-size: clamp(20px, 1.2vw, 30px); }
}

/* ============================================================
   PART 3 — Movie/game expanded "dead border" + video-tab top
   video size. >=1921px only. 1080p + mobile untouched.
   ------------------------------------------------------------
   Issue 1 root cause: game/movie expanded cards get a
   `.with-videos` class on .right-section (added asynchronously
   when locations/videos data arrives — hence "looks good for a
   second, then this appears"). That class caps the right section
   at a fixed 500px. On 1080p the card is short so the leftover
   is invisible; on 2K/4K the card is 1000-1500px tall, so ~half
   the card becomes empty bordered space while content scrolls
   in a small box on top. Books/TV have no video branch, which
   is why only movies + games show it.
   Fix: let the right section fill the (already vh-scaled) card
   again, and scale the fixed inner pieces (description,
   video iframes) so nothing stays 1080p-sized inside a 4K card.
   Issue 2: the video-tab expanded top player is capped at 450px
   (clamp max) while the card keeps growing — raise the caps.
   ============================================================ */

/* ================= Tier A: 1921-2559 ================= */
@media (min-width: 1921px) and (max-width: 2559px) {
  /* Right section fills the tall card — no dead border area */
  .expanded-card.expanded.game-expanded .right-section.with-videos,
  .expanded-card.expanded.movie-expanded .right-section.with-videos {
    max-height: calc(var(--expanded-card-height) - var(--card-padding) * 2);
    padding-right: 19px;
    padding-bottom: 38px;
  }
  /* Description + embedded videos grow with the card */
  .expanded-card.expanded.game-expanded .description,
  .expanded-card.expanded.movie-expanded .description { max-height: 225px !important; }
  .expanded-card.expanded .video-wrapper iframe { height: clamp(225px, 25vh, 350px) !important; }
  .expanded-card.expanded.game-expanded .video-container { max-height: 1000px; }
  .video-container { max-height: clamp(31rem, 40vh, 44rem); }

  /* Video-tab expanded: larger top player + taller content */
  .youtube-expanded-video-section iframe { height: clamp(350px, 40vh, 562px); }
  .youtube-expanded-content,
  .youtube-expanded-content .left-section,
  .expanded-card.expanded.youtube-expanded .meta-container { min-height: clamp(375px, 40vh, 625px); }
  .expanded-card.expanded.youtube-expanded h3 { font-size: clamp(1.1rem, 2vw, 1.75rem); }
  .expanded-card.expanded.youtube-expanded .description { font-size: clamp(0.85rem, 1.4vw, 1.25rem); }
}

/* ================= Tier B: full 2K (2560-3839) ================= */
@media (min-width: 2560px) and (max-width: 3839px) {
  .expanded-card.expanded.game-expanded .right-section.with-videos,
  .expanded-card.expanded.movie-expanded .right-section.with-videos {
    max-height: calc(var(--expanded-card-height) - var(--card-padding) * 2);
    padding-right: 21px;
    padding-bottom: 42px;
  }
  .expanded-card.expanded.game-expanded .description,
  .expanded-card.expanded.movie-expanded .description { max-height: 252px !important; }
  .expanded-card.expanded .video-wrapper iframe { height: clamp(252px, 25vh, 392px) !important; }
  .expanded-card.expanded.game-expanded .video-container { max-height: 1120px; }
  .video-container { max-height: clamp(35rem, 40vh, 49rem); }

  .youtube-expanded-video-section iframe { height: clamp(392px, 40vh, 630px); }
  .youtube-expanded-content,
  .youtube-expanded-content .left-section,
  .expanded-card.expanded.youtube-expanded .meta-container { min-height: clamp(420px, 40vh, 700px); }
  .expanded-card.expanded.youtube-expanded h3 { font-size: clamp(1.1rem, 2vw, 1.96rem); }
  .expanded-card.expanded.youtube-expanded .description { font-size: clamp(0.85rem, 1.4vw, 1.4rem); }
}

/* ================= Tier C: 4K and above (>=3840) ================= */
@media (min-width: 3840px) {
  .expanded-card.expanded.game-expanded .right-section.with-videos,
  .expanded-card.expanded.movie-expanded .right-section.with-videos {
    max-height: calc(var(--expanded-card-height) - var(--card-padding) * 2);
    padding-right: 30px;
    padding-bottom: 60px;
  }
  .expanded-card.expanded.game-expanded .description,
  .expanded-card.expanded.movie-expanded .description { max-height: 360px !important; }
  .expanded-card.expanded .video-wrapper iframe { height: clamp(360px, 25vh, 560px) !important; }
  .expanded-card.expanded.game-expanded .video-container { max-height: 1600px; }
  .video-container { max-height: clamp(800px, 40vh, 1120px); }

  .youtube-expanded-video-section iframe { height: clamp(560px, 40vh, 900px); }
  .youtube-expanded-content,
  .youtube-expanded-content .left-section,
  .expanded-card.expanded.youtube-expanded .meta-container { min-height: clamp(600px, 40vh, 1000px); }
  .expanded-card.expanded.youtube-expanded h3 { font-size: clamp(22px, 2vw, 45px); }
  .expanded-card.expanded.youtube-expanded .description { font-size: clamp(17px, 1.4vw, 32px); }
}