/* Fixed artwork layers for the editable prize wheel. */
.wheel-stage{width:min(88vw,390px);isolation:isolate}
.prize-wheel{inset:8.4%;z-index:1;border:2px solid #f7bd22;border-radius:50%;box-shadow:inset 0 0 0 2px #fff7d244,0 0 0 2px #080808;overflow:hidden;background-color:#f7bd22;background-image:radial-gradient(circle at 50% 50%,transparent 0 40%,#00000016 100%),var(--wheel-surface)}
.wheel-divider{position:absolute;z-index:0;left:50%;top:50%;width:1px;height:54%;background:#080808;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--divider-angle));pointer-events:none}
.wheel-frame{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 11px 15px #0007)}
.wheel-pointer{position:absolute;z-index:7;left:50%;top:-4.2%;width:27%;height:auto;border:0;filter:drop-shadow(0 5px 4px #0008);transform:translateX(-50%);pointer-events:none}
.wheel-center{position:absolute;z-index:6;left:50%;top:50%;width:35%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center}
.wheel-center>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wheel-center .wheel-spin{position:relative;inset:auto;transform:none;z-index:1;width:78%;height:78%;border:0;background:transparent;color:#fff;font-size:clamp(.78rem,3.7vw,1.08rem);letter-spacing:.04em;text-shadow:0 2px 2px #662000;box-shadow:none}
.wheel-center .wheel-spin:disabled{font-size:clamp(.58rem,2.7vw,.76rem)}
.wheel-segment{width:34%;display:grid;grid-template-rows:clamp(30px,10vw,44px) 18px;justify-items:center;align-content:center;gap:2px;min-height:68px;left:calc(50% + var(--x));top:calc(50% + var(--y));transform:translate(-50%,-50%) rotate(calc(-1 * var(--wheel-rotation)));transition:transform 3.7s cubic-bezier(.12,.74,.12,1)}
.wheel-gift{display:block;width:clamp(30px,10vw,44px);height:clamp(30px,10vw,44px);object-fit:contain;margin:0;filter:drop-shadow(0 2px 2px #0007)}
.wheel-segment b{display:block;width:auto;height:auto;margin:0;align-self:center;border:0;border-radius:0;background:transparent;color:#fff;font-size:13px;font-weight:900;line-height:1;text-shadow:0 1px 3px #000;box-shadow:none}
.wheel-segment>span{display:none}
.wheel-segment:nth-child(odd) .wheel-gift{filter:brightness(1.18) drop-shadow(0 2px 2px #0007)}
.prize-wheel[data-wheel-size="6"] .wheel-segment,.prize-wheel[data-wheel-size="7"] .wheel-segment,.prize-wheel[data-wheel-size="8"] .wheel-segment{width:30%;grid-template-rows:36px 17px;min-height:56px}.prize-wheel[data-wheel-size="6"] .wheel-gift,.prize-wheel[data-wheel-size="7"] .wheel-gift,.prize-wheel[data-wheel-size="8"] .wheel-gift{width:36px;height:36px}.prize-wheel[data-wheel-size="9"] .wheel-segment,.prize-wheel[data-wheel-size="10"] .wheel-segment,.prize-wheel[data-wheel-size="11"] .wheel-segment,.prize-wheel[data-wheel-size="12"] .wheel-segment{width:24%;grid-template-rows:28px 15px;min-height:45px;font-size:clamp(.5rem,2.25vw,.66rem)}.prize-wheel[data-wheel-size="9"] .wheel-gift,.prize-wheel[data-wheel-size="10"] .wheel-gift,.prize-wheel[data-wheel-size="11"] .wheel-gift,.prize-wheel[data-wheel-size="12"] .wheel-gift{width:28px;height:28px}.prize-wheel[data-wheel-size="9"] .wheel-segment b,.prize-wheel[data-wheel-size="10"] .wheel-segment b,.prize-wheel[data-wheel-size="11"] .wheel-segment b,.prize-wheel[data-wheel-size="12"] .wheel-segment b{width:15px;height:15px;font-size:8px}
.wheel-result{position:relative;z-index:8}.wheel-confetti{z-index:9}
@media(max-width:360px){.wheel-stage{width:min(92vw,340px)}.wheel-segment{font-size:.6rem;grid-template-rows:30px 16px auto;min-height:68px}.wheel-gift{width:30px;height:30px}.prize-wheel[data-wheel-size="6"] .wheel-segment,.prize-wheel[data-wheel-size="7"] .wheel-segment,.prize-wheel[data-wheel-size="8"] .wheel-segment{width:28%;grid-template-rows:30px 15px auto;min-height:58px}.prize-wheel[data-wheel-size="6"] .wheel-gift,.prize-wheel[data-wheel-size="7"] .wheel-gift,.prize-wheel[data-wheel-size="8"] .wheel-gift{width:30px;height:30px}.prize-wheel[data-wheel-size="9"] .wheel-segment,.prize-wheel[data-wheel-size="10"] .wheel-segment,.prize-wheel[data-wheel-size="11"] .wheel-segment,.prize-wheel[data-wheel-size="12"] .wheel-segment{width:22%;grid-template-rows:23px 13px auto;min-height:47px;font-size:.48rem}.prize-wheel[data-wheel-size="9"] .wheel-gift,.prize-wheel[data-wheel-size="10"] .wheel-gift,.prize-wheel[data-wheel-size="11"] .wheel-gift,.prize-wheel[data-wheel-size="12"] .wheel-gift{width:23px;height:23px}.wheel-pointer{top:-3.6%}.wheel-center{width:36%}}
