.ev4x-ruleta {
  --ev4x-bg-1: #07111f;
  --ev4x-bg-2: #0d1c33;
  --ev4x-bg-3: #142846;
  --ev4x-card: rgba(10, 20, 38, 0.82);
  --ev4x-line: rgba(131, 181, 255, 0.2);
  --ev4x-text: #eef5ff;
  --ev4x-muted: #a8bbd8;
  --ev4x-primary: #31c7ff;
  --ev4x-secondary: #8b5cf6;
  --ev4x-accent: #ffd166;
  --ev4x-success: #68f3ba;
  color: var(--ev4x-text);
  margin: 28px auto;
  max-width: 1380px;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ev4x-ruleta * { box-sizing: border-box; }

.ev4x-ruleta__card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(49, 199, 255, 0.16), transparent 30%),
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.18), transparent 35%),
    linear-gradient(145deg, var(--ev4x-bg-1), var(--ev4x-bg-2) 52%, var(--ev4x-bg-3));
  border: 1px solid var(--ev4x-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ev4x-ruleta__header,
.ev4x-ruleta__controls,
.ev4x-ruleta__stage,
.ev4x-ruleta__actions,
.ev4x-ruleta__buttons,
.ev4x-stat-grid {
  display: flex;
  gap: 14px;
}

.ev4x-ruleta__header,
.ev4x-ruleta__controls,
.ev4x-ruleta__stage {
  flex-wrap: wrap;
}

.ev4x-ruleta__header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ev4x-ruleta__title {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  color: #ffffff;
}

.ev4x-ruleta__subtitle {
  margin: 8px 0 0;
  color: var(--ev4x-muted);
  font-size: 15px;
}

.ev4x-ruleta__controls {
  align-items: flex-end;
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ev4x-field { min-width: 180px; }
.ev4x-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: #d6e7ff;
  font-size: 14px;
}

.ev4x-field--check {
  min-width: 180px;
  display: flex;
  align-items: flex-end;
}

.ev4x-field--check label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  cursor: pointer;
}

.ev4x-field input[type="number"] {
  width: 130px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(4, 10, 20, 0.86);
  color: #fff;
  font-size: 16px;
}

.ev4x-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ev4x-primary);
}

.ev4x-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.ev4x-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
}

.ev4x-btn--primary {
  background: linear-gradient(135deg, var(--ev4x-secondary), var(--ev4x-primary));
  border-color: rgba(255,255,255,.18);
}

.ev4x-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
}

.ev4x-ruleta__buttons,
.ev4x-ruleta__actions {
  align-items: center;
  flex-wrap: wrap;
}

.ev4x-ruleta__stage {
  align-items: stretch;
}

.ev4x-ruleta__stage > * {
  min-width: 0;
}

.ev4x-wheel-wrap {
  --ev4x-wheel-size: 720px;
  position: relative;
  flex: 1 1 680px;
  min-width: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at center, rgba(49, 199, 255, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255,255,255,.08);
  min-height: calc(var(--ev4x-wheel-size) + 36px);
  overflow: hidden;
}

.ev4x-wheel-wrap__glow {
  position: absolute;
  inset: 10% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 199, 255, 0.18), transparent 58%);
  filter: blur(16px);
  pointer-events: none;
}

.ev4x-wheel-wrap canvas {
  position: relative;
  width: var(--ev4x-wheel-size);
  height: var(--ev4x-wheel-size);
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  transition: transform 5s cubic-bezier(.12,.62,.16,1);
}

.ev4x-pointer {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 38px solid var(--ev4x-accent);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
  z-index: 2;
}

.ev4x-side {
  flex: 0 1 360px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ev4x-stat-grid {
  flex-wrap: wrap;
}

.ev4x-stat,
.ev4x-panel {
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.ev4x-stat {
  flex: 1 1 calc(50% - 7px);
  min-width: 150px;
  padding: 14px 16px;
}

.ev4x-stat span {
  display: block;
  color: var(--ev4x-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.ev4x-stat strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  color: #fff;
}

.ev4x-panel {
  padding: 16px;
}

.ev4x-panel h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #fff;
}

.ev4x-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  color: var(--ev4x-muted);
}

.ev4x-history__item,
.ev4x-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
}

.ev4x-history__item {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(49, 199, 255, 0.24));
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

.ev4x-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.ev4x-chip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #dbeafe;
}

.ev4x-chip.is-used {
  background: rgba(255, 209, 102, 0.22);
  border-color: rgba(255, 209, 102, 0.32);
  color: #ffe29a;
}

.ev4x-chip.is-last {
  background: rgba(104, 243, 186, 0.18);
  border-color: rgba(104, 243, 186, 0.3);
  color: #aef9d4;
}

.ev4x-ruleta.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  margin: 0;
  max-width: none;
  background: #04101d;
  overflow: auto;
  padding: 18px;
}

.ev4x-ruleta.is-fullscreen .ev4x-ruleta__card {
  min-height: calc(100vh - 36px);
  border-radius: 0;
}

@media (max-width: 1100px) {
  .ev4x-wheel-wrap {
    padding: 16px;
  }
}

@media (max-width: 780px) {
  .ev4x-ruleta { margin: 18px auto; }
  .ev4x-ruleta__card { padding: 14px; border-radius: 22px; }
  .ev4x-ruleta__controls { padding: 14px; }
  .ev4x-field,
  .ev4x-field--check,
  .ev4x-ruleta__buttons,
  .ev4x-side {
    min-width: 0;
    width: 100%;
  }
  .ev4x-ruleta__buttons .ev4x-btn {
    flex: 1 1 100%;
  }
  .ev4x-wheel-wrap {
    padding: 12px;
    border-radius: 22px;
  }
  .ev4x-stat strong { font-size: 22px; }
  .ev4x-pointer { top: 2px; border-left-width: 16px; border-right-width: 16px; border-bottom-width: 24px; }
}

@media (max-width: 480px) {
  .ev4x-ruleta__header,
  .ev4x-ruleta__actions {
    gap: 10px;
  }
  .ev4x-ruleta__actions .ev4x-btn {
    width: 100%;
  }
  .ev4x-history__item,
  .ev4x-chip {
    min-width: 42px;
    padding: 7px 9px;
  }
}