:root {
  --bg: #ffffff;
  --ink: #000000;
  --header-h: clamp(40px, 5vh, 56px);
  --tab-h: clamp(30px, 4vh, 40px);
  --schedule-clearance: clamp(60px, 8vh, 90px);
}

html.dark-mode, body.dark-mode {
  --bg: #050505;
  --ink: #ffffff;
  background: #050505 !important;
  color: #ffffff !important;
}

body.schedule-open {
  --schedule-clearance: 270px;
}

*, *::before, *::after, input, button, select, textarea {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 300;
}

html, body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  background: var(--bg);
  font-family: 'Roboto Mono', monospace !important;
  font-weight: 300;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: background-color 0.4s ease, padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: calc(var(--header-h) + var(--tab-h));
}

body.tab-collapsed { padding-top: var(--header-h); }

canvas#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  touch-action: manipulation;
}

/* ---------- Header ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between;
  align-items: center; padding: 0 clamp(10px, 1.5vw, 24px);
  height: var(--header-h);
  background: rgba(200, 200, 200, 0.25) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ink);
  direction: ltr;
  overflow: hidden;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
body.dark-mode header {
  background: rgba(30, 30, 30, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
}

.header-left { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; position: relative; z-index: 2; }
.radio-title { font-size: clamp(10px, 0.9vw, 13px); font-weight: 400; margin: 0; color: var(--ink); transition: color 0.4s ease; }
body.dark-mode .radio-title { color: #FFFFFF !important; }

.toggle-arrow-btn, .tab-toggle-btn { background: none; border: none; outline: none; cursor: pointer; padding: 0; }
.toggle-arrow-btn {
  color: var(--ink);
  font-size: clamp(9px, 0.8vw, 12px);
  line-height: 1;
  display: inline-block;
  transition: color 0.4s ease, transform 0.3s ease;
}
body.dark-mode .toggle-arrow-btn { color: #FFFFFF !important; }
header .toggle-arrow-btn.rotated { transform: rotate(180deg); }

.player-container { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); position: relative; z-index: 2; }
.play-btn-wrapper {
  background: none; border: none; outline: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.square-play { width: clamp(28px, 2.5vw, 36px); height: clamp(28px, 2.5vw, 36px); display: block; }
.square-play rect { stroke: var(--ink); }
.square-play polygon { fill: var(--ink); }
.square-play .pause-bar { fill: var(--ink); stroke: none; }

.volume-slider { width: clamp(45px, 4.5vw, 70px); height: 4px; accent-color: var(--ink); cursor: pointer; }

/* ---------- Info tab ---------- */
.info-tab {
  position: fixed; top: var(--header-h); left: 0; right: 0; width: 100%; z-index: 999;
  background: rgba(200, 200, 200, 0.25) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ink);
  padding: 0 clamp(10px, 1.5vw, 24px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  direction: ltr; font-size: clamp(9px, 0.85vw, 12px); letter-spacing: 0.5px;
  height: var(--tab-h);
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background-color 0.4s ease;
  will-change: transform, opacity;
}
body.dark-mode .info-tab {
  background: rgba(30, 30, 30, 0.35) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.info-tab.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.tab-text, .tab-toggle-btn { font-weight: 400; color: var(--ink); font-size: clamp(9px, 0.85vw, 12px); position: relative; z-index: 1; }
body.dark-mode .tab-text, body.dark-mode .tab-toggle-btn { color: #FFFFFF !important; }
.tab-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-toggle-btn { flex-shrink: 0; white-space: nowrap; }

/* Floating seek bar: sits on top of the bottom drawer and rides up with it */
.seek-panel {
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px);
  padding: 10px clamp(10px, 1.5vw, 24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ink); direction: ltr;
  animation: seekPanelIn 0.25s ease;
}
body.dark-mode .seek-panel { color: #FFFFFF !important; border-bottom-color: rgba(255, 255, 255, 0.12); }
.seek-panel[hidden] { display: none; }
@keyframes seekPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.seek-bar { flex: 1; min-width: 0; height: 4px; accent-color: var(--ink); cursor: pointer; touch-action: none; }
body.dark-mode .seek-bar { accent-color: #FFFFFF; }
.seek-time {
  flex-shrink: 0; font-size: clamp(9px, 0.8vw, 11px); opacity: 0.75;
  min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
}
.seek-skip, .seek-live {
  flex-shrink: 0; background: none; border: none; outline: none; padding: 4px 2px; cursor: pointer;
  color: var(--ink); font-size: clamp(9px, 0.85vw, 12px); font-weight: 400; letter-spacing: 0.3px; white-space: nowrap;
}
body.dark-mode .seek-skip, body.dark-mode .seek-live { color: #FFFFFF !important; }
.seek-skip { opacity: 0.7; }
.seek-skip:hover, .seek-live:hover { opacity: 1; }

/* ---------- Center ---------- */
.center-container {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--tab-h));
  padding: clamp(10px, 2vh, 24px) clamp(10px, 2vw, 24px) var(--schedule-clearance) clamp(10px, 2vw, 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.35s ease;
}
body.tab-collapsed .center-container { min-height: calc(100vh - var(--header-h)); }

.theme-btn {
  position: absolute; top: 10px; right: clamp(10px, 1.5vw, 24px); z-index: 10;
  background: none; border: none; outline: none; cursor: pointer; padding: 0;
  color: var(--ink); font-size: clamp(14px, 1.3vw, 18px); line-height: 1; font-weight: 300;
  pointer-events: auto; transition: color 0.4s ease;
}
body.dark-mode .theme-btn { color: #FFFFFF !important; }

/* ---------- Drawer ---------- */
.schedule-drawer {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; direction: ltr;
  background: rgba(200, 200, 200, 0.25) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  will-change: transform;
  transition: background-color 0.4s ease;
}
body.dark-mode .schedule-drawer {
  background: rgba(30, 30, 30, 0.45) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.schedule-header, .schedule-content { background: transparent; color: var(--ink); }
body.dark-mode .schedule-header, body.dark-mode .schedule-content { color: #FFFFFF !important; }

.schedule-header {
  padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.5vw, 24px);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-size: clamp(9px, 0.85vw, 12px); font-weight: 400; letter-spacing: 0.5px;
}
.schedule-title-group, .social-links { display: flex; align-items: center; gap: 6px; }

.drawer-tab {
  background: none; border: none; outline: none; padding: 4px 0; margin-right: 10px;
  cursor: pointer; color: var(--ink); font-size: inherit; font-weight: 400; letter-spacing: 0.5px;
  opacity: 0.45; transition: opacity 0.2s ease;
}
body.dark-mode .drawer-tab { color: #FFFFFF !important; }
.drawer-tab.active { opacity: 1; }

#scheduleArrow { display: inline-block; transition: transform 0.3s ease; }
.schedule-drawer.open #scheduleArrow { transform: rotate(180deg); }

.social-links { gap: clamp(8px, 1vw, 16px); }
.social-links a { color: var(--ink); text-decoration: none; font-size: clamp(7px, 0.65vw, 9px); font-weight: 400; opacity: 0.9; }
body.dark-mode .social-links a { color: #FFFFFF !important; }

.schedule-content {
  max-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: max-height 0.35s ease;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
body.dark-mode .schedule-content { border-top-color: rgba(255, 255, 255, 0.12); }
.schedule-drawer.open .schedule-content { max-height: 230px; }

.schedule-timeline, .archive-list {
  list-style: none; margin: 0;
  padding: 4px clamp(10px, 1.5vw, 24px) 12px;
  display: flex; flex-direction: column;
}
.schedule-timeline[hidden], .archive-list[hidden] { display: none; }

.schedule-day-row {
  display: flex; gap: clamp(10px, 1.5vw, 20px); padding: 10px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.schedule-day-row:last-child { border-bottom: none; }
.schedule-day-row-today .schedule-day-date { color: #FFCA28; }

.schedule-day-date {
  flex-shrink: 0; width: clamp(56px, 6vw, 76px);
  font-size: clamp(10px, 0.85vw, 12px); font-weight: 400; letter-spacing: 0.3px;
  opacity: 0.85; color: var(--ink); padding-top: 1px; direction: ltr; text-align: start;
}
body.dark-mode .schedule-day-date { color: #FFFFFF !important; }
body.dark-mode .schedule-day-row-today .schedule-day-date { color: #FFCA28 !important; }

.schedule-events-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.schedule-event-row {
  display: flex; gap: 8px; align-items: baseline;
  font-size: clamp(10px, 0.85vw, 12px); font-weight: 300; color: var(--ink);
  cursor: pointer; padding: 3px 6px; margin: -3px -6px; border-radius: 2px;
  transition: background 0.15s ease; unicode-bidi: plaintext; text-align: start;
}
body.dark-mode .schedule-event-row { color: #FFFFFF !important; }
.schedule-event-row:hover { background: rgba(128, 128, 128, 0.15); }
.schedule-event-time { flex-shrink: 0; opacity: 0.6; direction: ltr; }
.schedule-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.schedule-empty-message {
  display: block; padding: 16px clamp(10px, 1.5vw, 24px); text-align: center;
  opacity: 0.5; font-weight: 300; color: var(--ink); font-size: clamp(10px, 0.85vw, 12px);
}
body.dark-mode .schedule-empty-message { color: #FFFFFF !important; }

/* ---------- Archive ---------- */
.archive-dj { border-bottom: 1px solid rgba(128, 128, 128, 0.2); }
.archive-dj:last-child { border-bottom: none; }

.archive-dj-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; outline: none; cursor: pointer; padding: 10px 0;
  color: var(--ink); font-size: clamp(10px, 0.9vw, 12px); font-weight: 400; letter-spacing: 0.3px;
  text-align: start; unicode-bidi: plaintext;
}
body.dark-mode .archive-dj-head { color: #FFFFFF !important; }
.archive-dj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-dj-meta { flex-shrink: 0; opacity: 0.55; font-size: clamp(9px, 0.8vw, 11px); }
.archive-dj-meta::after { content: ' ▸'; display: inline-block; transition: transform 0.2s ease; }
.archive-dj.expanded .archive-dj-meta::after { transform: rotate(90deg); }

.archive-recs { display: none; flex-direction: column; gap: 2px; padding: 0 0 10px; }
.archive-dj.expanded .archive-recs { display: flex; }

.archive-rec {
  display: flex; gap: 10px; align-items: baseline;
  font-size: clamp(10px, 0.85vw, 12px); color: var(--ink);
  cursor: pointer; padding: 4px 6px; margin: 0 -6px; border-radius: 2px;
  transition: background 0.15s ease; unicode-bidi: plaintext; text-align: start;
}
body.dark-mode .archive-rec { color: #FFFFFF !important; }
.archive-rec:hover { background: rgba(128, 128, 128, 0.15); }
.archive-rec.playing { background: rgba(128, 128, 128, 0.2); font-weight: 400; }
.archive-rec.playing .archive-rec-title::before { content: '▶ '; }
.archive-rec-date { flex-shrink: 0; opacity: 0.6; direction: ltr; min-width: 8ch; }
.archive-rec-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Event modal ---------- */
.event-modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.event-modal-overlay.active { opacity: 1; visibility: visible; }

.event-modal-content {
  background: rgba(200, 200, 200, 0.35) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0; padding: 20px; max-width: 500px; width: 100%; max-height: 80vh;
  overflow-y: auto; position: relative;
  font-size: clamp(10px, 0.9vw, 13px); font-weight: 300; letter-spacing: 0.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  transition: background-color 0.4s ease, transform 0.3s ease;
}
body.dark-mode .event-modal-content {
  background: rgba(30, 30, 30, 0.5) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15);
}
.event-modal-overlay.active .event-modal-content { transform: scale(1); }

.modal-close-btn {
  position: absolute; top: 10px; right: 15px; background: none; border: none;
  color: var(--ink); font-size: 18px; cursor: pointer; line-height: 1; font-weight: 300;
}
body.dark-mode .modal-close-btn { color: #FFFFFF !important; }

.modal-event-card { border-bottom: 1px solid rgba(128, 128, 128, 0.2); padding: 12px 0; }
.modal-event-card:last-child { border-bottom: none; }
.modal-event-time {
  color: var(--ink); font-weight: 400; font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.5px; margin-bottom: 6px; direction: ltr; text-align: start;
}
body.dark-mode .modal-event-time { color: #FFFFFF !important; }
.modal-event-title { font-size: clamp(11px, 0.95vw, 14px); font-weight: 400; margin: 0 0 8px 0; unicode-bidi: plaintext; text-align: start; }
.modal-event-desc {
  font-size: clamp(10px, 0.85vw, 12px); font-weight: 300; opacity: 0.9;
  white-space: pre-wrap; word-break: break-word; line-height: 1.4; unicode-bidi: plaintext; text-align: start;
}
.modal-event-img { max-width: 100%; height: auto; border-radius: 0; margin-top: 10px; display: block; }

@media (max-width: 520px) {
  .seek-duration { display: none; }
  .seek-panel { gap: 6px; }
}