/* styles.css — ไทม์ไลน์ทีวีไทย ละครดัง และรายการในความทรงจำ (1955–2025) */
:root {
  --bg-studio: #181411;
  --accent-color: #d4af37;
  --paper-bg: #f3ead8;
  --paper-ink: #1e1915;
  --paper-rule: #b8a88a;
  --osd-green: #39ff14;
  --font-active: 'Sarabun', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-studio);
  background-image:
    radial-gradient(circle at 28% 45%, rgba(255, 195, 110, 0.08) 0%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 36px);
  color: #f5f0e6;
  font-family: var(--font-active);
  transition: background-color 0.45s ease;
  user-select: none;
}

/* Dynamic Era Font Classes */
body.font-vintage-serif {
  --font-active: 'Noto Serif Thai', 'Charm', serif;
}
body.font-retro-display {
  --font-active: 'Chonburi', 'Sarabun', sans-serif;
}
body.font-classic-drama {
  --font-active: 'Charm', 'Noto Serif Thai', serif;
}
body.font-arcade-pop {
  --font-active: 'Kanit', 'Mitr', sans-serif;
}
body.font-cartoon-fun {
  --font-active: 'Mitr', 'Kanit', sans-serif;
}
body.font-modern-sans {
  --font-active: 'Prompt', 'Kanit', sans-serif;
}

/* ================= TOP BROADCAST BAR ================= */
.studio-topbar {
  height: 56px;
  background: linear-gradient(180deg, #1f1a17 0%, #120f0d 100%);
  border-bottom: 2px solid #3a3028;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 30;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.on-air-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2b0909;
  border: 2px solid #ff3b30;
  color: #ffd7d5;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.45);
}

.on-air-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30;
  animation: pulseOnAir 1.2s infinite alternate;
}

@keyframes pulseOnAir {
  0% { opacity: 0.45; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.15); }
}

.studio-title {
  font-family: 'Chonburi', serif;
  font-size: 1.08rem;
  color: #f8e8c8;
  letter-spacing: 0.02em;
}

.studio-subtitle {
  font-size: 0.8rem;
  color: #b7a996;
  font-family: 'Sarabun', sans-serif;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctrl-btn {
  background: #28221d;
  color: #f3e5ab;
  border: 1px solid #524538;
  padding: 6px 13px;
  border-radius: 6px;
  font-family: 'Kanit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.ctrl-btn:hover {
  background: #3b322b;
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.ctrl-btn.active {
  background: #b91c1c;
  color: #fff;
  border-color: #fca5a5;
}

.hub-link {
  background: linear-gradient(135deg, #3b2d1f, #261c12);
  border-color: #b38f48;
  color: #ffe8a3;
}

/* ================= MAIN LIVING ROOM + NEWSPAPER STAGE ================= */
.main-stage {
  height: calc(100vh - 56px - 68px);
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 22px;
  padding: 16px 24px;
  align-items: center;
  max-width: 1620px;
  margin: 0 auto;
}

/* ================= LEFT ZONE: THE TELEVISION SET ================= */
.tv-living-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

/* Rabbit-Ear Antenna (เสาหนวดกุ้ง) */
.antenna-assembly {
  position: relative;
  width: 240px;
  height: 54px;
  margin-bottom: -6px;
  z-index: 4;
  transition: opacity 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.antenna-assembly.hidden-modern {
  opacity: 0.2;
  transform: scaleY(0.45) translateY(25px);
}

.antenna-rod {
  position: absolute;
  bottom: 8px;
  width: 4px;
  height: 76px;
  background: linear-gradient(90deg, #888, #e5e5e5, #666);
  border-radius: 3px;
  transform-origin: bottom center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.antenna-rod.left {
  left: 112px;
  transform: rotate(-42deg);
}

.antenna-rod.right {
  right: 112px;
  transform: rotate(42deg);
}

.antenna-rod::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4d4d4;
  border: 2px solid #444;
}

.antenna-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 16px;
  background: linear-gradient(180deg, #4a433d, #241f1c);
  border: 2px solid #6e6259;
  border-radius: 12px 12px 2px 2px;
}

.antenna-hint {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Kanit', sans-serif;
  font-size: 0.7rem;
  color: #c2b59b;
  background: rgba(0,0,0,0.55);
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Television Outer Cabinet */
.tv-cabinet {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(145deg, #6e4726 0%, #4a2e16 55%, #2f1c0c 100%);
  border: 6px solid #8a5a32;
  border-radius: 26px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 142px;
  gap: 16px;
  box-shadow:
    0 22px 45px rgba(0,0,0,0.75),
    inset 0 2px 4px rgba(255,255,255,0.22),
    inset 0 -6px 14px rgba(0,0,0,0.6);
  position: relative;
  transition: all 0.45s ease;
}

/* Era Cabinet Variations */
.tv-cabinet.crt-wood {
  background: linear-gradient(145deg, #744924 0%, #4e2f14 55%, #301b0a 100%);
  border-color: #966438;
  border-radius: 26px;
}

.tv-cabinet.crt-plastic {
  background: linear-gradient(145deg, #4b4741 0%, #2d2a26 60%, #1c1a17 100%);
  border-color: #706a61;
  border-radius: 20px;
}

.tv-cabinet.crt-black {
  background: linear-gradient(145deg, #2b2d30 0%, #18191b 65%, #0d0e10 100%);
  border-color: #45484c;
  border-radius: 16px;
}

.tv-cabinet.crt-silver {
  background: linear-gradient(145deg, #9ca3af 0%, #6b7280 55%, #374151 100%);
  border-color: #d1d5db;
  border-radius: 14px;
}

.tv-cabinet.lcd-flat {
  background: linear-gradient(145deg, #27272a 0%, #18181b 60%, #09090b 100%);
  border-color: #52525b;
  border-radius: 12px;
  padding: 15px;
}

.tv-cabinet.oled-sleek {
  background: linear-gradient(145deg, #18181b 0%, #09090b 100%);
  border: 3px solid #38bdf8;
  border-radius: 10px;
  padding: 12px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.85),
    0 0 28px rgba(56, 189, 248, 0.2);
}

/* CRT Bezel & Glass Screen */
.tv-bezel {
  background: #141311;
  border: 6px solid #26231f;
  border-radius: 28px;
  padding: 10px;
  position: relative;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.95);
  transition: border-radius 0.4s ease;
}

.tv-cabinet.oled-sleek .tv-bezel,
.tv-cabinet.lcd-flat .tv-bezel {
  border-radius: 10px;
  border-width: 3px;
  padding: 4px;
}

.tv-screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #050505;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.85);
}

.tv-cabinet.oled-sleek .tv-screen,
.tv-cabinet.lcd-flat .tv-screen {
  border-radius: 6px;
}

/* Artwork SVG Container inside TV Screen */
.tv-scene-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.tv-scene-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* CRT Scanlines & Glass Reflection Overlay */
.crt-scanlines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
  z-index: 5;
}

.tv-cabinet.oled-sleek .crt-scanlines {
  opacity: 0.2;
}

.crt-glare {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 75%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 70%);
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 6;
}

/* Green OSD Channel Overlay (CH 05 • พ.ศ. 2533) */
.tv-osd {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 9;
  font-family: 'Courier New', 'Kanit', monospace;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--osd-green);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.85), 2px 2px 0 #000;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 11px;
  border-radius: 4px;
  border: 1px solid rgba(57, 255, 20, 0.35);
  pointer-events: none;
  letter-spacing: 0.04em;
  transition: transform 0.18s ease;
}

.tv-osd.osd-flash {
  transform: scale(1.1);
  background: rgba(0, 20, 0, 0.85);
}

/* Live Station Bug Top Right */
.tv-station-bug {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 9;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}

/* 180ms CRT Static Snow Overlay */
.tv-static-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff, #000 0.00085px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.25) 0px, rgba(0,0,0,0.4) 2px, transparent 4px);
  transition: opacity 0.06s ease;
}

.tv-static-overlay.active {
  opacity: 0.92;
  animation: snowJitter 0.18s steps(3) infinite;
}

@keyframes snowJitter {
  0% { transform: translate(0, 0); filter: contrast(220%) brightness(130%); }
  50% { transform: translate(-4px, 3px); filter: invert(20%) contrast(250%); }
  100% { transform: translate(3px, -3px); filter: contrast(200%); }
}

/* ================= SIDE ROTARY CONTROL PANEL ================= */
.tv-side-panel {
  background: linear-gradient(180deg, #27221d 0%, #191512 100%);
  border: 3px solid #4d4237;
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}

.panel-brand {
  font-family: 'Chonburi', serif;
  font-size: 0.76rem;
  color: #e2c58a;
  letter-spacing: 0.08em;
  text-align: center;
  border-bottom: 1px solid #4d4237;
  width: 100%;
  padding-bottom: 5px;
}

/* Rotary Channel Dial Knob */
.rotary-dial-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dial-label {
  font-family: 'Kanit', sans-serif;
  font-size: 0.72rem;
  color: #bdb09c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rotary-outer {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, #3d352e 0%, #181411 75%);
  border: 3px solid #8a7968;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.75);
  transition: border-color 0.2s ease;
}

.rotary-outer:hover {
  border-color: var(--accent-color);
}

.rotary-knob {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d6cfc2, #8c8273, #e5dfd3, #6e6559, #d6cfc2);
  border: 3px solid #2b2520;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.65);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Indicator Bar on the Knob */
.knob-marker {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: #d90429;
  box-shadow: 0 0 5px rgba(217, 4, 41, 0.8);
}

.knob-center-cap {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #3a332c, #1c1815);
  border: 1px solid #998c7a;
}

.ch-digital-readout {
  background: #071407;
  border: 2px solid #2e592e;
  color: var(--osd-green);
  font-family: 'Courier New', monospace;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 2px 10px;
  border-radius: 4px;
  text-shadow: 0 0 6px var(--osd-green);
  letter-spacing: 0.06em;
}

/* Channel Step Buttons */
.ch-step-btns {
  display: flex;
  gap: 8px;
  width: 100%;
}

.ch-step-btn {
  flex: 1;
  background: #383028;
  color: #f4e8c1;
  border: 1px solid #6b5c4d;
  border-radius: 5px;
  padding: 5px 0;
  font-family: 'Kanit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ch-step-btn:hover {
  background: #52463b;
  border-color: var(--accent-color);
}

.ch-step-btn:active {
  transform: translateY(2px);
}

/* Speaker Grille */
.speaker-grille {
  width: 100%;
  height: 44px;
  background: repeating-linear-gradient(
    0deg,
    #110e0c 0px,
    #110e0c 3px,
    #362e27 3px,
    #362e27 6px
  );
  border-radius: 6px;
  border: 1px solid #4a3f36;
}

/* TV Cabinet Stand Legs */
.tv-stand-bar {
  width: 78%;
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
}

.tv-leg {
  width: 24px;
  height: 18px;
  background: linear-gradient(90deg, #4a2e16, #261608);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}

/* Caption Below TV */
.tv-caption-strip {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 16, 13, 0.82);
  border: 1px solid #453a30;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.83rem;
  color: #ded2be;
}

/* ================= RIGHT ZONE: THAI NEWSPAPER TV GUIDE ================= */
.newspaper-guide {
  height: 100%;
  max-height: calc(100vh - 148px);
  background-color: var(--paper-bg);
  background-image:
    radial-gradient(rgba(139, 115, 85, 0.08) 1px, transparent 0),
    linear-gradient(90deg, rgba(0,0,0,0.04) 0%, transparent 6%, transparent 94%, rgba(0,0,0,0.05) 100%);
  background-size: 16px 16px, 100% 100%;
  color: var(--paper-ink);
  border-radius: 6px;
  border: 2px solid #8c7a5b;
  box-shadow:
    -8px 10px 28px rgba(0,0,0,0.65),
    inset 0 0 32px rgba(139, 105, 60, 0.18);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow-y: auto;
  transition: background-color 0.4s ease;
}

/* Newspaper Top Masthead */
.paper-masthead {
  border-bottom: 3px double #2b231d;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.paper-Utility-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Sarabun', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #544637;
  border-bottom: 1px solid #b8a88a;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.masthead-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.paper-brand-title {
  font-family: 'Chonburi', serif;
  font-size: 1.45rem;
  color: #1a1410;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.station-stamp {
  background: #8b0000;
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 4px;
  border: 2px dashed rgba(255,255,255,0.65);
  transform: rotate(-1.5deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  white-space: nowrap;
}

/* Headline Section */
.paper-headline-box {
  margin-bottom: 10px;
  border-bottom: 1px solid #b8a88a;
  padding-bottom: 8px;
}

.paper-headline {
  font-family: var(--font-active);
  font-size: 1.25rem;
  font-weight: 800;
  color: #140f0b;
  line-height: 1.32;
  margin-bottom: 4px;
}

.paper-subhead {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: #4a3c2f;
  line-height: 1.4;
}

/* Ratings Phenomenon Meter */
.ratings-meter-box {
  background: rgba(43, 35, 29, 0.07);
  border: 1px solid #a8987a;
  border-radius: 5px;
  padding: 7px 12px;
  margin-bottom: 10px;
}

.ratings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Kanit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2b2118;
  margin-bottom: 4px;
}

.ratings-bar-track {
  width: 100%;
  height: 10px;
  background: #d8ccb8;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #8c7a5b;
}

.ratings-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d97706, #dc2626);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 4 Broadcast Specs Grid (ผังข้อมูลออกอากาศ) */
.broadcast-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.spec-cell {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #bfa984;
  border-left: 4px solid #8b261d;
  padding: 6px 10px;
  border-radius: 4px;
}

.spec-label {
  font-family: 'Kanit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6e583f;
  text-transform: uppercase;
}

.spec-val {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  color: #1c1612;
  line-height: 1.3;
  margin-top: 2px;
}

/* Newspaper Column Story */
.paper-story-columns {
  font-family: 'Sarabun', serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #261f1a;
  text-align: justify;
  column-count: 2;
  column-gap: 18px;
  column-rule: 1px solid #bba988;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2b231d;
}

.paper-story-columns::first-letter {
  font-family: 'Chonburi', serif;
  font-size: 2.1rem;
  float: left;
  line-height: 0.9;
  padding-right: 6px;
  padding-top: 2px;
  color: #8b1e16;
}

/* 3 Iconic Moments */
.moments-section-title {
  font-family: 'Chonburi', serif;
  font-size: 0.9rem;
  color: #2b2118;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.moments-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.moment-card {
  background: rgba(255, 252, 244, 0.78);
  border: 1px solid #b8a483;
  border-radius: 5px;
  padding: 7px 9px;
}

.moment-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #7c1d14;
  margin-bottom: 3px;
  line-height: 1.25;
}

.moment-desc {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.76rem;
  color: #362c23;
  line-height: 1.38;
}

/* ================= BOTTOM REMOTE CHANNEL STRIP (CH 01 - CH 16) ================= */
.remote-channel-strip {
  height: 68px;
  background: linear-gradient(180deg, #1b1714 0%, #0e0c0a 100%);
  border-top: 2px solid #3c3228;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  overflow-x: auto;
  z-index: 30;
}

.ch-btn {
  background: linear-gradient(180deg, #2d2621 0%, #1d1815 100%);
  border: 1px solid #4e4237;
  border-bottom: 3px solid #110e0b;
  border-radius: 7px;
  padding: 6px 9px;
  min-width: 72px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  color: #cbbba4;
}

.ch-btn:hover {
  background: #3d332c;
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.ch-btn.active {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  border-color: #fde047;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
  transform: translateY(-2px);
}

.ch-btn-num {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--osd-green);
}

.ch-btn.active .ch-btn-num {
  color: #fde047;
}

.ch-btn-year {
  font-family: 'Kanit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
}

.ch-btn-be {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.65rem;
  opacity: 0.82;
}

/* Responsive adjustments for smaller desktops/tablets */
@media (max-width: 1180px) {
  html, body {
    overflow-y: auto;
    height: auto;
  }
  .main-stage {
    height: auto;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .newspaper-guide {
    max-height: none;
  }
  .moments-list {
    grid-template-columns: 1fr;
  }
  .paper-story-columns {
    column-count: 1;
  }
}