/* Runtime adaptation of bag rev18, magic rev8 and profile columns (13 Oct). Values and actions are supplied by the read model, never by the preview. */ #scarlet-bag-v30 .catalogue-tool{flex:none;min-height:34px;min-width:32px;padding:3px;border:0;background:none;color:#c6a66b;font-size:22px} #scarlet-bag-v30 .catalogue-tool::before,#scarlet-bag-v30 .catalogue-tool::after{display:none} #scarlet-bag-v30 .catalogue-page-count{text-align:center;color:#ad9472;font:11px/18px var(--font-ui,'PT Sans',sans-serif);height:18px;flex:none} #scarlet-bag-v30 .catalogue-search{display:grid;gap:10px} #scarlet-bag-v30 .catalogue-search input{width:100%;min-width:0;padding:10px;border:1px solid #81643e;background:#171017;color:#dfcfb2;user-select:text} #scarlet-bag-v30 .bag-page.bag-v18{height:100%;min-height:0;display:flex;flex-direction:column;padding:4px 10px;gap:0} #scarlet-bag-v30 .bag-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;flex:none} #scarlet-bag-v30 .bag-categories button{position:relative;min-height:49px;padding:5px 0;border:0;border-bottom:1px solid #76563755;border-radius:0;background:none;display:grid;place-items:center} #scarlet-bag-v30 .bag-categories button::before,#scarlet-bag-v30 .bag-categories button::after{display:none} #scarlet-bag-v30 .bag-categories button[aria-selected=true]{border-bottom:2px solid #c3a064;background:linear-gradient(transparent,#b18b3820)} #scarlet-bag-v30 .bag-categories img{height:33px;width:33px;object-fit:contain;opacity:.65} #scarlet-bag-v30 .bag-categories [aria-selected=true] img{opacity:1} #scarlet-bag-v30 .bag-subtypes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:7px 0 3px;flex:none;min-height:64px;align-content:start} #scarlet-bag-v30 .bag-subtypes[data-category=gear]{grid-template-columns:repeat(5,minmax(0,1fr))} #scarlet-bag-v30 .bag-subtypes[data-category=quest]{grid-template-columns:repeat(2,minmax(0,1fr))} #scarlet-bag-v30 .bag-subtypes button,#scarlet-bag-v30 .magic-filters button{padding:5px 2px;min-width:0;min-height:28px;font:11px/16px 'PT Sans',sans-serif;background:none;border:1px solid transparent;color:#ad9680} #scarlet-bag-v30 .bag-subtypes button::before,#scarlet-bag-v30 .magic-filters button::before{display:none} #scarlet-bag-v30 .bag-subtypes button[aria-pressed=true],#scarlet-bag-v30 .magic-filters button[aria-pressed=true]{border-color:#94704570;background:#94704518;color:#ead4aa} #scarlet-bag-v30 .bag-tools{display:flex;gap:4px;align-items:center;min-height:38px;margin:4px 0 6px;flex:none;border-block:1px solid #96744830} #scarlet-bag-v30 .bag-effects{display:flex;flex:1;min-width:0;align-items:center} #scarlet-bag-v30 .bag-effects-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center;min-width:0;flex:1;touch-action:pan-x} #scarlet-bag-v30 .bag-effects button{display:flex;gap:3px;align-items:center;background:none;border:0;padding:2px;min-height:32px;flex:none;color:#c5af86;font-size:12px} #scarlet-bag-v30 .bag-effects button::before{display:none} #scarlet-bag-v30 .bag-effects .effect-timer{font-size:10px} #scarlet-bag-v30 .bag-effects .muted{font-size:11px;white-space:nowrap} #scarlet-bag-v30 .bag-v18>.page-window{flex:1;min-height:0;margin:0;container-type:size} #scarlet-bag-v30 .bag-v18 .bag-grid{height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(var(--bag-rows),minmax(0,1fr));gap:6px 8px;padding:0;align-items:start;justify-items:center;align-content:start} #scarlet-bag-v30 .bag-v18 .bag-slot{width:min(100%,80px,calc((100cqh - (var(--bag-rows) - 1)*6px)/var(--bag-rows)));height:auto;min-height:0;aspect-ratio:1;margin:0;align-self:start} #scarlet-bag-v30 .bag-v18 .bag-grid>.empty-state{grid-column:1/-1;grid-row:1/-1;align-self:center} #scarlet-bag-v30 .bag-v18>.spell-page-rail{margin:0;height:38px;min-height:38px;flex:none} #scarlet-bag-v30 .overlay.floating:has(.item-card) .sheet-content{padding:0 8px 10px} #scarlet-bag-v30 .overlay.floating .item-card{border:0;background:none;padding:0;margin:0;box-shadow:none} #scarlet-bag-v30 .overlay.floating .item-card::before,#scarlet-bag-v30 .overlay.floating .item-card::after{display:none} #scarlet-bag-v30 .overlay.floating .item-card .item-preview{width:78px;height:78px;flex:none} #scarlet-bag-v30 .overlay.floating .item-card h3{font-size:21px} #scarlet-bag-v30 .magic-page.magic-v8{height:100%;min-height:0;display:flex;flex-direction:column;padding:3px 10px;gap:0} #scarlet-bag-v30 .magic-v8 .clan-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;flex:none;margin:0;padding:0;border-bottom:1px solid #96744840} #scarlet-bag-v30 .magic-v8 .clan-tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;padding:3px 0 5px;background:none;border:0;border-bottom:2px solid transparent;color:#a08d77;font:11px/13px 'PT Sans',sans-serif} #scarlet-bag-v30 .magic-v8 .clan-tab::before,#scarlet-bag-v30 .magic-v8 .clan-tab::after{display:none} #scarlet-bag-v30 .magic-v8 .clan-tab[aria-selected=true]{border-color:#b39259;color:#eed7ac;background:linear-gradient(transparent,#a9863422)} #scarlet-bag-v30 .magic-v8 .school-animal{width:39px;height:39px;object-fit:contain;filter:brightness(.85)} #scarlet-bag-v30 .magic-v8 [aria-selected=true] .school-animal{filter:brightness(1.05)} #scarlet-bag-v30 .school-heading{display:flex;align-items:center;justify-content:space-between;flex:none;padding:7px 2px 2px} #scarlet-bag-v30 .school-heading h2{font-size:21px;margin:0} #scarlet-bag-v30 .catalogue-info::before{display:none} #scarlet-bag-v30 .school-progress{display:flex;align-items:center;gap:10px;flex:none;padding:4px 2px 7px;font-size:11px;color:#b19878} #scarlet-bag-v30 .school-progress .meter{flex:1;height:4px;min-height:4px;padding:0;border:0;background:#8c714328} #scarlet-bag-v30 .school-progress .meter-fill{height:100%;background:linear-gradient(90deg,#71583b,#b99b61)} #scarlet-bag-v30 .magic-controls{display:flex;gap:4px;flex:none;align-items:center;margin-bottom:5px} #scarlet-bag-v30 .magic-filters{display:grid;grid-template-columns:.7fr 1fr 1.55fr 1fr;gap:1px;flex:1} #scarlet-bag-v30 .magic-filters button{white-space:nowrap;font-size:10px} #scarlet-bag-v30 .magic-v8>.page-window{flex:1;min-height:0;margin:0;container-type:normal} #scarlet-bag-v30 .magic-v8 .spell-list{display:grid;width:100%;height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;justify-items:stretch} #scarlet-bag-v30 .magic-v8 .magic-card{width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;padding:0;border:1px solid #8d724c70;background:#160d13;overflow:hidden;border-radius:0;text-align:left} #scarlet-bag-v30 .magic-card::before,#scarlet-bag-v30 .magic-card::after{display:none} #scarlet-bag-v30 .spell-art{position:relative;display:block;flex:1;min-height:0;margin:3px 3px 0;overflow:hidden} #scarlet-bag-v30 .spell-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #scarlet-bag-v30 .magic-card.locked .spell-art>img{filter:saturate(.4) brightness(.6)} #scarlet-bag-v30 .mana-cost,#scarlet-bag-v30 .spell-age,#scarlet-bag-v30 .mastered-mark{position:absolute;right:3px;top:3px;display:flex;align-items:center;gap:3px;padding:2px 4px;background:#130f17cc;border:1px solid #9c846047;border-radius:3px;font-size:12px;color:#ddddd1} #scarlet-bag-v30 .mana-cost .art-icon{width:13px;height:17px} #scarlet-bag-v30 .spell-age,#scarlet-bag-v30 .mastered-mark{left:3px;right:auto;color:#c6a66b} #scarlet-bag-v30 .spell-age img,#scarlet-bag-v30 .mastered-mark img{width:14px;height:15px} #scarlet-bag-v30 .spell-caption{display:block;flex:none;padding:6px 8px;background:linear-gradient(#37202a99,#1e1119)} #scarlet-bag-v30 .spell-tier{display:flex;align-items:center;gap:5px} #scarlet-bag-v30 .spell-tier small{font:10px 'PT Sans',sans-serif;color:#a98e68;min-width:27px;text-align:right} #scarlet-bag-v30 .tier-progress{display:block;flex:1;height:4px;background:#130e14;border:1px solid #90724745;overflow:hidden} #scarlet-bag-v30 .tier-progress i{display:block;height:100%;background:linear-gradient(90deg,#81643a,#c8a56a)} #scarlet-bag-v30 .spell-values{display:flex;align-items:center;gap:12px;border-top:1px solid #8d724c35;margin-top:5px;padding-top:4px;color:#c9af83;font:12px 'PT Sans',sans-serif} #scarlet-bag-v30 .spell-values>span{display:flex;gap:4px;align-items:center} #scarlet-bag-v30 .spell-values svg{width:14px;height:14px} #scarlet-bag-v30 .spell-values>small{margin-left:auto;color:#937f68;font-size:10px} #scarlet-bag-v30 .magic-v8>.spell-page-rail{margin:0;height:34px;min-height:34px;flex:none} #scarlet-bag-v30 .spell-modal-head{display:flex;gap:13px;align-items:center;padding:0 5px 12px;border-bottom:1px solid #98754255} #scarlet-bag-v30 .spell-modal-head>img{width:80px;height:80px;object-fit:cover;border:1px solid #a288575e} #scarlet-bag-v30 .spell-modal-head h3{font-size:21px;margin:5px 0} #scarlet-bag-v30 .spell-modal-head small,#scarlet-bag-v30 .spell-modal-head span{font-size:11px;color:#ad9576} #scarlet-bag-v30 .spell-facts-new>div{display:flex;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid #a1835030;font-size:12px} #scarlet-bag-v30 .spell-facts-new svg,#scarlet-bag-v30 .spell-facts-new img{width:15px;height:17px} #scarlet-bag-v30 .spell-facts-new strong{margin-left:auto;display:flex;gap:5px;align-items:center;white-space:nowrap;font-weight:normal} #scarlet-bag-v30 .spell-facts-new small{color:#947d62} #scarlet-bag-v30 .stat-increase{font:11px 'PT Sans',sans-serif;color:#dcc088;background:#9b743523;border:1px solid #a9884c45;padding:3px;border-radius:3px} #scarlet-bag-v30 .spell-study-actions{padding-top:8px;border-top:1px solid #98754255} #scarlet-bag-v30 .spell-study-actions>.action{width:100%;margin-top:9px} #scarlet-bag-v30 .next-level-heading{font-size:15px;color:#d4bb90;margin:12px 0 3px} /* Two columns keep growth controls separate from combat statistics. */ #scarlet-bag-v30 .profile-v3 .profile-layout{align-items:stretch} #scarlet-bag-v30 .profile-v3 .profile-center{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:22px;min-width:0;min-height:256px} #scarlet-bag-v30 .profile-v3 .profile-avatar-wrap{width:136px;margin:0 auto 5px} #scarlet-bag-v30 .profile-v3 .profile-avatar-button .portrait{width:136px;height:136px} #scarlet-bag-v30 .portrait-shortcuts{position:absolute;inset:0 0 auto;height:38px;pointer-events:none;z-index:3} #scarlet-bag-v30 .portrait-shortcut{position:absolute;top:0;width:34px;min-width:34px;height:34px;min-height:34px;padding:3px;border:0;background:none;pointer-events:auto} #scarlet-bag-v30 .portrait-shortcut::before{display:none} #scarlet-bag-v30 .achievements-shortcut{left:0} #scarlet-bag-v30 .rating-shortcut{right:0} #scarlet-bag-v30 .portrait-shortcut img{width:100%;height:100%} #scarlet-bag-v30 .age-tag{position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:1px solid #957746;border-radius:12px;background:#21191b;padding:1px 10px;color:#dcc49e;font-size:13px} #scarlet-bag-v30 .profile-v3 .profile-xp{width:100%;margin:auto 0 0;padding-top:6px} #scarlet-bag-v30 .profile-v3 .profile-xp-label{display:flex;flex-direction:column;align-items:center;gap:0;font-size:10px} #scarlet-bag-v30 .profile-v3 .profile-rating{font-size:10px} #scarlet-bag-v30 .profile-v3 .profile-rating>.meter{display:none} #scarlet-bag-v30 .profile-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;border-top:1px solid #92734a55;padding-top:10px;margin-top:10px} #scarlet-bag-v30 .column-stats{min-width:0;padding-right:10px;border-right:1px solid #92734a40} #scarlet-bag-v30 .profile-columns h4{font-size:15px;line-height:19px;color:#cfb68e;margin:0} #scarlet-bag-v30 .column-stats>h4{min-height:38px} #scarlet-bag-v30 .column-stat{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:26px;padding:3px 0;font-size:11px;color:#bead95} #scarlet-bag-v30 .column-stat strong{font-size:14px;color:#ead4ad;white-space:nowrap} #scarlet-bag-v30 .stat-group+.stat-group{margin-top:6px;padding-top:6px;border-top:1px solid #92734a40} #scarlet-bag-v30 .profile-v3 .profile-development{margin:0;padding:0;border:0;min-width:0} #scarlet-bag-v30 .profile-v3 .development-heading{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:38px;margin:0} #scarlet-bag-v30 .profile-v3 .development-points{font-size:11px;gap:3px;height:18px} #scarlet-bag-v30 .profile-v3 .development-points .art-icon{height:19px;width:17px} #scarlet-bag-v30 .profile-v3 .development-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px;min-height:49px;padding:2px 0;border:0} #scarlet-bag-v30 .profile-v3 .development-stat{display:flex;flex-direction:column;gap:1px;min-width:0} #scarlet-bag-v30 .profile-v3 .development-stat>span:first-child{font-size:10px} #scarlet-bag-v30 .profile-v3 .development-stat>.profile-stat-value{font-size:12px;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .development-control{display:flex;gap:2px;width:55px;min-height:28px;margin:0;justify-content:flex-end} #scarlet-bag-v30 .profile-v3 .development-upgrade{display:flex;align-items:center;justify-content:center;width:27px;min-width:27px;height:28px;min-height:28px;padding:0;border:1px solid #887149;border-radius:50%;background:linear-gradient(145deg,#38281f,#1b1414);color:#dfc58c;font:11px 'PT Sans',sans-serif} #scarlet-bag-v30 .profile-v3 .development-upgrade::before,#scarlet-bag-v30 .profile-v3 .development-upgrade::after{display:none} #scarlet-bag-v30 .profile-v3 .development-minus[hidden]{display:flex;visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .development-footer{min-height:66px;margin:0} #scarlet-bag-v30 .profile-v3 .development-pending{font-size:10px;min-height:16px;margin:3px 0} #scarlet-bag-v30 .profile-v3 .development-actions{display:flex;gap:3px} #scarlet-bag-v30 .profile-v3 .development-actions button{font-size:10px;min-height:30px;padding:4px;min-width:0} #scarlet-bag-v30 .profile-v3 .development-preview{font-size:10px;line-height:12px} #scarlet-bag-v30 .profile-v3 .profile-stat-value{display:flex;align-items:baseline;gap:5px} #scarlet-bag-v30 .profile-v3 .profile-stat-value.is-boosted,#scarlet-bag-v30 .profile-v3 .stat-boost{color:#86b0a3} #scarlet-bag-v30 .profile-v3 .stat-boost{font-size:10px;margin:0} #scarlet-bag-v30 .profile-v3 .equipment-slot:not(.rarity-surface){background-color:transparent} #scarlet-bag-v30 .profile-v3 .effects-page-window{overflow:hidden;touch-action:pan-y} #scarlet-bag-v30 .profile-v3 .effects-page-track{display:flex;transition:transform .42s cubic-bezier(.22,.75,.25,1)} #scarlet-bag-v30 .profile-v3 .effects-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:0 0 100%;min-width:0} #scarlet-bag-v30 .profile-v3 .profile-effect{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 3px;gap:3px;min-width:0;height:105px;border:1px solid #76604366;border-radius:4px;background:#261b1ddd} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-icon{width:34px;height:34px} #scarlet-bag-v30 .profile-v3 .effect-stat{font-size:10px;line-height:12px;text-align:center;height:24px} #scarlet-bag-v30 .profile-v3 .effect-bonus{position:static;font-size:12px;line-height:15px} #scarlet-bag-v30 .profile-v3 .effect-timer{font-size:10px;line-height:13px;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-effects>.spell-page-rail{height:30px;min-height:30px;margin:0} #scarlet-bag-v30 .profile-v3 .profile-effects .page-rail-marker{transition:left .42s ease} @media(max-width:350px){#scarlet-bag-v30 .profile-v3 .profile-avatar-wrap,#scarlet-bag-v30 .profile-v3 .profile-avatar-button .portrait{width:116px;height:116px}#scarlet-bag-v30 .profile-v3 .development-row{grid-template-columns:20px minmax(0,1fr);gap:3px}#scarlet-bag-v30 .profile-v3 .development-control{grid-column:2;justify-self:end}#scarlet-bag-v30 .profile-v3 .development-row{min-height:69px}#scarlet-bag-v30 .bag-subtypes button{font-size:10px}} @media(max-height:700px){#scarlet-bag-v30 .magic-v8 .clan-tab{min-height:47px}#scarlet-bag-v30 .magic-v8 .school-animal{width:28px;height:28px}#scarlet-bag-v30 .school-heading{padding-top:3px}#scarlet-bag-v30 .school-heading h2{font-size:18px}#scarlet-bag-v30 .school-progress{padding-block:2px}#scarlet-bag-v30 .spell-caption{padding:4px 6px}#scarlet-bag-v30 .bag-categories button{min-height:42px}#scarlet-bag-v30 .bag-categories img{height:28px;width:28px}} @media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .profile-v3 .effects-page-track,#scarlet-bag-v30 .profile-v3 .page-rail-marker{transition:none}} #scarlet-bag-v30 .profile-v3 .development-upgrade:disabled{opacity:.35;cursor:default} #scarlet-bag-v30 .profile-v3 .profile-special{display:block;text-align:left;width:100%;min-height:32px;border:0;border-bottom:1px solid #92734a40;border-radius:0;padding:5px 0;background:none;color:#cbb18b;font-size:12px} #scarlet-bag-v30 .profile-v3 .profile-special::before,#scarlet-bag-v30 .profile-v3 .profile-special::after{display:none} #scarlet-bag-v30 .school-progress .meter{background-image:none;box-shadow:none;border-radius:0} #scarlet-bag-v30 .school-progress .meter::before,#scarlet-bag-v30 .school-progress .meter::after{display:none} #scarlet-bag-v30 .item-restoration{margin:12px 0} #scarlet-bag-v30 .restore-line{padding:7px 0} #scarlet-bag-v30 .restore-line>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:12px} #scarlet-bag-v30 .restore-line small{color:#91b0a0;font-size:11px} #scarlet-bag-v30 .restore-line .meter-fill{height:100%} #scarlet-bag-v30 .overlay.floating .sheet:has(.item-card) #sheet-title,#scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail) #sheet-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #scarlet-bag-v30 .overlay.floating .sheet:has(.item-card) .sheet-head,#scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail) .sheet-head{height:20px;min-height:20px;margin-bottom:4px;padding:0} #scarlet-bag-v30 .magic-v8 .spell-list>.empty,#scarlet-bag-v30 .bag-v18 .bag-grid>.empty{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:stretch;border:0;background:none;font-size:13px} #scarlet-bag-v30 .magic-v8 .spell-list>.empty::before,#scarlet-bag-v30 .bag-v18 .bag-grid>.empty::before{display:none} /* Exact presentation geometry from bag rev18 and magic rev8. Scope the prototype skin to these two screens, leaving the shared HUD intact. */ #scarlet-bag-v30 #content:has(.bag-v18),#scarlet-bag-v30 #content:has(.magic-v8){background:linear-gradient(#220d16c9,#190b12de),var(--art-wine) center/320px} #scarlet-bag-v30 .bag-page.bag-v18,#scarlet-bag-v30 .magic-page.magic-v8{padding:5px 10px 0;color:#ecdfc7;font:14px/1.4 Georgia,serif} #scarlet-bag-v30 :is(.bag-v18,.magic-v8) button{min-width:0;box-shadow:none;border-radius:0;flex:none;grid-column:auto;grid-row:auto;text-transform:none;letter-spacing:normal;text-shadow:none;font-weight:400} #scarlet-bag-v30 :is(.bag-v18,.magic-v8) button::before,#scarlet-bag-v30 :is(.bag-v18,.magic-v8) button::after{display:none} #scarlet-bag-v30 :is(.bag-v18,.magic-v8) svg{fill:none;stroke:currentColor;stroke-width:1.4} #scarlet-bag-v30 .bag-v18 .bag-categories{gap:5px;padding:0;border:0;min-height:0} #scarlet-bag-v30 .bag-v18 .bag-categories button{display:flex;flex-direction:column;gap:2px;min-height:44px;height:44px;justify-content:center;padding:5px 0 7px;border-bottom:1px solid #76563755} #scarlet-bag-v30 .bag-v18 .bag-categories button[aria-selected=true]{border-bottom:2px solid #c3a064} #scarlet-bag-v30 .bag-v18 .bag-categories img{width:29px;height:30px} #scarlet-bag-v30 .bag-v18 .bag-subtypes{padding:7px 0 3px;min-height:0;gap:3px} #scarlet-bag-v30 .bag-v18 .bag-subtypes button{padding:7px 3px;min-height:0;font:10px Arial;border-radius:2px;white-space:nowrap} #scarlet-bag-v30 .bag-v18 .bag-tools{margin:5px 0 6px;min-height:38px} #scarlet-bag-v30 .bag-effects{gap:3px;overflow:hidden} #scarlet-bag-v30 .bag-effects .effects-label{font:10px Arial;padding:4px 2px;color:#ac947a;min-height:0;margin-right:3px} #scarlet-bag-v30 .bag-effects-track{gap:6px;min-height:35px} #scarlet-bag-v30 .bag-effects-track .art-icon{width:27px;height:29px} #scarlet-bag-v30 .bag-effects-track button{gap:4px;padding:2px 4px;font:11px Arial} #scarlet-bag-v30 .bag-effects-track .effect-timer{font:11px Arial} #scarlet-bag-v30 .bag-effects .muted{font:10px Arial;color:#9f8c7e} #scarlet-bag-v30 .bag-effects>button:not(.effects-label){width:24px;height:35px;justify-content:center;padding:0;font:24px Georgia} #scarlet-bag-v30 .bag-effects>button[hidden]{display:none} #scarlet-bag-v30 .catalogue-tool{width:32px;height:36px;min-width:32px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:6px;color:#ccb186} #scarlet-bag-v30 .catalogue-tool svg{width:19px;height:19px;flex:none} #scarlet-bag-v30 .catalogue-search{display:block;padding:8px 0 0;flex:none} #scarlet-bag-v30 .catalogue-search[hidden]{display:none} #scarlet-bag-v30 .catalogue-search input{min-height:0;padding:9px;border:1px solid #85653f;background:#14091099;border-radius:2px;font:12px Arial} #scarlet-bag-v30 .bag-v18 .bag-grid{grid-template-rows:repeat(var(--bag-rows),max-content);align-content:start;gap:6px 8px;padding:1px 1px 0} #scarlet-bag-v30 .bag-v18 .bag-slot{width:min(100%,74px,calc((100cqh - (var(--bag-rows) - 1)*6px)/var(--bag-rows)));background-color:transparent;background-size:92% 92%;background-repeat:no-repeat;border:0;border-radius:0;box-shadow:none} #scarlet-bag-v30 .bag-v18 .bag-slot::before{display:block;inset:0;background:url('./assets/slot.webp') center/100% 100% no-repeat;z-index:2} #scarlet-bag-v30 .bag-v18 .bag-slot>img{padding:9%;inset:0;width:100%;height:100%;object-fit:contain;position:relative;z-index:1} #scarlet-bag-v30 .bag-v18 .item-quantity{right:7px;bottom:5px;font:12px Georgia;color:#f1dfba;z-index:3;display:flex;align-items:baseline;gap:0} #scarlet-bag-v30 .item-quantity small{font-size:10px;color:#c1ac8e} #scarlet-bag-v30 .item-fresh{position:absolute;left:6px;top:5px;width:5px;height:5px;border-radius:50%;background:#e3c687;box-shadow:0 0 4px #dab56766;z-index:3} #scarlet-bag-v30 .ready-mark{position:absolute;top:4px;left:6px;z-index:4;color:#ead4a0;font:18px/20px Georgia;text-shadow:0 1px 3px #000} #scarlet-bag-v30 .bag-v18>.spell-page-rail{height:44px;min-height:44px} #scarlet-bag-v30 .bag-v18>.spell-page-rail .spell-page-stop{height:44px;min-height:44px} #scarlet-bag-v30 .bag-footer{border-top:1px solid #98754255;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:42px;flex:none;font:10px Arial;color:#b8a186} #scarlet-bag-v30 .bag-footer::before{content:''} #scarlet-bag-v30 .catalogue-page-count{font:10px Arial;color:#d1b17e;height:auto;line-height:normal} #scarlet-bag-v30 .bag-footer .new-only{justify-self:end;padding:9px 5px;min-height:0;background:none;border:0;color:#d6bb87;font:11px Arial} #scarlet-bag-v30 .new-only b{font-weight:normal;background:#ad823325;border:1px solid #ad823345;border-radius:10px;padding:2px 5px;margin-left:3px} #scarlet-bag-v30 .new-only[aria-pressed=true]{text-decoration:underline} #scarlet-bag-v30 .magic-v8 .clan-tabs{gap:3px;padding:3px 0 0} #scarlet-bag-v30 .magic-v8 .clan-tab{position:relative;gap:3px;padding:4px 0 7px;min-height:0;font:10px Arial;line-height:normal;height:67px} #scarlet-bag-v30 .magic-v8 .school-animal{width:42px;height:43px;filter:brightness(.82);max-width:none} #scarlet-bag-v30 .magic-v8 [aria-selected=true] .school-animal{filter:brightness(1.08)} #scarlet-bag-v30 .magic-v8 .own-clan-dot{position:absolute;top:4px;right:10px;width:13px;height:13px;padding:0;border:1px solid #ac8c53;border-radius:50%;background:#221d1b;color:#cfaf70;display:grid;place-items:center} #scarlet-bag-v30 .magic-v8 .own-clan-dot svg{width:10px;height:10px;stroke-width:2} #scarlet-bag-v30 .magic-v8 .school-heading{padding:9px 2px 4px} #scarlet-bag-v30 .magic-v8 .school-heading h2{font:21px Georgia;margin:0;color:#e4ceab} #scarlet-bag-v30 .magic-v8 .school-heading p{font:10px Arial;color:#a38a73;margin:4px 0 0;min-height:11px} #scarlet-bag-v30 .magic-v8 .school-progress{padding:5px 2px 7px;font:10px Arial} #scarlet-bag-v30 .magic-v8 .school-progress .meter{height:3px;min-height:3px} #scarlet-bag-v30 .magic-v8 .magic-controls{gap:6px;margin-bottom:7px} #scarlet-bag-v30 .magic-v8 .magic-filters{gap:2px} #scarlet-bag-v30 .magic-v8 .magic-filters button{font:10px Arial;padding:7px 2px;min-height:0} #scarlet-bag-v30 .magic-v8 .magic-filters button[aria-pressed=true]{border-color:#98734070;background:#70313e35;color:#e5c99c} #scarlet-bag-v30 .magic-v8 .magic-controls .catalogue-tool{width:30px;height:30px;min-width:30px;min-height:30px} #scarlet-bag-v30 .magic-v8 .spell-list{gap:10px} #scarlet-bag-v30 .magic-v8 .magic-card{box-shadow:inset 0 0 0 2px #151013} #scarlet-bag-v30 .magic-v8 .spell-caption{padding:7px 8px 6px} #scarlet-bag-v30 .magic-v8 .spell-tier{gap:4px} #scarlet-bag-v30 .magic-v8 .spell-tier small{font:9px Arial;min-width:30px} #scarlet-bag-v30 .magic-v8 .tier-progress{margin-right:8px;min-width:20px} #scarlet-bag-v30 .magic-v8 .spell-values{gap:14px;margin-top:7px;padding-top:5px;font:11px Arial} #scarlet-bag-v30 .magic-v8 .spell-values svg{width:13px;height:13px} #scarlet-bag-v30 .magic-v8 .spell-values>small{font:9px Arial} #scarlet-bag-v30 .magic-v8 .mana-cost{gap:2px;font:11px Arial} #scarlet-bag-v30 .magic-v8 .mana-cost img{height:16px} #scarlet-bag-v30 .magic-v8 .mastered-mark{padding:2px;border-radius:50%;border-color:#b795596b;background:#17151bd9} #scarlet-bag-v30 .magic-v8 .mastered-mark svg{width:15px;height:15px;stroke-width:2.7} #scarlet-bag-v30 .magic-v8>.catalogue-page-count{height:19px} #scarlet-bag-v30 .sort-options .sort-option{display:block;width:100%;min-height:40px;margin-top:6px;padding:9px 12px;border:1px solid #96744860;border-radius:3px;background:#190c1260;color:#cebb9e;text-align:left;font:13px/20px Georgia} #scarlet-bag-v30 .sort-option::before,#scarlet-bag-v30 .sort-option::after{display:none} #scarlet-bag-v30 .sort-options .sort-option[aria-pressed=true]{border-color:#b29360;background:#70313e40;color:#f0dcb5} @media(max-height:700px){ #scarlet-bag-v30 .magic-v8 .clan-tab{padding:1px 0 3px;height:48px;font-size:9px} #scarlet-bag-v30 .magic-v8 .school-animal{width:32px;height:31px} #scarlet-bag-v30 .magic-v8 .school-heading{padding-top:4px} #scarlet-bag-v30 .magic-v8 .school-heading h2{font-size:18px} #scarlet-bag-v30 .magic-v8 .school-heading p{display:none} #scarlet-bag-v30 .magic-v8 .school-progress{padding:3px 2px} #scarlet-bag-v30 .magic-v8 .magic-controls{margin-bottom:4px} #scarlet-bag-v30 .magic-v8 .spell-list{gap:6px} #scarlet-bag-v30 .magic-v8 .spell-caption{padding:4px 6px} #scarlet-bag-v30 .magic-v8 .spell-values{margin-top:4px;padding-top:4px} #scarlet-bag-v30 .magic-v8 .spell-tier{margin-top:3px} #scarlet-bag-v30 .magic-v8>.spell-page-rail{height:30px;min-height:30px} #scarlet-bag-v30 .magic-v8>.catalogue-page-count{height:15px} } @media(max-width:350px){#scarlet-bag-v30 .magic-v8 .clan-tab{font-size:9px}#scarlet-bag-v30 .magic-v8 .own-clan-dot{right:5px}#scarlet-bag-v30 .magic-v8 .spell-values{gap:9px}#scarlet-bag-v30 .bag-v18 .bag-subtypes[data-category=gear] button{padding-inline:0}} @media(max-height:690px){#scarlet-bag-v30 .bag-v18 .bag-categories button{padding:2px 0 6px}#scarlet-bag-v30 .bag-v18 .bag-categories img{width:25px;height:25px}#scarlet-bag-v30 .bag-v18 .bag-subtypes{padding-top:5px}} /* Profile columns: source declarations, scoped to the runtime view. */ #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-heading{padding:0 24px 9px} #scarlet-bag-v30 .profile-v3 .profile-title-select{font-size:12px;min-height:24px;margin:0 auto} #scarlet-bag-v30 .profile-v3 .profile-heading .profile-name{font-size:22px} #scarlet-bag-v30 .profile-v3 .profile-layout{gap:10px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .equipment-side{gap:6px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-equipped{height:60px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-wrap{width:108px;margin:0 auto 4px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-button .portrait{width:108px;height:108px} #scarlet-bag-v30 .profile-v3 .profile-avatar-wrap .age-tag{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);z-index:2;font:12px Georgia;background:#2c1820;border:1px solid #9b7c49;border-radius:12px;padding:2px 8px;pointer-events:none} #scarlet-bag-v30 .profile-v3 .profile-clan{z-index:3} #scarlet-bag-v30 .profile-v3 .rank-compact{font:11px Arial;color:#b7a68a;margin:6px 0} #scarlet-bag-v30 .profile-v3 .rank-compact strong{font:17px Georgia;color:#e1c694;margin-left:5px} #scarlet-bag-v30 .profile-v3 .profile-xp{margin:5px 0 8px} #scarlet-bag-v30 .profile-v3 .profile-xp-label{font-size:9px} #scarlet-bag-v30 .profile-v3 .center-vitals{display:grid;gap:2px} #scarlet-bag-v30 .profile-v3 .vital{display:grid;grid-template-columns:18px 1fr;gap:5px;align-items:center;text-align:left;min-height:27px} #scarlet-bag-v30 .profile-v3 .vital img{width:16px;height:20px} #scarlet-bag-v30 .profile-v3 .vital>div{display:flex;align-items:baseline;justify-content:space-between;gap:4px;flex-wrap:wrap} #scarlet-bag-v30 .profile-v3 .vital span{font:10px Arial;color:#baa58f} #scarlet-bag-v30 .profile-v3 .vital strong{font:12px Arial;font-variant-numeric:tabular-nums;color:#eadbc0} #scarlet-bag-v30 .profile-v3 .profile-combat{border-top:1px solid #92734a55;margin:8px 0 4px;padding:7px 0;gap:0 15px} #scarlet-bag-v30 .profile-v3 .profile-combat .stat{padding:7px 0;font-size:12px;border:0} #scarlet-bag-v30 .profile-v3 .profile-combat strong{color:#e4c896;font:17px Georgia} #scarlet-bag-v30 .profile-v3 details{border-top:1px solid #92734a45} #scarlet-bag-v30 .profile-v3 summary{display:flex;align-items:center;justify-content:space-between;min-height:43px;cursor:pointer;list-style:none;font:14px Georgia;color:#d3bea0;gap:8px} #scarlet-bag-v30 .profile-v3 summary::-webkit-details-marker{display:none} #scarlet-bag-v30 .profile-v3 summary:after{content:'+';font:19px Georgia;color:#b49664} #scarlet-bag-v30 .profile-v3 details[open]>summary:after{content:'−'} #scarlet-bag-v30 .profile-v3 summary small{font:10px Arial;color:#aa9576;margin-left:auto} #scarlet-bag-v30 .profile-v3 .profile-toolbar{padding:0;border-top:1px solid #92734a45;border-bottom:0} #scarlet-bag-v30 .profile-v3 .profile-toolbar .achievements-button{min-height:43px;font-size:14px;padding:3px 0;background:none} #scarlet-bag-v30 .profile-v3 .profile-toolbar .art-icon{width:27px;height:30px} #scarlet-bag-v30 .profile-v3 .effects-empty{font:11px Arial;color:#958577;margin:5px 0 9px;display:flex;justify-content:space-between} #scarlet-bag-v30 .profile-v3 .detail-copy{font:12px/1.6 Arial;color:#b9a994;margin:0 0 12px} @media(max-width:350px){#scarlet-bag-v30 .profile-v3 .profile-layout{gap:7px}#scarlet-bag-v30 .profile-v3 .profile-heading .profile-name{font-size:20px}#scarlet-bag-v30 .profile-v3 .vital>div{display:block}#scarlet-bag-v30 .profile-v3 .vital span{display:block;font-size:9px}#scarlet-bag-v30 .profile-v3 .vital{min-height:31px}#scarlet-bag-v30 .profile-v3 .profile-combat .stat{font-size:10px}#scarlet-bag-v30 .profile-v3 .profile-layout{--sc-equipment-width:50px}} #scarlet-bag-v30 .profile-v3 .profile-xp-label{display:flex;flex-direction:column;align-items:center;gap:2px;font:10px/13px Arial;font-variant-numeric:tabular-nums}#scarlet-bag-v30 .profile-v3 .profile-xp-label span:last-child{white-space:nowrap;color:#dfcaab;font-size:11px}#scarlet-bag-v30 .profile-v3 .age-tag{white-space:nowrap}#scarlet-bag-v30 .profile-v3 .draft-value{display:block;font:11px Arial;color:#d8b96d;margin-top:3px}#scarlet-bag-v30 .profile-v3 .demo-reset{background:none;border:0;padding:8px 0 12px;color:#bfa377;font:11px Arial;text-decoration:underline}#scarlet-bag-v30 .profile-v3 .development-footer{margin-bottom:12px}#scarlet-bag-v30 .profile-v3 #demo-result:empty{display:none} #scarlet-bag-v30 .profile-v3 .profile-center .profile-combat{display:flex;flex-direction:column;border:0;margin:6px 0 0;padding:0;gap:0} #scarlet-bag-v30 .profile-v3 .profile-center .profile-combat .stat{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;min-height:0;height:22px;font:10px/14px Arial;text-align:left;gap:5px;flex-wrap:nowrap} #scarlet-bag-v30 .profile-v3 .profile-center .profile-combat strong{font:14px/14px Georgia} #scarlet-bag-v30 .profile-v3 .profile-development{border-top:1px solid #92734a45} #scarlet-bag-v30 .profile-v3 .profile-development .development-heading{padding:4px 0 0} #scarlet-bag-v30 .profile-v3 .profile-development h4{font:14px Georgia;color:#c8b394} #scarlet-bag-v30 .profile-v3 #edit-development{background:none;border:0;font:12px Arial;color:#d8b875;padding:12px 0 12px 12px;min-height:44px} #scarlet-bag-v30 .profile-v3 #edit-development[aria-pressed=true]{color:#f0d3a4;text-decoration:underline} #scarlet-bag-v30 .profile-v3 .profile-development:not(.is-editing) .development-control{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{min-height:44px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat{display:grid;grid-template-columns:1fr;gap:2px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{font-size:10px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat strong{font-size:13px} #scarlet-bag-v30 .profile-v3 .effects-empty{margin:7px 0} #scarlet-bag-v30 .profile-v3 .profile-layout{align-items:center} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-wrap{width:158px;margin:0 auto 10px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-button .portrait{width:158px;height:158px} #scarlet-bag-v30 .profile-v3 .rank-compact{margin:12px 0 0} #scarlet-bag-v30 .profile-v3 .profile-avatar-wrap .age-tag{font-size:14px;padding:3px 11px} #scarlet-bag-v30 .profile-v3 .sheet-content>.profile-xp{margin:10px 0 14px} #scarlet-bag-v30 .profile-v3 .profile-xp-label{flex-direction:row;justify-content:space-between;font-size:11px;margin-bottom:4px} #scarlet-bag-v30 .profile-v3 .profile-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;border-top:1px solid #92734a55;padding-top:10px} #scarlet-bag-v30 .profile-v3 .column-stats{min-width:0;padding-right:10px;border-right:1px solid #92734a40} #scarlet-bag-v30 .profile-v3 .profile-columns h4{font:15px/19px Georgia;color:#cfb68e;margin:0} #scarlet-bag-v30 .profile-v3 .column-stats>h4{height:42px;display:flex;align-items:flex-start;padding-top:0} #scarlet-bag-v30 .profile-v3 .column-stat{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;min-height:29px;padding:5px 0;border:0;background:none;text-align:left;font:11px/16px Arial;color:#bead95} #scarlet-bag-v30 .profile-v3 .column-stat strong{font:14px/16px Georgia;color:#ead4ad;font-variant-numeric:tabular-nums;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .column-stat:hover{color:#f1d8ac} #scarlet-bag-v30 .profile-v3 .profile-development{border:0;min-width:0} #scarlet-bag-v30 .profile-v3 .profile-development .development-heading{display:flex;flex-direction:column;align-items:flex-start;padding:0;min-height:42px;gap:3px} #scarlet-bag-v30 .profile-v3 .development-points strong{font:10px/14px Arial;color:#bca077} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 3px;padding:5px 0;min-height:59px;position:relative} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{display:none} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat{display:contents} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:1/-1;font:10px/14px Arial;color:#bead95} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:1;grid-row:2;font:11px/16px Arial;gap:0;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:2;grid-row:2;gap:0;margin:0} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{width:32px;min-width:32px;height:36px;min-height:36px;font:11px Arial} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade:before{inset:3px 1px} #scarlet-bag-v30 .profile-v3 .profile-development .draft-value{grid-column:1/-1;font:10px/13px Arial;margin:1px 0 3px} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions{display:flex;flex-wrap:wrap;gap:4px} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions .action{flex:1 0 100%;margin:0;min-height:36px;font-size:12px} #scarlet-bag-v30 .profile-v3 .effects-empty{border-top:1px solid #92734a45;padding-top:11px;margin:13px 0 10px} @media(max-width:370px){#scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-wrap{width:128px}#scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-button .portrait{width:128px;height:128px}#scarlet-bag-v30 .profile-v3 .profile-columns{gap:7px}#scarlet-bag-v30 .profile-v3 .column-stats{padding-right:7px}#scarlet-bag-v30 .profile-v3 .profile-columns h4{font-size:13px}#scarlet-bag-v30 .profile-v3 .column-stat{font-size:10px}#scarlet-bag-v30 .profile-v3 .column-stat strong{font-size:13px}#scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{font-size:10px}#scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{width:30px;min-width:30px}} /* Development first; values have their own full-width line for six-digit resources. */ #scarlet-bag-v30 .profile-v3 .column-stats{border-right:0;padding-right:0;border-left:1px solid #92734a40;padding-left:10px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{grid-template-columns:18px minmax(0,1fr);column-gap:5px;min-height:79px;padding:7px 0} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{display:block;width:16px;height:20px;grid-column:1;grid-row:1} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:2;grid-row:1;align-self:center} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:1/-1;grid-row:2;font:11px/16px Arial;font-variant-numeric:tabular-nums;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:1/-1;grid-row:3;justify-content:flex-end;min-height:36px} #scarlet-bag-v30 .profile-v3 .profile-development .draft-value{grid-row:4} @media(max-width:370px){#scarlet-bag-v30 .profile-v3 .column-stats{padding-left:7px}#scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{font-size:10px}} /* Compact resource rows: controls share the label line, full values stay below. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-heading{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:42px;gap:4px} #scarlet-bag-v30 .profile-v3 .profile-development .development-points{display:inline-flex;align-items:center;gap:3px;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-development .development-points>.art-icon{width:21px;height:25px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{grid-template-columns:16px minmax(0,1fr) auto;column-gap:4px;min-height:54px;padding:3px 0 5px;align-items:center} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{grid-column:1;grid-row:1} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:2;grid-row:1;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:3;grid-row:1;min-height:32px} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{height:32px;min-height:32px} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:1/-1;grid-row:2;line-height:16px} #scarlet-bag-v30 .profile-v3 .profile-development .draft-value{grid-column:1/-1;grid-row:3} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{border-bottom-color:transparent} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:1/3;grid-row:1} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{grid-column:1;grid-row:2;align-self:center} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:2/-1;grid-row:2;align-self:center} /* Avatar actions occupy the upper corners; experience aligns with the bottom equipment row. */ #scarlet-bag-v30 .profile-v3 .profile-layout{align-items:stretch} #scarlet-bag-v30 .profile-v3 .profile-center{position:relative;display:flex;flex-direction:column;align-items:center;min-height:258px;padding:20px 0 0} #scarlet-bag-v30 .profile-v3 .portrait-shortcuts{position:absolute;inset:0 0 auto;height:40px;pointer-events:none;z-index:4} #scarlet-bag-v30 .profile-v3 .portrait-shortcut{position:absolute;top:0;width:38px;height:38px;padding:3px;border:0;background:none;pointer-events:auto} #scarlet-bag-v30 .profile-v3 .achievements-shortcut{left:0} #scarlet-bag-v30 .profile-v3 .rating-shortcut{right:0} #scarlet-bag-v30 .profile-v3 .portrait-shortcut img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #0009)} #scarlet-bag-v30 .profile-v3 .portrait-shortcut:hover{filter:brightness(1.15)} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-wrap{width:144px;margin:0 auto 6px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-button .portrait{width:144px;height:144px} #scarlet-bag-v30 .profile-v3 .rank-compact{margin:7px 0 0;font-size:10px;line-height:15px} #scarlet-bag-v30 .profile-v3 .rank-compact strong{font-size:15px} #scarlet-bag-v30 .profile-v3 .current-rating{font:10px/16px Arial;color:#baa58a;margin-top:2px} #scarlet-bag-v30 .profile-v3 .current-rating strong{font:12px/16px Georgia;color:#e0c591;margin-left:4px;font-variant-numeric:tabular-nums} #scarlet-bag-v30 .profile-v3 .profile-center .profile-xp{width:100%;margin: auto 0 0;padding-top:6px} #scarlet-bag-v30 .profile-v3 .profile-center .profile-xp-label{flex-direction:column;gap:0;margin-bottom:3px;font:9px/12px Arial} #scarlet-bag-v30 .profile-v3 .profile-center .profile-xp-label span:last-child{font:10px/12px Arial} #scarlet-bag-v30 .profile-v3 .profile-center .meter{height:10px;padding:3px 4px} #scarlet-bag-v30 .profile-v3 .profile-center .meter-fill{height:4px} @media(max-width:370px){#scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-wrap{width:124px}#scarlet-bag-v30 .profile-sheet:has(.profile-v3) .profile-avatar-button .portrait{width:124px;height:124px}#scarlet-bag-v30 .profile-v3 .portrait-shortcut{width:34px;height:34px}} /* Stable development controls: fixed slots, preview values in place. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-heading{height:42px;min-height:42px;align-items:flex-start;align-content:flex-start;padding:0;gap:3px} #scarlet-bag-v30 .profile-v3 .profile-development .development-heading h4,#scarlet-bag-v30 .profile-v3 .column-stats>h4{margin:0;padding-top:0;line-height:19px} #scarlet-bag-v30 .profile-v3 .profile-development .development-points{height:19px} #scarlet-bag-v30 .profile-v3 .profile-development .development-points>.art-icon{width:17px;height:20px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{height:58px;min-height:58px;grid-template-rows:30px 20px;padding:2px 0 6px} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{display:flex;gap:4px;min-height:30px;width:64px} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{display:inline-flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:30px;min-height:30px;padding:0;border:1px solid #887149;border-radius:50%;background:linear-gradient(145deg,#38281f,#1b1414);color:#dfc58c;font:18px/1 Georgia;box-shadow:inset 0 1px 0 #dac29224,0 1px 2px #0006;cursor:pointer} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade:not(.development-minus){font:11px/1 Arial} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade::before,#scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade::after{display:none} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade:disabled{opacity:.3;cursor:default} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade:not(:disabled):hover{border-color:#dfc58c;background:#493323} #scarlet-bag-v30 .profile-v3 .profile-development button:focus-visible{outline:2px solid #dfc58c;outline-offset:2px} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value.is-preview{color:#e2c078} #scarlet-bag-v30 .profile-v3 .development-footer{margin:3px 0 0} #scarlet-bag-v30 .profile-v3 .profile-development .development-pending{height:16px;margin:0 0 5px;font:10px/16px Arial;white-space:nowrap;color:#bca889} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions{display:grid;grid-template-columns:.85fr 1.15fr;gap:4px} #scarlet-bag-v30 .profile-v3 .profile-development .development-command{min-width:0;height:30px;padding:0 2px;border:1px solid #806644;border-radius:3px;background:#36201d;color:#d7c09d;font:10px/1 Arial;cursor:pointer} #scarlet-bag-v30 .profile-v3 .profile-development .development-command:disabled{opacity:.3;cursor:default} #scarlet-bag-v30 .profile-v3 #demo-result,#scarlet-bag-v30 .profile-v3 #demo-result:empty{display:block;height:28px;margin:5px 0 0;font:10px/13px Arial;color:#bca889} #scarlet-bag-v30 .profile-v3 #demo-reset{height:22px;margin:0;padding:0;font:10px/22px Arial} #scarlet-bag-v30 .profile-v3 #demo-reset:disabled{opacity:.3;cursor:default} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions{grid-template-columns:30px 30px;justify-content:end;gap:6px} #scarlet-bag-v30 .profile-v3 .profile-development .development-command{display:flex;align-items:center;justify-content:center;width:30px;padding:0} #scarlet-bag-v30 .profile-v3 .profile-development .development-command svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #scarlet-bag-v30 .profile-v3 .profile-development .development-command:not(:disabled):hover{border-color:#dfc58c;background:#493323} /* Reduced resource block, with stable status and action slots. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-heading,#scarlet-bag-v30 .profile-v3 .column-stats>h4{height:26px;min-height:26px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{height:48px;min-height:48px;grid-template-rows:28px 18px;padding:0 0 2px} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{min-height:28px} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{height:28px;min-height:28px} #scarlet-bag-v30 .profile-v3 .development-footer{margin:4px 0 0} #scarlet-bag-v30 .profile-v3 .profile-development .development-pending{height:16px;line-height:16px;margin:0 0 3px} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions{grid-template-columns:24px 30px 30px;justify-content:end;gap:5px} #scarlet-bag-v30 .profile-v3 #demo-reset{height:30px;line-height:30px;padding:0;font-size:19px;text-decoration:none} #scarlet-bag-v30 .profile-v3 #demo-result,#scarlet-bag-v30 .profile-v3 #demo-result:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0} #scarlet-bag-v30 .profile-v3 .stat-group h5{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0} #scarlet-bag-v30 .profile-v3 .stat-group+.stat-group{margin-top:6px;padding-top:6px;border-top:1px solid #92734a40} #scarlet-bag-v30 .profile-v3 .stat-group .column-stat{min-height:25px;padding:3px 0} #scarlet-bag-v30 .profile-v3 .active-effects-demo{border-top:1px solid #92734a45;margin-top:12px;padding:10px 0} #scarlet-bag-v30 .profile-v3 .effects-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px} #scarlet-bag-v30 .profile-v3 .effects-heading h4{margin:0;font:14px/20px Georgia;color:#d3bea0} #scarlet-bag-v30 .profile-v3 .effects-heading>span{font:10px Arial;color:#aa9576} #scarlet-bag-v30 .profile-v3 .active-effect{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;width:100%;padding:4px 0;border:0;background:none;text-align:left;color:#d3bea0;cursor:pointer} #scarlet-bag-v30 .profile-v3 .active-effect>img{width:36px;height:36px;object-fit:contain} #scarlet-bag-v30 .profile-v3 .effect-copy{display:flex;flex-direction:column;gap:3px;min-width:0} #scarlet-bag-v30 .profile-v3 .effect-copy>span{font:11px/14px Arial} #scarlet-bag-v30 .profile-v3 .effect-copy>strong{font:10px/13px Arial;color:#bca16d} #scarlet-bag-v30 .profile-v3 .effect-time{font:11px/16px Arial;color:#b2a38e;font-variant-numeric:tabular-nums;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .special-property-list{padding:0 0 5px} #scarlet-bag-v30 .profile-v3 .special-property{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:29px;width:100%;padding:5px 0;border:0;background:none;text-align:left;font:11px/16px Arial;color:#bead95;cursor:pointer} #scarlet-bag-v30 .profile-v3 .special-property strong{font:14px Georgia;color:#ead4ad;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .active-effect:hover,#scarlet-bag-v30 .profile-v3 .special-property:hover{filter:brightness(1.15)} #scarlet-bag-v30 .profile-v3 .active-effect:focus-visible,#scarlet-bag-v30 .profile-v3 .special-property:focus-visible{outline:1px solid #bca16d;outline-offset:2px} /* Reveal editing actions without changing their occupied space. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-minus:disabled{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .profile-development:not(.has-draft) #demo-cancel, #scarlet-bag-v30 .profile-v3 .profile-development:not(.has-draft) #demo-confirm, #scarlet-bag-v30 .profile-v3 .profile-development:not(.has-draft) .development-pending{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .profile-development:not(.has-committed) #demo-reset{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .profile-effects{margin-bottom:10px} /* Resource maxima and upgrade controls share the value baseline. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-row{grid-template-columns:16px minmax(0,1fr) 64px;grid-template-rows:16px 28px;height:48px;min-height:48px;padding:0 0 4px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:1/-1;grid-row:1} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:2;grid-row:2;align-self:center} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:3;grid-row:2;align-self:center} /* Large resource icon before label and maximum. */ #scarlet-bag-v30 .profile-v3 .profile-development .development-row{grid-template-columns:26px minmax(0,1fr) 60px;grid-template-rows:18px 20px;column-gap:3px;height:50px;min-height:50px;padding:4px 0 8px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:1;grid-row:1;align-self:end;font:10px/16px Arial} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:1;grid-row:2;align-self:start;line-height:20px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:26px;height:32px;object-fit:contain} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:3;grid-row:1/3;align-self:center} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{width:60px} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{width:28px;min-width:28px} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{grid-column:1} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:2} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:2} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{width:19px;height:24px} /* Empty slots retain their frame without a rarity fill. */ #scarlet-bag-v30 .profile-v3 .profile-layout .empty-equipment{background:url(/frontend/assets/slot.webp) center/100% 100% no-repeat;background-color:transparent} #scarlet-bag-v30 .profile-v3 .column-stat .stat-buff{color:#a9bf83;font:10px/16px Arial;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .column-stat .stat-name{flex:1} #scarlet-bag-v30 .profile-v3 .profile-development .development-row.has-resource-buff{height:62px;min-height:62px;grid-template-rows:18px 20px 12px} #scarlet-bag-v30 .profile-v3 .profile-development .resource-buff{grid-column:2/-1;grid-row:3;white-space:nowrap;font:9px/12px Arial;color:#a9bf83} #scarlet-bag-v30 .profile-v3 .profile-effects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #scarlet-bag-v30 .profile-v3 .profile-effect{display:grid;grid-template-columns:1fr;justify-items:center;gap:3px;padding:8px 4px 6px;border:1px solid #76604366;border-radius:4px;background:linear-gradient(#39232688,#171315aa);color:#dcc49e} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-icon{width:40px;height:40px;object-fit:contain} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-stat{font:11px/15px Arial;color:#d5c3a9} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-bonus{position:static;font:14px/18px Georgia;color:#b9cd91;text-shadow:none} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-timer{display:block;width:100%;margin-top:3px;padding-top:5px;border-top:1px solid #76604355;text-align:center;font:11px/15px Arial;font-variant-numeric:tabular-nums;color:#c9b9a1} #scarlet-bag-v30 .profile-v3 .buffs-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px} #scarlet-bag-v30 .profile-v3 .buffs-heading h4{margin-bottom:0} #scarlet-bag-v30 .profile-v3 .buffs-heading>span{font:11px Arial;color:#bba785} #scarlet-bag-v30 .profile-v3 .toggle-effects{display:block;width:100%;padding:9px 0;margin-top:6px;border:1px solid #76604366;border-radius:3px;background:#231518;color:#cbb18b;font:11px Arial;cursor:pointer} /* Bonus belongs to the result; effects occupy a single scrollable row. */ #scarlet-bag-v30 .profile-v3 .stat-numbers{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;flex-shrink:0} #scarlet-bag-v30 .profile-v3 .column-stat .stat-name{min-width:0} #scarlet-bag-v30 .profile-v3 .profile-effects .profile-effects-grid{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:1px 1px 3px} #scarlet-bag-v30 .profile-v3 .profile-effects .profile-effect{display:flex;flex:0 0 62px;min-width:62px;flex-direction:column;gap:2px;padding:5px 3px;scroll-snap-align:start;border:1px solid #76604366;background:#261b1ddd} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-icon{width:32px;height:32px} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-bonus{font:12px/15px Arial} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-timer{font:10px/13px Arial;margin:0;padding:0;border:0} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-stat{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #scarlet-bag-v30 .profile-v3 .buffs-heading{align-items:center;margin-bottom:4px} #scarlet-bag-v30 .profile-v3 .buffs-heading h4{font-size:14px} #scarlet-bag-v30 .profile-v3 .buffs-heading small{margin-left:5px;font:10px Arial;color:#a99576} #scarlet-bag-v30 .profile-v3 #active-effects-grid:focus-visible{outline:1px solid #bda16d;outline-offset:2px} #scarlet-bag-v30 .profile-v3 .effects-page-window{touch-action:pan-y;user-select:none;-webkit-user-select:none} #scarlet-bag-v30 .profile-v3 .effects-page-track{display:flex;transition:transform 300ms cubic-bezier(.22,.75,.25,1);will-change:transform} #scarlet-bag-v30 .profile-v3 .effects-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:0 0 100%;min-width:0;padding:1px;box-sizing:border-box} #scarlet-bag-v30 .profile-v3 .effects-page .profile-effect{min-width:0;width:100%;box-sizing:border-box} #scarlet-bag-v30 .profile-v3 .effects-page-rail{margin:0} #scarlet-bag-v30 .profile-v3 .effects-page-rail .page-rail-marker{transition:left 300ms cubic-bezier(.22,.75,.25,1)} #scarlet-bag-v30 .profile-v3 .effects-page-window:focus-visible{outline:1px solid #bda16d;outline-offset:2px} @media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .profile-v3 .effects-page-track,#scarlet-bag-v30 .profile-v3 .effects-page-rail .page-rail-marker{transition:none}} /* Runtime markup adapters for the exact profile layout. */ #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .sheet-content{padding:0 10px 12px} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .sheet-head{min-height:12px;height:12px;margin:0;padding:0} #scarlet-bag-v30 .profile-v3 .profile-heading{min-height:38px} #scarlet-bag-v30 .profile-v3 .profile-layout{margin:0 0 8px;gap:10px} #scarlet-bag-v30 .profile-v3 .profile-center{padding-top:20px;min-height:258px} #scarlet-bag-v30 .profile-v3 .profile-identity{margin:13px 0 0;font:10px/15px Arial;color:#b7a68a} #scarlet-bag-v30 .profile-v3 .profile-rank{font:15px Georgia;color:#e1c694;margin-left:5px} #scarlet-bag-v30 .profile-v3 .profile-rating{margin:2px 0 0} #scarlet-bag-v30 .profile-v3 .profile-rating-label{font:10px/16px Arial;color:#baa58a} #scarlet-bag-v30 .profile-v3 .profile-columns{margin-top:0;padding-top:10px;gap:10px} #scarlet-bag-v30 .profile-v3 .column-stats{padding-right:0;border-right:0;border-left:1px solid #92734a40;padding-left:10px} #scarlet-bag-v30 .profile-v3 .column-stat{font:11px/16px Arial;color:#bead95;min-height:25px;padding:3px 0} #scarlet-bag-v30 .profile-v3 .column-stat strong{font:14px Georgia;color:#ead4ad} #scarlet-bag-v30 .profile-v3 .column-stats>h4{min-height:26px;height:26px} #scarlet-bag-v30 .profile-v3 .profile-development .development-heading{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;height:26px;min-height:26px} #scarlet-bag-v30 .profile-v3 .profile-columns h4{font:14px/19px Georgia;color:#c8b394} #scarlet-bag-v30 .profile-v3 .profile-development .development-points{font:10px/14px Arial;color:#bca077;gap:3px} #scarlet-bag-v30 .profile-v3 .development-points strong{font-weight:400} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{grid-template-columns:26px minmax(0,1fr) 60px;grid-template-rows:18px 20px;column-gap:3px;row-gap:0;height:50px;min-height:50px;padding:4px 0 8px} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat{display:contents} #scarlet-bag-v30 .profile-v3 .profile-development .development-row>.art-icon{grid-column:1;grid-row:1/3;width:19px;height:24px;justify-self:center;align-self:center} #scarlet-bag-v30 .profile-v3 .profile-development .development-stat>span:first-child{grid-column:2;grid-row:1;align-self:end;font:10px/16px Arial} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{grid-column:2;grid-row:2;font:11px/20px Arial;gap:0;display:block;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-development .development-control{grid-column:3;grid-row:1/3;align-self:center;width:60px;gap:4px;min-height:28px;margin:0} #scarlet-bag-v30 .profile-v3 .profile-development .development-upgrade{width:28px;min-width:28px;height:28px;min-height:28px} #scarlet-bag-v30 .profile-v3 .profile-development .development-footer{height:53px;min-height:53px;margin:4px 0 0} #scarlet-bag-v30 .profile-v3 .profile-development .development-actions{grid-template-columns:30px 30px;gap:5px} #scarlet-bag-v30 .profile-v3 .profile-development .development-command::before,#scarlet-bag-v30 .profile-v3 .profile-development .development-command::after{display:none} #scarlet-bag-v30 .profile-v3 .development-preview{grid-column:2/-1;font:9px/12px Arial;color:#e2c078} #scarlet-bag-v30 .profile-v3 .profile-stat-value.is-boosted,#scarlet-bag-v30 .profile-v3 .stat-boost{color:#86b0a3} #scarlet-bag-v30 .profile-v3 .stat-boost{font:10px/16px Arial;margin-right:6px} #scarlet-bag-v30 .profile-v3 .profile-effects{margin-top:12px;padding-top:9px} #scarlet-bag-v30 .profile-v3 .profile-effect{height:76px;min-height:76px;padding:5px 3px;gap:2px} #scarlet-bag-v30 .profile-v3 .effect-stat{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-icon{width:32px;height:32px} #scarlet-bag-v30 .profile-v3 .profile-effect .effect-timer{margin:0;padding:0;border:0} #scarlet-bag-v30 .profile-v3 .profile-effects .spell-page-rail{height:44px;min-height:44px} #scarlet-bag-v30 .profile-v3 .effects-empty{font:11px Arial;margin:5px 0 9px;padding:0;border:0;min-height:76px} #scarlet-bag-v30 .profile-v3 .buffs-heading h4{font:14px Georgia} #scarlet-bag-v30 .profile-v3 .special-properties-demo{margin-top:10px;border-top:1px solid #92734a45} #scarlet-bag-v30 .profile-v3 .special-property .profile-stat-value{display:flex} #scarlet-bag-v30 .profile-v3 .profile-stat-tabs{display:flex;gap:8px;min-height:29px;margin:-4px 0 5px;border-bottom:1px solid #92734a50} #scarlet-bag-v30 .profile-v3 .profile-stat-tab{appearance:none;flex:1 1 auto;min-width:0;min-height:29px;height:auto;padding:3px 0 6px;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;background:none;color:#b19d83;font:10px/15px Arial;cursor:pointer;white-space:nowrap} #scarlet-bag-v30 .profile-v3 .profile-stat-tab::before,#scarlet-bag-v30 .profile-v3 .profile-stat-tab::after{display:none} #scarlet-bag-v30 .profile-v3 .profile-stat-tab[aria-selected=true]{border-bottom-color:#c6a46b;color:#edd0a0;text-shadow:0 0 10px #d4a25344} #scarlet-bag-v30 .profile-v3 .profile-stat-tab:focus-visible{outline:1px solid #c6a46b;outline-offset:2px} #scarlet-bag-v30 .profile-v3 .profile-stat-panels{display:grid} #scarlet-bag-v30 .profile-v3 .profile-stat-panel{grid-area:1/1;min-width:0} #scarlet-bag-v30 .profile-v3 .profile-stat-panel.is-inactive{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .profile-v3 .resistance-stat{min-height:32px;border-bottom:1px solid #92734a24} #scarlet-bag-v30 .profile-v3 .resistance-stat.is-zero{opacity:.55} #scarlet-bag-v30 .profile-v3 .resistance-help{margin:11px 0 0;color:#ab987d;font:10px/15px Arial} @media(max-width:370px){#scarlet-bag-v30 .profile-v3 .profile-layout{gap:7px}#scarlet-bag-v30 .profile-v3 .profile-columns{gap:7px}#scarlet-bag-v30 .profile-v3 .column-stats{padding-left:7px}#scarlet-bag-v30 .profile-v3 .profile-columns h4{font-size:13px}} /* Centered catalogue dialogs: same thin rim, header and anchored action as the prototypes. */ #scarlet-bag-v30 .overlay.floating:has(.magic-v8-detail,.item-card,.sort-options,.effect-summary){background:#07070baf;backdrop-filter:blur(3px)} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card,.sort-options,.effect-summary){width:calc(100% - 16px);max-width:424px;max-height:calc(100% - 24px);padding:0;border:1px solid #a58150;border-radius:8px;border-image:none;background:linear-gradient(#321921ee,#180c13f5),var(--art-wine);box-shadow:0 12px 48px #000a;overflow:hidden} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card)::before,#scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card)::after{display:none} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card) .sheet-head{height:0;min-height:0;padding:0;margin:0;z-index:5} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card) #close-sheet{position:absolute;right:4px;top:4px;width:36px;height:36px;min-height:36px;background:none;border:0;font:25px Arial;color:#bd9d70} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card) #close-sheet::after{content:'×';display:block;background:none;position:static;transform:none} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card) #close-sheet img{display:none} #scarlet-bag-v30 .overlay.floating .sheet:has(.magic-v8-detail,.item-card) .sheet-content{padding:0;overflow:hidden;display:flex;min-height:0} #scarlet-bag-v30 .magic-v8-detail,#scarlet-bag-v30 .overlay.floating .item-card{display:flex;flex-direction:column;min-height:0;width:100%;font:14px/1.4 Georgia;color:#ecdfc7} #scarlet-bag-v30 .magic-v8-detail .spell-modal-head{padding:18px 34px 14px 16px;flex:none} #scarlet-bag-v30 .magic-v8-detail .spell-modal-head>img{width:82px;height:82px} #scarlet-bag-v30 .magic-v8-detail .spell-modal-head h3{font:20px/1.2 Georgia;color:#e2cda9;margin:5px 0} #scarlet-bag-v30 .magic-v8-detail .spell-modal-head small{font:11px Arial;color:#b39361} #scarlet-bag-v30 .magic-v8-detail .spell-modal-head span{font:10px Arial;color:#a89278} #scarlet-bag-v30 .spell-modal-body{overflow:auto;min-height:0;padding:0 16px 14px} #scarlet-bag-v30 .magic-v8-detail .card-lore{font:12px/1.6 Georgia;color:#baa48f;margin:13px 0 14px} #scarlet-bag-v30 .magic-v8-detail .next-level-heading{font:13px Georgia;margin:16px 0 4px} #scarlet-bag-v30 .magic-v8-detail .spell-facts-new>div{gap:7px;padding:10px 0;font:12px Arial;color:#c5ae91} #scarlet-bag-v30 .magic-v8-detail .spell-facts-new strong{font:12px Arial;color:#e5ceaa} #scarlet-bag-v30 .magic-v8-detail .card-note{font:12px/1.6 Arial;color:#bda78e;margin:10px 0} #scarlet-bag-v30 .magic-v8-detail .stat-increase{padding:3px 5px;margin-left:3px;font:11px Arial} #scarlet-bag-v30 .item-card-actions{flex:none;padding:10px 18px 16px;border-top:1px solid #98754255;background:#1c0d14e8} #scarlet-bag-v30 .item-card-actions>.action{margin:0;padding:10px;min-height:44px;font:15px Georgia} #scarlet-bag-v30 .magic-v8-detail .spell-cost{display:flex;align-items:center;gap:7px;border:0;padding:0 0 10px;font:13px Arial;color:#e4ccab;margin:0} #scarlet-bag-v30 .magic-v8-detail .spell-cost>span:first-child{display:flex;gap:7px;align-items:center} #scarlet-bag-v30 .magic-v8-detail .spell-cost strong{font-weight:400} #scarlet-bag-v30 .magic-v8-detail .spell-cost>span:last-child{margin-left:auto;font:11px Arial;color:#9f896f} #scarlet-bag-v30 .magic-v8-detail .spell-cost img{width:19px;height:21px} #scarlet-bag-v30 .study-requirement{display:flex;justify-content:space-between;font:11px Arial;color:#b3b095} #scarlet-bag-v30 .study-requirement small{font:11px Arial;color:#9f896f} #scarlet-bag-v30 .study-requirement.unmet{color:#d29888} #scarlet-bag-v30 .mastery-complete{font:13px Georgia;color:#c6a66b;padding:12px 0} @media(max-width:350px){#scarlet-bag-v30 .magic-v8-detail .spell-modal-head>img{width:68px;height:68px}#scarlet-bag-v30 .magic-v8-detail .spell-modal-head h3{font-size:18px}#scarlet-bag-v30 .magic-v8-detail .spell-facts-new>div{gap:5px;font-size:11px}} #scarlet-bag-v30 .overlay.floating .item-card .item-card-heading{display:flex;gap:13px;align-items:center;padding:20px 32px 15px 18px;flex:none;border-bottom:1px solid #98754255;margin:0} #scarlet-bag-v30 .overlay.floating .item-card .item-preview{width:85px;height:85px;min-width:85px;margin:0;background-size:92% 92%;background-repeat:no-repeat} #scarlet-bag-v30 .overlay.floating .item-card .item-preview>img{padding:9%;width:100%;height:100%;object-fit:contain} #scarlet-bag-v30 .overlay.floating .item-card .item-preview::before{content:'';position:absolute;inset:0;background:url('./assets/slot.webp') center/100% 100%;pointer-events:none;z-index:2} #scarlet-bag-v30 .overlay.floating .item-card h3{font:20px/1.16 Georgia;margin:0;overflow-wrap:anywhere} #scarlet-bag-v30 .item-card .card-rarity{margin:0 0 5px;font:11px Arial} #scarlet-bag-v30 .item-card .item-kind{font:11px/1.4 Arial;color:#ad9780;margin:7px 0 0} #scarlet-bag-v30 .item-card-body{overflow:auto;min-height:0;padding:0 18px 14px;overscroll-behavior:contain} #scarlet-bag-v30 .item-card-body>.description{font:12px/1.6 Georgia;color:#baa48f;margin:15px 0 20px} #scarlet-bag-v30 .item-card .item-stats{gap:0;margin:0} #scarlet-bag-v30 .item-card .item-stat{display:grid;grid-template-columns:1fr 44px 44px;gap:6px;padding:8px 0;border-bottom:1px solid #8d704128;font:12px Arial;color:#c1ad96} #scarlet-bag-v30 .item-card .item-stat strong{font:12px Arial;text-align:right;color:#ecddc1} #scarlet-bag-v30 .item-card .stat-delta{font:11px Arial;text-align:right} #scarlet-bag-v30 .item-card .compare-current{font:12px Georgia;color:#c5ad8b;display:flex;align-items:center;gap:9px;padding:7px 0;margin:10px 0} #scarlet-bag-v30 .item-card .compare-current img{width:39px;height:39px} #scarlet-bag-v30 .item-card-actions .item-actions{margin:0;gap:6px} #scarlet-bag-v30 .item-card-actions .action{font:15px Georgia;min-height:44px;margin:0} #scarlet-bag-v30 .restore-line{padding:7px 0 12px} #scarlet-bag-v30 .restore-line>div:first-child{font:12px Arial;color:#c7b49a} #scarlet-bag-v30 .restore-line strong{font-weight:400;color:#ead6b7} #scarlet-bag-v30 .restore-line>small{display:block;margin-top:6px;color:#a48e75;font:10px Arial} @media(max-width:350px){#scarlet-bag-v30 .overlay.floating .item-card .item-preview{width:72px;height:72px;min-width:72px}#scarlet-bag-v30 .overlay.floating .item-card h3{font-size:18px}#scarlet-bag-v30 .overlay.floating .item-card .item-card-heading{gap:10px;padding-left:14px}#scarlet-bag-v30 .item-card-body{padding-inline:14px}} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .sheet-content{padding:0} #scarlet-bag-v30 .profile-sheet:has(.profile-v3) .sheet-head{height:0;min-height:0} #scarlet-bag-v30 .profile-v3 .profile-development:not(.is-editing) .development-control{visibility:visible;pointer-events:auto} #scarlet-bag-v30 .profile-v3 .profile-development .development-row{height:62px;min-height:62px;grid-template-rows:18px 20px 12px} #scarlet-bag-v30 .profile-v3 .profile-development .development-preview{grid-column:2/-1;grid-row:3} #scarlet-bag-v30 .profile-v3 .profile-development .resource-buff{grid-column:2/-1;grid-row:3;white-space:nowrap;font:9px/12px Arial;color:#86b0a3} #scarlet-bag-v30 .profile-v3 .profile-development .profile-stat-value{margin:0} #scarlet-bag-v30 .profile-v3 .profile-development .development-pending{visibility:visible} #scarlet-bag-v30 .profile-v3 .profile-development .development-minus[hidden]{visibility:hidden;pointer-events:none} #scarlet-bag-v30 .bag-v18 .bag-slot{padding:0;background-image:var(--item-background)} #scarlet-bag-v30 .magic-v8 .clan-tab{height:70px} #scarlet-bag-v30 .magic-v8 .spell-tier small .meter-number{font:inherit} @media(max-height:700px){#scarlet-bag-v30 .magic-v8 .clan-tab{height:48px}} #scarlet-bag-v30 .overlay.floating:has(.magic-v8-detail,.item-card,.sort-options,.effect-summary){padding:0} #scarlet-bag-v30 .overlay.floating .item-card .item-preview{background-image:var(--item-background);background-color:transparent;box-shadow:none;border:0;position:relative;filter:none} #scarlet-bag-v30 .overlay.floating .item-card .item-preview>img{max-width:none;max-height:none;transform:none;filter:drop-shadow(0 3px 3px #0008)} #scarlet-bag-v30 .item-card-actions .action{display:block;width:100%;margin:0;padding:10px;min-height:44px;height:auto;border:12px solid transparent;border-image:url('./assets/button.webp') 32 fill / 12px / 0 stretch;background:none;box-shadow:none;font:15px Georgia;line-height:normal;text-shadow:0 1px #000;isolation:auto} #scarlet-bag-v30 .item-card-actions .action::before,#scarlet-bag-v30 .item-card-actions .action::after{display:none} #scarlet-bag-v30 .item-card-actions .action:disabled{opacity:.5;filter:saturate(.4)} #scarlet-bag-v30 .item-card-actions>p{font:10px Arial;color:#9d8a74;text-align:center;margin:0 0 5px} #scarlet-bag-v30 .item-restoration .card-note{font:12px/1.6 Arial;color:#bda78e;margin:10px 0} #scarlet-bag-v30 .item-restoration{display:grid;gap:12px;margin:12px 0;min-width:0} #scarlet-bag-v30 .restore-line{min-width:0;display:grid;gap:4px} #scarlet-bag-v30 .restore-label{display:flex;align-items:center;gap:7px;font:13px/1.3 var(--sc-font-ui);color:#c8b99e} #scarlet-bag-v30 .restore-label .art-icon{width:17px;height:19px;object-fit:contain} #scarlet-bag-v30 .restore-bonus{margin-left:auto;color:#92afa3;font-variant-numeric:tabular-nums} #scarlet-bag-v30 .restore-meter{height:18px;min-height:18px;padding:3px 4px;margin:0;background:none;border:0;border-radius:0;overflow:visible} /* Keep the rounded brass ends at their native aspect ratio; stretch only the middle. */ #scarlet-bag-v30 .restore-meter::before{background:none;border-style:solid;border-width:0 13px;border-image:var(--art-bar) 0 20 fill / 0 13px / 0 stretch} #scarlet-bag-v30 .restore-track{position:relative;height:100%;overflow:hidden;border-radius:6px;background:#130f11} #scarlet-bag-v30 .restore-track .meter-fill{position:absolute;left:0;top:0;height:100%} #scarlet-bag-v30 .restore-track .restore-current.health{background:linear-gradient(#86313c,#4b1620)} #scarlet-bag-v30 .restore-track .restore-gain.health{background:linear-gradient(#b37379,#783e49)} #scarlet-bag-v30 .restore-track .restore-current.energy{background:linear-gradient(#c2a15c,#805c2c)} #scarlet-bag-v30 .restore-track .restore-gain.energy{background:linear-gradient(#dbcb93,#a98c4d)} #scarlet-bag-v30 .restore-values{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;color:#aa9a84;font:13px/1.3 var(--sc-font-ui);font-variant-numeric:tabular-nums} #scarlet-bag-v30 .restore-values strong{color:#e0d0af;font-weight:500} #scarlet-bag-v30 .restore-values small{font:inherit} #scarlet-bag-v30 .restore-arrow{color:#8c7655} #scarlet-bag-v30 .bag-v18 .bag-slot::before{content:'';position:absolute;pointer-events:none} #scarlet-bag-v30 :is(.bag-v18,.magic-v8) .spell-page-stop::after{display:block} #scarlet-bag-v30 .profile-v3 .profile-development .development-row .development-preview[hidden]{display:none} #scarlet-bag-v30 .profile-v3 .profile-development .development-footer{height:49px;min-height:49px} #scarlet-bag-v30 .magic-v8 .clan-tab[aria-selected=true]{box-shadow:none} #scarlet-bag-v30 .profile-v3 .buffs-heading h4{font:14px/19px var(--sc-font-display);color:#cfb384} /* The wallet shares the bag's fixed viewport and swipe pagination. */ #scarlet-bag-v30 .bag-categories{grid-template-columns:repeat(5,minmax(0,1fr))} #scarlet-bag-v30 .bag-wallet .wallet-filters{padding:9px 0 10px;margin-bottom:7px;border-bottom:1px solid #96744830} #scarlet-bag-v30 .wallet-list{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--wallet-rows),max-content);gap:14px 12px;touch-action:pan-y;align-items:start;align-content:start} #scarlet-bag-v30 .wallet-list>.empty{grid-column:1/-1;grid-row:1/-1;align-self:center} #scarlet-bag-v30 .bag-wallet .wallet-entry{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0;min-height:0;padding:2px 4px;background:none;border:0;color:#e7d4ad;text-align:center;cursor:pointer} #scarlet-bag-v30 .wallet-entry:focus-visible{outline:1px solid #bb965e;outline-offset:-2px} #scarlet-bag-v30 .wallet-slot{display:grid;place-items:center;flex:none;width:clamp(34px,calc((100cqh - (var(--wallet-rows) - 1)*14px)/var(--wallet-rows) - 82px),68px);aspect-ratio:1;background:url('./assets/slot.webp') center/100% 100% no-repeat} #scarlet-bag-v30 .wallet-slot>.art-icon{height:76%;width:76%;object-fit:contain} #scarlet-bag-v30 .wallet-copy{display:flex;flex-direction:column;min-width:0;max-width:100%;gap:2px} #scarlet-bag-v30 .wallet-name{font:12px/1.25 var(--sc-font-display);overflow-wrap:anywhere} #scarlet-bag-v30 .wallet-exact{font:18px/1.3 var(--sc-font-ui);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:#efdcaf} #scarlet-bag-v30 .wallet-entry .wallet-exact{font-size:14px;line-height:1.25} #scarlet-bag-v30 .wallet-expiry{color:#b6a383;font:10px/1.4 var(--sc-font-ui)} #scarlet-bag-v30 .wallet-detail-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px} #scarlet-bag-v30 .wallet-detail-heading>.art-icon{width:50px;height:50px;object-fit:contain;flex:none} #scarlet-bag-v30 .wallet-details h4{font:17px/1.4 var(--sc-font-display);margin:10px 0 5px;color:#dac395} #scarlet-bag-v30 .wallet-details .description{font:13px/1.5 var(--sc-font-ui);margin:4px 0 14px} #scarlet-bag-v30 .wallet-destination{display:block;width:100%;padding:10px 0;min-height:44px;border:0;border-bottom:1px solid #89663c50;background:none;color:#b6cec5;text-align:left;font:14px var(--sc-font-display)} #scarlet-bag-v30 .wallet-destination:before{display:none} #scarlet-bag-v30 .shop-wallet-balances{display:flex;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;border-bottom:1px solid #89663c40} #scarlet-bag-v30 .shop-wallet-balance{display:flex;align-items:center;gap:5px;font:13px var(--sc-font-ui);color:#e7d4ad} #scarlet-bag-v30 .shop-wallet-balance .art-icon{width:22px;height:22px;object-fit:contain} /* Shared reading sizes. Display lettering stays on headings and major actions. */ #scarlet-bag-v30{font-size:15px;--sc-muted:#ccbeaa} #scarlet-bag-v30 .description, #scarlet-bag-v30 .message, #scarlet-bag-v30 .district-description, #scarlet-bag-v30 .school-description, #scarlet-bag-v30 .item-card-body>.description, #scarlet-bag-v30 .wallet-details .description{font:15px/1.5 var(--sc-font-ui);color:#ddcebb} #scarlet-bag-v30 .muted{font-size:14px;line-height:1.5} #scarlet-bag-v30 .city-page>.mission-detail>.description{font:14px/20px var(--sc-font-ui)} #scarlet-bag-v30 .stage-group{font:12px/17px var(--sc-font-ui);width:94px} #scarlet-bag-v30 .detail>.activity-rewards{font:14px/22px var(--sc-font-ui)} #scarlet-bag-v30 .mission-progress{font:14px/20px var(--sc-font-ui)} #scarlet-bag-v30 .boss-detail .boss-name{font-size:21px} #scarlet-bag-v30 .boss-detail .boss-health-label{font:12px/17px var(--sc-font-ui)} #scarlet-bag-v30 .boss-detail .boss-attack-row>.boss-timer{font-size:12px} #scarlet-bag-v30 .boss-detail .boss-attack-row>.action{font-size:17px} #scarlet-bag-v30 .navigation button{font-size:17px} /* HUD captions keep these sizes on narrow and short screens, too. */ #scarlet-bag-v30 .hud-title{font:12px/16px var(--sc-font-ui);color:#cab184} #scarlet-bag-v30 .hud-nickname{font-size:19px;line-height:23px} #scarlet-bag-v30 .hud .resource-row{height:18px;grid-template-columns:12px minmax(12px,1fr) minmax(49px,max-content)} #scarlet-bag-v30 .hud .resource-number{font:12px/16px var(--sc-font-ui)} #scarlet-bag-v30 .hud .purse-row{font:13px/18px var(--sc-font-ui);height:23px} #scarlet-bag-v30 .hud-age-badge{font:13px/16px var(--sc-font-ui)} #scarlet-bag-v30 .hud-rank-percent{font:11px/14px var(--sc-font-ui);color:#c4ad8a} #scarlet-bag-v30 .profile-rating-label{font:12px/16px var(--sc-font-ui)} /* Detail cards: readable effects and comparisons, without enlarging item art. */ #scarlet-bag-v30 .item-card .item-stat, #scarlet-bag-v30 .item-card .item-stat strong, #scarlet-bag-v30 .restore-line>div:first-child, #scarlet-bag-v30 .item-restoration .card-note, #scarlet-bag-v30 .spell-facts-new>div, #scarlet-bag-v30 .column-stat{font:14px/20px var(--sc-font-ui)} #scarlet-bag-v30 .item-card .compare-current{font:14px/20px var(--sc-font-ui)} #scarlet-bag-v30 .item-card .stat-delta, #scarlet-bag-v30 .restore-line>small, #scarlet-bag-v30 .item-card-actions>p, #scarlet-bag-v30 .spell-modal-head small, #scarlet-bag-v30 .spell-modal-head span, #scarlet-bag-v30 .wallet-expiry{font:12px/17px var(--sc-font-ui)} #scarlet-bag-v30 .item-card-actions .action{font-family:var(--sc-font-display);font-size:17px} #scarlet-bag-v30 .spell-values{font-size:14px} #scarlet-bag-v30 .spell-values>small,#scarlet-bag-v30 .spell-tier small{font-size:12px} /* Lists and their expanded explanations share the same caption/body hierarchy. */ #scarlet-bag-v30 .achievement-intro p, #scarlet-bag-v30 .achievement-instruction, #scarlet-bag-v30 .achievement-progress-label{font-size:14px;line-height:1.5} #scarlet-bag-v30 .achievement-card-heading .achievement-state, #scarlet-bag-v30 .achievement-inline-progress, #scarlet-bag-v30 .achievement-summary span, #scarlet-bag-v30 .achievement-stage-caption, #scarlet-bag-v30 .ranking-copy small, #scarlet-bag-v30 .ranking-columns, #scarlet-bag-v30 .ranking-own>small{font-size:12px;line-height:1.4} #scarlet-bag-v30 .ranking-player-title{font-family:var(--sc-font-ui);font-size:12px} #scarlet-bag-v30 .ranking-name{font-size:16px} /* Shop supporting text should remain readable beside the illustrations. */ #scarlet-bag-v30 .curio-subtitle, #scarlet-bag-v30 .treasury-page .curio-subtitle, #scarlet-bag-v30 .merchandise-effect, #scarlet-bag-v30 .curio-effect, #scarlet-bag-v30 .curio-lore{font:14px/1.45 var(--sc-font-ui);color:#d0beaa} #scarlet-bag-v30 .daily-rule, #scarlet-bag-v30 .merchandise-kind, #scarlet-bag-v30 .merchandise-status, #scarlet-bag-v30 .exchange-after, #scarlet-bag-v30 .exchange-info, #scarlet-bag-v30 .exchange-terms, #scarlet-bag-v30 .exchange-error, #scarlet-bag-v30 .treasury-packs>.treasury-demo, #scarlet-bag-v30 .treasury-use span+span{font:12px/17px var(--sc-font-ui);color:#c5b29b} #scarlet-bag-v30 .ether-pack .pack-name{font:14px/19px var(--sc-font-ui);color:#dfccb0} #scarlet-bag-v30 .ether-pack .pack-unit{font:12px/17px var(--sc-font-ui);color:#c5b29b} #scarlet-bag-v30 .ether-pack .pack-badge{font:11px/16px var(--sc-font-ui);height:auto;min-height:16px} #scarlet-bag-v30 .treasury-packs:not([hidden]){min-height:490px} #scarlet-bag-v30 .exchange-source label,#scarlet-bag-v30 .exchange-receive>span{font:14px/20px var(--sc-font-ui)} /* Wallet: a currency ledger, with the bag's navigation and treasury routes. */ #scarlet-bag-v30 .wallet-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 3px 8px;flex:none} #scarlet-bag-v30 .wallet-heading h2{font:21px/26px var(--sc-font-display);color:#ead5b0;margin:0} #scarlet-bag-v30 .wallet-heading-note{font:11px/16px var(--sc-font-ui);color:#b29b7e} #scarlet-bag-v30 .wallet-actions{display:flex;gap:8px;flex:none;padding:0 2px 9px} #scarlet-bag-v30 .bag-wallet .wallet-treasury-button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:36px;padding:5px 10px;border:1px solid #937044;background:linear-gradient(#60303a70,#351620a0);color:#e5cca0;font:14px/20px var(--sc-font-display);box-shadow:inset 0 0 0 2px #20111780} /* Optical alignment: Vollkorn's symbols sit below the label at this larger size. */ #scarlet-bag-v30 .wallet-action-symbol{font:20px/20px var(--sc-font-display);color:#c8a263;transform:translateY(-2px)} #scarlet-bag-v30 .wallet-treasury-button::before,#scarlet-bag-v30 .wallet-treasury-button::after,#scarlet-bag-v30 .wallet-entry::before,#scarlet-bag-v30 .wallet-entry::after,#scarlet-bag-v30 .wallet-destination::after{display:none} #scarlet-bag-v30 .bag-wallet .wallet-filters{min-height:0;padding:0 0 7px;margin:0;border-bottom:1px solid #99784950} #scarlet-bag-v30 .bag-wallet .wallet-filters button{min-height:30px;font:12px/17px var(--sc-font-ui)} #scarlet-bag-v30 .wallet-list{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--wallet-rows),minmax(64px,1fr));align-items:stretch;align-content:start;gap:0;height:100%;overflow-y:auto} #scarlet-bag-v30 .bag-wallet .wallet-entry{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(65px,auto);align-items:center;gap:10px;padding:8px 5px;min-height:64px;text-align:left;border:0;border-bottom:1px solid #99784935;background:linear-gradient(90deg,#b88f4010,transparent 80%);transition:background .15s} #scarlet-bag-v30 .wallet-entry:hover{background:linear-gradient(90deg,#b88f4027,#38162055)} #scarlet-bag-v30 .wallet-entry:active{background:#571e2b77} #scarlet-bag-v30 .wallet-art{display:grid;place-items:center;width:48px;height:48px;flex:none;position:relative;background:radial-gradient(ellipse,#c3953a22,transparent 72%)} #scarlet-bag-v30 .wallet-art>.art-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px #0008)} #scarlet-bag-v30 .wallet-monogram{display:grid;place-items:center;border:1px solid #92704488;color:#ba9960;width:32px;height:36px;font:21px var(--sc-font-display);border-radius:45% 45% 40% 40%;background:#24131a} #scarlet-bag-v30 .wallet-copy{gap:4px} #scarlet-bag-v30 .wallet-name{font:14px/18px var(--sc-font-display);color:#e2ccaa;overflow-wrap:anywhere} #scarlet-bag-v30 .wallet-balance{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:144px;min-width:0} #scarlet-bag-v30 .wallet-entry .wallet-exact{font:17px/21px var(--sc-font-ui);font-variant-numeric:tabular-nums;color:#f1d9a5;text-align:right;max-width:100%;overflow-wrap:anywhere} #scarlet-bag-v30 .wallet-row-hint{font:10px/14px var(--sc-font-ui);color:#aa8858} #scarlet-bag-v30 .wallet-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 3px;min-height:32px;font:10px/14px var(--sc-font-ui);color:#a18b6f;border:0} #scarlet-bag-v30 .wallet-footer span:last-child{max-width:220px;text-align:right} #scarlet-bag-v30 .wallet-empty{grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;padding:18px;color:#bca98b} #scarlet-bag-v30 .wallet-empty-symbol{font:32px var(--sc-font-display);color:#a38351} #scarlet-bag-v30 .wallet-empty h3{font:17px/22px var(--sc-font-display);margin:12px 0 7px} #scarlet-bag-v30 .wallet-empty p{font:13px/20px var(--sc-font-ui)} #scarlet-bag-v30 .wallet-detail-heading{padding:8px 0 15px;border-bottom:1px solid #95724550;gap:15px} #scarlet-bag-v30 .wallet-detail-heading .wallet-art{width:66px;height:66px} #scarlet-bag-v30 .wallet-detail-heading .art-icon{width:60px;height:60px} #scarlet-bag-v30 .wallet-detail-heading>div{min-width:0} #scarlet-bag-v30 .wallet-balance-label{display:block;font:12px/18px var(--sc-font-ui);color:#b49d7f} #scarlet-bag-v30 .wallet-details .wallet-exact{display:block;font-size:23px;overflow-wrap:anywhere} #scarlet-bag-v30 .wallet-destination{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#dfc392;background:linear-gradient(90deg,#97703b10,transparent);padding:10px 8px;min-height:44px;font:14px/20px var(--sc-font-display)} #scarlet-bag-v30 .wallet-route-arrow{margin-left:auto;font-size:20px;color:#a98753} @media(max-width:370px){#scarlet-bag-v30 .bag-wallet .wallet-entry{grid-template-columns:39px minmax(0,1fr) minmax(54px,auto);gap:7px;padding-inline:2px}#scarlet-bag-v30 .wallet-art{width:38px;height:42px}#scarlet-bag-v30 .wallet-art>.art-icon{width:36px;height:38px}#scarlet-bag-v30 .wallet-name{font-size:13px;line-height:17px}#scarlet-bag-v30 .wallet-entry .wallet-exact{font-size:15px;line-height:19px}#scarlet-bag-v30 .wallet-balance{max-width:108px}#scarlet-bag-v30 .wallet-heading{padding-top:8px}#scarlet-bag-v30 .wallet-footer span:last-child{max-width:160px}} #scarlet-bag-v30 .bag-v18.bag-wallet>.spell-page-rail{height:30px;min-height:30px} #scarlet-bag-v30 .bag-v18.bag-wallet>.wallet-footer{min-height:30px;padding-block:4px;line-height:13px;font-size:10px} @media(max-height:759px){ #scarlet-bag-v30 .bag-wallet .wallet-list{grid-template-rows:repeat(var(--wallet-rows),minmax(50px,1fr))} #scarlet-bag-v30 .bag-wallet .wallet-entry{min-height:50px;padding-block:5px} #scarlet-bag-v30 .bag-wallet .wallet-copy{gap:2px} #scarlet-bag-v30 .bag-wallet .wallet-heading{padding-block:5px} #scarlet-bag-v30 .bag-wallet .wallet-actions{padding-bottom:6px} } #scarlet-bag-v30 .hunt-attack-reason{min-height:28px;margin:4px 0 0;text-align:right;color:#bfa585;font:12px/14px var(--sc-font-ui);overflow-wrap:anywhere} /* Markers sit above the slot artwork, without changing the slot's hit area. */ #scarlet-bag-v30 .item-bonus-group{margin:10px 0;padding:10px 12px;border:1px solid #73593b55;border-left:2px solid #907142;background:#21131955} #scarlet-bag-v30 .item-bonus-group h4{font:13px/1.4 var(--sc-font-ui);color:#d5b77d;margin:0 0 7px} #scarlet-bag-v30 .item-bonus-group.permanent{border-left-color:#b38c53;background:#44301b33} #scarlet-bag-v30 .item-bonus-group.permanent h4,#scarlet-bag-v30 .item-bonus-group.permanent strong{color:#e1bf8c} #scarlet-bag-v30 .item-use{margin:12px 0;padding-top:10px;border-top:1px solid #755b3f66} #scarlet-bag-v30 .item-use-label,#scarlet-bag-v30 .item-use-total{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#e2cfaa;font:14px/1.4 var(--sc-font-ui)} #scarlet-bag-v30 .item-use-total{margin:14px 0 5px} #scarlet-bag-v30 .item-use-note{display:block;color:#a99986;font:11px/1.4 var(--sc-font-ui);margin-bottom:12px} #scarlet-bag-v30 .item-use-shortcuts{display:flex;justify-content:flex-end;gap:8px;margin:0 0 8px} #scarlet-bag-v30 .item-use-shortcut{flex:none;width:auto;min-width:44px;min-height:32px;padding:4px 10px;border:0;border-bottom:1px solid #80623c88;border-radius:0;background:none;box-shadow:none;color:#c9ad7e;font:13px/1.3 var(--sc-font-ui)} #scarlet-bag-v30 .item-use-shortcut:hover:not(:disabled){color:#ead7ad;border-bottom-color:#c3a06b} #scarlet-bag-v30 .item-use-shortcut:disabled{opacity:.45} #scarlet-bag-v30 .item-use-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} #scarlet-bag-v30 .item-use-buttons>.action{flex:1 1 140px;min-width:0;width:auto;margin:0;box-sizing:border-box} #scarlet-bag-v30 .item-use-slider{display:block;width:100%;accent-color:#ac8955;height:32px;margin:8px 0;touch-action:pan-y;background-size:100% 5px;background-repeat:no-repeat;background-position:center} #scarlet-bag-v30 .boss-heading{justify-content:flex-start;align-items:center;gap:4px} #scarlet-bag-v30 .boss-heading .boss-name{flex:0 1 auto;min-width:0} #scarlet-bag-v30 .boss-heading-actions{display:flex;flex:none;align-items:center;gap:2px} #scarlet-bag-v30 .boss-heading-actions .icon-button{width:32px;height:36px;min-width:32px;min-height:36px;flex:0 0 32px;padding:6px} #scarlet-bag-v30 .exchange-bundle-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:8px;padding:18px 0} #scarlet-bag-v30 .exchange-bundle-tile{display:flex;align-items:center;flex-direction:column;gap:14px;min-width:0;color:#c8b69a;font:13px var(--sc-font-ui)} #scarlet-bag-v30 .exchange-bundle-tile .treasury-money{font-size:24px;display:flex;align-items:center;gap:6px;white-space:nowrap} #scarlet-bag-v30 .exchange-bundle-tile .treasury-money img{width:32px;height:32px;object-fit:contain} #scarlet-bag-v30 .exchange-bundle-arrow{color:#b39661;font:24px Georgia;text-align:center} #scarlet-bag-v30 .bundle-exchange>.action{width:100%;margin:16px 0} #scarlet-bag-v30 .exchange-availability{text-align:center;font:13px/1.5 var(--sc-font-ui);color:#d0b984} #scarlet-bag-v30 .item-use-buttons>.action{padding:0 6px;min-height:44px;height:auto;border:10px solid transparent;border-image:url('./assets/button.webp') 32 fill / 10px / 0 stretch;background:none;box-shadow:none;font:15px/20px var(--sc-font-display);text-shadow:0 1px #000} #scarlet-bag-v30 .item-use-buttons>.action::before,#scarlet-bag-v30 .item-use-buttons>.action::after{display:none} #scarlet-bag-v30 .bag-item-detail .item-bonus-group{padding:4px 6px;margin:4px 0} #scarlet-bag-v30 .bag-item-detail .item-bonus-group h4{font-size:10px;margin-bottom:2px} /* Return to the saved screen without adding another row to the bag. */ #scarlet-bag-v30 .bag-toolbar{display:flex;align-items:stretch;gap:4px;flex:none;min-width:0} #scarlet-bag-v30 .bag-toolbar .bag-categories{flex:1;min-width:0} #scarlet-bag-v30 .bag-v18 .bag-return{width:44px;min-height:44px;padding:6px;border:0;background:none;display:grid;place-items:center} #scarlet-bag-v30 .bag-return::before,#scarlet-bag-v30 .bag-return::after{display:none} #scarlet-bag-v30 .bag-return .art-icon{width:24px;height:24px;object-fit:contain} #scarlet-bag-v30 .bag-return:hover{background:#b18b3814} /* Compare permanent and worn bonuses side by side in every item view. */ #scarlet-bag-v30 .item-stats.item-bonus-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;width:100%} #scarlet-bag-v30 .item-bonus-columns>.item-bonus-group{min-width:0;margin:0;padding:8px} #scarlet-bag-v30 .item-bonus-columns>.item-bonus-group h4{min-height:2.8em;font:12px/1.4 var(--sc-font-ui);margin:0 0 6px;overflow-wrap:anywhere} #scarlet-bag-v30 .item-bonus-columns .item-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;align-items:baseline;padding:5px 0;font:12px/1.35 var(--sc-font-ui)} #scarlet-bag-v30 .item-bonus-columns .item-stat>span:first-child{min-width:0;overflow-wrap:anywhere} #scarlet-bag-v30 .item-bonus-columns .item-stat strong{margin:0;white-space:nowrap;font:12px/1.35 var(--sc-font-ui);font-variant-numeric:lining-nums tabular-nums;text-align:right} #scarlet-bag-v30 .item-bonus-columns .item-stat .stat-delta{grid-column:2;font-size:11px;text-align:right;white-space:nowrap} #scarlet-bag-v30 .item-bonus-columns .compare-current{gap:5px;margin:0 0 5px;padding:0;font:11px/1.3 var(--sc-font-ui);min-width:0} #scarlet-bag-v30 .item-bonus-columns .compare-current img{width:25px;height:28px;object-fit:contain;flex:none} #scarlet-bag-v30 .item-bonus-columns .compare-current span{min-width:0;overflow-wrap:anywhere} #scarlet-bag-v30 .item-card .item-set-link{display:inline;padding:2px 0;min-height:0;width:auto;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#d8b779;font:inherit;text-align:left;text-decoration:underline;text-decoration-color:#ab874b77;text-underline-offset:3px;white-space:normal;cursor:pointer} #scarlet-bag-v30 .item-card .item-set-link:hover{color:#f0d49a;text-decoration-color:currentColor} #scarlet-bag-v30 .item-card .item-set-link:focus-visible{outline:1px solid #d8b779;outline-offset:3px} #scarlet-bag-v30 .equipment-set-details{grid-column:1/-1;border-top:1px solid #98764266;margin-top:12px;padding-top:12px;width:100%;min-width:0} #scarlet-bag-v30 .equipment-set-details>h4{margin:0;color:#d4b97f;font:18px/1.25 'Vollkorn',serif} /* Item showcase: a lit artifact, quiet lore, and clearly separated effects. */ #scarlet-bag-v30 .overlay.floating .sheet:has(.item-showcase){border-radius:3px;border-color:#b6975b;background:linear-gradient(145deg,#28151c,#170d13 65%,#21131a);box-shadow:0 20px 70px #000c,0 0 0 3px #120d10,inset 0 0 0 3px #b3945220} #scarlet-bag-v30 .overlay.floating .item-showcase .item-card-heading{position:relative;isolation:isolate;gap:18px;padding:28px 30px 23px 20px;border:0;background:radial-gradient(ellipse at 17% 45%,color-mix(in srgb,var(--item-rarity,#b89758) 17%,transparent),transparent 70%),linear-gradient(110deg,#08090e66,transparent)} #scarlet-bag-v30 .item-showcase .item-card-heading::before{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ba9858 25%,#ba9858 75%,transparent)} #scarlet-bag-v30 .item-showcase .item-card-heading::after{content:'';position:absolute;left:calc(50% - 4px);bottom:-4px;width:8px;height:8px;border:1px solid #bd9b60;background:#37231e;transform:rotate(45deg)} #scarlet-bag-v30 .overlay.floating .item-showcase .item-preview{width:112px;height:112px;min-width:112px;overflow:visible;background-size:94% 94%} #scarlet-bag-v30 .overlay.floating .item-showcase .item-preview>img{padding:8%;filter:drop-shadow(0 5px 6px #000b)} #scarlet-bag-v30 .item-showcase .item-identity{min-width:0;position:relative;z-index:3} #scarlet-bag-v30 .overlay.floating .item-showcase h3{font:23px/1.12 var(--sc-font-display);color:#f2e2c8;text-shadow:0 2px 5px #0008;text-wrap:balance} #scarlet-bag-v30 .item-showcase .card-rarity{display:flex;align-items:center;gap:6px;font:10px/1.3 var(--sc-font-ui);letter-spacing:1.1px;text-transform:uppercase;margin:0 0 8px} #scarlet-bag-v30 .item-showcase .card-rarity::before{content:'';width:4px;height:4px;transform:rotate(45deg);border:1px solid currentColor;flex:none} #scarlet-bag-v30 .item-showcase .item-kind{margin-top:10px;font:11px/1.5 var(--sc-font-ui)} #scarlet-bag-v30 .item-worn-badge{position:absolute;z-index:4;bottom:-5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:3px 10px;color:#edcf8f;border:1px solid #aa854e;background:linear-gradient(#38291b,#1c1512);font:10px/1.3 var(--sc-font-ui);white-space:nowrap;box-shadow:0 2px 8px #0009} #scarlet-bag-v30 .item-showcase .item-card-body{padding:0 18px 15px} #scarlet-bag-v30 .item-showcase .item-card-body>.description{font:italic 13px/1.5 var(--sc-font-display);color:#baa991;margin:17px 2px;text-wrap:pretty} #scarlet-bag-v30 .item-showcase .item-bonus-group{position:relative;padding:10px 11px;border:1px solid #99734550;border-top:2px solid #a7854b;border-left:1px solid #99734550;background:linear-gradient(145deg,#8c672418,#080a0e33)} #scarlet-bag-v30 .item-showcase .item-bonus-group.permanent{border-top-color:#d0a45a;background:linear-gradient(145deg,#b07e272b,#38211822)} #scarlet-bag-v30 .item-showcase .item-bonus-group h4{font:11px/1.4 var(--sc-font-ui);color:#ddc391;min-height:2.8em;margin-bottom:7px} #scarlet-bag-v30 .item-showcase .item-stat{border-bottom:1px solid #ac885f22;padding:5px 0} #scarlet-bag-v30 .item-showcase .item-stat:last-child{border-bottom:0} #scarlet-bag-v30 .item-showcase .item-stat strong{font-size:15px;color:#f0dfbd} #scarlet-bag-v30 .item-showcase .permanent .item-stat strong{color:#f1ca80} #scarlet-bag-v30 .item-showcase .equipment-set-details{border:0;margin-top:10px;padding-top:10px} #scarlet-bag-v30 .item-showcase .equipment-set-details>h4{display:flex;align-items:center;gap:10px;font:17px/1.3 var(--sc-font-display);color:#dfc18a} #scarlet-bag-v30 .item-showcase .equipment-set-details>h4::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#ac865452,transparent)} #scarlet-bag-v30 .item-showcase .item-card-actions{padding:12px 18px 16px;border-top:1px solid #ad87534d;background:linear-gradient(#0d0b1033,#07080c77);flex:none} #scarlet-bag-v30 .item-showcase .item-card-actions .item-actions{display:flex;flex-wrap:wrap;gap:8px} #scarlet-bag-v30 .item-showcase .item-card-actions .action{flex:1 1 120px;width:auto;min-height:44px;margin:0;font-size:17px} @media(max-width:350px){ #scarlet-bag-v30 .overlay.floating .item-showcase .item-card-heading{gap:12px;padding:24px 26px 20px 14px} #scarlet-bag-v30 .overlay.floating .item-showcase .item-preview{width:90px;height:90px;min-width:90px} #scarlet-bag-v30 .overlay.floating .item-showcase h3{font-size:20px} #scarlet-bag-v30 .item-showcase .card-rarity{font-size:9px;letter-spacing:.7px} #scarlet-bag-v30 .item-showcase .item-card-body{padding-inline:14px} #scarlet-bag-v30 .item-showcase .item-bonus-group{padding:9px} } /* Set bonuses: independent acquisition/equipment halves in engraved brass. */ #scarlet-bag-v30 .set-bonuses-engraved .set-bonus-table{display:grid;grid-template-columns:54px repeat(2,minmax(0,1fr));width:100%;border-collapse:collapse;border-spacing:0;font:12px/1.35 var(--sc-font-ui);font-variant-numeric:lining-nums tabular-nums} /* Shared row tracks keep paired bonuses aligned when a label wraps. */ #scarlet-bag-v30 .set-bonuses-engraved :is(thead,tbody){display:contents} #scarlet-bag-v30 .set-bonuses-engraved :is(thead>tr,.set-tier){display:grid;grid-column:1/-1;grid-template-columns:subgrid} #scarlet-bag-v30 .set-bonuses-engraved .set-tier{grid-template-rows:repeat(var(--set-stat-count),auto) auto;row-gap:6px} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold{grid-row:1/-1;display:flex;align-items:center} #scarlet-bag-v30 .item-showcase .set-bonuses-engraved{padding-top:8px;margin-top:10px} #scarlet-bag-v30 .item-showcase .set-bonuses-engraved>h4{margin-bottom:14px} #scarlet-bag-v30 .set-bonuses-engraved thead th{padding:0 8px 12px;vertical-align:top;font-size:11px;color:#c5b49c;font-weight:400;text-align:left} #scarlet-bag-v30 .set-bonuses-engraved thead th:first-child{width:54px;padding:0 5px 12px 0;color:#a39077;font-size:10px} #scarlet-bag-v30 .set-bonuses-engraved .set-column-title{display:block;color:#e0c392;margin-bottom:7px;font:11px/1.3 var(--sc-font-ui)} #scarlet-bag-v30 .set-bonuses-engraved .set-progress-caption{display:flex;justify-content:space-between;align-items:baseline;gap:3px;font-size:10px;color:#ac9a83} #scarlet-bag-v30 .set-bonuses-engraved .set-progress-caption strong{color:#e5c98f;font-weight:400;font-size:11px} #scarlet-bag-v30 .set-bonuses-engraved .set-progress-track{display:flex;gap:3px;margin-top:5px} #scarlet-bag-v30 .set-bonuses-engraved .set-progress-track>span{position:relative;height:3px;flex:1;background:#77624d44;box-shadow:inset 0 1px #0004} #scarlet-bag-v30 .set-bonuses-engraved .set-progress-light{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,#96713d,#d1ac67);box-shadow:0 0 5px #a0762f22} #scarlet-bag-v30 .set-bonuses-engraved .is-filled>.set-progress-light{opacity:1} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold{position:relative;padding:12px 5px 12px 0;vertical-align:middle;font-weight:400} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold>span{display:block;position:relative;z-index:1;width:16px;padding:5px 0;text-align:center;white-space:nowrap;font-size:15px;color:#8c7b68} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold>.is-active{color:#ffe0a0;text-shadow:0 0 8px #cda35444;font-weight:600} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold>.is-partial{color:#ceae76} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold::before, #scarlet-bag-v30 .set-bonuses-engraved .set-threshold::after{content:'';position:absolute;left:33px;width:1px;background:#6b533533} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold::before{top:0;bottom:calc(50% + 12px)} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold::after{top:calc(50% + 12px);bottom:0} #scarlet-bag-v30 .set-bonuses-engraved tr:first-child .set-threshold::before, #scarlet-bag-v30 .set-bonuses-engraved tr:last-child .set-threshold::after{display:none} #scarlet-bag-v30 .set-bonuses-engraved .set-threshold:has(.is-active)::after{background:linear-gradient(#e2b76c99,#a5844b44)} #scarlet-bag-v30 .set-bonuses-engraved .set-chain-jewel{position:absolute;left:25px;top:50%;transform:translateY(-50%);width:17px;height:22px;overflow:visible} #scarlet-bag-v30 .set-bonuses-engraved .set-chain-jewel.is-equipped{filter:drop-shadow(0 0 3px #d2a85188)} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-bonuses{display:grid;grid-template-rows:subgrid;grid-row:1/-1;min-width:0;padding:13px 8px;border-bottom:1px solid #b28a4c26;vertical-align:middle;color:#ae9d89} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-bonuses.is-active{color:#e8d7b9;background:linear-gradient(90deg,#ad7e2514,transparent)} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-bonuses.acquired.is-active{color:#f1d092} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-bonuses.is-locked{background:#0c0b112e;color:#c3b4a4} #scarlet-bag-v30 .set-bonuses-engraved tr:last-child .set-tier-bonuses{border-bottom:0} #scarlet-bag-v30 .set-bonuses-engraved .set-state-mark{display:block;width:11px;height:11px;flex:none;color:#ac9a83} #scarlet-bag-v30 .set-bonuses-engraved .set-state-mark svg{display:block;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-stat{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:5px;align-items:baseline;font-size:12px} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-stat>span{min-width:0;overflow-wrap:normal} #scarlet-bag-v30 .set-bonuses-engraved .set-tier-stat strong{font-size:13px;font-weight:600;white-space:nowrap} #scarlet-bag-v30 .set-bonuses-engraved .set-unlock-note{display:flex;align-items:center;gap:5px;min-height:13px;white-space:nowrap;margin:2px 0 0;color:#ac9a83;font:10px/1.3 var(--sc-font-ui)} @media(max-width:350px){#scarlet-bag-v30 .set-bonuses-engraved .set-tier-bonuses{padding-inline:6px}#scarlet-bag-v30 .set-bonuses-engraved thead th{padding-inline:6px}#scarlet-bag-v30 .set-bonuses-engraved .set-tier-stat{font-size:11px}#scarlet-bag-v30 .set-bonuses-engraved .set-tier-stat strong{font-size:12px}} /* Reserve the hint line even while a tier is active. */ #scarlet-bag-v30 .set-bonuses-engraved .set-unlock-note.is-reserved{visibility:hidden} /* Approved equipped seal. */ #scarlet-bag-v30 .item-worn-badge{bottom:-12px;padding:1px 0;border:0;background:none;box-shadow:none;color:#d9bc86;font-size:10px;letter-spacing:.3px} @media(max-width:350px){#scarlet-bag-v30 .item-worn-badge .equipped-seal{left:calc(50% + 24px)}} /* Profile equipment selection: two-row pages and scrollable item details. */ #scarlet-bag-v30 .overlay.floating .sheet:has(.equipment-picker){display:flex;flex-direction:column;height:min(900px,calc(var(--game-height,100dvh) - 24px));min-height:0;max-height:calc(var(--game-height,100dvh) - 24px);overflow:hidden} #scarlet-bag-v30 .sheet:has(.equipment-picker) .sheet-content{flex:1;min-height:0} #scarlet-bag-v30 .equipment-picker{display:flex;flex-direction:column;min-height:0;width:100%;overflow:hidden} #scarlet-bag-v30 .equipment-picker-bar{display:flex;align-items:center;gap:12px;flex:none;padding:12px 42px 8px 12px;color:#dbc391;font:13px var(--sc-font-ui)} #scarlet-bag-v30 .picker-back{border:0;background:none;color:#c4aa77;font:12px var(--sc-font-ui);padding:4px 0;cursor:pointer} #scarlet-bag-v30 .equipment-picker{--picker-cell:calc((min(100vw,440px) - 70px)/5)} #scarlet-bag-v30 .equipment-picker>.page-window{height:calc(var(--picker-cell)*2 + 22px);flex:none} #scarlet-bag-v30 .equipment-picker .picker-grid{grid-template-rows:repeat(2,var(--picker-cell));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-content:start;margin:0;padding:6px 14px 10px;touch-action:pan-y;user-select:none} #scarlet-bag-v30 .equipment-picker>.spell-page-rail{flex:none;height:24px;min-height:24px;margin:0 14px 2px} #scarlet-bag-v30 .equipment-picker>.spell-page-rail .spell-page-stop{min-height:0;height:100%} #scarlet-bag-v30 .equipment-picker .bag-slot{position:relative;min-width:0;width:100%;height:var(--picker-cell);aspect-ratio:1;min-height:0;padding:0;background-image:linear-gradient(rgb(0 0 0 / var(--sc-rarity-shade,0)),rgb(0 0 0 / var(--sc-rarity-shade,0))),var(--item-background);background-size:92% 92%;background-position:center;background-repeat:no-repeat} #scarlet-bag-v30 .equipment-picker .bag-slot::before{content:'';display:block;position:absolute;inset:0;z-index:2;background:url('./assets/slot.webp') center/100% 100% no-repeat;pointer-events:none} #scarlet-bag-v30 .equipment-picker .bag-slot>img{position:absolute;inset:0;z-index:1;box-sizing:border-box;width:100%;height:100%;padding:9%;object-fit:contain;transform:none} #scarlet-bag-v30 .equipment-picker .bag-slot.is-selected{outline:1px solid #e4bd73;outline-offset:-2px;box-shadow:inset 0 0 10px #d1a45944} #scarlet-bag-v30 .overlay.floating .equipment-picker>.item-card{flex:1;min-height:0;overflow:hidden;margin:0} #scarlet-bag-v30 .equipment-picker .item-card-body{flex:1} #scarlet-bag-v30 .overlay.floating .equipment-picker .item-card-heading{padding-top:16px;padding-bottom:18px} /* Shared brass diamond seal; only the small-slot size differs. */ #scarlet-bag-v30 .equipped-seal{position:absolute;width:20px;height:20px;box-sizing:border-box;padding:3px;border:1px solid #bf9b59;background:linear-gradient(135deg,#594124,#221812);box-shadow:0 2px 5px #0009;transform:rotate(45deg);overflow:visible;color:#d9bc86;fill:none;stroke:currentColor;stroke-width:1.7;z-index:5;pointer-events:none} #scarlet-bag-v30 .equipped-seal path{transform:rotate(-45deg);transform-origin:12px 12px} #scarlet-bag-v30 .bag-slot>.equipped-seal{width:16px;height:16px;right:2px;bottom:2px;padding:2px} #scarlet-bag-v30 .item-worn-badge .equipped-seal{left:calc(50% + 34px);bottom:18px} @media(max-width:350px){#scarlet-bag-v30 .item-worn-badge .equipped-seal{left:calc(50% + 24px)}} /* Retain the open item's size across equip/unequip; only details scroll. */ #scarlet-bag-v30 .overlay.floating .sheet.item-layout-stable{display:flex;flex-direction:column;min-height:0} #scarlet-bag-v30 .overlay.floating .sheet.item-layout-stable>.sheet-content{flex:1;min-height:0} #scarlet-bag-v30 .sheet.item-layout-stable>.sheet-content>.item-showcase{flex:1;min-height:0} #scarlet-bag-v30 .sheet.item-layout-stable .item-card-body{flex:1} /* Received rewards share the equipped-item seal; mission completion stays round. */ #scarlet-bag-v30 .received-seal{width:16px;height:16px;right:4px;bottom:4px;padding:2px} #scarlet-bag-v30 :is(.boss-drop-art,.event-featured-image){position:relative} /* Match the wallet stops to their shorter rail, keeping every diamond on its line. */ #scarlet-bag-v30 .bag-v18.bag-wallet>.spell-page-rail .spell-page-stop{height:100%;min-height:0} #scarlet-bag-v30 .item-use-gain{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #scarlet-bag-v30 .item-use-gain .art-icon{width:24px;height:24px;object-fit:contain} #scarlet-bag-v30 .supply-drop-details .boss-drop-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #scarlet-bag-v30 .supply-drop-details .boss-drop-row{min-width:0} #scarlet-bag-v30 .shop-wallet-balances{flex-wrap:wrap} #scarlet-bag-v30 .inline-item-grant{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;white-space:nowrap;color:#e5c68b} #scarlet-bag-v30 .inline-item-grant .art-icon{width:20px;height:20px;object-fit:contain} /* Item drops share the footer with the action, as in boss cards. */ #scarlet-bag-v30 .city-page>.mission-detail.has-mission-loot{grid-template-areas:"title title" "description description" "progress progress" "divider divider" "rewards rewards" "loot actions"} #scarlet-bag-v30 .mission-loot-icons{grid-area:loot;display:flex;align-items:center;gap:4px;min-width:0} #scarlet-bag-v30 .mission-loot-icons>.reward-tile{flex:0 1 42px;width:42px;min-width:0;height:42px;padding:3px;aspect-ratio:1;margin:0} #scarlet-bag-v30 .mission-loot-icons>.reward-tile .reward-tile-art{width:100%;height:100%;object-fit:contain} #scarlet-bag-v30 .casket-rewards-link{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;width:max-content;max-width:100%;min-height:34px;padding:3px 0;color:#d6b77b;font:14px/20px var(--sc-font-ui);cursor:pointer} #scarlet-bag-v30 .casket-rewards-link:hover{color:#f0d6a6} #scarlet-bag-v30 .casket-rewards-link:focus-visible{outline:1px solid #d6b77b;outline-offset:4px;border-radius:3px} .campaign-guaranteed{padding:8px 10px;margin-bottom:12px;border-bottom:1px solid #73572f;background:linear-gradient(90deg,transparent,#b38b3b18,transparent)} .campaign-guaranteed>.muted{display:block;font-size:12px;margin-bottom:4px} .campaign-guaranteed-item{display:flex;align-items:center;justify-content:center;gap:8px;color:#e5c27d;font-size:14px} .campaign-guaranteed-item .art-icon{width:36px;height:36px;object-fit:contain} /* Pending achievement rewards share the profile shortcut without shifting it. */ #scarlet-bag-v30 .achievements-button:not(.portrait-shortcut){position:relative} #scarlet-bag-v30 .achievements-button{overflow:visible} #scarlet-bag-v30 .achievements-button.has-rewards img{filter:drop-shadow(0 0 5px #d9a54888)} #scarlet-bag-v30 .achievement-reward-badge{position:absolute;z-index:2;top:-3px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;border:1px solid #e2ba71;border-radius:9px;background:#65421e;color:#fff0c8;box-shadow:0 1px 4px #000b,0 0 6px #d6a55255;font:600 11px/1 var(--sc-font-ui);font-variant-numeric:lining-nums tabular-nums;pointer-events:none} /* Permanent portrait collection bonuses: a quiet brass panel with resource emblems. */ #scarlet-bag-v30 .avatar-collection-bonuses{margin:0 0 18px;padding:12px 0 10px;border-top:1px solid #b28a4759;border-bottom:1px solid #b28a4740;background:radial-gradient(ellipse at 50% 25%,#ac793b1c,transparent 72%)} #scarlet-bag-v30 .avatar-bonuses-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 5px} #scarlet-bag-v30 .avatar-bonuses-heading h4{margin:0;color:#e0c28d;font:18px/1.2 var(--sc-font-display)} #scarlet-bag-v30 .avatar-bonuses-permanent{display:inline-flex;align-items:center;gap:6px;color:#b89a64;font:10px/1.2 var(--sc-font-ui)} #scarlet-bag-v30 .avatar-bonuses-permanent::before{content:'';width:5px;height:5px;transform:rotate(45deg);border:1px solid #b89a64;background:#b89a6426} #scarlet-bag-v30 .avatar-bonus-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 10px} #scarlet-bag-v30 .avatar-bonus-total{position:relative;display:grid;justify-items:center;gap:4px;min-width:0;padding:0 5px;color:#9c8c78} #scarlet-bag-v30 .avatar-bonus-total+.avatar-bonus-total{border-left:1px solid #9f7c3c26} #scarlet-bag-v30 .avatar-bonus-total .avatar-bonus-icon{width:30px;height:32px;object-fit:contain;opacity:.45} #scarlet-bag-v30 .avatar-bonus-total strong{font:25px/1.15 var(--sc-font-display);font-variant-numeric:tabular-nums} #scarlet-bag-v30 .avatar-bonus-total>span{font:11px/1.3 var(--sc-font-ui)} #scarlet-bag-v30 .avatar-bonus-total.is-active{color:#e5c68d} #scarlet-bag-v30 .avatar-bonus-total.is-active .avatar-bonus-icon{opacity:1} #scarlet-bag-v30 .avatar-bonuses-note{margin:0 auto;max-width:290px;text-align:center;color:#a9957c;font:10px/1.5 var(--sc-font-ui)} #scarlet-bag-v30 .avatar-owned-bonus{display:inline-flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;color:#d9b575;font:12px/18px var(--sc-font-display)} #scarlet-bag-v30 .avatar-owned-bonus img{width:16px;height:18px;object-fit:contain} @media(max-width:350px){#scarlet-bag-v30 .avatar-bonuses-heading h4{font-size:16px}#scarlet-bag-v30 .avatar-bonus-total strong{font-size:22px}}