/* v0.62 · The Muster Board, the Ruin Ledger, the Proving Grounds, the damage ledger and the Storied
   Hall's furnisher. One sheet, loaded after style.css, built from the same ink / slate / ivory / gold
   pixel palette and the same 24px frame art as the rest of the game. Everything is scoped (#modalBody,
   #worldDock, #dpsMeter, #raidCall, #buildBar) so it never reaches older screens. */

/* ------------------------------------------------------------------------------------------------
   the location panel's dock
------------------------------------------------------------------------------------------------ */
#zoneContainer .worldDock{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px!important;margin-top:10px!important}
#zoneContainer .worldDock>button{min-width:0;display:flex!important;align-items:center;justify-content:center;gap:5px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;position:relative;padding:3px 4px!important;min-height:30px}
#zoneContainer .worldDock>button .erGlyph{width:12px;height:12px;flex:none;color:var(--gold)}
#zoneContainer .worldDock>button>b{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 3px;background:var(--rose);color:var(--ink);font:10px/15px var(--pixel);text-align:center;box-shadow:0 0 0 2px var(--ink)}
#zoneContainer .worldDock>button>b[hidden]{display:none}
#zoneContainer .worldDock>#autoFireBtn{grid-column:1/-1}
#worldDock #raidChip{grid-column:1/-1;display:flex!important;align-items:center;gap:8px;justify-content:flex-start;text-align:left;border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;padding:2px 6px!important;animation:erPulse 2.4s ease-in-out infinite}
#worldDock #raidChip .erGlyph{width:16px;height:16px;color:var(--accent,var(--gold))}
#worldDock #raidChip span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
#worldDock #raidChip b{font:12px var(--pixel);color:var(--ivory);overflow:hidden;text-overflow:ellipsis}
#worldDock #raidChip small{font-size:9px!important;color:var(--accent,var(--gold))!important}
@keyframes erPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}

/* ------------------------------------------------------------------------------------------------
   shared atoms
------------------------------------------------------------------------------------------------ */
.erGlyph{display:inline-block;width:14px;height:14px;vertical-align:-2px;color:currentColor;line-height:0}
.erGlyph svg{width:100%;height:100%;display:block}
.erGlyph.sm{width:11px;height:11px}
.erGlyph.huge{width:46px;height:46px;color:var(--slate3)}
.erKey{display:inline-block;vertical-align:-3px;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 var(--ink))}
.erEyebrow{font:9px var(--pixel)!important;letter-spacing:1.5px!important;color:var(--gold)!important;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.erEyebrow .erGlyph{width:12px;height:12px}
.erItem{--s:34px;width:var(--s);height:var(--s);flex:none;display:inline-grid;place-items:center;position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--rarity,#435078) 22%,var(--ink2)),var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity,#435078) 70%,var(--ink)),inset 0 0 0 2px var(--ink),0 1px 0 #0008}
.erItem img{width:calc(var(--s) - 6px);height:calc(var(--s) - 6px);image-rendering:pixelated;filter:drop-shadow(1px 1px 0 var(--ink))}
.erItem[data-tier="3"]{box-shadow:inset 0 0 0 1px var(--rarity),inset 0 0 0 2px var(--ink),0 0 8px color-mix(in srgb,var(--rarity) 45%,transparent)}
.erItem[data-tier="4"]{box-shadow:inset 0 0 0 1px var(--rarity),inset 0 0 0 2px var(--ink),0 0 10px color-mix(in srgb,var(--rarity) 65%,transparent);animation:erDivine 3s ease-in-out infinite}
@keyframes erDivine{50%{filter:brightness(1.18)}}
.erItem.vacant{background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate),inset 0 0 0 2px var(--ink)}
.erItem.vacant i{font:9px var(--pixel);color:var(--slate3);font-style:normal}
.erGear{display:inline-flex;gap:3px}
.erPips{display:inline-grid;grid-template-columns:repeat(10,5px);gap:2px;align-items:center}
.erPips i{width:5px;height:9px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2)}
.erPips i.on{background:var(--gold);box-shadow:inset 0 0 0 1px #fde89a,0 0 4px #ecc25a88}
.erSprite{width:30px;height:36px;image-rendering:pixelated;flex:none}
.erSprite.dead{filter:grayscale(1) brightness(.6)}
.erPortrait{width:72px;height:76px;image-rendering:pixelated;display:block;margin:0 auto}
.erPortrait.sm{width:58px;height:62px}
.erPortrait.lg{width:96px;height:102px}
.erLegacy{display:inline-flex;align-items:baseline;gap:6px;padding:2px 8px;background:#2a1f0e;box-shadow:inset 0 0 0 1px #9c6527;margin:4px 0}
.erLegacy b{font:18px var(--gothic);color:var(--gold);text-shadow:2px 2px 0 var(--ink)}
.erLegacy small{font:9px var(--pixel)!important;color:#d8b46a!important;letter-spacing:1px}
.erStatBars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.erStatBar{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:6px;font:10px var(--pixel);color:var(--ivory2)}
.erStatBar b{font-weight:400;color:var(--stat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erStatBar span{height:8px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2);position:relative}
.erStatBar span i{position:absolute;inset:1px auto 1px 1px;background:repeating-linear-gradient(90deg,var(--stat) 0 5px,color-mix(in srgb,var(--stat) 60%,var(--ink)) 5px 6px);max-width:calc(100% - 2px)}
.erStatBar em{font-style:normal;text-align:right;color:var(--muted)}
.erStatBar.max em{color:var(--gold)}
.erEmpty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px 16px;color:var(--muted);font:12px Manrope,sans-serif}
.erEmpty b{font:18px var(--gothic);color:var(--ivory);letter-spacing:1px}
.erEmpty.big{min-height:340px}
.erEmpty.slim{padding:14px}
.erError{color:var(--rose)!important;font:11px var(--pixel)!important;margin-top:8px}
.erBusy{padding:60px;text-align:center;font:14px var(--pixel);color:var(--muted)}

/* modal shells -------------------------------------------------------------------------------- */
.modalBox:has(.erShell){max-width:1180px!important;width:calc(100% - 40px)!important;padding:18px 22px 20px!important}
.modalBox:has(.erShell.erRaids),.modalBox:has(.erShell.erLedger),.modalBox:has(.erShell.erSandbox){height:min(860px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden!important}
.modalBox:has(.erShell)>#modalBody{flex:1;min-height:0;display:flex;flex-direction:column}
.erShell{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;color:var(--ivory)}
.erHead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:2px 34px 12px 0;border-bottom:1px solid var(--slate)}
.erHead h2{margin:4px 0 2px!important;font-size:30px!important}
.erHead p{font-size:12px!important;max-width:620px;line-height:1.55;margin:0}
.erHeadSide{display:flex;align-items:center;gap:10px;flex:none}
.erHeadSide>button{white-space:nowrap}
#modalBody .erShell h4{margin:0 0 8px;font:11px var(--pixel);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:baseline;gap:10px}
#modalBody .erShell h4 small{font-size:9px!important;color:var(--muted)!important;letter-spacing:1px!important;text-transform:none}
#modalBody .erShell h5{margin:10px 0 6px;font:10px var(--pixel);letter-spacing:1.5px;text-transform:uppercase;color:var(--ivory2);display:flex;gap:8px;align-items:baseline}
#modalBody .erShell h5 small{color:var(--muted)!important}
.erSection{padding:12px 14px;background:linear-gradient(180deg,#1b1630cc,#120f1fcc);box-shadow:inset 0 0 0 1px var(--slate),inset 0 1px 0 #ffffff08}
#modalBody .erSeg{display:inline-flex;gap:0}
#modalBody .erSeg button{border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;padding:4px 12px!important;font-size:14px!important;color:var(--ivory2)!important}
#modalBody .erSeg button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
#modalBody .erTabs{display:flex;gap:4px;flex-wrap:wrap}
#modalBody .erTabs button{border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;padding:5px 14px!important;font-size:15px!important;color:var(--ivory2)!important;display:inline-flex;align-items:center;gap:7px}
#modalBody .erTabs button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
#modalBody .erTabs button .erGlyph{width:13px;height:13px}
#modalBody .erShell input[type=range]{accent-color:var(--gold);width:100%;border:0!important;background:transparent!important}
#modalBody .erShell input:not([type=range]){padding:8px 10px;width:100%;font-size:14px}

/* ------------------------------------------------------------------------------------------------
   THE MUSTER BOARD
------------------------------------------------------------------------------------------------ */
.raidKeys{display:flex;gap:4px}
.raidKeys span{display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 5px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2);font:13px var(--pixel)}
.raidKeys span b{font-weight:400;color:var(--ivory)}
.raidKeys span.none{opacity:.45}
.raidCols{flex:1;min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px}
.raidList{overflow:auto;display:flex;flex-direction:column;gap:6px;padding:2px 6px 2px 2px;scrollbar-color:var(--slate2) transparent}
#modalBody .raidCard{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;padding:8px 10px!important;position:relative;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;color:var(--ivory)!important;font-size:12px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)!important;background-clip:padding-box!important}
#modalBody .raidCard:before{content:"";position:absolute;left:-6px;top:-6px;bottom:-6px;width:3px;background:var(--accent)}
#modalBody .raidCard.on{box-shadow:0 0 0 2px var(--gold),0 0 18px #ecc25a33!important;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 26%,transparent),#221c38 70%)!important}
#modalBody .raidCard.st-launching{animation:erPulse 1.2s infinite}
.raidCardTop{display:flex;justify-content:space-between;gap:8px;font:9px var(--pixel);letter-spacing:1px;color:var(--accent)}
.raidCardTop small{color:var(--accent)!important;font-size:9px!important}
.raidCardTop em{font-style:normal;color:var(--gold)}
.raidCard>strong{font:20px var(--gothic);letter-spacing:1px;color:var(--ivory);text-shadow:2px 2px 0 var(--ink);line-height:1}
.raidCardLead{display:flex;align-items:center;gap:6px}
.raidCardLead>span{display:flex;flex-direction:column;line-height:1.2}
.raidCardLead b{font:13px var(--pixel);font-weight:400}
.raidCardLead small{font-size:9px!important}
.raidCardNote{font:italic 11px Manrope,sans-serif;color:var(--ivory2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raidCardFoot{display:flex;justify-content:space-between;align-items:center;gap:6px}
.raidSeats{display:inline-flex;gap:3px}
.raidSeats i{width:10px;height:10px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate3);transform:rotate(45deg) scale(.8)}
.raidSeats i.on{background:var(--accent);box-shadow:inset 0 0 0 1px #fff6,0 0 6px var(--accent)}
.raidMinis{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.raidMini{display:inline-flex;align-items:center;gap:3px;font:11px var(--pixel)}
.raidMini b{font-weight:400;color:var(--ivory2)}
.raidClassDot{display:inline-block;width:9px;height:9px;background:var(--c);box-shadow:0 0 0 1px var(--ink)}
.raidDetail{overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:6px;scrollbar-color:var(--slate2) transparent}
.raidBanner{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center;padding:10px 14px 10px 10px;background:linear-gradient(100deg,var(--tint),#0e0b17 75%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,var(--ink)),inset 0 0 40px #0006}
.raidBannerArt{height:116px;overflow:hidden;box-shadow:inset 0 0 0 1px #0008}
.raidBannerArt svg{width:100%;height:100%;display:block}
.raidBannerText small{font:9px var(--pixel)!important;color:var(--accent)!important;letter-spacing:1.5px!important}
.raidBannerText h3{font:30px var(--gothic);letter-spacing:1px;margin:2px 0;text-shadow:2px 2px 0 var(--ink);color:var(--ivory)}
.raidBannerText p{font-size:12px!important;margin:0 0 8px!important;color:var(--ivory2)!important;line-height:1.45}
.raidBadges{display:flex;flex-wrap:wrap;gap:4px}
.raidBadges span{font:10px var(--pixel);padding:2px 7px;background:#0e0b17cc;box-shadow:inset 0 0 0 1px var(--slate2);color:var(--ivory2);display:inline-flex;align-items:center;gap:4px}
.raidBadges span.key{box-shadow:inset 0 0 0 1px var(--accent);color:var(--ivory)}
.raidNote{margin:0;padding:8px 14px;background:#0e0b17;box-shadow:inset 3px 0 0 var(--gold);font:italic 13px Manrope,sans-serif;color:var(--ivory)}
.raidNote b{font:11px var(--pixel);font-style:normal;color:var(--gold);margin-right:8px}
.raidReacts{display:flex;flex-wrap:wrap;gap:6px}
#modalBody .raidReact{display:inline-flex!important;align-items:center;gap:8px;padding:2px 10px 2px 6px!important;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;font-size:14px!important;color:var(--ivory2)!important;min-height:42px}
#modalBody .raidReact b{font:16px var(--gothic);color:var(--ivory);min-width:14px;text-align:center}
#modalBody .raidReact .erSprite{width:26px;height:31px}
#modalBody .raidReact .erGlyph{width:20px;height:20px;color:var(--gold)}
#modalBody .raidReact.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
#modalBody .raidReact.on b{color:var(--gold)}
#modalBody .raidReact.locked{opacity:.55;filter:saturate(.6)}
#modalBody .raidReact[style*="--c"] span{color:var(--c)}
.raidSeats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.raidSeat{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;background:#0e0b17aa;box-shadow:inset 0 0 0 1px var(--slate2);text-align:center;min-height:178px}
.raidSeat.lead{box-shadow:inset 0 0 0 1px var(--gold2),inset 0 0 22px #ecc25a1c}
.raidSeat>b{font:14px var(--pixel);font-weight:400;color:var(--ivory)}
.raidSeat>small{font-size:9px!important;display:flex;gap:4px;align-items:center}
.raidSeat>small .erGlyph{color:var(--gold)}
.raidSeat.open{justify-content:center;color:var(--slate3);box-shadow:inset 0 0 0 1px var(--slate);background:repeating-linear-gradient(135deg,#0e0b1766 0 8px,#17132766 8px 16px)}
.raidSeat.open i{width:26px;height:26px;color:var(--slate3)}
.raidSeat.open i .erGlyph{width:26px;height:26px}
.raidSeat.open b{font:13px var(--pixel);color:var(--muted)}
.raidSeat.open small{max-width:150px;line-height:1.3}
.raidSeatActs{position:absolute;top:4px;right:4px;display:flex;gap:2px}
#modalBody .raidSeatActs button{padding:0!important;width:26px;height:26px;border-width:5px!important;border-image:var(--frame-slot) 8 fill/5px/0 stretch!important;font-size:11px!important;display:grid;place-items:center}
#modalBody .raidSeatActs button .erGlyph{width:12px;height:12px}
.raidKeyTag{font:9px var(--pixel);font-style:normal;color:var(--gold);display:flex;align-items:center;gap:4px}
.raidApplicants{display:flex;flex-direction:column;gap:5px}
.raidAppl{background:#0e0b17aa;box-shadow:inset 0 0 0 1px var(--slate)}
.raidAppl.open{box-shadow:inset 0 0 0 1px var(--gold2)}
.raidAppl.declined{opacity:.5}
.raidApplRow{display:flex;align-items:center;gap:10px;padding:4px 8px;flex-wrap:wrap}
.raidApplName{display:flex;flex-direction:column;min-width:150px;flex:1;line-height:1.25}
.raidApplName b{font:14px var(--pixel);font-weight:400}
.raidApplName small{font-size:9px!important}
.raidTags{display:flex;gap:4px;flex-wrap:wrap}
.raidTag{display:inline-flex;align-items:center;gap:4px;font:10px var(--pixel);padding:1px 6px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2);color:var(--ivory2)}
.raidApplActs{display:flex;gap:4px;margin-left:auto}
#modalBody .raidApplActs button{padding:2px 10px!important;font-size:13px!important;display:inline-flex;align-items:center;gap:5px;min-height:30px}
#modalBody .raidApplActs button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
.raidInspect{display:grid;grid-template-columns:230px 1fr 1fr;gap:16px;padding:12px 14px 14px;border-top:1px solid var(--slate);background:linear-gradient(180deg,#221c3833,transparent)}
.raidInspectHero{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.raidInspectHero>div{display:flex;flex-direction:column;gap:2px}
.raidInspectHero b{font:20px var(--gothic);letter-spacing:1px}
.raidInspectHero small{font-size:9px!important}
.raidPower{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:4px 0 0}
.raidPower div{background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate);padding:3px 6px}
.raidPower dt{font:8px var(--pixel);color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.raidPower dd{margin:0;font:15px var(--pixel);color:var(--ivory)}
.raidEquip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.raidEquip>div{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.raidEquip>div .erItem{grid-row:1/3}
.raidEquip small{font-size:8px!important;align-self:end}
.raidEquip span{font:11px var(--pixel);color:var(--ivory);line-height:1.15;align-self:start}
.raidBag{display:grid;grid-template-columns:repeat(6,30px);gap:4px}
.raidLeadBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 2px;border-top:1px solid var(--slate);margin-top:auto;position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#0e0b17 30%)}
.raidLeadBar .primary{display:inline-flex;align-items:center;gap:8px}
.raidLeadBar .primary .erGlyph{width:16px;height:16px}
.raidLeadHint{font:11px var(--pixel);color:var(--muted);flex:1;min-width:200px}
.raidLeadHint.big{font-size:16px;color:var(--gold)}
.raidLeadBar>button:last-child:not(.primary){margin-left:auto}
/* the composer */
.raidPicks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#modalBody .raidPick{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px!important;text-align:left;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;color:var(--ivory)!important;font-size:12px!important}
#modalBody .raidPick.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important}
#modalBody .raidPick.locked{opacity:.45}
.raidPickArt{display:block;width:100%;height:70px;overflow:hidden;box-shadow:inset 0 0 0 1px #0008;background:var(--tint)}
.raidPickArt svg{width:100%;height:100%;display:block}
.raidPick small{font-size:8px!important;color:var(--accent)!important}
.raidPick b{font:16px var(--gothic);letter-spacing:1px;line-height:1.05;color:var(--ivory)}
.raidPick em{font:9px var(--pixel);font-style:normal;color:var(--muted);display:flex;align-items:center;gap:4px}
.raidForm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;padding:12px 14px;background:#120f1fcc;box-shadow:inset 0 0 0 1px var(--slate)}
.raidField{display:flex;flex-direction:column;gap:6px}
.raidField.wide{grid-column:1/-1}
.raidField label{font:10px var(--pixel)!important;letter-spacing:1.5px!important;color:var(--gold);text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
.raidField label small{text-transform:none;color:var(--muted)!important}
.raidField label b{color:var(--ivory);font-weight:400}
.raidField>small{font-size:9px!important;line-height:1.4}
.raidClassPick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#modalBody .raidClassPick button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px!important;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;font-size:12px!important;color:var(--c)!important}
#modalBody .raidClassPick button small{font-size:8px!important;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#modalBody .raidClassPick button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important}

/* ------------------------------------------------------------------------------------------------
   THE HORN · the join-or-deny call
------------------------------------------------------------------------------------------------ */
#raidCall{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0e0b17aa,#05040acc);animation:erFade .3s ease-out;padding:16px}
#raidCall[hidden]{display:none}
@keyframes erFade{from{opacity:0}}
.raidCallCard{position:relative;width:min(760px,100%);display:grid;grid-template-columns:230px 1fr 150px;gap:18px;align-items:center;padding:20px 22px;border:16px solid transparent;border-image:var(--frame) 8 fill/16px/0 stretch;color:var(--ivory);box-shadow:0 0 0 2px #0008,0 30px 120px #000c;animation:erRise .45s cubic-bezier(.2,1.4,.4,1)}
.raidCallCard:after{content:"";position:absolute;inset:-16px;pointer-events:none;box-shadow:0 0 70px color-mix(in srgb,var(--accent) 35%,transparent);animation:erPulse 1.6s infinite}
@keyframes erRise{from{transform:translateY(24px) scale(.96);opacity:0}}
.raidCallArt{height:170px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 30%,transparent);background:var(--tint)}
.raidCallArt svg{width:100%;height:100%;display:block}
.raidCallBody h2{margin:4px 0!important;font-size:30px!important;color:var(--ivory)}
.raidCallBody p{margin:0 0 8px!important;font-size:12px!important;color:var(--ivory2)!important;line-height:1.45}
.raidCallBody p b{color:var(--gold)}
.raidCallBody .erEyebrow{color:var(--accent)!important}
.raidCallParty{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.raidCallParty li{display:flex;align-items:center;gap:6px;font:12px var(--pixel)}
.raidCallParty li .erSprite{width:22px;height:27px}
.raidCallParty li em{margin-left:auto;font-style:normal;font-size:9px;color:var(--muted)}
.raidCallParty li.ok em{color:var(--moss)}
.raidCallParty li.no em{color:var(--rose)}
.raidCallNote{font:11px var(--pixel)!important;color:var(--muted)!important}
.raidCallNote.warn{color:var(--rose)!important}
.raidCallActions{display:flex;gap:8px;margin-top:6px}
#raidCall .raidCallActions button{font-size:16px!important;padding:6px 16px!important}
#raidCall .raidCallActions .primary{flex:1;animation:erPulse 1s infinite}
.raidCallRing{position:relative;width:150px;height:150px;display:grid;place-items:center}
.raidCallRing svg{position:absolute;inset:0;transform:rotate(-90deg)}
.raidCallRing circle{fill:none;stroke-width:7}
.raidCallRing .track{stroke:var(--ink2)}
.raidCallRing .fill{stroke:var(--accent);stroke-dasharray:276.5;stroke-linecap:butt;transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 4px var(--accent))}
.raidCallRing strong{font:58px var(--gothic);color:var(--ivory);text-shadow:3px 3px 0 var(--ink);line-height:1;margin-top:-10px}
.raidCallRing small{position:absolute;bottom:34px;font-size:8px!important;color:var(--accent)!important;letter-spacing:2px!important}

@media (max-width:900px){
 .raidCols{grid-template-columns:1fr}
 .raidList{max-height:220px}
 .raidSeats4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .raidInspect{grid-template-columns:1fr}
 .raidPicks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .raidForm{grid-template-columns:1fr 1fr}
 .raidClassPick{grid-template-columns:repeat(4,minmax(0,1fr))}
 .raidCallCard{grid-template-columns:1fr;text-align:center}
 .raidCallArt{display:none}
 .raidCallRing{margin:0 auto;width:120px;height:120px}
 .erHead{flex-direction:column;align-items:flex-start}
 .raidBanner{grid-template-columns:1fr}
 .raidBannerArt{display:none}
}
.erScroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:6px;scrollbar-color:var(--slate2) transparent}
.erGear{align-items:center}
.raidSeatRibbon{position:absolute;top:-1px;left:50%;transform:translateX(-50%);font:9px var(--pixel);font-style:normal;letter-spacing:1.5px;color:var(--ink);background:var(--gold);padding:1px 8px 2px;display:flex;align-items:center;gap:4px;box-shadow:0 2px 0 var(--gold3)}
.raidSeatRibbon .erGlyph{color:var(--ink)}
#worldDock #raidChip[hidden]{display:none!important}
#raidCall .raidCallActions .primary{white-space:nowrap;min-width:190px}

/* ------------------------------------------------------------------------------------------------
   THE DAMAGE LEDGER · hung beneath the guardian's health bar
------------------------------------------------------------------------------------------------ */
#dpsMeter{position:relative;z-index:31;width:100%;box-sizing:border-box;pointer-events:auto;color:var(--ivory);font-family:var(--pixel);border:16px solid transparent;border-image:var(--frame) 8 fill/16px/0 stretch;padding:0 2px;animation:erDrop .25s ease-out}
#dpsMeter[hidden]{display:none}
@keyframes erDrop{from{opacity:0;transform:translateY(-6px)}}
#dpsMeter .dpsHead{display:flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--slate)}
#dpsMeter .dpsTitle{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0}
#dpsMeter .dpsTitle .erGlyph{color:var(--gold);width:11px;height:11px;align-self:center}
#dpsMeter .dpsTitle b{font-weight:400;font-size:10px;letter-spacing:1.5px;color:var(--gold)}
#dpsMeter .dpsTitle small{font-size:9px!important;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dpsMeter .dpsTotal{display:flex;align-items:baseline;gap:3px}
#dpsMeter .dpsTotal b{font-weight:400;font-size:14px;color:var(--ivory)}
#dpsMeter .dpsTotal small{font-size:7px!important}
#dpsMeter .dpsClock{font-size:10px;color:var(--ivory2);min-width:30px;text-align:right}
#dpsMeter .dpsHead button{padding:0!important;width:20px;height:20px;border-width:4px!important;border-image:var(--frame-slot) 8 fill/4px/0 stretch!important;font-size:9px!important;color:var(--gold)!important;line-height:1}
#dpsMeter ol{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
#dpsMeter li{position:relative;display:grid;grid-template-columns:18px 18px minmax(0,1fr) 52px 46px 34px;align-items:center;gap:5px;height:20px;padding:0 4px;font-size:11px;isolation:isolate}
#dpsMeter li:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 14%,transparent));z-index:-1;transition:width .25s}
#dpsMeter li.me{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 70%,transparent)}
#dpsMeter li.top .dpsRank{color:var(--gold)}
#dpsMeter li.dead{opacity:.55}
#dpsMeter li.gone{opacity:.4}
#dpsMeter .dpsRank{text-align:center;color:var(--muted);font-size:10px}
#dpsMeter .dpsRank .erGlyph{width:12px;height:12px}
#dpsMeter li img{width:15px;height:18px;margin-top:-2px}
#dpsMeter .dpsName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ivory)}
#dpsMeter .dpsName .erGlyph{color:var(--rose)}
#dpsMeter .dpsBar{display:none}
#dpsMeter .dpsDmg{text-align:right;color:var(--ivory2)}
#dpsMeter .dpsDps{text-align:right;color:var(--c)}
#dpsMeter .dpsDps small{font-size:7px!important;color:var(--muted)!important}
#dpsMeter .dpsPct{text-align:right;color:var(--muted);font-size:10px}
#dpsMeter .dpsFoot{margin-top:4px;padding-top:3px;border-top:1px solid var(--slate);font-size:9px;color:var(--muted);text-align:center;letter-spacing:1px}
#dpsMeter.mini{padding:0 2px}
#dpsMeter.mini .dpsHead{border:0;padding:0}
#dpsMeter .dpsMine{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10px;color:var(--ivory2);padding-top:3px}
#dpsMeter .dpsMine b{font-weight:400;font-size:15px;color:var(--gold)}
#dpsMeter .dpsMine small{font-size:8px!important}
#dpsMeter.done{border-image:var(--frame-hot) 8 fill/16px/0 stretch}
#dpsMeter.done li:before{opacity:.8}
/* the crown: who hurt the guardian most */
#dpsCrown{position:fixed;left:50%;top:12px;z-index:60;transform:translateX(-50%);pointer-events:none;width:min(520px,calc(100vw - 24px))}
#dpsCrown[hidden]{display:none}
#dpsCrown.in .dpsCrownCard{animation:erCrownIn .7s cubic-bezier(.2,1.5,.4,1) both}
#dpsCrown.out .dpsCrownCard{animation:erCrownOut .6s ease-in both}
@keyframes erCrownIn{from{opacity:0;transform:translateY(-30px) scale(.9)}}
@keyframes erCrownOut{to{opacity:0;transform:translateY(-16px) scale(.97)}}
.dpsCrownCard{padding:14px 18px 12px;border:16px solid transparent;border-image:var(--frame) 8 fill/16px/0 stretch;text-align:center;color:var(--ivory);box-shadow:0 0 60px #ecc25a33}
.dpsCrownCard>small{display:flex;justify-content:center;align-items:center;gap:6px;font:10px var(--pixel)!important;letter-spacing:2px!important;color:var(--rose)!important}
.dpsCrownTop{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 6px;position:relative}
.dpsCrownHero{display:flex;flex-direction:column;align-items:center}
.dpsCrownGlyph{color:var(--gold);filter:drop-shadow(0 0 6px #ecc25a);margin-bottom:-4px}
.dpsCrownGlyph .erGlyph{width:22px;height:22px}
.dpsCrownTop img{width:40px;height:48px;filter:drop-shadow(0 0 8px #ecc25a88)}
.dpsCrownTop>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.dpsCrownTop em{font:9px var(--pixel);font-style:normal;letter-spacing:2px;color:var(--gold)}
.dpsCrownTop b{font:32px var(--gothic);letter-spacing:1px;line-height:1;text-shadow:2px 2px 0 var(--ink);color:var(--ivory)}
.dpsCrownTop i{font:12px var(--pixel);font-style:normal;color:var(--ivory2)}
.dpsCrownCard q{display:block;font:italic 13px Manrope,sans-serif;color:var(--ivory);margin:4px auto 6px;max-width:440px;line-height:1.45;quotes:"“" "”"}
.dpsCrownCard ol{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:16px}
.dpsCrownCard ol li{display:flex;gap:6px;align-items:baseline;font:11px var(--pixel)}
.dpsCrownCard ol li span{color:var(--muted)}
.dpsCrownCard ol li i{font-style:normal;color:var(--muted)}

/* ------------------------------------------------------------------------------------------------
   THE RUIN LEDGER
------------------------------------------------------------------------------------------------ */
.ledBody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:6px;scrollbar-color:var(--slate2) transparent}
.ledSearch{position:relative;display:flex}
#modalBody .ledSearch input{width:210px;padding:7px 10px!important;font-size:14px!important}
#modalBody .ledSearch>button{padding:0 10px!important;border-width:6px!important;border-image:var(--frame-btn) 8 fill/6px/0 stretch!important}
.ledHits{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;display:flex;flex-direction:column;background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold3),0 10px 30px #000a;padding:4px}
#modalBody .ledHits button{display:flex;align-items:center;gap:8px;padding:2px 8px!important;border:0!important;border-image:none!important;text-align:left;font-size:13px!important}
#modalBody .ledHits button:hover{background:var(--ink3)!important}
.ledHits button small{margin-left:auto}
.ledHits span{padding:8px;font:11px var(--pixel);color:var(--muted)}
.ledTiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.ledTiles.small{grid-template-columns:repeat(8,minmax(0,1fr))}
.ledTile{position:relative;padding:8px 10px 9px;background:linear-gradient(180deg,#221c38,#171327);box-shadow:inset 0 0 0 1px var(--slate2),inset 0 1px 0 #ffffff0d;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.ledTile:after{content:"";position:absolute;right:-12px;top:-12px;width:34px;height:34px;transform:rotate(45deg);background:#ffffff06}
.ledTile small{font-size:8px!important;color:var(--muted)!important;letter-spacing:1.5px!important;text-transform:uppercase}
.ledTile b{font:28px var(--gothic);color:var(--ivory);letter-spacing:1px;line-height:1.05;text-shadow:2px 2px 0 var(--ink)}
.ledTile em{font:9px var(--pixel);font-style:normal;color:var(--ivory2)}
.ledTile.grave b{color:var(--rose)}
.ledTile.loot6 b{color:#ecc25a}
.ledTile.loot7 b{color:#f4ecff;text-shadow:0 0 10px #c8a2ec,2px 2px 0 var(--ink)}
.ledGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ledGrid3{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:12px}
.ledClassRow,.ledRift{display:grid;grid-template-columns:30px 132px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:3px 0}
.ledRift{grid-template-columns:150px minmax(0,1fr)}
.ledClassRow .erSprite{grid-row:1/3}
.ledClassName,.ledRiftName{display:flex;flex-direction:column;grid-row:1/3;line-height:1.15}
.ledClassName b{font:13px var(--pixel);font-weight:400;color:var(--c)}
.ledClassName small{font-size:8px!important}
.ledRiftName small{font-size:8px!important;color:var(--accent)!important}
.ledRiftName b{font:12px var(--pixel);font-weight:400;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledBars{display:flex;height:10px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate)}
.ledBars i{display:block;height:100%}
.ledBars i.live{background:repeating-linear-gradient(90deg,var(--c,var(--accent)) 0 5px,color-mix(in srgb,var(--c,var(--accent)) 65%,var(--ink)) 5px 6px)}
.ledBars i.dead{background:repeating-linear-gradient(90deg,#a3304a 0 5px,#741d38 5px 6px)}
.ledNums{font:10px var(--pixel);color:var(--muted)}
.ledNums b{color:var(--ivory);font-weight:400}
.ledNums em{color:var(--rose);font-style:normal}
.ledNums strong{color:var(--gold);font-weight:400}
.ledFeed{display:flex;flex-direction:column;gap:4px}
.ledFeedRow{display:flex;align-items:center;gap:10px;padding:4px 6px;background:#0e0b1799;box-shadow:inset 0 0 0 1px var(--slate);cursor:pointer;font:12px Manrope,sans-serif;color:var(--ivory2)}
.ledFeedRow:hover{box-shadow:inset 0 0 0 1px var(--gold3)}
.ledFeedRow>span{display:flex;flex-direction:column;line-height:1.35}
.ledFeedRow b{font:12px var(--pixel);font-weight:400;color:var(--ivory)}
.ledFeedRow em{font-style:normal;color:var(--rose)}
.ledFeedRow.record em{color:var(--gold)}
.ledFeedRow small{font-size:8px!important}
.ledStone{image-rendering:pixelated;flex:none;filter:drop-shadow(0 2px 0 #0008)}
.ledMini{margin-bottom:10px}
#modalBody .ledMini h5{justify-content:space-between}
#modalBody .ledMore{border:0!important;border-image:none!important;padding:0!important;font:9px var(--pixel)!important;color:var(--gold)!important}
#modalBody .ledMiniRow{display:flex;align-items:center;gap:6px;width:100%;padding:0 6px!important;border:0!important;border-image:none!important;font-size:12px!important;text-align:left;min-height:34px}
#modalBody .ledMiniRow:hover{background:#ffffff08!important}
.ledMiniRow em{margin-left:auto;font-style:normal;color:var(--gold);font:13px var(--pixel)}
.ledRank{width:22px;text-align:center;font:12px var(--pixel);color:var(--muted);flex:none}
.ledRank.r1{color:#ecc25a}.ledRank.r2{color:#d6dae6}.ledRank.r3{color:#d9925a}
.ledRank .erGlyph{width:15px;height:15px}
.ledNone{font:10px var(--pixel)!important;color:var(--muted)!important;padding:6px 0;display:block}
.ledKillers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;counter-reset:k}
.ledKillers li{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;background:linear-gradient(90deg,#4a132833,transparent);box-shadow:inset 2px 0 0 #a3304a;font:12px var(--pixel)}
.ledKillers li b{font-weight:400;color:var(--ivory)}
.ledKillers li span{color:var(--rose)}
.ledBoardPick{display:flex;flex-wrap:wrap;gap:4px}
#modalBody .ledBoardPick button,#modalBody .ledClassFilter button{border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;padding:3px 12px!important;font-size:14px!important;color:var(--ivory2)!important}
#modalBody .ledBoardPick button.on,#modalBody .ledClassFilter button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
.ledLead{font-size:12px!important;margin:0!important;color:var(--ivory2)!important}
.ledTable{display:flex;flex-direction:column;gap:3px}
#modalBody .ledRow{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto 110px;align-items:center;gap:10px;padding:2px 12px 2px 6px!important;text-align:left;border:0!important;border-image:none!important;background:#0e0b1799!important;box-shadow:inset 0 0 0 1px var(--slate);font-size:12px!important;min-height:44px;width:100%}
#modalBody .ledRow:hover{box-shadow:inset 0 0 0 1px var(--gold3)}
#modalBody .ledRow.podium{background:linear-gradient(90deg,#ecc25a14,#0e0b1799 50%)!important}
#modalBody .ledRow.flat{cursor:default}
.ledWho{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ledWho b{font:14px var(--pixel);font-weight:400;color:var(--ivory)}
.ledWho small{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledTitle{font:10px var(--pixel);color:var(--muted);letter-spacing:1px}
.ledVal{font:20px var(--gothic);color:var(--gold);text-align:right;text-shadow:2px 2px 0 var(--ink)}
.ledVal small{font:9px var(--pixel)!important;color:var(--muted)!important}
.ledFilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ledClassFilter{display:flex;gap:3px}
#modalBody .ledClassFilter button{padding:0 4px!important}
.ledClassFilter .erSprite{width:24px;height:29px}
.ledGraves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ledGraves.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.ledGrave{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px 8px 6px;background:linear-gradient(100deg,#120f1f,#0e0b17);box-shadow:inset 0 0 0 1px var(--slate),inset 3px 0 0 var(--c)}
.ledGrave.t11{box-shadow:inset 0 0 0 1px var(--gold3),inset 3px 0 0 var(--gold),0 0 18px #ecc25a1a}
.ledGraveStone{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ledGraveStone small{font-size:7px!important;line-height:1.2;color:var(--ivory2)!important}
.ledGraveText{display:flex;flex-direction:column;gap:3px;min-width:0}
#modalBody .ledName{border:0!important;border-image:none!important;padding:0!important;font:16px var(--pixel)!important;color:var(--ivory)!important;text-align:left;align-self:flex-start}
#modalBody .ledName:hover{color:var(--gold)!important}
.ledGraveClass{font:10px var(--pixel);color:var(--c)}
.ledGraveClass em{color:var(--rose);font-style:normal}
.ledEpitaph{font:italic 12px Manrope,sans-serif;color:var(--ivory2)}
.ledEpitaph b{color:var(--rose);font-style:normal;font-weight:600}
.ledGraveMeta{font:9px var(--pixel);color:var(--muted)}
.ledGraveSide{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ledGraves.compact .ledGraveSide .erGear{display:none}
.ledMoreRow{display:flex;justify-content:center;padding:6px}
.ledBossCols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;min-height:0}
.ledBossList{display:flex;flex-direction:column;gap:4px}
#modalBody .ledBoss{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:4px 10px!important;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;color:var(--ivory)!important;position:relative}
#modalBody .ledBoss:before{content:"";position:absolute;left:-8px;top:-8px;bottom:-8px;width:3px;background:var(--accent)}
#modalBody .ledBoss.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important}
.ledBoss b{font:14px var(--pixel);font-weight:400}
.ledBoss small{font-size:8px!important}
.ledCensus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ledRelic{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 8px;background:linear-gradient(110deg,color-mix(in srgb,var(--rarity) 12%,#120f1f),#0e0b17);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity) 40%,var(--slate))}
.ledRelic .erItem{grid-row:1/3}
.ledRelic span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ledRelic b{font:13px var(--pixel);font-weight:400;color:var(--rarity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledRelic small{font-size:8px!important}
.ledRelic em{font:10px var(--pixel);font-style:normal;color:var(--muted)}
.ledRelic em strong{color:var(--ivory);font-weight:400}
.ledRelic.sealed{filter:grayscale(1) brightness(.55);box-shadow:inset 0 0 0 1px var(--slate)}
.ledRelic.sealed .erItem img{filter:brightness(0) drop-shadow(0 0 1px #ffffff55)}
.ledProfile{display:flex;flex-direction:column;gap:12px}
.ledProfileHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ledProfileName{display:flex;align-items:center;gap:12px}
.ledProfileName .erSprite{width:54px;height:64px}
.ledProfileName small{font-size:9px!important;color:var(--gold)!important}
.ledProfileName h3{font:40px var(--gothic);letter-spacing:1.5px;margin:0;line-height:1;text-shadow:3px 3px 0 var(--ink);color:var(--ivory)}
.ledPrivacy{display:flex;align-items:center;gap:8px;font:11px var(--pixel)!important;color:var(--ivory2);cursor:pointer}
.ledPrivacy input{width:16px!important;height:16px;padding:0!important;accent-color:var(--gold)}
.ledVictories{display:flex;flex-wrap:wrap;gap:4px}
.ledVictory{display:inline-flex;align-items:baseline;gap:6px;padding:2px 9px;font:11px var(--pixel);color:var(--ivory2);background:#0e0b17;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#ecc25a) 60%,var(--ink))}
.ledVictory b{color:var(--accent,var(--gold));font-weight:400;font-size:14px}
.ledVictory.morrow{--accent:#ecc25a}
.ledLives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ledLife{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:center;padding:8px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,#120f1f),#0e0b17);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,var(--slate))}
.ledLife>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ledLife>div>b{font:16px var(--pixel);font-weight:400;color:var(--c)}
.ledLife>div>small{font-size:9px!important}
.ledLifeMeta{font:9px var(--pixel);color:var(--muted)}
.ledPrivate{font:9px var(--pixel);color:var(--muted);font-style:italic}
.ledHallPeek{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.ledDecor{display:inline-flex;flex-direction:column;padding:4px 9px;background:#0e0b17;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r) 55%,var(--ink))}
.ledDecor b{font:11px var(--pixel);font-weight:400;color:var(--r)}
.ledDecor small{font-size:7px!important}
@media (max-width:1100px){.ledTiles,.ledTiles.small{grid-template-columns:repeat(4,minmax(0,1fr))}.ledGrid3{grid-template-columns:1fr 1fr}.ledLives{grid-template-columns:repeat(2,minmax(0,1fr))}.ledCensus{grid-template-columns:repeat(2,minmax(0,1fr))}.ledGraves.compact{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.ledGrid2,.ledGrid3,.ledGraves,.ledBossCols{grid-template-columns:1fr}.ledCensus{grid-template-columns:1fr}#modalBody .ledRow{grid-template-columns:24px 30px minmax(0,1fr) 80px}.ledTitle{display:none}}
.ledFeedRow .ledLine{display:block}
.ledFeedRow .ledLine b{margin-right:4px}

/* ------------------------------------------------------------------------------------------------
   THE PROVING GROUNDS
------------------------------------------------------------------------------------------------ */
.sandSeal{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font:11px var(--pixel);letter-spacing:1.5px;color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:#0b243066}
.sandCols{flex:1;min-height:0;display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px}
.sandBuild{overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:6px;scrollbar-color:var(--slate2) transparent}
.sandBuild h4{margin:6px 0 2px!important}
.sandClasses{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#modalBody .sandClasses button{display:flex;flex-direction:column;align-items:center;padding:2px!important;border-image:var(--frame-slot) 8 fill/6px/0 stretch!important;border-width:6px!important;font-size:8px!important;color:var(--c)!important;min-width:0}
#modalBody .sandClasses button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:9px}
#modalBody .sandClasses button.on{border-image:var(--frame-hot) 8 fill/6px/0 stretch!important}
.sandSlots{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#modalBody .sandSlot{display:flex!important;align-items:center;gap:8px;padding:2px 6px!important;text-align:left;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;min-width:0}
#modalBody .sandSlot.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important}
.sandSlot>span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.sandSlot small{font-size:8px!important}
.sandSlot b{font:12px var(--pixel);font-weight:400;color:var(--rarity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sandSlot em{font:9px var(--pixel);font-style:normal;color:var(--muted)}
.sandQuick{display:flex;gap:4px}
#modalBody .sandQuick button{flex:1;padding:2px 6px!important;font-size:13px!important}
.sandPicker{background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold3);padding:6px;display:flex;flex-direction:column;gap:6px}
.sandPickBar{display:flex;gap:4px}
#modalBody .sandPickBar input{flex:1;min-width:0;padding:5px 8px!important;font-size:13px!important}
#modalBody .sandPickBar select{font-size:12px!important;padding:3px!important}
#modalBody .sandPickBar button{padding:2px 10px!important;font-size:13px!important}
.sandPickGrid{display:grid;grid-template-columns:1fr 1fr;gap:3px;max-height:250px;overflow:auto;scrollbar-color:var(--slate2) transparent}
#modalBody .sandPick{display:flex!important;align-items:center;gap:6px;padding:2px 4px!important;border:0!important;border-image:none!important;text-align:left;background:#171327!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity) 35%,var(--slate));font-size:11px!important;min-width:0}
#modalBody .sandPick:hover{box-shadow:inset 0 0 0 1px var(--rarity)}
#modalBody .sandPick.on{box-shadow:inset 0 0 0 2px var(--gold);background:#2a1f0e!important}
.sandPick span{display:flex;flex-direction:column;line-height:1.15;min-width:0;font:11px var(--pixel);color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sandPick small{font-size:8px!important;color:var(--rarity)!important}
.sandSeg{display:flex!important;width:100%}
#modalBody .sandSeg button{flex:1;font-size:12px!important;padding:3px 6px!important}
.sandRange{display:grid;grid-template-columns:110px 26px 1fr;align-items:center;gap:8px;font:10px var(--pixel)!important;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
.sandRange b{color:var(--ivory);font-weight:400;font-size:13px}
.sandRow{display:flex;gap:8px;align-items:center}
.sandRangeRow{display:flex;gap:8px;align-items:center;margin:6px 0}.sandRangeRow>small{font:10px var(--pixel);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;min-width:38px}.sandRangeRow .sandSeg{flex:1}
.sandRow .sandSeg{width:auto;flex:1}
.sandCheck{display:flex;align-items:center;gap:6px;font:10px var(--pixel)!important;color:var(--ivory2);white-space:nowrap}
#modalBody .sandCheck input{width:15px!important;height:15px;padding:0!important;accent-color:var(--gold)}
.sandStage{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding-right:4px;scrollbar-color:var(--slate2) transparent}
.sandArenaWrap{position:relative;height:340px;flex:none;background:#07060c;box-shadow:inset 0 0 0 1px var(--slate2),0 0 0 2px var(--ink);overflow:hidden}
#sandArena{width:100%;height:100%;display:block;image-rendering:pixelated}
.sandLive{position:absolute;left:10px;top:8px;display:flex;flex-direction:column;pointer-events:none;text-shadow:2px 2px 0 var(--ink)}
.sandLive b{font:34px var(--gothic);color:var(--gold);line-height:1}
.sandLive small{font-size:9px!important;color:var(--ivory)!important}
.sandBar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#0e0b17aa}
.sandBar i{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.sandSpeed{position:absolute;right:8px;top:8px}
#modalBody .sandSpeed button{padding:0 8px!important;font-size:12px!important;border-width:6px!important;border-image:var(--frame-slot) 8 fill/6px/0 stretch!important}
#modalBody .sandSpeed button.on{border-image:var(--frame-hot) 8 fill/6px/0 stretch!important}
.sandActions{display:flex;gap:6px}
#modalBody .sandActions button{font-size:15px!important;padding:4px 12px!important}
#modalBody .sandActions .primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sandEmpty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;text-align:center;color:var(--muted);font:12px Manrope,sans-serif}
.sandEmpty b{font:18px var(--gothic);color:var(--ivory);letter-spacing:1px}
.sandHeadline{display:flex;align-items:center;gap:18px;padding:8px 12px;background:linear-gradient(100deg,#2a1f0e,#120f1f 60%);box-shadow:inset 0 0 0 1px var(--gold3)}
.sandDps{display:flex;flex-direction:column}
.sandDps small{font-size:9px!important;color:var(--gold)!important;letter-spacing:2px!important}
.sandDps b{font:44px var(--gothic);color:var(--ivory);line-height:1;text-shadow:3px 3px 0 var(--ink)}
.sandDps em{font:11px var(--pixel);font-style:normal}
.sandDps em.up{color:var(--moss)}
.sandDps em.down{color:var(--rose)}
.sandNums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:1}
.sandNums span{display:flex;flex-direction:column;font:9px var(--pixel);color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.sandNums b{font:20px var(--gothic);color:var(--ivory);font-weight:400;letter-spacing:0}
.sandChart{padding:6px 10px 4px;background:#0e0b17;box-shadow:inset 0 0 0 1px var(--slate)}
.sandChartBars{position:relative;height:64px}
.sandChartBars i{position:absolute;bottom:0;background:linear-gradient(180deg,var(--gold),var(--gold3));box-shadow:inset -1px 0 0 #0e0b17}
.sandChartAxis{display:flex;justify-content:space-between}
.sandChartAxis small{font-size:8px!important}
.sandCompare{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sandCmp{display:flex;flex-direction:column;padding:6px 10px;background:#171327;box-shadow:inset 0 0 0 1px var(--slate2)}
.sandCmp small{font-size:8px!important;color:var(--gold)!important;letter-spacing:1.5px!important;text-transform:uppercase}
.sandCmp b{font:24px var(--gothic);color:var(--ivory);line-height:1.1}
.sandCmp em{font:9px var(--pixel);font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sandCmp.busy b{color:var(--muted)}
.sandStats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sandStats span{display:flex;flex-direction:column;padding:4px 6px;background:#0e0b17;box-shadow:inset 0 0 0 1px var(--slate)}
.sandStats small{font-size:7px!important;letter-spacing:1px!important;text-transform:uppercase}
.sandStats b{font:13px var(--pixel);font-weight:400;color:var(--ivory)}
.sandFoot{margin:0!important;font:10px var(--pixel)!important;color:var(--teal)!important;display:flex;align-items:center;gap:6px}
@media (max-width:900px){.sandCols{grid-template-columns:1fr}.sandBuild{overflow:visible}.sandNums,.sandStats{grid-template-columns:repeat(3,minmax(0,1fr))}.sandCompare{grid-template-columns:1fr 1fr}}
#zoneContainer .worldDock>button[hidden]{display:none!important}
#zoneContainer .worldDock>#decorDock{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
#zoneContainer .worldDock>#decorDock.on{animation:erPulse 1.4s infinite}

/* ------------------------------------------------------------------------------------------------
   THE STORIED HALL · furnishing bar
------------------------------------------------------------------------------------------------ */
#buildBar{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:40;width:min(940px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:4px 6px 6px;border:16px solid transparent;border-image:var(--frame) 8 fill/16px/0 stretch;color:var(--ivory);font-family:var(--pixel);box-shadow:0 18px 50px #000a;animation:erRiseBar .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes erRiseBar{from{transform:translate(-50%,30px);opacity:0}}
body.building #gameScreen .gameBottom{opacity:.15;pointer-events:none}
.buildHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.buildHead>div:first-child{display:flex;flex-direction:column;line-height:1.15;min-width:190px}
.buildHead small{font-size:9px!important;color:var(--gold)!important;letter-spacing:1.5px!important;display:flex;gap:5px;align-items:center}
.buildHead small .erGlyph{width:11px;height:11px}
.buildHead b{font:22px var(--gothic);font-weight:400;letter-spacing:1px;color:var(--ivory);text-shadow:2px 2px 0 var(--ink)}
.buildHead span{font-size:10px;color:var(--muted)}
.buildTabs,.buildCats{display:flex;gap:3px;flex-wrap:wrap}
#buildBar .buildTabs button,#buildBar .buildCats button{border-image:var(--frame-slot) 8 fill/6px/0 stretch!important;border-width:6px!important;padding:1px 9px!important;font-size:13px!important;color:var(--ivory2)!important}
#buildBar .buildCats button{font-size:11px!important;padding:0 7px!important}
#buildBar .buildTabs button.on,#buildBar .buildCats button.on{border-image:var(--frame-hot) 8 fill/6px/0 stretch!important;color:var(--gold)!important}
#buildBar #buildDone{margin-left:auto;font-size:14px!important;padding:2px 12px!important}
.buildGrid{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scrollbar-color:var(--slate2) transparent;min-height:132px}
#buildBar .decorCard{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 4px 5px!important;border-image:var(--frame-slot) 8 fill/6px/0 stretch!important;border-width:6px!important;text-align:center;color:var(--ivory)!important;position:relative}
#buildBar .decorCard:before{content:"";position:absolute;inset:-6px -6px auto;height:3px;background:var(--r)}
#buildBar .decorCard.on{border-image:var(--frame-hot) 8 fill/6px/0 stretch!important}
#buildBar .decorCard.locked{opacity:.6;cursor:help}
#buildBar .decorCard.r4{box-shadow:0 0 14px color-mix(in srgb,var(--r) 30%,transparent)}
.decorThumb{width:100px;height:66px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 85%,#435078 0,#262a46 45%,#171327 75%);box-shadow:inset 0 0 0 1px var(--slate)}
.decorThumb img{max-width:96px;max-height:62px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0008)}
.decorThumb img[src=""]{visibility:hidden}
#buildBar .decorCard b{font:11px var(--pixel);font-weight:400;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#buildBar .decorCard small{font-size:8px!important;color:var(--r)!important}
#buildBar .decorCard em{font:11px var(--pixel);font-style:normal;color:var(--gold)}
.decorEmpty{font:12px Manrope,sans-serif!important;color:var(--muted)!important;padding:30px 12px;margin:0!important}
.buildHint{margin:0!important;font:11px var(--pixel)!important;color:var(--ivory2)!important;text-align:center}
.buildHint b{color:var(--gold);font-weight:400}
.buildHint em{font-style:normal}
.buildHint em.ok{color:var(--moss)}
.buildHint em.bad{color:var(--rose)}
.buildHint kbd{font-size:10px!important;padding:0 4px;box-shadow:inset 0 0 0 1px var(--slate2)}

/* ---------------------------------------------------------------- v0.62.1 · the party roster (up to fifty) */
#partyMembers{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px;max-height:min(46vh,380px);overflow:auto;padding:2px 4px 2px 0;margin:4px 0 10px;scrollbar-width:thin;scrollbar-color:var(--gold,#ecc25a) transparent}
#partyMembers .partyCount{grid-column:1/-1;font:10px var(--pixel,monospace);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:2px 0 4px}
#partyMembers .partyCount b{color:var(--gold,#ecc25a);font-size:13px}
#partyMembers .partyMember{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 8px;border:1px solid #ffffff14;border-left:3px solid var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%),#0e0b17cc;font-size:12px;border-bottom:1px solid #ffffff14}
#partyMembers .partyMember.lead{border-color:#ecc25a66;border-left-color:var(--gold,#ecc25a)}
#partyMembers .partyIcon{grid-row:1/3;width:30px;height:36px}
#partyMembers .partyMember strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#partyMembers .partyMember strong small{color:var(--muted);font-size:10px}
#partyMembers .partyMember span{font-size:9px;letter-spacing:.06em;color:var(--c)}
#partyMembers .partyMember.lead span{color:var(--gold,#ecc25a)}

/* ---------------------------------------------------------------- v0.62.1 · big raids */
.raidSeatsBar{position:relative;display:inline-flex;align-items:center;width:110px;height:12px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate3)}
.raidSeatsBar i{position:absolute;left:1px;top:1px;bottom:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));box-shadow:0 0 6px var(--accent)}
.raidSeatsBar b{position:relative;width:100%;text-align:center;font:9px/12px var(--pixel);color:var(--ivory);text-shadow:1px 1px 0 var(--ink)}
#modalBody .erSeg.sm button{padding:2px 8px!important;font-size:12px!important}
#modalBody .erSection h4 #raidFill{margin-left:auto;padding:2px 10px!important;font-size:12px!important}
#modalBody .erSection h4:has(#raidFill){display:flex;align-items:center;gap:8px}
.raidComp{display:flex;height:12px;gap:2px;margin:2px 0 6px}
.raidComp i{background:var(--c);box-shadow:inset 0 0 0 1px #ffffff30,0 0 6px color-mix(in srgb,var(--c) 50%,transparent);min-width:4px}
.raidComp i.open{background:repeating-linear-gradient(135deg,#ffffff10 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--slate3)}
.raidCompKey{display:flex;flex-wrap:wrap;gap:4px 12px;font:11px var(--pixel);color:var(--ivory2);margin-bottom:8px}
.raidCompKey span{display:inline-flex;align-items:center;gap:4px}
.raidCompKey span b{color:var(--c,var(--gold))}
.raidCompKey span.open{color:var(--muted)}
.raidCompKey .erSprite{width:16px;height:19px}
.raidRosterStats{display:flex;gap:16px;font:10px var(--pixel);letter-spacing:.06em;color:var(--muted);margin:0 0 8px;text-transform:uppercase}
.raidRosterStats b{color:var(--gold);font-size:12px;margin-left:4px}
.raidRoster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px;max-height:330px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--slate3) transparent}
.raidMember{position:relative;display:flex;align-items:center;gap:6px;padding:4px 6px;min-height:40px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 75%),#0e0b17cc;box-shadow:inset 0 0 0 1px #ffffff12,inset 3px 0 0 var(--c)}
.raidMember.lead{box-shadow:inset 0 0 0 1px #ecc25a55,inset 3px 0 0 var(--gold)}
.raidMember .erSprite{width:26px;height:31px}
.raidMember>span:not(.raidMemberActs){display:flex;flex-direction:column;min-width:0;line-height:1.15}
.raidMember>span b{font:12px var(--pixel);color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raidMember>span small{font:9px var(--pixel);color:var(--muted)}
.raidMember>em{margin-left:auto;font-style:normal;color:var(--gold);display:flex}
.raidMemberActs{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:none;gap:2px;background:#0e0b17ee;padding:2px}
.raidMember:hover .raidMemberActs,.raidMember:focus-within .raidMemberActs{display:flex}
#modalBody .raidMemberActs button{padding:1px 5px!important;font-size:11px!important;min-height:0}
.raidMember.vacantSeats{--c:var(--slate3);background:repeating-linear-gradient(135deg,#ffffff06 0 6px,transparent 6px 12px),#0e0b1788;color:var(--muted)}
.raidMember.vacantSeats>i{width:26px;display:grid;place-items:center;color:var(--slate3)}
.raidMember.vacantSeats>span b{color:var(--ivory2)}
.raidApplTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:-2px 0 8px}
.raidApplClasses{display:flex;flex-wrap:wrap;gap:3px}
#modalBody .raidApplClasses button{display:inline-flex;align-items:center;gap:3px;padding:1px 7px!important;font:11px var(--pixel)!important;min-height:26px;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important}
#modalBody .raidApplClasses button.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
#modalBody .raidApplClasses button b{color:var(--c,var(--gold))}
.raidApplClasses .erSprite{width:16px;height:19px}
.raidSizeQuick{margin-top:6px}
#raidCall .raidCallTally{display:flex;gap:14px;font:11px var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px}
#raidCall .raidCallTally b{font-size:15px;color:var(--ivory);margin-right:3px}
#raidCall .raidCallTally .ok b{color:var(--moss)}
#raidCall .raidCallTally .no b{color:var(--rose)}
.raidCallParty.many{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:3px;max-height:150px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.raidCallParty.many li{gap:4px;font-size:10px;padding:1px 3px;background:#0e0b1799;box-shadow:inset 2px 0 0 var(--slate3)}
.raidCallParty.many li.ok{box-shadow:inset 2px 0 0 var(--moss)}
.raidCallParty.many li.no{box-shadow:inset 2px 0 0 var(--rose);opacity:.6}
.raidCallParty.many li .erSprite{width:16px;height:19px}
.raidCallParty.many li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raidCallParty.many li em{display:none}
#dpsMeter.expanded ol{max-height:min(46vh,420px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--slate3) transparent;padding-right:2px}
#dpsMeter .dpsMore{display:block;width:100%;margin-top:4px;padding:1px 6px!important;min-height:0!important;font:10px var(--pixel)!important;letter-spacing:.06em;color:var(--muted)!important;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;text-align:center}
#dpsMeter .dpsMore:hover{color:var(--gold)!important}

/* ---------------------------------------------------------------- v0.62.1 · phones */
@media (max-width:600px){
 #modalBody .erTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px 2px}
 #modalBody .erTabs::-webkit-scrollbar{display:none}
 #modalBody .erTabs button{width:auto!important;flex:none;padding:4px 10px!important;font-size:13px!important}
 #modalBody .erSeg{display:flex;width:100%}
 #modalBody .erSeg button{flex:1;width:auto!important;min-width:0;padding:4px 6px!important;font-size:12px!important;white-space:nowrap}
 .erHeadSide{width:100%;display:flex;gap:6px;flex-wrap:wrap}
 .ledSearch{flex:1;min-width:0}
 #modalBody .ledSearch input{width:100%;min-width:0}
 #modalBody .erHeadSide>button{width:auto!important}
 .ledTiles,.ledTiles.small{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ledTile b{font-size:24px}
 .sandClasses{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sandSlots{grid-template-columns:1fr!important}
 #modalBody .sandQuick button{width:auto!important;font-size:12px!important;padding:2px 4px!important}
 .sandFoot{position:static!important;flex-wrap:wrap}
 .sandRow{flex-direction:column;align-items:stretch}
 .sandCols{overflow:auto;padding-right:4px}
 .sandStage{overflow:visible}
 .ledProfileName h2{font-size:30px}
 .raidForm{grid-template-columns:1fr!important}
 .raidRoster{grid-template-columns:repeat(2,minmax(0,1fr))}
 .raidCompKey{font-size:10px}
 #partyMembers{grid-template-columns:1fr 1fr}
}
.buildHint{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.buildActs{display:inline-flex;gap:4px}
#buildBar .buildActs button{padding:1px 10px!important;min-height:26px;font-size:13px!important;border-image:var(--frame-slot) 8 fill/6px/0 stretch!important;border-width:6px!important;color:var(--ivory)!important}
#buildBar .buildActs button:hover{border-image:var(--frame-hot) 8 fill/6px/0 stretch!important;color:var(--gold)!important}
@media (pointer:coarse){.buildHelp kbd{display:none}}
/* v0.63 · What kills us: ranked, with a share bar */
.ledKillers li{position:relative;align-items:center;isolation:isolate}
.ledKillers li::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:linear-gradient(90deg,#a3304a40,#a3304a10);z-index:-1;transition:width .5s ease}
.ledKillers li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledKillers .ledKRank{color:var(--muted);width:14px;text-align:center;flex:none}
.ledKillers li:first-child{box-shadow:inset 2px 0 0 #e0566e}
.ledKillers li:first-child b{color:#ffd9de}
.ledKillers li.ledKUnknown{background:none;box-shadow:inset 2px 0 0 #4b4e6a;opacity:.75}
.ledKillers li.ledKUnknown span{color:var(--muted)}
.raidKeys{flex-wrap:wrap;justify-content:flex-end;max-width:380px}
/* v0.63 · tier numerals on shared item icons */
.erTier{position:absolute;top:1px;right:1px;width:11px;height:11px;display:grid;place-items:center;background:#0b1820e8;border:1px solid color-mix(in srgb,var(--tierInk) 55%,#0b1820);color:var(--tierInk);pointer-events:none;font-style:normal}
.erTier svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:butt;shape-rendering:crispEdges}
.erTier,.erTier.g1,.erTier.g2,.erTier.g3,.erTier.g4,.erTier.g5{--tierInk:#b8c0c4}/* v0.71 · one ink for every tier */

/* ------------------------------------------------------------------------------------------------
   v0.63 · THE EXCHANGE (trading)
------------------------------------------------------------------------------------------------ */
.erTrade{gap:14px}
.trdHub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:start}
.trdReq{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;background:linear-gradient(90deg,#ecc25a14,transparent);box-shadow:inset 2px 0 0 var(--gold),inset 0 0 0 1px var(--slate)}
.trdReq .erSprite{width:26px;height:32px}
.trdReq span{flex:1;display:flex;flex-direction:column;min-width:0}
.trdReq b{font:14px var(--pixel);font-weight:400;color:var(--ivory)}
.trdReq small{font:10px var(--pixel);color:var(--muted)}
.trdReq button{font-size:13px!important;padding:3px 10px!important}
.trdAsk{display:flex;gap:6px;margin-bottom:6px}
.trdAsk input{flex:1}
.trdAsk button{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.trdErr{margin:4px 0 0;padding:6px 10px;background:#4a132840;box-shadow:inset 2px 0 0 var(--rose);color:#ffd5d8;font:11px var(--pixel)}
.trdWaiting{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;background:#79d3c214;box-shadow:inset 0 0 0 1px #79d3c255;font:12px var(--pixel)}
.trdWaiting span:nth-child(2){flex:1}
.trdWaiting b{font-weight:400;color:var(--teal)}
.trdPulse{width:8px;height:8px;background:var(--teal);box-shadow:0 0 0 0 #79d3c2aa;animation:trdPulse 1.4s infinite}
@keyframes trdPulse{0%{box-shadow:0 0 0 0 #79d3c2aa}70%{box-shadow:0 0 0 8px #79d3c200}100%{box-shadow:0 0 0 0 #79d3c200}}
.trdNear{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.trdNear button{display:flex!important;align-items:center;gap:8px;text-align:left;padding:6px 8px!important}
.trdNear .erSprite{width:24px;height:30px;flex:none}
.trdNear span{flex:1;display:flex;flex-direction:column;min-width:0}
.trdNear b{font:13px var(--pixel);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.trdNear small{font:9px var(--pixel);color:var(--muted)}
.trdNear em{color:var(--gold);opacity:.6}
.trdNear button:hover em{opacity:1}
.trdSub{margin-top:14px!important}
.trdFoot{margin:0;font:11px var(--pixel);color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trdFoot .erGlyph{color:var(--rose)}
.trdOath{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 20px;color:var(--muted);font:12px Manrope,sans-serif;max-width:620px;margin:0 auto;line-height:1.6}
.trdOath b{font:20px var(--gothic);color:var(--ivory)}
.trdOath .erGlyph.huge{color:#a3304a}

.trdTable{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:0;align-items:stretch}
.trdSide{padding:12px 14px;background:linear-gradient(180deg,#1b1630cc,#120f1fcc);box-shadow:inset 0 0 0 1px var(--slate),inset 0 1px 0 #ffffff08;display:flex;flex-direction:column;gap:10px;transition:box-shadow .25s}
.trdSide.sealed{box-shadow:inset 0 0 0 1px #ecc25a99,inset 0 0 22px #ecc25a1c,0 0 0 1px #0e0b17}
.trdSide .trdHead{display:flex;align-items:center;gap:10px}
.trdSide .trdHead .erSprite{width:30px;height:36px;flex:none}
.trdSide .trdHead>span:not(.trdState){flex:1;display:flex;flex-direction:column;min-width:0}
.trdSide .trdHead b{font:16px var(--pixel);font-weight:400;color:var(--ivory)}
.trdSide .trdHead small{font:10px var(--pixel);color:var(--muted)}
.trdState{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font:10px var(--pixel);letter-spacing:1px;text-transform:uppercase;color:var(--muted);box-shadow:inset 0 0 0 1px var(--slate2)}
.trdState.sealed{color:var(--gold);box-shadow:inset 0 0 0 1px #ecc25a88;background:#ecc25a12}
.trdState.ok{color:#9ad7ae;box-shadow:inset 0 0 0 1px #9ad7ae88;background:#9ad7ae14}
.trdGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#modalBody .trdCell{position:relative;aspect-ratio:1;display:grid!important;place-items:center;padding:0!important;min-width:0;background:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--slate2)!important;border:0!important}
#modalBody .trdCell.vacant{background:repeating-linear-gradient(135deg,#ffffff05 0 4px,transparent 4px 8px),var(--ink);box-shadow:inset 0 0 0 1px var(--slate)}
#modalBody .trdCell .erItem{--s:44px}
#modalBody .trdCell small{position:absolute;left:0;right:0;bottom:1px;font:7px var(--pixel)!important;letter-spacing:1px;color:var(--muted);text-align:center;opacity:0;transition:opacity .15s}
#modalBody .trdCell:hover small{opacity:1}
#modalBody .trdCell:hover{box-shadow:inset 0 0 0 1px var(--rose)!important}
.trdSide.theirs .trdCell{cursor:default}
.trdGold{display:flex;align-items:center;gap:8px;font:12px var(--pixel);color:var(--gold)}
.trdGold>span{color:var(--ivory2)}
.trdGold input{width:120px!important;flex:none;font:14px var(--pixel)!important;padding:5px 8px!important}
.trdGold small{color:var(--muted);font-size:10px}
.trdGold.theirs b{font:16px var(--pixel);font-weight:400;color:var(--gold)}
.trdSeam{display:grid;place-items:center;position:relative}
.trdSeam::before{content:'';position:absolute;top:8px;bottom:8px;left:50%;width:1px;background:linear-gradient(180deg,transparent,var(--gold2),transparent)}
.trdSeam span{position:relative;width:32px;height:32px;display:grid;place-items:center;background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold2),0 0 14px #ecc25a33;color:var(--gold)}
.trdSeam span .erGlyph{width:18px;height:18px}
.trdOathDot{position:absolute;left:4px;bottom:4px;width:7px;height:7px;background:#a3304a;box-shadow:0 0 0 1px #ffb3c0,0 0 6px #e0566e;transform:rotate(45deg);pointer-events:none}
.trdBar{display:grid;grid-template-columns:auto minmax(220px,1fr);grid-template-areas:'seal confirm' 'hint hint';gap:8px 10px;align-items:center}
.trdBar.center{display:flex;justify-content:center;gap:10px}
#trdSeal{grid-area:seal;display:flex;align-items:center;gap:6px}
.trdConfirmWrap{grid-area:confirm}
.trdConfirm{position:relative;width:100%;overflow:hidden;font-size:17px!important;padding:8px 14px!important}
.trdConfirm i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#ecc25a33,#ecc25a66);pointer-events:none;transition:width .25s linear}
.trdConfirm span{position:relative}
.trdConfirm:disabled{opacity:.55}
.trdHint{grid-area:hint;margin:0;font:11px var(--pixel);color:var(--muted);text-align:center}
.trdPick{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:linear-gradient(180deg,#141127cc,#0e0b17cc);box-shadow:inset 0 0 0 1px var(--slate);transition:opacity .2s}
.trdPick.off{opacity:.45;pointer-events:none}
.trdPickBar{display:flex;gap:10px;align-items:center}
.trdPickBar input{flex:1}
.trdPickBar small{color:var(--muted);font-size:10px!important;margin-left:4px}
.trdPool{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px;max-height:210px;overflow:auto;padding:2px}
#modalBody .trdPoolItem{position:relative;display:grid!important;place-items:center;padding:2px!important;background:var(--ink)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--slate2)!important;transition:transform .12s}
#modalBody .trdPoolItem:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--rarity)!important}
#modalBody .trdPoolItem.on{opacity:.4;box-shadow:inset 0 0 0 1px var(--gold)!important}
.trdTick{position:absolute;right:2px;bottom:2px;color:var(--gold)}
.trdTick .erGlyph{width:12px;height:12px}
.trdDone{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:stretch}
.trdDoneRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:56px}
.trdDoneGold{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;color:var(--gold);box-shadow:inset 0 0 0 1px #ecc25a66;font:16px var(--pixel)}
.trdDoneGold b{font-weight:400}
.trdSeam.done span{color:#ffb3c0;box-shadow:inset 0 0 0 1px #a3304a,0 0 16px #e0566e55;animation:erPulse 2s infinite}
.trdDone .erSection{animation:erDrop .35s ease-out both}
.trdDone .erSection:last-child{animation-delay:.12s}

#tradeCall{position:fixed;right:18px;bottom:96px;z-index:118;animation:trdIn .35s cubic-bezier(.2,1.3,.4,1)}
#tradeCall[hidden]{display:none}
@keyframes trdIn{from{transform:translateY(16px);opacity:0}}
.trdCallCard{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'s t' 'a a';gap:8px 12px;width:min(360px,calc(100vw - 32px));padding:12px 14px 14px;color:var(--ivory);border:16px solid transparent;border-image:var(--frame-hot) 8 fill/16px/0 stretch;box-shadow:0 18px 50px #000b;font-family:var(--pixel)}
.trdCallSprite{grid-area:s;width:40px;height:48px;display:grid;place-items:center;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2)}
.trdCallSprite .erSprite{width:34px;height:42px}
.trdCallText{grid-area:t;display:flex;flex-direction:column;gap:3px;min-width:0}
.trdCallText b{font:15px var(--pixel);font-weight:400}
.trdCallText b span{color:var(--gold)}
.trdCallText small{font:10px var(--pixel);color:var(--muted)}
.trdCallActions{grid-area:a;display:flex;gap:8px}
.trdCallActions button{flex:1;font-size:14px!important;display:flex;align-items:center;justify-content:center;gap:6px}
.trdCallActions .primary{animation:erPulse 1.2s infinite}
.trdCallTime{position:absolute;left:0;right:0;bottom:-4px;height:3px;background:#0e0b17;display:block}
.trdCallTime i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .25s linear}
@media (max-width:760px){
 .trdHub{grid-template-columns:1fr}
 .trdTable,.trdDone{grid-template-columns:1fr}
 .trdSeam{height:40px}
 .trdSeam::before{top:50%;bottom:auto;left:8px;right:8px;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
 .trdBar{grid-template-columns:1fr;grid-template-areas:'seal' 'confirm' 'hint'}
 #tradeCall{right:8px;left:8px;bottom:80px}
}

/* ------------------------------------------------------------------------------------------------
   v0.63 · THE ADVENTURER'S CARD (Ledger profile)
------------------------------------------------------------------------------------------------ */
.ledCard{--acc:#ecc25a;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'niche text gif' 'niche actions gif';gap:6px 22px;align-items:center;padding:22px 24px;min-height:196px;
 background:radial-gradient(ellipse 70% 120% at 18% 110%,color-mix(in srgb,var(--bc) 22%,transparent),transparent 60%),radial-gradient(ellipse 60% 90% at 92% -10%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 65%),linear-gradient(135deg,var(--ba),var(--bb) 72%);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,#0e0b17),inset 0 0 0 3px #0e0b17,inset 0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent),0 10px 30px #0008;animation:erDrop .35s ease-out}
.ledCard::before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#00000014 0 1px,transparent 1px 4px);mix-blend-mode:overlay;pointer-events:none}
.ledCard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;background:linear-gradient(180deg,transparent,#0e0b17b0);pointer-events:none}
/* drifting motes, painted by motif */
.ledCardSky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ledCardSky i{position:absolute;bottom:-12px;width:4px;height:4px;background:var(--bc);opacity:0;box-shadow:0 0 6px var(--bc);animation:ledMote 9s linear infinite}
.ledCardSky i:nth-child(1){left:6%;animation-delay:0s}.ledCardSky i:nth-child(2){left:14%;animation-delay:-2.2s;animation-duration:11s}.ledCardSky i:nth-child(3){left:23%;animation-delay:-5s}.ledCardSky i:nth-child(4){left:31%;animation-delay:-7.4s;animation-duration:12s}
.ledCardSky i:nth-child(5){left:42%;animation-delay:-1.1s;animation-duration:10s}.ledCardSky i:nth-child(6){left:51%;animation-delay:-3.6s}.ledCardSky i:nth-child(7){left:60%;animation-delay:-6.3s;animation-duration:13s}.ledCardSky i:nth-child(8){left:68%;animation-delay:-8.1s}
.ledCardSky i:nth-child(9){left:76%;animation-delay:-4.4s;animation-duration:10.5s}.ledCardSky i:nth-child(10){left:84%;animation-delay:-0.6s}.ledCardSky i:nth-child(11){left:91%;animation-delay:-2.9s;animation-duration:12.5s}.ledCardSky i:nth-child(12){left:97%;animation-delay:-5.7s}
@keyframes ledMote{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}70%{opacity:.5}100%{transform:translate(18px,-230px);opacity:0}}
.m-stars .ledCardSky i{width:2px;height:2px;bottom:auto;top:calc(var(--y,30%));animation:ledTwinkle 3.4s ease-in-out infinite}
.m-stars .ledCardSky i:nth-child(odd){--y:18%}.m-stars .ledCardSky i:nth-child(3n){--y:46%}.m-stars .ledCardSky i:nth-child(4n){--y:70%}.m-stars .ledCardSky i:nth-child(5n){--y:9%}
@keyframes ledTwinkle{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:1;transform:scale(1.8)}}
.m-leaves .ledCardSky i,.m-petals .ledCardSky i{width:5px;height:3px;border-radius:0 3px;bottom:auto;top:-10px;animation-name:ledFall}
@keyframes ledFall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(-40px,240px) rotate(300deg);opacity:0}}
.m-bubbles .ledCardSky i{width:5px;height:5px;background:transparent;border:1px solid var(--bc);border-radius:50%;box-shadow:none}
.m-ash .ledCardSky i{background:#d8c6cc;box-shadow:none;width:3px;height:3px}
.m-motes .ledCardSky i{width:3px;height:3px;animation-duration:14s}
@media (prefers-reduced-motion:reduce){.ledCardSky i{animation:none;opacity:.4}}

.ledCardNiche{grid-area:niche;position:relative;width:132px;height:160px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 62%),linear-gradient(180deg,#0e0b1799,#0e0b17dd);
 clip-path:polygon(0 18%,18% 0,82% 0,100% 18%,100% 100%,0 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 50%,transparent)}
.ledCardNiche::before{content:'';position:absolute;inset:3px;clip-path:polygon(0 18%,18% 0,82% 0,100% 18%,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #ffffff12;pointer-events:none}
.ledCardPortrait{width:112px!important;height:120px!important;margin-top:-6px!important}
.ledCardNiche small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:9px var(--pixel)!important;letter-spacing:1px;color:var(--ivory2)!important}
.ledCardSigil{position:absolute;top:8px;right:8px;width:22px;height:22px;display:grid;place-items:center;background:#0e0b17;color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc),0 0 10px color-mix(in srgb,var(--acc) 50%,transparent);transform:rotate(45deg)}
.ledCardSigil .erGlyph{transform:rotate(-45deg);width:13px;height:13px}
.ledCardText{grid-area:text;min-width:0;display:flex;flex-direction:column;gap:6px;align-self:end}
.ledCardRank{font:9px var(--pixel)!important;letter-spacing:1.5px;color:var(--acc)!important}
.ledCardText h3{margin:0;font:46px/1 var(--gothic);letter-spacing:2px;color:var(--ivory);text-shadow:3px 3px 0 #0e0b17,0 0 22px color-mix(in srgb,var(--acc) 35%,transparent);overflow:hidden;text-overflow:ellipsis}
.ledCardTitle{align-self:flex-start;position:relative;padding:3px 16px 3px 12px;font:12px var(--pixel);letter-spacing:2px;text-transform:uppercase;color:#0e0b17;background:var(--acc);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 45%,transparent)}
.ledCardMotto{margin:2px 0 0;padding:0 0 0 12px;border-left:2px solid color-mix(in srgb,var(--acc) 70%,transparent);font:italic 15px/1.45 Georgia,'Times New Roman',serif;color:var(--ivory2);max-width:560px;overflow-wrap:anywhere}
.ledCardHint{margin:0;font:12px Manrope,sans-serif;color:var(--muted)}
.ledCardBadges{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ledCardBanner{font:9px var(--pixel);letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb,var(--bc) 80%,#fff)}
.ledCardActions{grid-area:actions;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ledCardActions button{display:flex;align-items:center;gap:6px}
.ledCardGif{grid-area:gif;position:relative;margin:0;width:200px;height:156px;padding:6px 6px 22px;background:#f2e7c9;transform:rotate(2.2deg);box-shadow:0 10px 24px #000a,0 0 0 1px #0e0b17;transition:transform .25s}
.ledCardGif:hover{transform:rotate(0) scale(1.03)}
.ledCardGif::before{content:'';position:absolute;top:-9px;left:50%;width:54px;height:16px;margin-left:-27px;background:color-mix(in srgb,var(--acc) 55%,#f2e7c9b0);opacity:.85;transform:rotate(-4deg);box-shadow:0 1px 2px #0005}
.ledCardGif img{width:100%;height:100%;object-fit:cover;display:block;background:#0e0b17}
.ledCardGif.contain img{object-fit:contain}
.ledCardGif .ledGifBroken{display:none}
.ledCardGif.broken img{visibility:hidden}
.ledCardGif.broken .ledGifBroken{display:flex;position:absolute;inset:6px 6px 22px;align-items:center;justify-content:center;gap:6px;background:#0e0b17;color:var(--muted);font:10px var(--pixel)}
#modalBody .ledGifFlag{position:absolute;bottom:3px;left:6px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;font:9px var(--pixel)!important;color:#6b5f78!important;min-height:0!important}
#modalBody .ledGifFlag.right{left:auto;right:6px}
#modalBody .ledGifFlag:hover{color:#a3304a!important}
.ledGifNote{position:absolute;left:0;right:0;top:100%;margin-top:6px;font:9px var(--pixel);color:var(--rose);text-align:center;transform:rotate(-2.2deg)}
.ledCardEmblem{grid-area:gif;width:150px;height:150px;display:grid;place-items:center;color:var(--acc);background:radial-gradient(circle,color-mix(in srgb,var(--acc) 16%,transparent),transparent 66%);opacity:.9}
.ledCardEmblem .erGlyph.huge{width:84px;height:84px;color:var(--acc);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--acc) 55%,transparent)) drop-shadow(3px 3px 0 #0e0b17)}
#modalBody button.ledCardEmblem{border:0!important;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,transparent),transparent 66%)!important;box-shadow:none!important;display:flex!important;flex-direction:column;gap:6px;cursor:pointer}
#modalBody button.ledCardEmblem small{font:9px var(--pixel);color:var(--muted)}

.ledShelf{padding:12px 16px 16px;background:linear-gradient(180deg,#141127,#0e0b17);box-shadow:inset 0 0 0 1px var(--slate),inset 0 -2px 0 color-mix(in srgb,var(--acc) 40%,transparent)}
.ledShelfRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ledPlinth{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ledPlinth .erItem{--s:58px;filter:drop-shadow(0 6px 6px #000a);animation:ledFloat 4s ease-in-out infinite}
.ledPlinth:nth-child(2) .erItem{animation-delay:-1s}.ledPlinth:nth-child(3) .erItem{animation-delay:-2s}.ledPlinth:nth-child(4) .erItem{animation-delay:-3s}
@keyframes ledFloat{50%{transform:translateY(-4px)}}
.ledPlinth::after{content:'';order:1;width:70%;height:8px;margin-top:-6px;background:radial-gradient(ellipse,color-mix(in srgb,var(--rarity) 45%,transparent),transparent 70%)}
.ledPlinth figcaption{order:2;display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.ledPlinth b{font:12px var(--pixel);font-weight:400;color:var(--rarity);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledPlinth small{font:9px var(--pixel);color:var(--muted)}

.ledEditor{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;background:linear-gradient(180deg,#1b1630f2,#120f1ff2);box-shadow:inset 0 0 0 1px #ecc25a55,0 0 0 1px #0e0b17;animation:erDrop .25s ease-out}
.ledEdHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--slate)}
.ledEdHead h4{margin:4px 0 2px!important}
.ledEdHead p{margin:0;font:12px Manrope,sans-serif;color:var(--muted)}
.ledEdButtons{display:flex;gap:8px}
.ledEdButtons button{display:flex;align-items:center;gap:6px}
.ledEdGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.ledEdField{display:flex;flex-direction:column;gap:7px;min-width:0}
.ledEdField.wide{grid-column:1/-1}
.ledEdField>label{font:10px var(--pixel);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);display:flex;gap:10px;align-items:baseline}
.ledEdField>label small{font-size:9px;letter-spacing:.5px;text-transform:none;color:var(--muted)}
.ledBanners{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#modalBody .ledBannerPick{position:relative;height:58px;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:6px 8px!important;overflow:hidden;border:0!important;background:radial-gradient(ellipse 80% 120% at 20% 120%,color-mix(in srgb,var(--bc) 30%,transparent),transparent 60%),linear-gradient(135deg,var(--ba),var(--bb))!important;box-shadow:inset 0 0 0 1px #ffffff1a!important;transition:transform .12s}
#modalBody .ledBannerPick span{font:10px var(--pixel);color:var(--ivory);text-shadow:1px 1px 0 #0e0b17}
#modalBody .ledBannerPick:hover{transform:translateY(-2px)}
#modalBody .ledBannerPick.on{box-shadow:inset 0 0 0 2px var(--bc),0 0 12px color-mix(in srgb,var(--bc) 40%,transparent)!important}
#modalBody .ledBannerPick.locked{filter:grayscale(.85) brightness(.6);cursor:not-allowed}
#modalBody .ledBannerPick.locked:hover{transform:none}
#modalBody .ledBannerPick em{position:absolute;top:5px;right:6px;display:flex;gap:4px;align-items:center;font:8px var(--pixel);font-style:normal;color:var(--ivory2)}
#modalBody .ledBannerPick em .erGlyph{width:9px;height:9px}
.ledSwatches{display:flex;gap:6px;flex-wrap:wrap}
#modalBody .ledSwatch{width:26px;height:26px;padding:0!important;border:0!important;background:var(--sw)!important;box-shadow:inset 0 0 0 2px #0e0b17,0 0 0 1px #ffffff22!important;transform:rotate(45deg) scale(.82);transition:transform .12s}
#modalBody .ledSwatch.on{transform:rotate(45deg) scale(1);box-shadow:inset 0 0 0 2px #0e0b17,0 0 0 2px var(--sw),0 0 10px var(--sw)!important}
.ledSigils{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ledSigils button{padding:5px!important;display:grid!important;place-items:center}
.ledSigils button .erGlyph{width:16px;height:16px}
.ledSigils button.on{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)!important}
.ledTitles{display:flex;flex-wrap:wrap;gap:4px;max-height:96px;overflow:auto}
.ledTitles button{font-size:11px!important;padding:3px 8px!important}
.ledTitles button.on,.ledLivesPick button.on,#modalBody .ledShelfPick button.on{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)!important;background:#ecc25a14!important}
.ledLivesPick{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto}
.ledLivesPick button{display:flex!important;align-items:center;gap:8px;text-align:left;padding:4px 8px!important}
.ledLivesPick .erSprite{width:22px;height:26px;flex:none}
.ledLivesPick button>.erGlyph{width:16px;height:16px;margin:0 3px;color:var(--gold)}
.ledLivesPick span{display:flex;flex-direction:column;font:12px var(--pixel)}
.ledLivesPick small{font:9px var(--pixel);color:var(--muted)}
.ledShelfPick{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto;padding:2px}
#modalBody .ledShelfPick button{padding:2px!important;display:grid!important;place-items:center;background:var(--ink)!important}
#modalBody .ledShelfPick button:not(.on){opacity:.75}
#modalBody .ledShelfPick button:hover{opacity:1}
.ledGifRow{display:flex;gap:8px;align-items:center}
.ledGifRow input{flex:1;min-width:0;font:12px ui-monospace,monospace!important}
.ledGifState{font:10px var(--pixel);display:flex;align-items:center;gap:6px}
.ledGifState.ok{color:#9ad7ae}.ledGifState.bad{color:var(--rose)}
@media (max-width:900px){
 .ledCard{grid-template-columns:auto minmax(0,1fr);grid-template-areas:'niche text' 'gif gif' 'actions actions';padding:18px}
 .ledCardGif{justify-self:center;transform:rotate(1deg)}
 .ledCardEmblem{display:none}
 .ledEdGrid{grid-template-columns:1fr}
 .ledBanners{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ledShelfRow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
 .ledCard{grid-template-columns:1fr;grid-template-areas:'niche' 'text' 'gif' 'actions';justify-items:center;text-align:center}
 .ledCardText{align-items:center}
 .ledCardText h3{font-size:34px}
 .ledCardTitle{align-self:center}
}

#modalBody .trdCell,#modalBody .trdPoolItem,#modalBody .ledBannerPick,#modalBody .ledSwatch,#modalBody .ledShelfPick button,#modalBody .ledGifFlag,#modalBody button.ledCardEmblem{border-image:none!important}
#modalBody .ledShelfPick button{border:0!important;box-shadow:inset 0 0 0 1px var(--slate2)!important}
#modalBody .ledShelfPick button.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 8px #ecc25a55!important;opacity:1}
#modalBody #ledGifClear{font-size:13px!important;padding:2px 10px!important}
.trdGrid{grid-template-columns:repeat(6,58px);justify-content:start;gap:6px}
#modalBody .trdCell{width:58px;height:58px;aspect-ratio:auto}
.trdSide.theirs .trdGrid{justify-content:start}
@media (max-width:1100px){.trdGrid{grid-template-columns:repeat(4,58px)}}
.trdState{flex:none;white-space:nowrap}

/* ===================================================================== v0.64 · THE BANNER HALL (clans) */
.modalBox:has(.erShell.erClans){height:min(860px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden!important}
.erClans{--trim:#f39b45;--field:#5a1f1a}
.clanBody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:6px;scrollbar-color:var(--slate2) transparent}
.clanBanner{display:block;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 #0008);flex:none}
.clanBanner.gilt{filter:drop-shadow(2px 3px 0 #0008) drop-shadow(0 0 6px #ecc25a66)}
.clanHeadArt{display:grid;place-items:end center;align-self:stretch;padding:0 6px;position:relative}
.clanHeadArt .clanBanner{animation:clanSway 6s ease-in-out infinite;transform-origin:50% 0}
@keyframes clanSway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.clanHeadArt .clanBanner{animation:none}}
/* the tag chip: field colour, trim border, pixel letters */
.clanTag{display:inline-flex;align-items:center;justify-content:center;font:9px var(--pixel)!important;letter-spacing:1px;color:var(--trim)!important;background:color-mix(in srgb,var(--field) 85%,#000);box-shadow:inset 0 0 0 1px var(--trim),1px 1px 0 var(--ink);padding:2px 5px 1px;margin-left:6px;vertical-align:2px;line-height:1.2;white-space:nowrap}
.clanTag.mini{font-size:7px!important;padding:1px 4px 0;margin-left:5px;vertical-align:1px}
.clanTag.big{font-size:13px!important;padding:3px 8px 2px;margin-left:10px;vertical-align:6px}
.clanTag.plate{margin:0 5px 0 0;font-size:8px!important}
.clanTag.gilt{--trim:#ecc25a;--field:#3a2a10;box-shadow:inset 0 0 0 1px #fde89a,0 0 6px #ecc25a77,1px 1px 0 var(--ink);color:#fde89a!important}
/* header inside a clan */
.clanHeadIn{align-items:stretch;justify-content:flex-start;gap:16px;background:linear-gradient(100deg,color-mix(in srgb,var(--field) 55%,transparent),transparent 62%);margin:-4px 0 0;padding:6px 34px 12px 4px;position:relative}
.clanHeadIn::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--trim),transparent 70%)}
.clanHeadText{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.clanHeadText h2{display:flex;align-items:center;flex-wrap:wrap}
.clanHeadText q,.clanCard q,.clanPreview q{font:italic 12px Manrope,sans-serif;color:var(--ivory2);quotes:'“' '”';opacity:.9}
.clanRenown{display:flex;align-items:center;gap:12px;margin-top:8px;max-width:640px}
.clanRenown>div{flex:1;display:flex;flex-direction:column;gap:4px}
.clanRenown small{font:9px var(--pixel)!important;color:var(--muted)!important;letter-spacing:.5px}
.clanRenown small b{color:var(--gold);font-weight:400}
.clanLvBig{font:28px var(--gothic);color:var(--gold);text-shadow:2px 2px 0 var(--ink),0 0 12px #ecc25a44;min-width:46px;text-align:center;padding:2px 6px;background:#0e0b1799;box-shadow:inset 0 0 0 1px var(--gold3)}
.clanCount{display:flex;flex-direction:column;align-items:center;font:9px var(--pixel);color:var(--muted)}
.clanCount span{font:11px var(--pixel);color:var(--muted)}
.clanCount b{font:22px var(--gothic);color:var(--ivory);font-weight:400}
.clanBar{height:10px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2);position:relative;overflow:hidden}
.clanBar i{position:absolute;inset:1px auto 1px 1px;max-width:calc(100% - 2px);background:repeating-linear-gradient(90deg,var(--trim) 0 6px,color-mix(in srgb,var(--trim) 62%,var(--ink)) 6px 7px);box-shadow:0 0 8px color-mix(in srgb,var(--trim) 50%,transparent);transition:width .5s steps(12)}
.clanBar.big{height:18px}
.clanBar.big span{position:absolute;inset:0;display:grid;place-items:center;font:9px var(--pixel);color:#fffaea;text-shadow:1px 1px 0 var(--ink),-1px 0 0 var(--ink),0 -1px 0 var(--ink),1px 0 0 var(--ink)}
/* the hall: what the banner lends, and the ten perks */
.clanHall{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:12px;align-items:start}
.clanHall h4,.clanReqs h4{margin:0 0 10px}
.clanBoons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.clanBoons span{font:10px var(--pixel);color:var(--gold);padding:5px 8px;background:#2a1f0e;box-shadow:inset 0 0 0 1px var(--gold3)}
.clanMine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.clanMine>div{padding:8px 10px;background:#0e0b1799;box-shadow:inset 0 0 0 1px var(--slate);display:flex;flex-direction:column}
.clanMine small{font:8px var(--pixel)!important;letter-spacing:1px;color:var(--muted)!important;text-transform:uppercase}
.clanMine b{font:20px var(--gothic);color:var(--ivory);font-weight:400}
.clanHow,.clanMuted,.clanLead{font:11px Manrope,sans-serif!important;color:var(--muted)!important;line-height:1.5;margin:10px 0 0}
.clanLead{margin:0;color:var(--ivory2)!important}
.clanHow .erGlyph,.clanLead .erGlyph{color:var(--gold)}
.clanPerkGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.clanPerk{display:grid;grid-template-columns:26px 18px 1fr auto;align-items:center;gap:8px;padding:7px 9px;background:#0e0b1766;box-shadow:inset 0 0 0 1px var(--slate);color:var(--slate3);position:relative}
.clanPerk div{display:flex;flex-direction:column;min-width:0}
.clanPerk b{font:11px var(--pixel);font-weight:400;color:var(--muted)}
.clanPerk small{font:10px Manrope,sans-serif!important;color:#6c7590!important;line-height:1.35}
.clanPerk em{font:8px var(--pixel);font-style:normal;color:var(--slate3);white-space:nowrap}
.clanPerkLv{font:12px var(--gothic);color:var(--slate3);text-align:center}
.clanPerk.on{background:linear-gradient(100deg,color-mix(in srgb,var(--field) 70%,transparent),#0e0b1766);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trim) 55%,var(--slate));color:var(--trim)}
.clanPerk.on b{color:var(--ivory)}.clanPerk.on small{color:var(--ivory2)!important}.clanPerk.on .clanPerkLv{color:var(--gold)}
.clanPerk.next{box-shadow:inset 0 0 0 1px var(--gold3)}
.clanPerk.next em{color:var(--gold2)}
/* writs */
.clanWrits{display:flex;flex-direction:column;gap:12px}
.clanWritGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clanWrit{--wc:var(--teal);display:flex;flex-direction:column;gap:10px;padding:14px;background:linear-gradient(180deg,#1b1630,#120f1f);box-shadow:inset 0 0 0 1px var(--slate),inset 0 3px 0 var(--wc);position:relative}
.clanWrit.t1{--wc:var(--rose)}.clanWrit.t2{--wc:var(--violet)}
.clanWritHead{display:flex;flex-direction:column;gap:2px;padding-right:34px}
.clanWritHead small{font:8px var(--pixel)!important;letter-spacing:1.5px;color:var(--wc)!important;text-transform:uppercase}
.clanWritHead b{font:20px var(--gothic);font-weight:400;color:var(--ivory);letter-spacing:.5px}
.clanWrit p{font:12px Manrope,sans-serif;color:var(--ivory2);margin:0;min-height:34px;line-height:1.45}
.clanWrit .clanBar i{background:repeating-linear-gradient(90deg,var(--wc) 0 6px,color-mix(in srgb,var(--wc) 60%,var(--ink)) 6px 7px);box-shadow:0 0 8px color-mix(in srgb,var(--wc) 45%,transparent)}
.clanWritFoot{display:flex;flex-wrap:wrap;gap:6px 12px;font:9px var(--pixel);color:var(--muted)}
.clanWritFoot span{display:inline-flex;align-items:center;gap:4px}
.clanWritFoot .erGlyph{color:var(--gold)}
.clanWritFoot .mine{color:var(--teal)}.clanWritFoot .mine .erGlyph{color:var(--teal)}
.clanWrit.done{box-shadow:inset 0 0 0 1px var(--gold3),inset 0 3px 0 var(--gold);background:linear-gradient(180deg,#2a1f0e,#140f12)}
.clanWax{position:absolute;right:12px;top:12px;color:#c4472c;filter:drop-shadow(1px 1px 0 var(--ink)) drop-shadow(0 0 6px #d8692a66);transform:rotate(-12deg)}
.clanWax .erGlyph{width:30px;height:30px}
.clanWrit button.big{margin-top:auto}
.clanSealed{margin-top:auto;font:9px var(--pixel);color:var(--gold);display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0e0b1799;box-shadow:inset 0 0 0 1px var(--gold3)}
/* roster */
.clanMembers{display:flex;flex-direction:column;gap:10px}
.clanInvite{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0e0b1799;box-shadow:inset 0 0 0 1px var(--slate)}
.clanInvite .erGlyph{color:var(--gold)}
.clanInvite input{flex:1;max-width:320px;padding:6px 10px!important}
.clanInvite small{margin-left:auto;font:9px var(--pixel)!important;color:var(--muted)!important}
.clanRoster{display:flex;flex-direction:column;gap:3px}
.clanMember,.clanReq{display:grid;grid-template-columns:30px minmax(120px,1.5fr) 104px repeat(3,70px) 64px minmax(0,1.2fr);align-items:center;gap:10px;padding:4px 10px;background:#0e0b1780;box-shadow:inset 0 0 0 1px var(--slate)}
.clanMember.me{box-shadow:inset 0 0 0 1px var(--gold3);background:#2a1f0e55}
.clanMember.role-chief{background:linear-gradient(90deg,color-mix(in srgb,var(--field) 55%,transparent),#0e0b1780 50%)}
.clanWho{display:flex;flex-direction:column;min-width:0}
.clanWho b{font:12px var(--pixel);font-weight:400;color:var(--ivory);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clanWho b:hover{color:var(--gold)}
.clanWho small{font:9px var(--pixel)!important;color:var(--muted)!important}
.clanWho q{font:italic 11px Manrope,sans-serif;color:var(--ivory2);margin-top:3px}
.clanRole{font:9px var(--pixel);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.clanRole.r-chief{color:var(--gold)}.clanRole.r-officer{color:var(--trim)}
.clanNum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.clanNum b{font:14px var(--gothic);color:var(--ivory);font-weight:400}
.clanNum small{font:7px var(--pixel)!important;color:var(--muted)!important;letter-spacing:1px;text-transform:uppercase}
.clanSeen{font:9px var(--pixel);color:var(--slate3);text-align:right}
.clanActs,.clanBtns{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.clanActs{flex-wrap:nowrap}
.erClans button.textBtn{border:0;background:#120f1f;box-shadow:inset 0 0 0 1px var(--slate2);padding:5px 9px;font:9px var(--pixel);min-width:0;width:auto;height:auto;color:var(--ivory2);white-space:nowrap;cursor:pointer;border-radius:0}
.erClans button.textBtn:disabled{opacity:.45;cursor:default}
.erClans button.textBtn:not(.clanSwatch):hover{box-shadow:inset 0 0 0 1px var(--gold3);color:var(--gold)}
.erClans button.textBtn.primary{background:#2a1f0e;box-shadow:inset 0 0 0 1px var(--gold3),0 0 8px #ecc25a22;color:var(--gold);padding:6px 12px}
.erClans button.textBtn.danger{color:var(--rose)}
.erClans .clanCardAct button{font-size:12px!important;padding:4px 12px!important}
.erClans button.ghost{background:transparent!important;border-image:var(--frame-slot) 8 fill/8px/0 stretch!important;color:var(--ivory2)!important}
.erClans button.danger,.erClans button.ghost.danger{color:var(--rose)!important}
.clanLeave{display:flex;justify-content:flex-end;padding-top:4px}
.clanLeave small{font:10px Manrope,sans-serif;color:var(--muted)}
.clanReq{grid-template-columns:30px 1fr auto}
.clanReqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.clanReqs .clanReq{margin-bottom:4px}
/* chronicle */
.clanChron{display:flex;flex-direction:column;gap:3px;max-width:820px}
.clanLog{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#0e0b1780;box-shadow:inset 0 0 0 1px var(--slate);font:12px Manrope,sans-serif;color:var(--ivory2)}
.clanLog>.erGlyph{color:var(--slate3);width:16px;height:16px}
.clanLog>span{display:flex;flex-direction:column}
.clanLog b{font:11px var(--pixel);font-weight:400;color:var(--ivory)}
.clanLog em{font-style:normal;color:var(--gold)}
.clanLog small{font:8px var(--pixel)!important;color:var(--muted)!important}
.clanLogLine{display:block}
.clanLog .clanBy{font:9px var(--pixel);color:var(--muted)}
.clanLog.writ,.clanLog.level{box-shadow:inset 0 0 0 1px var(--gold3);background:#2a1f0e66}
.clanLog.writ>.erGlyph,.clanLog.level>.erGlyph,.clanLog.found>.erGlyph,.clanLog.chief>.erGlyph{color:var(--gold)}
.clanLog.join>.erGlyph,.clanLog.promote>.erGlyph{color:var(--trim)}
.clanLog.kick>.erGlyph,.clanLog.leave>.erGlyph{color:var(--rose)}
/* hearth-chat */
.clanChat{display:flex;flex-direction:column;gap:8px;flex:1;min-height:320px}
.clanChatLog{flex:1;min-height:240px;max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:4px;padding:10px;background:#0b0914;box-shadow:inset 0 0 0 1px var(--slate)}
.clanMsg{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;font:12px Manrope,sans-serif;color:var(--ivory2)}
.clanMsg b{font:11px var(--pixel);font-weight:400;color:var(--trim)}
.clanMsg.me b{color:var(--gold)}
.clanMsg small{font:8px var(--pixel)!important;color:var(--slate3)!important}
.clanChatForm{display:flex;gap:8px}.clanChatForm input{flex:1}
/* outside a clan: cards, search, founding */
.clanHeadOut{align-items:center}
.clanFind{display:flex;flex-direction:column;gap:10px}
.clanSearch{max-width:420px}
.clanNote{font:11px Manrope,sans-serif;color:var(--ivory2);display:flex;align-items:center;gap:6px}
.clanNote .erGlyph{color:var(--gold)}
.clanList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.clanCard{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;background:linear-gradient(100deg,color-mix(in srgb,var(--field) 45%,transparent),#120f1fcc 55%);box-shadow:inset 0 0 0 1px var(--slate),inset 3px 0 0 var(--trim)}
.clanCard:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trim) 60%,var(--slate)),inset 3px 0 0 var(--trim)}
.clanCardArt{position:relative;display:grid;place-items:center}
.clanLv{position:absolute;right:-2px;bottom:-2px;font:11px var(--gothic);color:var(--gold);background:var(--ink);box-shadow:inset 0 0 0 1px var(--gold3);padding:1px 4px;min-width:20px;text-align:center}
.clanCardMain{display:flex;flex-direction:column;gap:4px;min-width:0}
.clanCardHead{display:flex;align-items:center;min-width:0}
.clanCardHead b{font:17px var(--gothic);font-weight:400;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clanFacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:9px var(--pixel);color:var(--muted)}
.clanFacts span{display:inline-flex;align-items:center;gap:4px}
.clanFacts b{font-weight:400;color:var(--ivory2)}
.clanFacts .erGlyph{color:var(--trim);width:11px;height:11px}
.clanFill{position:relative;width:70px;height:12px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--slate2)}
.clanFill i{position:absolute;inset:1px auto 1px 1px;max-width:calc(100% - 2px);background:var(--trim);opacity:.55}
.clanFill em{position:relative;font-style:normal;width:100%;text-align:center;color:var(--ivory)}
.clanCardAct{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.clanMode{font:8px var(--pixel)!important;letter-spacing:1px;text-transform:uppercase;color:var(--muted)!important}
.clanMode.m-open{color:var(--teal)!important}.clanMode.m-invite{color:var(--rose)!important}
.clanBy{font:9px var(--pixel)!important;color:var(--muted)!important}
.clanFound{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr);gap:14px;align-items:start}
.clanForm{display:grid;grid-template-columns:1fr 120px;gap:12px;padding:14px;background:linear-gradient(180deg,#1b1630cc,#120f1fcc);box-shadow:inset 0 0 0 1px var(--slate)}
.clanForm .wide{grid-column:1/-1}
.clanForm label{display:flex;flex-direction:column;gap:5px}
.clanForm label>span,.clanLabel{font:9px var(--pixel)!important;letter-spacing:1px;color:var(--gold)!important;text-transform:uppercase;display:block;margin-bottom:5px}
.clanForm label>span small{color:var(--muted);text-transform:none;letter-spacing:0}
.clanForm input,.clanForm select{width:100%;box-sizing:border-box}
.clanSwatches,.clanSigils{display:flex;flex-wrap:wrap;gap:6px}
.erClans button.clanSwatch{width:38px;height:30px;min-width:0;padding:0;background:linear-gradient(135deg,var(--field) 0 58%,var(--trim) 58%);box-shadow:inset 0 0 0 1px var(--ink),0 0 0 1px var(--slate2);cursor:pointer}
.erClans button.clanSwatch.on{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 2px var(--gold),0 0 10px #ecc25a66}
.clanSigil{width:36px!important;height:36px;min-width:0!important;padding:0!important;display:grid!important;place-items:center;color:var(--ivory2)!important}
.clanSigil .erGlyph{width:18px;height:18px}
.clanSigil.on{border-image:var(--frame-hot) 8 fill/8px/0 stretch!important;color:var(--gold)!important}
.clanErr{grid-column:1/-1;font:11px var(--pixel);color:var(--rose);margin:0}
.clanPreview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 14px;text-align:center;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--field) 60%,transparent),transparent 70%),linear-gradient(180deg,#1b1630cc,#120f1fcc);box-shadow:inset 0 0 0 1px var(--slate)}
.clanPreview>b{font:22px var(--gothic);font-weight:400;color:var(--ivory)}
.clanPreview p{font:11px Manrope,sans-serif;color:var(--muted);line-height:1.5;margin:4px 0 0}
.clanPreviewArt{padding:6px 0 2px}
.clanPreviewArt .clanBanner{animation:clanSway 6s ease-in-out infinite;transform-origin:50% 0}
.clanPlate{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px;background:#0b0914;box-shadow:inset 0 0 0 1px var(--slate)}
.clanPlate small{font:7px var(--pixel)!important;letter-spacing:1px;color:var(--muted)!important;text-transform:uppercase}
.clanPlate span{display:flex;align-items:center}
.clanPlate b{font:11px system-ui;color:var(--ivory);font-weight:400}
.clanDanger summary{font:10px var(--pixel);color:var(--rose);cursor:pointer}
.clanDanger p{font:11px Manrope,sans-serif;color:var(--muted)}
.clanDanger input{width:90px;text-transform:uppercase}
/* the dock button */
#clansDock.gilt{color:var(--gold)!important}
/* Today in the Ruin: who it belongs to */
.ledFeed h4 small{display:block;font:8px var(--pixel)!important;letter-spacing:.5px;color:var(--muted)!important;text-transform:none;margin:4px 0 2px}
.ledFeedRow{position:relative}
.ledFeedRow .ledScope{margin-left:auto;font:7px var(--pixel);font-style:normal;letter-spacing:1px;padding:2px 4px 1px;flex:none;align-self:flex-start;margin-top:2px}
.ledScope.you{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold3)}
.ledScope.clan{color:var(--teal);box-shadow:inset 0 0 0 1px #2c6a63}
.ledScope.world{color:var(--violet);box-shadow:inset 0 0 0 1px #5c4a7c}
.ledFeedRow.s-you{box-shadow:inset 2px 0 0 var(--gold),inset 0 0 0 1px var(--slate)}
.ledFeedRow.s-clan{box-shadow:inset 2px 0 0 var(--teal),inset 0 0 0 1px var(--slate)}
.ledFeedRow.s-world{box-shadow:inset 2px 0 0 var(--violet),inset 0 0 0 1px var(--slate)}
.ledFeedRow.moment{background:linear-gradient(90deg,#2a1f3a99,#0e0b1799 60%)}
.ledFeedRow.moment em,.ledFeedRow.clanev em{color:var(--gold)}
.ledFeedRow.m-record{background:linear-gradient(90deg,#3a2a1099,#0e0b1799 60%)}
.ledFeedGlyph{width:22px!important;height:22px!important;margin:0 4px;color:var(--gold)}
.ledFeedRow.clanev .ledFeedGlyph{color:var(--teal)}
.ledFeedRow .erItem{--s:28px}
.ledCardClan{display:flex;align-items:center;gap:5px;font:9px var(--pixel)!important;color:var(--muted)!important;margin:-2px 0 4px}
.ledCardClan b{color:var(--ivory2);font-weight:400}
@media (max-width:980px){
 .clanHall,.clanFound,.clanReqs{grid-template-columns:1fr}
 .clanWritGrid,.clanList{grid-template-columns:1fr}
 .clanPerkGrid{grid-template-columns:1fr}
 .clanMember{grid-template-columns:30px 1fr 80px 60px;grid-template-areas:none}
 .clanMember .clanNum:nth-of-type(2),.clanMember .clanNum:nth-of-type(3),.clanSeen{display:none}
 .clanMember .clanActs{grid-column:1/-1}
}
@media (max-width:620px){
 .clanHeadIn{flex-direction:column;align-items:flex-start;padding-right:28px}
 .clanHeadArt{display:none}
 .clanRenown{flex-wrap:wrap}
 .clanForm{grid-template-columns:1fr}
 .clanCard{grid-template-columns:48px 1fr}.clanCard .clanBanner{width:36px;height:48px}
 .clanCardAct{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
 .clanMember{grid-template-columns:30px 1fr auto}
 .clanMember .clanRole{grid-column:3}
 .clanMember .clanNum{display:none}
 .clanHeadOut .clanHeadArt{display:none}
}
/* v0.71.3 · a tester's own Ledger page says who can see it */
.ledTesterNote{margin:8px 0 0;padding:7px 10px;border:1px dashed #8f6fc4;background:#1d1530;color:#c8a2ec;font:10px var(--pixel,monospace);letter-spacing:.6px}