/* =========================================================
   Michis Converter – Ultra-Clean & Smooth Edition
   ========================================================= */
:root {
  --bg: #05060b;
  --panel: rgba(16, 19, 32, .62);
  --panel-solid: #101322;
  --panel-2: rgba(25, 30, 50, .55);
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #f1f3fb;
  --muted: #8c95b4;
  --accent: #8b5cff;
  --accent-2: #22d3ee;
  --accent-3: #ff5ca8;
  --discord: #5865F2;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --mx: 50vw;
  --my: 30vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: rgba(139, 92, 255, .5); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }

/* ---------- Hintergrund ---------- */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .45; will-change: transform; }
.orb.o1 { width: 650px; height: 650px; background: #6d3bff; top: -240px; left: -140px; animation: float1 24s ease-in-out infinite; }
.orb.o2 { width: 560px; height: 560px; background: #0fb5d6; top: 8%; right: -180px; animation: float2 28s ease-in-out infinite; }
.orb.o3 { width: 520px; height: 520px; background: #d6307f; bottom: -220px; left: 26%; opacity: .28; animation: float3 32s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(140px, 120px) scale(1.15); } }
@keyframes float2 { 50% { transform: translate(-160px, 140px) scale(.9); } }
@keyframes float3 { 50% { transform: translate(180px, -120px) scale(1.2); } }
.grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 18%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 18%, #000 15%, transparent 75%);
}
.spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(139, 92, 255, .11), transparent 60%);
}
#fx { position: fixed; inset: 0; z-index: 200; pointer-events: none; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 6, 11, .68);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  position: sticky; top: 0; z-index: 30;
  animation: dropIn .7s var(--ease) both;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-100%); } }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17.5px; letter-spacing: -.02em; flex-wrap: wrap; }
.brand > span { background: linear-gradient(90deg, #fff, #c9c2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad); position: relative;
  box-shadow: 0 6px 24px rgba(139, 92, 255, .48);
  transition: transform .6s var(--ease);
}
.logo::after { content: ''; position: absolute; inset: -4px; border-radius: 15px; background: var(--grad); filter: blur(12px); opacity: .4; z-index: -1; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .15; transform: scale(1.1); } }
.logo svg { width: 20px; height: 20px; color: #fff; }
.brand:hover .logo { transform: rotate(180deg) scale(1.08); }

.pub-badge {
  border: 1px solid rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .1); color: var(--ok);
  padding: 4px 12px 4px 22px; border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  position: relative; transition: .25s var(--ease); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-text-fill-color: initial;
}
.pub-badge::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.pub-badge:hover { background: rgba(52, 211, 153, .2); transform: translateY(-1px); }

.topbar-center { display: flex; align-items: center; }
.tabs { display: flex; position: relative; gap: 2px; background: rgba(255, 255, 255, .04); padding: 4px; border-radius: 14px; border: 1px solid var(--border); }
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 10px; background: var(--grad); box-shadow: 0 4px 18px rgba(139, 92, 255, .45); transition: transform .45s var(--ease), width .45s var(--ease); }
.tab {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 8px 20px; border-radius: 10px; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 13.5px; transition: color .25s;
}
.tab:hover { color: var(--text); }
.tab.active { color: #fff; }

/* ---------- Chill Music Player Widget ---------- */
.music-Widget {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  transition: border-color .3s, box-shadow .35s var(--ease), background .3s;
}
.music-Widget:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .06); }
.music-Widget.playing { border-color: rgba(139, 92, 255, .45); box-shadow: 0 0 26px -6px rgba(139, 92, 255, .45); }
.music-toggle {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(139, 92, 255, .45); transition: transform .3s var(--ease);
}
.music-toggle:hover { transform: scale(1.08); }
.music-toggle:active { transform: scale(.93); }
.music-toggle .play-ico { width: 16px; height: 16px; margin-left: 1px; }
.music-Widget.playing .play-ico { display: none; }
.eq { display: none; align-items: flex-end; gap: 2.2px; height: 13px; }
.music-Widget.playing .eq { display: flex; }
.eq span {
  width: 2.5px; border-radius: 2px; background: #fff;
  animation: eqBounce .85s ease-in-out infinite alternate;
}
.eq span:nth-child(1) { height: 5px; animation-duration: .55s; }
.eq span:nth-child(2) { height: 12px; animation-duration: .75s; animation-delay: .15s; }
.eq span:nth-child(3) { height: 7px; animation-duration: .62s; animation-delay: .3s; }
.eq span:nth-child(4) { height: 11px; animation-duration: .8s; animation-delay: .1s; }
@keyframes eqBounce { from { height: 3px; } to { height: 13px; } }

.music-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 115px; }
.music-label { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--accent-2); }
.music-station-row { display: flex; align-items: center; gap: 4px; }
.music-station { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; min-width: 86px; text-align: center; }
.station-nav {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 3px;
  font-size: 14px; font-weight: 700; line-height: 1; border-radius: 4px; transition: color .2s, background .2s;
}
.station-nav:hover { color: #fff; background: rgba(255,255,255,.08); }
.music-vol { display: flex; align-items: center; gap: 6px; padding-left: 4px; border-left: 1px solid var(--border); }
.music-vol svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
#musicVolume { width: 62px; height: 4px; }
#musicVolume::-webkit-slider-thumb { width: 13px; height: 13px; border-width: 3px; }

main { max-width: 1180px; margin: 0 auto; padding: 40px 24px 96px; }
.view { display: none; }
.view.active { display: block; animation: viewIn .55s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px) scale(.992); filter: blur(5px); } }

/* ---------- Hero ---------- */
.hero { text-align: center; margin-bottom: 32px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #d3c6ff;
  background: linear-gradient(90deg, rgba(139,92,255,.16), rgba(34,211,238,.12));
  border: 1px solid rgba(139, 92, 255, .32);
  box-shadow: 0 6px 24px -8px rgba(139, 92, 255, .45);
}
.hero h1 {
  margin: 0 0 12px; font-size: clamp(34px, 5.5vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06;
  background: linear-gradient(120deg, #fff 20%, #c4b5ff 50%, #67e8f9 80%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 8s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
.hero p { margin: 0 auto; color: var(--muted); max-width: 630px; font-size: 16px; }
.hero b { color: var(--text); font-weight: 600; }
.hero > * { animation: rise .75s var(--ease) both; }
.hero > *:nth-child(2) { animation-delay: .06s; }
.hero > *:nth-child(3) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.format-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.format-row span {
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); background: rgba(255, 255, 255, .025);
  transition: .25s var(--ease);
}
.format-row span:hover { color: #fff; border-color: var(--accent); transform: translateY(-2px); background: rgba(139, 92, 255, .12); }

/* ---------- Dropzone ---------- */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 50px 20px; margin-bottom: 26px; border-radius: var(--radius);
  background: var(--panel); cursor: pointer; isolation: isolate;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  animation: rise .85s var(--ease) .14s both;
}
.dropzone::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.8px; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), rgba(139,92,255,.9), rgba(34,211,238,.9), rgba(255,92,168,.9), rgba(139,92,255,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .38; animation: spin-ang 7s linear infinite; transition: opacity .3s;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin-ang { to { --ang: 360deg; } }
.dropzone:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -22px rgba(139, 92, 255, .45); }
.dropzone:hover::before, .dropzone.drag::before { opacity: 1; }
.dropzone.drag { transform: scale(1.015); background: rgba(139, 92, 255, .13); box-shadow: 0 0 0 6px rgba(139, 92, 255, .15), 0 30px 80px -20px rgba(139, 92, 255, .6); }
.dropzone.small { padding: 30px 16px; margin-bottom: 22px; animation: none; }
.dz-icon {
  width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center; margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(139,92,255,.24), rgba(34,211,238,.16)); color: #c4b5ff;
  border: 1px solid var(--border-strong); animation: bob 3.2s ease-in-out infinite;
  transition: transform .4s var(--ease);
}
.dropzone:hover .dz-icon, .dropzone.drag .dz-icon { transform: scale(1.13) rotate(-6deg); animation-play-state: paused; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.dz-icon svg { width: 28px; height: 28px; }
.dz-title { font-weight: 700; font-size: 17.5px; }
.dz-title u { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }
.dz-sub { color: var(--muted); font-size: 13px; max-width: 520px; }

/* ---------- Layout / Cards ---------- */
.layout { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 920px) { .layout { grid-template-columns: 1fr; } .settings { position: static !important; } }
.card {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 22px 54px -32px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .055);
  transition: border-color .3s, box-shadow .4s var(--ease);
  animation: rise .85s var(--ease) .22s both;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 0%), rgba(139, 92, 255, .11), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--border-strong); }
.card h2 { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.settings { position: sticky; top: 88px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; }
.field .value { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
small { color: var(--muted); font-size: 12px; }
input[type="number"], input[type="text"], select {
  width: 100%; padding: 10px 13px; border-radius: 12px; outline: none;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); transition: .25s var(--ease);
}
select option { background: var(--panel-solid); color: var(--text); }
input:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139, 92, 255, .18); background: rgba(255, 255, 255, .06); }
input[type="file"] { font-size: 13px; color: var(--muted); }
input[type="file"]::file-selector-button {
  border: 1px solid var(--border-strong); background: rgba(255,255,255,.06); color: var(--text); padding: 6px 12px;
  border-radius: 10px; margin-right: 10px; cursor: pointer; transition: .2s;
}
input[type="file"]::file-selector-button:hover { background: rgba(139, 92, 255, .25); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); outline: none; padding: 0; border: 0; box-shadow: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; box-shadow: 0 2px 12px rgba(139, 92, 255, .6); transition: transform .2s var(--ease); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.26); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2 .field { margin-bottom: 12px; }
.input-group { display: flex; gap: 8px; }
.input-group select { width: 84px; flex: none; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 14px; cursor: pointer; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 7px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.04); display: grid; place-items: center; cursor: pointer; transition: .25s var(--ease); padding: 0; flex: none; }
.check input::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0) translate(1px, -1px); transition: transform .25s var(--ease); }
.check input:checked { background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px rgba(139, 92, 255, .45); }
.check input:checked::after { transform: rotate(-45deg) scale(1) translate(1px, -1px); }

.segmented { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 14px; padding: 4px; }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--grad); box-shadow: 0 4px 16px rgba(139, 92, 255, .4); transition: transform .45s var(--ease); }
.segmented button { position: relative; z-index: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .25s; }
.segmented button.active { color: #fff; }

.mode-panel { margin-bottom: 18px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); animation: panelIn .45s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.mode-panel .field:last-child { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  border: 1px solid var(--border); background: rgba(255,255,255,.04); padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); transition: .25s var(--ease);
}
.chips button:hover { color: #fff; border-color: var(--accent); background: rgba(139, 92, 255, .2); transform: translateY(-2px); }
.chips button:active { transform: scale(.94); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; border: 1px solid transparent; padding: 10px 18px; border-radius: 12px; font-weight: 700; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s, background .2s; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: scale(.95); }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 8px 28px -8px rgba(139, 92, 255, .8); }
.btn.primary:not(:disabled):hover { box-shadow: 0 14px 34px -8px rgba(139, 92, 255, .95); filter: brightness(1.08); }
.btn.primary:not(:disabled)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn.primary:not(:disabled):hover::after { transform: translateX(120%); }
.btn.ghost { background: rgba(255,255,255,.03); border-color: var(--border); color: var(--muted); }
.btn.ghost:hover { color: #fff; border-color: var(--border-strong); background: rgba(255,255,255,.07); }
.btn.ok { background: rgba(52, 211, 153, .14); color: var(--ok); border-color: rgba(52, 211, 153, .35); }
.btn.ok:hover { background: rgba(52, 211, 153, .26); box-shadow: 0 8px 24px -8px rgba(52, 211, 153, .6); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.icon-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 7px; border-radius: 10px; display: grid; place-items: center; transition: .25s var(--ease); }
.icon-btn:hover { color: var(--err); background: rgba(248, 113, 113, .12); transform: rotate(90deg); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Dateiliste ---------- */
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.files-head h2 { margin: 0; }
.actions { display: flex; gap: 8px; }
.count { background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; min-width: 24px; text-align: center; padding: 1px 8px; border-radius: 999px; letter-spacing: 0; }
.count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }
.empty { color: var(--muted); text-align: center; padding: 44px 14px; font-size: 14px; border: 1px dashed var(--border-strong); border-radius: 16px; background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.012) 12px 24px); }

.file-list, .link-list { display: flex; flex-direction: column; gap: 12px; }
.file {
  position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--border);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease);
}
.file.enter { animation: itemIn .55s var(--ease) both; }
@keyframes itemIn { from { opacity: 0; transform: translateX(-28px) scale(.96); } }
.file:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .9); }
.file.done { border-color: rgba(52, 211, 153, .3); background: linear-gradient(90deg, rgba(52, 211, 153, .08), var(--panel-2) 60%); }
.file.error { border-color: rgba(248, 113, 113, .35); }
.file.busy::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: scan 1.4s linear infinite; }
@keyframes scan { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.kind { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; overflow: hidden; border: 1px solid var(--border); }
.kind img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.file:hover .kind img { transform: scale(1.14); }
.kind.image { background: rgba(34, 211, 238, .14); color: var(--accent-2); }
.kind.audio { background: rgba(251, 191, 36, .14); color: var(--warn); }
.kind.video { background: rgba(139, 92, 255, .18); color: #b9a3ff; }
.file-main { min-width: 0; }
.file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.file-meta .arrow { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.file-meta .good { color: var(--ok); font-weight: 600; }
.file-meta .warn { color: var(--warn); }
.file-meta .err { color: var(--err); }
.file-side { display: flex; align-items: center; gap: 8px; }
.file-side select { width: auto; padding: 7px 12px; font-weight: 700; }
.progress { height: 6px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); background-size: 200% 100%; animation: flow 1.2s linear infinite; width: 0; transition: width .5s var(--ease); box-shadow: 0 0 14px rgba(34, 211, 238, .6); }
@keyframes flow { to { background-position: -200% 0; } }
.spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--accent-2); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Links ---------- */
.link {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  padding: 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--border);
  animation: itemIn .55s var(--ease) both; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease);
}
.link:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 18px 40px -22px rgba(139, 92, 255, .6); }
.thumb {
  width: 84px; height: 84px; border-radius: 14px; object-fit: contain; border: 1px solid var(--border);
  background: repeating-conic-gradient(#1f2540 0% 25%, #161b30 0% 50%) 50% / 14px 14px; transition: transform .5s var(--ease);
}
.link:hover .thumb { transform: scale(1.06) rotate(-2deg); }
.link-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.link-url { display: flex; gap: 8px; }
.link-url input { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; padding: 8px 12px; }
.lan { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lan a { color: var(--accent-2); text-decoration: none; cursor: pointer; }
.link-side { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ---------- Discord Community Showcase ---------- */
.community-section {
  margin-top: 64px; padding-top: 44px;
  border-top: 1px solid var(--border);
  animation: rise .9s var(--ease) .3s both;
}
.community-head { text-align: center; margin-bottom: 28px; }
.community-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: #a5b4fc; background: rgba(88, 101, 242, .14); border: 1px solid rgba(88, 101, 242, .35);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.community-head h2 {
  margin: 0 0 6px; font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: -.02em;
}
.community-head p { margin: 0; color: var(--muted); font-size: 14.5px; }

.discord-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
@media (max-width: 780px) { .discord-grid { grid-template-columns: 1fr; } }

.discord-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
  background: var(--panel); border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 56px -28px rgba(0, 0, 0, .85);
  transition: transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.discord-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(88, 101, 242, .55);
  box-shadow: 0 30px 70px -24px rgba(88, 101, 242, .45);
}
.discord-card.moria:hover {
  border-color: rgba(139, 92, 255, .6);
  box-shadow: 0 30px 70px -24px rgba(139, 92, 255, .5);
}

.dc-banner {
  position: relative; height: 132px; background-size: cover; background-position: center;
  transition: transform .65s var(--ease);
}
.dc-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,22,.15) 0%, rgba(16,19,32,.95) 100%);
}
.discord-card:hover .dc-banner { transform: scale(1.05); }
.dc-badge {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(10, 12, 22, .72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .15); color: #fff;
}

.dc-body {
  position: relative; z-index: 2; padding: 0 22px 22px; margin-top: -34px;
  display: flex; flex-direction: column; flex: 1;
}
.dc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dc-avatar {
  width: 68px; height: 68px; border-radius: 20px; object-fit: cover;
  border: 4px solid #121628; box-shadow: 0 10px 28px rgba(0,0,0,.6);
  background: #121628; transition: transform .45s var(--ease);
}
.discord-card:hover .dc-avatar { transform: scale(1.08) rotate(-3deg); }

.dc-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
}
.dc-stat b { color: var(--text); font-weight: 700; }
.dot-on, .dot-mem { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot-mem { background: #8c95b4; }

.dc-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.dc-desc { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.55; flex: 1; }
.dc-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.dc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #5865F2, #7c5cff);
  box-shadow: 0 8px 24px -6px rgba(88, 101, 242, .7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s;
}
.discord-card:hover .dc-btn { filter: brightness(1.1); box-shadow: 0 12px 30px -6px rgba(88, 101, 242, .95); }
.dc-btn svg { width: 17px; height: 17px; }
.dc-link { font-size: 12px; font-weight: 600; color: var(--muted); font-family: ui-monospace, Consolas, monospace; transition: color .2s; }
.discord-card:hover .dc-link { color: var(--text); }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; justify-content: center; padding: 12px 14px; }
  .music-Widget { order: 3; }
}
@media (max-width: 640px) {
  .tab { padding: 8px 12px; }
  .file { grid-template-columns: 44px 1fr; }
  .kind { width: 44px; height: 44px; }
  .file-side { grid-column: 1 / -1; justify-content: flex-end; }
  .link { grid-template-columns: 60px 1fr; }
  .thumb { width: 60px; height: 60px; }
  .link-side { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  main { padding-top: 26px; }
}

/* ---------- Vollbild-Drop ---------- */
.drop-overlay {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; text-align: center; pointer-events: none;
  background: rgba(5, 6, 11, .78); backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s;
}
.drop-overlay.show { opacity: 1; }
.drop-overlay div { padding: 60px 90px; border: 3px dashed var(--accent); border-radius: 32px; font-size: 26px; font-weight: 800; background: rgba(139, 92, 255, .1); animation: bob 1.6s ease-in-out infinite; }
.drop-overlay small { display: block; margin-top: 8px; font-weight: 500; font-size: 14px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 300; }
.toast {
  background: rgba(18, 22, 38, .92); backdrop-filter: blur(16px); border: 1px solid var(--border-strong); border-left: 4px solid var(--accent);
  padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: 0 18px 40px -10px rgba(0,0,0,.75);
  animation: toastIn .5s var(--ease) both; max-width: 360px;
}
.toast.out { animation: toastOut .38s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(60px) scale(.9); } }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ---------- Erweiterter 105-Musik-Player & Modal ---------- */
.music-info { cursor: pointer; min-width: 150px; }
.music-top-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.music-cat { font-size: 9.5px; font-weight: 700; color: var(--muted); }
.music-song {
  font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 165px; margin-top: 1px;
}
.music-btn {
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);
  border-radius: 999px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: .25s var(--ease); white-space: nowrap;
}
.music-btn:hover { border-color: var(--accent); background: rgba(139, 92, 255, .2); transform: translateY(-1px); }
.music-btn.list-btn { background: rgba(139, 92, 255, .16); border-color: rgba(139, 92, 255, .38); color: #ddd4ff; }

.hot-chip {
  cursor: pointer; border-color: rgba(251, 191, 36, .4) !important;
  background: rgba(251, 191, 36, .1) !important; color: #fde68a !important;
}
.hot-chip:hover { background: rgba(251, 191, 36, .22) !important; box-shadow: 0 6px 20px -6px rgba(251, 191, 36, .5); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 6, 11, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: fadeIn .25s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
.modal-box {
  width: min(920px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: #101424; border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0,0,0,.85); overflow: hidden;
  animation: viewIn .35s var(--ease);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.modal-head p { margin: 0; font-size: 13px; color: var(--muted); }
.modal-controls { padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-pill {
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s;
}
.cat-pill:hover { color: #fff; border-color: var(--border-strong); }
.cat-pill.active { background: var(--grad); color: #fff; border-color: transparent; }

.station-grid {
  padding: 18px 24px 24px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.st-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(255,255,255,.03); cursor: pointer; text-align: left;
  transition: transform .25s var(--ease), border-color .2s, background .2s;
}
.st-card:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(139, 92, 255, .1); }
.st-card.active { border-color: var(--ok); background: rgba(52, 211, 153, .12); }
.st-num { font-size: 11px; font-weight: 800; color: var(--muted); min-width: 24px; }
.st-main { min-width: 0; flex: 1; }
.st-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sub { font-size: 11px; color: var(--muted); }
.st-play { font-size: 13px; color: var(--accent-2); }

/* ---------- 🎰 Mufasa Casino & Economy Rangliste ---------- */
.gold-pill {
  color: #fde68a !important;
  background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(245,158,11,.12)) !important;
  border-color: rgba(251, 191, 36, .4) !important;
  box-shadow: 0 6px 24px -8px rgba(251, 191, 36, .45) !important;
}
.gold-title {
  background: linear-gradient(120deg, #fff 15%, #fde68a 48%, #f59e0b 82%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}

.casino-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px;
}
@media (max-width: 900px) { .casino-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .casino-stats-grid { grid-template-columns: 1fr; } }

.stat-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--border);
  backdrop-filter: blur(18px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.8);
  transition: transform .35s var(--ease), border-color .3s;
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(251, 191, 36, .35); }
.stat-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .28);
}
.stat-val { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.stat-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }

.king-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 18px 24px; margin-bottom: 24px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(251, 191, 36, .16), rgba(139, 92, 255, .12) 60%, rgba(16, 19, 32, .8));
  border: 1px solid rgba(251, 191, 36, .42);
  box-shadow: 0 20px 50px -24px rgba(251, 191, 36, .35);
}
.king-left { display: flex; align-items: center; gap: 16px; }
.king-avatar-wrap { position: relative; }
.king-avatar { width: 62px; height: 62px; border-radius: 18px; object-fit: cover; border: 3px solid #fbbf24; box-shadow: 0 0 24px rgba(251, 191, 36, .5); }
.king-crown { position: absolute; -top: 12px; top: -12px; left: -8px; font-size: 22px; transform: rotate(-14deg); filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.king-tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #fbbf24; text-transform: uppercase; }
.king-name { font-size: 20px; font-weight: 800; }
.king-metrics { display: flex; gap: 18px; flex-wrap: wrap; }
.king-metric { text-align: right; }
.king-metric b { display: block; font-size: 17px; color: #fde68a; }
.king-metric span { font-size: 11.5px; color: var(--muted); }

.casino-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.casino-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ctab {
  border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--muted);
  padding: 9px 15px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: .25s var(--ease);
}
.ctab:hover { color: #fff; border-color: var(--border-strong); transform: translateY(-1px); }
.ctab.active {
  background: linear-gradient(135deg, #f59e0b, #8b5cff); color: #fff; border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(245, 158, 11, .7);
}
.casino-search { display: flex; gap: 8px; flex: 1; min-width: 260px; max-width: 380px; }

.casino-search-results {
  margin-bottom: 24px; padding: 18px; border-radius: 18px;
  background: rgba(139, 92, 255, .08); border: 1px solid rgba(139, 92, 255, .35);
}

/* Top 3 Podium */
.podium-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end;
  margin-bottom: 24px;
}
@media (max-width: 780px) { .podium-grid { grid-template-columns: 1fr; } }

.podium-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px 22px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--border);
  backdrop-filter: blur(20px); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.podium-card:hover { transform: translateY(-6px); }
.podium-card.rank-1 {
  order: 2; padding-top: 32px;
  background: linear-gradient(180deg, rgba(251, 191, 36, .16), rgba(16, 19, 32, .85) 70%);
  border-color: rgba(251, 191, 36, .5);
  box-shadow: 0 28px 65px -24px rgba(251, 191, 36, .45);
}
.podium-card.rank-2 {
  order: 1;
  background: linear-gradient(180deg, rgba(203, 213, 225, .12), rgba(16, 19, 32, .85) 70%);
  border-color: rgba(203, 213, 225, .35);
}
.podium-card.rank-3 {
  order: 3;
  background: linear-gradient(180deg, rgba(217, 119, 6, .14), rgba(16, 19, 32, .85) 70%);
  border-color: rgba(217, 119, 6, .4);
}
@media (max-width: 780px) {
  .podium-card.rank-1, .podium-card.rank-2, .podium-card.rank-3 { order: unset; }
}

.pod-medal { font-size: 28px; margin-bottom: 8px; }
.pod-avatar {
  width: 76px; height: 76px; border-radius: 22px; object-fit: cover; margin-bottom: 12px;
  border: 3px solid rgba(255,255,255,.2); box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.rank-1 .pod-avatar { width: 88px; height: 88px; border-color: #fbbf24; box-shadow: 0 0 30px rgba(251, 191, 36, .5); }
.pod-name { font-size: 18px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-val { font-size: 20px; font-weight: 900; color: #fde68a; margin: 6px 0 10px; }
.pod-sub { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--muted); }
.pod-sub span { background: rgba(255,255,255,.05); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }

/* Ranglisten-Zeilen */
.lb-sub { font-size: 12px; color: var(--ok); font-weight: 600; }
.lb-list { display: flex; flex-direction: column; gap: 10px; }
.lb-row {
  display: grid; grid-template-columns: 42px 46px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: 15px; background: var(--panel-2); border: 1px solid var(--border);
  transition: transform .3s var(--ease), border-color .25s;
}
.lb-row:hover { transform: translateX(4px); border-color: var(--border-strong); }
.lb-rank { font-size: 14px; font-weight: 800; color: var(--muted); text-align: center; }
.lb-ava { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; border: 1px solid var(--border-strong); }
.lb-user { min-width: 0; }
.lb-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.lb-val { font-size: 16px; font-weight: 800; color: #fde68a; text-align: right; white-space: nowrap; }


/* ================= 👑 MUFASA ROYAL – WEB CASINO, MINISPIELE & SHOP ================= */
.tab-bonus {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0b0c10;
  box-shadow: 0 0 12px rgba(251, 191, 36, .6);
}

.royal-auth-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(139, 92, 255, .1), rgba(16, 19, 32, .9));
  border: 1px solid rgba(251, 191, 36, .4);
  box-shadow: 0 20px 55px -25px rgba(251, 191, 36, .35);
}

.royal-user-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 240px;
}

.royal-avatar {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 20px rgba(251, 191, 36, .4);
}

.royal-user-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.royal-user-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.royal-sync-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, .4);
}

.royal-user-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

.royal-user-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.r-stat {
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  text-align: center;
  min-width: 105px;
}

.r-stat.gold {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .45);
}

.r-lbl {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.r-val {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #fde68a;
  margin-top: 2px;
}

.royal-auth-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gold-btn {
  background: linear-gradient(135deg, #f59e0b, #eab308, #d97706) !important;
  color: #0b0c10 !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 30px -10px rgba(245, 158, 11, .6) !important;
}
.gold-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 38px -8px rgba(245, 158, 11, .8) !important;
}

.purple-btn {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.green-btn {
  background: linear-gradient(135deg, #10b981, #22c55e) !important;
  color: #051b11 !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 30px -8px rgba(34, 197, 94, .65) !important;
}

/* Subnav */
.royal-subnav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.rnav {
  flex: 1;
  min-width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s var(--ease);
}

.rnav:hover {
  border-color: rgba(251, 191, 36, .45);
  transform: translateY(-2px);
}

.rnav.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, .2), rgba(139, 92, 255, .18));
  border-color: #fbbf24;
  color: #fde68a;
  box-shadow: 0 14px 36px -14px rgba(251, 191, 36, .45);
}

.rnav-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.rnav-tag.bonus {
  background: linear-gradient(135deg, #22c55e, #10b981);
  color: #04130a;
  font-weight: 900;
}

/* Bet Bar & Game Selector */
.royal-bet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 18px 22px;
}

.bet-input-wrap label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
  margin-bottom: 6px;
}

.bet-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#royalBetInput {
  width: 130px;
  font-size: 16px;
  font-weight: 800;
  color: #fde68a;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(251, 191, 36, .4);
  border-radius: 12px;
  padding: 9px 12px;
}

.bet-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bet-chips button {
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
}
.bet-chips button:hover {
  background: rgba(251, 191, 36, .2);
  border-color: #fbbf24;
  color: #fde68a;
}

.game-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gsel {
  padding: 10px 15px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.gsel:hover {
  color: #fff;
  border-color: var(--border-strong);
}
.gsel.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0b0c10;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 10px 25px -8px rgba(245, 158, 11, .6);
}

/* Game Stages */
.game-stage {
  padding: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  text-align: left;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.stage-head h2 {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 4px;
}

.stage-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.payout-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.payout-pills span {
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .3);
  color: #fde68a;
}

/* SLOTS MACHINE */
.slots-machine {
  display: flex;
  justify-content: center;
  margin: 20px 0 24px;
}

.slots-frame {
  display: flex;
  gap: 18px;
  padding: 24px 30px;
  border-radius: 26px;
  background: linear-gradient(180deg, #090b12, #121626);
  border: 3px solid rgba(251, 191, 36, .55);
  box-shadow: 0 0 50px rgba(251, 191, 36, .2), inset 0 0 30px rgba(0, 0, 0, .8);
}

.slot-reel {
  width: 115px;
  height: 125px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .1), rgba(10, 12, 22, .95));
  border: 2px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 62px;
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, .7);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}

.slot-reel.spinning .reel-symbol {
  animation: reelSpin .11s linear infinite;
  filter: blur(2px);
}

.slot-reel.win-glow {
  border-color: #fbbf24;
  box-shadow: 0 0 35px rgba(251, 191, 36, .75), inset 0 0 20px rgba(251, 191, 36, .3);
  transform: scale(1.06);
}

@keyframes reelSpin {
  0% { transform: translateY(-28px) scale(.9); opacity: .6; }
  50% { transform: translateY(0) scale(1.05); opacity: 1; }
  100% { transform: translateY(28px) scale(.9); opacity: .6; }
}

.stage-result {
  font-size: 16px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  margin: 18px auto;
  max-width: 640px;
}
.stage-result.win {
  background: rgba(34, 197, 94, .15);
  border-color: rgba(34, 197, 94, .5);
  color: #86efac;
}
.stage-result.lose {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .45);
  color: #fca5a5;
}

.stage-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mega-btn {
  padding: 15px 34px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}

/* 3D COINFLIP */
.coinflip-arena {
  perspective: 900px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.coin-3d {
  width: 145px;
  height: 145px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.15, .85, .25, 1);
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  border: 5px solid #fde68a;
  box-shadow: 0 18px 45px rgba(245, 158, 11, .45), inset 0 0 25px rgba(255, 255, 255, .35);
}

.coin-face span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  margin-top: 4px;
}

.coin-front {
  background: radial-gradient(circle at 30% 30%, #fef08a, #f59e0b 65%, #b45309);
  color: #1c1917;
}

.coin-back {
  background: radial-gradient(circle at 30% 30%, #e9d5ff, #8b5cf6 65%, #4c1d95);
  border-color: #c4b5fd;
  color: #fff;
  transform: rotateY(180deg);
}

/* ROULETTE */
.roulette-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
  text-align: left;
}
@media (max-width: 900px) {
  .roulette-layout { grid-template-columns: 1fr; justify-items: center; }
}

.roulette-wheel-wrap {
  position: relative;
  width: 290px;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roulette-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 26px;
  color: #fbbf24;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(251,191,36,.7));
}

.roulette-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .7), 0 0 0 3px rgba(251,191,36,.35), 0 0 40px rgba(251,191,36,.18);
  transition: transform 4.6s cubic-bezier(.12, .72, .12, 1);
  will-change: transform;
}
.roulette-wheel svg { width: 100%; height: 100%; display: block; }

.roulette-ball-track {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: transform 4.6s cubic-bezier(.2, .62, .1, 1);
  will-change: transform;
}
.roulette-ball {
  position: absolute;
  top: 26px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d1d5db 55%, #6b7280);
  box-shadow: 0 2px 6px rgba(0,0,0,.8), 0 0 8px rgba(255,255,255,.5);
  opacity: 0;
  transition: top 1.2s cubic-bezier(.5, 0, .5, 1) 3.2s, opacity .3s;
}
.roulette-ball-track.rolling .roulette-ball { opacity: 1; top: 34px; }
.roulette-ball-track.settled .roulette-ball { opacity: 1; top: 34px; transition: none; }

.roulette-center {
  position: relative;
  z-index: 5;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2b3650, #090b10 70%);
  border: 3px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #fde68a;
  box-shadow: 0 8px 20px rgba(0,0,0,.7), inset 0 0 18px rgba(251,191,36,.25);
  text-align: center;
  line-height: 1.05;
}
.roulette-center.hit { animation: rcPop .6s var(--ease); }
@keyframes rcPop { 40% { transform: scale(1.18); box-shadow: 0 0 40px rgba(251,191,36,.8); } }

/* Roulette-Tisch (0 + 3×12) */
.roulette-table {
  display: grid;
  grid-template-columns: 38px repeat(12, 1fr);
  grid-template-rows: repeat(3, 34px);
  gap: 3px;
  padding: 8px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #166534 0%, #0f3d22 100%);
  border: 2px solid rgba(251,191,36,.45);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.rt-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s, filter .15s;
  user-select: none;
}
.rt-cell:hover { transform: translateY(-2px); filter: brightness(1.25); }
.rt-cell.red { background: #dc2626; }
.rt-cell.black { background: #18181b; }
.rt-cell.green { background: #16a34a; grid-row: 1 / span 3; font-size: 16px; }
.rt-cell.selected { outline: 3px solid #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,.9); z-index: 1; }
.rt-cell.winner { animation: rtWin 1s ease-in-out 3; outline: 3px solid #fff; }
@keyframes rtWin { 50% { box-shadow: 0 0 22px 6px rgba(255,255,255,.85); transform: scale(1.12); } }
@media (max-width: 600px) {
  .roulette-table { grid-template-columns: 28px repeat(12, 1fr); grid-template-rows: repeat(3, 28px); }
  .rt-cell { font-size: 10px; }
}

/* Gemeinsamer Segment-Umschalter */
.seg-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.seg-toggle button { padding: 8px 12px; border-radius: 9px; border: 0; background: transparent; color: var(--muted, #9ca3af); font-weight: 800; font-size: 12.5px; cursor: pointer; transition: all .2s; }
.seg-toggle button.active { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1205; box-shadow: 0 4px 14px rgba(251,191,36,.35); }

/* PLINKO */
.plinko-header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.plinko-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 4px 6px;
  font-size: 13px;
}
.plinko-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #fde68a;
  font-weight: 700;
}
.plinko-counter-pill b {
  color: #a855f7;
  font-size: 15px;
}
.plinko-arena { display: flex; justify-content: center; margin: 6px 0 4px; }
#plinkoCanvas { width: 100%; max-width: 640px; height: auto; border-radius: 18px; background: radial-gradient(ellipse at top, #1e1b4b 0%, #0b0a1a 75%); box-shadow: inset 0 0 40px rgba(139,92,255,.25), 0 14px 40px rgba(0,0,0,.5); }

/* DICE */
.dice-arena { padding: 10px 6px 4px; }
.dice-roll { font-size: 64px; font-weight: 900; text-align: center; letter-spacing: .02em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 20px rgba(251,191,36,.35)); transition: transform .2s; }
.dice-roll.win { background: linear-gradient(180deg, #bbf7d0, #22c55e); -webkit-background-clip: text; background-clip: text; animation: rcPop .6s; }
.dice-roll.lose { background: linear-gradient(180deg, #fecaca, #ef4444); -webkit-background-clip: text; background-clip: text; }
.dice-track { position: relative; height: 18px; margin: 18px 4px 22px; border-radius: 99px; background: #ef4444; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.dice-fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: #22c55e; transition: all .2s; }
.dice-track input[type="range"] { position: absolute; inset: -6px 0; width: 100%; background: transparent; margin: 0; z-index: 2; }
.dice-marker { position: absolute; top: -30px; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: #fff; color: #111; font-weight: 900; font-size: 12px; transition: left .6s cubic-bezier(.2,.8,.2,1); z-index: 3; }
.dice-marker::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.dice-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.dice-stats div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 3px; }
.dice-stats span { font-size: 11px; color: var(--muted, #9ca3af); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dice-stats b { font-size: 17px; color: #fde68a; }

/* GLÜCKSRAD */
.fortune-wrap { position: relative; width: 320px; height: 320px; margin: 4px auto 6px; }
.fortune-wheel { position: absolute; inset: 0; border-radius: 50%; transition: transform 5s cubic-bezier(.1, .7, .1, 1); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 6px #b45309, 0 0 0 10px #fbbf24, 0 0 50px rgba(251,191,36,.35); }
.fortune-wheel svg { width: 100%; height: 100%; display: block; }
.fortune-pointer { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 32px; color: #fbbf24; filter: drop-shadow(0 4px 8px rgba(0,0,0,.8)); }
.fortune-hub { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 28px; background: radial-gradient(circle at 40% 35%, #fde68a, #b45309); border: 3px solid #fff7d6; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
@media (max-width: 420px) { .fortune-wrap { width: 270px; height: 270px; } }

/* Allgemeiner "Cooler"-Feinschliff für Mufasa Royal */
.gsel.new-game { position: relative; }
.gsel.new-game::after { content: 'NEU'; position: absolute; top: -7px; right: -6px; padding: 1px 6px; border-radius: 6px; font-size: 9px; font-weight: 900; letter-spacing: .05em; background: linear-gradient(135deg, #ff5ca8, #8b5cff); color: #fff; box-shadow: 0 2px 8px rgba(255,92,168,.5); animation: newPulse 1.8s ease-in-out infinite; }
@keyframes newPulse { 50% { transform: scale(1.12); } }
.game-stage.card { position: relative; overflow: hidden; }
.game-stage.card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent 20%, rgba(251,191,36,.55), transparent 60%); background-size: 250% 100%; animation: borderSweep 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@keyframes borderSweep { to { background-position: -250% 0; } }
.stage-result.win { animation: winGlow 1.4s ease-in-out 2; }
@keyframes winGlow { 50% { box-shadow: 0 0 30px rgba(74,222,128,.45); } }
.coin-rain { position: fixed; top: -40px; z-index: 9999; pointer-events: none; font-size: 26px; animation: coinFall linear forwards; }
@keyframes coinFall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }
.big-win-banner { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.5); z-index: 10000; pointer-events: none; padding: 18px 34px; border-radius: 22px; font-size: clamp(26px, 5vw, 54px); font-weight: 900; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b, #fde68a); background-size: 200% 100%; box-shadow: 0 0 80px rgba(251,191,36,.7); animation: bigWin 2.6s cubic-bezier(.2,.9,.2,1) forwards, shine 1.2s linear infinite; text-align: center; }
@keyframes bigWin { 15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .game-stage.card::before, .gsel.new-game::after { animation: none; }
}


.r-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.rchoice {
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
}
.rchoice.red { background: rgba(220, 38, 38, .18); border-color: rgba(220, 38, 38, .4); }
.rchoice.black { background: rgba(24, 24, 27, .7); border-color: rgba(255, 255, 255, .2); }
.rchoice.gold { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .4); color: #fde68a; }
.rchoice.active {
  outline: 2px solid #fbbf24;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(251, 191, 36, .5);
}

.r-num-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.r-num-picker input { width: 90px; }

/* ROCKET CRASH */
.crash-arena {
  position: relative;
  max-width: 700px;
  margin: 0 auto 20px;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 100%, rgba(139, 92, 255, .18), rgba(8, 10, 18, .95));
  border: 1px solid rgba(251, 191, 36, .35);
}

#crashCanvas {
  width: 100%;
  height: 260px;
  display: block;
}

.crash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.crash-mult {
  font-size: 56px;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 0 30px rgba(251, 191, 36, .6);
}
.crash-mult.crashed {
  color: #ef4444;
  text-shadow: 0 0 30px rgba(239, 68, 68, .75);
}
.crash-mult.cashed {
  color: #4ade80;
  text-shadow: 0 0 30px rgba(74, 222, 128, .75);
}

.crash-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* BLACKJACK TABLE */
.bj-table {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 26px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(16, 105, 62, .35), rgba(8, 28, 18, .85));
  border: 2px solid rgba(251, 191, 36, .45);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .7);
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .bj-table { grid-template-columns: 1fr; }
}

.bj-zone-label {
  font-size: 14px;
  font-weight: 800;
  color: #fde68a;
  margin-bottom: 12px;
}

.bj-score {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(251, 191, 36, .4);
}

.bj-cards {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 106px;
}

.playing-card {
  width: 74px;
  height: 104px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #e2e8f0);
  color: #0f172a;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  animation: cardDeal .3s var(--ease);
}
.playing-card.red { color: #dc2626; }
.playing-card.back {
  background: linear-gradient(135deg, #1e1b4b, #4c1d95);
  color: #fbbf24;
  border: 2px solid #fbbf24;
  font-size: 34px;
}

@keyframes cardDeal {
  from { opacity: 0; transform: translateY(-25px) rotate(-8deg) scale(.85); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.bj-divider {
  font-size: 18px;
  font-weight: 900;
  color: rgba(251, 191, 36, .6);
}

/* MINISPIELE & GATHERING */
.bonus-explainer-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 20px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(251, 191, 36, .12));
  border: 1px solid rgba(34, 197, 94, .45);
}
.be-icon { font-size: 36px; }
.be-text h3 { margin: 0 0 4px; font-size: 17px; color: #86efac; }
.be-text p { margin: 0; font-size: 13px; color: var(--text); }

.gather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.gather-card {
  padding: 20px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform .3s var(--ease), border-color .3s;
}
.gather-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, .45);
}

.gc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gc-emoji { font-size: 34px; }
.gc-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, .35);
}
.gc-badge.cooldown {
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, .35);
}
.gather-card h3 { margin: 2px 0; font-size: 17px; font-weight: 800; }
.gather-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.gc-meta { font-size: 12px; color: #fde68a; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.full-btn { width: 100%; justify-content: center; }

.gather-result-showcase {
  padding: 22px;
  border: 2px solid #fbbf24;
  text-align: center;
  animation: cardDeal .35s var(--ease);
}

/* MINIGAME MODAL STAGE */
.minigame-box { max-width: 560px; }
.mg-stage {
  padding: 22px;
  text-align: center;
}

.mg-timing-track {
  position: relative;
  height: 44px;
  border-radius: 22px;
  background: #090b12;
  border: 2px solid var(--border-strong);
  overflow: hidden;
  margin: 20px 0;
}

.mg-sweet-spot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40%;
  width: 20%;
  background: linear-gradient(90deg, rgba(251, 191, 36, .35), rgba(34, 197, 94, .75), rgba(251, 191, 36, .35));
  border-left: 2px solid #4ade80;
  border-right: 2px solid #4ade80;
}

.mg-cursor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 10px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 16px #fbbf24;
}

.mg-farm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 330px;
  margin: 16px auto;
}

.mg-plot {
  height: 86px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 2px solid var(--border);
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .15s, background .15s;
}
.mg-plot:active { transform: scale(.92); }
.mg-plot.good { background: rgba(34, 197, 94, .18); border-color: #4ade80; }
.mg-plot.bomb { background: rgba(239, 68, 68, .2); border-color: #f87171; }

/* SHOP & LOOTBOXEN */
.shop-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 860px) { .shop-top-grid { grid-template-columns: 1fr; } }

.lootbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 170px;
  text-align: center;
}

.lootbox-3d {
  font-size: 74px;
  margin-bottom: 10px;
  filter: drop-shadow(0 12px 25px rgba(251, 191, 36, .45));
  transition: transform .3s;
}
.lootbox-3d.shaking {
  animation: boxShake .55s ease-in-out infinite;
}
@keyframes boxShake {
  0%, 100% { transform: rotate(0deg) scale(1.08); }
  25% { transform: rotate(-14deg) scale(1.14); }
  75% { transform: rotate(14deg) scale(1.14); }
}

.lootbox-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lootbox-buttons button { flex: 1; justify-content: center; }

.royal-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.inv-head {
  font-size: 13px;
  font-weight: 700;
  color: #fde68a;
  margin-bottom: 8px;
}

.royal-inv-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-weight: 700;
}

.tool-forge-card, .full-shop-card {
  margin-bottom: 20px;
}

.tool-forge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .tool-forge-grid { grid-template-columns: 1fr; } }

.forge-col {
  padding: 18px;
  border-radius: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.shop-item-card {
  padding: 16px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.sic-top { display: flex; justify-content: space-between; align-items: center; }
.sic-emoji { font-size: 28px; }
.sic-price { font-size: 13.5px; font-weight: 900; color: #fde68a; }
.sic-name { font-size: 15px; font-weight: 800; }
.sic-desc { font-size: 12px; color: var(--muted); }

/* ================= DISCORD OAUTH2 LOGIN & ADMIN AKTIONEN ================= */
.discord-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.discord-login-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 26px rgba(88, 101, 242, 0.5);
}

.royal-auth-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.royal-auth-pill.unauth {
  background: rgba(239, 68, 68, 0.16);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.royal-auth-pill.authed {
  background: rgba(34, 197, 94, 0.16);
  color: #86EFAC;
  border: 1px solid rgba(34, 197, 94, 0.38);
}

.royal-role-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(168, 85, 247, 0.25));
  color: #FDE68A;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.royal-luck-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.2);
  color: #E9D5FF;
  border: 1px solid rgba(168, 85, 247, 0.45);
}

.rnav.admin-rnav {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(168, 85, 247, 0.14));
}
.rnav.admin-rnav.active {
  background: linear-gradient(135deg, #EF4444, #9333EA);
  color: #fff;
  border-color: transparent;
}
.rnav-tag.admin-tag {
  background: rgba(239, 68, 68, 0.28);
  color: #FECACA;
}

.discord-oauth-box {
  max-width: 680px;
  border: 1px solid rgba(88, 101, 242, 0.45);
}
.discord-oauth-head {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(17, 24, 39, 0.6));
  border-bottom: 1px solid rgba(88, 101, 242, 0.25);
}
.oauth-brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.oauth-app-ico, .oauth-dc-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.oauth-app-ico {
  background: linear-gradient(135deg, #F59E0B, #B45309);
}
.oauth-dc-ico {
  background: #5865F2;
  color: #fff;
}
.oauth-dots {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
}

.oauth-perms-box {
  margin: 14px 18px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(88, 101, 242, 0.09);
  border: 1px solid rgba(88, 101, 242, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.oauth-perms-title {
  font-weight: 700;
  color: #C7D2FE;
  margin-bottom: 2px;
}
.oauth-perm-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text);
  line-height: 1.4;
}

.member-search-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 18px 20px;
  max-height: 360px;
  overflow-y: auto;
}
.member-search-hint {
  text-align: center;
  padding: 28px 18px;
  border-radius: 14px;
  background: rgba(88, 101, 242, 0.06);
  border: 1px dashed rgba(88, 101, 242, 0.35);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.member-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.member-row-card:hover {
  transform: translateY(-1px);
  border-color: rgba(88, 101, 242, 0.65);
  background: rgba(88, 101, 242, 0.12);
}
.member-row-card.active {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
}
.mrc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.mrc-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.mrc-info {
  min-width: 0;
  flex: 1;
}
.mrc-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.mrc-username {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.mrc-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: #CBD5E1;
}
.mrc-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.royal-auth-gate {
  text-align: center;
  padding: 44px 24px;
  margin: 16px 0 28px;
  border: 1px solid rgba(88, 101, 242, 0.45);
  background: radial-gradient(circle at top, rgba(88, 101, 242, 0.18), rgba(15, 23, 42, 0.85));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rag-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.royal-auth-gate h2 {
  margin: 0;
  font-size: 24px;
}
.royal-auth-gate p {
  margin: 0;
  max-width: 580px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.rag-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.rag-features span {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.oauth-step2 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oauth-selected-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.oauth-selected-user img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.oauth-wait-box {
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.14), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(88, 101, 242, 0.35);
}
.oauth-wait-box h4 {
  margin: 10px 0 6px;
  font-size: 16px;
}
.oauth-wait-box p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.oauth-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(88, 101, 242, 0.25);
  border-top-color: #5865F2;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.oauth-code-fallback {
  padding: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}
.oauth-code-fallback label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.oauth-code-row {
  display: flex;
  gap: 10px;
}
.oauth-code-row input {
  flex: 1;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 6px;
  text-align: center;
}
.oauth-step2-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ================= ADMIN PANEL STYLES ================= */
.admin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(168, 85, 247, 0.16));
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.admin-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-shield-ico {
  font-size: 32px;
}
.admin-banner h3 {
  margin: 0 0 4px;
  font-size: 17px;
}
.admin-banner p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.admin-log-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid rgba(88, 101, 242, 0.45);
  color: #C7D2FE;
  white-space: nowrap;
}

.admin-target-card {
  margin-bottom: 16px;
}
.admin-quick-targets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-target-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-target-inspector {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-target-inspector img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.adm-target-info {
  flex: 1;
  min-width: 150px;
}
.adm-target-name {
  font-weight: 800;
  font-size: 15px;
}
.adm-target-sub {
  font-size: 12px;
  color: var(--muted);
}
.adm-target-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.adm-pill {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}
.adm-pill.gold {
  color: #FDE68A;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
}
.adm-pill.luck {
  color: #E9D5FF;
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.45);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.luck-slider-box {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.28);
}
.luck-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.luck-slider-head strong {
  font-size: 16px;
  color: #E9D5FF;
}
.luck-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.luck-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.luck-preset {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.luck-preset:hover {
  transform: translateY(-1px);
  border-color: rgba(168, 85, 247, 0.6);
}
.luck-preset.bad { color: #FCA5A5; border-color: rgba(239, 68, 68, 0.35); }
.luck-preset.good { color: #86EFAC; border-color: rgba(34, 197, 94, 0.35); }
.luck-preset.mega { color: #FDE68A; border-color: rgba(245, 158, 11, 0.45); }
.luck-preset.god {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(168, 85, 247, 0.25));
  color: #FEF08A;
  border-color: rgba(245, 158, 11, 0.6);
}

.admin-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.danger-btn {
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #FCA5A5 !important;
}
.danger-btn:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

.lucky-players-list, .admin-logs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
}
.lucky-row, .adm-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-size: 12px;
}
.lucky-row img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}


/* ================= 16 MINIGAME MODES & ARENAS ================= */
.gather-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mg-mode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}
.mg-pill {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mg-pill:hover {
  color: var(--text);
  border-color: rgba(251, 191, 36, 0.45);
}
.mg-pill.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(234, 88, 12, 0.25));
  color: #fde68a;
  border-color: #fbbf24;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.2);
}

.gc-actions-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.gc-actions-row .full-btn {
  flex: 1;
}
.gc-actions-row [data-practicemg] {
  white-space: nowrap;
  padding: 10px 12px;
  font-weight: 700;
}

.minigame-box {
  max-width: 620px;
}

.mg-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 800;
}
.mg-hud-score { color: #86efac; }
.mg-hud-time { color: #fde68a; }

/* 4x4 Rock Smasher & 12-Plot Pest Grid */
.mg-grid-4x4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 380px;
  margin: 12px auto;
}
.mg-rock {
  height: 74px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 2px solid rgba(148, 163, 184, 0.35);
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.mg-rock:hover { border-color: #fbbf24; }
.mg-rock:active { transform: scale(0.9); }
.mg-rock.cracked {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
}
.mg-rock.revealed-good {
  background: rgba(34, 197, 94, 0.22);
  border-color: #4ade80;
}
.mg-rock.revealed-bad {
  background: rgba(239, 68, 68, 0.25);
  border-color: #f87171;
}

/* Conveyor Belt Sorter */
.mg-conveyor {
  position: relative;
  padding: 24px 16px;
  border-radius: 18px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 24px,
    rgba(0, 0, 0, 0.25) 24px,
    rgba(0, 0, 0, 0.25) 48px
  );
  border: 2px solid var(--border-strong);
  margin: 14px 0;
}
.mg-conv-item {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  animation: popIn 0.18s ease;
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0.3; }
  to { transform: scale(1); opacity: 1; }
}
.mg-conv-label {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.mg-sort-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Cyber Code Hacker & Math Register */
.mg-code-display {
  font-family: monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 8px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #050811;
  border: 2px solid #38bdf8;
  color: #7dd3fc;
  margin: 10px auto 14px;
  max-width: 340px;
  box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.2);
}
.mg-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}
.mg-key {
  padding: 14px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s, background 0.12s;
}
.mg-key:hover { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; }
.mg-key:active { transform: scale(0.93); }

/* Deep-Sea Tension Fishing Bar */
.mg-tension-tank {
  position: relative;
  height: 54px;
  border-radius: 27px;
  background: linear-gradient(90deg, #082f49, #0284c7, #0369a1);
  border: 2px solid #38bdf8;
  overflow: hidden;
  margin: 16px 0;
}
.mg-catch-zone {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 24%;
  border-radius: 22px;
  background: rgba(74, 222, 128, 0.38);
  border: 2px solid #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.45);
}
.mg-fish-sprite {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.mg-progress-bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 10px 0 16px;
  border: 1px solid var(--border);
}
.mg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #fbbf24);
  transition: width 0.08s linear;
}

/* Ocean Net & Falling Fruit Arena */
.mg-ocean-arena, .mg-basket-arena {
  position: relative;
  height: 230px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  margin: 10px 0;
  user-select: none;
}
.mg-ocean-arena {
  background: radial-gradient(circle at 50% 20%, #0ea5e9, #0369a1 55%, #082f49 100%);
  cursor: crosshair;
}
.mg-basket-arena {
  background: linear-gradient(180deg, #0f172a 0%, #1e3a2f 82%, #14532d 100%);
}
.mg-swimmer {
  position: absolute;
  font-size: 34px;
  cursor: pointer;
  user-select: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.mg-swimmer:active { transform: translate(-50%, -50%) scale(1.3); }

.mg-catcher-basket {
  position: absolute;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 42px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}
.mg-falling-item {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 30px;
  pointer-events: none;
}

/* 3-Lane Minecart Runner */
.mg-lanes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.mg-lane {
  position: relative;
  height: 58px;
  border-radius: 14px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 18px,
    rgba(251,191,36,0.07) 18px,
    rgba(251,191,36,0.07) 22px
  );
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.mg-lane.active-lane {
  border-color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.1);
}
.mg-cart {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
}
.mg-lane-obj {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
}

/* ================= MUSIKER-ÜBERSICHT & MEGA MUSIC STUDIO ================= */
.music-modal-box {
  max-width: 980px;
  width: 95vw;
}
.music-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.music-search-row input {
  flex: 1;
  min-width: 240px;
}
.music-view-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
  gap: 4px;
}
.mview-btn {
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.mview-btn.active {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.35);
}

.artist-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
}
.artist-filter-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
}
.artist-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
  flex: 1;
}
.artist-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}
.artist-pill:hover {
  border-color: #fbbf24;
  color: #fde68a;
}
.artist-pill.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(234, 88, 12, 0.25));
  border-color: #fbbf24;
  color: #fde68a;
}

/* Clean Song Cards with separated Song Title & Musician */
#musicModal .station-grid {
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 10px;
  max-height: 54vh;
}
#musicModal .st-card {
  padding: 11px 13px;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
}
#musicModal .st-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.st-artist-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  padding: 1px 7px;
  border-radius: 999px;
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-cat-badge {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* Artist Overview Cards (Musiker A-Z) */
.artist-Directory-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.artist-Directory-card:hover {
  transform: translateY(-2px);
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.09);
}
.adc-left {
  min-width: 0;
  flex: 1;
}
.adc-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adc-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adc-count {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.45);
  color: #c7d2fe;
  white-space: nowrap;
}

/* ── NEUE MINISPIEL-ENGINES: SIMON (Merk-Sequenz) & STACK (Turm stapeln) ── */
.mg-simon { display: grid; grid-template-columns: repeat(2, 120px); gap: 14px; justify-content: center; margin: 14px 0; }
.mg-simon-pad { height: 120px; border-radius: 22px; border: 3px solid rgba(255,255,255,.15); font-size: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .55; transition: opacity .12s, transform .12s, box-shadow .12s; user-select: none; }
.mg-simon-pad.lit, .mg-simon-pad:active { opacity: 1; transform: scale(1.06); box-shadow: 0 0 34px currentColor; }
.mg-simon-pad.p0 { background: #b91c1c; color: #f87171; }
.mg-simon-pad.p1 { background: #1d4ed8; color: #60a5fa; }
.mg-simon-pad.p2 { background: #15803d; color: #4ade80; }
.mg-simon-pad.p3 { background: #a16207; color: #facc15; }
.mg-simon.locked .mg-simon-pad { cursor: default; }

.mg-stack { position: relative; width: 300px; height: 300px; margin: 10px auto; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #0f172a, #1e293b); border: 1px solid rgba(255,255,255,.1); }
.mg-stack-block { position: absolute; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.4); }
.mg-stack-block.moving { box-shadow: 0 0 18px rgba(251,191,36,.6), inset 0 -4px 0 rgba(0,0,0,.25); }
.mg-stack-chip { position: absolute; height: 30px; border-radius: 6px; opacity: .8; animation: chipFall .7s ease-in forwards; }
@keyframes chipFall { to { transform: translateY(260px) rotate(25deg); opacity: 0; } }

/* ══════════════════════════════════════════════════════════════════
   👑 ADMIN SUBNAV & ERWEITERTE DISCORD- & BLACKLIST-VERWALTUNG
   ══════════════════════════════════════════════════════════════════ */

/* Admin Subnavigation */
.admin-subnav {
  display: flex;
  gap: 10px;
  margin: 18px 0 24px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  overflow-x: auto;
}
.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.admin-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.admin-tab-btn.active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(168, 85, 247, 0.2));
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.25);
}
.admin-tab-badge {
  background: #ef4444;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* Inspector Blacklist Additions */
.adm-pill.bl-status {
  font-weight: 800;
  transition: all 0.2s ease;
}
.adm-pill.bl-status.clean {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.adm-pill.bl-status.banned {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #f87171;
  animation: blPulseRed 1.8s infinite;
}
@keyframes blPulseRed {
  0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 18px rgba(239, 68, 68, 0.85); }
}

.adm-target-bl-box {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.adm-bl-box-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-bl-box-title {
  color: #fca5a5;
  font-size: 0.95rem;
}
.adm-bl-meta {
  color: var(--text-sub);
  font-size: 0.85rem;
}
.adm-target-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Discord Roles Section */
.admin-role-select {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px;
  outline: none;
}
.admin-role-select option {
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 2px;
  cursor: pointer;
}
.admin-role-select option:hover {
  background: rgba(99, 102, 241, 0.25);
}
.admin-role-select option:checked {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.35), rgba(168, 85, 247, 0.35));
  color: #fff;
  font-weight: 700;
}
.role-hierarchy-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-size: 0.85rem;
}
.hierarchy-note {
  color: var(--text-sub);
  font-size: 0.8rem;
}

/* Timeout Presets */
.timeout-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.timeout-preset-btn {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeout-preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.timeout-preset-btn.active {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.mod-warning-box {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-size: 0.85rem;
}

/* Blacklist Management Tab */
.bl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.bl-stat-card {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.bl-stat-card.danger { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.bl-stat-card.perm { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.08); }
.bl-stat-card.temp { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); }
.bl-stat-card.clean { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.bl-stat-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
}
.bl-stat-card.danger .bl-stat-num { color: #f87171; }
.bl-stat-card.perm .bl-stat-num { color: #c084fc; }
.bl-stat-card.temp .bl-stat-num { color: #fcd34d; }
.bl-stat-card.clean .bl-stat-num { color: #4ade80; }
.bl-stat-lbl {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 4px;
}

.bl-controls-card {
  padding: 16px;
  margin-bottom: 20px;
}
.bl-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.bl-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-filter-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bl-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.bl-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0f172a;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
}

/* Blacklist Entries List */
.bl-entries-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.bl-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}
.bl-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.bl-card.active-ban {
  border-left: 4px solid #ef4444;
}
.bl-card.perm-ban {
  border-left: 4px solid #a855f7;
}
.bl-card.expired-ban {
  border-left: 4px solid #64748b;
  opacity: 0.75;
}
.bl-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
  flex: 1;
}
.bl-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.bl-card-name {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}
.bl-card-id {
  font-size: 0.8rem;
  color: var(--text-sub);
}
.bl-card-mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 2;
  min-width: 240px;
}
.bl-card-reason {
  font-size: 0.9rem;
  color: #f1f5f9;
}
.bl-card-meta {
  font-size: 0.8rem;
  color: var(--text-sub);
}
.bl-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bl-pill-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.bl-pill-badge.active-temp {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}
.bl-pill-badge.active-perm {
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #c084fc;
}
.bl-pill-badge.expired {
  background: rgba(100, 116, 139, 0.2);
  border: 1px solid rgba(100, 116, 139, 0.4);
  color: #94a3b8;
}
.bl-pill-badge.revoked {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

/* User Blacklist Warning Banner */
.user-blacklist-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(15, 23, 42, 0.85));
  border: 2px solid #ef4444;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.35);
  margin-bottom: 24px;
}
.ub-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ub-banner-icon {
  font-size: 36px;
  animation: blPulseRed 1.8s infinite;
}
.ub-banner-texts h4 {
  margin: 0;
  color: #f87171;
  font-size: 1.15rem;
  font-weight: 900;
}
.ub-banner-texts p {
  margin: 4px 0 0 0;
  font-size: 0.9rem;
  color: #e2e8f0;
}
.ub-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #fca5a5;
}
.bl-countdown {
  color: #fef08a;
  font-weight: 800;
}

/* Admin Modals & Preset Grids */
.bl-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.bl-preset-btn {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bl-preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.bl-preset-btn.active {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}
.bl-preset-btn.perm.active {
  background: rgba(168, 85, 247, 0.3);
  border-color: #a855f7;
  color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}
.bl-preset-btn.custom.active {
  background: rgba(99, 102, 241, 0.3);
  border-color: #6366f1;
  color: #818cf8;
}

.bl-custom-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bl-preview-box {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #fde047;
  font-size: 0.9rem;
}
.bl-target-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.bl-target-preview img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* User Blacklist Modal Body */
.bl-modal-alert {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  margin-bottom: 16px;
  color: #f87171;
  font-size: 0.95rem;
}
.bl-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.bl-modal-info-item {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bl-modal-info-item.full {
  grid-column: 1 / -1;
}
.bl-modal-lbl {
  font-size: 0.78rem;
  color: var(--text-sub);
}
.bl-modal-val {
  font-size: 0.95rem;
  color: #fff;
}

/* Timeline in History Modal */
.bl-history-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.bl-history-item {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bl-hist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.bl-hist-act {
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
}
.bl-hist-ts {
  font-size: 0.78rem;
  color: var(--text-sub);
}
.bl-hist-meta {
  font-size: 0.85rem;
  color: var(--text-sub);
}

/* Full Logs Table */
.logs-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.logs-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.log-filter-btn {
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.log-filter-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.log-filter-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
  border-color: #818cf8;
  color: #fff;
}

.admin-full-logs-table-box {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-logs-table th {
  background: rgba(15, 23, 42, 0.8);
  padding: 10px 14px;
  text-align: left;
  color: var(--text-sub);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.admin-logs-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}
.admin-logs-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.log-cat-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
}
.log-cat-pill.discord { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.4); }
.log-cat-pill.blacklist { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.log-cat-pill.economy { background: rgba(234, 179, 8, 0.2); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.4); }

/* ══════════════════════════════════════════════════════════════════
   🔥 DEFINITIVE STYLES FÜR DANGER-BUTTONS & INSPEKTOR-AKTIONEN
   ══════════════════════════════════════════════════════════════════ */

/* Button Danger & Primary Danger */
.btn.danger,
.btn.danger-btn,
.danger-btn {
  background: rgba(220, 38, 38, 0.22) !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.danger:hover,
.btn.danger-btn:hover,
.danger-btn:hover {
  background: rgba(220, 38, 38, 0.45) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.6) !important;
}

.btn.primary.danger-btn,
.btn.primary.danger,
#admQuickBlacklistBtn {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  border: 1px solid #f87171 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#admQuickBlacklistBtn:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.75) !important;
  color: #ffffff !important;
}

/* Inspector Action Bar */
.adm-target-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.adm-target-actions .btn {
  padding: 8px 16px !important;
  font-size: 0.88rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Tab Buttons in Subnav */
.admin-tab-btn {
  cursor: pointer !important;
  user-select: none !important;
}
.admin-tab-btn:hover {
  transform: translateY(-1px);
}

.adm-target-actions .btn.ghost { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #f1f5f9 !important; }
.adm-target-actions .btn.ghost:hover { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.adm-target-actions .btn.ghost.blue-btn { background: rgba(59, 130, 246, 0.18) !important; border-color: rgba(59, 130, 246, 0.45) !important; color: #93c5fd !important; }
.adm-target-actions .btn.ghost.blue-btn:hover { background: rgba(59, 130, 246, 0.35) !important; color: #ffffff !important; }

/* ---------- Topbar User Area & Account Button ---------- */
.topbar-user-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-user-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s var(--ease);
  color: var(--text);
  font-family: inherit;
}
.topbar-user-pill:hover {
  background: rgba(139, 92, 255, 0.15);
  border-color: rgba(139, 92, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 255, 0.25);
}
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(245, 158, 11, 0.6);
}
.topbar-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.topbar-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-balance {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}
.topbar-caret {
  font-size: 11px;
  color: var(--muted);
  transition: transform .2s;
}
.topbar-user-pill:hover .topbar-caret {
  color: #fff;
  transform: translateY(1px);
}

/* ---------- Global Auth Gate (Locked View) ---------- */
.global-auth-gate {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  animation: viewIn .45s var(--ease);
}
.global-auth-card {
  text-align: center;
  padding: 48px 32px;
  border: 1px solid rgba(88, 101, 242, 0.45);
  background: radial-gradient(circle at top, rgba(88, 101, 242, 0.22), rgba(15, 23, 42, 0.92));
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.gag-icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.gag-brand-ico {
  font-size: 32px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}
.gag-connect-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #5865f2);
  border-radius: 2px;
}
.gag-dc-ico {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #5865f2;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.45);
}
.global-auth-card h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
.global-auth-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 28px;
}
.gag-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 30px;
  text-align: left;
}
@media (max-width: 560px) {
  .gag-features-grid { grid-template-columns: 1fr; }
}
.gag-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 14px;
}
.gag-feat span { font-size: 22px; }
.gag-feat b { display: block; font-size: 13.5px; color: #fff; }
.gag-feat small { font-size: 11.5px; color: var(--muted); }

/* ---------- Account Details & Private PNG-Links Modal ---------- */
.account-modal-box {
  width: min(780px, 95vw);
  max-height: 88vh;
  background: #0f121e;
  border: 1px solid rgba(139, 92, 255, 0.35);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
}
.acc-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.acc-modal-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}
.acc-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-name-line h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.acc-modal-title-row p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}
.acc-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) {
  .acc-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
.acc-stat-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acc-stat-chip .acc-lbl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.acc-stat-chip .acc-val {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.acc-stat-chip:first-child .acc-val { color: #fbbf24; }
.acc-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
}
.acc-tab-btn {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.acc-tab-btn:hover { color: #fff; }
.acc-tab-btn.active {
  color: #fff;
  border-bottom-color: var(--accent);
}
.acc-tab-content {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1;
  max-height: 48vh;
}
.acc-links-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.acc-links-info {
  font-size: 12.5px;
  color: var(--muted);
}
.acc-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .acc-details-grid { grid-template-columns: 1fr; }
}
.acc-detail-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adc-lbl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.adc-val {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: ui-monospace, Consolas, monospace;
}
.acc-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Admin PNG-Links Logs & Gallery ---------- */
.admin-png-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.admin-png-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.admin-png-card:hover {
  border-color: rgba(139, 92, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.admin-png-thumb-box {
  width: 100%;
  height: 180px;
  background: #0b0f19 repeating-conic-gradient(#151d2e 0% 25%, #0e1422 0% 50%) 50% / 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.admin-png-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .25s ease;
}
.admin-png-card:hover .admin-png-thumb {
  transform: scale(1.03);
}
.admin-png-badge-dim {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-png-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.admin-png-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.admin-png-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  word-break: break-all;
}
.admin-png-creator {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
}
.admin-png-creator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-png-creator-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.admin-png-creator-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #e0e7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-png-creator-id {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}
.admin-png-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--muted);
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.admin-png-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.admin-png-actions .btn {
  flex: 1;
  justify-content: center;
}