/* ========================
   COLOR PALETTE
   ======================== 
   Main colors used throughout the app */
:root {
  --deep: #085b6f; /* Dark teal - main text color */
  --mid: #32a8b3; /* Medium teal - secondary text, borders */
  --light: #69d3da; /* Light teal - accents, highlights */
  --cell-bg: rgba(
    105,
    211,
    218,
    0.5
  ); /* Very light teal - for table cell backgrounds */
  --accent: #daff7d; /* Bright green - for important highlights (live streams, today) */
  --filled-subtle: rgba(
    105,
    211,
    218,
    0.15
  ); /* Very light teal - for filled schedule cells */
  --filled-border: rgba(
    105,
    211,
    218,
    0.25
  ); /* Light teal border - stays in brand family */
  --bg: #fefcfd; /* Off-white background */
}

/* ========================
   GLOBAL STYLES
   ======================== */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial;
  background: var(--bg);
  color: var(--deep);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased; /* Smoother text on Mac */
  -moz-osx-font-smoothing: grayscale; /* Smoother text on Mac Firefox */
  -webkit-text-size-adjust: 100%; /* Prevent text scaling on mobile */
  -ms-text-size-adjust: 100%;
}

.container {
  max-width: 980px; /* Max width for desktop readability */
  margin: 0 auto; /* Center the content */
  padding: 0 2rem 2rem;
}

/* ========================
   GLOBAL HEADER - Foundation
   ======================== 
   Proper foundational header that anchors the entire page */

.global-header {
  background: linear-gradient(
    135deg,
    var(--deep) 0%,
    var(--mid) 50%,
    var(--light) 100%
  );
  color: white;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(8, 91, 111, 0.15);
  position: relative;
}

.global-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 20%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.1) 80%,
    transparent 100%
  );
}

.header-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* BRAND IDENTITY */
/* Foundation for brand logo and name styling */

.brand-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.brand-logo {
  height: 52px;
  border-radius: 14px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.2));
}

.brand-name {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.brand-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 2px;
}

/* NAVIGATION & ACTIONS */
/* Header navigation and action buttons styling */

.header-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* TIMEZONE TOGGLE SELECTOR */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.nav-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Toggle Switch Container */
.tz-selector {
  position: relative;
  width: 110px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.tz-selector:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Toggle Labels */
.tz-selector::before {
  content: "EET";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mid);
  z-index: 2;
  transition: color 0.3s ease;
}

.tz-selector::after {
  content: "Local";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  transition: color 0.3s ease;
}

/* Sliding Button */
.tz-selector .toggle-slider {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 34px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Active State */
.tz-selector.active {
  background: rgba(218, 255, 125, 0.2);
  border-color: rgba(218, 255, 125, 0.4);
}

.tz-selector.active::before {
  color: rgba(255, 255, 255, 0.6);
}

.tz-selector.active::after {
  color: var(--deep);
  font-weight: 700;
}

.tz-selector.active .toggle-slider {
  left: 56px;
  width: 52px;
  background: var(--accent);
  box-shadow: 0 2px 12px rgba(218, 255, 125, 0.4);
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.follow-btn:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.twitch-icon {
  height: 22px;
  width: auto;
}

.follow-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
}

.follow-action {
  font-size: 0.75rem;
  color: var(--mid);
  font-weight: 500;
}

.platform-name {
  font-size: 0.9rem;
  color: var(--deep);
  font-weight: 700;
}

/* ========================
   MAIN CONTENT GRID
   ======================== 
   Side-by-side layout for next stream and notes */
.main-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .main-content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ========================
   HERO SECTION
   ======================== 
   Prominent next stream card with sophisticated design and clear hierarchy */
#hero-section {
  margin-bottom: 0;
}

.hero-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(105, 211, 218, 0.08) 50%,
    rgba(50, 168, 179, 0.12) 100%
  );
  backdrop-filter: blur(20px);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(8, 91, 111, 0.08),
    0 1px 4px rgba(8, 91, 111, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(50, 168, 179, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(105, 211, 218, 0.1) 40%,
    rgba(218, 255, 125, 0.15) 60%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ========================
   LIVE HERO INTERACTIVE STYLES
   ======================== 
   Special hover effects and click functionality when stream is live */

.hero-card.live-clickable {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: rgba(218, 255, 125, 0.6);
  box-shadow: 0 4px 20px rgba(8, 91, 111, 0.08),
    0 1px 4px rgba(8, 91, 111, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(218, 255, 125, 0.3);
}

.hero-card.live-clickable:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 32px rgba(8, 91, 111, 0.15),
    0 4px 16px rgba(50, 168, 179, 0.12), 0 0 0 2px rgba(218, 255, 125, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: var(--accent);
}

.hero-card.live-clickable:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(105, 211, 218, 0.2) 0%,
    rgba(218, 255, 125, 0.25) 40%,
    rgba(50, 168, 179, 0.15) 100%
  );
}

.hero-card.live-clickable:active {
  transform: translateY(-2px) scale(1.01);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Live indicator color change when hero is hovered */
.hero-card.live-clickable:hover .live-now {
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.stream-info-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.stream-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep);
  letter-spacing: -0.2px;
}

/* ========================
   HERO ANIMATIONS
   ======================== 
   Subtle animations for enhanced user experience */

/* Gentle bobbing motion for penguin icon */
@keyframes gentleBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Subtle pulse for status indicator */
@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* Live status animation */
@keyframes livePulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(8, 91, 111, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(50, 168, 179, 0.6);
  }
}

.next-info {
  font-size: 1rem;
  color: var(--deep);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.next-info strong {
  font-size: 1.15rem;
  display: inline;
  margin-right: 0.5rem;
  color: var(--deep);
  font-weight: 800;
  letter-spacing: -0.1px;
}

.next-info a {
  color: var(--mid);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  padding-bottom: 1px;
}

.next-info a:hover {
  color: var(--deep);
  border-bottom-color: var(--light);
}

.countdown-timer {
  font-size: 0.85rem;
  color: var(--deep);
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  background: linear-gradient(
    135deg,
    rgba(50, 168, 179, 0.12) 0%,
    rgba(105, 211, 218, 0.08) 100%
  );
  border: 1px solid rgba(50, 168, 179, 0.2);
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  min-width: fit-content;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(8, 91, 111, 0.04);
}

.countdown-timer:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 91, 111, 0.15);
  background: linear-gradient(
    135deg,
    rgba(50, 168, 179, 0.2) 0%,
    rgba(105, 211, 218, 0.15) 100%
  );
}

/* Special styling when showing "Live now!" */
.countdown-timer.live-now {
  background: linear-gradient(135deg, var(--deep), var(--mid));
  color: white;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(8, 91, 111, 0.4),
    0 0 0 2px rgba(50, 168, 179, 0.3);
  border: 1px solid var(--mid);
  animation: pulse 2s infinite;
}

.hero-card .stream-status-badge .status-indicator.live {
  background: linear-gradient(135deg, var(--deep), var(--mid));
  animation: livePulse 1.5s ease-in-out infinite;
}

.hero-card .stream-status-badge .status-text.live {
  color: var(--deep);
  font-weight: 700;
}

/* Schedule disclaimer styling */
.schedule-disclaimer {
  text-align: center;
  margin-bottom: 1rem;
}

.schedule-disclaimer p {
  margin: 0;
  color: var(--mid);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
}

.schedule-disclaimer strong {
  font-weight: 700;
  color: var(--deep);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.4rem;
  margin-top: 1rem;
}
th,
td {
  padding: 0.7rem;
  text-align: center;
  background: var(--light);
  border-radius: 0.7rem;
  font-size: 0.95rem;
  min-width: 3.6rem;
  max-width: 8rem;
  white-space: normal;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}
/* Table header styles */
th {
  background: var(--mid);
  color: #fff;
  font-weight: 600;
}

/* Time cell styles */
.time-cell {
  background: var(--bg) !important;
  border: 2px solid var(--mid);
  font-weight: 600;
  min-width: 5rem;
  width: 5rem;
}

.time-display {
  color: var(--deep);
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.timezone-label {
  font-size: 0.7rem;
  color: var(--mid);
  font-weight: 500;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filled cell styles */
td.filled {
  background: var(--bg);
  font-weight: 500;
  color: var(--deep);
  border: 2px solid var(--light);
  position: relative;
}

/* Past stream styling */
td.filled.past-time {
  background: #e0e0e0;
  color: #666;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Current day header highlight */
th.today-header {
  background: var(--accent);
  color: var(--deep);
  font-weight: 700;
}

/* ========================
   LIVE STREAM STYLING
   ======================== 
   Styles for table cells when a stream is currently live */
td.live,
td.finntacticsLive {
  background: linear-gradient(135deg, var(--light), var(--accent));
  color: white;
  position: relative;
  animation: liveGlow 2s ease-in-out infinite alternate; /* Applies glowing animation */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effects for live cells (clickable to go to Twitch) */
td.live:hover,
td.finntacticsLive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(8, 91, 111, 0.4);
}

/* "LIVE NOW" text that appears over live stream cells */
td.live::after {
  content: "LIVE NOW";
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 8px;
  color: white;
  letter-spacing: 0.6px;
  font-weight: 800;
  animation: livePulse 1s ease-in-out infinite; /* Makes the text gently pulse */
}

/* ========================
   ANIMATION: Live Text Pulse
   ======================== 
   Makes "LIVE NOW" text gently grow/shrink for attention
   Used by: td.live::after (the "LIVE NOW" overlay text) */
@keyframes livePulse {
  0%,
  100% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* 5% bigger - subtle breathing effect */
  }
}

/* ========================
   ANIMATION: Live Cell Glow
   ======================== 
   Creates a glowing teal effect around live stream cells
   Used by: td.live, td.finntacticsLive (live stream table cells) */
@keyframes liveGlow {
  0% {
    box-shadow: 0 0 20px rgba(8, 91, 111, 0.3); /* Smaller teal glow */
    background: linear-gradient(135deg, var(--deep), var(--mid));
  }
  100% {
    box-shadow: 0 0 25px rgba(50, 168, 179, 0.5); /* Bigger teal glow */
    background: linear-gradient(135deg, var(--mid), var(--light));
  }
}

/* Special "LIVE NOW @Finntactics" text styling */
td.finntacticsLive::after {
  content: "LIVE NOW @Finntactics";
  position: relative;
  margin: 0;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--bg);
  letter-spacing: 0.7px;
  display: inline-block;
  text-align: center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Additional live cell styling with pulsing border effect */
td.live,
td.finntacticsLive {
  animation: pulse 2s infinite; /* Applies the pulse border animation below */
  border-radius: 0.8rem;
}

/* ========================
   ANIMATION: Pulsing Border (Mobile)
   ======================== 
   Creates expanding/fading border around live elements
   Used by: Mobile live stream cards for extra attention */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--light); /* No shadow */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(8, 91, 111, 0); /* Expanded shadow, fading out */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(8, 91, 111, 0); /* Back to no shadow */
  }
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: -0.5rem -1rem 0;
  padding: 0 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mid) transparent;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: rgba(50, 168, 179, 0.1);
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--mid);
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--deep);
}

h2 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--deep);
  margin-top: 0rem;
}

/* ========================
   NOTES SECTION
   ======================== 
   Stream notes and thoughts card */
#thoughts-section {
  margin-bottom: 0;
}

.thoughts-card {
  background: var(--bg);
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(8, 91, 111, 0.06);
  overflow: hidden;
}

.notes-header {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    rgba(8, 91, 111, 0.1) 100%
  );
  padding: 0.75rem 1.2rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--deep);
  border-bottom: 1px solid rgba(8, 91, 111, 0.1);
}

.notes-content {
  padding: 1.2rem;
  color: var(--deep);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  th a:hover {
    background-color: transparent;
  }

  th a:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
  }

  /* Enhanced visual distinction for filled cells on mobile */
  td.filled {
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(105, 211, 218, 0.35);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(105, 211, 218, 0.18),
      0 1px 3px rgba(8, 91, 111, 0.08);
  }

  .hero-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Enhanced touch targets */
  .time-slot {
    min-height: 44px; /* iOS recommended minimum touch target */
  }

  /* Pull to refresh visual feedback */
  body {
    overscroll-behavior-y: contain;
  }
}

/* Time column link styles */
td:first-child a {
  color: var(--deep);
  text-decoration: none;
  font-weight: 600;
  display: block;
  padding: 0.2rem;
  margin: -0.2rem;
  border-radius: 0.3rem;
  transition: background-color 0.2s ease;
}

td:first-child a:hover {
  background-color: rgba(50, 168, 179, 0.1);
}

/* Desktop/Mobile Layout Control */
@media (min-width: 769px) {
  .desktop-schedule {
    display: block !important;
  }

  .mobile-schedule {
    display: none !important;
  }
}

/* Mobile Card Layout */
.mobile-schedule {
  display: none;
}

.day-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  );
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(8, 91, 111, 0.1);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.day-card.today {
  border: 2px solid var(--accent);
  box-shadow: 0 6px 20px rgba(218, 255, 125, 0.3);
}

.day-header {
  background: var(--mid);
  color: white;
  padding: 1rem;
  font-weight: 600;
}

.day-card.today .day-header {
  background: linear-gradient(135deg, var(--deep), var(--mid));
}

.day-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.times-container {
  padding: 0.5rem;
}

.time-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.time-slot.empty {
  background: rgba(105, 211, 218, 0.1);
}

/* No streams message for mobile */
.time-slot.no-streams {
  background: rgba(105, 211, 218, 0.05);
  border: 1px dashed rgba(105, 211, 218, 0.3);
  text-align: center;
  padding: 1.5rem;
}

.no-streams-message {
  color: var(--mid);
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.8;
}

.time-slot.filled {
  background: var(--bg);
  border: 2px solid var(--light);
  color: var(--deep);
  font-weight: 500;
}

.time-slot.live {
  background: linear-gradient(135deg, var(--light), var(--accent));
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 2px rgba(8, 91, 111, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: white;
}

.time-slot.live:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(8, 91, 111, 0.6);
}

.time-slot.finntactics-live {
  background: linear-gradient(135deg, var(--light), var(--accent));
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 2px rgba(8, 91, 111, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: white;
}

.time-slot.finntactics-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(8, 91, 111, 0.6);
}

.time-info {
  font-weight: 600;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.time-info .time-display {
  color: var(--deep);
  font-size: 0.9rem;
  font-weight: 600;
}

.mobile-timezone {
  font-size: 0.6rem;
  color: var(--mid);
  font-weight: 500;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stream-content {
  flex: 1;
  text-align: right;
  font-weight: 500;
}

.stream-content.empty {
  color: var(--mid);
  opacity: 0.7;
  font-style: italic;
}

.live-indicator {
  color: var(--deep);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ========================
   MOBILE RESPONSIVE STYLES
   ======================== 
   Tablet and mobile layouts (768px and below) */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 0.5rem 0.5rem;
  }

  /* Hide desktop table, show mobile cards */
  .desktop-schedule {
    display: none !important;
  }

  .mobile-schedule {
    display: block !important;
  }

  .global-header {
    padding: 1.25rem 0;
    margin-bottom: 1rem;
  }

  .header-container {
    padding: 0 0.5rem;
    flex-direction: column;
    gap: 1rem;
  }

  .brand-identity {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }

  /* Make brand logo larger on mobile since it has more space */
  .brand-logo {
    height: 60px;
  }

  .brand-name {
    font-size: 1.6rem;
    margin: 0.25rem 0;
  }

  .brand-tagline {
    font-size: 0.85rem;
    opacity: 0.9;
  }

  .header-nav {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .logo-container {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .brand-info h1 {
    font-size: 1.5rem;
  }

  .header-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .platform-links {
    justify-content: center;
  }

  .personal-logo {
    height: 52px;
  }

  .site-header {
    margin-bottom: 1rem;
  }

  .site-header h1 {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .sub {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.6rem 0.8rem;
    max-width: 100%;
  }

  /* Mobile hero section */
  .hero-card {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .stream-info-main {
    text-align: center;
    width: 100%;
  }

  .stream-heading {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .next-info {
    font-size: 0.95rem;
  }

  .next-info strong {
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.25rem;
  }

  .countdown-timer {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
  }

  table {
    min-width: 100%; /* Table fits container width */
    margin-top: 0;
  }

  th,
  td {
    padding: 0.5rem 0.3rem;
    font-size: 0.8rem;
    min-width: 3.2rem;
    max-width: 6rem;
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
  }

  th:first-child,
  td:first-child {
    min-width: 4rem;
    position: sticky;
    left: 0;
    background: var(--mid);
    z-index: 10;
  }

  td:first-child {
    background: var(--light);
    font-weight: 600;
  }

  td:first-child a {
    color: var(--deep);
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 0.2rem;
    margin: -0.2rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s ease;
  }

  tr.current-time td:first-child a {
    color: var(--accent) !important;
  }

  .next-info {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }

  .notes-header {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .notes-content {
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem 0.25rem;
  }

  .header-container {
    padding: 0 0.25rem;
  }

  .header-content {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .brand-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }

  .personal-logo {
    height: 64px;
  }

  .sub {
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
  }

  th,
  td {
    padding: 0.4rem 0.25rem;
    font-size: 0.75rem;
    min-width: 2.8rem;
    max-width: 5rem;
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
  }

  th:first-child,
  td:first-child {
    min-width: 3.5rem;
  }

  .table-wrapper {
    margin: 0.5rem -0.25rem 0;
    padding: 0 0.25rem;
  }
}