/* One large canvas, rotated as a composited layer. Never rebuild during a spin. */
#wheel-page { --wheel-pink:#fb70b7; --wheel-gold:#eacb84; }
.wheel-page { position:relative; z-index:3; width:min(1640px, calc(100% - 40px)); margin:24px auto 50px; color:#f3ede7; }
.wheel-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; }
.wheel-heading .eyebrow { color:#e9a7c5; font-size:.7rem; letter-spacing:.19em; margin:0 0 10px; }
.wheel-heading h1 { margin:0; }
.wheel-heading h1 img { display:block; width:min(430px,65vw); height:auto; }
.wheel-heading p:last-child { color:#bcaeb9; margin:8px 0 0; font-size:.92rem; }
.wheel-heading-badge { border:1px solid #6a4b5a; border-radius:100px; padding:10px 15px; color:#edc6d7; letter-spacing:.1em; font-size:.62rem; font-weight:800; white-space:nowrap; }
.wheel-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.wheel-stage { padding:22px 32px; border:1px solid #57434c; border-radius:22px; background:radial-gradient(ellipse at 50% 30%,#662c4930,transparent 68%),linear-gradient(135deg,#141014e8,#080e10eb); box-shadow:0 20px 70px #0007; min-width:0; }
.wheel-stage-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wheel-stage-title > span:first-child { color:#f7dbe8; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.5rem; font-weight:700; }
.wheel-stage-title > span:last-child { color:#aca0a9; font-size:.73rem; }
.wheel-disc-shell { position:relative; width:min(100%,760px,max(480px,calc(100svh - 500px))); aspect-ratio:1; margin:26px auto 20px; border-radius:50%; border:9px solid #34222b; background:#17101b; box-shadow:0 0 0 2px #b28551,0 0 0 6px #241518,0 0 0 7px #66513e,0 12px 55px #000b,0 0 70px #df609b1d; }
.wheel-disc-shell::after { content:''; position:absolute; inset:0; border:2px solid #e4c48395; border-radius:50%; pointer-events:none; box-shadow:inset 0 0 30px #0008; }
#wheel-canvas { display:block; width:100%; height:100%; border-radius:50%; transition:transform 5s cubic-bezier(.13,.68,.08,1); }
#wheel-canvas.is-spinning { will-change:transform; }
.wheel-pointer { position:absolute; left:50%; top:-26px; width:32px; height:40px; transform:translateX(-50%); background:linear-gradient(120deg,#fff4c5,#d59f46); clip-path:polygon(50% 100%,0 0,100% 0); filter:drop-shadow(0 3px 3px #000); z-index:5; }
#wheel-spin { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:24%; aspect-ratio:1; padding:6px; border-radius:50%; border:3px solid #eab1c8; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; background:radial-gradient(circle at 30% 20%,#b33474,#5d183f 58%,#290e2f); box-shadow:0 0 0 7px #291020,0 0 0 8px #af7b4c,0 10px 25px #000b,inset 0 2px 8px #f5afd95c; color:#fff1d8; cursor:pointer; transition:filter 160ms; }
#wheel-spin span { font-family:'Marcellus SC',Georgia,serif; font-size:clamp(1.2rem,3.5vw,2.7rem); font-weight:700; letter-spacing:.06em; text-shadow:0 2px 4px #000; }
#wheel-spin small { font-size:clamp(.35rem,.65vw,.55rem); font-weight:800; letter-spacing:.07em; color:#f5abc9; }
#wheel-spin:hover:not(:disabled) { filter:brightness(1.25); }
#wheel-spin:disabled { cursor:default; filter:saturate(.6); }
#wheel-page :is(button,a,input,select,summary,textarea):focus-visible { outline:2px solid #ff9cca; outline-offset:4px; }
.wheel-result { text-align:center; min-height:114px; border:1px solid #754257; border-radius:14px; padding:16px; background:linear-gradient(110deg,#3114239c,#1b131cf2); }
.wheel-result .eyebrow { color:#d797b5; letter-spacing:.18em; font-size:.6rem; margin:0 0 6px; }
.wheel-result strong { display:block; color:#ffe5b0; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.7rem,2.8vw,2.6rem); line-height:1.08; overflow-wrap:anywhere; }
.wheel-result p:last-child { font-size:.75rem; margin:7px 0 0; color:#c5afbd; }
.wheel-result.has-winner { border-color:#e6ac70; animation:wheel-reveal 450ms ease-out; }
@keyframes wheel-reveal { from{box-shadow:0 0 28px #e378aa66; transform:translateY(3px)}to{box-shadow:none;transform:none} }
.wheel-stage-controls { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; color:#bcaeba; font-size:.7rem; flex-wrap:wrap; }
.wheel-stage-controls label,.wheel-toggle { display:flex; align-items:center; gap:8px; }
#wheel-page input[type=checkbox] { accent-color:#ed68ab; width:17px; height:17px; flex:0 0 auto; }
.wheel-history { border-top:1px solid #3e3038; margin-top:18px; padding-top:12px; color:#d2bcc8; font-size:.78rem; }
.wheel-history summary { cursor:pointer; }
.wheel-history summary span { padding:2px 7px; margin-left:7px; border-radius:20px; background:#402839; }
.wheel-history ol { padding-left:22px; display:grid; gap:7px; }
.wheel-picker { padding:22px; border:1px solid #4b3f48; border-radius:18px; background:linear-gradient(145deg,#19151beb,#09100ff2); min-width:0; }
.wheel-picker fieldset { border:0; margin:0; padding:0; min-width:0; }
.wheel-picker-heading .eyebrow { color:#cf87a6; font-size:.6rem; letter-spacing:.15em; margin:0 0 5px; }
.wheel-picker h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.8rem; margin:0 0 17px; }
.wheel-field { display:grid; gap:7px; color:#c4b8c0; font-size:.72rem; font-weight:700; }
#wheel-page :is(select,input:not([type=checkbox]),textarea) { width:100%; min-width:0; padding:10px 11px; border:1px solid #62505d; border-radius:8px; background:#080d11; color:#f7e5ed; font:inherit; font-size:.85rem; box-sizing:border-box; }
#wheel-page select option { background:#101219; color:#f7e5ed; }
.wheel-note { color:#a79ba5; font-size:.72rem; line-height:1.6; margin:10px 0 16px; }
.wheel-key-range { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; margin-bottom:14px; font-size:.72rem; }
.wheel-key-range label { display:grid; gap:6px; }
#wheel-page [hidden] { display:none !important; }
.wheel-option-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; font-size:.73rem; color:#dbb7ca; }
.wheel-option-toolbar > div { display:flex; gap:5px; }
.wheel-page button:not(#wheel-spin) { padding:8px 11px; border:1px solid #6e4d63; border-radius:7px; color:#f4d8e6; background:#392335; cursor:pointer; font-size:.7rem; font-weight:700; }
.wheel-page button:not(#wheel-spin):hover:not(:disabled) { background:#61314d; border-color:#e08eb8; }
.wheel-page button:disabled { opacity:.5; cursor:default; }
.wheel-search { margin:13px 0 10px; }
.wheel-options { max-height:340px; overflow:auto; scrollbar-width:thin; scrollbar-color:#9c5579 #131019; display:grid; gap:5px; padding:2px 5px 2px 0; }
.wheel-option { display:flex; gap:9px; align-items:center; min-height:45px; padding:6px 8px; background:#ffffff04; border:1px solid #3b323c; border-radius:8px; cursor:pointer; font-size:.78rem; color:#efe0e8; }
.wheel-option:has(input:not(:checked)) { opacity:.52; }
.wheel-option:hover { background:#fba6d611; }
.wheel-option img { width:30px; height:30px; object-fit:cover; border-radius:5px; }
.wheel-option > label { display:flex; flex:1; min-width:0; gap:9px; align-items:center; cursor:pointer; }
.wheel-option label > span { min-width:0; flex:1; overflow-wrap:anywhere; }
.wheel-option .wheel-option-remove { padding:5px 7px !important; background:transparent !important; border-color:transparent !important; font-size:1rem !important; }
.wheel-empty { color:#bdacb8; padding:20px 5px; text-align:center; font-size:.8rem; line-height:1.6; }
#wheel-add-form { margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:8px; align-items:end; }
#wheel-add-form button { height:38px; font-size:1.2rem !important; }
.wheel-bulk { margin-top:10px; color:#b9a5b3; font-size:.7rem; }
.wheel-bulk summary { cursor:pointer; margin-bottom:10px; }
.wheel-bulk button { margin-top:6px; }
.wheel-save-box { border-top:1px solid #42323c; padding-top:17px; margin-top:18px; display:grid; gap:12px; }
.wheel-save-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.wheel-saved-actions { display:flex; gap:7px; }
.wheel-message { color:#efd08b; font-size:.76rem; line-height:1.5; margin:12px 0 0; min-height:1.5em; }
.wheel-about { border:1px solid #3f3540; border-radius:16px; background:#0c1012e8; padding:24px 30px; margin-top:24px; }
.wheel-about h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.7rem; color:#efd2e0; margin:0 0 10px; }
.wheel-about p { color:#ab9ea9; font-size:.84rem; line-height:1.7; }
.wheel-about > div { display:flex; gap:22px; font-size:.85rem; color:#f393c2; flex-wrap:wrap; }
@media (min-width:1800px) { .wheel-layout { grid-template-columns:minmax(0,1fr) 410px; } .wheel-options { max-height:425px; } }
@media (max-width:1000px) { .wheel-layout { grid-template-columns:minmax(0,1fr) 320px; gap:16px; } .wheel-stage { padding:20px; } .wheel-picker { padding:18px; } .wheel-heading-badge { display:none; } }
@media (max-width:760px) { .wheel-page { width:calc(100% - 24px); margin:18px auto 30px; } .wheel-heading { margin-bottom:16px; } .wheel-heading h1 img { width:min(500px,85vw); } .wheel-layout { grid-template-columns:minmax(0,1fr); } .wheel-stage { padding:16px; border-radius:16px; } .wheel-disc-shell { margin:24px auto 20px; border-width:6px; } .wheel-stage-title > span:first-child { font-size:1.2rem; } .wheel-stage-title > span:last-child { font-size:.64rem; } #wheel-spin span { font-size:clamp(1rem,5vw,2rem); } #wheel-spin small { font-size:.33rem; } .wheel-options { max-height:290px; } .wheel-picker { padding:20px; } #wheel-page :is(input:not([type=checkbox]),textarea,select) { font-size:16px; } .wheel-about { padding:22px; } }
@media (prefers-reduced-motion:reduce) { #wheel-canvas { transition:none; } .wheel-result.has-winner { animation:none; } }