[hidden] { display: none !important; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #1769e0; outline-offset: 3px; }
.workspace-tabs { display:flex; gap:16px; border-bottom:1px solid var(--line); margin:24px 0; }
.workspace-tabs button { background:transparent; border-radius:0; border-bottom:3px solid transparent; color:var(--muted); }
.workspace-tabs button.active { border-color:var(--primary); color:var(--primary); }
.wheel-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
.wheel-stage { background:#eef3f6; background-position:center; background-size:cover; background-repeat:no-repeat; padding:20px; min-width:0; text-align:center; }
.stage-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; text-align:left; }
.stage-heading h2 { font-size:22px; margin:0; overflow-wrap:anywhere; background:#fffffff0; padding:6px 10px; max-width:75%; }
.stage-heading button { flex-shrink:0; }
.wheel-frame { position:relative; width:min(100%,650px); aspect-ratio:1; margin:16px auto 0; }
#wheelCanvas { position:absolute; inset:0; }
.wheel-pointer { position:absolute; top:calc(1% - 46px); left:50%; transform:translateX(-50%); width:88px; height:88px; filter:drop-shadow(0 1px 2px #fff) drop-shadow(0 0 2px #fff); z-index:2; pointer-events:none; }
.wheel-pointer img { display:block; width:100%; height:100%; object-fit:contain; }
.slot-mode .wheel-frame { aspect-ratio:auto; min-height:430px; padding-top:140px; }
.slot-mode #wheelCanvas,.slot-mode .wheel-pointer { display:none; }
.slot-mode .wheel-hub { top:60px; max-width:110px; }
#slotMachine { --slot-accent:#d34c63; --slot-trim:#e6aa35; --slot-ink:#fff; width:100%; padding:16px; background:var(--slot-accent); border:5px solid var(--slot-trim); border-radius:8px; box-shadow:0 12px 24px #15262b25; }
.slot-window { position:relative; height:264px; overflow:hidden; background:#fff; border-radius:4px; }
#slotReel { position:absolute; inset:0 0 auto; will-change:transform; }
.slot-row { height:88px; display:flex; align-items:center; justify-content:center; padding:0 24px; color:#35424b; font-weight:700; }
.slot-row span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot-row.chosen { background:var(--slot-accent); color:var(--slot-ink); }
.slot-selection { position:absolute; inset:88px 0 auto; height:88px; border:3px solid var(--slot-trim); pointer-events:none; }
.slot-window:before,.slot-window:after { content:''; position:absolute; left:0; right:0; height:88px; background:#ffffff88; z-index:1; pointer-events:none; }
.slot-window:before { top:0; }.slot-window:after { bottom:0; }
.pointer-shape { position:absolute; width:30px; height:34px; left:29px; top:46px; background:#202933; }
.wheel-pointer[data-style="triangle"] .pointer-shape { clip-path:polygon(0 0,100% 0,50% 100%); }
.wheel-pointer[data-style="arrow"] .pointer-shape { clip-path:polygon(32% 0,68% 0,68% 52%,100% 52%,50% 100%,0 52%,32% 52%); }
.wheel-pointer[data-style="diamond"] .pointer-shape { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.wheel-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20%; aspect-ratio:1; background:#fff; border:5px solid #fff; border-radius:50%; box-shadow:0 2px 16px #0002; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.wheel-hub img { width:100%; height:100%; object-fit:contain; }
#hubText { font-size:16px; font-weight:800; line-height:1.3; color:#24323a; }
#spinStatus { display:table; margin:8px auto 12px; padding:5px 12px; background:#fffffff0; border-radius:4px; font-weight:600; min-height:31px; max-width:100%; overflow-wrap:anywhere; }
.spin-button { min-width:190px; padding:14px 26px; font-size:18px; background:#137a58; }
.spin-button:hover { background:#0d6044; }
.wheel-settings { min-width:0; }
.wheel-settings fieldset { border:0; padding:0; margin:0; min-width:0; }
.wheel-settings textarea { min-height:180px; height:180px; font-family:inherit; }
.section-label { display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px; }
.section-label output { font-size:13px; flex-shrink:0; }
.wheel-settings details { border-top:1px solid var(--line); margin-top:20px; padding-top:14px; }
.wheel-settings summary { font-weight:700; cursor:pointer; margin-bottom:14px; }
.wheel-settings select { width:100%; padding:10px; border:1px solid var(--line); border-radius:4px; background:#fff; font:inherit; }
.swatches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.color-slot { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.color-slot label { display:flex; align-items:center; gap:3px; margin:0; font-size:12px; white-space:nowrap; }
.color-slot input[type=color] { width:30px; flex-shrink:0; }
.color-slot-off input[type=color] { opacity:.3; cursor:default; }
.color-slot-off label { color:var(--muted); }
input[type=color] { width:34px; height:34px; border:1px solid var(--line); padding:2px; background:white; cursor:pointer; }
.setting-pair { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; }
.setting-pair label { margin:0; }
.setting-pair input[type=range] { width:110px; }
.wheel-settings input[type=file] { width:100%; font-size:12px; margin-bottom:8px; }
.upload-hint { font-size:12px; line-height:1.6; color:var(--muted); margin:6px 0 10px; overflow-wrap:anywhere; }
.upload-hint:empty { display:none; }
#backgroundFit { margin-bottom:12px; }
.small { padding:6px 10px; margin:0 0 16px; }
.font-size-controls { display:grid; grid-template-columns:minmax(0,1fr) 64px 22px; align-items:center; gap:8px; margin:0 0 10px; }
.font-size-controls input[type=range] { width:100%; min-width:0; }
.font-size-controls input[type=number] { width:64px; padding:8px 4px; border:1px solid var(--line); border-radius:4px; font:inherit; }
#wheelMessage { color:var(--danger); font-size:13px; overflow-wrap:anywhere; }
#winnerHistory { max-height:250px; overflow:auto; padding-left:28px; }
#winnerHistory li { padding:7px 0; overflow-wrap:anywhere; }
#winnerHistory time { display:block; font-size:12px; color:var(--muted); }
#winnerDialog { width:min(480px,calc(100% - 32px)); border:0; border-radius:8px; padding:32px; text-align:center; color:var(--ink); }
#winnerDialog::backdrop { background:#101820b8; }
#winnerDialog h2 { font-size:30px; overflow-wrap:anywhere; margin:16px 0; }
#winnerDialog .actions { justify-content:center; }
#winnerDialog > :not(canvas) { position:relative; z-index:1; }
#celebrationCanvas { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:0; }
.winner-eyebrow { color:#137a58; font-weight:700; }
.wheel-stage:fullscreen { overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; background-color:#eef3f6; }
.wheel-stage:fullscreen .stage-heading { width:100%; }
.wheel-stage:fullscreen .wheel-frame { width:min(74vh,85vw); flex-shrink:0; }
body.presenting { overflow:hidden; }
body.presenting .wheel-stage { position:fixed; inset:0; z-index:10; overflow:auto; }
body.presenting .wheel-frame { width:min(68vh,90vw); }
@media(max-width:860px) { .wheel-layout { grid-template-columns:1fr; } .wheel-settings { border-top:1px solid var(--line); padding-top:20px; } .stage-heading h2 { font-size:18px; max-width:65%; } .wheel-stage { padding:12px; } #hubText { font-size:12px; } .workspace-tabs { gap:4px; } }