/* Roletas: roda, prêmios com chance, próximo giro e colunas laterais. */
.rl-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .9rem; color: var(--text-soft); }
.rl-wallet svg { width: 16px; height: 16px; color: var(--accent); }
.rl-wallet strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rl-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .rl-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.rl-side { display: grid; gap: 16px; }
.rl-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; }
.rl-tab { --rl-accent: var(--accent); flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-weight: 600; transition: border-color .2s, background .2s, transform .2s; }
.rl-tab small { color: var(--text-soft); font-weight: 500; }
.rl-tab:hover { transform: translateY(-1px); border-color: var(--rl-accent); }
.rl-tab.is-active { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 16%, var(--surface)); }
.rl-tab-dot { width: 10px; height: 10px; border-radius: 50%; }
.rl-tab-ready { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: #22c55e; color: #052e16; }
.rl-tab-ready[hidden] { display: none; }
.rl-stage[hidden] { display: none; }
.rl-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .rl-grid { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } }
.rl-kicker { margin: 0; color: var(--text-soft); font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 700; }
.rl-title { margin: 4px 0 6px; font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.1; }
.rl-desc, .rl-cost { margin: 0 0 8px; color: var(--text-soft); line-height: 1.5; }
.rl-cost strong { color: var(--text); }
.rl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.rl-spin { min-width: 170px; }
.rl-spin[disabled] { opacity: .6; cursor: not-allowed; }
.rl-count { margin: 0; color: var(--text-soft); }
.rl-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rl-count[hidden], .rl-result[hidden] { display: none; }
.rl-result { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); line-height: 1.45; margin-bottom: 8px; }
.rl-result.is-win { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--surface)); animation: rl-pop .5s ease; }
.rl-result.is-error { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--surface)); }
@keyframes rl-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.rl-subtitle { margin: 18px 0 8px; font-size: 1rem; }
.rl-prizes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rl-prizes li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); }
.rl-prize-text { min-width: 0; display: grid; }
.rl-prize-text strong { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.2; }
.rl-prize-text small { color: var(--text-soft); }
.rl-chance { display: grid; grid-template-columns: 100%; gap: 3px; }
.rl-chance b { justify-self: end; }
.rl-bar { display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.rl-chance i { display: block; height: 100%; width: 0; max-width: 100%; border-radius: 99px; background: var(--accent); min-width: 3px; }
.rl-chance b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.rl-note, .rl-muted { color: var(--text-soft); font-size: .85rem; margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .rl-result.is-win { animation: none; } .rl-tab { transition: none; } }

/* ===== Roda 3D ===== */
.rl-stage { padding: 20px; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--surface); }
.rl-wheel-col { display: grid; place-items: center; padding: 18px 0 30px; position: relative; perspective: 1100px; }
.rl-wheel-col::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 74%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(4px); z-index: 0; }
.rl-wheel-wrap { position: relative; z-index: 1; width: min(100%, 360px); aspect-ratio: 1; transform: rotateX(14deg); transform-style: preserve-3d; transform-origin: 50% 80%; border-radius: 50%; box-shadow: 0 16px 0 -2px #5b3b06, 0 22px 34px rgba(0, 0, 0, .5); }
.rl-rim, .rl-gloss { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rl-wheel { position: absolute; inset: 5.56%; border-radius: 50%; will-change: transform; }
.rl-wheel svg { width: 100%; height: 100%; display: block; }
.rl-wheel .rl-label { fill: #fff; stroke: rgba(20, 10, 0, .62); stroke-width: 2.6px; paint-order: stroke; stroke-linejoin: round; font-weight: 800; font-family: var(--font-display, inherit); letter-spacing: .01em; }
.rl-wheel .rl-emoji { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.rl-bulb { fill-opacity: .55; animation: rl-bulb 1.4s ease-in-out infinite; }
.rl-bulb.is-odd { animation-delay: .7s; }
.is-spinning .rl-bulb { animation-duration: .22s; }
.is-spinning .rl-bulb.is-odd { animation-delay: .11s; }
@keyframes rl-bulb { 0%, 100% { fill-opacity: .35; } 50% { fill-opacity: 1; } }
.rl-pointer { position: absolute; top: -14px; left: 50%; width: 34px; height: 44px; margin-left: -17px; z-index: 3; transform-origin: 50% 20%; background: linear-gradient(135deg, #fff4c2, #e9b949 45%, #8a5d0c); clip-path: polygon(50% 100%, 6% 28%, 22% 0, 78% 0, 94% 28%); filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.rl-pointer::after { content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c0392b 60%, #6e140c); }
.rl-pointer { transition: transform .07s ease-out; }
.rl-pointer.is-kick { transform: rotate(-16deg); }
.rl-hub { position: absolute; inset: 50% auto auto 50%; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; z-index: 2; color: #6b4300; background: radial-gradient(circle at 35% 28%, #fff7d1, #f0c24e 45%, #a8710f 100%); border: 3px solid #7a5210; box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 -4px 6px rgba(90, 55, 0, .45), inset 0 3px 5px rgba(255, 255, 255, .7); }
.rl-hub svg { width: 52%; height: 52%; }
.rl-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rl-confetti i { position: absolute; left: 50%; top: 50%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: rl-confetti 1.4s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes rl-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); } }

/* ===== Prêmios com imagem do item ===== */
.rl-chip { --chip: var(--accent); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: linear-gradient(145deg, color-mix(in srgb, var(--chip) 85%, #fff), color-mix(in srgb, var(--chip) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .25); overflow: hidden; }
.rl-chip svg { width: 18px; height: 18px; color: #fff; }
.rl-chip.has-img { background: color-mix(in srgb, var(--chip) 25%, var(--surface)); border: 2px solid var(--chip); }
.rl-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rl-prizes li { grid-template-columns: 38px minmax(0, 1fr) 96px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.rl-prizes li.is-won { border-color: #22c55e; box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 40%, transparent); animation: rl-pop .6s ease; }
.rl-result { display: flex; align-items: center; gap: 12px; }
.rl-result-img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); flex: none; }
@media (max-width: 480px) { .rl-wheel-wrap { transform: rotateX(8deg); } .rl-stage { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .rl-bulb, .rl-prizes li.is-won { animation: none; } .rl-pointer { transition: none; } .rl-wheel-wrap { transform: none; } }

/* ===== Painéis laterais: Últimos prêmios e Meus giros ===== */
.rl-box { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); background: var(--surface); display: grid; gap: 12px; min-width: 0; }
.rl-box-head { display: flex; align-items: center; gap: 12px; }
.rl-box-head h2 { margin: 0; font-size: 1rem; font-family: var(--font-display); }
.rl-box-head p { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.rl-box-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; }
.rl-box-ico svg { width: 20px; height: 20px; }
.rl-box-ico--gold { color: #7a4b00; background: linear-gradient(145deg, #fde68a, #f2b84b); }
.rl-box-ico--violet { color: #fff; background: linear-gradient(145deg, #a78bfa, #6d4de0); }
.rl-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: .88rem; }
.rl-empty[hidden] { display: none; }
.rl-empty svg { flex: none; width: 20px; height: 20px; opacity: .7; }
.rl-feed { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rl-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2, var(--bg)); border: 1px solid transparent; min-width: 0; transition: border-color .15s, transform .15s; }
.rl-item:hover { border-color: var(--border); transform: translateY(-1px); }
.rl-item-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rl-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rl-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.rl-item-top time { flex: none; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.rl-item-prize { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rl-item-prize svg { flex: none; width: 14px; height: 14px; color: var(--accent); }
.rl-item-prize b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.rl-item small { color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-family: var(--font-display); color: #3a2600; background: linear-gradient(145deg, #fde68a, #f2b84b); }
.rl-chip-mini { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--accent-text, var(--accent)); background: var(--accent-soft); }
.rl-chip-mini svg { width: 18px; height: 18px; }
.rl-item.is-none { opacity: .7; }
.rl-item.is-none .rl-chip-mini { color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ===== Botão de giro e som ===== */
.rl-actions { align-items: stretch; }
.rl-spin { min-height: 52px; padding: 0 26px; font-size: 1.02rem; font-weight: 800; border-radius: 16px; box-shadow: 0 12px 26px -14px var(--accent); }
.rl-spin:not([disabled]):hover { transform: translateY(-2px); }
.rl-sound { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: border-color .15s, color .15s; }
.rl-sound:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.rl-sound.is-off { opacity: .55; }
.rl-sound svg { width: 22px; height: 22px; }
.rl-wheel-wrap.is-spinning { box-shadow: 0 16px 0 -2px #5b3b06, 0 22px 44px rgba(0, 0, 0, .55), 0 0 60px -6px color-mix(in srgb, var(--accent) 60%, transparent); }