.wheel-page { display: flex; flex-direction: column; min-height: 100dvh; }
.wheel-page > header, .wheel-page > footer { flex-shrink: 0; }
.wheel-page > footer { margin-top: 0; padding: 8px 12px; }
.wheel-page .site-footer-links { gap: 5px 16px; }
.wheel-page .site-footer-copyright { margin-top: 6px; }
.wheel-shell { display: flex; flex-direction: column; align-items: center; flex: 1 0 auto; width: min(740px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 28px; color: #ecf2fc; text-align: center; }
.wheel-shell > * { flex-shrink: 0; }
.wheel-heading { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; }
.wheel-heading h1 { width: auto; margin: 0; color: #f3d17a; font-size: 29px; line-height: 1.2; }
.wheel-stage { position: relative; width: min(450px, 100%); aspect-ratio: 1; margin: 0 auto; isolation: isolate; }
.wheel-stage::before { position: absolute; content: ""; inset: 7%; border-radius: 50%; background: #e7bc5510; box-shadow: 0 0 65px 10px #d4ad4616; z-index: -1; }
.wheel-rotor { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.wheel-sector { stroke: #8f7b4b; stroke-width: .8; }
.wheel-prize-sector { fill: var(--category-fill); }
.wheel-sector-text { fill: #f6f8ff; stroke: #142136; stroke-width: 2px; stroke-linejoin: round; paint-order: stroke fill; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.wheel-sector-logo { pointer-events: none; }
.wheel-sector-empty-icon { pointer-events: none; opacity: .8; }
.wheel-rim { fill: none; stroke: #b99549; stroke-width: 5; }
.wheel-rim-inner { fill: none; stroke: #f3d78b; stroke-width: 1; opacity: .5; }
.wheel-rim-dot { fill: #d7bc79; }
.wheel-pointer { position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%); width: 6.5%; height: 8.5%; z-index: 3; background: linear-gradient(90deg, #b38428, #ffedb3 48%, #cfaa48); clip-path: polygon(50% 100%, 5% 14%, 15% 0, 85% 0, 95% 14%); filter: drop-shadow(0 3px 2px #0007); }
.wheel-hub { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); width: 18%; aspect-ratio: 1; border: 3px solid #ba994b; border-radius: 50%; background: radial-gradient(circle at 35% 20%, #465675, #15243c 60%, #0b1729); box-shadow: inset 0 0 0 3px #101b2d, 0 4px 16px #0008; color: #f6d686; pointer-events: none; }
.wheel-hub img { width: 64%; height: 75%; object-fit: contain; }
.wheel-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 5px auto 15px; }
.wheel-legend-item { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--category-fill, #394963); border-radius: 18px; background: #172337; color: #c7d4e8; font-size: 11px; line-height: 1.3; }
.wheel-legend-item img { width: 20px; height: 20px; object-fit: contain; }
.wheel-legend-item strong { color: #f2d083; font-size: 10px; font-weight: 650; }
.wheel-spin, .wheel-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 42px; padding: 9px 25px; box-sizing: border-box; border: 1px solid #e8c26a; border-radius: 11px; background: linear-gradient(110deg, #f3d992, #d5aa49); color: #152036; font: 750 15px/1.2 Arial, sans-serif; cursor: pointer; }
.wheel-spin:hover:not(:disabled) { background: linear-gradient(110deg, #ffe9b7, #e9be5b); box-shadow: 0 4px 15px #d9af432b; }
.wheel-spin:focus-visible, .wheel-secondary:focus-visible { outline: 2px solid #85c5fd; outline-offset: 4px; }
.wheel-spin:disabled, .wheel-secondary:disabled { opacity: .5; cursor: default; }
.wheel-spin-price { display: inline-flex; align-items: center; gap: 5px; font-weight: 850; }
.wheel-spin-price img { width: 25px; height: 25px; object-fit: contain; }
.wheel-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; max-width: 100%; }
.wheel-controls > .wheel-spin { grid-column: 2; grid-row: 1; }
.wheel-controls > [data-minigames-ticket-slot] { grid-column: 3; grid-row: 1; justify-self: start; min-width: 0; min-height: 20px; max-width: 100%; }
.wheel-status { width: 100%; min-height: 17px; margin: 5px 0 0; color: #aabbd4; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.wheel-status.is-error { color: #ffb8a4; }
.wheel-result-dialog { position: fixed; inset: 0; width: min(360px, calc(100% - 28px)); height: fit-content; max-height: calc(100dvh - 30px); margin: auto; overflow-y: auto; padding: 25px 22px; box-sizing: border-box; border: 1px solid #b39452; border-radius: 18px; background: radial-gradient(ellipse at top, #2d3c57, #121e32 75%); color: #f4f6fb; text-align: center; }
.wheel-result-dialog::backdrop { background: #050b18b3; }
.wheel-result-eyebrow { color: #d9b45c; font-size: 11px; font-weight: 650; letter-spacing: 2px; }
.wheel-result-dialog h2 { margin: 8px 0 15px; font-size: 25px; line-height: 1.2; }
.wheel-result-preview .shop-card { width: min(180px, 100%); margin: 0 auto; box-sizing: border-box; }
.wheel-result-detail { margin: 13px 0 0; color: #becce0; font-size: 12px; line-height: 1.5; }
.wheel-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 15px; }
.wheel-result-actions .wheel-spin, .wheel-result-actions .wheel-secondary { min-height: 38px; padding: 9px 15px; font-size: 12px; gap: 6px; }
.wheel-secondary { background: #18273c; color: #efcf87; border-color: #6c5c39; }
.wheel-empty-result { display: grid; place-items: center; width: 95px; aspect-ratio: 1; margin: 8px auto; border: 1px solid #485674; border-radius: 50%; background: #182a42; }
.wheel-empty-result img { display: block; width: 66px; height: 66px; object-fit: contain; }
@media (max-width: 600px) {
    .wheel-shell { padding-top: 17px; }
    .wheel-heading h1 { font-size: 26px; }
    .wheel-legend { gap: 5px; margin: 4px 0 13px; }
    .wheel-legend-item { padding: 4px 6px; font-size: 10px; gap: 4px; }
    .wheel-legend-item img { width: 18px; height: 18px; }
    .wheel-controls { gap: 8px; }
    .wheel-controls > .wheel-spin { min-width: 0; min-height: 45px; padding: 8px; gap: 8px; font-size: 11px; }
    .wheel-controls .wheel-spin-price { flex-shrink: 0; }
    .wheel-controls .wheel-spin-price img { width: 20px; height: 20px; }
    .wheel-page .site-footer-links { gap: 5px 12px; }
    .wheel-page .site-privacy-link, .wheel-page .site-footer-cookie-settings { font-size: 11px; }
}
@media (max-width: 460px) {
    .wheel-controls > [data-minigames-ticket-slot] { grid-column: 2; grid-row: 2; justify-self: center; }
}

@media (min-width: 601px) and (max-height: 800px) {
    .wheel-shell { padding: 2px 0; }
    .wheel-legend { margin: 2px auto 4px; }
    .wheel-page > footer { padding: 4px 12px; }
    .wheel-page .site-footer-links { gap: 3px 16px; }
    .wheel-page .site-privacy-link, .wheel-page .site-footer-cookie-settings { font-size: 11px; }
    .wheel-page .site-footer-copyright { margin-top: 4px; font-size: 10px; }
}