.ktvee-jukebox{
  --red:#8b1010;
  --cream:#fff1c8;
  --gold:#d8a83e;
  --chrome:#d7d7d7;
  width:100%;
  max-width:1120px;
  margin:30px auto;
  border-radius:48px 48px 24px 24px;
  padding:clamp(16px, 3vw, 28px);
  background:linear-gradient(90deg, #4b1515, var(--red), #4b1515);
  border:clamp(4px, .8vw, 8px) solid var(--chrome);
  box-shadow:0 0 0 8px #5e4b2b, 0 25px 70px rgba(0,0,0,.65), inset 0 0 45px #000;
  color:var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  overflow:hidden;
}

.ktvee-jukebox *{box-sizing:border-box}

.ktvee-top{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  align-items:center;
  margin-bottom:18px;
}

.ktvee-neon{
  text-align:center;
  font-size:clamp(34px, 5vw, 48px);
  line-height:.95;
  letter-spacing:2px;
  color:#ffe9a6;
  text-shadow:0 0 6px #fff, 0 0 14px #ffd45d, 0 0 24px #ff8700;
}

.ktvee-neon span{font-size:clamp(20px, 3vw, 26px)}

.ktvee-now{
  background:#120b0b;
  border:4px solid var(--gold);
  border-radius:18px;
  padding:18px;
  min-height:120px;
  box-shadow:inset 0 0 25px #000;
}

.ktvee-now-row{
  display:grid;
  grid-template-columns:70px 86px 1fr;
  gap:16px;
  align-items:center;
}

.ktvee-now-cover{
  width:86px;
  height:86px;
  border-radius:12px;
  border:3px solid var(--gold);
  background:
    radial-gradient(circle, #e8d7a0 0 11%, #111 12% 44%, #333 45% 52%, #111 53%);
  background-size:cover;
  background-position:center;
  box-shadow:0 0 14px rgba(0,0,0,.7);
}

.ktvee-now-cover.empty{
  opacity:.45;
}

.ktvee-record{
  width:62px;
  height:62px;
  border-radius:50%;
  background:radial-gradient(circle, #e8d7a0 0 9%, #101010 10% 45%, #333 46% 50%, #070707 51%);
  box-shadow:0 0 12px #000;
}

.ktvee-record.playing{animation:ktvee-spin 1.6s linear infinite}

@keyframes ktvee-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.ktvee-label{
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--gold);
  font-size:13px;
  margin-bottom:8px;
}

.ktvee-now-title{font-size:clamp(21px, 3vw, 26px)}
.ktvee-now-artist{margin-top:5px;color:#ffd;opacity:.85}
.ktvee-next-title{margin-top:10px;font-size:14px;color:#f8db94}

.ktvee-player{
  margin-top:16px;
  background:#0d0909;
  border-radius:12px;
  padding:10px;
  border:2px solid #3d2b2b;
}
.ktvee-player audio{width:100%;display:block}

.ktvee-video-stage{
  background:#0d0909;
  border:4px solid var(--gold);
  border-radius:22px;
  padding:14px;
  margin:0 0 16px 0;
  box-shadow:inset 0 0 25px #000;
}
.ktvee-video-stage[hidden]{display:none !important}
.ktvee-video-stage iframe{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:14px;
  display:block;
}

.ktvee-page-switch{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  margin:0 0 12px 0;
}

.ktvee-page-info{
  background:#130a0a;
  border:3px solid var(--gold);
  border-radius:999px;
  padding:12px 24px;
  color:#ffe8a4;
  font-weight:bold;
  letter-spacing:1px;
  min-width:145px;
  text-align:center;
}

.ktvee-page-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.ktvee-page-dots button{
  width:38px;
  height:38px;
  padding:0;
  font-size:14px;
}
.ktvee-page-dots button.active{outline:3px solid #fff1c8}

.ktvee-window{
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.03)), #311717;
  border:7px solid var(--chrome);
  border-radius:30px;
  padding:clamp(12px, 2vw, 20px);
  min-height:300px;
  box-shadow:inset 0 0 30px #000;
}

.ktvee-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.ktvee-song-card{
  background:var(--cream);
  color:#281313;
  border-radius:8px;
  min-height:95px;
  padding:12px 12px 10px 84px;
  position:relative;
  box-shadow:0 4px 0 #b39244;
  overflow:hidden;
  transition:.12s transform;
  cursor:pointer;
}
.ktvee-song-card:hover{transform:translateY(-2px)}

.ktvee-cover{
  position:absolute;
  left:12px;
  top:16px;
  width:56px;
  height:56px;
  border-radius:6px;
  background:radial-gradient(circle, #e8d7a0 0 11%, #111 12% 44%, #333 45% 52%, #111 53%);
  background-size:cover;
  background-position:center;
  border:2px solid #b39244;
}

.ktvee-song-code{
  position:absolute;
  right:10px;
  top:8px;
  background:#9a1111;
  color:#fff;
  padding:3px 8px;
  border-radius:12px;
  font-weight:bold;
  z-index:3;
}
.ktvee-song-title{font-size:clamp(16px, 2vw, 18px);font-weight:bold;padding-right:42px}
.ktvee-song-artist{font-size:14px;margin-top:4px}
.ktvee-song-type{font-size:12px;margin-top:5px;opacity:.7}

.ktvee-controls{
  display:grid;
  grid-template-columns:minmax(220px,245px) minmax(280px,1fr) minmax(260px,300px);
  gap:20px;
  margin-top:22px;
  align-items:start;
}

.ktvee-selection,.ktvee-queue{
  background:#160b0b;
  border:3px solid var(--gold);
  border-radius:18px;
  padding:15px;
}

.ktvee-selection input{
  width:82px;
  font-size:28px;
  text-align:center;
  padding:8px;
  margin-right:8px;
  border-radius:8px;
  border:0;
  background:#fff7dd;
}

.ktvee-hint{font-size:13px;color:#f8db94;margin-bottom:0}

.ktvee-jukebox button{
  cursor:pointer;
  border:0;
  border-radius:999px;
  background:linear-gradient(#f5e5b0, #b7791f);
  color:#25100a;
  font-weight:bold;
  box-shadow:0 4px 0 #5c2b0f;
}
.ktvee-jukebox button:disabled{opacity:.45;cursor:not-allowed}
.ktvee-jukebox button:active{transform:translateY(3px);box-shadow:0 1px 0 #5c2b0f}
.ktvee-selection button{font-size:18px;padding:12px 18px}

.ktvee-buttons{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(54px, 1fr));
  gap:9px;
}
.ktvee-buttons button{min-height:48px;font-size:18px}
.ktvee-page-switch button{min-height:48px;font-size:16px}

.ktvee-queue ol{
  margin:0 0 12px 0;
  padding-left:22px;
  max-height:130px;
  overflow:auto;
}
.ktvee-queue li{margin-bottom:6px}
.ktvee-queue-actions{display:flex;gap:8px;flex-wrap:wrap}
.ktvee-queue-actions button{padding:8px 12px;font-size:13px}

@media(max-width:980px){
  .ktvee-controls{grid-template-columns:1fr}
  .ktvee-page-switch{grid-template-columns:1fr}
  .ktvee-buttons{grid-template-columns:repeat(3, minmax(54px, 1fr))}
}

@media(max-width:760px){
  .ktvee-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ktvee-song-card{
    aspect-ratio:1 / 1;
    min-height:0;
    padding:0;
    background:#111;
    color:#fff;
  }
  .ktvee-cover{
    inset:0;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:8px;
  }
  .ktvee-song-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.20) 55%, rgba(0,0,0,.08));
    z-index:1;
  }
  .ktvee-song-title,
  .ktvee-song-artist,
  .ktvee-song-type{
    position:absolute;
    left:10px;
    right:10px;
    z-index:2;
    padding-right:0;
    margin:0;
    text-shadow:0 1px 4px #000;
  }
  .ktvee-song-title{bottom:42px;font-size:16px;line-height:1.1}
  .ktvee-song-artist{bottom:23px;font-size:13px}
  .ktvee-song-type{bottom:8px;font-size:11px;opacity:.8}
}

@media(max-width:480px){
  .ktvee-cards{grid-template-columns:1fr}
  .ktvee-song-card{aspect-ratio:16 / 10}
  .ktvee-now-row{grid-template-columns:1fr;text-align:center}
  .ktvee-record{margin:0 auto}
  .ktvee-now-cover{margin:0 auto;width:120px;height:120px}
  .ktvee-selection input{width:72px;font-size:24px}
  .ktvee-page-dots button{width:34px;height:34px}
}


/* Cover-Popup 0.1.1 – nur Desktop/Pointer */
.ktvee-cover-popup,
.ktvee-cover-popup * {
  box-sizing: border-box;
}

.ktvee-cover-popup {
  position: fixed !important;
  z-index: 999999 !important;
  display: none;
  pointer-events: none;
  background: #111;
  border: 4px solid #d8a83e;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  padding: 8px;
}

.ktvee-cover-popup img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(460px, 82vw) !important;
  max-height: min(460px, 82vh) !important;
  object-fit: contain;
  border-radius: 8px;
}

@media(max-width:760px), (hover:none), (pointer:coarse){
  .ktvee-cover-popup {
    display: none !important;
  }
}