@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=ZCOOL+KuaiLe&display=swap');

@font-face {
  font-family: 'Mama';
  src: url('/mama.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg-1: #0b1021;
  --bg-2: #1b2a4a;
  --bg-3: #18203d;
  --card: rgba(255, 255, 255, 0.08);
  --card-strong: rgba(255, 255, 255, 0.14);
  --accent: #ffbf47;
  --accent-2: #6ef3ff;
  --hot: #ff6b6b;
  --text: #eef2ff;
  --muted: rgba(238, 242, 255, 0.6);
  --shadow: 0 20px 40px rgba(3, 10, 24, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Mama', 'IBM Plex Sans', 'Noto Sans SC', sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #23355f 0%, #101528 40%, #0a0f1f 100%);
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(110, 243, 255, 0.15), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 191, 71, 0.18), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(255, 107, 107, 0.12), transparent 45%);
  pointer-events: none;
  z-index: -1;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 8px;
}

.brand {
  font-family: 'Mama', 'ZCOOL KuaiLe', cursive;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--accent);
  text-shadow: 0 8px 18px rgba(255, 191, 71, 0.35);
}

.tagline {
  font-size: 14px;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.panel {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.panel.ticker-panel {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.ticker-bar {
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--accent-2);
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

input,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(10, 14, 28, 0.7);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

button {
  font-family: 'Mama', 'IBM Plex Sans', sans-serif;
  background: linear-gradient(120deg, #ffbf47, #ff8f4e);
  border: none;
  color: #1b1021;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 24px rgba(255, 191, 71, 0.25);
}

button.secondary {
  background: rgba(110, 243, 255, 0.15);
  color: var(--text);
  box-shadow: none;
  border: 1px solid rgba(110, 243, 255, 0.45);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.status {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.status.ok {
  color: #7cffb0;
}

.status.bad {
  color: var(--hot);
}

.wheel-area {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: center;
}

.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.wheel-wrap::before {
  content: '';
  position: absolute;
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 191, 71, 0.18), transparent 62%);
  filter: blur(24px);
  opacity: 0.75;
  z-index: 0;
  animation: halo 4s ease-in-out infinite;
}

.wheel-wrap::after {
  content: '';
  position: absolute;
  width: min(70vw, 360px);
  height: min(70vw, 360px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 249, 255, 0.18), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(255, 191, 71, 0.18), transparent 55%);
  filter: blur(20px);
  opacity: 0.7;
  z-index: 0;
}

.wheel-shell {
  width: min(80vw, 420px);
  height: min(80vw, 420px);
  border-radius: 50%;
  padding: 18px;
  background:
    conic-gradient(from 0deg,
      rgba(255, 215, 0, 0.6) 0deg, rgba(255, 215, 0, 0.1) 3deg,
      rgba(255, 215, 0, 0.05) 5deg, rgba(255, 215, 0, 0.1) 12deg,
      rgba(255, 215, 0, 0.6) 15deg, rgba(255, 215, 0, 0.1) 18deg,
      rgba(255, 215, 0, 0.05) 20deg, rgba(255, 215, 0, 0.1) 27deg,
      rgba(255, 215, 0, 0.6) 30deg, rgba(255, 215, 0, 0.1) 33deg,
      rgba(255, 215, 0, 0.05) 35deg, rgba(255, 215, 0, 0.1) 42deg,
      rgba(255, 215, 0, 0.6) 45deg, rgba(255, 215, 0, 0.1) 48deg,
      rgba(255, 215, 0, 0.05) 50deg, rgba(255, 215, 0, 0.1) 57deg,
      rgba(255, 215, 0, 0.6) 60deg, rgba(255, 215, 0, 0.1) 63deg,
      rgba(255, 215, 0, 0.05) 65deg, rgba(255, 215, 0, 0.1) 72deg,
      rgba(255, 215, 0, 0.6) 75deg, rgba(255, 215, 0, 0.1) 78deg,
      rgba(255, 215, 0, 0.05) 80deg, rgba(255, 215, 0, 0.1) 87deg,
      rgba(255, 215, 0, 0.6) 90deg
    );
  border: 3px solid rgba(255, 215, 0, 0.5);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.2),
    0 0 80px rgba(124, 249, 255, 0.1),
    inset 0 0 18px rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}

.wheel-rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform-origin: center;
  z-index: 1;
}

.wheel-rim {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(255, 215, 0, 0.15) 70%, transparent 76%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 215, 0, 0.12) 0deg 4deg,
      rgba(255, 255, 255, 0.02) 4deg 9deg
    );
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.wheel-lights {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

.wheel-light {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
  top: 50%;
  left: 50%;
  animation: lightBlink 1.2s ease-in-out infinite alternate;
}

.wheel-light:nth-child(odd) {
  background: #7cf9ff;
  box-shadow: 0 0 6px 2px rgba(124, 249, 255, 0.6);
  animation-delay: 0.6s;
}

.wheel-shell::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 215, 0, 0.5), rgba(124, 249, 255, 0.15), rgba(255, 215, 0, 0.5), rgba(124, 249, 255, 0.15), rgba(255, 215, 0, 0.5));
  filter: blur(12px);
  opacity: 0.6;
  z-index: -1;
  animation: halo 4s ease-in-out infinite;
}

.wheel-shell::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 3px solid rgba(255, 215, 0, 0.35);
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.12), 0 0 10px rgba(255, 215, 0, 0.1);
  pointer-events: none;
}

#wheelCanvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(124, 249, 255, 0.12), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 191, 71, 0.08), transparent 65%),
    #0b1124;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.55);
  position: relative;
  z-index: 2;
}

.wheel-dust {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 2px) 20% 30% / 120px 120px,
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 2px) 60% 40% / 160px 160px,
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 2px) 40% 70% / 140px 140px,
    radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 2px) 75% 65% / 180px 180px;
  opacity: 0.4;
  mix-blend-mode: screen;
  animation: dust 28s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.wheel-sheen {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: linear-gradient(120deg, transparent 42%, rgba(124, 249, 255, 0.25) 50%, transparent 58%);
  filter: blur(2px);
  opacity: 0.55;
  mix-blend-mode: screen;
  transform: translateX(-60%) rotate(-18deg);
  animation: sheen 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.wheel-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #e8fbff, #7cf9ff 45%, #ffbf47 80%),
    #1a243f;
  border: 2px solid rgba(124, 249, 255, 0.5);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(124, 249, 255, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.4);
  z-index: 5;
  pointer-events: none;
}

.wheel-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -185%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 34px solid #7cf9ff;
  filter: drop-shadow(0 10px 14px rgba(124, 249, 255, 0.45));
  z-index: 4;
}

.wheel-pointer::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 6px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 20px solid rgba(255, 255, 255, 0.6);
  opacity: 0.5;
}

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  padding: 0;
  border-radius: 50%;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: radial-gradient(circle at 30% 30%, #e9fbff, #7cf9ff 45%, #ffbf47 80%);
  color: #0c1124;
  box-shadow:
    0 16px 30px rgba(124, 249, 255, 0.35),
    0 0 20px rgba(255, 191, 71, 0.25),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
  z-index: 6;
}

.spin-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.02);
}

.ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(100, 180, 255, 0.3);
  border-radius: 12px;
  height: 48px;
}

.ticker span.label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #4a90e2, #357abd);
  border-radius: 10px 0 0 10px;
}

.ticker-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: scroll 18s linear infinite;
  z-index: 1;
  padding: 0 20px;
  align-items: center;
  height: 100%;
}

.ticker-track.static {
  animation: none;
}

.ticker-item {
  font-size: 15px;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.ticker-item .prize-name {
  color: #6eb8ff;
  font-weight: 600;
}

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

.record-list {
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 10px;
}

.record-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  display: grid;
  gap: 4px;
}

.record-item strong {
  color: var(--accent);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: rgba(12, 16, 31, 0.95);
  border-radius: 20px;
  padding: 24px;
  min-width: min(90vw, 420px);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow);
}

.modal-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--muted);
  font-weight: 400;
}

.modal-content #modalPrize {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 4px 16px rgba(255, 191, 71, 0.4);
  margin: 12px 0 18px;
}

.modal-content .redeem {
  font-size: 13px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: inline-block;
  margin: 4px 0 16px;
  color: var(--muted);
  letter-spacing: 1px;
}

.modal-content.rare {
  border: 2px solid var(--hot);
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}

.modal-content.rare #modalPrize {
  color: var(--hot);
  text-shadow: 0 4px 20px rgba(255, 107, 107, 0.5);
  font-size: 36px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes halo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes sheen {
  0% {
    opacity: 0;
    transform: translateX(-80%) rotate(-18deg);
  }
  40% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.2;
    transform: translateX(20%) rotate(-18deg);
  }
  100% {
    opacity: 0;
    transform: translateX(80%) rotate(-18deg);
  }
}

@keyframes dust {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.03);
  }
}

@keyframes lightBlink {
  0% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.admin-body {
  background: radial-gradient(circle at top, #18213d 0%, #101528 45%, #0a0f1f 100%);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.table th,
.table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.table th:nth-child(2),
.table th:nth-child(3),
.table td:nth-child(2),
.table td:nth-child(3) {
  white-space: nowrap;
}

.badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.12);
}

.badge.hot {
  background: rgba(255, 107, 107, 0.25);
  color: #ffd1d1;
}

.badge.ok {
  background: rgba(124, 255, 176, 0.2);
  color: #c8ffe0;
}

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

.notice {
  font-size: 12px;
  color: var(--muted);
}

.search-box {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.search-box input {
  flex: 1;
  font-size: 15px;
  padding: 10px 14px;
}

.search-box button {
  padding: 10px 20px;
}

.search-result {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.15), rgba(74, 144, 226, 0.08));
  border: 2px solid rgba(74, 144, 226, 0.5);
  border-radius: 14px;
  padding: 20px;
  margin: 12px 0;
}

.search-result .result-title {
  font-size: 14px;
  color: var(--accent-2);
  margin-bottom: 16px;
  font-weight: 600;
}

.search-result .result-card {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-result .result-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}

.search-result .result-row:last-child {
  border-bottom: none;
}

.search-result .result-label {
  color: var(--muted);
}

.search-result .result-value {
  color: var(--text);
  font-weight: 500;
}

.search-result .result-value.highlight {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.search-result .result-value.code {
  font-family: monospace;
  background: rgba(255, 191, 71, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 1px;
}

.search-result .no-result {
  text-align: center;
  color: var(--muted);
  padding: 20px;
}

body.light-theme .search-result {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.12), rgba(74, 144, 226, 0.05));
  border: 2px solid rgba(74, 144, 226, 0.4);
}

body.light-theme .search-result .result-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .search-result .result-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .search-result .result-label {
  color: #666;
}

body.light-theme .search-result .result-value {
  color: #333;
}

body.light-theme .search-result .result-value.highlight {
  color: #e67e22;
}

body.light-theme .search-result .result-value.code {
  background: rgba(230, 126, 34, 0.12);
  color: #d35400;
}

@media (max-width: 880px) {
  .wheel-area {
    grid-template-columns: 1fr;
  }
  header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-btn {
  padding: 6px 14px;
  font-size: 13px;
  background: rgba(110, 243, 255, 0.15);
  color: var(--text);
  border: 1px solid rgba(110, 243, 255, 0.45);
  box-shadow: none;
}

.theme-btn:hover:not(:disabled) {
  background: rgba(110, 243, 255, 0.25);
}

/* Light theme */
body.light-theme {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  color: #1a1a2e;
}

body.light-theme::before {
  background: radial-gradient(circle at 20% 20%, rgba(110, 200, 255, 0.2), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 180, 100, 0.2), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(255, 150, 150, 0.15), transparent 45%);
}

body.light-theme .brand {
  color: #e67e22;
  text-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

body.light-theme .tagline {
  color: #666;
}

body.light-theme label {
  color: #555;
}

body.light-theme .panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-theme .panel h2 {
  color: #2980b9;
}

body.light-theme input,
body.light-theme textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1a2e;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: #999;
}

body.light-theme .status {
  color: #666;
}

body.light-theme .status.ok {
  color: #27ae60;
}

body.light-theme .status.bad {
  color: #e74c3c;
}

body.light-theme .notice {
  color: #666;
}

body.light-theme .ticker {
  background: rgba(74, 144, 226, 0.08);
  border: 1px solid rgba(74, 144, 226, 0.25);
}

body.light-theme .ticker span.label {
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: #fff;
}

body.light-theme .ticker-item {
  color: #333;
}

body.light-theme .ticker-item .prize-name {
  color: #2563eb;
}

body.light-theme .record-item {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #333;
}

body.light-theme .record-item strong {
  color: #e67e22;
}

body.light-theme .modal {
  background: rgba(255, 255, 255, 0.7);
}

body.light-theme .modal-content {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

body.light-theme .modal-content h3 {
  color: #333;
}

body.light-theme .modal-content .redeem {
  background: rgba(0, 0, 0, 0.06);
  color: #666;
}

body.light-theme .modal-content #modalPrize {
  color: #e67e22;
  text-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

body.light-theme button.secondary {
  background: rgba(41, 128, 185, 0.1);
  color: #2980b9;
  border: 1px solid rgba(41, 128, 185, 0.4);
}

body.light-theme .theme-btn {
  background: rgba(41, 128, 185, 0.1);
  color: #2980b9;
  border: 1px solid rgba(41, 128, 185, 0.4);
}

body.light-theme .wheel-wrap::before {
  background: radial-gradient(circle, rgba(255, 180, 100, 0.25), transparent 62%);
}

body.light-theme .wheel-wrap::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(100, 200, 255, 0.2), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(255, 180, 100, 0.2), transparent 55%);
}

body.light-theme .wheel-shell {
  background:
    radial-gradient(circle at 30% 20%, rgba(100, 200, 255, 0.2), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255, 180, 100, 0.25), transparent 60%),
    conic-gradient(from 0deg, rgba(100, 200, 255, 0.2), rgba(255, 255, 255, 0.1), rgba(255, 180, 100, 0.2));
  border: 1px solid rgba(100, 200, 255, 0.3);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(100, 200, 255, 0.2),
    inset 0 0 18px rgba(255, 255, 255, 0.3);
}

body.light-theme .wheel-shell::before {
  background: conic-gradient(from 40deg, rgba(100, 200, 255, 0.4), rgba(255, 180, 100, 0.1), rgba(255, 180, 100, 0.4));
}

body.light-theme .wheel-rim {
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(100, 200, 255, 0.3) 70%, transparent 76%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 180, 100, 0.25) 0deg 4deg,
      rgba(255, 255, 255, 0.1) 4deg 9deg
    );
}

body.light-theme #wheelCanvas {
  background:
    radial-gradient(circle at 30% 30%, rgba(100, 200, 255, 0.15), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 180, 100, 0.1), transparent 65%),
    #f8fafc;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.1);
}

body.light-theme .wheel-core {
  background:
    radial-gradient(circle at 30% 30%, #fff, #7dd3fc 45%, #fbbf24 80%),
    #f1f5f9;
  border: 2px solid rgba(100, 200, 255, 0.5);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.15),
    0 0 16px rgba(100, 200, 255, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.6);
}

body.light-theme .wheel-pointer {
  border-bottom-color: #38bdf8;
  filter: drop-shadow(0 8px 12px rgba(56, 189, 248, 0.4));
}

body.light-theme .spin-btn {
  background: radial-gradient(circle at 30% 30%, #fff, #7dd3fc 45%, #fbbf24 80%);
  color: #1e293b;
  box-shadow:
    0 12px 25px rgba(56, 189, 248, 0.3),
    0 0 20px rgba(251, 191, 36, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.8);
}

body.light-theme .wheel-dust {
  opacity: 0.2;
}

body.light-theme .wheel-sheen {
  background: linear-gradient(120deg, transparent 42%, rgba(100, 200, 255, 0.3) 50%, transparent 58%);
}