.roulette-page .info-page{max-width:1200px;padding-top:28px}.roulette-page .info-heading{margin-bottom:28px}.roulette-page .info-heading h1{font-size:clamp(36px,5vw,60px)}.roulette-page .info-content{padding:0;background:none;border:0;box-shadow:none}.roulette-page .info-heading p{max-width:800px}.roulette-settings{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#fff;border:1px solid #e8ddf5;border-radius:28px;padding:28px;margin-bottom:24px}.roulette-settings fieldset{min-width:0;padding:0;border:0;margin:0}.roulette-settings legend{font-size:18px;font-weight:750;margin-bottom:14px}.roulette-voice-field{grid-column:1/-1}.roulette-levels,.roulette-directions,.roulette-voices{display:flex;gap:8px}.roulette-settings button{border:1.5px solid #e4d8f4;background:#fff;color:#36274c;border-radius:16px;min-height:54px;padding:12px;cursor:pointer;font:inherit;font-weight:650;transition:border-color .15s,background .15s}.roulette-settings button[aria-pressed=true]{background:#f2eaff;border-color:#a16bef;color:#6d32cf;box-shadow:0 3px 0 #ede0fd}.roulette-settings button:hover:not(:disabled){border-color:#a16bef}.roulette-levels button{flex:1;font-size:20px}.roulette-directions button{flex:1;font-size:15px;white-space:nowrap}.roulette-directions span{margin:0 5px;color:#a36dde}.roulette-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.roulette-voices button{display:flex;align-items:center;text-align:left;gap:12px;padding:12px}.roulette-voices img{width:52px;height:52px;object-fit:cover;border-radius:50%;flex-shrink:0}.roulette-voices .icon{margin-left:auto;width:17px;min-width:17px;opacity:0}.roulette-voices [aria-pressed=true] .icon{opacity:1}.roulette-machine{position:relative;overflow:hidden;padding:26px 0 14px;border:1px solid #dbc8f5;border-radius:32px;background:radial-gradient(ellipse at 50% 15%,#ece0ff,transparent 75%),#fff;box-shadow:0 16px 60px #8046c312}.roulette-machine-top{display:flex;justify-content:space-between;align-items:center;padding:0 30px;color:#87689d;font-size:14px;gap:12px}.roulette-label{font-weight:800;letter-spacing:2px;color:#8954c9}.roulette-pointer{position:absolute;z-index:3;left:calc(50% - 11px);top:69px;width:22px;height:22px;border-radius:5px;background:#ff9f48;transform:rotate(45deg);box-shadow:0 2px 8px #bf690f21}.roulette-stage{--roulette-stage-height:264px;--roulette-cell-height:204px;height:var(--roulette-stage-height);display:block;overflow:hidden;position:relative;margin:12px 0 0;mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}.roulette-reel{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;will-change:transform;transform:translateY(calc((var(--roulette-stage-height) - var(--roulette-cell-height))/2))}.roulette-cell{flex:0 0 var(--roulette-cell-height);width:var(--roulette-cell-width,calc(100% - 80px));height:var(--roulette-cell-height);padding:28px;border-radius:24px;border:2px solid #d8c0f1;background:#fff;box-shadow:0 8px 0 #bc9cde20;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:clamp(19px,2.8vw,32px);line-height:1.45;overflow-wrap:anywhere;color:#211335}.roulette-cell p{margin:0!important;color:inherit!important;font-size:inherit!important;line-height:inherit!important}.roulette-reel:has(.roulette-placeholder){justify-content:center}.roulette-placeholder{flex-direction:column;gap:14px;color:#8965ac;font-size:24px}.roulette-placeholder .icon{width:35px;height:35px;color:#af7be8}.roulette-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 32px 16px;font-size:14px;color:#876e9e}.roulette-listen{background:#f2eafa;border:1px solid #e3d3f5;border-radius:14px;min-height:46px;padding:10px 17px;color:#713ca5;font:inherit;font-weight:700;display:flex;gap:9px;align-items:center;cursor:pointer;white-space:nowrap}.roulette-listen .icon{width:18px;height:18px}.roulette-translation{margin:0 30px 20px;padding:22px 26px;background:#fff4e6;border:1px solid #ffdbb6;border-radius:22px}.roulette-translation[hidden]{display:none}.roulette-translation span{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#bd7843}.roulette-translation p{font-size:clamp(19px,2.2vw,27px)!important;line-height:1.5;margin:9px 0 0!important;color:#5a371b!important}.roulette-actions{display:flex;justify-content:center;gap:12px;padding:4px 30px 0}.roulette-actions button{min-height:64px;border-radius:19px;font-size:18px;font-weight:750;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}.roulette-actions .primary{flex:1;max-width:540px}.roulette-reveal{background:#fff;border:1.5px solid #dcc5f6;color:#8348bd;padding:16px 24px;min-width:230px;font:inherit}.roulette-hint{font-size:13px!important;text-align:center;margin:18px 24px 0!important;color:#9176aa!important}.roulette-audio-status{min-height:20px;text-align:center;font-size:13px!important;color:#ac5938!important;margin:6px 24px 0!important}.roulette-how{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:12px 14px;margin-top:12px}.roulette-how p{font-size:14px!important;color:#927caa!important;line-height:1.65}.roulette-how b{display:block;margin-bottom:4px;color:#5e4778;font-size:15px}.roulette-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.roulette-page button:disabled{opacity:.5;cursor:default}.roulette-page button:focus-visible,.hero-roulette:focus-visible{outline:3px solid #ffad50;outline-offset:4px}.roulette-page .roulette-settings[aria-busy=true]{opacity:.7}.hero-roulette{text-decoration:none!important;display:inline-flex;gap:10px;align-items:center;justify-content:center}.hero-actions{flex-wrap:wrap}.hero-roulette .icon{width:22px;height:22px}
@media(max-width:760px){.roulette-settings{grid-template-columns:1fr;padding:20px;gap:20px}.roulette-voices{grid-template-columns:repeat(2,minmax(0,1fr))}.roulette-voices button{font-size:14px;gap:8px;padding:10px}.roulette-voices img{width:40px;height:40px}.roulette-how{grid-template-columns:1fr;gap:0}.roulette-how p{margin:8px 0}.roulette-actions{padding:0 20px;gap:10px}.roulette-actions button{font-size:16px}.roulette-reveal{min-width:0}.roulette-result-meta{padding:0 20px 18px}.roulette-translation{margin:0 20px 20px}.roulette-machine-top{padding:0 20px}.roulette-cell{padding:21px}.roulette-page .info-page{padding-left:16px;padding-right:16px}.roulette-page .info-heading p{font-size:16px}}
@media(max-width:480px){.roulette-settings{border-radius:22px;padding:17px;gap:17px}.roulette-levels{gap:5px}.roulette-levels button{padding:8px 4px;min-height:48px;font-size:18px}.roulette-directions button{font-size:13px;padding:11px 5px}.roulette-directions span{margin:0 2px}.roulette-voices button{font-size:13px}.roulette-voices .icon{display:none}.roulette-voices img{width:36px;height:36px}.roulette-stage{--roulette-stage-height:244px;--roulette-cell-height:198px}.roulette-cell{padding:18px;font-size:19px}.roulette-actions{flex-direction:column;padding:0 18px}.roulette-actions button{min-height:58px;width:100%;max-width:none}.roulette-result-meta{font-size:12px;padding:0 18px 16px}.roulette-listen{padding:10px;gap:5px}.roulette-machine-top{font-size:11px}.roulette-placeholder{font-size:20px}.roulette-hint{font-size:12px!important}.roulette-page .info-heading h1{font-size:38px}.hero-roulette{width:100%}}
.roulette-sound{font:inherit;font-size:12px;color:#8559ab;background:#ffffffb0;border:1px solid #e4d5f2;border-radius:12px;min-height:36px;padding:6px 10px;cursor:pointer}.roulette-machine-top{flex-wrap:wrap}.roulette-sound[aria-pressed=false]{color:#9984ab;background:#f4eef8}@media(max-width:480px){.roulette-machine-top .roulette-label{display:none}.roulette-sound{font-size:11px;margin-left:auto}}
@media(prefers-reduced-motion:reduce){.roulette-settings button{transition:none}.roulette-reel{will-change:auto}}

.roulette-actions kbd{font:inherit;font-size:12px;white-space:nowrap;opacity:.75}
.roulette-actions kbd{display:inline-block}
.roulette-explainer{margin-top:36px;padding:8px 30px 24px;background:#fff;border:1px solid #e8ddf5;border-radius:28px}.roulette-explainer h2{font-size:clamp(23px,3vw,30px)}.roulette-explainer h3{font-size:20px}.roulette-explainer p{max-width:850px}@media(max-width:480px){.roulette-explainer{padding:4px 18px 20px;border-radius:22px}}