@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

      :root {
        --bg: #0f1923;
        --bg-alt: #17212b;
        --fg: #ece8e1;
        --muted: #94a2b8;
        --accent: #ff4655;
        --accent-2: #ff6b75;
        --card: #1f2a36;
        --border: rgba(255, 255, 255, 0.14);
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
      }

      * {
        box-sizing: border-box;
      }

      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      body {
        margin: 0;
        font-family: "Comic Sans MS", "Comic Sans", cursive;
        background:
          radial-gradient(circle at 15% 10%, rgba(255, 70, 85, 0.26), transparent 40%),
          radial-gradient(circle at 90% 90%, rgba(69, 222, 202, 0.2), transparent 45%),
          linear-gradient(145deg, #0b121b 0%, #0f1923 45%, #152433 100%);
        color: var(--fg);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 18px 48px;
      }

      .wrap {
        width: min(1400px, 100%);
        display: grid;
        gap: 24px;
      }

      header {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      h1 {
        margin: 0;
        font-size: clamp(2rem, 3.8vw, 3rem);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--fg);
        text-shadow: 0 0 18px rgba(255, 70, 85, 0.2);
      }

      .subtitle {
        color: var(--muted);
        font-size: 1rem;
      }

      .panel {
        background:
          linear-gradient(130deg, rgba(255, 70, 85, 0.14), rgba(12, 17, 24, 0.82) 42%),
          linear-gradient(145deg, rgba(25, 36, 48, 0.92), rgba(18, 28, 38, 0.92));
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 22px;
        box-shadow: var(--shadow);
      }

      .picker {
        display: grid;
        gap: 18px;
        justify-items: center;
        text-align: center;
      }

      .current-panel {
        display: grid;
        gap: 10px;
      }

      .players {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .player-btn {
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--fg);
        padding: 10px 18px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
      }

      .player-btn.active {
        background: linear-gradient(120deg, rgba(255, 70, 85, 0.32), rgba(255, 70, 85, 0.18));
        border-color: rgba(255, 70, 85, 0.75);
        box-shadow: 0 0 18px rgba(255, 70, 85, 0.25);
        transform: translateY(-1px);
      }

      .roll-zone {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        justify-content: center;
      }

      .actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }

      .toggle-btn {
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        color: var(--fg);
        padding: 10px 14px;
        border-radius: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease;
      }

      .toggle-btn:hover {
        border-color: rgba(255, 70, 85, 0.65);
        color: #ffffff;
      }

      .roll-btn {
        border: none;
        padding: 14px 26px;
        background: linear-gradient(135deg, #ff4655, #ff6b75);
        color: #ffffff;
        font-weight: 800;
        font-size: 1rem;
        border-radius: 14px;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        box-shadow: 0 12px 24px rgba(255, 70, 85, 0.35);
        transition: transform 0.15s ease, box-shadow 0.2s ease;
      }

      .reset-btn {
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        color: var(--fg);
        padding: 12px 18px;
        border-radius: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease;
      }

      .reset-btn:hover {
        border-color: rgba(69, 222, 202, 0.8);
        color: #ffffff;
      }

      .skip-btn {
        border: 1px solid rgba(255, 70, 85, 0.8);
        background: rgba(255, 70, 85, 0.2);
        color: #ffeef0;
        padding: 12px 18px;
        border-radius: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
      }

      .skip-btn:hover:not(:disabled) {
        border-color: rgba(255, 70, 85, 0.95);
        color: #ffffff;
        background: rgba(255, 70, 85, 0.32);
      }

      .skip-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .roll-btn:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 16px 28px rgba(255, 70, 85, 0.42);
      }

      .current {
        display: grid;
        gap: 10px;
        justify-items: center;
        text-align: center;
      }

      .current .label {
        color: var(--muted);
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .current ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
      }

      .current li {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 210px;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
        font-weight: 700;
      }

      .current-text {
        display: grid;
        gap: 2px;
      }

      .current-player-name {
        font-size: 1.05rem;
      }

      .current-hero-img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.08);
      }

      .current .hero-name {
        color: #45deca;
        font-size: 1.05rem;
      }

      .status {
        min-height: 20px;
        font-size: 0.95rem;
        color: var(--muted);
      }

      .status.blocked {
        color: #ff9aa0;
        font-weight: 600;
      }

      .cursor-trail {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        overflow: hidden;
      }

      .cursor-pimmel {
        position: fixed;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 0 8px rgba(255, 70, 85, 0.35));
        will-change: transform, opacity;
        animation: cursor-pimmel-fade 1200ms ease-out forwards;
      }

      @keyframes cursor-pimmel-fade {
        0% {
          opacity: 0.95;
          transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 0deg)) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -38px))) rotate(calc(var(--rot, 0deg) + 20deg)) scale(0.55);
        }
      }

      .spray {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.8s ease;
        z-index: 10;
        backdrop-filter: blur(2px);
      }

      .spray.show {
        opacity: 1;
        visibility: visible;
      }

      .spray.fadeout {
        opacity: 0;
      }

      .modal {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(5, 5, 8, 0.7);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 12;
      }

      .modal.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .modal-card {
        width: min(420px, 92vw);
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 22px;
        box-shadow: var(--shadow);
        display: grid;
        gap: 14px;
      }

      .modal-card h2 {
        margin: 0;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .modal-card input {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(9, 15, 22, 0.75);
        color: var(--fg);
        font-size: 1rem;
      }

      .modal-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }

      .modal-actions .reset-btn {
        border-color: rgba(255, 70, 85, 0.85);
        color: #ffeef0;
      }

      .modal-error {
        color: #ff9aa0;
        font-size: 0.95rem;
        min-height: 18px;
      }

      .spray-burst {
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 77, 87, 0.9), rgba(12, 15, 26, 0) 70%);
        filter: blur(3px);
        transform: scale(0.4);
        opacity: 0;
      }

      .spray-confetti {
        z-index: 4;
        overflow: visible;
        mix-blend-mode: screen;
      }

      .spray.show .spray-burst {
        animation: burst 0.9s ease-out forwards;
      }

      .spray-card {
        background: rgba(9, 12, 22, 0.9);
        border: 2px solid rgba(255, 77, 87, 0.8);
        border-radius: 26px;
        padding: 26px 30px;
        display: grid;
        gap: 12px;
        align-items: center;
        text-align: center;
        box-shadow: 0 30px 70px rgba(20, 6, 8, 0.7);
        transform: translateY(18px) scale(0.86);
        opacity: 0;
        position: relative;
        z-index: 2;
      }

      .spray.show .spray-card {
        animation: pop 2.2s ease-out forwards, shake 2.2s ease-in-out forwards;
      }

      .spray-card img {
        width: 220px;
        height: 220px;
        object-fit: cover;
        border-radius: 18px;
        border: 2px solid rgba(255, 255, 255, 0.15);
      }

      .spray-name {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .spray-particles,
      .spray-confetti {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .spray-particles span {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 77, 87, 0.65);
        opacity: 0;
      }

      .spray.show .spray-particles span {
        animation: spray 0.9s ease-out forwards;
      }

      .spray-particles span:nth-child(1) { left: 42%; top: 30%; animation-delay: 0.05s; }
      .spray-particles span:nth-child(2) { left: 55%; top: 35%; animation-delay: 0.08s; }
      .spray-particles span:nth-child(3) { left: 38%; top: 45%; animation-delay: 0.12s; }
      .spray-particles span:nth-child(4) { left: 60%; top: 46%; animation-delay: 0.16s; }
      .spray-particles span:nth-child(5) { left: 46%; top: 55%; animation-delay: 0.2s; }

      .spray-confetti span {
        position: absolute;
        width: 12px;
        height: 22px;
        background: rgba(255, 70, 85, 0.95);
        opacity: 0;
        display: block;
        left: 50%;
        top: 60%;
        filter: drop-shadow(0 0 8px rgba(69, 222, 202, 0.45));
        transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
        will-change: transform, opacity;
      }

      .spray-confetti span:nth-child(3n) {
        background: rgba(69, 222, 202, 0.9);
      }

      .spray-confetti span:nth-child(4n) {
        background: rgba(236, 232, 225, 0.9);
      }

      .spray.show .spray-confetti span {
        opacity: 1;
      }

      @keyframes pop {
        0% { transform: translateY(24px) scale(0.78) rotate(-2deg); opacity: 0; }
        20% { opacity: 1; }
        45% { transform: translateY(0) scale(1.07) rotate(2deg); opacity: 1; }
        60% { transform: translateY(0) scale(1.03) rotate(-2deg); opacity: 1; }
        75% { transform: translateY(-6px) scale(1.02) rotate(1.5deg); opacity: 1; }
        100% { transform: translateY(-10px) scale(1) rotate(0deg); opacity: 0; }
      }

      @keyframes shake {
        0% { transform: translateY(24px) scale(0.78) rotate(0deg); }
        20% { transform: translateY(0) scale(1.05) rotate(-3deg); }
        35% { transform: translateY(0) scale(1.05) rotate(3deg); }
        50% { transform: translateY(-2px) scale(1.03) rotate(-2deg); }
        65% { transform: translateY(-4px) scale(1.02) rotate(2deg); }
        80% { transform: translateY(-8px) scale(1.01) rotate(-1deg); }
        100% { transform: translateY(-10px) scale(1) rotate(0deg); }
      }

      @keyframes burst {
        0% { transform: scale(0.35); opacity: 0; }
        30% { opacity: 1; }
        100% { transform: scale(1.8); opacity: 0; }
      }

      @keyframes spray {
        0% { transform: scale(0.2); opacity: 0; }
        40% { opacity: 1; }
        100% { transform: scale(1.4) translateY(-18px); opacity: 0; }
      }


      @media (prefers-reduced-motion: reduce) {
        .spray.show .spray-burst,
        .spray.show .spray-card,
        .spray.show .spray-particles span,
        .spray.show .spray-confetti span {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }

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

      .card {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid var(--border);
        padding: 16px;
        background-image:
          linear-gradient(140deg, rgba(255, 70, 85, 0.1), rgba(15, 25, 35, 0.9) 40%),
          linear-gradient(160deg, rgba(19, 32, 45, 0.95), rgba(13, 22, 31, 0.95));
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
      }

      .card > * {
        position: relative;
        z-index: 1;
      }

      .card-felix::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.62;
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23e7ddff'%3E%3Ccircle cx='18' cy='8' r='4.6'/%3E%3Ccircle cx='27' cy='14' r='4.6'/%3E%3Ccircle cx='24' cy='25' r='4.6'/%3E%3Ccircle cx='12' cy='25' r='4.6'/%3E%3Ccircle cx='9' cy='14' r='4.6'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23ffe8a3'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23e7ddff'%3E%3Ccircle cx='18' cy='8' r='4.6'/%3E%3Ccircle cx='27' cy='14' r='4.6'/%3E%3Ccircle cx='24' cy='25' r='4.6'/%3E%3Ccircle cx='12' cy='25' r='4.6'/%3E%3Ccircle cx='9' cy='14' r='4.6'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23ffe8a3'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23ffd3ea'%3E%3Ccircle cx='22' cy='10' r='6'/%3E%3Ccircle cx='33' cy='18' r='6'/%3E%3Ccircle cx='29' cy='31' r='6'/%3E%3Ccircle cx='15' cy='31' r='6'/%3E%3Ccircle cx='11' cy='18' r='6'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23ffd86a'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='%23e7ddff'%3E%3Ccircle cx='18' cy='8' r='4.6'/%3E%3Ccircle cx='27' cy='14' r='4.6'/%3E%3Ccircle cx='24' cy='25' r='4.6'/%3E%3Ccircle cx='12' cy='25' r='4.6'/%3E%3Ccircle cx='9' cy='14' r='4.6'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='4.2' fill='%23ffe8a3'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23e8ffd9'%3E%3Ccircle cx='15' cy='6.8' r='3.9'/%3E%3Ccircle cx='22' cy='11.5' r='3.9'/%3E%3Ccircle cx='19.5' cy='20' r='3.9'/%3E%3Ccircle cx='10.5' cy='20' r='3.9'/%3E%3Ccircle cx='8' cy='11.5' r='3.9'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.6' fill='%23ffe99b'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='%23f8e7ff'%3E%3Ccircle cx='13' cy='5.8' r='3.2'/%3E%3Ccircle cx='19.2' cy='10.1' r='3.2'/%3E%3Ccircle cx='16.8' cy='17.5' r='3.2'/%3E%3Ccircle cx='9.2' cy='17.5' r='3.2'/%3E%3Ccircle cx='6.8' cy='10.1' r='3.2'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='2.9' fill='%23ffe39b'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffe4f3'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe49f'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e5e1ff'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e7ffe2'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffe4f3'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe49f'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e5e1ff'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e7ffe2'%3E%3Ccircle cx='12' cy='5.4' r='2.9'/%3E%3Ccircle cx='17.2' cy='9' r='2.9'/%3E%3Ccircle cx='15.3' cy='15.4' r='2.9'/%3E%3Ccircle cx='8.7' cy='15.4' r='2.9'/%3E%3Ccircle cx='6.8' cy='9' r='2.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23ffe3a1'/%3E%3C/svg%3E"),
          linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        background-size:
          62px 62px, 44px 44px, 34px 34px,
          54px 54px, 40px 40px, 30px 30px,
          48px 48px, 36px 36px, 28px 28px,
          26px 26px,
          22px 22px, 20px 20px, 21px 21px,
          18px 18px, 19px 19px, 17px 17px,
          auto;
        background-position:
          8% 12%, 86% 18%, 18% 24%,
          72% 40%, 32% 36%, 10% 46%,
          52% 14%, 86% 28%, 44% 32%,
          14px 22px,
          24% 22%, 66% 30%, 78% 44%,
          22% 52%, 58% 20%, 76% 34%,
          0 0;
        background-repeat: no-repeat;
      }

      .card-felix::after {
        content: "";
        position: absolute;
        right: -16px;
        top: -20px;
        width: 120px;
        height: 120px;
        pointer-events: none;
        border-radius: 24px;
        opacity: 0.55;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffe3f2'%3E%3Ccircle cx='60' cy='25' r='14'/%3E%3Ccircle cx='85' cy='42' r='14'/%3E%3Ccircle cx='75' cy='70' r='14'/%3E%3Ccircle cx='45' cy='70' r='14'/%3E%3Ccircle cx='35' cy='42' r='14'/%3E%3C/g%3E%3Ccircle cx='60' cy='52' r='13' fill='%23ffd36e'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }

      .card h2 {
        margin: 0 0 12px;
        font-size: 1.4rem;
        letter-spacing: 0.03em;
        text-transform: none;
        line-height: 1.15;
        min-height: 3rem;
        display: flex;
        align-items: center;
      }

      .card-current {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
      }

      .card-current-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.08);
      }

      .card-current-meta {
        display: grid;
        gap: 2px;
      }

      .card-current-label {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
      }

      .card-current-hero {
        font-weight: 700;
        color: #45deca;
      }

      .tilt-meter {
        margin-bottom: 14px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
        display: grid;
        gap: 8px;
      }

      .tilt-meter-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .tilt-meter-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        font-weight: 700;
      }

      .tilt-meter-value {
        min-width: 48px;
        text-align: right;
        font-weight: 800;
        color: #45deca;
      }

      .tilt-meter-input {
        width: 100%;
        accent-color: #ff4655;
        cursor: pointer;
      }

      ul.hero-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 8px;
      }

      .hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        min-height: 42px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--fg);
        transition: border-color 0.2s ease, background 0.2s ease;
      }

      .hero span {
        font-weight: 600;
      }

      .hero.selected {
        border-color: rgba(69, 222, 202, 0.78);
        background: rgba(69, 222, 202, 0.16);
        color: #dffff8;
      }

      .hero.selected::after {
        content: "✓";
        font-size: 0.9rem;
        color: #78f3e5;
      }

      .hero.latest {
        border-color: rgba(255, 70, 85, 0.95);
        background: rgba(255, 70, 85, 0.2);
        color: #ffeef0;
      }

      .hero.latest::after {
        content: "";
      }

      .picked-list .hero {
        border-color: rgba(69, 222, 202, 0.7);
        background: rgba(69, 222, 202, 0.12);
      }

      .picked-list .hero::after {
        content: "✓";
        font-size: 0.9rem;
        color: #78f3e5;
      }

      .picked-list .hero.skipped {
        border-color: rgba(255, 70, 85, 0.82);
        background: rgba(255, 70, 85, 0.2);
        color: #ffeef0;
      }

      .picked-list .hero.skipped::after {
        content: "✕";
        font-size: 0.9rem;
        color: #ff8791;
      }

      .empty {
        color: var(--muted);
        font-size: 0.9rem;
      }

      .picked {
        border-bottom: 1px solid var(--border);
        margin-bottom: 14px;
        padding-bottom: 12px;
      }

      .picked-title {
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        cursor: pointer;
        text-align: left;
      }

      .picked-caret {
        transition: transform 0.2s ease;
      }

      .picked-title.open .picked-caret {
        transform: rotate(90deg);
      }

      .note {
        color: var(--muted);
        font-size: 0.96rem;
      }

      .diana-footer {
        margin-top: 18px;
        display: flex;
        justify-content: center;
      }

      .diana-footer img {
        width: min(320px, 85vw);
        height: auto;
        display: block;
      }

      @media (max-width: 700px) {
        .roll-zone {
          flex-direction: column;
          align-items: flex-start;
        }
      }