/* ── Dark Theme Fallback (greift wenn Tailwind-Custom-Config nicht lädt) ── */
html { background-color: #0b1326; }
body { background-color: #0b1326; color: #dae2fd; }
#app-header { background-color: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
aside { background-color: #0b1326; }
#wheel-dropdown { background-color: #171f33; }
#entry-input { background-color: rgba(255,255,255,0.05); color: #dae2fd; border: 1px solid rgba(255,255,255,0.12); }
#entry-input::placeholder { color: #908fa0; }
#entry-add-btn { background-color: rgba(128,131,255,0.2); border: 1px solid rgba(128,131,255,0.3); color: #c0c1ff; }
#entry-import-btn, #entry-shuffle-btn, #entry-clear-btn { background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
#entry-import-btn { color: #908fa0; }
#entry-shuffle-btn { color: #ffb95f; }
#entry-clear-btn, #clear-history-btn { color: #ffb4ab; }
#entry-count { color: #908fa0; }
#stat-total { color: #c0c1ff; }
#stat-winner { color: #ffb95f; }
#wheel-selector-btn { color: #dae2fd; background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
#new-wheel-btn { color: #c0c1ff; }
#logout-btn { color: #908fa0; }
.sidebar-tab { color: #908fa0; }
#guest-banner { background-color: rgba(255,185,95,0.1); border: 1px solid rgba(255,185,95,0.25); color: #ffb95f; }
.section-bg { background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Glass Edge ── */
.glass-edge {
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── Spin Button Gradient + Pulse ── */
.spin-btn {
  background: linear-gradient(135deg, #8083ff, #D946EF);
  box-shadow: 0 4px 24px rgba(128,131,255,0.4);
  animation: pulse-btn 2s ease-in-out infinite;
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 4px 24px rgba(128,131,255,0.4); }
  50%       { box-shadow: 0 4px 36px rgba(217,70,239,0.6); }
}
.spin-btn:disabled {
  animation: none;
  box-shadow: none;
}

/* ── Sidebar Active Tab ── */
.sidebar-tab.active-tab {
  color: #c0c1ff;
  border-bottom-color: #8083ff;
}

/* ── Sound Toggle ── */
#sound-toggle {
  background-color: rgba(255,255,255,0.15);
  cursor: pointer;
}
#sound-toggle .sound-thumb {
  background-color: rgba(255,255,255,0.7);
}
#sound-toggle[data-enabled="true"] {
  background-color: #8083ff;
}
#sound-toggle[data-enabled="true"] .sound-thumb {
  transform: translateX(16px);
  background-color: #ffffff;
}

/* ── Sound Option Buttons ── */
.sound-opt {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(218,226,253,0.7);
  cursor: pointer;
}
.sound-opt:hover {
  background-color: rgba(255,255,255,0.1);
  color: #dae2fd;
}
.active-sound-opt {
  background-color: rgba(128,131,255,0.2);
  border-color: rgba(128,131,255,0.5);
  color: #c0c1ff;
}
#sound-options {
  display: none;
}
#sound-options.visible {
  display: flex;
}

/* ── Wheel Pointer pulse on spin ── */
.pointer-triangle.spinning {
  animation: pointer-tick 0.15s ease-in-out infinite alternate;
}
@keyframes pointer-tick {
  0%   { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-3px); }
}

/* ── Winner Overlay fade-in ── */
#winner-overlay:not(.hidden) {
  animation: fade-in 0.4s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Toast ── */
#toast:not(.hidden) {
  animation: slide-up 0.3s ease;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Wheel Zone radial glow ── */
.wheel-zone {
  background: radial-gradient(ellipse at 30% 50%, #171f33, #0b1326);
}

/* ── Entry item enter animation ── */
.entry-item-enter {
  animation: entry-enter 0.25s ease;
}
@keyframes entry-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── History item ── */
.history-item:hover {
  transform: translateX(4px);
}

/* ── Mobile: Sidebar unterhalb Rad ── */
@media (max-width: 767px) {
  main {
    height: auto;
    min-height: calc(100vh - 3.5rem);
  }
  .wheel-zone {
    padding: 1.5rem;
    min-height: 60vh;
  }
}

/* ── Dropdown animation ── */
#wheel-dropdown:not(.hidden) {
  animation: dropdown-in 0.15s ease;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}