:root {
  --navy-950: rgba(4, 18, 28, 0.96);
  --navy-900: rgba(10, 35, 50, 0.96);
  --navy-800: rgba(15, 44, 62, 0.96);
  --navy-700: #13374e;
  --line: rgba(69, 145, 186, 0.55);
  --line-soft: rgba(69, 145, 186, 0.22);
  --cyan: #54adf7;
  --cyan-bright: #74d7ff;
  --text: #ddedf7;
  --muted: #88a6b8;
  --news-duration: 7s;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  color: var(--text);
  font-family: "Bai Jamjuree", Arial, sans-serif;
}

.overlay {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.now-playing {
  position: absolute;
  left: 0;
  bottom: clamp(180px, 20vh, 245px);
  z-index: 4;
  display: grid;
  grid-template-columns: clamp(68px, 4.8vw, 88px) minmax(0, 1fr);
  width: clamp(350px, 25vw, 470px);
  min-height: clamp(82px, 9vh, 108px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background:
    linear-gradient(105deg, rgba(19, 55, 78, 0.98), rgba(5, 21, 32, 0.96)),
    var(--navy-950);
  box-shadow: 10px -8px 35px rgba(0, 10, 18, 0.35), inset 0 1px rgba(160, 224, 255, 0.08);
}
.now-playing[hidden] { display: none; }
.now-playing.panel-corners::before { z-index: 3; top: 7px; left: 7px; width: 13px; height: 13px; border: 0; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.now-playing.panel-corners::after { content: ""; position: absolute; top: 0; right: 0; bottom: auto; width: 42%; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--cyan)); }
.music-cover-wrap { position: relative; min-width: 0; border-right: 1px solid var(--line-soft); background: rgba(4, 18, 28, 0.72); }
.music-cover, .music-cover-fallback { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
.music-cover { object-fit: cover; border: 1px solid var(--line); }
.music-cover-fallback { display: grid; place-items: center; color: var(--cyan-bright); border: 1px solid var(--line); background: radial-gradient(circle, rgba(84, 173, 247, 0.15), transparent 70%); font: 600 9px/1 "Rajdhani", sans-serif; letter-spacing: 0.18em; }
.music-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px 11px; }
.music-label { margin-bottom: 3px; color: var(--cyan-bright); font: 700 8px/1 "Rajdhani", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.music-copy strong, .music-copy > span:not(.music-label), .music-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-copy strong { color: #f1f8fc; font: 600 clamp(13px, 0.95vw, 18px)/1.05 "Rajdhani", sans-serif; letter-spacing: 0.025em; text-transform: uppercase; }
.music-copy > span:not(.music-label) { margin-top: 2px; color: #a9c2d0; font-size: clamp(9px, 0.64vw, 12px); }
.music-copy small { margin-top: 5px; color: var(--muted); font: 600 clamp(7px, 0.5vw, 9px)/1 "Rajdhani", sans-serif; letter-spacing: 0.08em; }
.music-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(84, 173, 247, 0.08); }
.music-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: transform 0.3s linear; }

.lower-third {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: clamp(190px, 13vw, 260px) 1fr clamp(150px, 10vw, 210px);
  min-height: clamp(180px, 20vh, 245px);
  background:
    linear-gradient(90deg, rgba(84, 173, 247, 0.08), transparent 20%, transparent 80%, rgba(84, 173, 247, 0.08)),
    var(--navy-950);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 45px rgba(0, 10, 18, 0.35), inset 0 1px rgba(160, 224, 255, 0.08);
}

.lower-third::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(116, 215, 255, 0.055) 4px);
}

.edge { position: absolute; left: 0; right: 0; height: 2px; z-index: 5; }
.edge--top { top: 4px; background: linear-gradient(90deg, transparent, var(--cyan) 12%, transparent 38%, transparent 62%, var(--cyan) 88%, transparent); }
.edge--bottom { bottom: 4px; background: linear-gradient(90deg, var(--cyan), transparent 20%, transparent 80%, var(--cyan)); opacity: 0.45; }

.clock, .logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-900));
}

.clock { border-right: 1px solid var(--line); }
.logo { border-left: 1px solid var(--line); overflow: hidden; }

.panel-corners::before, .panel-corners::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--cyan);
  opacity: 0.8;
}
.panel-corners::before { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; }
.panel-corners::after { right: 9px; bottom: 9px; border-right: 2px solid; border-bottom: 2px solid; }

.eyebrow, .utc-label {
  color: var(--muted);
  font: 600 clamp(9px, 0.65vw, 12px)/1 "Rajdhani", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#clock {
  margin: 3px 0 1px;
  color: #f1fbff;
  font: 500 clamp(44px, 4.2vw, 76px)/0.95 "Rajdhani", sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 0 22px rgba(84, 173, 247, 0.28);
}

.utc-label { color: var(--cyan-bright); }
.utc-label i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 8px var(--cyan); }

.content { position: relative; z-index: 2; min-width: 0; display: grid; grid-template-rows: clamp(54px, 6vh, 72px) 1fr; }

.ticker { display: grid; grid-template-columns: clamp(125px, 9vw, 165px) 1fr; min-width: 0; border-bottom: 1px solid var(--line); background: rgba(15, 44, 62, 0.78); }
.section-label { display: flex; flex-direction: column; justify-content: center; padding-left: 20px; border-right: 1px solid var(--line); font-family: "Rajdhani", sans-serif; text-transform: uppercase; line-height: 1; }
.section-label span { color: var(--muted); font-size: 10px; letter-spacing: 0.22em; }
.section-label strong { margin-top: 4px; color: var(--cyan-bright); font-size: 18px; letter-spacing: 0.13em; }
.ticker-viewport { min-width: 0; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); }
.ticker-track { display: flex; width: max-content; flex-shrink: 0; will-change: transform; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 30px; white-space: nowrap; font: 500 clamp(13px, 1vw, 18px)/1 "Bai Jamjuree", sans-serif; letter-spacing: 0.025em; }
.ticker-item::after { content: "//"; margin-left: 18px; color: var(--line); letter-spacing: -0.08em; }
.ticker-date { color: var(--cyan-bright); font-family: "Rajdhani", sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ticker-category { padding: 3px 7px; border: 1px solid var(--line); color: var(--muted); font: 600 9px/1 "Rajdhani", sans-serif; letter-spacing: 0.15em; text-transform: uppercase; }
.loading { padding: 0 30px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.news { position: relative; min-width: 0; display: grid; grid-template-columns: clamp(110px, 8vw, 145px) 1fr; align-items: center; padding: 12px clamp(24px, 2.4vw, 44px) 14px 20px; background: linear-gradient(100deg, rgba(19, 55, 78, 0.82), rgba(8, 27, 40, 0.88)); overflow: hidden; }
.news-meta { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-right: 1px solid var(--line-soft); }
.news-category { color: var(--cyan-bright); font: 700 12px/1 "Rajdhani", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.news-counter { color: var(--muted); font: 600 10px/1 "Rajdhani", sans-serif; letter-spacing: 0.14em; }
.news-copy { min-width: 0; padding-left: clamp(18px, 1.8vw, 34px); will-change: opacity, transform; }
.news h1 { margin: 0 0 6px; overflow: hidden; color: #f1f8fc; font: 600 clamp(18px, 1.55vw, 29px)/1.08 "Rajdhani", sans-serif; letter-spacing: 0.025em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.news p { margin: 0; overflow: hidden; color: #9db5c4; font-size: clamp(11px, 0.85vw, 16px); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.news-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(84, 173, 247, 0.08); }
.news-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); will-change: transform; }

.logo img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; z-index: 2; background: transparent; }

.player {
  position: absolute;
  right: 0;
  bottom: clamp(180px, 20vh, 245px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: clamp(300px, 28vw, 520px);
  min-height: clamp(68px, 7.5vh, 90px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background:
    linear-gradient(255deg, rgba(19, 55, 78, 0.98), rgba(5, 21, 32, 0.96)),
    var(--navy-950);
  box-shadow: -10px -8px 35px rgba(0, 10, 18, 0.35), inset 0 1px rgba(160, 224, 255, 0.08);
}
.player[hidden] { display: none; }
.player.panel-corners::before { z-index: 3; top: 7px; right: 7px; left: auto; width: 13px; height: 13px; border: 0; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.player.panel-corners::after { content: ""; position: absolute; top: 0; right: 0; left: auto; bottom: auto; width: 42%; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--cyan)); }
.player-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px 28px 12px 20px; }
.player-label { margin-bottom: 4px; color: var(--cyan-bright); font: 700 8px/1 "Rajdhani", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; }
.player-line { color: #f1f8fc; font: 600 clamp(13px, 0.95vw, 18px)/1.1 "Rajdhani", sans-serif; letter-spacing: 0.025em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-ship { color: var(--cyan-bright); }
.player-sep { margin: 0 0.4em; color: var(--line); }

@media (max-width: 900px) {
  .now-playing { width: 48vw; }
  .lower-third { grid-template-columns: 150px 1fr 120px; }
  .ticker { grid-template-columns: 110px 1fr; }
  .news { grid-template-columns: 95px 1fr; }
}