/* WEEKLY Liquid Royale — Free-earned case reveal V2.1. Scoped to dialog to avoid affecting games. */
body.wl-liquid .w21-case-dialog,
.w21-case-dialog { --c:#ab81f9; --v21-ink:#f8f3ff; color:var(--v21-ink); width:min(1010px,calc(100vw - 26px)); max-width:1010px; max-height:min(860px,calc(100dvh - 24px)); box-sizing:border-box; padding:0; border:1px solid #b68bff93; border-radius:26px; overflow-y:auto; background:linear-gradient(146deg,#251332,#100e1d 66%,#160d29); box-shadow:0 32px 120px #000e,0 0 58px #914aff3d,inset 0 1px #ffffff38; }
.w21-case-dialog::backdrop { background:rgba(2,0,10,.83); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); }
.w21-case-dialog[open] { animation:w21-arrive .25s ease-out both; }
@keyframes w21-arrive {from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.w21-case-dialog *, .w21-case-dialog *::before, .w21-case-dialog *::after {box-sizing:border-box}
.w21-shell { position:relative; overflow:hidden; min-height:440px; isolation:isolate; padding:clamp(18px,3vw,32px); }
.w21-shell::before {content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(ellipse at 25% 0%,#6c249c66,transparent 50%),radial-gradient(ellipse at 78% 66%,#6331c347,transparent 52%);pointer-events:none}
.w21-shell::after {content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(116deg,transparent 49%,#ffffff05 50%,transparent 52%);pointer-events:none}
.w21-head,.w21-toolbar,.w21-actions,.w21-result-actions,.w21-settings { display:flex;align-items:center;gap:13px;flex-wrap:wrap; }
.w21-head {justify-content:space-between;border-bottom:1px solid #ffffff17;padding-bottom:20px;margin-bottom:20px}
.w21-kicker { font-size:11px;font-weight:900;letter-spacing:.23em;color:#c8a9fa;text-transform:uppercase; }
.w21-head h2 {margin:6px 0 0;font-weight:950;font-size:clamp(21px,3vw,32px);line-height:1.1;letter-spacing:-.04em;color:white}
.w21-close {display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#261a35;color:#f5e9ff;border:1px solid #c4a2ff55;cursor:pointer;font-size:25px;font-family:inherit;transition:background .18s,transform .18s}
.w21-close:hover {background:#58347c;transform:rotate(6deg)}
.w21-toolbar {justify-content:space-between;gap:15px;margin-bottom:18px}
.w21-settings {gap:9px;color:#c8bbd8;font-size:12px}
.w21-settings button,.w21-settings label {color:#dfd5ef;background:#21172e;border:1px solid #765a9473;padding:9px 12px;border-radius:11px;font-weight:750;font-size:12px}
.w21-settings button {cursor:pointer}
.w21-settings label {display:flex;align-items:center;gap:5px}
.w21-settings input[type=range] {width:78px;accent-color:#bb8cff;vertical-align:middle}
.w21-settings input[type=checkbox] {accent-color:#ac72f5}
.w21-status {display:flex;gap:8px;align-items:center;color:#e3cafe;font-weight:850;font-size:12px;letter-spacing:.03em}
.w21-dot {width:8px;height:8px;border-radius:50%;background:#bc8eff;box-shadow:0 0 14px #c195ff}
.w21-reel-frame {position:relative;padding:22px 0 27px;border:1px solid #6f528f91;border-radius:20px;background:linear-gradient(180deg,#0d0a18,#211130);box-shadow:inset 0 5px 32px #000b,0 0 34px #a05fff24;overflow:hidden}
.w21-reel-frame::before,.w21-reel-frame::after {content:"";position:absolute;z-index:5;top:0;bottom:0;width:70px;pointer-events:none}
.w21-reel-frame::before {left:0;background:linear-gradient(90deg,#100d1e,transparent)}
.w21-reel-frame::after {right:0;background:linear-gradient(270deg,#100d1e,transparent)}
.w21-reel-window {overflow:hidden;width:100%;min-height:185px;display:flex;align-items:center}
.w21-reel {display:flex;align-items:stretch;gap:12px;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.w21-reel-tile {width:142px;min-width:142px;height:183px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 9px;gap:7px;background:linear-gradient(157deg,#1b1625,#141221);border:1px solid var(--tile-color,#b48dff);border-bottom:4px solid var(--tile-color,#b48dff);border-radius:13px;box-shadow:inset 0 0 24px #ffffff08;flex-shrink:0}
.w21-reel-tile img {width:84px;height:89px;object-fit:contain;filter:drop-shadow(0 0 8px var(--tile-glow,#9869cf50))}
.w21-reel-tile span {color:#f7f0ff;font-size:12px;font-weight:800;max-width:100%;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w21-reel-tile small {font-size:9px;letter-spacing:.11em;font-weight:900;text-transform:uppercase;color:var(--tile-color,#b48dff)}
.w21-marker {position:absolute;z-index:6;top:10px;bottom:10px;left:50%;width:3px;transform:translateX(-50%);background:linear-gradient(180deg,transparent 0%,#ffe1a5 24%,#fff2d8 75%,transparent 100%);filter:drop-shadow(0 0 7px #ffe4ac)}
.w21-marker::before,.w21-marker::after {content:"";position:absolute;left:-9px;border-left:10px solid transparent;border-right:10px solid transparent}
.w21-marker::before {top:-2px;border-top:12px solid #f7ca77}
.w21-marker::after {bottom:-2px;border-bottom:12px solid #f7ca77}
.w21-rarity-common{--tile-color:#66c4a4;--tile-glow:#59cdb466}.w21-rarity-uncommon{--tile-color:#72c8b5;--tile-glow:#69e6aa66}.w21-rarity-rare{--tile-color:#81c1ff;--tile-glow:#6a9dff66}.w21-rarity-epic{--tile-color:#ba8dfc;--tile-glow:#b376ff88}.w21-rarity-legendary{--tile-color:#f5c276;--tile-glow:#eebc6388}.w21-rarity-mythic{--tile-color:#ff85d5;--tile-glow:#ff5db799}
.w21-note {color:#a99ebd;font-size:12px;line-height:1.6;margin:14px 0 0;text-align:center}
.w21-actions {justify-content:center;margin:23px 0 6px}
.w21-btn {font-family:inherit;font-size:13px;font-weight:850;color:#faf7ff;cursor:pointer;border:1px solid #ae80ee75;border-radius:11px;background:linear-gradient(120deg,#352047,#261935);padding:12px 19px;transition:filter .16s,transform .16s;min-height:43px;text-decoration:none;display:inline-flex;gap:7px;align-items:center;justify-content:center}
.w21-btn:hover:not(:disabled){filter:brightness(1.16);transform:translateY(-1px)}
.w21-btn:focus-visible,.w21-close:focus-visible {outline:2px solid #ffddaa;outline-offset:3px}
.w21-btn[disabled] {opacity:.55;cursor:default}
.w21-btn-primary{background:linear-gradient(110deg,#bd74eb,#7442cb);box-shadow:0 7px 28px #9b48ef45;border-color:#e6a6ff9c;color:#fff}
.w21-btn-gold {background:linear-gradient(120deg,#ffdc98,#dba65b);border-color:#ffe4b2;color:#261526}
.w21-outcome {text-align:center;margin:16px auto 0;max-width:630px}
.w21-outcome img {width:clamp(130px,23vw,208px);height:clamp(130px,23vw,208px);object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 0 28px var(--result-glow,#ad6cf6))}
.w21-outcome h3 {font-size:clamp(22px,4vw,34px);margin:10px 0 6px;color:#fff;letter-spacing:-.05em}
.w21-rarity-text {font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--tile-color,#cba3ff);font-size:12px}
.w21-outcome-burst {margin:auto;width:clamp(160px,29vw,260px);height:clamp(150px,28vw,240px);display:flex;justify-content:center;align-items:center;position:relative;border-radius:50%;background:radial-gradient(circle,#b16aff3b,transparent 68%)}
.w21-case-dialog[data-rarity=legendary] .w21-outcome-burst{background:radial-gradient(circle,#edae4c5c,transparent 68%)}
.w21-case-dialog[data-rarity=mythic] .w21-outcome-burst{background:radial-gradient(circle,#eb60d665,transparent 68%)}
.w21-case-dialog[data-phase=reveal] .w21-outcome-burst{animation:w21-shimmer .7s ease-out both}
@keyframes w21-shimmer{from{transform:scale(.78);opacity:.1;filter:brightness(3)}to{transform:scale(1);opacity:1;filter:brightness(1)}}
.w21-result-actions {justify-content:center;margin:21px 0 0}
.w21-case-dialog[data-phase=reveal] .w21-reel-frame {display:none}
.w21-case-dialog[data-phase=request] .w21-reel-frame{display:none}
.w21-case-dialog[data-phase=error] .w21-reel-frame{display:none}
.w21-case-dialog[data-phase=reveal] .w21-toolbar{margin-bottom:0}
.w21-spinner {height:125px;display:grid;place-items:center;color:#d8bafa;font-size:16px;font-weight:700}
.w21-spinner::before {content:"";display:inline-block;width:30px;height:30px;margin:0 15px -9px 0;border:3px solid #8e62d755;border-top-color:#f3cfff;border-radius:50%;animation:w21-turn .85s linear infinite}
@keyframes w21-turn {to{transform:rotate(360deg)}}
.w21-live-message {margin:16px 0 0;text-align:center;color:#c6bad8;font-size:13px;line-height:1.55}
.w21-footer {margin-top:22px;padding-top:17px;border-top:1px solid #ffffff19;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:#9187a7}
.w21-empty{margin-top:12px;color:#c9b9d6;font-size:13px}
@media(max-width:720px){.w21-case-dialog{border-radius:17px;max-height:calc(100dvh - 14px)}.w21-shell{padding:17px 13px}.w21-reel-tile{width:102px;min-width:102px;height:148px;padding:7px}.w21-reel-tile img{width:70px;height:76px}.w21-reel-window{min-height:151px}.w21-settings{width:100%;justify-content:space-between;flex-wrap:wrap}.w21-settings label{padding:7px}.w21-settings input[type=range]{width:58px}.w21-head{padding-bottom:12px;margin-bottom:10px}.w21-status{font-size:11px}.w21-outcome-burst{height:175px}.w21-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.w21-case-dialog[open],.w21-case-dialog[data-phase=reveal] .w21-outcome-burst,.w21-spinner::before{animation:none!important}.w21-btn,.w21-close{transition:none!important}.w21-reel{transition:none!important}}
/* The modal switches states with the native hidden attribute. These component
   display rules must not accidentally override it. */
.w21-case-dialog [hidden] { display:none!important; }