:root {
  --saffron: #ff5a1f;
  --marigold: #ffbd32;
  --cream: #fff1d2;
  --ink: #160d09;
  --glass: rgba(28, 16, 10, 0.66);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background: var(--ink);
  font-family: "DM Sans", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(180deg, #49130d 0%, #a52c12 43%, #ef7221 72%, #1b0d08 100%); }
.sun { position: absolute; width: min(70vw, 850px); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 44%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ffd984 0 25%, #ff8a34 48%, rgba(239,75,26,.26) 68%, transparent 70%); filter: blur(3px); opacity: .92; }
.grain { position: absolute; inset: -50%; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); animation: grain .35s steps(2) infinite; }
.rays { position: absolute; width: 130vmax; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .13; background: repeating-conic-gradient(from 8deg, #ffd67a 0deg 7deg, transparent 7deg 18deg); mask-image: radial-gradient(circle, transparent 0 8%, black 28% 100%); }
.skyline { position: absolute; inset: auto 0 0; height: 23vh; opacity: .5; background: linear-gradient(135deg, transparent 0 47%, #160d09 48% 52%, transparent 53%) 0 100%/110px 100%, linear-gradient(45deg, transparent 0 47%, #160d09 48% 52%, transparent 53%) 55px 100%/110px 100%; }
.skyline--front { height: 14vh; opacity: .85; transform: scaleX(1.2); filter: blur(.3px); }

.topbar { position: fixed; z-index: 10; inset: 0 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.local-time { width: 110px; font-variant-numeric: tabular-nums; }
.listeners { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; background: rgba(20,8,5,.24); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); padding: 8px 13px; border-radius: 999px; white-space: nowrap; }
.listeners > span:last-child { opacity: .66; font-weight: 500; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #73ff90; box-shadow: 0 0 12px #73ff90; }
.live-dot span { position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 1.6s ease-out infinite; }
.playlist-link { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(18,8,4,.18); backdrop-filter: blur(12px); transition: .2s ease; }
.playlist-link:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.playlist-link svg { width: 18px; fill: currentColor; }
.arrow { opacity: .5; }

main { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 13vh 24px 9vh; }
.brand { text-align: center; filter: drop-shadow(0 8px 30px rgba(33,6,0,.45)); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--marigold); font: 600 13px "Anek Devanagari", sans-serif; letter-spacing: .17em; }
.eyebrow span { width: 34px; height: 1px; background: currentColor; }
h1 { margin: 9px 0 0; font-family: "Archivo Black", sans-serif; font-size: clamp(54px, 9vw, 118px); line-height: .73; letter-spacing: -.075em; transform: skewY(-3deg); }
h1 span { display: block; }
h1 span:last-child { color: var(--marigold); -webkit-text-stroke: 1px rgba(75,17,5,.25); }
.brand p { margin: 19px 0 0; font: 600 clamp(15px, 2vw, 20px) "Anek Devanagari", sans-serif; letter-spacing: .08em; }

.player-card { position: relative; width: min(720px, 100%); min-height: 120px; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 20px; padding: 13px 18px 13px 13px; border-radius: 30px; background: linear-gradient(120deg, rgba(32,14,8,.77), rgba(68,25,11,.48)); border: 1px solid rgba(255,238,203,.2); box-shadow: 0 22px 70px rgba(22,5,1,.42), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(24px) saturate(130%); }
.player-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 32%); }
.hidden-player { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: .001; pointer-events: none; }
.record-wrap { width: 96px; height: 96px; display: grid; place-items: center; }
.record { position: relative; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; border: 4px solid #25120d; box-shadow: 0 7px 24px rgba(0,0,0,.43); animation: spin 9s linear infinite paused; }
.record.is-spinning { animation-play-state: running; }
.record::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 5px, rgba(255,255,255,.08) 6px, transparent 7px); }
.record img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); }
.record-hole { position: absolute; z-index: 2; width: 13px; height: 13px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #1b0c08; border: 2px solid rgba(255,238,203,.65); }
.track-panel { min-width: 0; }
.now-playing { display: block; margin-bottom: 6px; color: var(--marigold); font: 600 10px "Anek Devanagari", sans-serif; text-transform: uppercase; letter-spacing: .13em; }
.track-panel h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.track-panel p { margin: 4px 0 12px; opacity: .62; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.timeline { width: 100%; }
.seek { position: relative; display: block; width: 100%; height: 12px; padding: 0; border: 0; cursor: pointer; background: transparent; }
.seek::before { content: ""; position: absolute; inset: 5px 0; border-radius: 10px; background: rgba(255,255,255,.16); }
.seek-fill { position: absolute; z-index: 1; left: 0; top: 5px; width: 0; height: 2px; border-radius: 10px; background: var(--marigold); }
.seek-thumb { position: absolute; z-index: 2; left: 0; top: 1px; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: var(--cream); opacity: 0; transition: opacity .15s; }
.seek:hover .seek-thumb { opacity: 1; }
.times { display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; opacity: .45; font-variant-numeric: tabular-nums; }
.controls { display: flex; align-items: center; gap: 4px; }
.control { display: grid; place-items: center; border: 0; color: var(--cream); cursor: pointer; transition: .17s ease; }
.control svg { width: 20px; fill: currentColor; }
.control:hover { transform: scale(1.08); }
.control:active { transform: scale(.94); }
.control:disabled { opacity: .45; cursor: wait; }
.secondary { width: 38px; height: 38px; border-radius: 50%; background: transparent; opacity: .72; }
.secondary:hover { background: rgba(255,255,255,.08); opacity: 1; }
.play { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--ink); box-shadow: 0 8px 25px rgba(0,0,0,.3); }
.pause-icon { display: none; }
.play.is-playing .play-icon { display: none; }
.play.is-playing .pause-icon { display: block; }

.signoff { width: min(720px, 100%); margin-top: 15px; text-align: center; filter: drop-shadow(0 3px 12px rgba(20,5,1,.45)); }
.marathi-line { min-height: 25px; margin: 0; color: var(--cream); font-family: "Anek Devanagari", "DM Sans", sans-serif; font-size: clamp(15px, 2vw, 18px); font-weight: 700; letter-spacing: .02em; transition: opacity .35s ease, transform .35s ease; }
.marathi-line.is-changing { opacity: 0; transform: translateY(6px); }
.made-with-love { margin: 3px 0 0; color: rgba(255,241,210,.5); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.made-with-love span { display: inline-block; margin: 0 2px; color: var(--marigold); font-size: 12px; animation: heartbeat 1.8s ease-in-out infinite; }

footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; color: rgba(255,241,210,.45); font: 600 11px "Anek Devanagari", sans-serif; letter-spacing: .12em; white-space: nowrap; }
footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--saffron); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 35px; transform: translate(-50%, 20px); padding: 10px 15px; border-radius: 999px; color: var(--ink); background: var(--cream); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: .3s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(2%,-1%); } 50% { transform: translate(-1%,2%); } 75% { transform: translate(1%,1%); } }
@keyframes heartbeat { 0%, 42%, 100% { transform: scale(1); } 15% { transform: scale(1.24); } 28% { transform: scale(1.08); } }

@media (max-width: 650px) {
  .topbar { padding: 17px 16px; }
  .local-time { width: auto; }
  .playlist-link span:not(.arrow) { display: none; }
  .playlist-link .arrow { display: none; }
  main { padding: 14vh 15px 10vh; }
  h1 { font-size: clamp(52px, 18vw, 84px); line-height: .76; }
  .brand p { margin-top: 14px; }
  .player-card { grid-template-columns: 74px 1fr; gap: 14px; padding: 12px; border-radius: 25px; }
  .record-wrap { width: 74px; height: 74px; }
  .record { width: 70px; height: 70px; }
  .controls { grid-column: 1 / -1; justify-content: center; margin-top: -2px; }
  .track-panel h2 { font-size: 15px; }
  .signoff { margin-top: 11px; }
  .marathi-line { min-height: 22px; font-size: 14px; }
  footer { bottom: 13px; gap: 7px; font-size: 9px; }
}

@media (max-height: 700px) and (min-width: 651px) {
  main { padding-top: 12vh; padding-bottom: 7vh; }
  h1 { font-size: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}