.spot-roll { box-sizing: border-box; width: min(760px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 32px 0 18px; overflow: auto; border: 1px solid #36525d; border-radius: 26px; color: #edf8fb; background: radial-gradient(ellipse at 50% 0,#184a48 0,transparent 58%),#101e2a; box-shadow: 0 30px 100px #0009; }
body.random-roll-open { overflow: hidden; }
.spot-roll::backdrop { background: #07111ddb; backdrop-filter: blur(7px); }
.roll-heading,.roll-result { text-align: center; padding: 0 24px; }
.roll-heading h2 { font-size: clamp(1.65rem,5vw,2.5rem); color: #fff; margin: 12px 0 8px; letter-spacing: -.04em; }
.roll-heading p,.roll-result p { color: #b0c7ce; margin: 8px 0; }
.roll-eyebrow { color: #76dfc6; font-size: .66rem; letter-spacing: .16em; font-weight: 800; }
.roll-city { display: inline-block; margin: 12px 0 4px; border: 1px solid #537f7d; border-radius: 24px; padding: 6px 16px; color: #c7fff0; font-weight: 700; font-size: .85rem; }
.roll-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; color: #fff; border: 1px solid #506570; border-radius: 50%; background: #142631; cursor: pointer; font-size: 24px; }
.roll-window { position: relative; overflow: hidden; margin: 22px 0; padding: 14px 0; background: #08141c70; min-height: 214px; }
.roll-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#101e2a 0,transparent 16%,transparent 84%,#101e2a); }
.roll-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.roll-card { width: 190px; flex: 0 0 190px; min-width: 0; overflow: hidden; border: 1px solid #49606b; border-radius: 15px; background: #1c303d; opacity: .7; transition: opacity .25s,border-color .25s; }
.roll-card img { display: block; width: 100%; height: 126px; object-fit: cover; }
.roll-card strong { display: block; padding: 12px; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-card.is-winner { opacity: 1; border-color: #7fffd0; box-shadow: 0 0 24px #52e8ac45; }
.roll-marker { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; background: #ffcc7270; pointer-events: none; }
.roll-marker::before,.roll-marker::after { content: ''; position: absolute; left: -7px; width: 16px; height: 12px; background: #ffd78b; clip-path: polygon(0 0,100% 0,50% 100%); }
.roll-marker::before { top: 0; }.roll-marker::after { bottom: 0; transform: rotate(180deg); }
.roll-result h3 { margin: 9px 0; font-size: clamp(1.2rem,4vw,1.8rem); color: #fff; overflow-wrap: anywhere; }
.roll-result p { min-height: 1.4em; font-size: .85rem; }
.roll-actions { display: flex; justify-content: center; gap: 12px; padding: 16px 24px 8px; }
.roll-actions button,.roll-open { padding: 13px 22px; min-height: 46px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; text-align: center; }
.roll-again { border: 1px solid #526877; background: transparent; color: #e1edf1; }.roll-again:disabled { opacity: .4; cursor: wait; }
.roll-open { border: 1px solid #86f6ce; background: #86f6ce; color: #102c2b; }.roll-open[hidden] { display: none; }
.roll-note { padding: 0 20px; margin: 8px 0 0; color: #94acb6; text-align: center; font-size: .7rem; }
.spot-roll :focus-visible { outline: 3px solid #ffda8d; outline-offset: 3px; }
@media(max-width:480px) { .spot-roll { padding-top: 36px; border-radius: 20px; }.roll-heading p { font-size: .85rem; }.roll-card { width: 154px; flex-basis: 154px; }.roll-card img { height: 112px; }.roll-window { min-height: 194px; margin: 16px 0; }.roll-actions { flex-direction: column-reverse; padding: 10px 18px; gap: 8px; }.roll-actions button,.roll-open { width: 100%; box-sizing: border-box; } }