/* /home/hkiugcom/website.nexplay/assets/index.css */
:root{
  --bg-primary:#0a0a0f;
  --bg-secondary:#1a1a2e;
  --accent:#00d4ff;
  --accent-glow:#00d4ff20;
  --accent2:#ff6b9d;
  --text-primary:#ffffff;
  --text-secondary:#b0b0b0;
  --success:#00ff88;
  --danger:#ff4757;
  --warning:#ffaa00;
  --border-glow:0 0 20px var(--accent-glow);
  --card-bg:rgba(26,26,46,.85);
  --card-border:rgba(0,212,255,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary));
  color:var(--text-primary);
  min-height:100vh;
  overflow:hidden;
}

/* Vasemman yläkulman NexPlay-logo */
.logo{position:fixed;top:20px;left:20px;z-index:1000}
.logo img{
  height:54px;display:block;
  filter:drop-shadow(0 0 12px var(--accent-glow));
  animation:logoPulse 3s ease-in-out infinite alternate;
}
@keyframes logoPulse{
  0%{filter:drop-shadow(0 0 10px var(--accent-glow))}
  100%{filter:drop-shadow(0 0 25px var(--accent))}
}

/* Päänäkymän kolumnit */
.app-container{
  display:grid;
  grid-template-columns:380px minmax(0,1fr) 380px;
  gap:20px;
  padding:90px 20px 20px;
  height:100vh;
}

/* Kortit */
.card{
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--border-glow);
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;
}
.card-header{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;border-bottom:1px solid rgba(0,212,255,.2);
}
.card-title{font-size:1.3rem;font-weight:700;color:var(--accent)}

/* Napit */
.btn{
  padding:10px 16px;border:none;border-radius:12px;
  font-weight:600;cursor:pointer;transition:all .3s ease;
  background:rgba(255,255,255,.1);color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.2);
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{background:rgba(0,212,255,.15);transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;box-shadow:0 8px 25px var(--accent-glow);
}
.btn-primary:hover{box-shadow:0 12px 35px var(--accent-glow)}
.btn-danger{background:rgba(255,71,87,.2);color:var(--danger);border:1px solid rgba(255,71,87,.3)}

/* Week TOP 20 -kortin alaosan napit (Reset + Settings) */
.top-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  gap:8px;
}
.btn-reset-mobile{
  display:none; /* oletuksena piilossa desktopilla */
}

/* Nyt soi */
.now-playing{
  background:rgba(26,26,46,.6);backdrop-filter:blur(30px);
  border:1px solid var(--card-border);border-radius:20px;
  padding:24px;text-align:center;position:relative;overflow:hidden;
}
.now-playing::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent,var(--accent-glow),transparent);
  animation:rotate 6s linear infinite;
}
@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.np-content{position:relative;z-index:1}
.np-artist{
  font-size:1.8rem;font-weight:800;margin-bottom:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.np-title{font-size:1.2rem;color:var(--text-secondary);margin-bottom:16px}
.progress-container{
  height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:16px 0;
}
.progress-bar{
  height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;width:0%;transition:width .3s ease;
}
.time-display{
  display:flex;justify-content:space-between;font-family:'Courier New',monospace;
  color:var(--text-secondary);font-size:.9rem;
}

/* Listat */
.list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:8px}
.track-item,.hist-item{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;transition:all .3s ease;
}
.track-item:hover,.hist-item:hover{background:rgba(0,212,255,.1);transform:translateX(4px)}

.badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-track{background:rgba(0,212,255,.2);color:var(--accent);border:1px solid rgba(0,212,255,.3)}
.badge-commercial{background:rgba(255,71,87,.2);color:var(--danger);border:1px solid rgba(255,71,87,.3)}
.badge-imaging{background:rgba(255,255,255,.1);color:var(--text-secondary);border:1px solid rgba(255,255,255,.2)}
.pill{background:rgba(0,212,255,.15);color:var(--accent);padding:4px 10px;border-radius:20px;font-size:.8rem;font-weight:600;min-width:28px;text-align:center}
.clock{font-family:'Courier New',monospace;font-size:1.1rem;color:var(--accent);letter-spacing:1px;text-shadow:0 0 10px var(--accent-glow)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:2000}
.modal.show{display:flex}
.modal-content{
  background:var(--bg-secondary);border:1px solid var(--card-border);
  border-radius:20px;padding:24px;width:90%;max-width:600px;
  box-shadow:var(--border-glow);max-height:80vh;overflow-y:auto;
}
.queue-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.queue-row:last-child{border-bottom:none}

/* Laajennettava Seuraavat -kortti */
#nextQueueContainer.expanded{
  max-height:400px!important;border:1px solid rgba(0,212,255,.2);box-shadow:0 0 15px var(--accent-glow)
}

/* Drag & drop jonossa */
.next-track-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px;display:flex;justify-content:space-between;align-items:center;
  cursor:grab;transition:all .2s ease;position:relative;
}
.next-track-item:hover{background:rgba(0,212,255,.12);transform:translateX(3px)}
.next-track-item.dragging{opacity:.5;transform:rotate(3deg) scale(.98);z-index:10}
.next-track-item .track-info{flex:1;overflow:hidden}
.next-track-item .track-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-track-item .track-meta{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-track-item .duration{font-family:'Courier New',monospace;color:var(--accent);font-weight:600}

#toggleQueueBtn .btn-secondary{font-size:.85rem;padding:6px 12px}
#toggleArrow{margin-left:4px;font-size:.8em}
#nextHeader{user-select:none}
#nextHeader:hover{opacity:.8}
#nextArrow{font-size:.8rem;margin-left:4px;transition:transform .3s ease}
#previewTrack:hover{background:rgba(0,212,255,.12)!important;transform:translateX(2px)}

/* Oikea yläkulma: powered by + Airplay-logo */
.brand-right{
  position:fixed;top:20px;right:20px;z-index:1000;
  display:flex;align-items:center;gap:8px;height:46px;
}
.brand-right small{
  color:#fff;opacity:.78;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  font-size:.75rem;line-height:1;white-space:nowrap;display:block;transition:opacity .2s ease;
}
.brand-right a img{
  height:36px;display:block;opacity:.85;
  filter:drop-shadow(0 0 10px var(--accent-glow));
  transition:opacity .2s ease,filter .2s ease;
}
.brand-right:hover small,.brand-right:hover a img{opacity:1}

.card-title .clock {
  display: block;        /* rivinvaihto otsikon alle */
  font-size: 14px;       /* pienempi teksti */
  opacity: .8;           /* hillitty sävy */
  margin-top: 2px;       /* pieni väli otsikkoon */
}

/* Tablet/desktop yhden palstan layout */
@media (max-width:1250px){
  .app-container{grid-template-columns:1fr;padding:80px 16px 16px}
  .card{order:3}
  #centerCol{order:1}
  #leftCol{order:2}
}

/* Mobiili: piilota Playlist + salli pystyscrolli, skaalaa logot */
@media (max-width:900px){
  body{overflow:auto}
  .app-container{
    grid-template-columns:1fr;
    padding:72px 12px 12px;
    height:auto;min-height:100vh;
  }
  #leftCol{display:none!important}
  .logo img{height:42px}
  .brand-right{height:42px}
  .brand-right a img{height:32px;opacity:.9}
  .brand-right small{font-size:.62rem;opacity:.85}

  /* Mobiilissa Reset vasemmalle, Settings oikealle Week TOP 20:ssa */
  .top-actions{
    justify-content:space-between;
  }
  .btn-reset-mobile{
    display:inline-flex;
  }
}

/* Desktop override: hieman alemmaksi ja läpikuultavammaksi */
@media (min-width:901px){
  .brand-right{top:26px}
  .brand-right small{opacity:.66}
  .brand-right a img{opacity:.66}
  .brand-right:hover small,.brand-right:hover a img{opacity:1}
}

/* Erittäin kapeat näytöt */
@media (max-width:420px){
  .brand-right{height:36px}
  .brand-right a img{height:28px}
}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}

.history-item--jingle {
  opacity: 0.55;
}

.brand-right img {
  opacity: 0.8;              /* perusnäkyvyys hieman kirkkaampi */
  transition: opacity 0.2s ease-out;
}

.brand-right a:hover img {
  opacity: 1;                /* hoverissa täyskirkkautta */
}

/* Yleinen transition kaikille boot-animaation kohteille */
.logo,
.brand-right,
#leftCol,
#rightCol,
#leftCol .hist-item,
#rightCol .hist-item,
#centerCol {
  transition: opacity 150ms ease-out, transform 300ms ease-out;
}

/* Kun intro ei ole käynnissä, varmistetaan normaali näkyvyys */
body:not(.np-intro-running) .logo,
body:not(.np-intro-running) .brand-right,
body:not(.np-intro-running) #leftCol,
body:not(.np-intro-running) #rightCol,
body:not(.np-intro-running) #leftCol .hist-item,
body:not(.np-intro-running) #rightCol .hist-item,
body:not(.np-intro-running) #centerCol {
  opacity: 1;
  transform: none;
}

/*
 Intro käynnissä: kohteet lähtötilassa piilossa ja hieman alhaalla.
 Huom: yksittäiset elementit nostetaan näkyviin lisäämällä niille JS:llä
 luokka .np-intro-visible.
*/
body.np-intro-running .logo,
body.np-intro-running .brand-right,
body.np-intro-running #leftCol,
body.np-intro-running #rightCol,
body.np-intro-running #leftCol .hist-item,
body.np-intro-running #rightCol .hist-item,
body.np-intro-running #centerCol {
  opacity: 0;
  transform: translateY(8px);
}

/* Yleinen "nosta näkyviin" -luokka, jota animations.js lisää oikeaan elementtiin oikeaan aikaan. */
body.np-intro-running .np-intro-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Halutessa pienet erot logojen ja korttien välillä */
body.np-intro-running .logo.np-intro-visible,
body.np-intro-running .brand-right.np-intro-visible {
  transition-duration: 300ms;
}

body.np-intro-running #rightCol .hist-item.np-intro-visible,
body.np-intro-running #leftCol .hist-item.np-intro-visible {
  transition-duration: 200ms;
}

/* Now playing -kortille hieman pehmeämpi liike */
body.np-intro-running #centerCol {
  transform: translateY(12px);
}

body.np-intro-running #centerCol.np-intro-visible {
  transform: translateY(0);
  transition-duration: 300ms;
}

/*
 (Valinnainen) pieni kokonaisuuden pehmennys:
 jos haluat, että app-container "hengittää" aavistuksen intron alussa.
*/
.app-container {
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

body.np-intro-running .app-container {
  /* jätetään opacity normaaliksi, annetaan yksittäisten elementtien hoitaa animaatio */
  transform-origin: 50% 50%;
}

/* ============================ Side-boksien kevyt viive (Play history / Week TOP 20) ============================ */

body.np-side-delay #leftCol,
body.np-side-delay #rightCol {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms ease-out, transform 300ms ease-out;
}

/* Kun viiveluokka poistetaan, boksit “nousevat” paikalleen */
body:not(.np-side-delay) #leftCol,
body:not(.np-side-delay) #rightCol {
  opacity: 1;
  transform: none;
}

/* Päänäkymän kolumnit */
.app-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* Kaikki kolme lohkoa yhtä leveitä */
  gap: 20px;
  padding: 90px 20px 20px;
  height: 100vh;
}

/* Kortit */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--border-glow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

/* Vasemman, keskilohkon ja oikean lohkon tyylit */
#leftCol, #centerCol, #rightCol {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Mobiililaitteilla käytetään yhden sarakkeen layoutia */
@media (max-width: 1250px) {
  .app-container {
    grid-template-columns: 1fr;
    padding: 80px 16px 16px;
  }

  .card {
    order: 3;
  }

  #centerCol {
    order: 1;
  }

  #leftCol {
    order: 2;
  }
}

/* --- NOW PLAYING: varmistetaan että artisti, title ja progress mahtuvat --- */

.now-playing {
  display: flex;
  align-items: stretch;
  /* ei kiinteää heightia täällä */
}

.now-playing .np-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;             /* pientä väliä rivien väliin */
  width: 100%;
  min-height: 0;        /* estää flex-leikkauksia tietyissä selaimissa */
}

/* artisti + title saavat rivittyä normaalisti, eivätkä katkea */
.np-artist,
.np-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.15;
  word-break: break-word;
}

/* progress-container ei saa kadota vaikka teksti menee kahdelle riville */
.progress-container {
  margin-top: 4px;
  min-height: 4px;
}

/* pienten näyttöjen optimointi: pienennetään tekstejä mieluummin kuin leikataan */
@media (max-width: 480px) {
  .np-artist {
    font-size: min(7vw);
  }
  .np-title {
    font-size: min(4vw, 0.95rem);
  }
}
  .now-playing {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* --- Samsung Galaxy S10e (ja muut) flex-boksi -korjaus --- */
.now-playing,
.now-playing .np-content {
  height: auto !important;
  min-height: 0 !important;
}

/* Estää flexbox bugit kun teksti menee kahdelle riville */
.now-playing .np-content {
  flex-shrink: 0;
}

/* === NAPIT === */
.btn{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition:all .3s;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 35px var(--glow);
}
.btn-secondary{
  background:rgba(255,255,255,.1);
  color:var(--text2);
  border:1px solid rgba(255,255,255,.2);
}
.btn-danger{
  background:rgba(255,71,87,.2);
  color:var(--danger);
  border:1px solid rgba(255,71,87,.3);
}