/* Solo Ascension - css/loot-roll.css
   The drop roulette (2026-10-15). Reuses the weekly spin's global .ws-* classes for the
   card, port, reel, marker and result, so the geometry stays the one WS in
   js/ui/ceremonies.js describes (76px squares, 8px gap). Only the two square kinds and
   the result's chests are new. Transform/opacity only; no new @keyframes. */
#lootRollOverlay .ws-card{max-width:420px; text-align:center;}
#lootRollOverlay.lr-rare .ws-title{color:#7cb0ff;}
#lootRollOverlay.lr-legendary .ws-title{color:var(--gold);}
#lootRollOverlay.lr-mythic .ws-title{color:#c084fc;}

/* A box square keeps its tier's solid fill (the weekly spin's .ws-rare etc.), with
   the app's chest drawn on it in light-on-dark so it reads at speed. */
.ws-sq.ws-box{position:relative; flex-direction:column; gap:2px;}
.ws-sq.ws-box .lb-chest{
  flex:0 0 auto; width:40px; height:35px;
  --rc:rgba(10,8,18,.78); --rc2:rgba(255,255,255,.94);
}
.ws-sq.ws-box .lb-chest-body{height:21px; border-radius:3px 3px 7px 7px;}
.ws-sq.ws-box .lb-chest-lid{height:16px; border-radius:9px 9px 2px 2px;}
.ws-sq.ws-box .lb-chest-lock{top:11px; width:8px; height:10px; margin-left:-4px;}
.ws-sq.ws-legendary.ws-box .lb-chest-lock{background:#fff7da;}
.ws-n{
  position:absolute; right:5px; bottom:3px; font-size:12px; font-weight:800; line-height:1;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.ws-sq.ws-legendary .ws-n{color:#1a1200; text-shadow:none;}
/* An empty square is the dark panel with a dashed edge: nothing dropped. */
.ws-sq.ws-empty{background:var(--panel2); border:1px dashed var(--line2); color:var(--muted);}
.ws-dash{font-size:22px; font-weight:700; opacity:.65;}

/* the result: the chests that dropped, inline */
#lootRollOverlay .ws-result{min-height:26px;}
.lr-won{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:12px 0 4px;}
.lr-box{display:flex; flex-direction:column; align-items:center; gap:6px; max-width:120px;}
.lr-box .lb-chest{flex:0 0 auto; width:44px; height:39px;}
.lr-box .lb-chest-body{height:23px; border-radius:3px 3px 8px 8px;}
.lr-box .lb-chest-lid{height:18px; border-radius:10px 10px 2px 2px;}
.lr-box .lb-chest-lock{top:13px; width:9px; height:11px; margin-left:-4.5px;}
.lr-box.loot-tier-rare{--rc:#2563eb; --rc2:#7cb0ff;}
.lr-box.loot-tier-legendary{--rc:#d4a017; --rc2:#ffdc7a;}
.lr-box.loot-tier-mythic{--rc:#e0143c; --rc2:#a855f7;}
.lr-box-cat{font-size:12px; color:var(--text); overflow-wrap:anywhere; line-height:1.3;}
.lr-hint{font-size:11.5px; color:var(--muted); margin-top:6px;}
.lr-none{color:var(--muted);}