/* Wheel of Fortune dialog (opened from the profile window). */
.wf-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:rgba(7,14,28,.78); backdrop-filter:blur(3px); animation:wf-fade .25s ease-out; }
@keyframes wf-fade { from { opacity:0; } }
.wf-dialog { position:relative; width:min(520px,100%); max-height:94dvh; overflow:auto; padding:28px 28px 24px; background:#fff9ed; color:#142b43; border:1px solid #cfbc96; box-shadow:0 30px 60px rgba(0,0,0,.5); text-align:center; }
.wf-close { position:absolute; top:10px; right:12px; width:34px; height:34px; font-size:24px; line-height:1; background:none; border:0; color:#5f584a; cursor:pointer; }
.wf-eyebrow { color:#927037; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.wf-dialog h2 { margin:8px 0 6px; font:800 clamp(26px,5vw,34px) 'Fraunces',Georgia,serif; letter-spacing:-.02em; }
.wf-lead { margin:0 auto 14px; font-size:13px; line-height:1.6; color:#6a6258; max-width:420px; }
.wf-wheel-wrap { position:relative; width:min(320px,82vw); margin:8px auto 14px; }
.wf-pointer { position:absolute; top:-10px; left:50%; width:0; height:0; translate:-50% 0; z-index:2; border-left:12px solid transparent; border-right:12px solid transparent; border-top:26px solid #142b43; filter:drop-shadow(0 2px 2px #0005); }
.wf-wheel { display:block; width:100%; height:auto; border-radius:50%; box-shadow:0 0 0 6px #c58a2a,0 0 0 9px #142b43,0 14px 28px #0004; will-change:transform; }
.wf-action { min-height:52px; display:grid; place-items:center; }
.wf-spin { padding:13px 30px; font:800 15px system-ui,sans-serif; letter-spacing:.04em; color:#ffe1a0; background:#163958; border:0; cursor:pointer; box-shadow:0 4px 0 #0b2237; transition:translate .15s; }
.wf-spin:hover:not(:disabled) { translate:0 -2px; }
.wf-spin:disabled { opacity:.6; cursor:default; }
.wf-wait { margin:0; font-size:14px; color:#6a6258; }
.wf-wait b { font-variant-numeric:tabular-nums; color:#142b43; font-size:18px; }
.wf-message { margin:6px 0 0; min-height:1.2em; color:#a8452f; font-size:13px; }
.wf-error { color:#a8452f; padding:24px 0; }
.wf-result { margin:12px 0 4px; padding:16px; background:#fff; border:2px solid #c58a2a; animation:wf-pop .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes wf-pop { from { opacity:0; scale:.85; } }
.wf-result span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#927037; }
.wf-result h3 { margin:4px 0 8px; font:800 22px 'Fraunces',Georgia,serif; }
.wf-result p { margin:0; font-size:14px; line-height:1.6; }
.wf-cards { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.wf-cards li { padding:5px 10px; background:#f6efdc; border-left:4px solid #b9a77c; font-size:13px; text-align:left; }
.wf-cards em { font-style:normal; font-size:10px; font-weight:800; color:#2f7d57; text-transform:uppercase; margin-left:6px; }
.wf-r-uncommon { border-left-color:#4f9a4f !important; } .wf-r-rare { border-left-color:#2a6fb0 !important; } .wf-r-epic { border-left-color:#8a4fb8 !important; } .wf-r-legendary { border-left-color:#d6a017 !important; }
.wf-legend-title { margin:18px 0 8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#927037; }
.wf-legend { list-style:none; margin:0; padding:0; display:grid; gap:5px; text-align:left; }
.wf-legend li { display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:center; padding:6px 10px; background:#fff; border:1px solid #e1d3b3; font-size:13px; }
.wf-legend i { width:12px; height:12px; border-radius:50%; }
.wf-legend b { font-variant-numeric:tabular-nums; }
.rp-wheel { display:flex; align-items:center; gap:12px; width:100%; margin:0 0 16px; padding:11px 14px; text-align:left; background:#163958; color:#ffe1a0; border:0; cursor:pointer; font:700 14px system-ui,sans-serif; }
.rp-wheel small { display:block; font-weight:500; font-size:11px; color:#c9d6e3; }
.rp-wheel em { margin-left:auto; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; background:#e0a21b; color:#142b43; border-radius:20px; }
@media (prefers-reduced-motion:reduce) { .wf-backdrop,.wf-result { animation:none; } }
@media (max-width:480px) { .wf-dialog { padding:24px 16px 18px; } }