@font-face{font-family:Geist;src:url('/randomizer/assets/geist.woff2') format('woff2');font-display:swap}
:root{--action-primary:#b82410;--action-primary-hover:#861b0d;--action-paper:#fff3d6;--action-ink:#171713;--link-text:#7d2619;--wheel-duration:90s}
*{box-sizing:border-box}
body{margin:0;padding-bottom:8px;font-family:Geist,Arial,sans-serif;background:transparent;color:var(--action-ink)}
a,button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.widget{width:100%;max-width:720px;margin:auto;border:2px solid var(--action-ink);border-radius:18px;background:#fffdf8;box-shadow:0 5px 0 #ed1427;overflow:hidden}
.preview{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,340px);align-items:center;gap:16px;padding:20px;color:inherit;text-decoration:none}
.preview-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0}
.brand{display:block;width:200px;max-width:100%;height:auto;object-fit:contain}
h1{margin:0;font-size:clamp(24px,4vw,32px);line-height:1.1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;color:var(--link-text)}
.preview-intro p{margin:12px 0 0;font-size:16px;line-height:1.4}
.choice{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.wheel{position:relative;width:100%;max-width:320px;aspect-ratio:1;border:5px solid var(--action-ink);border-radius:50%;background:var(--action-paper);box-shadow:0 4px 0 #ed1427}
.ring{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -15deg,#ed1427 0deg 30deg,#fff3d6 30deg 60deg);box-shadow:inset 0 0 0 4px #fff;animation:wheel-drift var(--wheel-duration) linear infinite}
.category{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.category b{display:block;padding:3px 5px;border-radius:5px;background:#fffdf8;color:#171713;font-size:clamp(11px,2.4vw,13px);font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 1px 2px #17171333;animation:wheel-drift var(--wheel-duration) linear infinite reverse}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:34%;object-fit:contain;border:5px solid white;border-radius:50%;background:white;box-shadow:0 0 0 2px var(--action-ink)}
.pointer{position:absolute;top:-9px;left:calc(50% - 10px);width:20px;height:27px;background:var(--action-ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.tap{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:2px solid var(--action-ink);border-radius:5px;background:var(--action-primary);color:var(--action-paper);box-shadow:3px 3px 0 var(--action-ink);font-size:14px;line-height:1.3;font-weight:800;text-align:center}
.preview:is(:hover,:focus-visible) .tap{background:var(--action-primary-hover);text-decoration:underline;text-underline-offset:4px}
.preview:is(:hover,:focus-visible) h1{text-decoration-thickness:3px}
.preview:is(:hover,:focus-within) :is(.ring,.category b),.wheel-paused :is(.ring,.category b){animation-play-state:paused}
@keyframes wheel-drift{to{transform:rotate(360deg)}}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px 8px}
footer button{min-height:44px;padding:8px 4px;border:0;background:transparent;color:var(--link-text);font:750 13px/1.3 Geist,Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.home-brand{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.home-brand img{display:block;width:44px;height:44px;object-fit:contain}
:is(a,button):focus-visible{outline:3px solid var(--action-ink);outline-offset:-4px;box-shadow:inset 0 0 0 7px #fff8df}
@media(max-width:520px){.preview{grid-template-columns:1fr;padding:16px;gap:20px}.preview-intro{flex-direction:row;justify-content:center;gap:12px;text-align:left}.brand{width:128px;max-width:44%}.preview-intro p{margin-top:10px;font-size:14px}.wheel{max-width:300px}.category b{font-size:12px;padding:3px 4px}footer{padding:0 16px 8px}}
@media(max-width:320px){.preview{padding:12px}.brand{width:112px}.category b{font-size:11px;padding:2px 3px}}
@media(prefers-reduced-motion:reduce){.ring,.category b{animation:none}#pause-wheel{display:none}}
.inventory-ad{margin:36px auto;width:calc(100% - 48px);max-width:900px;border:3px solid #171713;box-shadow:6px 6px 0 #171713;background:#fff4d6;color:#171713}
.inventory-ad[data-ad-shape="rectangle"]{max-width:560px}.inventory-ad[data-ad-shape="square"]{max-width:420px}
.inventory-ad a{display:block;color:inherit;text-decoration:none}.inventory-ad small{display:block;padding:12px 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.inventory-ad img{display:block;width:100%;height:auto;object-fit:contain}.inventory-ad a:focus-visible{outline:3px solid #ed1427;outline-offset:-3px}
