.roulette { box-sizing: border-box; max-width: 48rem; margin: 1.5rem auto; padding: 1.25rem; color: #173434; background: #fff; border: 1px solid #cbdedb; border-radius: 1rem; }
.roulette *, .roulette *::before, .roulette *::after { box-sizing: border-box; }
.roulette h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin: .4rem 0 1rem; }
.roulette__eyebrow { color: #24645b; font-weight: 700; margin: 0; }
.roulette__notice { padding: 1rem; background: #edf6f3; border-left: .25rem solid #287765; border-radius: .4rem; line-height: 1.7; overflow-wrap: anywhere; }
.roulette__notice p { margin: .5rem 0 0; }
.roulette__stage { width: min(100%, 18rem); aspect-ratio: 1; margin: 1.6rem auto; position: relative; overflow: hidden; }
.roulette__wheel { width: 100%; height: 100%; border: .35rem solid #173f39; border-radius: 50%; position: relative; overflow: hidden; background: conic-gradient(from -22.5deg, #cde9e2 0deg 45deg, #fff1c2 45deg 90deg, #bcdedb 90deg 135deg, #f5dcd0 135deg 180deg, #cde9e2 180deg 225deg, #fff1c2 225deg 270deg, #bcdedb 270deg 315deg, #f5dcd0 315deg 360deg); }
.roulette__pointer { position: absolute; top: 0; left: calc(50% - .6rem); border-left: .6rem solid transparent; border-right: .6rem solid transparent; border-top: 1.4rem solid #173f39; z-index: 1; }
.roulette__number { position: absolute; inset: 0; text-align: center; padding-top: .85rem; font-size: 1.3rem; font-weight: 700; }
.roulette__number span { display: inline-block; }
.roulette__number:nth-child(2) { transform: rotate(45deg); }
.roulette__number:nth-child(3) { transform: rotate(90deg); }
.roulette__number:nth-child(4) { transform: rotate(135deg); }
.roulette__number:nth-child(5) { transform: rotate(180deg); }
.roulette__number:nth-child(6) { transform: rotate(225deg); }
.roulette__number:nth-child(7) { transform: rotate(270deg); }
.roulette__number:nth-child(8) { transform: rotate(315deg); }
.roulette__number:nth-child(2) span { transform: rotate(-45deg); }
.roulette__number:nth-child(3) span { transform: rotate(-90deg); }
.roulette__number:nth-child(4) span { transform: rotate(-135deg); }
.roulette__number:nth-child(5) span { transform: rotate(-180deg); }
.roulette__number:nth-child(6) span { transform: rotate(-225deg); }
.roulette__number:nth-child(7) span { transform: rotate(-270deg); }
.roulette__number:nth-child(8) span { transform: rotate(-315deg); }
.roulette__hub { position: absolute; inset: 36%; border-radius: 50%; display: grid; place-items: center; background: #fff; border: .15rem solid #173f39; font-weight: 700; }
.roulette__spin { display: block; min-height: 3rem; width: min(100%, 20rem); padding: .75rem 1rem; margin: 0 auto; font: inherit; font-weight: 700; color: #fff; background: #195e50; border: 2px solid #195e50; border-radius: .6rem; cursor: pointer; }
.roulette__spin:disabled { color: #465d58; background: #e3eeeb; border-color: #9db8b0; cursor: default; }
.roulette__spin:focus-visible, .roulette a:focus-visible { outline: 3px solid #b74e16; outline-offset: 4px; }
.roulette__result { min-height: 3.5rem; display: grid; place-items: center; text-align: center; font-weight: 700; line-height: 1.6; }
.roulette__note { color: #465d58; font-size: .9rem; line-height: 1.6; }
@media (max-width: 480px) { .roulette { margin: 1rem .5rem; padding: 1rem; } }