:root {
        --red: #ff2d55;
        --blue: #0a84ff;
        --green: #30d158;
        --bg: #09090f;
        --surface: #13131d;
        --border: rgba(255, 255, 255, 0.08);
        --text: #f0f0f5;
        --muted: #6e6e8a;
}

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        background: var(--bg);
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 20px 16px;
        color: var(--text);
        overflow: hidden;
      }

      body::before,
      body::after {
        content: "";
        position: fixed;
        border-radius: 50%;
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
      }
      body::before {
        width: 500px;
        height: 500px;
        background: rgba(255, 45, 85, 0.12);
        top: -100px;
        left: -100px;
      }
      body::after {
        width: 400px;
        height: 400px;
        background: rgba(10, 132, 255, 0.1);
        bottom: -80px;
        right: -80px;
      }

      h1 {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-size: clamp(2rem, 5vw, 3.5rem);
        letter-spacing: 8px;
        background: linear-gradient(90deg, var(--red), #ff9f0a, var(--blue));
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }

      .layout {
        display: flex;
        gap: 24px;
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        max-width: 1600px;
        position: relative;
        z-index: 1;
        align-items: center;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      /* ── WHEEL ── */
      .wheel-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        flex: 1;
        min-width: 0;
      }

      .wheel-wrap {
        position: relative;
        width: min(75vh, 75vw, 760px);
        height: min(75vh, 75vw, 760px);
      }

      .pointer {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-top: 34px solid var(--red);
        z-index: 10;
        filter: drop-shadow(0 0 10px rgba(255, 45, 85, 0.85));
      }

      .wheel-ring {
        position: absolute;
        inset: -12px;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          var(--red),
          #ff9f0a,
          var(--blue),
          var(--red)
        );
        animation: spin-ring 8s linear infinite;
        opacity: 0.25;
      }
      @keyframes spin-ring {
        to {
          transform: rotate(360deg);
        }
      }

      .wheel-ring-inner {
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: var(--bg);
      }

      canvas {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        display: block;
        width: 100%;
        height: 100%;
      }

      .winner-badge {
        min-width: 300px;
        padding: 14px 28px;
        border-radius: 14px;
        background: rgba(48, 209, 88, 0.08);
        border: 1px solid rgba(48, 209, 88, 0.25);
        color: var(--green);
        font-weight: 700;
        font-size: 1.35rem;
        text-align: center;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
      }
      .winner-badge.hidden {
        opacity: 0;
        pointer-events: none;
      }
      .winner-badge.show {
        opacity: 1;
        animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5);
      }
      @keyframes pop {
        from {
          transform: scale(0.85);
        }
        to {
          transform: scale(1);
        }
      }

      /* ── CONTROLS ── */
      .controls {
        background: rgba(13, 13, 22, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 20px;
        width: 280px;
        max-height: calc(90dvh - 120px);
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(12px);
        overflow-x: hidden;
        min-height: 0;
      }

      .controls::-webkit-scrollbar {
        width: 5px;
      }
      .controls::-webkit-scrollbar-track {
        background: transparent;
      }
      .controls::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
      }

      .controls-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .controls-section:last-of-type {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .controls-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--muted);
      }

      .input-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
      }

      .input-row .btn {
        flex-shrink: 0;
      }

      input[type="text"] {
        flex: 1;
        padding: 9px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        font-size: 13px;
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      input[type="text"]::placeholder,
      select::placeholder {
        color: var(--muted);
      }
      input[type="text"]:focus,
      select:focus {
        outline: none;
        border-color: var(--blue);
        background: rgba(10, 132, 255, 0.05);
      }

      select {
        flex: 1;
        padding: 9px 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 10px;
        color: var(--text);
        font-size: 13px;
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        cursor: pointer;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      select option {
        background: var(--surface);
        color: var(--text);
      }

      .btn {
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition:
          transform 0.15s,
          filter 0.15s;
        white-space: nowrap;
      }
      .btn:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
      }
      .btn:active {
        transform: translateY(0);
      }
      .btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
        filter: none;
      }

      .btn-add {
        padding: 9px 14px;
        background: var(--blue);
        color: #fff;
      }

      .btn-spin {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, var(--red), #ff6b35);
        color: #fff;
        font-size: 13px;
        letter-spacing: 2px;
        box-shadow: 0 4px 24px rgba(255, 45, 85, 0.3);
      }

      .key-hint {
        font-size: 10px;
        opacity: 0.7;
        font-weight: 400;
      }

      .tooltip {
        position: fixed;
        bottom: 16px;
        right: 16px;
        font-size: 11px;
        color: var(--muted);
        background: rgba(13, 13, 22, 0.9);
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        z-index: 100;
      }

      .tooltip strong {
        color: var(--text);
      }

      .divider {
        height: 1px;
        background: var(--border);
        margin: 8px 0;
      }

      .segments-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 150px;
        max-height: 100%;
        overflow-y: auto;
        padding-right: 4px;
      }
      .segments-list::-webkit-scrollbar {
        width: 4px;
      }
      .segments-list::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }

      .segment-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border);
        border-radius: 10px;
        animation: slide-in 0.25s ease forwards;
        cursor: pointer;
      }
      @keyframes slide-in {
        from {
          opacity: 0;
          transform: translateX(10px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .seg-name {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .segment-item.excluded {
        opacity: 0.6;
      }
      .segment-item.excluded .seg-name {
        text-decoration: line-through;
        color: var(--muted);
      }

      .btn-remove {
        background: rgba(255, 45, 85, 0.1);
        color: var(--red);
        border: 1px solid rgba(255, 45, 85, 0.2);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: 12px;
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .btn-remove:hover {
        background: var(--red);
        color: #fff;
      }

      .empty-state {
        text-align: center;
        padding: 28px 16px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
      }
      /* Responsive adjustments: prioritize wheel on wide screens */
      @media (min-width: 1000px) {
        .wheel-side {
          flex: 1 1 auto;
        }
        .controls {
          flex: 0 0 280px;
        }
      }

      @media (max-width: 900px) {
        body {
          height: auto;
          min-height: 100vh;
          overflow: auto;
          padding: 20px 16px 40px;
        }
        .layout {
          flex-direction: column;
          align-items: center;
          gap: 20px;
        }
        .wheel-wrap {
          width: min(85vw, 420px);
          height: min(85vw, 420px);
        }
        canvas {
          width: 100%;
          height: auto;
        }
        .controls {
          width: 100%;
          max-width: 420px;
          max-height: none;
        }
      }