@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&display=swap');
* { box-sizing: border-box; }
body { margin: 0; background: #111; color: #fff; font-family: Kanit, sans-serif; }
.credit-wheel-header { position: relative; width: fit-content; margin: 0 auto 12px; padding-left: 16px; font-size: clamp(26px,4vw,46px); line-height:1.35; }
.credit-wheel-header::before { content: ''; position:absolute; left:0; top:.14em; width:8px; height:1.15em; background:linear-gradient(#facc15,#eab308); box-shadow:0 0 8px #facc1573; }
.credit-wheel-stage { position:relative; width:100%; max-width:1000px; aspect-ratio:1000/650; margin:auto; overflow:hidden; }
.credit-wheel-stage img { position:absolute; display:block; height:auto; user-select:none; pointer-events:none; }
.rotu-bg { left:50%; top:53%; width:112%; height:129% !important; object-fit:cover; transform:translate(-50%,-50%); mix-blend-mode:screen; opacity:.58; }
.rotu-wheel { --spin:0deg; z-index:3; left:50%; top:50%; width:43.4%; transform:translate(-50%,-50%) rotate(var(--spin)); transition:transform 3s cubic-bezier(.12,.7,.11,1); }
.rotu-frame { z-index:5; left:50%; top:50%; width:70%; transform:translate(-50%,-50%); }
.rotu-multiplier { z-index:6; left:50%; top:50%; width:23.3%; transform:translate(-50%,-50%); }
.rotu-lion { z-index:7; left:59%; top:4%; width:20%; }
.rotu-lantern { z-index:7; left:9%; top:58%; width:19%; }
.rotu-spin-button { position:absolute; z-index:9; left:50%; top:50%; width:10%; aspect-ratio:1; transform:translate(-50%,-50%); border:0; padding:0; background:none; cursor:pointer; }
.rotu-spin-button img { inset:0; width:100%; height:100%; }
.rotu-spin-button span { position:relative; z-index:1; color:#111; font:600 clamp(10px,2vw,20px) Kanit,sans-serif; }
button { font-family:inherit; }
.wheel-result-dialog { width: min(420px, calc(100% - 32px)); padding: 28px; border: 1px solid #facc15; border-radius: 16px; background: #202020; color: #fff; text-align: center; }
.wheel-result-dialog::backdrop { background: rgb(0 0 0 / 72%); }
.wheel-result-dialog h2 { font-size: 24px; width: fit-content; margin: 0 auto 20px; }
.wheel-result-message { font-size: 20px; line-height: 1.7; }
.wheel-result-note { font-size: 14px; color: #cdbed3; }
.wheel-result-close { border: 0; border-radius: 7px; background: #facc15; color: #fff; font: inherit; padding: 10px 32px; }
.rotu-spin-button:disabled { cursor: wait; }
.wheel-result-close { color: #171300; }