/* =========================
   MENU TROLL (prive)
   Volontairement dans une esthetique differente du reste du site
   (look "console debug") pour bien signaler que c'est un outil a part.
========================= */
.trollPanel{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  width: min(780px, calc(100vw - 32px));
  max-height: 74vh;
  display: none;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(255,90,90,.35);
  background: rgba(8,6,10,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  font-family: "Consolas", "Courier New", monospace;
  color: rgba(219,219,219,.90);
  overflow: hidden;
  /* panneau technique : la casse reelle des donnees (UID, seeds) doit
     rester lisible telle quelle, sans suivre la regle "tout en
     majuscules" du reste du site (body{text-transform:uppercase}) */
  text-transform: none;
}
.trollPanel.is-open{ display: flex; }

.trollPanel__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,90,90,.14);
  border-bottom: 1px solid rgba(255,90,90,.30);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255,140,140,.95);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.trollPanel__head:active{ cursor: grabbing; }
.trollPanel__headBtns{
  display: flex;
  gap: 6px;
}
.trollPanel__minimize,
.trollPanel__close{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,90,90,.35);
  background: rgba(0,0,0,.30);
  color: rgba(255,140,140,.95);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.trollPanel__minimize:hover,
.trollPanel__close:hover{
  border-color: rgba(255,190,90,.55);
  background: rgba(255,190,90,.14);
}

/* panneau reduit : ne garde que l'en-tete, comme une fenetre minimisee.
   L'etat (salle/effet selectionnes, ecouteurs Firebase) reste actif en
   arriere-plan — reduire ne ferme rien, ca cache juste l'affichage. */
.trollPanel.is-minimized{
  width: auto;
  max-height: none;
}
.trollPanel.is-minimized .trollPanel__uid,
.trollPanel.is-minimized .trollPanel__body{
  display: none;
}
.trollPanel.is-minimized .trollPanel__head{
  border-bottom: none;
  border-radius: 14px;
  cursor: pointer;
}
.trollPanel.is-minimized .trollPanel__minimize{
  border-color: rgba(61,206,97,.45);
  color: rgba(163,255,183,.95);
}

.trollPanel__uid{
  padding: 14px;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(219,219,219,.75);
}
.trollPanel__uidValue{
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: rgba(255,190,90,.95);
  word-break: break-all;
  font-size: 11px;
}
.trollPanel__uid button{
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.20);
  background: rgba(255,255,255,.06);
  color: rgba(219,219,219,.90);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.trollPanel__uid button:hover{ border-color: rgba(61,206,97,.45); }

.trollPanel__body{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.trollPanel__col{
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(8,6,10,.96);
  padding: 10px;
  overflow-y: auto;
}

.trollPanel__title{
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: .10em;
  color: rgba(219,219,219,.55);
}
.trollPanel__title span{ color: rgba(255,190,90,.90); }

.trollPanel__hint{
  margin: 0;
  font-size: 11px;
  color: rgba(219,219,219,.40);
}

.trollRoomsTools{
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.trollRoomsTools input{
  width: 52px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.92);
  font-family: inherit;
  font-size: 11px;
}
.trollRoomsTools button{
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,190,90,.30);
  background: rgba(255,190,90,.08);
  color: rgba(255,190,90,.90);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: .03em;
  cursor: pointer;
}
.trollRoomsTools button:hover{ border-color: rgba(255,190,90,.60); background: rgba(255,190,90,.16); }

.trollRooms{
  display: grid;
  gap: 6px;
}
.trollRoom{
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.trollRoom__main{
  flex: 1;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(255,255,255,.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}
.trollRoom__main:hover{ border-color: rgba(255,190,90,.35); }
.trollRoom.is-selected .trollRoom__main{
  border-color: rgba(255,90,90,.60);
  background: rgba(255,90,90,.12);
}
.trollRoom__seed{
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,190,90,.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trollRoom__badge{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(90,170,255,.35);
  background: rgba(90,170,255,.10);
  color: rgba(160,205,255,.90);
  font-size: 8px;
  letter-spacing: .04em;
  vertical-align: middle;
}
.trollRoom__title{
  font-size: 10px;
  font-style: italic;
  color: rgba(163,255,183,.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trollRoom__meta{
  font-size: 10px;
  color: rgba(219,219,219,.50);
}
.trollRoomOpen,
.trollRoomDelete{
  width: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.trollRoomOpen{
  border: 1px solid rgba(90,170,255,.30);
  background: rgba(90,170,255,.06);
  color: rgba(160,205,255,.90);
}
.trollRoomOpen:hover{
  border-color: rgba(90,170,255,.65);
  background: rgba(90,170,255,.18);
}
.trollRoomDelete{
  border: 1px solid rgba(255,90,90,.25);
  background: rgba(255,90,90,.06);
  color: rgba(255,140,140,.85);
}
.trollRoomDelete:hover{
  border-color: rgba(255,90,90,.65);
  background: rgba(255,90,90,.18);
}

.trollEffects{
  display: grid;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.trollEffectGroup{ display: grid; gap: 6px; }
.trollEffectGroup__title{
  margin: 0;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: rgba(219,219,219,.45);
  text-transform: uppercase;
}
.trollEffectGroup--favs .trollEffectGroup__title{ color: rgba(255,190,90,.85); }
.trollEffectGroup__items{ display: grid; gap: 6px; }
.trollEffectRow{
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.trollFavBtn{
  flex: none;
  width: 30px;
  border-radius: 8px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.45);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.trollFavBtn:hover{ border-color: rgba(255,190,90,.55); color: rgba(255,190,90,.85); }
.trollFavBtn.is-fav{
  color: #ffbe5a;
  border-color: rgba(255,190,90,.55);
  background: rgba(255,190,90,.12);
}
.trollEffectBtn{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.90);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.trollEffectBtn:hover:not(:disabled){
  border-color: rgba(255,90,90,.55);
  background: rgba(255,90,90,.12);
}
.trollEffectBtn:disabled{
  opacity: .35;
  cursor: not-allowed;
}
.trollEffectBtn.is-selected{
  border-color: rgba(255,190,90,.55);
  background: rgba(255,190,90,.10);
}
/* effet actuellement ACTIF (marche/arret) chez tous les joueurs : reste en surbrillance
   dans le menu jusqu'a ce qu'on reclique dessus pour le desactiver */
.trollEffectBtn.is-active{
  border-color: rgba(61,206,97,.75);
  background: rgba(61,206,97,.16);
  color: rgba(163,255,183,.98);
  box-shadow: 0 0 0 1px rgba(61,206,97,.20), 0 0 16px rgba(61,206,97,.25);
}
.trollEffectBtn.is-active::after{
  content: "● ACTIF";
  float: right;
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(163,255,183,.85);
}

.trollEdit{
  display: grid;
  gap: 8px;
}
.trollEdit label{
  display: grid;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(219,219,219,.55);
}
.trollEdit input{
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.92);
  font-family: inherit;
  font-size: 11px;
}
.trollEdit input:focus{ border-color: rgba(255,190,90,.50); outline: none; }
.trollEdit input:disabled{ opacity: .35; }
.trollEdit input[type="range"]{
  padding: 0;
  accent-color: rgba(255,190,90,.85);
}
.trollEdit input[type="color"]{
  padding: 2px;
  height: 30px;
  cursor: pointer;
}
.trollEdit textarea{
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.92);
  font-family: inherit;
  font-size: 11px;
  resize: vertical;
}
.trollEdit textarea:focus{ border-color: rgba(255,190,90,.50); outline: none; }
.trollEdit select{
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.92);
  font-family: inherit;
  font-size: 11px;
}
.trollEdit select:focus{ border-color: rgba(255,190,90,.50); outline: none; }
.trollEdit__checkbox{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
}
.trollEdit__checkbox input[type="checkbox"]{
  width: 15px;
  height: 15px;
  accent-color: rgba(255,190,90,.85);
  cursor: pointer;
}
.trollEdit__val{
  float: right;
  color: rgba(255,190,90,.90);
}
.trollEdit small{
  color: rgba(219,219,219,.35);
  font-size: 9px;
  letter-spacing: .04em;
}

.trollEdit__actions{
  display: grid;
  gap: 6px;
}
.trollEdit__actions button{
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.90);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#trollEffectAction.is-active{
  border-color: rgba(61,206,97,.60);
  background: rgba(61,206,97,.14);
  color: rgba(163,255,183,.95);
}

.trollPreviewBtn{
  border-color: rgba(90,170,255,.40);
  color: rgba(160,205,255,.95);
}
.trollPreviewBtn:hover{
  border-color: rgba(90,170,255,.65);
  background: rgba(90,170,255,.12);
}
.trollPreviewBtn.is-previewing{
  border-color: rgba(90,170,255,.75);
  background: rgba(90,170,255,.18);
  box-shadow: 0 0 0 1px rgba(90,170,255,.20), 0 0 14px rgba(90,170,255,.25);
}

/* jukebox : liste filtrable de sons preregles (clic = joue immediatement pour tous) */
.trollJukeboxList{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.trollJukeboxBtn{
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.88);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .03em;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.trollJukeboxBtn:hover{
  border-color: rgba(255,190,90,.55);
  background: rgba(255,190,90,.12);
}
.trollJukeboxBtn:active{
  border-color: rgba(61,206,97,.65);
  background: rgba(61,206,97,.16);
}
.trollJukeboxBtn.is-selected{
  border-color: rgba(61,206,97,.70);
  background: rgba(61,206,97,.18);
  color: rgba(163,255,183,.98);
}

/* separateur entre les sons preregles et l'URL personnalisee (lecteur audio/video fusionne) */
.trollDivider{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(219,219,219,.18);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(255,190,90,.65);
  text-align: center;
}
#trollEditApply{
  border-color: rgba(61,206,97,.40);
  color: rgba(140,255,170,.95);
}
#trollEditApply:hover:not(:disabled){
  background: rgba(61,206,97,.14);
  border-color: rgba(61,206,97,.65);
}
#trollEditReset:hover:not(:disabled){
  border-color: rgba(255,90,90,.55);
  background: rgba(255,90,90,.12);
}
.trollEdit__actions button:disabled{
  opacity: .35;
  cursor: not-allowed;
}

@media (max-width: 900px){
  .trollPanel{ width: min(560px, calc(100vw - 32px)); }
  .trollPanel__body{ grid-template-columns: 1fr 1fr; }
  .trollPanel__col:last-child{ grid-column: 1 / -1; }
}

@media (max-width: 640px){
  .trollPanel__body{ grid-template-columns: 1fr; }
  .trollPanel__col{ max-height: 34vh; }
  .trollPanel__col:last-child{ grid-column: auto; }
}