/* ==========================================================
   FONTER
   Importerar Orbitron (rubrik- och spelarkänsla)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* ==========================================================
   TEMA / VARIABLER
   Samlar färger och några återkommande värden
   ========================================================== */
:root{
  --bg:#1a1a1a;
  --panel:#2a2a2a;
  --panel2:#3a3a3a;
  --panelHover:#4a4a4a;
  --text:#fff;
  --muted:#aaa;
  --border:#444;
  --accent:#6a0dad;
  --accent2:#b266ff;
}

/* ==========================================================
   GLOBALT
   Grundutseende för sidan (bakgrund, font, marginaler)
   ========================================================== */
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Orbitron',sans-serif;
  margin:0;
  padding:0;
  overflow:auto;
}

img{ background:transparent; }

a{ color:var(--accent2); text-decoration:none; }
a:hover{ color:var(--text); }

/* ==========================================================
   BOOTSTRAP/CONTAINER
   Justerar layout runt main-container
   ========================================================== */
main.container{ padding-top:0 !important; }

/* ==========================================================
   AUDIO-ELEMENT
   Gömmer native-audio helt (du kör egna kontroller)
   ========================================================== */
#audio{
  display:none;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}

/* ==========================================================
   NAVBAR
   Mörk navbar med accentkant, hover/active-stilar
   ========================================================== */
.navbar{
  background-color:var(--panel);
  font-family:'Orbitron',sans-serif;
  border-bottom:2px solid var(--accent);
}

.navbar-brand{
  color:var(--text);
  font-weight:bold;
  text-transform:uppercase;
}

.navbar-brand:hover{
  color:var(--bg);
  background-color:var(--accent);
  border-radius:5px;
}

.navbar-nav .nav-link{
  color:var(--text);
  transition:color 0.3s, background-color 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:var(--bg);
  background:var(--accent);
  border-radius:5px;
}

.navbar-toggler{ border-color:var(--accent); }
.navbar-toggler:focus,
.navbar-toggler:focus-visible{
  box-shadow:0 0 0 0.2rem rgba(106,13,173,0.6);
  outline:0;
}

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%236a0dad' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ==========================================================
   SPELLISTA (AUDIO)
   Scrollbar-styling + item-states (hover/playing)
   ========================================================== */
#playlist{
  flex-grow:1;
  overflow-y:auto;
  max-height:40vh;
  margin-top:0;
  padding:10px;
  list-style:none;
  background:var(--panel);
  border-top:2px solid var(--accent);
  scrollbar-width:thin;
  scrollbar-color:var(--accent) var(--panel);
}

#playlist::-webkit-scrollbar{ width:6px; }
#playlist::-webkit-scrollbar-track{ background:var(--panel); }
#playlist::-webkit-scrollbar-thumb{
  background:var(--accent);
  border-radius:8px;
}

#playlist li{
  padding:0.4rem 0.6rem;
  margin-bottom:0.4rem;
  font-size:0.7rem;
  cursor:pointer;
  border-radius:5px;
  background:var(--panel2);
  transition:background-color 0.3s;
}

#playlist li:hover{ background:var(--panelHover); }

#playlist li.playing{
  color:var(--text);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,40,190,.50) 0%, rgba(120,40,190,0) 50%),
    radial-gradient(circle at 80% 70%, rgba(35,78,190,.44) 0%, rgba(35,78,190,0) 54%),
    linear-gradient(135deg, #241039 0%, #151b3f 56%, #1c1040 100%);
  background-size:190% 190%, 180% 180%, 100% 100%;
  background-position:6% 14%, 92% 86%, 50% 50%;
  animation:playlistPlayingGlow 14s ease-in-out infinite;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 0 14px rgba(80,30,160,.20);
  will-change:background-position;
}

@media (prefers-reduced-motion: reduce){
  #playlist li.playing{ animation:none; }
}

/* Musik-sidan: lås sidscroll, använd endast playlist-scroll */
body.music-page{
  overflow:hidden;
}

body.music-page .player-container{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  min-height:0;
  box-sizing:border-box;
}

body.music-page #playlist{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}

body.music-page .player-controls{
  margin-top:20px;
}

/* Musik-sidor: alla spelarknappar 50% mindre */
body.music-page .controls{
  gap:0.5rem;
}

body.music-page .controls button{
  width:31px;
  height:31px;
  line-height:31px;
  font-size:16px;
}

body.music-page .controls button svg{
  width:16px;
  height:16px;
}

body.music-page .mute-button .mute-icon{
  width:16px;
  height:16px;
}

/* ==========================================================
   KONTROLLER (AUDIO)
   Knapp-rad och knappar (ikon-knappar)
   ========================================================== */
.controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.6rem;
  margin:0.2rem 0;
}

.controls button{
  background:linear-gradient(135deg,#3a008b 0%, var(--accent) 70%);
  color:var(--text);
  border:none;
  padding:0;
  font-family:'Orbitron',sans-serif;
  border-radius:5px;
  cursor:pointer;
  transition:background 0.3s, color 0.2s;
  text-align:center;
  line-height:40px;
  font-size:20px;
  height:40px;
  width:40px;
}

.controls button:hover{
  background:linear-gradient(135deg,#3a008b 0%, var(--accent) 70%);
  color:#000;
}
.controls button{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.controls button svg{display:block;width:20px;height:20px;}
#playBtn .icon-pause{display:none;}
#playBtn.is-playing .icon-play{display:none;}
#playBtn.is-playing .icon-pause{display:block;}


/* Extra “stora” player-knappar (om de används någonstans) */
.player-btn{
  background-color:var(--accent);
  color:var(--text);
  border:none;
  padding:12px 20px;
  margin:0 5px;
  border-radius:8px;
  cursor:pointer;
  font-size:1.5rem;
  transition:background-color 0.2s, transform 0.1s;
}
.player-btn:hover{ background-color:var(--accent2); }
.player-btn:active{ transform:scale(0.9); }

/* Ikon-knapp utan bakgrund (används i video/audio) */
.icon-btn{
  background:transparent;
  border:0;
  padding:0;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* Repeat knapp + active-state */
.repeat-button{
  background-color:var(--accent);
  color:var(--text);
  border:none;
  border-radius:4px;
}
.repeat-button.active{
  background-color:#333;
  color:#000;
}

.mute-button{
  background-color:var(--accent);
  color:#fff;
  border:none;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mute-button.active{
  background-color:#333;
  color:#fff;
}
.mute-button .mute-icon{
  width:18px;
  height:18px;
  display:block;
}
.mute-button .mute-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Shuffle knapp + active-state */
.shuffle-button{
  background-color:var(--accent);
  color:var(--text);
  border:none;
  border-radius:4px;
}
.shuffle-button.active{
  background-color:#333;
  color:#000;
}

/* ==========================================================
   TIDLINJE (AUDIO)
   Egen seekbar med thumb som flyttas
   ========================================================== */
.custom-timeline{
  width:100%;
  height:8px;
  background-color:var(--panel2);
  border-radius:4px;
  position:relative;
  cursor:pointer;
  margin:0.3rem 0;
  flex-shrink:0;
}

.custom-timeline .thumb{
  width:12px;
  height:12px;
  background-color:var(--accent);
  border-radius:50%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  transition:left 0.1s linear;
}

/* ==========================================================
   NUVARANDE LÅT + TID
   Text, marquee och “wave”-animation på bokstäver
   ========================================================== */
#current-song{
  text-align:center;
  margin:0 0 6px;
  font-size:1.3rem;
  font-weight:bold;
  color:var(--text);
  overflow-x:hidden;
  overflow-y:visible;
  white-space:nowrap;
  min-height:2rem;
  line-height:1.2;
}

#time-display{
  text-align:center;
  font-size:0.9rem;
  color:var(--text);
  margin:0.2rem 0;
}

#current-song.paused .scroll-text{ animation-play-state:paused; }

#current-song .scroll-text span{
  display:inline-block;
  animation:wave 1.5s ease-in-out infinite;
}
#current-song .scroll-text span:nth-child(odd){ animation-delay:.1s; }
#current-song .scroll-text span:nth-child(even){ animation-delay:.3s; }

/* Själva scrollningen (marquee) */
#current-song .scroll-text{
  display:inline-block;
  margin-top:-16px;
  padding-left:100%;
  animation:marquee 12s linear infinite;
  animation-play-state:running;
}

/* ==========================================================
   SPEAKERS / VOLYM
   Volym-slider och layout runt ikoner
   ========================================================== */
.speaker-wrapper{
  display:flex;
  justify-content:center;
  margin-top:10px;
  margin-bottom:5px;
  gap:10px;
}

.volume-control input[type="range"]{
  width:100px;
  accent-color:var(--accent);
  margin-top:13px;
}

/* ==========================================================
   ALBUM-OMS LAG / FRAMSIDA
   Centrerar och begränsar storlek responsivt
   ========================================================== */
.album-cover-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:120px 0 18px;
}

.album-cover{
  width:300px;
  max-width:80vw;
  height:auto;
  border-radius:0;
  display:block;
}

.front{
  display:block;
  margin:80px auto 0;
  width:100%;
  max-width:220px;
  height:auto;
}
@media (max-width: 768px){
  .front{max-width:110px;}
}

/* ==========================================================
   SLIDERS / SMÅTEXTER
   Wrapper för reglage + mindre hjälptypografi
   ========================================================== */
.sliders-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:14px;
  width:100%;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

.player-controls{
  margin:0 auto 8px;
  width:min(760px, 100%);
}

.small-text{
  font-size:0.7em;
  line-height:1em;
  display:block;
  opacity:0.8;
}

.dropdown-header{
  font-size:0.7em;
  font-weight:normal;
  color:var(--muted);
  padding-left:1rem;
}

/* ==========================================================
   DROPDOWN (BOOTSTRAP DARK)
   Större meny, scroll, och nested dropdown bättre på dark
   ========================================================== */
[data-bs-theme="dark"] .dropdown-menu{
  min-width:500px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  overflow-x:hidden;
  position:absolute;
  left:0;
  right:auto;
  z-index:2000;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-menu{
  position:static;
  width:100%;
  min-width:500px;
  max-height:none;
  overflow-y:visible;
  overflow-x:hidden;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item{
  min-height:2.2rem;
  white-space:normal;
  word-wrap:break-word;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus{
  background-color:var(--accent);
  color:var(--text);
}

/* ==========================================================
   TABELL (FIL-LISTA)
   Fast layout, wrap av text och tydlig border
   ========================================================== */
.table-wrapper{
  width:100%;
  overflow-x:auto;
}

table.file-list{
  width:100%;
  min-width:300px;
  border-collapse:collapse;
  margin-top:20px;
  background-color:var(--panel);
  border:2px solid var(--accent);
  table-layout:fixed;
}

table.file-list th,
table.file-list td{
  padding:8px 12px;
  border-bottom:1px solid #444;
  white-space:normal;
  word-break:break-word;
}

table.file-list th:first-child,
table.file-list td:first-child{ width:10%; }
table.file-list th:nth-child(2),
table.file-list td:nth-child(2){ width:10%; }
table.file-list th:nth-child(3),
table.file-list td:nth-child(3){ width:10%; }

/* ==========================================================
   SÖKRESULTAT (LIST GROUP)
   Popover-ish lista under input
   ========================================================== */
#results{
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  max-height:250px;
  overflow-y:auto;
  z-index:1000;
}

#results .list-group-item{
  cursor:pointer;
  transition:background-color 0.2s;
}
#results .list-group-item:hover{
  background-color:#444;
  color:var(--text);
}

#results li{
  background:#fff !important;
  color:#000 !important;
  border-bottom:1px solid var(--accent) !important;
}
#results li:hover{
  background:var(--accent) !important;
  color:#000 !important;
}

/* ==========================================================
   INDEXPLAYER (FÖRSTA SIDAN)
   Wrapper + sökfält + tracknamn
   ========================================================== */
.indexplayer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-width:600px;
  margin:20px auto;
  background:var(--bg);
  padding:10px;
  border-radius:12px;
}

#search{
  display:block;
  max-width:300px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:1;
  background:#fff !important;
  color:#000 !important;
}

#search::placeholder{ text-align:center; }

#indexplayer span#trackName{
  flex-basis:100%;
  text-align:center;
  margin-bottom:8px;
  font-size:0.9rem;
  color:var(--text);
}

/* Förstasidan: sänk båda sliders lite så tracktexten syns tydligt ovanför */
#indexplayer .sliders-wrapper{
  margin-top:8px;
}

/* Förstasidan: samma fade-spår bakom skallen som på musik-sidorna */
#indexplayer #seekBar::-webkit-slider-runnable-track,
#indexplayer #seekBar::-moz-range-track{
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--seek-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

#indexplayer #volume::-webkit-slider-runnable-track,
#indexplayer #volume::-moz-range-track{
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--volume-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

/* Förstasidan: prev/next ska alltid vara vita, endast play/pause byter färg */
#indexplayer .controls button,
#indexplayer .controls button:focus,
#indexplayer .controls button:focus-visible,
#indexplayer .controls button:hover,
#indexplayer .controls button:active{
  color:#fff;
}

/* Förstasidan: playknappen blir svart efter första klick och växlar play/pause enligt önskat mönster */
#indexplayer #playBtn.has-started,
#indexplayer #playBtn.has-started:focus,
#indexplayer #playBtn.has-started:focus-visible,
#indexplayer #playBtn.has-started:hover,
#indexplayer #playBtn.has-started:active{
  color:#000;
}

#indexplayer #playBtn .icon-pause{
  display:none;
}

#indexplayer #playBtn.has-started:not(.is-playing) .icon-play{
  display:none;
}

#indexplayer #playBtn.has-started:not(.is-playing) .icon-pause{
  display:block;
}

#indexplayer #playBtn.has-started.is-playing .icon-play{
  display:block;
}

#indexplayer #playBtn.has-started.is-playing .icon-pause{
  display:none;
}

#searchInput{
  max-width:159px;
  width:100%;
  display:block;
  margin:0 auto;
}

/* ==========================================================
   RANGE-SLIDERS (GENERELLT)
   Bas-stil för range + special-thumbs (skallar)
   ========================================================== */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  background:var(--panel2);
  border-radius:3px;
  outline:none;
  cursor:pointer;
}

#seekBar{
  --seek-progress:0%;
  --seek-underlap-px:19px;
  --seek-end-trim-px:12px;
  --seek-thumb-x:0px;
}

#seekBar::-webkit-slider-runnable-track{
  height:6px;
  border-radius:3px;
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--seek-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

#seekBar::-moz-range-track{
  height:6px;
  border-radius:3px;
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--seek-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

#seekBar::-moz-range-progress{
  height:6px;
  border-radius:3px;
  background:transparent;
}

#seekBar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_seek.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  margin-top:-11px;
  transform:translate(var(--seek-thumb-x), -15px);
}

#seekBar::-moz-range-thumb{
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_seek.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  transform:translate(var(--seek-thumb-x), -15px);
}

#volume,
#volumeBar{
  --volume-progress:0%;
  --volume-underlap-px:19px;
  --volume-end-trim-px:12px;
  --volume-thumb-x:0px;
}

#volume::-webkit-slider-runnable-track,
#volumeBar::-webkit-slider-runnable-track{
  height:6px;
  border-radius:3px;
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--volume-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

#volume::-moz-range-track,
#volumeBar::-moz-range-track{
  height:6px;
  border-radius:3px;
  background-image:
    linear-gradient(
      to right,
      rgba(58,58,58,1) 0%,
      rgba(140,29,229,.96) 100%
    ),
    linear-gradient(var(--panel2),var(--panel2));
  background-size:var(--volume-progress) 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
}

#volume::-moz-range-progress,
#volumeBar::-moz-range-progress{
  height:6px;
  border-radius:3px;
  background:transparent;
}

#volume::-webkit-slider-thumb,
#volumeBar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_volume.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  margin-top:-9px;
  transform:translate(var(--volume-thumb-x), -8px);
}

#volume::-moz-range-thumb,
#volumeBar::-moz-range-thumb{
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_volume.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  transform:translate(var(--volume-thumb-x), -8px);
}

/* ==========================================================
   KNAPPAR (MATRIX / UPLOAD)
   Delade stilar för “skicka” och “ladda upp”
   ========================================================== */
#sendBtn,
#uploadBtn{
  background-color:var(--accent);
  border:none;
  color:var(--text);
  font-family:'Orbitron',sans-serif;
  font-size:1rem;
  padding:0.5rem 1.2rem;
  border-radius:6px;
  cursor:pointer;
  transition:background-color 0.2s, transform 0.1s, color 0.2s;
}

#sendBtn:hover,
#uploadBtn:hover{
  background-color:var(--accent2);
  color:#000;
  transform:scale(1.05);
}

/* ==========================================================
   MARQUEE / SPIN-HJÄLPKLASSER
   För rullande text och roterande ikoner
   ========================================================== */
.marquee{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  box-sizing:border-box;
}

.spin{
  display:inline-block;
  animation:spin 2s linear infinite;
}

.spin-reverse{
  display:inline-block;
  animation:spin-reverse 2s linear infinite;
}

/* ==========================================================
   ALBUMINFO
   Liten rad under spelaren
   ========================================================== */
#album-info{
  text-align:center;
  font-size:0.7rem;
  font-weight:bold;
  color:var(--text);
  margin-top:-4px;
}

/* ==========================================================
   ACCORDION (BOOTSTRAP)
   Dark-tema med accent-fokus
   ========================================================== */
.accordion-item{ border:1px solid var(--accent) !important; }

.accordion-button{
  border:1px solid var(--accent) !important;
  background-color:var(--panel) !important;
  color:var(--text) !important;
}

.accordion-button:hover{
  background-color:var(--accent) !important;
  color:var(--text) !important;
}

.accordion-button:not(.collapsed){
  background-color:var(--accent) !important;
  border:1px solid var(--accent) !important;
  color:var(--text) !important;
}

.accordion-button:focus{
  border-color:var(--accent) !important;
  box-shadow:none !important;
}

/* ==========================================================
   GALLERI + LIGHTBOX
   Thumbnail-grid och GLightbox-pilar med accent
   ========================================================== */
.gallery{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.gallery-img{
  width:200px;
  height:auto;
  border-radius:5px;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}

.gallery-img:hover{
  transform:scale(1.05);
  box-shadow:0 0 10px rgba(106,13,173,0.6);
}

.glightbox-clean .gnext,
.glightbox-clean .gprev{
  background-color:var(--accent) !important;
  border-radius:50% !important;
  width:50px !important;
  height:50px !important;
}

.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover{
  background-color:#8c1de5 !important;
}

/* ==========================================================
   VIDEO-SPELARE
   Wrapper, overlays, kontroller, seekbar och video-playlist
   ========================================================== */
.video-player-wrapper{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:80px auto 20px; /* extra toppmarginal */
}

/* Video-sidan: använd endast playlist-scroll och fullbredd på playlist */
body.video-page{
  overflow:hidden;
}

body.video-page .video-page-content{
  height:100vh;
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  padding-top:80px;
}

body.video-page .video-player-wrapper{
  margin:0 auto 12px;
  flex:0 0 auto;
  width:100%;
}

/* Wrapper runt video + overlays */
.video-wrapper{
  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto;
  border:none;
  border-radius:10px;
  box-sizing:border-box;
  overflow:hidden;
  padding-bottom:0;
  box-shadow:
    0 0 0 1px rgba(92,53,140,.42),
    0 0 22px rgba(71,33,120,.50),
    0 0 48px rgba(48,20,82,.38);
}

#video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:none;
  margin:0;
  pointer-events:auto;
}

#video-clickOverlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  color:var(--text);
  text-shadow:0 0 10px #000;
  pointer-events:none;
}

#video-seekBar{
  position:absolute;
  bottom:45px;
  left:0;
  width:100%;
  z-index:6;
  transition:opacity 0.5s ease;
}

/* Dölj kontroller när klassen hide-controls är aktiv */
.video-player-wrapper.hide-controls .video-controls-bar,
.video-player-wrapper.hide-controls #video-seekBar{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease;
}

/* Kontrollpanel */
.video-controls-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 12px;
  background:rgba(0,0,0,0.5);
  z-index:4;
}

.video-controls-left,
.video-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.video-controls-bar button{
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text);
}

#video-time-display{
  font-size:0.8rem;
  color:var(--text);
}

/* Video-volym */
#video-volume{ width:100px; }

/* Video-thumbs (WebKit) */
#video-seekBar::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_seek.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  margin-top:-13px;
}

#video-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:32px;
  height:32px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_volume.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
  margin-top:-1px;
}

#video-volumeIcon{
  position:relative;
  top:2px;
}

/* Video-thumbs (Firefox) */
#video-volume::-moz-range-thumb{
  width:48px;
  height:48px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_volume.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
}

#video-seekBar::-moz-range-thumb{
  width:32px;
  height:32px;
  border:none;
  background:url("/projects/website/tjockfet/system/skull_seek.png") no-repeat center;
  background-size:contain;
  cursor:pointer;
}

/* Videons spellista */
#video-playlist{
  width:100%;
  max-width:900px;
  margin:20px auto 0;
  padding:10px;
  list-style:none;
  background:var(--panel);
  border-top:none;
  border-radius:10px;
  overflow-y:auto;
  max-height:500px;
  box-shadow:
    0 0 0 1px rgba(92,53,140,.36),
    0 0 18px rgba(67,31,112,.42),
    0 0 40px rgba(43,19,74,.34);
}

body.video-page #video-playlist{
  max-width:none;
  margin:0;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}

#video-playlist li{
  padding:0.4rem 0.6rem;
  margin-bottom:0.4rem;
  font-size:0.85rem;
  cursor:pointer;
  border-radius:5px;
  background:var(--panel2);
  transition:background-color 0.3s;
}

#video-playlist li:hover{ background:var(--panelHover); }

#video-playlist li.playing{
  background:var(--accent);
  color:var(--text);
}

#video-prevBtn,
#video-nextBtn,
#video-fullscreenBtn{
  width:40px;
  height:40px;
  font-size:26px;
}

#video-prevBtn img,
#video-nextBtn img,
#video-fullscreenBtn img{
  width:32px;
  height:32px;
}

/* ==========================================================
   KONTAKT (MATRIX-FORM) + UPLOAD-KORT
   “Card”-utseende, textarea, statusrader, progress, listor
   ========================================================== */
.page-title{ font-size:22px; font-weight:800; margin:0 0 8px; }
.page-sub{ font-size:14px; color:#bbb; margin:0 0 14px; }

.cardx{
  background:#222;
  border:1px solid var(--accent);
  border-radius:14px;
  padding:16px;
}

.cardx textarea{
  width:100%;
  min-height:180px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  font-size:16px;
  resize:vertical;
}

.cardx button{
  margin-top:12px;
  background:var(--accent);
  color:var(--text);
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-size:16px;
  cursor:pointer;
}
.cardx button:hover{ background:var(--accent2); color:#000; }

.ok{
  padding:10px 12px;
  border-radius:12px;
  background:#123a1c;
  border:1px solid #1f6b33;
  margin-bottom:12px;
}

.err{
  padding:10px 12px;
  border-radius:12px;
  background:#3a1212;
  border:1px solid #6b1f1f;
  margin-bottom:12px;
}

/* Upload-lista */
.listy{ list-style:none; padding:0; margin:10px 0 0; }
.listy li{
  padding:10px 12px;
  border:1px solid #333;
  border-radius:12px;
  background:var(--bg);
  margin-bottom:10px;
  color:var(--text);
}
.listy a{ color:var(--accent2); text-decoration:none; }
.listy a:hover{ text-decoration:underline; }

.cardx .progress{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.cardx .progress-bar{ background:var(--accent); }

.cardx input[type="file"]{
  width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
}

/* Kontakt-sida (html/kontakt/index.php) */
.kontakt-page .wrap{
  max-width:760px;
  margin:0 auto;
  padding:24px;
  padding-top:120px;
}

.kontakt-page .cardx{
  background:#141414;
  border:1px solid rgba(140,29,229,.55);
  border-radius:18px;
  padding:18px;
  box-shadow:0 14px 50px rgba(0,0,0,.55);
}

.kontakt-page .cardx + .cardx{ margin-top:16px; }

.kontakt-page .page-title{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  line-height:1.05;
  margin:0 0 8px;
  letter-spacing:.3px;
}

.kontakt-page .page-sub{
  opacity:.75;
  margin:0 0 16px;
}

.kontakt-page .cardx textarea,
.kontakt-page .cardx .contact-input{
  width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  font-size:16px;
  outline:none;
}

.kontakt-page .cardx textarea{
  min-height:180px;
  resize:vertical;
}

.kontakt-page .cardx textarea:focus,
.kontakt-page .cardx .contact-input:focus{
  border-color:rgba(140,29,229,.65);
  box-shadow:0 0 0 3px rgba(140,29,229,.12);
}

.kontakt-page .cardx .contact-input{ margin-top:10px; }

.kontakt-page .cardx button{
  margin-top:12px;
  background:#5e14c2;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-size:16px;
  cursor:pointer;
}

.kontakt-page .cardx button:hover{ filter:brightness(1.08); }

.kontakt-page .no-contact-confirm{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #5c4b10;
  border-radius:12px;
  background:#241f0d;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
}

.kontakt-page .no-contact-confirm.show{ display:flex; }

.kontakt-page .no-contact-confirm .choice-btn{
  margin-top:0;
  padding:8px 12px;
  font-size:14px;
  border-radius:10px;
}

.kontakt-page .no-contact-confirm .choice-btn.yes{ background:#5e14c2; }
.kontakt-page .no-contact-confirm .choice-btn.no{ background:#1d4d25; }

.kontakt-page .ok{
  padding:10px 12px;
  border-radius:12px;
  background:#123a1c;
  border:1px solid #1f6b33;
  margin-bottom:12px;
}

.kontakt-page .err{
  padding:10px 12px;
  border-radius:12px;
  background:#3a1212;
  border:1px solid #6b1f1f;
  margin-bottom:12px;
}

/* ==========================================================
   WRAP
   Centrering + padding (t.ex. om navbar är fixed-top)
   ========================================================== */
.wrap{
  max-width:760px;
  margin:0 auto;
  padding:24px;
  padding-top:90px;
}

/* ==========================================================
   ANIMATIONER
   Wave, marquee och spin-helpers
   ========================================================== */
@keyframes wave{
  0%,100%{ transform:translateY(0); }
  25%{ transform:translateY(-3px); }
  50%{ transform:translateY(3px); }
  75%{ transform:translateY(-3px); }
}

@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

@keyframes spin-reverse{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(-360deg); }
}

@keyframes playlistPlayingGlow{
  0%{ background-position:6% 14%, 92% 86%, 50% 50%; }
  25%{ background-position:84% 18%, 18% 78%, 50% 50%; }
  50%{ background-position:18% 84%, 86% 20%, 50% 50%; }
  75%{ background-position:78% 74%, 24% 20%, 50% 50%; }
  100%{ background-position:6% 14%, 92% 86%, 50% 50%; }
}

/* ==========================================================
   =====================  MOBIL / RESPONSIVT  =================
   Allt som rör mobil längst ner (helpers + @media)
   ========================================================== */

@media (max-width:768px){
  #indexplayer .controls{margin-bottom:14px;}
  #indexplayer #trackName{display:block;width:100%;margin-top:6px;line-height:1.25;}
}

/* Mobilhelpers (default desktop) */
.mobile-only{ display:none; }
.search-and-cover{ text-align:center; }
.mobile-fallback{
  display:none;
  margin:20px 0;
  overflow:hidden;
  white-space:nowrap;
}
.mobile-fallback img{
  max-width:70%;
  height:auto;
}

@media (max-width:768px){
  .mobile-only{ display:block; }

  .volume-control{
    flex-direction:column;
    align-items:center;
    flex-basis:100%;
    margin-top:10px;
    margin-bottom:0.2rem;
  }

  #video-prevBtn,
  #video-nextBtn,
  #video-time-display{
    display:none !important;
  }

  [data-bs-theme="dark"] .dropdown-menu{
    min-width:100%;
    max-height:calc(100dvh - 90px);
  }

  .extra-controls{ margin-top:10px; }

  .search-and-cover,
  h1{
    display:none;
  }

  .mobile-fallback{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-align:center;
    margin:20px 0;
  }

  .player-container{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    padding-top:80px;
  }

  #seekBar{
    width:100%;
    max-width:300px;
    margin-top:-10px;
  }

  #volume{
    width:100%;
    max-width:300px;
  }

  #playlist{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    margin-bottom:0;
  }

  .controls{
    width:100%;
    justify-content:stretch;
    flex-wrap:nowrap;
    gap:8px;
  }

  .controls button{
    flex:1 1 0;
    width:auto;
    min-width:0;
    height:44px;
  }

  body.music-page .controls{
    width:auto;
    justify-content:center;
    flex-wrap:wrap;
    gap:0.5rem;
  }

  body.music-page .controls button{
    flex:0 0 31px;
    width:31px;
    min-width:31px;
    height:31px;
    font-size:16px;
    line-height:31px;
  }

  .player-controls{
    margin-top:4px;
    margin-bottom:8px;
  }

  body.music-page .player-controls{
    margin-top:20px;
  }

  .wrap{ padding-top:120px; }
}