/* ── reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000008;
  font-family:'Georgia',serif;color:#aac4ff}

/* ── canvas ── */
#glCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}

/* ── loading ── */
#loadingOverlay{
  position:absolute;inset:0;background:rgba(0,0,12,.97);z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;transition:opacity .8s}
#loadingOverlay .logo{font-size:30px;letter-spacing:6px;color:#ffd700;
  text-shadow:0 0 40px rgba(255,215,0,.5)}
#loadingOverlay .sub{font-size:12px;letter-spacing:3px;color:rgba(140,175,255,.7)}
#loadBar{width:280px;height:2px;background:rgba(80,130,255,.2);border-radius:2px;overflow:hidden}
#loadFill{height:100%;background:linear-gradient(90deg,#3366ff,#88ccff);width:0;transition:width .4s}
#loadMsg{font-size:11px;color:rgba(120,160,255,.6);letter-spacing:1px}

/* ── top bar ── */
#topBar{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;gap:10px;align-items:center;
  background:rgba(2,5,28,.78);border:1px solid rgba(80,130,255,.25);
  border-radius:28px;padding:7px 20px;
  backdrop-filter:blur(10px);box-shadow:0 0 30px rgba(30,60,200,.15)}

/* allow children (expanded selects) to overflow outside the top bar */
#topBar{overflow:visible}
#topBar label{font-size:11px;color:rgba(140,170,255,.65);letter-spacing:1px;white-space:nowrap}


/* ── Song autocomplete widget ── */
.songSearchWrap{position:relative;display:inline-block}
#filterInput{background:rgba(2,5,30,.9);color:#8ab8ff;border:1px solid rgba(80,130,255,.35);border-radius:12px;padding:4px 12px;font-size:12px;outline:none;width:220px}
#filterInput::placeholder{color:rgba(100,140,200,.45)}
#songSuggestions{
  position:absolute;left:0;top:calc(100% + 4px);z-index:100;
  background:rgba(2,5,30,.96);border:1px solid rgba(80,130,255,.35);
  border-radius:10px;width:100%;max-height:280px;overflow-y:auto;
  box-shadow:0 8px 30px rgba(10,20,60,.5)
}
.song-suggestion{
  padding:7px 12px;color:#8ab8ff;font-size:12px;font-family:Georgia,serif;
  cursor:pointer;border-bottom:1px solid rgba(80,130,255,.1)
}
.song-suggestion:last-child{border-bottom:none}
.song-suggestion:hover{background:rgba(20,50,120,.5);color:#ddeeff}

/* ── compass ── */
#compassWrap{
  position:absolute;top:50%;right:24px;transform:translateY(-50%);
  z-index:20;user-select:none}
#compassCanvas{display:block;cursor:crosshair;filter:drop-shadow(0 0 18px rgba(80,130,255,.3))}
#compassHint{text-align:center;font-size:9px;letter-spacing:2px;
  color:rgba(180,160,90,.55);text-transform:uppercase;margin-top:3px}
#btnOrientCompass{
  display:block;width:90%;margin:5px auto 0;
  background:rgba(4,10,45,.85);color:rgba(180,160,90,.75);
  border:1px solid rgba(180,140,20,.35);border-radius:12px;
  padding:4px 12px;font-size:10px;cursor:pointer;font-family:Georgia,serif;
  letter-spacing:.5px;text-transform:uppercase;transition:all .2s}
#btnOrientCompass:hover{background:rgba(4,10,45,1);border-color:rgba(255,210,50,.55)}
#btnOrientCompass.active{color:#ffe066;border-color:rgba(255,215,0,.55);box-shadow:0 0 8px rgba(255,200,0,.2)}

/* ── dual song card panel ── */
#songCards{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;gap:10px;align-items:stretch}
.song-card{
  background:rgba(1,4,28,.82);border:1px solid rgba(80,130,255,.22);
  border-radius:12px;padding:9px 12px;min-width:180px;max-width:220px;
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:4px}
.song-card.card-user { border-color:rgba(100,200,255,.3) }
.song-card.card-compass { border-color:rgba(255,200,60,.28) }
.card-label{
  font-size:8px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:1px}
.card-user .card-label   { color:rgba(100,200,255,.65) }
.card-compass .card-label{ color:rgba(255,200,60,.65) }
.card-title{
  font-size:12px;color:#ddeeff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.card-sub{
  font-size:10px;color:rgba(120,155,220,.7);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.card-dist{ font-size:9px;color:rgba(100,140,200,.55);font-style:italic }
.card-empty{ color:rgba(80,110,180,.4);font-size:11px;font-style:italic }
.card-compass.warn-dist { border-color:rgba(220,50,50,.45) }
.card-compass.warn-dist .card-dist { color:#ff7070 }
.card-btns{ display:flex;gap:6px;margin-top:4px }
.card-btns button{
  flex:1;padding:4px 6px;border-radius:8px;border:1px solid;
  cursor:pointer;font-size:10px;font-family:Georgia,serif;
  transition:all .18s;white-space:nowrap}
.btn-add-user{
  background:rgba(20,80,160,.55);border-color:rgba(80,160,255,.55);color:#88ccff}
.btn-add-user:hover{background:rgba(20,80,160,.9);border-color:#88ccff}
.btn-add-compass{
  background:rgba(80,50,10,.55);border-color:rgba(255,180,40,.5);color:#ffd060}
.btn-add-compass:hover{background:rgba(80,50,10,.9);border-color:#ffd060}
.btn-fly{
  background:transparent;border-color:rgba(80,130,255,.3);color:rgba(140,170,255,.7);
  padding:4px 8px !important;flex:0 !important}
.btn-fly:hover{border-color:rgba(140,180,255,.6);color:#aaccff}
btn:disabled,.card-btns button:disabled{opacity:.28;cursor:default}

/* ── action strip (re-center + random) ── */
#actionStrip{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;gap:8px;align-items:center}
.act-btn{
  background:rgba(2,5,28,.8);border:1px solid rgba(80,130,255,.3);
  border-radius:20px;padding:5px 14px;font-size:11px;color:rgba(140,170,255,.8);
  cursor:pointer;font-family:Georgia,serif;letter-spacing:.3px;
  backdrop-filter:blur(8px);transition:all .2s;white-space:nowrap}
.act-btn:hover{background:rgba(20,40,100,.85);color:#aaccff;border-color:rgba(120,160,255,.55)}

/* ── hover card ── */
#hoverCard{
  position:absolute;pointer-events:none;z-index:50;
  background:rgba(1,4,28,.88);border:1px solid rgba(80,130,255,.3);
  border-radius:10px;padding:7px 12px;max-width:230px;
  backdrop-filter:blur(10px);transition:opacity .1s}
#hoverCard.hidden{display:none}
#hidden{display:none}

/* Utility hidden class used by several panels */
.hidden{display:none}

/* Orchestra filter panel (dropdown) */
#orchFilterPanel{
  position:absolute;
  z-index:30;
  background:rgba(2,5,28,.94);
  border:1px solid rgba(80,130,255,.22);
  border-radius:8px;
  padding:8px;
  max-height:360px;overflow:auto;
}
/* Make each orchestra checkbox stack vertically and match the "choose" dropdown styling */
#orchFilterPanel label{
  display:block;
  font-size:12px;
  color:#8ab8ff;
  font-family:Georgia,serif;
  padding:6px 4px;
  cursor:pointer;
}
#orchFilterPanel input[type=checkbox]{
  margin-right:8px;transform:translateY(1px)
}

/* Ensure the "All orchestras" row has no white background and matches panel style */
.orch-all-row{background:transparent;padding:4px 2px;margin-bottom:6px}
.orch-all-row label{color:#8ab8ff;font-size:12px;font-family:Georgia,serif}

/* Make rotate button match dropdown styling (no white background) */
#btnRotate{
  background:rgba(2,5,28,.8);border:1px solid rgba(80,130,255,.3);
  color:rgba(140,170,255,.8);font-size:11px;padding:6px 10px;border-radius:18px;
}

/* Match orchestra filter button to topBar buttons (no white background) */
#orchFilterBtn{
  background:rgba(2,5,28,.8);border:1px solid rgba(80,130,255,.3);
  color:rgba(140,170,255,.85);padding:6px 10px;border-radius:18px;cursor:pointer;font-size:12px
}
#orchFilterBtn:hover{background:rgba(20,40,100,.85);color:#aaccff}
.hc-title{font-size:12px;color:#ddeeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-sub{font-size:10px;color:rgba(120,155,220,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* Playlist panel (bottom-left) */
#playlistPanel{
  position:absolute;left:14px;bottom:14px;z-index:20;
  width:260px;max-height:380px;overflow:auto;
  background:rgba(1,4,28,.86);border:1px solid rgba(80,130,255,.22);
  border-radius:10px;padding:10px;backdrop-filter:blur(8px)
}
#playlistPanel{font-family:Georgia,serif;color:#8ab8ff;font-size:12px}
#playlistPanel h3{font-size:13px;margin-bottom:6px;color:#ffd060;position:sticky;top:0;background:rgba(1,4,28,.86);z-index:5;padding-bottom:6px}

/* Make the items area scrollable while header remains visible */
#playlistItems{max-height:240px;overflow:auto}
#plFooter{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
#plCount{font-size:12px;color:rgba(170,200,255,.85)}

/* Style playlist footer buttons to match dropdown/rotate button (no white background) */
#btnDownloadCsv,#btnClearPlaylist{
  background:rgba(2,5,28,.8);border:1px solid rgba(80,130,255,.3);
  color:rgba(140,170,255,.8);padding:6px 8px;border-radius:8px;cursor:pointer;
  font-family:Georgia,serif;font-size:12px
}
#btnDownloadCsv:hover,#btnClearPlaylist:hover{background:rgba(20,40,100,.85);color:#aaccff}

/* Playlist item spacing & appearance to match songSelect options */
.pl-item{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
  color:#8ab8ff;font-size:12px;cursor:pointer
}
.pl-item:hover{background:rgba(20,40,100,.06)}
.pl-del{color:rgba(200,120,120,.9);margin-right:6px;flex:0}
.pl-num{color:rgba(140,170,255,.7);flex:0;margin-right:6px;width:28px;text-align:right}
.pl-item.dragging{opacity:.6}
.pl-item.drag-over{outline:2px dashed rgba(140,170,255,.25);background:rgba(20,40,100,.06)}

/* Minimap decorative frame (overlay above canvas, top-left) */
#minimapFrame{
  position:absolute;left:10px;top:10px;z-index:10;
  width:280px;height:200px;padding:6px;border-radius:8px;
  pointer-events:none;display:flex;align-items:flex-start;gap:8px;
  color:rgba(200,220,255,.75);font-size:11px;
}
#minimapFrame span{margin-top:4px}

/* Threshold + Zoom panels */
#threshPanel{
  position:absolute;right:14px;top:80px;z-index:20;
  background:rgba(1,4,28,.86);border:1px solid rgba(80,130,255,.22);
  border-radius:10px;padding:8px;color:#ddeeff;font-size:12px
}
#threshRow{display:flex;align-items:center;gap:8px;margin-top:6px}

#threshRow input[type=range]{width:160px}

/* Confirm modal overlay */
#confirmOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:260}
#confirmOverlay.open{display:flex}
#confirmBox{background:rgba(1,4,28,.98);border:1px solid rgba(80,130,255,.22);border-radius:10px;padding:16px;min-width:260px;max-width:92%;color:#ddeeff}
#confirmBox h4{margin-bottom:8px;font-size:14px}
#confirmBox p{color:rgba(180,200,255,.85);font-size:13px}
#confirmBtns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.conf-btn{background:transparent;border:1px solid rgba(80,130,255,.28);color:#8ab8ff;padding:6px 10px;border-radius:8px;cursor:pointer}
.conf-btn:hover{background:rgba(20,40,100,.85);color:#aaccff}