/* HTR Radio v2 */
:root {
  --dark:#0a0908;--dark2:#131110;--dark3:#1c1a18;
  --gold:#c8922a;--gold-lt:#e8b44a;--rust:#c41a1a;
  --cream:#f2ede3;--tan:#b8a898;--muted:#6b6058;
  --border:rgba(200,146,42,0.15);
  --accent:#c8922a;--glow:rgba(200,146,42,0.35);
  --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;height:-webkit-fill-available;}
body{
  height:100%;height:-webkit-fill-available;
  overflow:hidden;
  background:var(--dark);color:var(--cream);
  font-family:'Barlow',sans-serif;font-weight:300;
  -webkit-tap-highlight-color:transparent;user-select:none;
}

/* BG */
#bg-art{position:fixed;inset:0;background-size:cover;background-position:center;transition:background-image .8s,filter .8s;filter:blur(40px) brightness(.3) saturate(1.4);transform:scale(1.1);z-index:0;}
.bg-overlay{position:fixed;inset:0;background:linear-gradient(to bottom,rgba(10,9,8,.6) 0%,rgba(10,9,8,.85) 60%,rgba(10,9,8,.98) 100%);z-index:1;}
.grain{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:999;}

/* APP */
.app{
  position:fixed;
  top:0;left:0;right:0;
  bottom:calc(var(--tab-h) + var(--safe-b));
  z-index:10;overflow:hidden;
}

/* VIEWS */
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;display:none;flex-direction:column;-webkit-overflow-scrolling:touch;}
.view.active{display:flex;}

/* ── NOW PLAYING ── */
.view--nowplaying{
  padding:1rem 1.5rem;
  padding-top:max(1rem,env(safe-area-inset-top,1rem));
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

.np-header{width:100%;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.np-station-pill{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:100px;padding:.3rem .85rem .3rem .6rem;font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.np-station-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 6px var(--glow);animation:pdot 2s ease-in-out infinite;}
@keyframes pdot{0%,100%{opacity:1}50%{opacity:.4}}
.icon-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,.06);border-radius:50%;color:var(--tan);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;flex-shrink:0;}
.icon-btn:hover{background:rgba(255,255,255,.12);color:var(--cream);}

/* Art */
.np-art-wrap{position:relative;width:min(280px,65vw);aspect-ratio:1;flex-shrink:0;}
.np-art-shadow{position:absolute;inset:10%;bottom:-15%;border-radius:12px;background:var(--glow);filter:blur(30px);opacity:.7;}
.np-art{position:relative;width:100%;height:100%;object-fit:cover;border-radius:8px;background:var(--dark3);box-shadow:0 20px 60px rgba(0,0,0,.8);display:block;}
.np-art-shimmer{position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;}

/* Casey */
.np-casey{display:none;align-items:center;gap:.4rem;font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);flex-shrink:0;}
.np-casey.visible{display:flex;}
.np-casey-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pdot 1s ease-in-out infinite;}

/* Info */
.np-info{width:100%;text-align:center;flex-shrink:0;}
.np-track{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.04em;color:var(--cream);line-height:1;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.np-artist{font-family:'Barlow Condensed',sans-serif;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem;}
.np-album{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Progress */
.np-progress-wrap{width:100%;flex-shrink:0;}
.np-progress-bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;position:relative;cursor:pointer;margin-bottom:.4rem;}
.np-progress-fill{height:100%;background:linear-gradient(to right,var(--rust),var(--gold));border-radius:2px;width:0%;transition:width .5s linear;}
.np-progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--cream);left:0%;box-shadow:0 0 6px rgba(0,0,0,.6);transition:left .5s linear;}
.np-times{display:flex;justify-content:space-between;font-size:.65rem;color:var(--muted);}

/* Controls */
.np-controls{display:flex;align-items:center;justify-content:center;gap:2rem;flex-shrink:0;}
.ctrl-btn{border:none;background:transparent;color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .1s;}
.ctrl-btn:active{transform:scale(.9);}
.ctrl-btn--sm{color:var(--tan);}
.ctrl-btn--play{width:64px;height:64px;border-radius:50%;background:var(--cream);color:var(--dark);box-shadow:0 0 20px var(--glow);transition:transform .15s,box-shadow .2s;}
.ctrl-btn--play:hover{transform:scale(1.05);}

/* Station strip - now playing */
.np-stations-strip{
  width:100%;
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.25rem 0 .5rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;
}
.np-stations-strip::-webkit-scrollbar{display:none;}
.strip-btn{
  flex-shrink:0;
  width:72px;height:72px;
  border-radius:10px;
  border:2px solid transparent;
  background:var(--dark3);
  cursor:pointer;
  transition:border-color .2s,transform .15s;
  overflow:hidden;position:relative;
}
.strip-btn.active{border-color:var(--accent);box-shadow:0 0 10px var(--glow);}
.strip-btn.active::after{content:'';position:absolute;inset:0;background:rgba(200,146,42,.15);}
.strip-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;}

/* ── STATIONS VIEW ── */
.view--stations{background:var(--dark);}
.stations-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;padding-top:max(1rem,env(safe-area-inset-top,1rem));background:rgba(10,9,8,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);flex-shrink:0;}
.stations-logo{display:flex;align-items:center;gap:.6rem;}
.stations-logo-img{height:28px;width:auto;}
.stations-logo-text{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.1em;}

/* Grid - 3 columns desktop, 2 mobile */
.stations-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
  padding:1rem;
}

/* Cards - 1x1 */
.station-card{
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:1/1;
  position:relative;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  background:var(--dark3);
  border:1px solid rgba(255,255,255,.06);
}
.station-card:active{transform:scale(.97);}
.station-card.active{border-color:var(--accent);box-shadow:0 0 16px var(--glow);}
.station-card-art{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s;}
.station-card:hover .station-card-art{transform:scale(1.04);}
.station-card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.88) 100%);}
.station-card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.station-card-placeholder-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;}
.placeholder-icon{font-size:2.5rem;opacity:.5;}
.placeholder-color{position:absolute;inset:0;opacity:.15;}
.station-card-body{position:absolute;bottom:0;left:0;right:0;padding:.6rem .75rem .75rem;}
.station-card-name{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.04em;color:var(--cream);line-height:1;margin-bottom:.15rem;}
.station-card-genre{font-family:'Barlow Condensed',sans-serif;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.3;}
.station-card-badge{position:absolute;top:.5rem;right:.5rem;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);display:none;}
.station-card.active .station-card-badge{display:block;}
.station-card-playing{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:.1em;color:var(--accent);margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── TAB BAR ── */
.tab-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(10,9,8,.95);border-top:1px solid var(--border);
  backdrop-filter:blur(20px);
  display:flex;z-index:100;
}
.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .2s;font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;}
.tab-btn.active{color:var(--accent);}
.tab-btn svg{transition:transform .15s;}
.tab-btn.active svg{transform:scale(1.1);}

/* ── DESKTOP overrides ── */
@media(min-width:768px){
  .np-art-wrap{width:320px;}
  .strip-btn{width:80px;height:80px;}
  .stations-grid{grid-template-columns:repeat(4,1fr);}
  .station-card-name{font-size:1.2rem;}
}

/* ── MOBILE overrides ── */
@media(max-width:580px){
  .stations-grid{grid-template-columns:repeat(2,1fr);}
  .strip-btn{width:60px;height:60px;}
}