/* An anchored, non-modal palette. Gameplay stays reachable around the wheel. */
.persona-wheel { position:fixed; z-index:100; box-sizing:border-box; width:292px; height:292px; border-radius:50%; border:1px solid #afcbb86b; background:radial-gradient(circle,#163b3e 0 33%,#0a232af5 34% 66%,#244347f7 67%); color:#e4eedc; box-shadow:0 18px 55px #001116a3,0 0 0 5px #153d3b66,inset 0 0 35px #9fc2a315; transform-origin:var(--wheel-origin-x) var(--wheel-origin-y); animation:persona-wheel-enter 180ms cubic-bezier(.2,.7,.3,1); font-family:system-ui,sans-serif; }
.persona-wheel[data-mode='note'] { border-color:#cbb8df80; background:radial-gradient(circle,#303345 0 33%,#182330f5 34% 66%,#3a3f51f7 67%); }
.persona-wheel-center { position:absolute; left:50%; top:50%; width:91px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; pointer-events:none; }
.persona-wheel-kicker { color:#bfcbaa; font-size:8px; font-weight:800; letter-spacing:1.2px; }
.persona-wheel-center>strong { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13px/1.1 Georgia,serif; color:#f0e6c7; }
.persona-wheel-center>small { color:#b9cbbe; font-size:9px; line-height:1.3; max-width:82px; }
.persona-wheel-close { width:30px; min-height:30px; border:1px solid #a8c4ad55; border-radius:50%; background:#92bca215; color:#d0e5cd; font:20px/1 system-ui,sans-serif; padding:0; pointer-events:auto; cursor:pointer; }
.persona-wheel-choice { position:absolute; left:50%; top:50%; width:68px; height:69px; margin:-34.5px 0 0 -34px; transform:rotate(var(--wheel-angle)) translateX(101px) rotate(var(--wheel-counter)); padding:3px; border:1px solid #8cac9455; border-radius:15px; background:linear-gradient(#33544df2,#182e33f7); box-shadow:0 3px 7px #00191d88; color:#e6e7cd; cursor:pointer; -webkit-tap-highlight-color:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.persona-wheel-choice:hover,.persona-wheel-choice:focus-visible { border-color:#e0d19c; background:#486352; outline:2px solid #c6d8ac99; outline-offset:2px; }
.persona-wheel-choice[aria-pressed='true'] { border-color:#e5ce8b; box-shadow:0 0 0 2px #d6bd7740,0 3px 8px #021d20; }
.persona-wheel-choice[aria-pressed='true']:after { content:'✓'; position:absolute; top:2px; right:4px; font-size:11px; color:#f2dca0; }
.persona-wheel-portrait { display:block; width:38px; height:43px; overflow:hidden; pointer-events:none; }
.persona-wheel-portrait svg { display:block; width:38px; height:auto; }
.persona-wheel-portrait .performer-art--illustrated { width:100%; height:100%; }
.persona-wheel-choice>strong { font:600 10px/1.2 system-ui,sans-serif; pointer-events:none; }
.persona-wheel-power { position:absolute; top:calc(100% + 9px); left:50%; width:max-content; max-width:calc(100vw - 28px); transform:translateX(-50%); margin:0; padding:7px 11px; border:1px solid #b3c8ad55; border-radius:7px; background:#102a2ff5; box-shadow:0 6px 15px #00191d55; font:11px/1.3 system-ui,sans-serif; color:#e1e8d2; text-align:center; pointer-events:none; }
.persona-wheel[aria-busy='true'] .persona-wheel-choice { opacity:.6; cursor:progress; }
.persona-private-note { position:absolute; right:-2px; top:3px; z-index:3; border:1px solid #cfbbdf; border-radius:5px; background:#473f58; padding:2px 3px; color:#f1e0f7; font:700 9px/1 system-ui,sans-serif; box-shadow:0 2px 5px #0a102888; pointer-events:none; }
[data-persona-wheel='costume'] { cursor:pointer; }
:root[data-theme='neon'] .persona-wheel { border-color:#b69cdb; }
:root[data-theme='woodland'] .persona-wheel { border-color:#c5be88; }
@media(max-width:360px){.persona-wheel-choice { width:62px; margin-left:-31px; transform:rotate(var(--wheel-angle)) translateX(97px) rotate(var(--wheel-counter)); }}
@media(pointer:coarse){.persona-wheel-close { min-width:36px; min-height:36px; }}
@keyframes persona-wheel-enter { from { opacity:0; scale:.87; } to { opacity:1; scale:1; } }
@media(prefers-reduced-motion:reduce){.persona-wheel { animation:none; }}
:root[data-motion='reduced'] .persona-wheel { animation:none; }