:root{
  --bg:#0b0d12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:#e9eef7;
  --muted:rgba(233,238,247,.7);
  --border:rgba(255,255,255,.12);
  --accent:#ff3b3b;
}
[data-theme="dark"],:root{color-scheme: dark;}
[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:rgba(0,0,0,.04);
  --panel2:rgba(0,0,0,.07);
  --text:#0d1220;
  --muted:rgba(13,18,32,.65);
  --border:rgba(0,0,0,.12);
  --accent:#ff3b3b;
}
[data-theme="dark_blue"]{ --accent:#3b82f6; }
[data-theme="dark_purple"]{ --accent:#a855f7; }
[data-theme="dark_green"]{ --accent:#22c55e; }
[data-theme="dark_gold"]{ --accent:#f59e0b; }

[data-theme="dark_blue"],
[data-theme="dark_purple"],
[data-theme="dark_green"],
[data-theme="dark_gold"]{color-scheme: dark;}

/* Light variants keep the light base but change accent color */
[data-theme="light_blue"]{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.07);
  --text:#0d1220; --muted:rgba(13,18,32,.65); --border:rgba(0,0,0,.12);
  --accent:#3b82f6;
}
[data-theme="light_purple"]{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.07);
  --text:#0d1220; --muted:rgba(13,18,32,.65); --border:rgba(0,0,0,.12);
  --accent:#a855f7;
}
[data-theme="light_green"]{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.07);
  --text:#0d1220; --muted:rgba(13,18,32,.65); --border:rgba(0,0,0,.12);
  --accent:#22c55e;
}
[data-theme="light_gold"]{
  --bg:#f6f7fb; --panel:rgba(0,0,0,.04); --panel2:rgba(0,0,0,.07);
  --text:#0d1220; --muted:rgba(13,18,32,.65); --border:rgba(0,0,0,.12);
  --accent:#f59e0b;
}
[data-theme="light_blue"],
[data-theme="light_purple"],
[data-theme="light_green"],
[data-theme="light_gold"]{color-scheme: light;}
[data-theme="light_blue"],
[data-theme="light_purple"],
[data-theme="light_green"],
[data-theme="light_gold"]{color-scheme: light;}
[data-theme="light"]{color-scheme: light;}
[data-theme="minecraft"]{color-scheme: dark;}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:18px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px rgba(255,59,59,.15)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1 1 320px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.tab{cursor:pointer;user-select:none;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:transparent}
.tab.active{background:var(--panel2)}
.btn{cursor:pointer;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:700}
.btn.primary{border-color:rgba(255,59,59,.35);box-shadow:0 0 0 4px rgba(255,59,59,.12) inset}
.btn:disabled{opacity:.5;cursor:not-allowed}
.input, select, textarea{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);padding:10px 12px}
label{font-size:12px;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

/* Small thumbnail preview under selects (e.g. box image from gallery) */
.miniPreview{
  width: 100%;
  max-width: 260px;
  max-height: 150px;
  display:block;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  object-fit: contain;
}

/* Public Streamer-Reel (Startseite) */
.streamerReel{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 10px;
}
.streamerReel-track{
  display: flex;
  align-items: stretch;
  gap: 10px;
  will-change: transform;
}
.streamerReel.glide .streamerReel-track{ transform: translateX(0); }
.streamerCard{
  flex: 0 0 auto;
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  color: var(--text);
  text-decoration: none;
  min-width: 240px;
}
.streamerCard:hover{ filter: brightness(1.06); }
.streamerCard .av{ width:44px;height:44px;border-radius:14px; overflow:hidden; border:1px solid var(--border); background: rgba(255,255,255,.06); flex:0 0 auto; }
.streamerCard .av img{ width:100%;height:100%;object-fit:cover; display:block; }
.streamerCard .av .ph{ width:100%;height:100%; }
.streamerCard .tx{ min-width:0; flex:1; }
.streamerCard .nm{ font-weight: 900; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.streamerCard .lg{ font-size:12px; color: var(--muted); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.streamerCard .tw{ font-size:12px; opacity:.85; padding:6px 8px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); }
hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.notice{padding:10px 12px;border-radius:12px;border:1px dashed var(--border);color:var(--muted)}
/* Reel */
.reel{position:relative;overflow:visible;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));padding:16px 12px 18px}

/* Startseite/Reel-Seite: Boxbild ragt nach oben raus, daher extra Abstand, damit es nicht in die Controls darüber läuft */
body[data-page="index"] #reelRoot.reel.has-box,
body[data-page="reel"]  #reelRoot.reel.has-box{
  margin-top:72px !important;
}

/* prunkvolle Box über dem Reel (Reel bleibt sichtbar) */
.reel.has-box{padding-top:80px}
.reelBrand{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:41;pointer-events:none}
.reelBrand img{display:block;height:22px;width:auto;max-width:70vw;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.reel.overlay-reel .reelBrand img{height:18px}
.reel-boxOverlay{
  position:absolute;
  left:50%;
  top:-54px;
  transform:translateX(-50%);
  height:150px;
  max-width:92%;
  object-fit:contain;
  pointer-events:none;
  z-index:50;
  opacity:.96;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(255,255,255,.18));
}
.reel.has-box .reel-arrow{top:86px; z-index:40}
.reel.has-box .reel-viewport{border-radius:14px}

.reel-arrow{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid rgba(255,255,255,.9);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));z-index:5}
[data-theme="light"] .reel-arrow{border-top-color:rgba(0,0,0,.8)}
.reel-viewport{overflow:hidden}
.reel-track{display:flex;gap:12px;will-change:transform;transform:translateX(0px)}
.reel-item{flex:0 0 auto;width: clamp(140px, 16vw, 190px)}
.reel-inner{border:2px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,var(--reelItemOpacity,.18));padding:10px;display:flex;flex-direction:column;min-height:170px}

.reel-item.is-winner .reel-inner{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset, 0 10px 28px rgba(0,0,0,.28);
  transform: translateY(-2px);
}
.reel-item.is-winner.glow .reel-inner{
  border-color: color-mix(in oklab, var(--winColor, var(--accent)) 55%, rgba(255,255,255,.18));
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 10px 28px rgba(0,0,0,.28),
    0 0 34px color-mix(in oklab, var(--winColor, var(--accent)) 60%, transparent),
    0 0 70px color-mix(in oklab, var(--winColor, var(--accent)) 35%, transparent);
}
[data-theme="light"] .reel-inner{background:rgba(255,255,255,var(--reelItemOpacity,.22));border-color:rgba(0,0,0,.12)}
.reel-img{width:100%;height:92px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.06);display:block}
.reel-name{margin-top:8px;font-weight:800;font-size:14px;line-height:1.1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.4em;min-height:2.4em}
.reel-rarity{margin-top:auto;font-size:12px;color:var(--muted)}
.reel-status{margin-top:10px;font-size:14px;color:var(--muted)}
/* Overlay */
.overlay-body{background:transparent;margin:0;overflow:hidden}
.overlay-wrap{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:22px}
/* OBS-friendly: Seite transparent, nur Reel-Rahmen sichtbar */
.overlay-panel{position:relative;width:min(1100px,96vw);background:transparent;border:none;border-radius:18px;padding:0;backdrop-filter:none}
[data-theme="light"] .overlay-panel{background:transparent;border-color:rgba(0,0,0,.12)}

/* Overlay Reel: etwas "satter", damit die Box oben drüber nicht schwebt */
body[data-page="overlay"] .reel.overlay-reel{
  background: transparent;
  border-color: rgba(255,255,255,.18);
}
body[data-page="overlay"] .reel.overlay-reel::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:46px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,0));
}
body[data-page="overlay"] .reel.overlay-reel.has-box{padding-top:80px}
body[data-page="overlay"] .reel.overlay-reel .reel-boxOverlay{
  top:-54px;
  height:150px;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(255,255,255,.18));
}
body[data-page="overlay"] .reel.overlay-reel.has-box .reel-arrow{top:86px}


/* Overlay slogan (rotates) */
.overlay-slogan{
  position:absolute;
  left:0; right:0;
  top:-118px;
  text-align:center;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:.95;
  z-index:70;
  transition:opacity .22s ease, transform .22s ease;
}
.overlay-slogan.hide{opacity:0;transform:translateY(-6px)}

/* Overlay winner hero card (Phase 5 Block A) */
.overlay-winner{
  /* default (non-overlay pages) */
  margin-top:12px;
  border-radius:18px;
  border:1px solid var(--border);
  display:none;
  overflow:hidden;
  position:relative;
  background:transparent;
  /* Background is rendered by ::before so only the background becomes transparent */
  --winnerBg: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

.overlay-winner::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--winnerBg);
  opacity: var(--winnerBgOpacity, var(--winnerOpacity, 1));
  z-index:0;
}

.overlay-winner > *{ position:relative; z-index:1; }

/* In OBS overlay: winner must be over the reel and must not resize the reel */
body[data-page="overlay"] .overlay-winner{
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  width:min(560px, 92%);
  margin:0;
  z-index:45;
  pointer-events:none;
  /* less transparent, more readable */
  --winnerBg: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Startseite: Gewinneranzeige soll genauso über dem Reel liegen wie im Overlay */
body[data-page="index"] #reelRoot .overlay-winner{
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  width:min(560px, 92%);
  margin:0;
  z-index:45;
  pointer-events:none;
  --winnerBg: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 60px rgba(0,0,0,.30);
}

body[data-page="index"] #reelRoot .overlay-winner.show{
  animation:fadeInCenter .22s ease-out;
}

body[data-page="overlay"] .overlay-winner .winnerTitle{font-size:30px}
body[data-page="overlay"] .overlay-winner .winnerImgWrap{width:120px;height:120px;border-radius:24px}
.overlay-winner.show{display:block;animation:fadeIn .22s ease-out}

/* In OBS overlay we must NOT overwrite the centering transform (translate -50/-50).
   The default fadeIn animates transform to none, which causes a visible "jump".
   Use a dedicated animation that keeps the centering transform intact. */
body[data-page="overlay"] .overlay-winner.show{animation:fadeInCenter .22s ease-out}
.winnerHero{display:flex;flex-direction:column;gap:10px;align-items:center;padding:14px;text-align:center;}
.winnerImgWrap{width:96px;height:96px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.06);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.winnerImgWrap img{width:100%;height:100%;object-fit:contain}

/* Quantity badge must sit ON the image (not next to it) */
.winnerImgWrap{position:relative}
.qtyBadge{
  position:absolute;
  top:8px;
  right:8px;
  padding:6px 10px;
  border-radius:14px;
  font-weight:950;
  font-size:22px;
  line-height:1;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  text-shadow:0 6px 14px rgba(0,0,0,.55);
  transform:rotate(-8deg);
  pointer-events:none;
}
body[data-page="overlay"] .qtyBadge{font-size:28px; padding:8px 12px}
.winnerMeta{flex:1;min-width:0}
.winnerTitle{font-size:22px;font-weight:950;line-height:1.05;text-align:center}
.winnerSub{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.rarBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.18)}
[data-theme="light"] .rarBadge{background:rgba(255,255,255,.45)}
.rarDot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.wonQty{font-weight:900;opacity:.92}
.winnerGlow{box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 18px 50px rgba(0,0,0,.22)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeInCenter{from{opacity:0;transform:translate(-50%,-50%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Better dropdown readability */
select{background:var(--panel2);} 
/* Native dropdowns often ignore option background in some browsers.
   color-scheme (above) makes dark/light dropdowns readable. */
option{background:var(--bg); color:var(--text);} 

/* Overlay minecraft theme */
[data-theme="minecraft"]{
  --bg:#0b0d12;
  --panel:rgba(20,20,20,.55);
  --panel2:rgba(20,20,20,.70);
  --text:#eaffea;
  --muted:rgba(234,255,234,.75);
  --border:rgba(120,255,120,.35);
  --accent:#66ff66;
  image-rendering: pixelated;
}
[data-theme="minecraft"] .overlay-panel{
  background:rgba(20,20,20,.55);
  border:2px solid rgba(120,255,120,.35);
  box-shadow:0 0 0 3px rgba(0,0,0,.25) inset;
}
[data-theme="minecraft"] .reel-inner{border-radius:6px;}

.btn.danger{border-color:rgba(255,80,80,.45); color:rgba(255,180,180,.95)}
.btn.danger:hover{background:rgba(255,80,80,.12)}

/* Premium highlight button */
.btn.premiumHot{background:rgba(255,40,40,.92); border-color:rgba(255,40,40,.95); color:#fff; box-shadow:0 10px 30px rgba(255,40,40,.18)}
.btn.premiumHot:hover{filter:brightness(1.06)}

/* Bottom action bar (Userbereich) */
.bottomActions{position:fixed;left:0;right:0;bottom:0;z-index:9998;padding:10px 12px;display:flex;justify-content:center}
.bottomActions-inner{width:min(980px,100%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;background:rgba(16,18,22,.75);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px}
[data-theme="light"] .bottomActions-inner{background:rgba(255,255,255,.75)}
/* give page breathing room so it doesn't hide behind bar */
body.hasBottomActions{padding-bottom:86px}

/* Winner display */
.winnerLine{display:flex;align-items:center;justify-content:center;gap:12px}
.winnerLine img{width:36px;height:36px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
/* overlayBoxCap entfernt (Box sitzt nur noch prunkvoll auf dem Reel) */
.fireworks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.spark{position:absolute;width:var(--sz,14px);height:var(--sz,14px);border-radius:4px;opacity:.95;filter:drop-shadow(0 0 14px rgba(255,255,255,.26));animation:pop 2200ms ease-out forwards}
@keyframes pop{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx), var(--dy)) scale(.15);opacity:0}}


/* Phase 4: Logs UI */
.logRow{
  display:grid;
  grid-template-columns: 180px 160px 1fr 140px;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:10px;
  background: rgba(255,255,255,.02);
}
.logPrize{ display:flex; gap:10px; align-items:center; }
.miniImg{ width:44px; height:44px; border-radius:10px; object-fit:cover; border:1px solid var(--border); background: rgba(255,255,255,.06); }
@media (max-width: 820px){
  .logRow{ grid-template-columns: 1fr; }
}


/* === Phase B Overlay Layout === */
.overlay-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.overlay-card{text-align:center;animation: overlayFade .35s ease-out both;}
.overlay-image{max-width:320px;max-height:320px;display:block;margin:0 auto 12px;}
.overlay-name{font-size:32px;font-weight:700;}
.overlay-meta{font-size:14px;opacity:.8;margin-top:4px;}
@keyframes overlayFade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* Overlay logo (admin configurable)
   IMPORTANT: keep it flush to the bottom edge. Many browser/OBS sources clip when elements sit outside the body.
   The logo already overlaps the reel because it is positioned inside #reelRoot. */
.overlayLogo{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:45;pointer-events:auto}
/* "overlap" is kept for compatibility with admin toggle; no extra offset so it stays bündig unten. */
.overlayLogo.overlap{bottom:0}
.overlayLogo img{display:block;height:var(--ovLogoH,18px);width:auto;max-width:70vw;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}



/* Premium pricing */
.priceBig{font-size:28px;font-weight:950;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.priceOld{opacity:.55;text-decoration:line-through;font-weight:700;font-size:18px}
.priceNow{font-weight:950}
.priceCur{opacity:.9;font-weight:800}


.fireworks .spark{ width: var(--sz,6px); height: var(--sz,6px); }

.winnerGlowImg{ filter: drop-shadow(0 0 calc(0.35px * var(--fxGlowP,10)) rgba(255,255,255,.85)) drop-shadow(0 0 calc(0.9px * var(--fxGlowP,10)) rgba(255,80,80,.7)); }

.hideOverlayBrand .overlayLogo,
.hideOverlayBrand .reelBranding,
.hideOverlayBrand #reelBranding,
.hideOverlayBrand .reelBrand{ opacity:0 !important; visibility:hidden !important; }


/* v10: Premium FX scaling */
:root{ --fxGlowP: 10; }
.winnerGlow{
  /* glow around winner tile; intensity scaled by --fxGlowP (10..100) */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10) inset,
    0 14px 40px rgba(0,0,0,.28),
    0 0 calc(10px + (0.8px * var(--fxGlowP))) color-mix(in oklab, var(--winColor, var(--accent)) 70%, transparent),
    0 0 calc(22px + (1.4px * var(--fxGlowP))) color-mix(in oklab, var(--winColor, var(--accent)) 55%, transparent);
}
.winnerGlowImg{
  filter:
    drop-shadow(0 0 calc(8px + (0.8px * var(--fxGlowP))) color-mix(in oklab, var(--winColor, #ff4d4d) 70%, transparent))
    drop-shadow(0 0 calc(18px + (1.2px * var(--fxGlowP))) color-mix(in oklab, var(--winColor, #ff4d4d) 55%, transparent));
}
/* ensure overlay branding can be hidden during win */
body.hideOverlayBrand .overlayLogo{opacity:0 !important;pointer-events:none !important;}


/* Global Footer always visible across tabs */
#lkGlobalFooter{position:sticky;bottom:0;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);}