/* Main Screen reference pass. Keep this layer separate from the rest of the game. */
:root{--screen-ink:#080b0d;--screen-slate:#41495b;--screen-blue:#079fee;--screen-red:#ff5967}
.srOnly{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#pHome.on{background:#fff}
#pHome.on .arena{background:#098617 url('../assets/scenes/home-reference-field.svg') center/100% 100% no-repeat;border-bottom:3px solid var(--screen-ink)}
#pHome.on .arena::before,#pHome.on .arena::after{display:none}
#pHome.on .arena svg:not(svg svg){height:100%;width:100%;transform:translateY(38px)}
.top{height:94px;padding-top:42px;align-items:flex-start;background:#098617}
.gearwrap{grid-auto-rows:clamp(56px,16vw,66px)}
.eqwrap{padding-bottom:13px}
.forgerow{min-height:108px}
.anvilwrap{min-height:98px}
.stagemid b{font-weight:900;letter-spacing:-.04em}
.arenaActivities{position:absolute;z-index:4;inset:0;pointer-events:none}
.arenaActivities .activity{position:absolute;width:54px;height:62px;border:0;background:none;filter:drop-shadow(0 0 7px #fff);pointer-events:auto}
.arenaActivities .activity img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(1px 2px 0 #080b0d)}
.arenaActivities .activityPass{right:4px;top:47%}
.arenaControls{position:absolute;z-index:5;bottom:7px;right:180px;display:flex;align-items:center;gap:6px}
.battleAuto{display:grid;place-items:center;width:40px;height:40px;border:2px solid #080b0d;border-radius:50%;font-weight:900;text-shadow:-1px -1px #080b0d,1px 1px #080b0d,1px -1px #080b0d,-1px 1px #080b0d;color:#fff;text-align:center;line-height:.9}
.battleAuto{background:#40f719;font-size:11px}
/* the arena's frame rate in the top bar, between the hero badge and the coins: the measured rate as a line of text, and under it two small
   switches, the 30 / 60 cap and HD (a glass chip each, lit when 60 or when HD is on, HD struck through when off) */
.fpsGroup{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.fpsRead{display:flex;align-items:baseline;gap:2px;color:#dfe6ff;font-family:'Work Sans',sans-serif;line-height:1;text-shadow:-1px -1px #111722,1px 1px #111722,1px -1px #111722,-1px 1px #111722;pointer-events:none}
.fpsRead b{font:800 12px/1 'Work Sans',sans-serif;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.fpsRead small{font:700 8px/1 'Work Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.fpsChips{display:flex;gap:4px}
.arenaChip{display:flex;min-width:30px;min-height:24px;padding:0 6px;justify-content:center;align-items:center;
  border:1px solid #b2a9e699;border-radius:12px;background:#141738b8;color:#cfc7f5;font-family:'Work Sans',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arenaChip[hidden]{display:none}
.arenaChip b{font:800 11px/1 'Work Sans',sans-serif;font-variant-numeric:tabular-nums}
.arenaChip.on{background:#3a335dd9;border-color:#c9b0ff;color:#fff}
#arenaHdBtn:not(.on){opacity:.75}
#arenaHdBtn:not(.on) b{text-decoration:line-through;text-decoration-thickness:1.5px}
.arenaChip:focus-visible{outline:2px solid #f2ce86;outline-offset:2px}
/* the group takes room from the pills beside it: the gems (a short number) give way first, and the hero badge a little */
.top .res.gem{flex:0 1 auto}
.top .profileBar{flex-basis:38%}
@media (max-width:340px){.arenaChip{min-width:26px;padding:0 4px}.fpsChips{gap:3px}.top{gap:4px}}   /* (a 320 px bar: slimmer chips, or the coins are clipped) */
#pHome.on .skillrow{position:relative;z-index:5;align-self:flex-end;width:max-content;max-width:calc(100% - 62px);margin:-46px 5px 4px auto;min-height:42px;gap:5px}
#pHome.on .skillrow .sk{flex:0 0 42px;width:42px;height:42px}
#pHome.on .skillrow .sk .nm{display:none}
#pHome.on .skillrow .sk.locked{display:none}
.top .res .v,.top .profilePower .v{font-weight:900}
#pHome .slot{border:2px solid #080b0d;box-shadow:0 2px 0 #15191d}
#pHome .slot .aicon{width:90%;height:82%}
#pHome .slot .lv{font-size:9px;font-weight:900;text-shadow:-1px -1px #111,1px 1px #111,1px -1px #111,-1px 1px #111}
#pHome .slot .val{font-size:11px;font-weight:900;letter-spacing:-.03em}
#pHome .slot.mountslot{grid-column:span 2;flex-direction:row;gap:3px}
#pHome .slot.mountslot .aicon{position:static;transform:none;width:42%;height:72%;max-width:68px}
#pHome .slot.mountslot .sn{font-size:0}
#pHome .slot.mountslot .lv{font-size:13px;left:auto;right:10px;bottom:4px}
.gearInfo{position:absolute;left:12px;bottom:2px;z-index:2;width:17px;height:17px;border-radius:50%;background:#080b0d;color:#fff;font:bold 14px/17px Georgia,serif;text-align:center}
.forgerow{position:relative}
.forgerow .foundrow{left:30%;bottom:25px;max-width:50%;justify-content:flex-start}
.forgerow .foundrow .fitem{width:55px;height:61px;margin-right:-36px}.forgerow .foundrow .fitem:not(.ebg){background-image:repeating-radial-gradient(circle at 48% 50%,#b968fa 0 12px,#a951e7 13px 16px)!important}
.forgerow .foundrow .fitem:first-child{z-index:5}
.forgerow .foundrow .fitem img{width:42px;height:42px}
.forgerow .foundrow .fa{display:none}
.anvilbtn .anvil{transform:translateX(38px)}
.hamcount{left:70%;bottom:0}
.forgelvl{right:58px;width:84px}
.autobtn{align-self:center;width:49px;min-height:70px}
.homeChat{border-top:1px solid #bdc2c6;border-bottom:1px solid #111722;font-weight:900}
.homeChat b,.homeChat small{font-weight:900}
.tabs button>span:last-of-type{display:none}
.tabs button>.aicon,.tabs button .glyph{width:41px!important;height:41px!important}
.tabs{min-height:66px;align-items:center}

/* Shared white modal with a low red close button, matching the references. */
.veil{background:rgba(0,0,0,.79)}
.sheetWrap{position:relative;max-width:480px}
.sheet{border:2px solid #080b0d;border-radius:8px;box-shadow:none;padding:18px 14px 25px;max-height:min(76dvh,790px);font-weight:800}
.sheet h3{font-size:23px;font-weight:900;color:#fff;-webkit-text-stroke:1.7px #080b0d;paint-order:stroke fill;text-shadow:1px 2px #080b0d;letter-spacing:-.04em}
.sheetClose{width:56px;height:56px;margin-top:-2px;background:var(--screen-red);border:2px solid #080b0d;box-shadow:0 5px 0 #a53237;font-size:31px;font-weight:900;text-shadow:1px 2px #080b0d}
.sheet .btn.pri,.sheet .btn.go{background:var(--screen-blue)!important;box-shadow:0 5px 0 #08699a!important}
.sheet .btn.bad{background:#ff4b5b!important;box-shadow:0 5px 0 #9c2933!important}
.sheet .btn{font-weight:900;border-color:#080b0d;border-radius:7px}

/* Auto Forge: tall scrollable checklist and fixed action area. */
.sheet[data-variant="auto-forge"]{max-height:min(82dvh,860px);display:flex;flex-direction:column}
.sheet[data-variant="auto-forge"] h3{flex:none;margin-bottom:16px}
.autoKeepTitle{font-size:17px;font-weight:900;margin:0 0 7px}
.sheet[data-variant="auto-forge"] .tt{border:0;margin:7px 0 5px}
.sheet[data-variant="auto-forge"] .erarow{display:flex;min-height:33px;align-items:center;gap:8px;border:0;border-radius:6px;margin:4px 0;padding:3px 7px;font-weight:900}
.sheet[data-variant="auto-forge"] .erarow span{flex:1}
.sheet[data-variant="auto-forge"] .erarow b{font-size:16px}
.sheet[data-variant="auto-forge"] .chkrow{background:#f0f1f3;border:0;border-radius:6px;margin:4px 0;min-height:33px;padding:4px 8px;font-size:13px;font-weight:900}
.sheet[data-variant="auto-forge"] input[type="checkbox"]{accent-color:#4af50f;width:22px;height:22px}
.sheet[data-variant="auto-forge"] .stepperRow{border:0;background:#fff}
.sheet[data-variant="auto-forge"] .stepperRow .t1{font-size:12px;max-width:53%}
.sheet[data-variant="auto-forge"] #afStart{min-height:68px;font-size:24px;margin-top:14px!important}

/* Probability (every era expands in place) > item preview. */
.sheet[data-variant="forge-odds"]{max-height:min(78dvh,840px)}
.sheet[data-variant="forge-odds"] h3{margin-bottom:1px}
.sheet[data-variant="forge-odds"]>.mini:first-of-type{font-size:15px;color:#080b0d!important}
.sheet[data-variant="forge-odds"]>.tt:first-of-type{border:0;text-align:center;margin:17px 0 9px;font-size:13px}
.sheet[data-variant="forge-odds"] .eraOdds{display:block;width:100%;margin:4px 0;border:0;border-radius:6px;background:var(--era)}
.sheet[data-variant="forge-odds"] .eraOdds summary{display:flex;align-items:center;min-height:31px;padding:4px 7px;font-size:15px;list-style:none;cursor:pointer}
.sheet[data-variant="forge-odds"] .eraOdds summary::-webkit-details-marker{display:none}
.sheet[data-variant="forge-odds"] .eraOdds summary::after{content:none}
.sheet[data-variant="forge-odds"] .eraValues b{min-width:42px}
.sheet[data-variant="forge-odds"] .eraValues b+b{background:#ffffff60;min-width:58px}
.sheet[data-variant="forge-odds"] .eraOddsHead{display:flex;padding:0 10px 3px;font-size:11px;font-weight:900;color:#59636e}
.sheet[data-variant="forge-odds"] .eraOddsHead .eraValues b+b{background:none;margin:0 -3px 0 0;padding:0 2px}
/* an expanded era: its items with power ranges, then its substat ranges */
.eraItems{display:flex;flex-direction:column;gap:4px;margin:8px 0 10px}
.eraItem{display:flex;align-items:center;gap:9px;width:100%;padding:4px 9px 4px 4px;border:0;border-radius:6px;
  background:rgba(255,255,255,.06);color:inherit;font:inherit;text-align:left;cursor:pointer}
.eraItem:active{background:rgba(255,255,255,.12)}
.eraItem .aicon{width:42px;height:42px;padding:3px;border:1px solid #080b0d;border-radius:6px;box-sizing:border-box}
.eraItem .ilv{bottom:-2px;padding:0 2px;border-radius:3px;font-size:8px;line-height:10px}
.eraItemName{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.eraItemName b{font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.eraItemName small{font-size:11px;opacity:.72}
.eraItem em{flex:none;font-size:12px;font-style:normal;font-weight:900}
.eraMastery{margin-bottom:8px}
.eraMastery .mini{margin-bottom:4px}
.eraSubs{margin-top:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06)}
.eraSubs>div{display:grid;grid-template-columns:minmax(0,1fr) 88px 88px;gap:6px;padding:4px 9px;font-size:11px}
.eraSubs>div:nth-child(odd){background:rgba(255,255,255,.04)}
.eraSubs>div>span{text-align:right;font-variant-numeric:tabular-nums}
.eraSubs>.eraSubsHead{background:rgba(0,0,0,.22);font-weight:900}
.eraSubsHead span{opacity:.72}
.sheet[data-variant="item-preview"]{background:#41495b;color:#fff;max-height:min(57dvh,660px)}
.sheet[data-variant="item-preview"] .potentialHero{border:0;padding:0;margin:25px 0 35px;background:none!important;color:#fff}
.sheet[data-variant="item-preview"] .potentialHero .aicon{width:66px;height:66px;border:2px solid #080b0d;border-radius:6px}
.sheet[data-variant="item-preview"] .potentialHero b{font-size:15px;color:var(--item-era);text-shadow:1px 1px #080b0d}
.sheet[data-variant="item-preview"] .potentialHero span{font-size:15px}
.sheet[data-variant="item-preview"] .potentialHero small{font-size:13px;color:#fff;font-weight:900}
.sheet[data-variant="item-preview"] .potentialSubs{background:#f7f8fa;border-radius:7px;padding:14px 10px;color:#848789}
.sheet[data-variant="item-preview"] .potentialSubs div{background:transparent;display:flex;justify-content:space-between;margin:0;padding:2px 0;font-size:12px;font-weight:900}
.sheet[data-variant="item-preview"] .potentialSubs b{font-variant-numeric:tabular-nums}
.sheet[data-variant="item-preview"] .rarityChooser{margin-bottom:10px}
.sheet[data-variant="item-preview"] .tt{color:#fff}

/* Gear popovers and new-drop comparison. */
.sheet[data-variant="gear-detail"]{max-height:min(42dvh,440px)}
.sheet[data-variant="gear-detail"] h3{text-align:left;font-size:17px;color:#7059ef;-webkit-text-stroke:1px #080b0d}
.sheet[data-variant="drop-review"]{max-height:min(58dvh,610px);padding:22px 9px 10px}
.sheet[data-variant="drop-review"] .row{background:#fff;border:0;box-shadow:none;align-items:center!important;margin-bottom:12px}
.sheet[data-variant="drop-review"] .itemframe:not(.ebg){background:#8067fb}.sheet[data-variant="drop-review"] .itemframe{width:65px!important;height:65px!important;border:2px solid #080b0d;border-radius:6px}
.sheet[data-variant="drop-review"] .itemframe .aicon{width:90%;height:90%}
.sheet[data-variant="drop-review"] .t1{font-size:15px!important;font-weight:900}
.sheet[data-variant="drop-review"] .t2{font-size:14px!important;font-weight:900;color:#080b0d}
.sheet[data-variant="drop-review"] .subline{color:#86898c;font-size:12px;font-weight:900}
.sheet[data-variant="drop-review"] .tag{background:transparent;border:0;padding:1px 0;display:block;color:#86898c;font-weight:900}
.reviewFound{background:#ededf0;border-radius:8px;padding:8px 4px 14px}
.reviewFound .row{background:transparent!important}
.sheet[data-variant="drop-review"] .acts{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:9px 10px 3px}
.sheet[data-variant="drop-review"] .acts .btn{min-height:64px;font-size:20px}

/* The pass is a tall, two-column timeline over Home. */
.sheet[data-variant="progress-pass"]{position:relative;max-height:min(76dvh,760px);padding:45px 6px 17px;background:#41495b;color:#fff}
.sheet[data-variant="progress-pass"] h3{position:sticky;top:-45px;z-index:2;background:#7357f5;border:2px solid #080b0d;padding:7px;margin:0 -8px 0}
.passSword{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:40px}
.passIntro{display:flex;align-items:center;justify-content:space-around;gap:12px;min-height:75px;padding:8px;text-align:center}
.passIntro b{max-width:48%;font-size:13px;text-shadow:1px 1px #080b0d}
.passIntro .btn{background:#ffca17!important;color:#080b0d!important;text-shadow:none;box-shadow:0 4px 0 #8d6813!important}
.passTracks{display:grid;grid-template-columns:1fr 1fr;text-align:center}
.passTracks b{padding:5px;background:#7357f5;border:2px solid #080b0d;font-size:14px}
.passTracks b+b{background:#ffcb19;color:#080b0d}
.passTimeline{padding:8px 5px 16px;background:linear-gradient(90deg,#fff 0 48%,#7357f5 48% 52%,#fff 52%)}
.passTier{padding:2px 0 10px;text-align:center}
.passStage{display:inline-block;position:relative;z-index:1;min-width:110px;background:#7357f5;border:2px solid #080b0d;border-radius:20px;padding:2px 12px;margin:1px 0 8px;color:#fff;font-size:11px}
.passPair{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 2px}
.passReward{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:59px;padding:6px;background:#e4e5e8;border:2px solid #080b0d;border-radius:6px;color:#080b0d;text-align:left;font-size:10px;font-weight:900}
.passReward.premium{background:#41495b;color:#fff}
.passReward b{font-size:17px;color:#39e13e}
.passReward.premium b{color:#ffcf1a}
.passReward:disabled{opacity:1}

/* Profile and settings use the long centered sheets pictured over Home. */
.sheet[data-variant="profile"],.sheet[data-variant="profile-settings"]{min-height:min(63dvh,630px);max-height:min(76dvh,770px);padding:17px 19px 23px}
.sheet[data-variant="profile"] h3,.sheet[data-variant="profile-settings"] h3{margin:0 0 28px}
.sheet[data-variant="profile"] .profileIdentity{border:0;align-items:center;gap:10px}
.sheet[data-variant="profile"] .profileIdentity .avatar{width:73px;height:73px}
.sheet[data-variant="profile"] .profileIdentity .avatar img{width:100%;height:100%}
.sheet[data-variant="profile"] .profileIdentity span{color:#080b0d;font-size:15px;font-weight:900}
.sheet[data-variant="profile"] .profileIdentity b{display:block;background:#ededf0;border-radius:6px;padding:2px 7px;color:#fff;font-size:18px;text-shadow:-1px -1px #080b0d,1px 1px #080b0d,1px -1px #080b0d,-1px 1px #080b0d}
.sheet[data-variant="profile"] .profileIdentity small{display:none}
.sheet[data-variant="profile"] .profileActions{margin:42px auto 15px;max-width:270px}
.sheet[data-variant="profile"] .profileActions::before{content:"Rankings";grid-column:span 2;text-align:center;font-size:16px;font-weight:900}
.sheet[data-variant="profile"] .profileActions button{min-height:49px;background:var(--screen-blue);color:#fff;box-shadow:0 4px 0 #075c8c;font-size:12px;text-shadow:1px 1px #080b0d}
.sheet[data-variant="profile"] .profileActions button::before{display:none}
.sheet[data-variant="profile"] .profileTabs,.sheet[data-variant="profile-settings"] .profileTabs{position:sticky;bottom:-23px;z-index:2;border:0;margin-top:35px;padding:6px 0;background:#fff}
.sheet[data-variant="profile"] .profileTabs button,.sheet[data-variant="profile-settings"] .profileTabs button{border:2px solid #080b0d;background:#41495b;color:#fff;border-radius:7px;box-shadow:0 3px 0 #202634;font-weight:900;font-size:14px}
.sheet[data-variant="profile"] .profileTabs button.on,.sheet[data-variant="profile-settings"] .profileTabs button.on{background:var(--screen-blue);color:#fff;box-shadow:0 3px 0 #075c8c}
.profileExtra{margin-top:10px;font-size:11px}
.profileExtra summary{cursor:pointer;color:#515c69;text-decoration:underline}
.sheet[data-variant="profile"] .profileCustomize{margin-top:6px}
.sheet[data-variant="profile"] .profileCustomize summary{font-size:10px}
.sheet[data-variant="profile-settings"] h3{margin-bottom:2px}
.settingsTime{text-align:center;font-size:14px;font-weight:900;margin-bottom:25px}
.settingsRows{max-height:49dvh;overflow:auto;margin:0 -19px}
.sheet[data-variant="clan-race"]{padding:0;border-radius:7px;background:#fff;height:75dvh;max-height:none;display:flex;flex-direction:column;overflow:visible}
.raceHeader{position:relative;background:#39433d;color:#fff;text-align:center;min-height:178px;padding:38px 12px 14px;flex:none}
.raceHeader>img{position:absolute;top:-36px;left:calc(50% - 34px);filter:drop-shadow(2px 3px 0 #111)}
.raceHeader h3{color:#fff;font-size:25px;margin:8px 0 19px}
.raceHeader p{font-size:13px;font-weight:900;line-height:1.3;margin:10px 0}
.raceHeader em,.raceCut em{color:#ff5667;font-style:normal}
.raceRows{min-height:0;flex:1;overflow:auto;padding:14px 8px;background:#fff}
.raceRow{position:relative;display:grid;grid-template-columns:24px 1fr 75px 65px;align-items:center;gap:4px;min-height:70px;margin-bottom:10px;padding:8px 4px;border-radius:8px;background:#f0f1f3;text-align:center;font-size:11px;font-weight:900}
.raceRow>strong{font-size:23px}.raceRow b{display:block;font-size:15px}.raceName{text-align:left}.raceName small{display:block;color:#e3c630;font-size:10px}.raceRow>div:last-child{background:#dcdee1;align-self:stretch;display:grid;place-content:center}
.raceRow.eliminated{background:#75c8f6;color:#627d94}.raceEliminated{position:absolute;left:0;right:0;top:0;background:#ff5967;color:#fff;padding:3px}.raceRow.eliminated{padding-top:25px}
.raceCut{text-align:center;font-weight:900;margin:12px 0}.raceCut b{display:block;color:#ff5967;font-size:16px}.raceCut small{display:block}
.raceFoot{flex:none;background:#39433d;color:#fff;text-align:center;padding:38px 8px 36px;font-size:15px;font-weight:900}.raceFoot em{color:#43fb25;font-style:normal}
.settingsRow{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:7px 18px;background:#f1f2f4;font-size:13px;font-weight:900}
.settingsRow:nth-child(2n){background:#fff}
.settingsSwitch{position:relative;width:43px;height:23px;border:2px solid #080b0d;border-radius:13px;background:#41495b}
.settingsSwitch.on{background:#38f416}
.settingsSwitch::after{content:"";position:absolute;top:-4px;left:-3px;width:27px;height:27px;border:2px solid #080b0d;border-radius:50%;background:#079fee}
.settingsSwitch.on::after{left:19px}


.bootsplash{background:#fff0e3!important;color:#080b0d;overflow:hidden}
.bootConnecting{position:absolute;top:48%;left:0;right:0;text-align:center;font-size:18px;font-weight:900;color:#080b0d}
.bootLandscape{position:absolute;bottom:0;left:0;width:100%;height:36%;object-fit:fill}

@media(max-width:360px){.forgelvl{right:51px;width:75px}.forgerow .foundrow{left:24%}}
.sheet[data-variant="profile"] .profileAvatarCol{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.sheet[data-variant="profile"] .profileAvatarBtn{min-height:0;padding:5px 9px;border:2px solid #080b0d;border-radius:7px;background:var(--screen-blue);color:#fff;box-shadow:0 2px 0 #075c8c;font:900 10px 'Work Sans',sans-serif;text-shadow:1px 1px #080b0d;cursor:pointer;white-space:nowrap}
.sheet[data-variant="profile"] .avatarGrid{margin:12px 0}
.sheet[data-variant="profile"] .playerStage{margin-bottom:12px}
.sheet[data-variant="profile"] .profileTabs,.sheet[data-variant="profile-settings"] .profileTabs{position:static;margin:6px 0 14px;padding:0;background:transparent}