@keyframes roulettePopIn { from { transform: translateY(18px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
.roulette-floating-card { width:100%; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#0c0c0e; box-shadow: 0 0 50px -10px rgba(56,189,248,.25), 0 25px 50px rgba(0,0,0,.9); transition: transform .15s, opacity .15s, filter .15s, border-color .2s; }
html[data-theme="light"] .roulette-floating-card { background:#fff; border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .roulette-name { color:#0f172a; }
html[data-theme="light"] .roulette-bio { color:#64748b; }
.roulette-floating-card.is-rolling-out { opacity:.15; filter: blur(3.5px); transform: translateY(-34px) scale(.96); transition: transform .15s cubic-bezier(.4,0,1,1), opacity .15s ease, filter .15s ease; }
.roulette-floating-card.is-shuffling { filter: blur(1.5px); transform: scale(.985); border-color: #f472b6; }
.roulette-floating-card.is-rolling-out { opacity:.15; filter: blur(3.5px); transform: translateY(-34px) scale(.96); }
.roulette-floating-card.is-settled {
  filter:none; opacity:1; transform:none;
  border-color: #e8c872;
  box-shadow: 0 0 40px -4px rgba(232,200,114,.55), 0 20px 60px rgba(0,0,0,.55);
  animation: settleSlotReelSpring .58s cubic-bezier(.22,1.25,.36,1);
}
@keyframes settleSlotReelSpring {
  0% { transform: translateY(32px) scale(.96); opacity:.3; filter:blur(2px); }
  45% { transform: translateY(-8px) scale(1.035); opacity:1; filter:none; }
  75% { transform: translateY(2.5px) scale(.995); }
  100% { transform:none; opacity:1; }
}
.celebration-layer { position: fixed; inset: 0; pointer-events: none; z-index: 260; }
.celebration-burst-particle, .celebration-star-particle, .celebration-confetti-ribbon {
  position: absolute; width: 8px; height: 8px; border-radius: 2px;
  animation: flyBurst .95s ease-out forwards;
}
.celebration-star-particle { width: 10px; height: 10px; clip-path: polygon(50% 0,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%); }
.celebration-confetti-ribbon { width: 4px; height: 12px; border-radius: 2px; }
@keyframes flyBurst {
  0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.6); opacity: 0; }
}
.roulette-dialog{border:0;padding:28px 16px;background:transparent;color:#192753;width:100%;max-width:100vw;height:100%;max-height:100dvh;overflow:auto;outline:none}
.roulette-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(28px)}
.roulette-frameless-wrapper{display:flex;flex-direction:column;align-items:center;width:min(400px,92vw);min-height:0;margin:auto;animation:roulettePopIn .35s cubic-bezier(.16,1,.3,1)}
.roulette-dialog[open]{display:flex}
.roulette-dialog .roulette-floating-card{background:#fff;border:2px solid #cbd5e1;border-radius:24px}
.roulette-pose-stage{position:relative;background:#fff;height:min(48dvh,440px);padding:24px 20px 6px;display:grid;place-items:center}
.roulette-pose-stage img{width:100%;height:100%;min-height:0;object-fit:contain}
.roulette-tag{position:absolute;top:16px;left:18px;background:#e3d9ff;border-radius:99px;padding:5px 10px;font-size:11px;font-weight:700}
.roulette-info-zone{padding:16px 22px 22px;text-align:center}
.roulette-name{font:800 23px/1.4 GenSen,system-ui;margin:0 0 9px;color:#192753}
.roulette-handle{margin:0;color:#64748b;font-size:13px;line-height:1.7}
.roulette-outside-actions{display:flex;gap:12px;width:100%;margin-top:20px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .35s}
.roulette-outside-actions.is-visible{opacity:1;transform:none;pointer-events:auto}
.roulette-outside-actions button{flex:1;min-height:48px;border-radius:999px;padding:10px 14px;font:700 14px/1.5 system-ui;cursor:pointer;border:1px solid #ffffff26}
.btn-roulette-visit{background:#2563eb;color:#fff}.btn-reshuffle{background:#f8fafc;color:#0f172a}
.roulette-dismiss-hint{color:#b8c2d1;text-align:center;font:400 12px/1.7 system-ui;margin:15px 0 0}
body:has(.roulette-dialog[open]){overflow:hidden}
.roulette-dialog .celebration-layer{overflow:hidden}
#btn-lucky-pick:focus{outline:none}
#btn-lucky-pick:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
@media(max-width:600px){.roulette-pose-stage{height:43dvh}.roulette-name{font-size:20px}.roulette-outside-actions button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.roulette-dialog *{animation:none!important;transition:none!important}.roulette-floating-card.is-shuffling{filter:none;transform:none}}