/* =====================================================================
   SUPIRIMA FM — design tokens
   Palette: deep-broadcast ink / signal amber / coral pulse / teal wave
   ===================================================================== */
:root{
  --ink:        #12121A;
  --ink-2:      #1B1B26;
  --ink-3:      #24242F;
  --cream:      #FAF6EF;
  --cream-2:    #FFFFFF;
  --cream-3:    #F1EBE0;

  --amber:      #FFB238;
  --coral:      #FF6B5D;
  --teal:       #2DD4BF;
  --violet:     #8B7BFF;

  --text:       #F4F1EA;
  --text-dim:   #A9A6B8;
  --border:     rgba(244,241,234,0.10);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --font-display: "Space Grotesk", "Noto Sans Sinhala", "Noto Sans Tamil", sans-serif;
  --font-body: "Inter", "Noto Sans Sinhala", "Noto Sans Tamil", sans-serif;

  color-scheme: dark;
}

html.light{
  --text:      #211F2C;
  --text-dim:  #6B6779;
  --border:    rgba(33,31,44,0.10);
  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  transition: background-color .35s ease, color .35s ease;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
html.light body{ background: var(--cream); }

body[data-lang="si"]{ font-family: "Noto Sans Sinhala", var(--font-body); }
body[data-lang="ta"]{ font-family: "Noto Sans Tamil", var(--font-body); }

h1, h2, h3, .brand-name{ font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Background broadcast-tower watermark
--------------------------------------------------------------------- */
.bg-signal{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 82% -10%, rgba(255,178,56,0.18), transparent 45%),
    radial-gradient(circle at -10% 60%, rgba(45,212,191,0.12), transparent 40%);
}
html.light .bg-signal{
  background:
    radial-gradient(circle at 82% -10%, rgba(255,178,56,0.22), transparent 45%),
    radial-gradient(circle at -10% 60%, rgba(45,212,191,0.16), transparent 40%);
}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 64px) 8px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius: 50%;
  background: var(--ink-2); border: 1px solid var(--border);
}
html.light .brand-mark{ background: var(--cream-2); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-size: 1.25rem; font-weight: 700; }
.brand-name em{ font-style:normal; color: var(--amber); }
.brand-tag{ font-size: 0.72rem; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }

.header-controls{ display:flex; align-items:center; gap:14px; }

.lang-switch{
  display:flex; padding:4px; gap:2px;
  background: var(--ink-2); border:1px solid var(--border);
  border-radius: 999px;
}
html.light .lang-switch{ background: var(--cream-2); }
.lang-btn{
  border:none; background:transparent; color: var(--text-dim);
  font-size: .78rem; font-weight:600; padding: 7px 13px; border-radius: 999px;
  transition: all .2s ease;
}
.lang-btn.is-active{ background: var(--amber); color: #1B1300; }
.lang-btn:not(.is-active):hover{ color: var(--text); }

.theme-toggle{
  width:40px; height:40px; border-radius:50%;
  background: var(--ink-2); border:1px solid var(--border); color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s ease, background .3s ease;
}
html.light .theme-toggle{ background: var(--cream-2); }
.theme-toggle:hover{ transform: rotate(18deg); }
.icon-moon{ display:none; }
html.light .icon-sun{ display:none; }
html.light .icon-moon{ display:block; }

/* =====================================================================
   HERO / PLAYER
   ===================================================================== */
.player-hero{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px;
  padding: 40px clamp(20px, 5vw, 64px) 24px;
}
.eyebrow{
  display:inline-block; font-size: .74rem; font-weight:700; letter-spacing:.12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.player-hero-text h1{
  font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight: 700; line-height: 1.05;
  margin-bottom: 18px;
}
.hero-sub{ color: var(--text-dim); font-size: 1.02rem; max-width: 46ch; line-height:1.55; }

/* ---- Dial ---- */
.dial-wrap{ display:flex; flex-direction:column; align-items:center; gap: 22px; }
.dial{
  position: relative; width: min(320px, 78vw); aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
}
#spectrumCanvas{ position:absolute; inset:0; width:100%; height:100%; }

.dial-center{
  position: relative; z-index: 2;
  width: 58%; aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.disc{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--ink-3), var(--ink) 70%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 0 0 1px var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: transform 8s linear;
}
html.light .disc{ background: radial-gradient(circle at 35% 30%, #fff, var(--cream-3) 70%); box-shadow: 0 18px 40px rgba(140,120,90,0.22), inset 0 0 0 1px var(--border); }
.disc.spinning{ animation: spin 9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.disc-hole{
  width: 14%; aspect-ratio:1/1; border-radius:50%;
  background: var(--ink); border: 3px solid var(--amber);
}
html.light .disc-hole{ background: var(--cream); }

.play-btn{
  position:absolute; z-index:3; width: 68px; height:68px; border-radius:50%;
  background: var(--amber); border: none; color:#1B1300;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(255,178,56,0.35);
  transition: transform .15s ease;
}
.play-btn:hover{ transform: scale(1.06); }
.play-btn:active{ transform: scale(0.96); }
.play-btn .icon-play{ margin-left: 3px; }

.now-playing{ text-align:center; max-width: 320px; }
.np-status{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; color: var(--text-dim);
}
.dot{ width:8px; height:8px; border-radius:50%; background: var(--text-dim); }
.dot.live{ background: var(--coral); box-shadow: 0 0 0 0 rgba(255,107,93,0.6); animation: pulse 1.6s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,107,93,0.55); }
  70%{ box-shadow: 0 0 0 9px rgba(255,107,93,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,107,93,0); }
}
#npName{ font-size: 1.5rem; margin-bottom: 4px; }
.np-meta{ color: var(--amber); font-weight:600; font-size:.88rem; margin-bottom:10px; }
.np-meta .sep{ color: var(--text-dim); margin: 0 6px; }
.np-desc{ color: var(--text-dim); font-size: .86rem; line-height:1.5; min-height: 2.6em; }

.volume-row{ display:flex; align-items:center; gap:10px; margin-top:14px; color: var(--text-dim); }
.volume-row input[type="range"]{
  flex:1; height:4px; border-radius:2px; appearance:none; background: var(--border);
  accent-color: var(--amber);
}

/* =====================================================================
   FILTER BAR
   ===================================================================== */
.filter-bar{
  position: relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding: 34px clamp(20px, 5vw, 64px) 14px;
}
.filter-bar h3{ font-size: 1.05rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem;}
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--border); background: var(--ink-2); color: var(--text-dim);
  padding: 8px 16px; border-radius: 999px; font-size:.85rem; font-weight:600;
  transition: all .2s ease;
}
html.light .chip{ background: var(--cream-2); }
.chip.is-active{ background: var(--teal); color:#062522; border-color: transparent; }
.chip:not(.is-active):hover{ color: var(--text); border-color: var(--amber); }

/* =====================================================================
   CHANNEL GRID  ("kotu kotu" cards)
   ===================================================================== */
.channel-grid{
  position: relative; z-index:1;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 10px clamp(20px, 5vw, 64px) 20px;
}
.channel-card{
  position:relative; overflow:hidden;
  background: var(--ink-2); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; text-align:left; color: var(--text);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html.light .channel-card{ background: var(--cream-2); }
.channel-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--accent, var(--amber));
}
.channel-card:hover{ transform: translateY(-3px); border-color: var(--accent, var(--amber)); }
.channel-card.is-playing{
  border-color: var(--accent, var(--amber));
  box-shadow: 0 0 0 1px var(--accent, var(--amber)), 0 14px 30px rgba(0,0,0,0.25);
}

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-freq{
  font-family: var(--font-display); font-weight:700; font-size:.78rem;
  color: var(--accent, var(--amber)); background: color-mix(in srgb, var(--accent, var(--amber)) 16%, transparent);
  padding:4px 9px; border-radius: 999px; white-space:nowrap;
}
.card-lang-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-dim);
}
.card-name{ font-size: 1.12rem; font-weight:700; }
.card-genre{ font-size:.8rem; color: var(--text-dim); }
.card-play{
  margin-top:auto; align-self:flex-start; display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--border); color: var(--text);
  padding: 7px 14px; border-radius:999px; font-size:.8rem; font-weight:600;
  transition: all .2s ease;
}
.channel-card:hover .card-play{ border-color: var(--accent, var(--amber)); color: var(--accent, var(--amber)); }
.card-play .mini-bars{ display:flex; align-items:flex-end; gap:2px; height:10px; }
.card-play .mini-bars span{ width:2px; background: currentColor; border-radius:1px; opacity:.5; }
.channel-card.is-playing .mini-bars span{ opacity:1; animation: bounce 900ms ease-in-out infinite; }
.channel-card.is-playing .card-play{ border-color: var(--accent, var(--amber)); color: var(--accent, var(--amber)); }
.mini-bars span:nth-child(1){ height:40%; animation-delay: 0ms; }
.mini-bars span:nth-child(2){ height:100%; animation-delay: 150ms; }
.mini-bars span:nth-child(3){ height:65%; animation-delay: 300ms; }
@keyframes bounce{ 0%,100%{ transform: scaleY(0.4);} 50%{ transform: scaleY(1);} }

.empty-state{
  text-align:center; color: var(--text-dim); padding: 40px 20px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  position: relative; z-index:1;
  padding: 30px clamp(20px, 5vw, 64px) 50px; color: var(--text-dim); font-size:.78rem;
  border-top: 1px solid var(--border); margin-top: 30px;
}
.site-footer code{
  background: var(--ink-2); padding: 2px 6px; border-radius:6px; font-size: .76rem;
}
html.light .site-footer code{ background: var(--cream-3); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px){
  .player-hero{ grid-template-columns: 1fr; text-align:center; }
  .player-hero-text{ order: 2; }
  .hero-sub{ margin: 0 auto; }
  .dial-wrap{ order: 1; }
}
@media (max-width: 520px){
  .site-header{ flex-direction:column; gap:14px; align-items:flex-start; }
  .filter-bar{ flex-direction:column; align-items:flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .disc.spinning{ animation: none; }
  .dot.live{ animation: none; }
  .channel-card.is-playing .mini-bars span{ animation: none; }
}