/* Prompt Roulette: one accent, readable ingredients and motion on interaction. */
.prompt-roulette-container { position: relative; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--page); color: var(--ink); }
.roulette-widget-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.roulette-widget-heading h3 { font-size: 19px; line-height: 1.5; letter-spacing: -.035em; }
.roulette-preview-badge { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: var(--surface); font-size: 10px; }
.roulette-preview-badge .op-icon { width: 14px; height: 14px; }
.roulette-reels-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.roulette-reel-card { --roulette-item-height: 168px; position: relative; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .2s,background .2s; }
.roulette-reel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; color: var(--muted); font-size: 10px; font-weight: 550; letter-spacing: .06em; }
.roulette-reel-window { width: 100%; height: var(--roulette-item-height); overflow: hidden; }
.roulette-reel-track { display: flex; flex-direction: column; width: 100%; transform: translateY(0); }
.roulette-reel-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 0 0 var(--roulette-item-height); width: 100%; height: var(--roulette-item-height); padding: 8px; text-align: center; overflow: hidden; }
.roulette-reel-icon-wrap { display: grid; place-items: center; flex: 0 0 80px; width: 80px; height: 80px; padding: 4px; color: var(--accent); }
.roulette-reel-symbol { display: block; width: 72px; height: 72px; }
.roulette-reel-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-width: 100%; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.roulette-reel-card.idle .roulette-reel-label { color: var(--muted); font-weight: 400; }
.btn-reel-respin { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--page); }
.btn-reel-respin .op-icon { width: 18px; height: 18px; }
.btn-reel-respin:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--tint); }
.roulette-reel-card.is-spinning .roulette-reel-track { will-change: transform; }
.roulette-reel-card.just-stopped .roulette-reel-icon-wrap { animation: roulette-settle .35s ease-out; }
.roulette-helper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 76px; padding-block: 16px; }
.roulette-helper p, .roulette-guest-access p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.roulette-edit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; margin-left: -14px; border: 0; background: transparent; color: var(--accent); font-size: 12px; }
.roulette-edit .op-icon { width: 16px; height: 16px; }
.roulette-actions-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.btn-roulette-spin, .btn-roulette-generate { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 550; }
.btn-roulette-spin:hover:not(:disabled), .btn-roulette-generate:hover:not(:disabled) { border-color: var(--accent); }
.btn-roulette-spin:not(:disabled), .btn-roulette-generate.is-active { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.has-selection .btn-roulette-spin { color: var(--ink); background: var(--surface); border-color: var(--line); }
.btn-roulette-spin .op-icon, .btn-roulette-generate .op-icon { width: 18px; height: 18px; }
.btn-roulette-spin.spinning .spin-icon-svg { animation: roulette-dice-turn .6s ease-in-out infinite; }
.roulette-guest-access { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.roulette-unlock { justify-content: center; border-radius: 12px; font-size: 12px; white-space: normal; }
.roulette-unlock > .op-icon:last-child { margin-left: auto; }
.roulette-unlock > .op-icon:first-child { width: 16px; height: 16px; }
.op-roulette-art { position: relative; display: block; flex: 0 0 auto; width: 108px; height: 84px; padding: 12px; }
.op-roulette-art::before { content: ''; position: absolute; inset: 6px 4px; border: 1px dashed var(--line); border-radius: 50%; transform: rotate(-16deg); }
.op-roulette-art-card { position: absolute; display: grid; place-items: center; width: 46px; height: 58px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--accent); box-shadow: 0 6px 14px #0000000a; transform-origin: 50% 100%; }
.op-roulette-art-card:nth-child(1) { left: 10px; top: 12px; transform: rotate(-19deg); }
.op-roulette-art-card:nth-child(2) { left: 32px; top: 4px; transform: rotate(-2deg); background: var(--tint); border-color: var(--accent); }
.op-roulette-art-card:nth-child(3) { left: 54px; top: 16px; transform: rotate(17deg); }
.op-roulette-art-card .op-icon { width: 22px; height: 22px; }
.op-roulette:hover .op-roulette-art-card:nth-child(2), .op-roulette:focus-within .op-roulette-art-card:nth-child(2) { animation: roulette-card-float 2.4s ease-in-out 1; }
.op-roulette-art--mini { width: 44px; height: 44px; padding: 4px; }
.op-roulette-art--mini::before { inset: 1px -4px; }
.op-roulette-art--mini .op-roulette-art-card { width: 24px; height: 30px; padding: 5px; border-radius: 7px; }
.op-roulette-art--mini .op-roulette-art-card:nth-child(1) { left: 0; top: 8px; }
.op-roulette-art--mini .op-roulette-art-card:nth-child(2) { left: 10px; top: 2px; }
.op-roulette-art--mini .op-roulette-art-card:nth-child(3) { left: 20px; top: 10px; }
.op-roulette-art--mini .op-roulette-art-card .op-icon { width: 14px; height: 14px; }
.op-sidebar-widget:is(:hover,:focus-visible) .op-roulette-art--mini .op-roulette-art-card:nth-child(2) { animation: roulette-card-float 2.4s ease-in-out 1; }
.op-roulette-auth-modal .modal-dialog { max-width: 480px; margin-inline: auto; padding-inline: 16px; }
.op-roulette-auth-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.op-roulette-auth-heading .op-icon-button { flex-shrink: 0; }
.op-roulette-auth-copy { display: flex; flex-direction: column; gap: 12px; }
.op-roulette-auth-copy h2 { font-size: 26px; line-height: 1.3; }
.op-roulette-auth-copy > p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-roulette-benefits { display: grid; gap: 12px; padding: 24px 0; margin: 0; list-style: none; }
.op-roulette-benefits li { display: flex; align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--raised); font-size: 12px; line-height: 1.7; }
.op-roulette-benefits .op-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.op-roulette-providers { display: grid; gap: 12px; }
.op-roulette-providers .op-button { min-width: 0; font-size: 12px; white-space: normal; text-align: left; }
.op-roulette-providers .op-button > .op-icon:last-child { margin-left: auto; width: 18px; height: 18px; }
.op-roulette-auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 16px; }
.op-roulette-auth-links a, .op-roulette-auth-links button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 0; color: var(--muted); background: transparent; font-size: 11px; text-align: left; }
.op-roulette-auth-links .op-icon { width: 14px; height: 14px; }
@keyframes roulette-settle { from { transform: scale(.88); } to { transform: scale(1); } }
@keyframes roulette-dice-turn { to { transform: rotate(180deg); } }
@keyframes roulette-card-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* Livelier machine: every reel has its own tone, spins like a real reel and lights up when it stops. */
.prompt-roulette-container { --reel-tone-1: var(--accent); --reel-tone-2: #f2a27e; --reel-tone-3: #e6c56f; background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--page); }
:root[data-theme="light"] .prompt-roulette-container { --reel-tone-2: #b4573a; --reel-tone-3: #94701c; }
#roulette-reel-motiv { --reel-tone: var(--reel-tone-1); --reel-float-delay: 0s; }
#roulette-reel-action { --reel-tone: var(--reel-tone-2); --reel-float-delay: .6s; }
#roulette-reel-look { --reel-tone: var(--reel-tone-3); --reel-float-delay: 1.2s; }
.roulette-reel-card { overflow: hidden; border-color: color-mix(in srgb, var(--reel-tone) 30%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--reel-tone) 14%, var(--surface)), var(--surface) 60%); transition: border-color .2s, box-shadow .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.roulette-reel-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--reel-tone) 7%, transparent) 0 2px, transparent 2px 12px); opacity: .7; }
.roulette-reel-heading > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.roulette-reel-heading > span:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--reel-tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--reel-tone) 18%, transparent); }
.roulette-reel-icon-wrap { border-radius: 50%; color: var(--reel-tone); background: radial-gradient(circle, color-mix(in srgb, var(--reel-tone) 22%, transparent), transparent 70%); }
.roulette-reel-card.idle .roulette-reel-icon-wrap { animation: roulette-idle-float 4s ease-in-out var(--reel-float-delay) infinite; }
.roulette-reel-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--reel-tone) 60%, var(--line)); }
.roulette-reel-card.is-spinning { border-color: var(--reel-tone); background: linear-gradient(165deg, color-mix(in srgb, var(--reel-tone) 24%, var(--surface)), var(--surface) 70%); box-shadow: 0 0 0 1px var(--reel-tone), 0 0 30px -8px var(--reel-tone); }
.roulette-reel-card.is-spinning .roulette-reel-window { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.roulette-reel-card.is-spinning .roulette-reel-track { filter: blur(1.2px); }
.roulette-reel-card.just-stopped { animation: roulette-hit .7s cubic-bezier(.16,1,.3,1); }
.roulette-reel-card.just-stopped .roulette-reel-label { animation: roulette-label-pop .5s cubic-bezier(.16,1,.3,1); }
.btn-roulette-spin:not(:disabled):not(.spinning) .spin-icon-svg { animation: roulette-dice-wiggle 5s ease-in-out 2s infinite; }
/* Guests: the preview rolls a sample ingredient now and then so the machine never stands still. */
.is-locked .roulette-reel-label.is-rolling { animation: roulette-roll .55s cubic-bezier(.16,1,.3,1); }
.is-locked .roulette-reel-card.is-teasing { border-color: color-mix(in srgb, var(--reel-tone) 70%, var(--line)); box-shadow: 0 0 26px -10px var(--reel-tone); }
@keyframes roulette-idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes roulette-hit { 0% { box-shadow: 0 0 0 2px var(--reel-tone), 0 0 40px -4px var(--reel-tone); transform: scale(1.03); } 100% { box-shadow: 0 0 0 0 transparent; transform: none; } }
@keyframes roulette-label-pop { from { transform: translateY(10px) scale(.94); opacity: .2; } }
@keyframes roulette-roll { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-14px); opacity: 0; } 41% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes roulette-dice-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-16deg); } 94% { transform: rotate(14deg); } 97% { transform: rotate(-6deg); } }
@media (max-width: 760px) {
 .prompt-roulette-container { padding: 20px; border-radius: 18px; }
 .roulette-widget-heading { align-items: start; gap: 12px; margin-bottom: 20px; }
 .roulette-widget-heading h3 { font-size: 18px; }
 .roulette-reels-grid { grid-template-columns: 1fr; gap: 12px; }
 .roulette-reel-card { --roulette-item-height: 80px; padding: 16px; }
 .roulette-reel-heading { min-height: 0; padding-left: 68px; font-size: 10px; margin-bottom: 4px; }
 .prompt-roulette-container:not(.is-locked) .roulette-reel-heading { min-height: 28px; }
 .btn-reel-respin { position: absolute; right: 8px; top: 8px; }
 .roulette-reel-item { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; padding: 0; text-align: left; }
 .roulette-reel-icon-wrap { width: 56px; height: 56px; padding: 2px; }
 .roulette-reel-symbol { width: 52px; height: 52px; }
 .roulette-reel-label { font-size: 12px; }
 .is-locked .roulette-reel-card { padding-right: 16px; }
 .roulette-guest-access { margin-top: 20px; }
 .op-roulette-auth-copy h2 { font-size: 23px; }
}
@media (max-width: 420px) {
 .prompt-roulette-container { padding: 16px; }
 .roulette-widget-heading { flex-wrap: wrap; }
 .roulette-actions-bar { grid-template-columns: 1fr; }
 .roulette-reel-card { padding-left: 12px; }
 .roulette-reel-heading { padding-left: 60px; }
 .roulette-reel-item { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
 .roulette-reel-icon-wrap { width: 48px; height: 48px; padding: 2px; }
 .roulette-reel-symbol { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .op-roulette-art *, .roulette-reel-card *, .btn-roulette-spin .op-icon { animation: none !important; transition: none !important; } }