:root{
  --bg:#06060a;
  --card-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --gold: #D4AF37;
  --kc-blue: #0b6fa4;
  --kc-red: #c82333;
  --muted: rgba(255,255,255,0.6);
  --accent-glow: 0 6px 30px rgba(212,175,55,0.08);
  --radius: 16px;
  --mobile-width: 360px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#04040a 0%, #0a0b11 70%);
  color:#eef2f6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  min-height:100vh;
}

/* layout - mobile first */
.player-wrap{
  width:100%;
  max-width:420px;
  aspect-ratio:9/16;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* stadium vignette */
.stadium-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 400px at 50% 10%, rgba(11,47,85,0.18), transparent 15%),
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 30%);
  z-index:0;
  pointer-events:none;
  border-radius:22px;
  box-shadow: inset 0 -30px 60px rgba(0,0,0,0.7);
}

/* card */
.player-card{
  width:100%;
  height:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:1;
  border-radius:20px;
  overflow:hidden;
}

/* glass */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  box-shadow: var(--accent-glow);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* header */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 8px;
}
.brand{display:flex;gap:10px;align-items:center}
.logo-mark{
  width:46px;height:46px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),#f2c86b);
  box-shadow: 0 6px 20px rgba(212,175,55,0.12);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#0a0a0a;font-size:14px;
}
.brand-texts .station{font-weight:700;letter-spacing:0.6px}
.brand-texts .sub{opacity:0.85;font-size:12px}
.studio{font-size:12px;color:var(--muted)}

/* live badge */
.live-badge{
  background:linear-gradient(90deg,#c82333,#ff6b6b);
  color:white;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;
  box-shadow:0 6px 16px rgba(200,40,50,0.18);
}

/* main body */
.card-body{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex:1;
  padding:10px;
}

/* left column */
.left{flex:1;display:flex;flex-direction:column;gap:10px}
.station-title .show-title{font-size:18px;font-weight:800}
.station-title .tagline{font-size:12px;color:var(--muted)}

/* waveform */
.wave-wrap{
  position:relative;height:120px;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg, rgba(11,47,85,0.06), rgba(0,0,0,0.18));
  border:1px solid rgba(255,255,255,0.02);
}
#wave{width:100%;height:100%;display:block}

/* pitch lines decorative */
.pitch-lines{position:absolute;inset:0;pointer-events:none}
.pitch-lines .half{
  position:absolute;left:4%;right:4%;top:50%;height:2px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(11,111,164,0.12), rgba(255,255,255,0.03));
  transform:translateY(-50%);
}
.pitch-lines .center-circle{
  position:absolute;left:50%;top:50%;width:72px;height:72px;border-radius:50%;
  border:2px dashed rgba(255,255,255,0.03);transform:translate(-50%,-50%);
}

/* controls */
.controls{display:flex;align-items:center;gap:12px}
.big-btn{
  width:76px;height:76px;border-radius:999px;border:none;font-size:28px;
  background:linear-gradient(180deg,var(--gold),#ffd86b);color:#071018;font-weight:800;
  box-shadow:0 12px 26px rgba(212,175,55,0.18);display:flex;align-items:center;justify-content:center;
}
.vol-row{flex:1;display:flex;align-items:center;padding-right:6px;}
input[type="range"]{-webkit-appearance:none;width:100%}
input[type="range"]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--kc-blue),var(--kc-red));border-radius:6px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:white;margin-top:-6px;box-shadow:0 6px 16px rgba(0,0,0,0.4)}
.now-playing{font-size:12px;color:var(--muted)}

/* actions */
.action-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--muted);padding:8px 10px;border-radius:10px;font-size:13px}
.pill:hover{border-color:rgba(212,175,55,0.12);color:var(--gold)}
.action-row.secondary{margin-top:6px}
.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--muted)}
.outline.primary{border-color:rgba(11,111,164,0.18);background:linear-gradient(180deg, rgba(11,111,164,0.06), rgba(200,40,50,0.02));}

/* right column */
.right{width:120px;display:flex;flex-direction:column;gap:10px;align-items:center}
.skyline{height:80px;width:100%;border-radius:10px;background:linear-gradient(180deg, rgba(11,47,85,0.12), rgba(0,0,0,0.18));display:flex;align-items:end;justify-content:center;position:relative;padding:8px}
.skyline::before{content:"";position:absolute;left:8px;right:8px;bottom:12px;height:4px;background:linear-gradient(90deg,var(--kc-blue),var(--kc-red));opacity:0.08;border-radius:2px}
.kc-text{font-size:11px;font-weight:700;color:var(--gold)}
.brand-block{font-size:12px;text-align:center;color:var(--muted)}
.qr-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.qr-placeholder{width:92px;height:92px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;border:1px dashed rgba(255,255,255,0.04)}
.qr-label{font-size:11px;color:var(--muted)}

/* ticker */
.ticker{height:36px;border-radius:10px;background:linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.02));display:flex;align-items:center;padding:6px 12px;border-top:1px solid rgba(255,255,255,0.02);overflow:hidden}
.ticker-inner{display:flex;gap:30px;white-space:nowrap;animation:scroll 18s linear infinite}
.ticker-inner span{font-size:13px;color:var(--muted)}
@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* responsive tweaks */
@media(min-width:680px){
  .player-wrap{max-width:720px;aspect-ratio:16/9}
  .right{width:220px}
  .wave-wrap{height:160px}
}

/* background video styling and dissolve */
#bgVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index: -1;
  border-radius:22px;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}

/* when video is ready to show */
#bgVideo.show{opacity:1}

/* background slideshow */
.bg-slideshow{
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:22px;
  overflow:hidden;
  pointer-events:none;
}
.bg-slideshow .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1s ease, transform 10s ease;
  will-change:opacity, transform;
  filter:contrast(0.95) saturate(1.02) brightness(0.92);
}

/* active slide visible */
.bg-slideshow .slide.active{
  opacity:1;
  transform:scale(1);
}

/* subtle pan animation on each slide */
@keyframes slowPan {
  0%{transform:scale(1.02) translate3d(0,0,0)}
  50%{transform:scale(1.05) translate3d(-1.5%, -1%, 0)}
  100%{transform:scale(1.02) translate3d(0,0,0)}
}

/* when active, apply pan */
.bg-slideshow .slide.active{
  animation: slowPan 10s ease-in-out both;
}

/* make QR image match placeholder sizing */
.qr-placeholder{width:92px;height:92px;border-radius:8px;object-fit:cover;border:1px dashed rgba(255,255,255,0.04)}

/* play button attention glow triggered after intro audio */
.big-btn.glow{
  box-shadow: 0 12px 30px rgba(212,175,55,0.28), 0 0 30px rgba(212,175,55,0.18);
  animation: glowBlink 1.6s ease-in-out 3;
}
@keyframes glowBlink{
  0%{box-shadow: 0 12px 26px rgba(212,175,55,0.12), 0 0 0 rgba(212,175,55,0)}
  30%{box-shadow: 0 16px 36px rgba(212,175,55,0.32), 0 0 40px rgba(212,175,55,0.12)}
  60%{box-shadow: 0 12px 26px rgba(212,175,55,0.18), 0 0 8px rgba(212,175,55,0.08)}
  100%{box-shadow: 0 12px 26px rgba(212,175,55,0.12), 0 0 0 rgba(212,175,55,0)}
}

/* Fan Booth modal styles */
.fan-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;z-index:40;visibility:hidden;opacity:0;transition:opacity .18s ease,visibility .18s}
.fan-modal.open{visibility:visible;opacity:1}
.fan-sheet{width:100%;max-width:420px;border-radius:14px;background:linear-gradient(180deg,#061024, #031324);border:1px solid rgba(255,255,255,0.04);box-shadow:0 30px 80px rgba(0,0,0,0.6);padding:12px}
.fan-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}
.close-x{background:transparent;border:none;color:#e6eef6;font-size:18px}
.fan-body{display:flex;flex-direction:column;gap:10px}
.rec-stage{display:flex;align-items:center;gap:12px}
.preview-vid{width:140px;height:90px;background:#000;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,0.04)}
.rec-timer{font-weight:700;color:var(--gold);font-size:14px}
.rec-controls,.rec-actions{display:flex;gap:8px;flex-wrap:wrap}
.pill.primary{background:linear-gradient(180deg,var(--gold),#ffd86b);color:#071018;font-weight:800}
.pill.outline{background:transparent;border:1px solid rgba(255,255,255,0.06)}

/* sticky neon share button and datetime badge */
.sticky-share{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:35;
  background:linear-gradient(180deg,#ff6b6b,#d44f4f);
  color:white;padding:12px 14px;border-radius:999px;font-weight:800;letter-spacing:0.6px;
  box-shadow:0 8px 40px rgba(212,40,40,0.16),0 0 40px rgba(200,40,50,0.06);
  cursor:pointer;user-select:none;border:2px solid rgba(255,255,255,0.04);
  transition:transform .12s ease,box-shadow .12s ease;
}
.sticky-share:active{transform:translateY(-50%) scale(.98)}
.sticky-share:hover{box-shadow:0 12px 46px rgba(212,40,40,0.22),0 0 60px rgba(200,40,50,0.12)}

/* neon date/time badge top-left */
.sticky-date{
  position:fixed;left:14px;top:12px;z-index:35;padding:8px 10px;border-radius:10px;
  background:rgba(10,12,20,0.6);color:#aef0ff;font-weight:700;font-size:12px;
  box-shadow:0 6px 30px rgba(10,180,240,0.06),0 0 18px rgba(10,180,240,0.06);
  border:1px solid rgba(10,180,240,0.14);
  backdrop-filter: blur(6px);
}