/* Approved font families: Vollkorn + PT Sans. Shared reading sizes are applied after the component styles. */
@font-face{font-family:Vollkorn;src:url('./assets/fonts/vollkorn-variable.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:'PT Sans';src:url('./assets/fonts/pt-sans-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'PT Sans';src:url('./assets/fonts/pt-sans-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--sc-game-max-width:440px;--sc-game-viewport-height:100svh;--sc-font-display:Vollkorn,Georgia,serif;--sc-font-ui:'PT Sans',Arial,sans-serif;font-optical-sizing:auto}

/* Canonical v30 styles, extracted without altering the original prototype. */
body{margin:0;background:#080a0f}

#scarlet-bag-v30{--sc-paper:#eee1c9;--sc-muted:#c1b4a1;--sc-brass:#b49762;--sc-wine:#39151e;--sc-current:#39d2b6;--sc-empty:#767676;--sc-icon-scale:1;--sc-scene-height:438px;max-width:var(--sc-game-max-width);margin:auto;font:14px/1.4 var(--sc-font-display);color:var(--sc-paper);color-scheme:dark}
#scarlet-bag-v30 *{box-sizing:border-box}#scarlet-bag-v30 [hidden]{display:none!important}#scarlet-bag-v30 button{font:inherit;color:inherit;cursor:pointer}#scarlet-bag-v30 button:focus-visible{outline:2px solid #efcc86;outline-offset:3px}#scarlet-bag-v30 button:disabled{cursor:default}#scarlet-bag-v30 h2,#scarlet-bag-v30 h3,#scarlet-bag-v30 p{margin:0}#scarlet-bag-v30 img{display:block;max-width:100%}
#scarlet-bag-v30 .game{position:relative;background:#12161d;isolation:isolate;box-shadow:0 12px 28px #0005;border:1px solid #594831}
#scarlet-bag-v30 .game-content{background-image:var(--art-scene);background-size:100% auto;background-position:center 50px;background-repeat:no-repeat}
#scarlet-bag-v30 .panel{border:9px solid transparent;border-image:var(--art-panelFrame) 32 / 9px / 0 stretch;background-color:#250f16;background-image:linear-gradient(#1a090dc9,#170b10c9),var(--art-wine);background-size:auto,280px}
#scarlet-bag-v30 .hud{position:relative;z-index:2;display:grid;grid-template-columns:76px minmax(0,1fr) 57px 28px;gap:7px;align-items:center;padding:5px 4px 5px 0;min-height:100px}
#scarlet-bag-v30 .portrait{position:relative;padding:0;border:0;background:none;width:78px;height:78px;flex-shrink:0}
#scarlet-bag-v30 .portrait-cut{position:absolute;inset:6.8%;overflow:hidden;border-radius:50%;background:#182029}
#scarlet-bag-v30 .portrait-cut img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
#scarlet-bag-v30 .portrait-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#scarlet-bag-v30 .age{font-size:19px;margin-bottom:5px;white-space:nowrap}
#scarlet-bag-v30 .meters{display:grid;gap:7px}#scarlet-bag-v30 .resource-row{display:grid;grid-template-columns:16px minmax(18px,1fr) 44px;align-items:center;gap:4px}
#scarlet-bag-v30 .resource-number{font:11px var(--sc-font-ui);white-space:nowrap}
#scarlet-bag-v30 .art-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0;transform:scale(var(--sc-icon-scale))}
#scarlet-bag-v30 .resource-row .art-icon{width:16px;height:20px}
#scarlet-bag-v30 .meter{height:12px;padding:3px 4px;position:relative;isolation:isolate;min-width:0}
#scarlet-bag-v30 .meter:before{content:'';position:absolute;inset:0;background:var(--art-bar) center/100% 100% no-repeat;z-index:-1}
#scarlet-bag-v30 .meter-fill{height:100%;border-radius:9px;background:linear-gradient(#982b32,#59131c)}
#scarlet-bag-v30 .meter-fill.energy{background:linear-gradient(#f0c778,#b67b32)}#scarlet-bag-v30 .meter-fill.mana{background:linear-gradient(#7baadb,#37547b)}
#scarlet-bag-v30 .purse{display:grid;gap:9px;font-size:15px}#scarlet-bag-v30 .purse span{display:flex;gap:5px;align-items:center}
#scarlet-bag-v30 .icon-button{background:none;border:0;padding:6px;width:40px;height:40px;display:grid;place-items:center;flex-shrink:0}
#scarlet-bag-v30 .icon-button img{width:100%;height:100%;object-fit:contain}#scarlet-bag-v30 .settings-button{width:30px;height:44px;padding:4px}
#scarlet-bag-v30 .scene{height:var(--sc-scene-height);position:relative;background:linear-gradient(#070b1240,transparent 23%,transparent 82%,#080b1240)}
#scarlet-bag-v30 .location-heading{display:flex;align-items:center;gap:8px;padding:15px 12px;background:linear-gradient(#070c15b3,transparent)}
#scarlet-bag-v30 .location-heading h2{font-size:29px;font-weight:400;line-height:1.2;text-shadow:0 2px 4px #000;flex:1}
#scarlet-bag-v30 .location-heading h2:after{content:none}
#scarlet-bag-v30 .location-heading .icon-button{width:42px;height:42px;padding:2px}

#scarlet-bag-v30 .poi{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;display:flex;align-items:center;flex-direction:column;width:76px}
#scarlet-bag-v30 .medal{position:relative;width:64px;height:64px;display:block;filter:drop-shadow(0 2px 3px #000a)}
#scarlet-bag-v30 .medal-base{position:absolute;inset:7%;width:86%;height:86%}#scarlet-bag-v30 .medal-symbol{position:absolute;inset:23%;width:54%;height:54%;object-fit:contain}
#scarlet-bag-v30 .poi[aria-pressed=true] .medal{filter:drop-shadow(0 0 4px #e3b45fbb)}
#scarlet-bag-v30 .poi-label{display:none;position:absolute;top:100%;white-space:nowrap;max-width:140px;margin-top:3px;padding:2px 10px;background:#171311;border:1px solid #a48756;font-size:12px;box-shadow:0 2px 4px #0009}
#scarlet-bag-v30 .poi[aria-pressed=true] .poi-label{display:block}#scarlet-bag-v30 .rumors{left:21%;top:57%}#scarlet-bag-v30 .blood{left:81%;top:63%}#scarlet-bag-v30 .search{left:43%;top:86%}
#scarlet-bag-v30 .boss{left:69%;top:32%;width:82px}#scarlet-bag-v30 .boss .medal{width:78px;height:78px}#scarlet-bag-v30 .boss .medal-symbol{inset:12%;width:76%;height:76%}
#scarlet-bag-v30 .completion{position:absolute;bottom:0;right:0;width:20px;height:20px;background:#191613;border:1px solid #9d8355;border-radius:50%;padding:3px}#scarlet-bag-v30 .completion img{width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .detail{position:relative;margin:0 8px 12px;padding:9px 8px 11px}
#scarlet-bag-v30 .detail-top{display:flex;align-items:flex-start;gap:12px}#scarlet-bag-v30 .detail-title{flex:1;font-size:23px;font-weight:400;line-height:1.15}
#scarlet-bag-v30 .stage-group{width:90px;flex-shrink:0;font:11px/1.4 var(--sc-font-ui);padding-top:2px}#scarlet-bag-v30 .segments{display:flex;align-items:center;gap:4px;height:23px;padding-top:9px;margin-top:5px}
#scarlet-bag-v30 .segments span{position:relative;height:6px;min-width:0;flex:1;background:transparent;border:1px solid #6d5c48;border-radius:3px}
#scarlet-bag-v30 .segments .done{background:#b99a60;border-color:#b99a60}
#scarlet-bag-v30 .segments .active{background:#43212a;border-color:#e0cfab;box-shadow:none}
#scarlet-bag-v30 .segments .active::before{content:"";position:absolute;width:6px;height:6px;left:50%;top:-11px;transform:translateX(-50%) rotate(45deg);background:#e0cfab;pointer-events:none}
#scarlet-bag-v30 .description{font:12px/1.5 var(--sc-font-ui);color:var(--sc-muted);margin:7px 0 13px}
#scarlet-bag-v30 .mission-progress{display:flex;align-items:center;gap:9px;font-size:13px}#scarlet-bag-v30 .mission-progress .meter{flex:1;height:16px;padding:4px 5px}
#scarlet-bag-v30 .divider{height:7px;background:var(--art-divider) center/100% 100% no-repeat;margin:12px 0}
#scarlet-bag-v30 .divider,#scarlet-bag-v30 .location-heading:after{filter:brightness(.65) saturate(.8)}
#scarlet-bag-v30 .rewards-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:12px var(--sc-font-ui)}#scarlet-bag-v30 .rewards-row span{display:flex;align-items:center;gap:5px}#scarlet-bag-v30 .rewards-row .cost{margin-right:auto}
#scarlet-bag-v30 .rewards-row .xp-icon{width:25px}
#scarlet-bag-v30 .action-row{margin-top:12px;display:flex;justify-content:flex-end}
#scarlet-bag-v30 .action{--button-art:var(--art-button);position:relative;isolation:isolate;border:0;background:none;min-height:46px;padding:10px 23px;font-size:17px;text-shadow:0 1px 2px #000;min-width:155px}
/* Nine-slice frame: fixed-size corners, flexible middle, original artwork. */
#scarlet-bag-v30 .action::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:16px solid transparent;border-image-source:var(--button-art);border-image-slice:32 fill;border-image-width:16px;border-image-repeat:stretch}
#scarlet-bag-v30 .action.secondary{--button-art:var(--art-button)}#scarlet-bag-v30 .action:disabled{--button-art:var(--art-buttonDisabled);color:#bfb7a6}
#scarlet-bag-v30 .navigation{display:grid;grid-template-columns:repeat(4,1fr);background:#111214;border-top:1px solid #8c714b}
#scarlet-bag-v30 .navigation button{position:relative;border:0;border-right:1px solid #5b4831;background:linear-gradient(#11111466,#06060866),var(--art-navBase) center/100% 100%;padding:12px 2px 11px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:15px;min-height:83px;color:#c7b89e}
#scarlet-bag-v30 .navigation button:last-child{border-right:0}#scarlet-bag-v30 .navigation .art-icon{width:32px;height:32px}
#scarlet-bag-v30 .navigation .current{background:linear-gradient(#731e305e,#320e1a88),var(--art-navBase) center/100% 100%;color:#f0ddbc;box-shadow:inset 0 2px #bf7561}
#scarlet-bag-v30 .navigation .current:before{content:'';position:absolute;top:-4px;width:7px;height:7px;background:#942f3a;border:1px solid #e0a076;transform:rotate(45deg)}
#scarlet-bag-v30 .overlay{position:absolute;inset:0;z-index:5;background:#07090de3;padding:111px 12px 16px;display:flex;align-items:flex-start}
#scarlet-bag-v30 .sheet{width:100%;padding:11px 10px 14px;background-color:#251219;box-shadow:0 7px 24px #000b;position:relative}
#scarlet-bag-v30 .sheet-head{display:flex;align-items:center;gap:8px;margin-bottom:13px}#scarlet-bag-v30 .sheet-head h3{font-size:24px;font-weight:400;line-height:1.15;flex:1}#scarlet-bag-v30 .sheet-head .icon-button{padding:3px;width:40px;height:40px}
#scarlet-bag-v30 .message{font:13px/1.5 var(--sc-font-ui);color:#d2c5b3;margin:10px 0 14px}
#scarlet-bag-v30 .profile-head{display:flex;align-items:center;gap:13px;margin-bottom:15px}#scarlet-bag-v30 .profile-head .portrait{width:94px;height:94px}#scarlet-bag-v30 .profile-name{font-size:20px;line-height:1.15}#scarlet-bag-v30 .profile-subtitle{color:var(--sc-muted);font:12px var(--sc-font-ui);margin-top:6px}
#scarlet-bag-v30 .text-button{background:none;border:0;border-bottom:1px solid #8c714b;padding:6px 0;font-size:12px;margin-top:3px;min-height:32px}
#scarlet-bag-v30 .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:12px 0;font:12px var(--sc-font-ui)}#scarlet-bag-v30 .stat{display:flex;align-items:center;gap:7px;min-height:28px}#scarlet-bag-v30 .stat strong{font-weight:400;margin-left:auto;font-size:14px}
#scarlet-bag-v30 .section-label{font-size:16px;margin:12px 0 8px}
#scarlet-bag-v30 .equipment{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#scarlet-bag-v30 .equipment-slot{aspect-ratio:1;background:var(--art-slot) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;padding:8px 5px;color:#b7aa97;font:11px/1.2 var(--sc-font-ui);text-align:center;min-width:0}
#scarlet-bag-v30 .avatar-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}#scarlet-bag-v30 .avatar-choice{border:1px solid #65523a;background:#14151a;padding:9px 5px;font-size:12px}#scarlet-bag-v30 .avatar-choice[aria-pressed=true]{border-color:#c6a668;background:#3d1923}#scarlet-bag-v30 .avatar-choice .portrait{display:block;margin:auto auto 7px;width:95px;height:95px}
#scarlet-bag-v30 .requirements{list-style:none;padding:0;margin:12px 0 17px;font:13px/1.4 var(--sc-font-ui)}#scarlet-bag-v30 .requirements li{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #62452f}#scarlet-bag-v30 .requirements small{display:block;font-size:11px;color:var(--sc-muted);margin-top:4px}
#scarlet-bag-v30 .boss-hero{width:80px;height:80px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 3px 4px #000a)}
#scarlet-bag-v30 .sheet .action{display:block;width:100%;min-width:0;margin-top:12px}#scarlet-bag-v30 .sheet .story-button{display:flex;align-items:center;justify-content:center;gap:9px}#scarlet-bag-v30 .story-button img{width:28px;height:24px;object-fit:contain}
#scarlet-bag-v30 .journal-row{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:#171318;border:1px solid #6b5036;padding:12px 10px;margin:8px 0;min-height:58px}#scarlet-bag-v30 .journal-row>span{flex:1}#scarlet-bag-v30 .journal-row small{display:block;font:11px var(--sc-font-ui);color:var(--sc-muted);margin-top:4px}
#scarlet-bag-v30 .setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid #634530;font:13px var(--sc-font-ui)}#scarlet-bag-v30 .setting-row input{accent-color:#b39260;width:20px;height:20px}
#scarlet-bag-v30 .app-settings{display:grid;gap:8px}
#scarlet-bag-v30 .settings-heading{margin:12px 0 4px;color:#d4b779;font:18px var(--sc-font-display)}
#scarlet-bag-v30 .settings-note{color:#ad9a88;font:13px/1.5 var(--sc-font-ui);margin:4px 0 10px}
#scarlet-bag-v30 .settings-binding{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid #63453055;font:14px var(--sc-font-ui)}
#scarlet-bag-v30 .settings-binding .settings-note{margin:0}
#scarlet-bag-v30 .settings-binding-linked{color:#d6bb83;text-align:right;overflow-wrap:anywhere}
#scarlet-bag-v30 .settings-account-delete{margin-top:14px;padding-top:8px;border-top:1px solid #80634966}
#scarlet-bag-v30 .settings-account-delete .action{width:100%}
#scarlet-bag-v30 .account-delete-confirm>p{line-height:1.5}
#scarlet-bag-v30 .account-delete-ack{display:flex;align-items:flex-start;gap:10px;margin:20px 0;font:14px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30 .account-delete-ack input{width:20px;height:20px;flex:none;accent-color:#b39260}
#scarlet-bag-v30 .account-delete-actions{display:grid;gap:10px}
#scarlet-bag-v30 .account-deleted{padding:24px;text-align:center;margin:24px 12px}
#scarlet-bag-v30 .setting-row select{min-width:0;max-width:65%;min-height:40px;padding:6px 8px;border:1px solid #745f40;background:#171318;color:#e4cfaa;font:14px var(--sc-font-display)}
#scarlet-bag-v30 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:370px){#scarlet-bag-v30 .hud{grid-template-columns:62px minmax(0,1fr) 48px 24px;gap:4px;padding-right:0;min-height:88px}#scarlet-bag-v30 .hud .portrait{width:66px;height:66px;margin-left:-3px}#scarlet-bag-v30 .age{font-size:17px}#scarlet-bag-v30 .resource-row{grid-template-columns:13px minmax(15px,1fr) 42px;gap:3px}#scarlet-bag-v30 .resource-row .art-icon{width:13px;height:17px}#scarlet-bag-v30 .purse{font-size:13px;gap:9px}#scarlet-bag-v30 .purse .art-icon{width:17px;height:20px}#scarlet-bag-v30 .settings-button{width:26px}#scarlet-bag-v30 .scene{height:calc(var(--sc-scene-height) - 36px)}#scarlet-bag-v30 .location-heading{padding:14px 9px;gap:5px}#scarlet-bag-v30 .location-heading h2{font-size:26px}#scarlet-bag-v30 .detail{padding:7px 5px 9px;margin-left:5px;margin-right:5px}#scarlet-bag-v30 .detail-title{font-size:20px}#scarlet-bag-v30 .stage-group{width:82px}#scarlet-bag-v30 .rewards-row{gap:10px;font-size:11px}#scarlet-bag-v30 .rewards-row .art-icon{width:17px;height:19px}#scarlet-bag-v30 .navigation button{font-size:14px}#scarlet-bag-v30 .overlay{padding:101px 7px 12px}#scarlet-bag-v30 .sheet{padding:8px 7px 12px}#scarlet-bag-v30 .profile-head .portrait{width:79px;height:79px}#scarlet-bag-v30 .profile-name{font-size:18px}#scarlet-bag-v30 .equipment{gap:5px}#scarlet-bag-v30 .equipment-slot{font-size:11px;padding:7px 3px}}
#scarlet-bag-v30 .boss-detail{padding:0 5px 10px;margin-top:0}
#scarlet-bag-v30 .boss-main{display:grid;grid-template-columns:36% minmax(0,1fr);gap:10px;position:relative}
#scarlet-bag-v30 .boss-portrait{position:relative;min-height:198px;margin-top:-33px;margin-left:-5px;overflow:hidden;align-self:stretch;pointer-events:none}
#scarlet-bag-v30 .boss-portrait:before{content:'';position:absolute;inset:34px 0 0;background:radial-gradient(ellipse at 50% 45%,#41525e,#10191e);border-right:1px solid #7e6443}
#scarlet-bag-v30 .boss-portrait img{position:absolute;width:197%;max-width:none;height:auto;top:0;left:-66%;filter:drop-shadow(3px 3px 4px #0007)}
#scarlet-bag-v30 .boss-summary{padding:12px 3px 4px 0;min-width:0}
#scarlet-bag-v30 .boss-heading{display:flex;align-items:center;justify-content:space-between;gap:2px}
#scarlet-bag-v30 .boss-heading .boss-story{flex:0 0 44px;width:44px;height:44px;padding:9px}
#scarlet-bag-v30 .boss-name{font-size:23px;font-weight:400;line-height:1.2;overflow-wrap:normal}
#scarlet-bag-v30 .boss-health{margin-top:12px}
#scarlet-bag-v30 .boss-health-label{display:flex;align-items:center;gap:5px;justify-content:space-between;margin-bottom:5px;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .boss-health .meter{height:15px;padding:4px}
#scarlet-bag-v30 .boss-summary .description{font:14px/1.4 var(--sc-font-display);margin-top:12px;color:#e3d5c1}
#scarlet-bag-v30 .boss-tools{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:8px}
#scarlet-bag-v30 .boss-tools .text-button{display:flex;align-items:center;gap:6px;margin:0;border:0;padding:4px 0;font:12px var(--sc-font-ui);text-align:left;flex:1}
#scarlet-bag-v30 .boss-tools .icon-button{width:36px;height:36px;padding:7px}
#scarlet-bag-v30 .boss-detail .divider{margin:7px 2px 10px}
#scarlet-bag-v30 .boss-detail .rewards-row{padding:0 5px;gap:9px;justify-content:space-between}
#scarlet-bag-v30 .boss-detail .rewards-row .cost{margin-right:0}
#scarlet-bag-v30 .boss-detail .action-row{padding:0 5px;margin-top:12px}
#scarlet-bag-v30 .boss-detail .action{width:100%}
@media(max-width:370px){#scarlet-bag-v30 .boss-main{grid-template-columns:34% minmax(0,1fr);gap:8px}#scarlet-bag-v30 .boss-name{font-size:20px}#scarlet-bag-v30 .boss-portrait{min-height:198px}#scarlet-bag-v30 .boss-summary{padding-top:10px}#scarlet-bag-v30 .boss-summary .description{font-size:13px}#scarlet-bag-v30 .boss-tools .text-button{font-size:11px}#scarlet-bag-v30 .boss-tools .art-icon{width:21px}#scarlet-bag-v30 .boss-detail .rewards-row{gap:6px;font-size:11px}}
#scarlet-bag-v30[data-resource-tone="muted"] img[data-art="health"],
#scarlet-bag-v30[data-resource-tone="muted"] img[data-art="mana"],
#scarlet-bag-v30[data-resource-tone="muted"] img[data-art="energy"]{filter:saturate(.52) brightness(.88) contrast(.94)}
@media(max-width:340px){#scarlet-bag-v30 .boss-name{font-size:18px}}
#scarlet-bag-v30[data-screen="bag"] .scene,#scarlet-bag-v30[data-screen="bag"] .detail{display:none}
#scarlet-bag-v30[data-screen="bag"] .game-content{background-image:linear-gradient(#0c0d10dd,#111014ef),var(--art-charcoal);background-size:auto,280px;background-repeat:repeat}
#scarlet-bag-v30 .bag-page{padding:17px 12px 15px}
#scarlet-bag-v30 .bag-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 3px 14px}
#scarlet-bag-v30 .bag-heading h2{font-size:29px;font-weight:400}
#scarlet-bag-v30 .bag-count{font:12px var(--sc-font-ui);color:#c1b4a1}
#scarlet-bag-v30 .bag-filters{display:grid;grid-template-columns:.6fr 1.3fr 1.2fr 1fr;gap:4px;margin-bottom:15px}
#scarlet-bag-v30 .bag-filters button{border:0;border-bottom:1px solid #665238;background:#161418;color:#c1b4a1;padding:8px 2px;min-height:40px;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .bag-filters button[aria-pressed=true]{background:#36151f;color:#f2dfbe;border-bottom:2px solid #c1a06a}
#scarlet-bag-v30 .bag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#scarlet-bag-v30 .bag-slot{position:relative;aspect-ratio:1;min-width:0;border:0;background:var(--art-slot) center/100% 100% no-repeat;padding:12%;display:grid;place-items:center}
#scarlet-bag-v30 .bag-slot>img{width:100%;height:100%;min-height:0;object-fit:contain;transform:scale(var(--sc-item-scale,1));pointer-events:none}
#scarlet-bag-v30 .bag-slot[aria-pressed=true]{box-shadow:inset 0 0 0 2px #d6b97d;background-color:#483027}
#scarlet-bag-v30 .bag-slot .equipped-mark{position:absolute;right:5px;top:5px;width:17px;height:17px;background:#1b1712;border-radius:50%;padding:3px;box-shadow:0 0 0 1px #8d754c}
#scarlet-bag-v30 .equipped-mark img{width:100%;height:100%;object-fit:contain}
/* Quantities share the interface lettering, without rectangular badges. */
#scarlet-bag-v30 .item-quantity,#scarlet-bag-v30 .duel-loot-quantity{position:absolute;display:block;padding:0;border:0;border-radius:0;background:none;color:#ead2a0;font:bold 14px/16px var(--sc-font-display);font-variant-numeric:lining-nums tabular-nums;text-align:right;-webkit-text-stroke:.7px #211617;paint-order:stroke fill;text-shadow:0 1px 2px #080509,0 0 3px #080509;pointer-events:none}
#scarlet-bag-v30 .item-quantity{bottom:5px;right:6px}
#scarlet-bag-v30 .bag-slot.empty{opacity:.42;pointer-events:none}
#scarlet-bag-v30 .inventory-legend{display:flex;align-items:center;gap:5px;color:#bbab92;font:11px var(--sc-font-ui);margin:10px 2px 15px}
#scarlet-bag-v30 .inventory-legend img{width:12px;height:12px;object-fit:contain}
#scarlet-bag-v30 .item-card{padding:9px 8px 10px;min-height:230px}
#scarlet-bag-v30 .item-card-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
#scarlet-bag-v30 .item-preview{width:72px;height:82px;object-fit:contain;padding:4px}
#scarlet-bag-v30 .item-card h3{font-size:22px;font-weight:400;line-height:1.15;overflow-wrap:anywhere}
#scarlet-bag-v30 .item-kind{font:11px var(--sc-font-ui);color:#b9a88e;margin-top:7px}
#scarlet-bag-v30 .item-card .description{margin:10px 0 12px}
#scarlet-bag-v30 .compare-note{display:flex;align-items:center;gap:7px;font:11px/1.4 var(--sc-font-ui);color:#bfae96;margin:10px 0}
#scarlet-bag-v30 .compare-note img{width:27px;height:27px;object-fit:contain;flex-shrink:0}
#scarlet-bag-v30 .item-stats{display:grid;gap:8px;font:12px var(--sc-font-ui);margin:13px 0}
#scarlet-bag-v30 .item-stat-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:baseline}
#scarlet-bag-v30 .item-stat-row strong{font-weight:400;font-size:15px;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .stat-delta{min-width:30px;text-align:right;color:#aaa292;font-size:12px}
#scarlet-bag-v30 .stat-delta.positive{color:#a9c2a1}#scarlet-bag-v30 .stat-delta.negative{color:#e29a94}
#scarlet-bag-v30 .item-action{display:block;width:100%;margin-top:14px;min-width:0}
#scarlet-bag-v30 .ring-target{display:flex;gap:7px;align-items:center;justify-content:space-between;margin:10px 0;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .ring-target select{max-width:65%;min-width:0;min-height:40px;color:#ecddc5;background:#171316;border:1px solid #806642;padding:4px;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .bag-feedback{font:12px/1.4 var(--sc-font-ui);color:#c6b28c;min-height:17px;margin:10px 3px 0}
#scarlet-bag-v30 .profile-equipped{display:flex;flex-direction:column;gap:3px;min-height:75px;padding:9px 6px;border:0;cursor:pointer}
#scarlet-bag-v30 .profile-equipped img{width:38px;height:38px;object-fit:contain}
#scarlet-bag-v30 .profile-equipped span{font:11px/1.2 var(--sc-font-ui);text-align:center}
#scarlet-bag-v30 .overlay{height:max(100%,780px)}
#scarlet-bag-v30 .game:has(.overlay:not(.floating):not([hidden])){min-height:780px}
@media(max-width:370px){#scarlet-bag-v30 .bag-page{padding:14px 9px 12px}#scarlet-bag-v30 .bag-grid{gap:7px}#scarlet-bag-v30 .bag-filters{gap:3px}#scarlet-bag-v30 .bag-filters button{font-size:11px;min-height:44px}#scarlet-bag-v30 .item-card{padding:7px 5px 9px}#scarlet-bag-v30 .item-card-head{grid-template-columns:61px minmax(0,1fr);gap:9px}#scarlet-bag-v30 .item-preview{width:61px;height:74px}#scarlet-bag-v30 .item-card h3{font-size:20px}#scarlet-bag-v30 .bag-slot .equipped-mark{right:4px;top:4px;width:15px;height:15px}}
#scarlet-bag-v30 .bag-sort-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-3px 2px 13px;font:12px var(--sc-font-ui);color:#c1b4a1}
#scarlet-bag-v30 .bag-sort{font:14px var(--sc-font-ui);color:#e5d6bc;background:#171418;border:1px solid #715b3d;padding:8px;min-height:44px;max-width:68%}

#scarlet-bag-v30 .access-requirement{display:flex;gap:9px;font:13px/1.5 var(--sc-font-ui);margin:14px 0}
#scarlet-bag-v30 .access-requirement small{display:block;color:#c1b4a1;font-size:12px;margin-top:5px}
#scarlet-bag-v30 .profile-layout{--sc-equipment-width:64px;display:grid;grid-template-columns:var(--sc-equipment-width) minmax(0,1fr) var(--sc-equipment-width);gap:10px;align-items:start;margin:12px 0 16px}
#scarlet-bag-v30 .equipment-side{display:grid;gap:8px}
#scarlet-bag-v30 .profile-layout .profile-equipped{width:100%;height:66px;min-height:0;aspect-ratio:auto;padding:5px 3px;gap:2px}
#scarlet-bag-v30 .profile-layout .profile-equipped img{width:37px;height:37px}
#scarlet-bag-v30 .profile-center{text-align:center;min-width:0;padding-top:15px}
#scarlet-bag-v30 .profile-avatar-button{display:block;padding:0;border:0;background:none;margin:0 auto 10px;max-width:100%}
#scarlet-bag-v30 .profile-avatar-button .portrait{display:block;width:126px;height:126px;max-width:100%}
#scarlet-bag-v30 .profile-center .profile-name{font-size:19px;line-height:1.2;margin:8px -2px 12px}
#scarlet-bag-v30 .profile-identity{font:12px/1.65 var(--sc-font-ui);color:#d8c5a5}
#scarlet-bag-v30 .profile-rank{font:22px var(--sc-font-display);margin-left:5px;color:#d6b879}
#scarlet-bag-v30 .profile-xp{margin:13px 0 15px}
#scarlet-bag-v30 .profile-xp-label{display:flex;align-items:center;justify-content:space-between;font:11px var(--sc-font-ui);margin-bottom:5px;color:#d2c0a1}
#scarlet-bag-v30 .profile-xp .meter-fill{background:linear-gradient(#b99a62,#866842)}
#scarlet-bag-v30 .profile-artifact{width:var(--sc-equipment-width);margin:0 auto}
#scarlet-bag-v30 .profile-combat{border-top:1px solid #665038;padding-top:10px}
@media(max-width:370px){#scarlet-bag-v30 .profile-layout{--sc-equipment-width:55px;grid-template-columns:var(--sc-equipment-width) minmax(0,1fr) var(--sc-equipment-width);gap:7px}#scarlet-bag-v30 .profile-avatar-button .portrait{width:105px;height:105px}#scarlet-bag-v30 .profile-center .profile-name{font-size:17px}#scarlet-bag-v30 .profile-layout .profile-equipped{height:63px}#scarlet-bag-v30 .profile-layout .profile-equipped img{width:33px;height:33px}}
#scarlet-bag-v30 .bag-slot:not(.empty),#scarlet-bag-v30 .rarity-surface{background-image:var(--art-slot),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:100% 100%,94% 94%,94% 94%;background-position:center;background-repeat:no-repeat;background-color:transparent}
#scarlet-bag-v30 .bag-slot[aria-pressed=true]{background-color:transparent;box-shadow:inset 0 0 0 2px #f0cf90,0 0 0 1px #d6b97d}
#scarlet-bag-v30 .bag-slot>img,#scarlet-bag-v30 .item-preview,#scarlet-bag-v30 .profile-equipped>img{filter:drop-shadow(0 1px 2px #000b)}
#scarlet-bag-v30 .item-preview-slot{width:72px;height:82px;display:grid;place-items:center;padding:8px}
#scarlet-bag-v30 .item-preview-slot .item-preview{width:100%;height:100%;min-height:0;padding:0;object-fit:contain}
#scarlet-bag-v30 .profile-equipped span{background:#100e12e8;padding:2px 3px;border-radius:2px;color:#e7dbc8}
@media(max-width:370px){#scarlet-bag-v30 .item-preview-slot{width:61px;height:74px}}
#scarlet-bag-v30 .profile-equipped .slot-placeholder{display:block;width:35px;height:40px;padding:0;border-radius:0;background:var(--placeholder-art) center/contain no-repeat;opacity:1}
#scarlet-bag-v30 .profile-layout .profile-equipped>img{width:44px;height:48px}
#scarlet-bag-v30 .picker-back{display:flex;align-items:center;gap:7px;background:none;border:0;min-height:44px;padding:4px 0;margin:0 0 10px;color:#d7c2a2;font:13px var(--sc-font-ui)}
#scarlet-bag-v30 .picker-back img{width:20px;height:20px;object-fit:contain}
#scarlet-bag-v30 .picker-detail{margin-top:15px;min-height:0;padding:0}
#scarlet-bag-v30 .picker-note{font:12px/1.4 var(--sc-font-ui);color:#cbb99b;margin:12px 0}
#scarlet-bag-v30 .picker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(max-width:370px){#scarlet-bag-v30 .profile-layout .profile-equipped>img{width:39px;height:45px}}

#scarlet-bag-v30 .gear-types{display:flex;flex-wrap:wrap;gap:3px 9px;margin:-5px 0 9px}
#scarlet-bag-v30 .gear-types button{background:none;border:0;border-bottom:2px solid transparent;color:#b9aa92;font:12px var(--sc-font-ui);padding:8px 4px;min-height:44px}
#scarlet-bag-v30 .gear-types button[aria-pressed=true]{color:#ecd1a2;border-bottom-color:#bda073}
#scarlet-bag-v30 .bag-sort-row{margin:0 0 12px;gap:6px}
#scarlet-bag-v30 .bag-sort{display:flex;align-items:center;gap:9px;justify-content:space-between;background:#20181c;border:1px solid #6e583a;border-radius:3px;max-width:none;font:12px var(--sc-font-ui);padding:8px 10px;min-height:44px}
#scarlet-bag-v30 .bag-result{font:12px var(--sc-font-ui);color:#bcaf9a}
#scarlet-bag-v30 .sort-options{display:grid;gap:0}
#scarlet-bag-v30 .sort-option{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid #554031;cursor:pointer;font:16px var(--sc-font-display);min-height:62px}
#scarlet-bag-v30 .sort-option:last-child{border-bottom:0}
#scarlet-bag-v30 .sort-option input{accent-color:#bf9b60;width:18px;height:18px;margin:0;flex-shrink:0}
#scarlet-bag-v30 .sort-option small{display:block;font:12px/1.4 var(--sc-font-ui);color:#c3b29b;margin-top:5px}
#scarlet-bag-v30[data-resource-tone="muted"] img[data-art="blood"],#scarlet-bag-v30[data-resource-tone="muted"] img[data-art="bloodMission"]{filter:saturate(.68) brightness(.72)}
#scarlet-bag-v30[data-screen="magic"] .scene,#scarlet-bag-v30[data-screen="magic"] .detail{display:none}
#scarlet-bag-v30[data-screen="magic"] .game-content{background:linear-gradient(#0c0d10e6,#111014ef),var(--art-charcoal) center/280px}
#scarlet-bag-v30 .magic-page{padding:17px 12px 15px}
#scarlet-bag-v30 .magic-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
#scarlet-bag-v30 .magic-heading h2{font-size:29px;font-weight:400}
#scarlet-bag-v30 .magic-learned{font:12px var(--sc-font-ui);color:#bfaf95}
#scarlet-bag-v30 .magic-intro{font:12px/1.5 var(--sc-font-ui);color:#bdaf9c;margin:10px 0 17px}
#scarlet-bag-v30 .spell-list{display:grid;gap:8px;margin-bottom:18px}
#scarlet-bag-v30 .spell-row{display:flex;align-items:center;gap:10px;text-align:left;min-height:76px;border:1px solid #584932;background:#171419;padding:9px 10px;width:100%}
#scarlet-bag-v30 .spell-row[aria-pressed=true]{border-color:#ba9961;background:#32151f;box-shadow:inset 2px 0 #ba9961}
#scarlet-bag-v30 .spell-emblem{width:42px;height:46px;flex-shrink:0;display:grid;place-items:center;background:var(--art-slot) center/100% 100% no-repeat}
#scarlet-bag-v30 .spell-emblem .art-icon{width:28px;height:28px;opacity:.75}
#scarlet-bag-v30 .spell-emblem.has-scene{width:var(--sc-spell-size,64px);height:var(--sc-spell-size,64px);background:none;border:1px solid #a68a58;padding:2px;box-shadow:0 2px 5px #0008}
#scarlet-bag-v30 .spell-scene{width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .spell-detail-visual{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#scarlet-bag-v30 .spell-detail-art{width:100px;height:100px;flex-shrink:0;border:1px solid #a68a58;padding:3px;background:#101713;box-shadow:0 3px 9px #0008}
#scarlet-bag-v30 .spell-detail-visual .spell-detail-heading{min-width:0}
#scarlet-bag-v30 .spell-detail-visual h3{font-size:22px}
#scarlet-bag-v30 .spell-status{max-width:65px}
@media(max-width:370px){#scarlet-bag-v30 .spell-detail-art{width:84px;height:84px}#scarlet-bag-v30 .spell-detail-visual{gap:9px}#scarlet-bag-v30 .spell-detail-visual h3{font-size:20px}}
#scarlet-bag-v30 .spell-row-copy{flex:1;min-width:0}
#scarlet-bag-v30 .spell-name{display:block;font:17px/1.2 var(--sc-font-display);color:#e9d5b3}
#scarlet-bag-v30 .spell-row-copy small{display:block;font:11px var(--sc-font-ui);color:#b7a793;margin-top:5px}
#scarlet-bag-v30 .spell-status{display:flex;align-items:center;gap:4px;font:11px var(--sc-font-ui);color:#d5b986;white-space:nowrap}
#scarlet-bag-v30 .spell-status.locked{color:#a99d8c}
#scarlet-bag-v30 .spell-status img{width:13px;height:17px}
#scarlet-bag-v30 .spell-detail{padding:17px 16px}
#scarlet-bag-v30 .spell-detail-heading h3{font:24px/1.2 var(--sc-font-display);color:#f0ddbe}
#scarlet-bag-v30 .spell-detail-heading>span{display:block;margin-top:5px;font:12px var(--sc-font-ui);color:#bba687}
#scarlet-bag-v30 .spell-detail .description{margin:14px 0;color:#cfc0ad}
#scarlet-bag-v30 .spell-facts{display:grid;gap:10px;font:13px var(--sc-font-ui)}
#scarlet-bag-v30 .spell-facts>div{display:flex;justify-content:space-between;gap:12px}
#scarlet-bag-v30 .spell-facts strong,#scarlet-bag-v30 .spell-next strong{font-weight:400;color:#ebd2a0}
#scarlet-bag-v30 .spell-next{display:flex;justify-content:space-between;gap:10px;font:13px var(--sc-font-ui);color:#decbaa}
#scarlet-bag-v30 .spell-cost{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:14px 0 8px;font:12px var(--sc-font-ui);color:#c8b99f}
#scarlet-bag-v30 .spell-cost>span:first-child{display:flex;align-items:center;gap:5px;color:#ead6b7}
#scarlet-bag-v30 .spell-requirement{font:12px/1.5 var(--sc-font-ui);color:#c7b496;min-height:18px;margin-bottom:13px}
#scarlet-bag-v30 .spell-action{width:100%;min-width:0}
#scarlet-bag-v30 .magic-feedback{font:12px/1.5 var(--sc-font-ui);color:#d5bc92;min-height:18px;margin:12px 3px 0}
@media(max-width:370px){#scarlet-bag-v30 .magic-page{padding:14px 9px 12px}#scarlet-bag-v30 .spell-row{padding:8px;gap:7px}#scarlet-bag-v30 .spell-name{font-size:16px}#scarlet-bag-v30 .spell-status{font-size:11px}#scarlet-bag-v30 .spell-detail{padding:16px 12px}}
#scarlet-bag-v30 .clan-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 0 18px;border-bottom:1px solid #685136;padding-bottom:9px}
#scarlet-bag-v30 .clan-tab{position:relative;border:1px solid transparent;border-radius:3px;padding:5px 0 7px;min-width:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:4px;color:#c5b69f;font:11px var(--sc-font-ui)}
#scarlet-bag-v30 .clan-tab[aria-selected=true]{border-color:#c7a46c;background:#352b21;box-shadow:inset 0 1px #e0c591}
#scarlet-bag-v30 .clan-tab[aria-selected=true]:after{content:'';position:absolute;bottom:-13px;width:7px;height:7px;background:#cfac70;transform:rotate(45deg)}
#scarlet-bag-v30 .clan-mark{position:relative;display:inline-block;width:56px;height:61px;flex-shrink:0;isolation:isolate}
#scarlet-bag-v30 .clan-mark .clan-flag{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(.78)}
#scarlet-bag-v30 .clan-mark[data-clan-mark="fernalis"] .clan-flag{filter:hue-rotate(-12deg) saturate(.85) brightness(.48)}
#scarlet-bag-v30 .clan-mark .clan-symbol{position:absolute;left:24%;top:14%;width:52%;height:52%;object-fit:contain;filter:brightness(.88) drop-shadow(0 1px 1px #0009)}
#scarlet-bag-v30 .clan-tab .own-clan-dot{position:absolute;top:3px;right:4px;width:13px;height:13px;border-radius:50%;background:#1c1914;border:1px solid #ac8c59;display:grid;place-items:center}
#scarlet-bag-v30 .own-clan-dot img{width:8px;height:8px;object-fit:contain}
#scarlet-bag-v30 .hud-clan{position:absolute;right:-2px;bottom:-4px;width:31px;height:35px;pointer-events:none;filter:drop-shadow(0 2px 2px #000)}
#scarlet-bag-v30 .hud-clan .clan-symbol{left:20%;width:60%;top:12%;height:57%}
#scarlet-bag-v30 .profile-clan{display:flex;align-items:center;justify-content:center;gap:6px;padding:0;border:0;background:none;min-height:44px;margin:6px auto;color:#d9c09a}
#scarlet-bag-v30 .profile-clan .clan-mark{width:38px;height:43px}
#scarlet-bag-v30 .profile-clan-copy{display:grid;text-align:left;font:14px var(--sc-font-display)}
#scarlet-bag-v30 .profile-clan-copy small{font:11px var(--sc-font-ui);color:#b9a88f}
#scarlet-bag-v30 .school-title-row{display:flex;gap:10px;align-items:center}
#scarlet-bag-v30 .school-title-row .clan-mark{width:50px;height:56px}
@media(max-width:370px){#scarlet-bag-v30 .clan-mark{width:48px;height:54px}#scarlet-bag-v30 .clan-tab{font-size:11px}#scarlet-bag-v30 .clan-tabs{gap:1px}#scarlet-bag-v30 .hud-clan{width:29px;height:33px}}
#scarlet-bag-v30 .other-school-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font:12px var(--sc-font-ui);color:#c6b69c;margin:10px 0 14px}
#scarlet-bag-v30 .other-school-select{min-width:0;max-width:65%;min-height:44px;padding:7px 9px;background:#1c171b;border:1px solid #7b6141;color:#e4cfaa;font:16px var(--sc-font-display)}
#scarlet-bag-v30 .school-summary{margin:14px 0 17px;border-bottom:1px solid #5d4933;padding-bottom:13px}
#scarlet-bag-v30 .school-ownership{font:11px var(--sc-font-ui);color:#baa78b}
#scarlet-bag-v30 .school-name{font:25px var(--sc-font-display);font-weight:400;color:#ecd4ad;margin:5px 0}
#scarlet-bag-v30 .school-discipline{font:13px var(--sc-font-ui);color:#d2bc99}
#scarlet-bag-v30 .school-description{font:12px/1.5 var(--sc-font-ui);color:#bcb09d;margin-top:8px}
#scarlet-bag-v30 .foreign-school-note{font:13px/1.5 var(--sc-font-ui);color:#cbbba0;margin:12px 0}
/* Catalogue and explicit learning states. */
#scarlet-bag-v30 .hud{grid-template-columns:76px minmax(0,1fr) 77px 28px}
#scarlet-bag-v30 .purse{font:13px var(--sc-font-display);white-space:nowrap}
#scarlet-bag-v30 .purse>span{gap:4px}
#scarlet-bag-v30 .spell-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#scarlet-bag-v30 .spell-row{flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;padding:12px 7px;min-width:0;position:relative}
#scarlet-bag-v30 .spell-name{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
#scarlet-bag-v30 .spell-row-copy{flex:1;width:100%}
#scarlet-bag-v30 .spell-row-copy small{line-height:1.35;color:#bdaf9c}
#scarlet-bag-v30 .spell-emblem.has-scene{position:relative;overflow:visible}
#scarlet-bag-v30 .spell-placeholder{width:100%;height:100%;object-fit:contain;padding:9px;background:#24212a}
#scarlet-bag-v30 .spell-state-mark{position:absolute;right:-6px;bottom:-6px;width:23px;height:23px;border:1px solid #ac946d;border-radius:50%;display:grid;place-items:center;background:#1b1719;box-shadow:0 1px 3px #000}
#scarlet-bag-v30 .spell-state-mark .art-icon{width:14px;height:14px;opacity:1}
#scarlet-bag-v30 .spell-status{max-width:none;white-space:normal;line-height:1.3;justify-content:center;font-size:11px;min-height:24px}
#scarlet-bag-v30 .state-learned{border-color:#b39866;background:#30251c;box-shadow:inset 0 2px #ad9567}
#scarlet-bag-v30 .state-learned .spell-status{color:#e2c385}
#scarlet-bag-v30 .state-unlearned{border-color:#726450;background:#1a171b}
#scarlet-bag-v30 .state-unlearned .spell-scene{filter:saturate(.55) brightness(.83)}
#scarlet-bag-v30 .state-unlearned .spell-status{color:#d7cbbb}
#scarlet-bag-v30 .state-locked,#scarlet-bag-v30 .state-unaffordable{border:1px dashed #665c60;background:#111217}
#scarlet-bag-v30 .state-locked .spell-scene,#scarlet-bag-v30 .state-locked .spell-placeholder,#scarlet-bag-v30 .state-unaffordable .spell-scene,#scarlet-bag-v30 .state-unaffordable .spell-placeholder{filter:grayscale(1) brightness(.48)}
#scarlet-bag-v30 .state-locked .spell-name,#scarlet-bag-v30 .state-unaffordable .spell-name{color:#c0b9b2}
#scarlet-bag-v30 .state-locked .spell-status,#scarlet-bag-v30 .state-unaffordable .spell-status{color:#c7b2ae}
#scarlet-bag-v30 .spell-detail{padding:2px 0 5px}
#scarlet-bag-v30 .spell-detail-art .spell-placeholder{padding:15px}
#scarlet-bag-v30 .spell-facts strong{text-align:right;max-width:65%;overflow-wrap:anywhere}
#scarlet-bag-v30 .spell-cost{flex-wrap:wrap}
#scarlet-bag-v30 .spell-feedback,#scarlet-bag-v30 .art-pending{font:12px/1.4 var(--sc-font-ui);margin-top:12px;color:#c5b59e}
#scarlet-bag-v30 .profile-test{margin-top:20px;padding-top:14px;border-top:1px solid #715a3d;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
#scarlet-bag-v30 .profile-test h4{font:17px var(--sc-font-display);margin:0;grid-column:1/-1}
#scarlet-bag-v30 .profile-test label{font:12px/1.5 var(--sc-font-ui);min-width:0}
#scarlet-bag-v30 .profile-test select{display:block;width:100%;min-height:44px;margin-top:5px;padding:7px 5px;color:#eee1c9;background:#1c171d;border:1px solid #8c714b;font:16px var(--sc-font-display)}
#scarlet-bag-v30 .profile-test .action,#scarlet-bag-v30 .profile-test p,#scarlet-bag-v30 .test-feedback{grid-column:1/-1}
#scarlet-bag-v30 .profile-test p,#scarlet-bag-v30 .test-feedback{font:12px/1.5 var(--sc-font-ui);color:#c6b79f}
#scarlet-bag-v30 .game:has(.overlay:not(.floating):not([hidden])){min-height:0}
#scarlet-bag-v30 .overlay{position:absolute;inset:0;height:100%;padding:16px 12px;background:#07090de3}
@media(max-width:370px){#scarlet-bag-v30 .hud{grid-template-columns:60px minmax(0,1fr) 65px 24px;gap:3px}#scarlet-bag-v30 .purse{font-size:12px}#scarlet-bag-v30 .spell-list{gap:8px}#scarlet-bag-v30 .spell-name{font-size:14px}}

/* Compact page of four spells, numeric levels and an identity header. */
#scarlet-bag-v30 .magic-heading{margin-bottom:8px}
#scarlet-bag-v30 .clan-tabs{margin-bottom:12px}
#scarlet-bag-v30 .spell-page-heading{display:flex;justify-content:space-between;margin:12px 0 8px;font:12px var(--sc-font-ui);color:#c5b49b}
#scarlet-bag-v30 .spell-list{margin-bottom:10px;align-items:stretch}
#scarlet-bag-v30 .spell-row{gap:7px;padding:12px 8px 9px;min-height:190px}
#scarlet-bag-v30 .spell-name{font-size:15px;line-height:1.25}
#scarlet-bag-v30 .spell-row-copy{flex:1}
#scarlet-bag-v30 .spell-summary{display:grid;justify-items:center;gap:5px;font:11px/1.3 var(--sc-font-ui);color:#cfbea4;width:100%}
#scarlet-bag-v30 .spell-effect{min-height:28px;display:flex;align-items:center;justify-content:center}
#scarlet-bag-v30 .spell-mana{display:flex;align-items:center;gap:4px;color:#b6c8d8}
#scarlet-bag-v30 .spell-mana .art-icon{width:13px;height:16px}
#scarlet-bag-v30 .spell-level{position:absolute;right:-6px;bottom:-6px;min-width:23px;height:23px;padding:0 4px;display:grid;place-items:center;background:#3b2619;border:1px solid #c7a466;box-shadow:0 1px 3px #000b;color:#f4d89b;font:16px var(--sc-font-display);border-radius:3px}
#scarlet-bag-v30 .spell-level.level-zero{background:#1b1c21;color:#c2bab0;border-color:#776854}
#scarlet-bag-v30 .spell-lock{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:23px;height:23px;background:#17171ceF;border:1px solid #8c8072;border-radius:3px}
#scarlet-bag-v30 .spell-lock .art-icon{width:48px;height:58px;opacity:1}
#scarlet-bag-v30 .spell-lock-reason{font:11px/1.25 var(--sc-font-ui);color:#d1b3a4}
#scarlet-bag-v30 .spell-detail-art{position:relative}
#scarlet-bag-v30 .spell-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0}
#scarlet-bag-v30 .spell-pagination button{width:44px;min-height:44px;padding:4px;background:#18171b;border:1px solid #675337;font:16px var(--sc-font-display);color:#cbbba0}
#scarlet-bag-v30 .spell-pagination button[aria-current=page]{background:#49202a;border-color:#c6a36d;color:#f2dfba;box-shadow:inset 0 -2px #c6a36d}
#scarlet-bag-v30 .magic-feedback:empty{display:none}
#scarlet-bag-v30 .profile-heading{text-align:center;padding:0 4px 12px}
#scarlet-bag-v30 .profile-title{font:13px/1.4 var(--sc-font-display);letter-spacing:.7px;color:#c5a16d;margin-bottom:4px}
#scarlet-bag-v30 .profile-heading .profile-name{font:23px/1.2 var(--sc-font-display);color:#f0ddbd;margin:0;overflow-wrap:anywhere}
#scarlet-bag-v30 .profile-layout{margin-top:3px}
#scarlet-bag-v30 .profile-center{padding-top:0}
#scarlet-bag-v30 .profile-clan{width:100%;gap:5px;margin:5px auto 9px;padding:4px 2px;min-height:44px;border-top:1px solid #786044;border-bottom:1px solid #786044;background:#1c11178c;font:14px var(--sc-font-display)}
#scarlet-bag-v30 .profile-clan>img{width:23px;height:27px;object-fit:contain;flex-shrink:0}
#scarlet-bag-v30 .profile-clan .clan-chevron{font:18px var(--sc-font-display);color:#b59a70}
@media(max-width:370px){#scarlet-bag-v30 .spell-pagination{gap:4px}#scarlet-bag-v30 .profile-heading .profile-name{font-size:22px}#scarlet-bag-v30 .profile-clan{font-size:13px;gap:3px}#scarlet-bag-v30 .profile-clan>img{width:20px;height:25px}#scarlet-bag-v30 .spell-row{padding:10px 6px 8px}}

/* Shared clan identity on portraits and spell cards. */
#scarlet-bag-v30 .profile-avatar-wrap{position:relative;width:126px;max-width:100%;margin:0 auto 14px}
#scarlet-bag-v30 .profile-avatar-wrap .profile-avatar-button{margin:0;width:100%}
#scarlet-bag-v30 .profile-avatar-wrap .profile-clan{position:absolute;right:-5px;bottom:-5px;width:44px;height:48px;min-height:44px;margin:0;padding:0;border:0;background:transparent;filter:drop-shadow(0 2px 2px #000);z-index:2}
#scarlet-bag-v30 .profile-clan .clan-mark{width:42px;height:47px}
#scarlet-bag-v30 .profile-clan .clan-symbol{left:20%;width:60%;top:12%;height:57%}
#scarlet-bag-v30 .spell-row{position:relative}
#scarlet-bag-v30 .spell-school{position:absolute;left:7px;top:7px;display:block;width:28px;height:34px;filter:drop-shadow(0 1px 2px #0009)}
#scarlet-bag-v30 .spell-school .clan-mark{width:100%;height:100%}
#scarlet-bag-v30 .spell-school .clan-symbol{left:18%;top:12%;width:64%;height:58%;filter:brightness(1.06) drop-shadow(0 1px 1px #0009)}
#scarlet-bag-v30 .spell-detail-art .spell-school{left:-10px;top:-8px;width:32px;height:38px}
#scarlet-bag-v30 .spell-detail-heading .spell-school-name{display:block;margin-top:5px;color:#d1b783;font:12px var(--sc-font-ui)}
@media(max-width:370px){#scarlet-bag-v30 .profile-avatar-wrap{width:105px}#scarlet-bag-v30 .spell-school{left:4px;top:4px;width:25px;height:30px}}

/* Shared image corner badges and compact combat figures. */
#scarlet-bag-v30 .spell-row{min-height:0;gap:5px;padding:5px}
#scarlet-bag-v30 .spell-row .spell-emblem.has-scene{display:block;width:min(var(--sc-spell-size,208px),100%);height:auto;aspect-ratio:1;flex-shrink:0}
#scarlet-bag-v30 .spell-row-copy{flex:0 0 auto;min-height:0}
#scarlet-bag-v30 .spell-emblem .spell-school,#scarlet-bag-v30 .spell-detail-art .spell-school{left:-10px;top:-8px;width:32px;height:38px;z-index:1}
#scarlet-bag-v30 .spell-combat{display:flex;justify-content:center;align-items:center;gap:16px;color:#e6cfaa;font:15px/1.2 var(--sc-font-display)}
#scarlet-bag-v30 .spell-combat-stat{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#scarlet-bag-v30 .spell-combat-stat [data-lucide],#scarlet-bag-v30 .spell-combat-stat svg{display:block;width:17px;height:17px;stroke:#c2ad89;flex-shrink:0}
#scarlet-bag-v30 .spell-summary{gap:5px;margin-top:0}
#scarlet-bag-v30 .spell-emblem .spell-school{left:-6px;top:-6px}
#scarlet-bag-v30 .spell-detail>.spell-combat{justify-content:flex-start;margin:16px 0 8px;gap:24px}
#scarlet-bag-v30 .spell-balance-note{font:11px/1.4 var(--sc-font-ui);color:#b8aa99;margin:8px 0}

/* Mastery is distinct from partial learning without an extra caption. */
#scarlet-bag-v30 .state-mastered{border-color:#c7a15f;background:#342719;box-shadow:inset 0 2px #d6b675}
#scarlet-bag-v30 .state-mastered .spell-emblem.has-scene,#scarlet-bag-v30 .spell-detail-art.is-mastered{border-color:#ead095;box-shadow:0 0 0 1px #ac8042,0 2px 5px #0008}
#scarlet-bag-v30 .spell-level.level-max{display:flex;align-items:center;justify-content:center;gap:3px;min-width:36px;background:linear-gradient(#e1c58a,#b38b4e);border-color:#f0dbab;color:#281b0b;box-shadow:0 1px 4px #000b}

/* Costs and combat values sit on the image; level keeps its own corner. */
#scarlet-bag-v30 .spell-mana-badge{position:absolute;right:-6px;top:-6px;z-index:2;display:flex;align-items:center;justify-content:center;gap:3px;min-width:29px;height:23px;padding:0 4px;background:#191c24;border:1px solid #8e826d;border-radius:3px;color:#d3dbea;font:13px var(--sc-font-display);box-shadow:0 1px 3px #000a}
#scarlet-bag-v30 .spell-mana-badge .art-icon{width:12px;height:16px;opacity:1}
#scarlet-bag-v30 .spell-emblem>.spell-combat,#scarlet-bag-v30 .spell-detail-art>.spell-combat{position:absolute;left:1px;right:1px;bottom:1px;height:25px;justify-content:flex-start;gap:6px;padding:0 31px 0 4px;background:#111219ed;color:#ebd5af;font:12px/1 var(--sc-font-display)}
#scarlet-bag-v30 .spell-emblem .spell-combat-stat,#scarlet-bag-v30 .spell-detail-art .spell-combat-stat{gap:3px}
#scarlet-bag-v30 .spell-emblem .spell-combat-stat svg,#scarlet-bag-v30 .spell-emblem .spell-combat-stat [data-lucide],#scarlet-bag-v30 .spell-detail-art .spell-combat-stat svg,#scarlet-bag-v30 .spell-detail-art .spell-combat-stat [data-lucide]{width:12px;height:12px}
#scarlet-bag-v30 .spell-level{z-index:3}
#scarlet-bag-v30 .spell-lock{left:50%;top:48%;right:auto;transform:translate(-50%,-50%);width:80px;height:88px;z-index:2;background:#17171cf5;border-radius:4px;box-shadow:0 2px 8px #0009}
#scarlet-bag-v30 .spell-detail-art{width:128px;height:128px}
@media(max-width:370px){#scarlet-bag-v30 .spell-emblem>.spell-combat,#scarlet-bag-v30 .spell-detail-art>.spell-combat{font-size:11px;gap:4px}#scarlet-bag-v30 .spell-detail-art{width:120px;height:120px}}

#scarlet-bag-v30 .spell-row .spell-school{left:-4px;top:-4px}
#scarlet-bag-v30 .spell-row .spell-mana-badge{right:-4px;top:-4px}
#scarlet-bag-v30 .spell-row .spell-level{right:-4px;bottom:-4px}
#scarlet-bag-v30 .spell-row .spell-lock-reason{padding:2px 3px 0}

/* Full-bleed spell art and larger, legible corner indicators. */
#scarlet-bag-v30 .spell-row{padding:0;gap:0}
#scarlet-bag-v30 .spell-row .spell-emblem.has-scene{width:100%;padding:0;border:0;box-shadow:none}
#scarlet-bag-v30 .spell-row .spell-scene{object-fit:cover}
#scarlet-bag-v30 .spell-row.state-mastered{border-color:#ebcc89;box-shadow:0 0 0 1px #ac8042}
#scarlet-bag-v30 .spell-row .spell-school,#scarlet-bag-v30 .spell-detail-art .spell-school{left:2px;top:2px;width:42px;height:48px}
#scarlet-bag-v30 .spell-row .spell-mana-badge,#scarlet-bag-v30 .spell-detail-art .spell-mana-badge{right:2px;top:2px;min-width:38px;height:30px;gap:4px;font-size:17px}
#scarlet-bag-v30 .spell-mana-badge .art-icon{width:16px;height:22px}
#scarlet-bag-v30 .spell-emblem .spell-mana-badge .art-icon{width:16px;height:22px}
#scarlet-bag-v30 .spell-row .spell-level,#scarlet-bag-v30 .spell-detail-art .spell-level{right:2px;bottom:3px;min-width:29px;height:29px;font-size:19px;padding:0 5px}
#scarlet-bag-v30 .spell-row .spell-level.level-max,#scarlet-bag-v30 .spell-detail-art .spell-level.level-max{min-width:43px}
#scarlet-bag-v30 .spell-emblem>.spell-combat,#scarlet-bag-v30 .spell-detail-art>.spell-combat{left:0;right:0;bottom:0;height:34px;gap:9px;padding:2px 36px 2px 5px;font-size:14px;justify-content:flex-start;align-items:center}
#scarlet-bag-v30 .spell-emblem .spell-combat-stat,#scarlet-bag-v30 .spell-detail-art .spell-combat-stat{flex-direction:row;gap:3px;line-height:1.1}
#scarlet-bag-v30 .spell-emblem .spell-combat-stat svg,#scarlet-bag-v30 .spell-emblem .spell-combat-stat [data-lucide],#scarlet-bag-v30 .spell-detail-art .spell-combat-stat svg,#scarlet-bag-v30 .spell-detail-art .spell-combat-stat [data-lucide]{width:19px;height:19px;stroke-width:1.8}
#scarlet-bag-v30 .spell-detail-art{width:144px;height:144px;padding:0}
#scarlet-bag-v30 .spell-row .spell-lock-reason{position:absolute;left:0;right:0;bottom:34px;z-index:3;padding:5px 3px;background:#111219ed;pointer-events:none}

/* Four large spells; a brass position rail and horizontal gestures. */
#scarlet-bag-v30 .spell-list{touch-action:pan-y;user-select:none;-webkit-user-select:none}

/* Page positions repeat the brass line and red diamond of the main navigation. */
#scarlet-bag-v30 .spell-page-rail{position:relative;display:grid;grid-template-columns:repeat(var(--spell-pages,5),minmax(0,1fr));margin:6px 0 0;height:44px;isolation:isolate}
#scarlet-bag-v30 .spell-page-rail:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#856543;box-shadow:0 1px #0d0d10;z-index:-1}
#scarlet-bag-v30 .spell-page-stop{position:relative;height:100%;min-height:0;min-width:0;border:0;padding:0;background:transparent;border-radius:2px;cursor:pointer}
#scarlet-bag-v30 .spell-page-stop:after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%) rotate(45deg);background:#231a18;border:1px solid #937552}
#scarlet-bag-v30 .page-rail-marker{position:absolute;top:50%;width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);background:#942f3a;border:1px solid #eea786;box-shadow:0 0 7px #d64b4d85;pointer-events:none}
#scarlet-bag-v30 .page-rail-marker:before{content:'';position:absolute;left:50%;top:50%;width:64px;height:24px;transform:translate(-50%,-50%) rotate(-45deg);background:radial-gradient(ellipse,#ac39445c 0%,#76283036 40%,transparent 75%);z-index:-1}
#scarlet-bag-v30 .page-rail-marker:after{content:'';position:absolute;left:50%;top:50%;width:56px;height:2px;transform:translate(-50%,-50%) rotate(-45deg);background:linear-gradient(90deg,transparent,#c24d5690 25%,#df736a 50%,#c24d5690 75%,transparent);z-index:-1}
#scarlet-bag-v30 .spell-page-stop:focus-visible{outline:2px solid #efcc86;outline-offset:-2px}

/* Mastery uses warm color across the footer and level badge, without a check. */
#scarlet-bag-v30 .spell-row .spell-level.level-max,#scarlet-bag-v30 .spell-detail-art .spell-level.level-max{min-width:29px}
#scarlet-bag-v30 .state-mastered .spell-emblem>.spell-combat,#scarlet-bag-v30 .spell-detail-art.is-mastered>.spell-combat{background:linear-gradient(180deg,#5b3d24f5,#392619fa);box-shadow:inset 0 1px #af8858;color:#f1dab0}
#scarlet-bag-v30 .state-mastered .spell-combat-stat svg,#scarlet-bag-v30 .spell-detail-art.is-mastered .spell-combat-stat svg{stroke:#e3c693}
#scarlet-bag-v30[data-screen="city"] .game-content,#scarlet-bag-v30[data-screen="hunt"] .game-content{background:#101218}
#scarlet-bag-v30 .atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 13px 10px}
#scarlet-bag-v30 .atlas-heading h2{font-size:28px;font-weight:normal;line-height:1.1}
#scarlet-bag-v30 .atlas-subtitle{color:#a8a092;font:11px/1.4 var(--sc-font-ui);margin-top:4px}
#scarlet-bag-v30 .atlas-season{min-height:40px;max-width:130px;padding:6px 10px;background:#1b191c;border:1px solid #695539;border-radius:3px;font-size:12px;color:#cbbb9e}
#scarlet-bag-v30 .atlas-map{position:relative;aspect-ratio:1;isolation:isolate;border-top:1px solid #66553a;border-bottom:1px solid #66553a;background:#141820}
#scarlet-bag-v30 .atlas-image{display:block;width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .atlas-markers{position:absolute;inset:0}
#scarlet-bag-v30 .atlas-point{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;padding:4px;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;background:none;z-index:1}
#scarlet-bag-v30 .atlas-point-face{display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border:1px solid #b99d67;border-radius:50%;background:#242126;box-shadow:0 2px 5px #000c,inset 0 0 0 2px #302a23;pointer-events:none}
#scarlet-bag-v30 .atlas-point svg{width:18px;height:18px;fill:none;stroke:#e4c792;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#scarlet-bag-v30 .atlas-point[aria-pressed=true]{z-index:3}
#scarlet-bag-v30 .atlas-point[aria-pressed=true] .atlas-point-face{background:#541f2b;border-color:#f0d49a;box-shadow:0 0 0 2px #27161cc9,0 0 15px #bd4f4b99,inset 0 0 0 2px #683d35}
#scarlet-bag-v30 .atlas-point.hunt-point{padding:0;will-change:transform}
#scarlet-bag-v30 .hunt-point .art-icon{width:calc(24px * var(--sc-icon-scale));height:calc(24px * var(--sc-icon-scale));transform:none;opacity:1}
#scarlet-bag-v30 .hunt-point[aria-pressed=true] .art-icon{opacity:1}
#scarlet-bag-v30 .atlas-map-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;padding:7px 9px;pointer-events:none}
#scarlet-bag-v30 .atlas-refresh{display:flex;align-items:center;justify-content:center;gap:7px;min-width:151px;min-height:39px;padding:7px 15px;border:0;background:none;color:#e3c78e;text-shadow:0 1px 2px #000;pointer-events:auto;font:14px var(--sc-font-display)}
#scarlet-bag-v30 .atlas-refresh:hover{filter:brightness(1.12)}
#scarlet-bag-v30 .atlas-refresh:focus-visible{outline:1px solid #edcd90;outline-offset:2px}
#scarlet-bag-v30 .atlas-refresh .art-icon{width:17px;height:17px}
#scarlet-bag-v30 .atlas-card{margin:8px 7px 0;padding:7px 9px;min-height:169px}
#scarlet-bag-v30 .district-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#scarlet-bag-v30 .district-top h3{font-size:22px;font-weight:normal;line-height:1.2}
#scarlet-bag-v30 .district-description{font:13px/1.4 var(--sc-font-display);color:#c7b8a5;margin:7px 0 8px;min-height:36px}
#scarlet-bag-v30 .district-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #6d523350;padding-top:8px}
#scarlet-bag-v30 .district-tags{font:11px/1.4 var(--sc-font-ui);color:#b1a28c}
#scarlet-bag-v30 .district-bottom .action{min-width:112px;min-height:38px;padding:8px 12px;font-size:15px}
#scarlet-bag-v30 .district-bottom .action:disabled{font-size:12px;opacity:.65}
#scarlet-bag-v30 .hunt-person{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px}
#scarlet-bag-v30 .hunt-avatar{position:relative;width:68px;height:77px}
#scarlet-bag-v30 .hunt-avatar>img{width:68px;height:77px;object-fit:cover;object-position:50% 25%;border:1px solid #947851}
#scarlet-bag-v30 .hunt-avatar .clan-mark{position:absolute;bottom:-4px;right:-5px;width:25px;height:30px}
#scarlet-bag-v30 .hunt-title{color:#b79a6f;font:11px/1.2 var(--sc-font-display);margin-bottom:3px}
#scarlet-bag-v30 .hunt-name{font:22px/1.15 var(--sc-font-display);color:#f0dfc6;overflow-wrap:anywhere}
#scarlet-bag-v30 .hunt-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;margin-top:5px;font:11px var(--sc-font-ui);color:#b4a593}
#scarlet-bag-v30 .hunt-threat{font-size:11px;color:#d9bb7d}
#scarlet-bag-v30 .hunt-threat.hard{color:#e39895}
#scarlet-bag-v30 .hunt-threat.easy{color:#9fbaaa}
#scarlet-bag-v30 .hunt-vitals{display:flex;gap:16px;align-items:center;padding:8px 0 6px;font:13px var(--sc-font-ui);color:#dfd4c4}
#scarlet-bag-v30 .hunt-vitals span{display:flex;align-items:center;gap:5px}
#scarlet-bag-v30 .hunt-vitals .art-icon{width:15px;height:17px}
#scarlet-bag-v30 .hunt-vitals small{font:11px var(--sc-font-ui);color:#ad9d89}
#scarlet-bag-v30 .hunt-action{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #6d523350;padding-top:7px}
#scarlet-bag-v30 .hunt-action .action{min-width:142px;min-height:44px;padding:7px 18px}
#scarlet-bag-v30 .hunt-cost{display:flex;align-items:center;gap:5px;font:12px var(--sc-font-ui);color:#ccbc9e}
#scarlet-bag-v30 .hunt-cost .art-icon{width:17px;height:19px}
#scarlet-bag-v30 .atlas-feedback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#scarlet-bag-v30 .season-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#scarlet-bag-v30 .season-choice{padding:0 0 7px;border:1px solid #635237;background:#15151c;color:#d7c09d;overflow:hidden}
#scarlet-bag-v30 .season-choice img{width:100%;aspect-ratio:1.4;object-fit:cover;margin-bottom:5px}
#scarlet-bag-v30 .season-choice[aria-pressed=true]{border-color:#e7c890;box-shadow:0 0 0 1px #9b5a49}
#scarlet-bag-v30 .duel-opponent{display:flex;align-items:center;gap:12px;margin:10px 0 15px}
#scarlet-bag-v30 .duel-note{font:13px/1.5 var(--sc-font-ui);color:#c3b098;margin-top:14px}
#scarlet-bag-v30 .duel-spells{display:flex;gap:7px;margin:12px 0}
#scarlet-bag-v30 .duel-spells img{width:48px;height:48px;object-fit:cover;border:1px solid #8d704a}
@media(max-width:370px){#scarlet-bag-v30 .atlas-heading{padding:10px}#scarlet-bag-v30 .atlas-heading h2{font-size:25px}#scarlet-bag-v30 .atlas-subtitle{font-size:10px}#scarlet-bag-v30 .atlas-card{padding:5px 6px;margin:6px 5px 0}#scarlet-bag-v30 .hunt-name{font-size:20px}#scarlet-bag-v30 .district-top h3{font-size:20px}}

#scarlet-bag-v30 .atlas-empty{min-height:142px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:12px 20px}
#scarlet-bag-v30 .atlas-empty h3{font:21px/1.2 var(--sc-font-display);color:#d3bb95}
#scarlet-bag-v30 .atlas-empty p{font:13px/1.5 var(--sc-font-display);color:#ac9c89;margin-top:9px}

#scarlet-bag-v30 .atlas-point .district-art{width:29px;height:29px;object-fit:contain;pointer-events:none}
/* Fit the complete image rectangle into a 30px safe circle inside the 36px rim. */
#scarlet-bag-v30 .atlas-point[data-district]{padding:0}
#scarlet-bag-v30 .atlas-point[data-district] .district-art{width:30px;height:30px}

#scarlet-bag-v30 .atlas-page{padding-bottom:16px}


#scarlet-bag-v30 .duel-page{padding-bottom:16px;background:#111217}
#scarlet-bag-v30 .duel-heading{display:flex;align-items:center;gap:10px;padding:13px 12px;border-bottom:1px solid #665438}
#scarlet-bag-v30 .duel-heading h2{font:25px var(--sc-font-display);color:#e4d0ad}
#scarlet-bag-v30 .duel-heading p{font:11px var(--sc-font-ui);color:#9f9281;margin-top:4px}
#scarlet-bag-v30 .duel-back{border:0;background:none;padding:4px;min-width:32px;min-height:38px}
#scarlet-bag-v30 .duel-turn{margin-left:auto;white-space:nowrap;color:#cbb389;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .duel-arena{padding:12px 12px 0;background:linear-gradient(#111218d9,#111218f2),var(--art-scene) center/cover}
#scarlet-bag-v30 .duel-fighters{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:46px}
#scarlet-bag-v30 .duel-fighter{text-align:center;min-width:0}
#scarlet-bag-v30 .duel-title{font:10px/13px var(--sc-font-display);color:#aa9473;height:26px;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#scarlet-bag-v30 .duel-fighter h3{font:18px/1.2 var(--sc-font-display);color:#e4d1af;margin:3px 0 8px;height:43.2px;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#scarlet-bag-v30 .duel-portrait{position:relative;width:100%;max-width:133px;height:135px;margin:auto;border:1px solid #8e744b;box-shadow:0 2px 12px #0009}
#scarlet-bag-v30 .duel-portrait>img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
#scarlet-bag-v30 .duel-portrait .clan-mark{position:absolute;width:29px;height:34px;right:-5px;bottom:-4px}
#scarlet-bag-v30 .is-attacking .duel-portrait{border-color:#dac089;box-shadow:0 0 12px #ba8b493b}
#scarlet-bag-v30 .duel-damage{position:absolute;left:0;right:0;bottom:11px;font:bold 28px var(--sc-font-display);color:#ffaca3;text-shadow:0 2px 3px #000,0 0 8px #35050a}
#scarlet-bag-v30 .duel-clan{font:10px/14px var(--sc-font-ui);height:14px;color:#ac9b86;margin:9px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scarlet-bag-v30 .duel-vs{position:absolute;left:50%;top:116px;transform:translateX(-50%);color:#95774f;font:17px var(--sc-font-display)}
#scarlet-bag-v30 .duel-resource{display:flex;gap:4px;align-items:center;margin-top:5px}
#scarlet-bag-v30 .duel-resource .art-icon{width:13px;height:14px;transform:none}
#scarlet-bag-v30 .duel-bar{height:17px;flex:1;position:relative;border:1px solid #75603f;background:#120d12;overflow:hidden}
#scarlet-bag-v30 .duel-bar>span{position:absolute;inset:0 auto 0 0;background:linear-gradient(#ab3e4c,#541620)}
#scarlet-bag-v30 .duel-bar.duel-mana>span{background:linear-gradient(#44738a,#233b67)}
#scarlet-bag-v30 .duel-bar b{position:absolute;inset:0;font:10px/15px var(--sc-font-ui);color:#eee3d1;text-align:center;text-shadow:0 1px 2px #000}
#scarlet-bag-v30 .duel-exchange{margin-top:16px;padding:12px 0 10px;border-top:1px solid #5d4834;text-align:center}
#scarlet-bag-v30 .duel-exchange-label,#scarlet-bag-v30 .duel-section-label{display:flex;justify-content:space-between;font:12px var(--sc-font-display);color:#cab38b}
#scarlet-bag-v30 .duel-exchange-label span,#scarlet-bag-v30 .duel-section-label span{color:#8c8175;font:10px var(--sc-font-ui)}
#scarlet-bag-v30 .duel-spell-pair{display:flex;align-items:center;justify-content:center;gap:16px;margin:11px 0 8px}
#scarlet-bag-v30 .duel-spell-pair.from-right{flex-direction:row-reverse}
#scarlet-bag-v30 .duel-cast{position:relative;width:108px;height:108px;border:1px solid #b09460;box-shadow:0 2px 10px #0008}
#scarlet-bag-v30 .duel-cast>img{width:100%;height:100%;object-fit:cover}
#scarlet-bag-v30 .duel-cast>span{position:absolute;right:3px;top:3px;display:flex;gap:3px;align-items:center;background:#101622dd;padding:3px;color:#d9deee;font:11px var(--sc-font-ui)}
#scarlet-bag-v30 .duel-cast .art-icon{width:11px;height:13px}
#scarlet-bag-v30 .duel-impact{width:57px;text-align:center}
#scarlet-bag-v30 .duel-direction{display:block;font:32px var(--sc-font-display);color:#b9965f;line-height:25px}
#scarlet-bag-v30 .duel-impact strong{display:block;font:25px var(--sc-font-display);color:#e7a097}
#scarlet-bag-v30 .duel-impact small{font:10px var(--sc-font-ui);color:#a78e85}
#scarlet-bag-v30 .duel-block{position:relative;width:76px;height:76px;border:1px solid #6c5d49;background:#18181e;display:grid;place-items:center}
#scarlet-bag-v30 .duel-block>img{width:100%;height:100%;object-fit:cover;opacity:.6}
#scarlet-bag-v30 .duel-block>svg{width:34px;height:34px;fill:none;stroke:#766c61;stroke-width:1.2}
#scarlet-bag-v30 .duel-block span{position:absolute;left:0;right:0;bottom:0;background:#13151fe8;padding:4px 0;font:10px var(--sc-font-ui);color:#b4a898}
#scarlet-bag-v30 .duel-block.blocked{border-color:#879ca0}
#scarlet-bag-v30 .duel-block.blocked span{color:#c4d9da}
#scarlet-bag-v30 .duel-exchange h3{font:18px var(--sc-font-display);color:#e0c8a1}
#scarlet-bag-v30 .duel-exchange p{font:11px/1.4 var(--sc-font-ui);color:#a49785;margin-top:6px;min-height:16px}
#scarlet-bag-v30 .duel-controls{display:flex;justify-content:center;gap:12px;align-items:center;padding:8px 12px 13px}
#scarlet-bag-v30 .duel-controls .action{width:180px;font-size:15px;min-width:0;min-height:42px;padding:9px 18px}
#scarlet-bag-v30 .duel-loadout{margin:0 12px;padding:10px 0 12px;border-top:1px solid #5a4731}
#scarlet-bag-v30 .duel-deck{display:flex;gap:8px;margin-top:8px}
#scarlet-bag-v30 .duel-deck-spell{position:relative;width:50px;height:50px;border:1px solid #786445}
#scarlet-bag-v30 .duel-deck-spell img{width:100%;height:100%;object-fit:cover}
#scarlet-bag-v30 .duel-deck-spell.was-used img{opacity:.4}
#scarlet-bag-v30 .duel-deck-spell.is-current{border-color:#edc987;box-shadow:0 0 7px #b9873f44}
#scarlet-bag-v30 .duel-deck-spell span{position:absolute;right:0;bottom:0;padding:1px 4px;background:#101015df;font:10px var(--sc-font-ui);color:#e0c298}
#scarlet-bag-v30 .duel-deck p{font:12px/1.5 var(--sc-font-display);color:#a4937d}
#scarlet-bag-v30 .duel-history{margin:0 12px;border-top:1px solid #4d3d2b;padding-top:10px}
#scarlet-bag-v30 .duel-history summary{cursor:pointer;color:#b69f7b;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .duel-history summary>span{float:right;color:#887f74;font:10px var(--sc-font-ui)}
#scarlet-bag-v30 .duel-history ol{list-style:none;padding:0;margin:8px 0 0}
#scarlet-bag-v30 .duel-history li{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #312b27;font:11px var(--sc-font-ui);color:#c4b396}
#scarlet-bag-v30 .duel-history li>span{color:#776953;width:15px}
#scarlet-bag-v30 .duel-history li>div{flex:1}
#scarlet-bag-v30 .duel-history small{display:block;color:#8a8174;margin-top:4px}
#scarlet-bag-v30 .duel-history strong{color:#d78f85}
#scarlet-bag-v30 .duel-result{margin:8px 12px 14px;padding:15px;text-align:center}
#scarlet-bag-v30 .duel-result h3{font:26px var(--sc-font-display);color:#e0c08a}
#scarlet-bag-v30 .duel-result p{font:12px var(--sc-font-display);color:#baaa92;margin:8px 0 12px}
#scarlet-bag-v30 .duel-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;border-top:1px solid #92704266;padding:15px 8px 3px;margin-top:14px}
#scarlet-bag-v30 .duel-reward{display:flex;align-items:center;gap:9px;min-width:92px;text-align:left}
#scarlet-bag-v30 .duel-reward .art-icon{width:28px;height:34px;object-fit:contain;transform:none}
#scarlet-bag-v30 .duel-reward strong{display:block;font:22px/1.15 var(--sc-font-display);color:#e5c98e}
#scarlet-bag-v30 .duel-reward span{display:block;font:11px/1.4 var(--sc-font-ui);color:#b8a58a;margin-top:3px}
@media(max-width:370px){#scarlet-bag-v30 .duel-fighters{gap:30px}#scarlet-bag-v30 .duel-portrait{height:118px}#scarlet-bag-v30 .duel-title{font-size:9px}#scarlet-bag-v30 .duel-spell-pair{gap:10px}#scarlet-bag-v30 .duel-cast{width:96px;height:96px}#scarlet-bag-v30 .duel-heading h2{font-size:23px}}
/* Fixed-height drum and outcome strip keep the page still throughout combat. */
#scarlet-bag-v30 .duel-arena{overflow:hidden}
#scarlet-bag-v30 .duel-portrait{height:118px}
#scarlet-bag-v30 .duel-vs{top:139.2px;transform:translate(-50%,-50%)}
#scarlet-bag-v30 .duel-portrait .clan-mark{z-index:4}
#scarlet-bag-v30 .duel-drum{position:relative;height:272px;perspective:760px;margin-top:10px;isolation:isolate;outline-offset:-2px}
#scarlet-bag-v30 .duel-drum.can-browse{touch-action:none;cursor:grab}
#scarlet-bag-v30 .duel-drum.can-browse:active{cursor:grabbing}
#scarlet-bag-v30 .drum-card{position:absolute;top:58px;left:0;right:0;height:208px;margin:0;padding:10px 9px 9px;background:linear-gradient(135deg,#23202a,#12131a 70%);border:1px solid #6d573b;border-radius:3px;box-shadow:0 8px 15px #0008;transform-origin:50% 0;backface-visibility:hidden}
#scarlet-bag-v30 .drum-card.depth-0{z-index:4;animation:duel-drum-in var(--drum-duration,420ms) cubic-bezier(.22,.65,.3,1) both}
#scarlet-bag-v30 .drum-card.depth-1{z-index:2;transform:translateY(-28px) translateZ(-65px) rotateX(9deg) scale(.94);filter:brightness(.48);pointer-events:none;animation:duel-drum-away var(--drum-duration,420ms) ease-out both}
#scarlet-bag-v30 .drum-card.depth-2{z-index:1;transform:translateY(-52px) translateZ(-135px) rotateX(14deg) scale(.91);filter:brightness(.29);pointer-events:none}
#scarlet-bag-v30 .roll-back .drum-card.depth-0{animation-name:duel-drum-back}
#scarlet-bag-v30 .drum-card .duel-spell-pair{margin:10px 0 6px;gap:14px}
#scarlet-bag-v30 .drum-card .duel-cast{width:98px;height:98px}
#scarlet-bag-v30 .drum-card .duel-exchange-label{font-size:11px}
#scarlet-bag-v30 .drum-card h3{font-size:17px}
#scarlet-bag-v30 .drum-card p{font-size:10px;line-height:1.3;margin-top:4px;min-height:0}
#scarlet-bag-v30 .drum-card .duel-impact strong{font-size:25px}
#scarlet-bag-v30 .duel-cast.is-physical{padding:15px;background:#251c22}
#scarlet-bag-v30 .duel-cast.is-physical>img{object-fit:contain}
#scarlet-bag-v30 .duel-outcome-slot{height:60px;margin:0 12px;display:flex;align-items:center}
#scarlet-bag-v30 .duel-controls{width:100%;padding:0;height:54px;justify-content:center}
#scarlet-bag-v30 .duel-result{height:48px;width:100%;margin:0;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #8e7047;background:linear-gradient(110deg,#392719,#1b181b);box-shadow:inset 0 0 14px #ab793219;animation:duel-result-in 550ms ease-out both}
#scarlet-bag-v30 .duel-result h3{font:20px var(--sc-font-display);white-space:nowrap;color:#e3c08a}
#scarlet-bag-v30 .duel-result.is-defeat{border-color:#743941;background:linear-gradient(110deg,#341720,#1b151c)}
#scarlet-bag-v30 .duel-result.is-defeat h3{color:#c98c91}
#scarlet-bag-v30 .duel-loss-note{font:10px var(--sc-font-display);color:#ad8b8d;text-align:right}
#scarlet-bag-v30 .duel-rewards{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:flex-end;align-items:center;margin:0;padding:0;border:0}
#scarlet-bag-v30 .duel-reward{display:flex;align-items:center;gap:4px;min-width:0}
#scarlet-bag-v30 .duel-reward .art-icon{width:18px;height:24px;transform:none}
#scarlet-bag-v30 .duel-reward strong{font:16px var(--sc-font-display);color:#e2c18b}
#scarlet-bag-v30 .duel-drum-nav{height:44px;display:flex;justify-content:center;align-items:center;gap:18px;margin:0 12px 8px}
#scarlet-bag-v30 .duel-drum-nav button{width:36px;height:36px;border:1px solid #65513a;background:#1d1921;color:#d6bb89;font:20px var(--sc-font-display)}
#scarlet-bag-v30 .duel-drum-nav button:disabled{opacity:.25;cursor:default}
#scarlet-bag-v30 .duel-drum-nav>span{width:168px;text-align:center;font:12px var(--sc-font-display);color:#cbb48f}
#scarlet-bag-v30 .duel-drum-nav small{display:block;font:10px var(--sc-font-ui);color:#8d8275;margin-top:3px}
#scarlet-bag-v30 .duel-loadout{padding:8px 0 4px}
#scarlet-bag-v30 .duel-deck-spell{width:42px;height:42px}
#scarlet-bag-v30 .duel-hit-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;color:var(--strike-color)}
#scarlet-bag-v30 .duel-hit-stamp{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:duel-stamp 1050ms 110ms ease-out both}
#scarlet-bag-v30 .ward-hit{--hit-opacity:.5}
#scarlet-bag-v30 .hit-from-right .duel-hit-stamp{scale:-1 1}
#scarlet-bag-v30 .is-hit .duel-portrait{animation:duel-print-recoil 580ms 160ms ease-out both}
#scarlet-bag-v30 .duel-damage{z-index:3;animation:duel-number-rise 1000ms 140ms ease-out both}
#scarlet-bag-v30 .blood-defeat{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
#scarlet-bag-v30 .blood-defeat img{display:block;width:100%;height:100%;object-fit:fill;animation:duel-blood-print 700ms ease-out both}
#scarlet-bag-v30 .blood-drip{fill:none;stroke:#720f25;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:25;animation:duel-blood-drip 1400ms 200ms both}
#scarlet-bag-v30 .is-defeated .duel-portrait{border-color:#863344}
#scarlet-bag-v30 .is-defeated .duel-portrait>img{filter:brightness(.45) saturate(.7)}
#scarlet-bag-v30 .is-victor .duel-portrait{border-color:#d6b573;box-shadow:0 0 12px #b7863633}
#scarlet-bag-v30 .duel-cast.is-critical{isolation:isolate;border-color:var(--strike-color);box-shadow:0 0 15px var(--strike-color);animation:duel-critical-punch 550ms ease-out both}
#scarlet-bag-v30 .duel-crit-cracks{position:absolute;left:-24%;top:-24%;width:148%;height:148%;pointer-events:none;animation:duel-critical-cracks 1000ms ease-out both;z-index:0}
#scarlet-bag-v30 .drum-card:has(.is-critical) .duel-spell-pair{margin-top:24px;margin-bottom:12px}
#scarlet-bag-v30 .duel-crit-cracks img{display:block;width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .duel-cast.is-critical>span{z-index:6}
#scarlet-bag-v30 .critical-damage{color:var(--strike-color);text-shadow:0 0 8px #08070c;font-weight:bold}
#scarlet-bag-v30 .duel-impact .critical-damage+small{color:var(--strike-color);font-weight:bold;letter-spacing:.5px}
#scarlet-bag-v30 .depth-1 *,#scarlet-bag-v30 .depth-2 *{animation:none!important}
#scarlet-bag-v30 .is-reviewing .duel-portrait,#scarlet-bag-v30 .is-reviewing .duel-damage,#scarlet-bag-v30 .is-reviewing .blood-defeat img,#scarlet-bag-v30 .is-reviewing .blood-drip,#scarlet-bag-v30 .is-reviewing .duel-result{animation:none}
#scarlet-bag-v30 .is-reviewing .duel-hit-fx{display:none}
#scarlet-bag-v30 .is-reviewing .duel-crit-cracks,#scarlet-bag-v30 .is-reviewing .duel-cast.is-critical{animation:none}
@keyframes duel-drum-in{from{opacity:.65;transform:translateY(22px) rotateX(-8deg) scale(1)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes duel-drum-away{from{transform:translateY(0) translateZ(0) rotateX(0)}to{transform:translateY(-28px) translateZ(-65px) rotateX(9deg) scale(.94)}}
@keyframes duel-drum-back{from{opacity:.65;transform:translateY(-22px) rotateX(8deg) scale(.94)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes duel-stamp{0%{opacity:0;transform:scale(.45) rotate(-9deg)}20%{opacity:var(--hit-opacity,.95);transform:scale(.94) rotate(-3deg)}55%{opacity:var(--hit-opacity,.85)}100%{opacity:0;transform:scale(1.05)}}
@keyframes duel-number-rise{from{opacity:0;transform:translateY(7px)}25%{opacity:1}to{opacity:1;transform:translateY(-5px)}}
@keyframes duel-print-recoil{0%,100%{transform:scale(1)}30%{transform:scale(.98)}65%{transform:scale(1.006)}}
@keyframes duel-blood-print{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes duel-blood-drip{from{stroke-dashoffset:25}to{stroke-dashoffset:0}}
@keyframes duel-critical-punch{from{transform:scale(.94)}40%{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes duel-critical-cracks{from{opacity:0;transform:scale(.72)}22%{opacity:1;transform:scale(1.04)}55%{opacity:1;transform:scale(1)}to{opacity:.78;transform:scale(1)}}
@keyframes duel-result-in{from{opacity:0;box-shadow:inset 0 0 28px #ceab5955}to{opacity:1;box-shadow:inset 0 0 14px #ab793219}}
@media(max-width:370px){#scarlet-bag-v30 .drum-card{padding-left:6px;padding-right:6px}#scarlet-bag-v30 .drum-card .duel-cast{width:87px;height:87px}#scarlet-bag-v30 .drum-card .duel-spell-pair{gap:9px;margin-top:16px}#scarlet-bag-v30 .drum-card h3{font-size:15px}#scarlet-bag-v30 .duel-rewards{gap:7px}#scarlet-bag-v30 .duel-result{padding:0 8px}}
/* Combat motion is explicitly enabled for this animation preview. */

/* The spell artwork occludes the inner part of the critical sprite. */
#scarlet-bag-v30 .duel-cast>img{position:relative;z-index:1}
#scarlet-bag-v30 .duel-cast.is-critical>img{background:#141218}
#scarlet-bag-v30 .duel-cast>span{z-index:2}
#scarlet-bag-v30 .duel-result-heading{display:flex;align-items:center;gap:7px;min-width:0;flex-shrink:0}
#scarlet-bag-v30 .duel-result-icon{display:block;width:38px;height:38px;object-fit:contain;flex-shrink:0}
@media(max-width:370px){#scarlet-bag-v30 .duel-result-heading{gap:5px}#scarlet-bag-v30 .duel-result h3{font-size:18px}#scarlet-bag-v30 .duel-result-icon{width:32px;height:34px}}

/* Rounded resource gauges and smoothly counted values. */
#scarlet-bag-v30 .duel-bar{height:17px;padding:3px 4px;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;overflow:visible}
#scarlet-bag-v30 .duel-bar::before{content:"";position:absolute;inset:0;background:var(--art-bar) center/100% 100% no-repeat;z-index:-1}
#scarlet-bag-v30 .duel-bar>span{inset:3px auto 3px 4px;max-width:calc(100% - 8px);border-radius:9px;background:linear-gradient(#982b32,#59131c);box-shadow:none}
#scarlet-bag-v30 .duel-bar.duel-mana>span{background:linear-gradient(#5d86b0,#2a405e);box-shadow:none}
#scarlet-bag-v30 .duel-bar b{display:flex;justify-content:center;align-items:center;gap:3px;line-height:14px;font-variant-numeric:tabular-nums;white-space:pre}
#scarlet-bag-v30 .duel-counter{display:inline-flex;height:14px;align-items:center}
#scarlet-bag-v30 .drum-card .duel-spell-pair,#scarlet-bag-v30 .drum-card:has(.is-critical) .duel-spell-pair{margin-top:30px;margin-bottom:15px}
#scarlet-bag-v30 .duel-drum .duel-result{height:208px;flex-direction:column;justify-content:center;gap:20px;padding:20px;animation:duel-drum-in var(--drum-duration,420ms) cubic-bezier(.22,.65,.3,1) both}
#scarlet-bag-v30 .duel-drum .duel-result-heading{gap:12px}
#scarlet-bag-v30 .duel-drum .duel-result-icon{width:66px;height:66px}
#scarlet-bag-v30 .duel-drum .duel-result h3{font-size:27px}
#scarlet-bag-v30 .duel-drum .duel-rewards{justify-content:center;gap:24px}
#scarlet-bag-v30 .duel-drum .duel-reward strong{font-size:20px}
#scarlet-bag-v30 .duel-drum .duel-loss-note{font-size:13px;text-align:center}
#scarlet-bag-v30 .is-result .duel-hit-fx,#scarlet-bag-v30 .is-result .duel-damage{display:none}
#scarlet-bag-v30 .is-result .duel-portrait{animation:none}
#scarlet-bag-v30 .drum-outgoing,#scarlet-bag-v30 .duel-drum .duel-result.drum-outgoing{z-index:5;pointer-events:none;animation:duel-drum-out var(--drum-duration,420ms) ease-out both}
@keyframes duel-drum-out{from{opacity:1;transform:translateY(0) rotateX(0)}to{opacity:0;transform:translateY(26px) rotateX(-8deg) scale(1)}}

/* Use the mission-description frame, including its intact decorative corners. */
#scarlet-bag-v30 .duel-drum .drum-card{border:9px solid transparent;border-image:var(--art-panelFrame) 32 / 9px / 0 stretch;border-radius:0;background-color:#250f16;background-image:linear-gradient(#1a090dc9,#170b10c9),var(--art-wine);background-size:auto,280px;padding:6px 9px}
#scarlet-bag-v30 .duel-drum .drum-card .duel-spell-pair{margin-top:22px;margin-bottom:8px}
#scarlet-bag-v30 .duel-drum .duel-result{padding:16px}

/* One fixed layout for victory, defeat and every reward combination. */
#scarlet-bag-v30 .duel-drum .duel-result{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px 30px 56px;align-content:center;align-items:stretch;justify-content:normal;gap:8px;padding:10px 16px;height:208px}
#scarlet-bag-v30 .duel-drum .duel-result-heading{display:grid;grid-template-columns:48px minmax(0,1fr) 108px;align-items:center;gap:9px;width:100%;min-width:0}
#scarlet-bag-v30 .duel-drum .duel-result-icon{width:48px;height:48px}
#scarlet-bag-v30 .duel-drum .duel-result h3{font-size:25px;margin:0;text-align:left;min-width:0}
#scarlet-bag-v30 .duel-rating{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0;padding:0;text-align:right;white-space:nowrap;line-height:1}
#scarlet-bag-v30 .duel-rating span{display:block;color:#ac9677;font:11px/1 var(--sc-font-display)}
#scarlet-bag-v30 .duel-rating strong{display:block;color:#cfb77e;font:18px/1 var(--sc-font-display);font-weight:normal}
#scarlet-bag-v30 .duel-rating.is-loss strong{color:#c48786}
#scarlet-bag-v30 .duel-drum .duel-rewards{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:18px;width:100%;height:30px;margin:0;padding:0;border:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
#scarlet-bag-v30 .duel-drum .duel-result.without-loot .duel-rewards{grid-row:2 / 4;align-self:center}
#scarlet-bag-v30 .duel-result.without-loot .duel-loot{display:none}
#scarlet-bag-v30 .duel-drum .duel-reward{flex:0 0 auto;justify-content:flex-start;gap:4px;min-width:0;white-space:nowrap}
#scarlet-bag-v30 .duel-rewards:focus-visible{outline:1px solid #c5a96f;outline-offset:-1px}
#scarlet-bag-v30 .duel-drum .duel-reward strong{font-size:18px}
#scarlet-bag-v30 .duel-loot{display:flex;align-items:center;gap:8px;width:100%;height:56px;min-width:0;border-top:1px solid transparent;padding-top:7px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
#scarlet-bag-v30 .duel-loot.has-items{border-top-color:#92704244}
#scarlet-bag-v30 .duel-loot-item{display:block;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#dfc291;cursor:pointer}
#scarlet-bag-v30 .duel-loot-item:focus-visible,#scarlet-bag-v30 .duel-loot:focus-visible{outline:1px solid #c5a96f;outline-offset:-1px}
#scarlet-bag-v30 .duel-loot-art{position:relative;display:grid;place-items:center;width:44px;height:44px}
#scarlet-bag-v30 .duel-loot-art img{width:36px;height:36px;object-fit:contain}
#scarlet-bag-v30 .duel-loot-quantity{right:3px;bottom:2px;font-size:13px;line-height:15px}
#scarlet-bag-v30 .duel-drum .duel-loss-note{font:12px var(--sc-font-display);color:#aa8990;text-align:left;margin:0}
@media(max-width:370px){#scarlet-bag-v30 .duel-drum .duel-result{padding:10px}#scarlet-bag-v30 .duel-drum .duel-result-heading{grid-template-columns:42px minmax(0,1fr) 88px;gap:6px}#scarlet-bag-v30 .duel-drum .duel-result-icon{width:42px;height:42px}#scarlet-bag-v30 .duel-drum .duel-result h3{font-size:21px}#scarlet-bag-v30 .duel-drum .duel-reward strong{font-size:16px}}

/* Browsing responds quickly; autoplay retains a gentler transition. */
#scarlet-bag-v30 .duel-page.is-reviewing{--drum-duration:220ms}
#scarlet-bag-v30 .drum-card{will-change:transform,opacity}

/* Keep card nodes during browsing; interpolate their positions instead of restarting CSS animations. */
#scarlet-bag-v30 .duel-drum.is-manual .drum-card{animation:none!important}
#scarlet-bag-v30 .drum-leaving{z-index:5;pointer-events:none}
#scarlet-bag-v30 .duel-drum-nav{height:38px;margin-bottom:4px}

/* Damage belongs to the receiving side; the centre only carries attack direction. */
#scarlet-bag-v30 .drum-card .duel-block{width:98px;height:98px;flex-shrink:0}
#scarlet-bag-v30 .duel-block>img{opacity:.32}
#scarlet-bag-v30 .duel-block>svg{opacity:.18;width:48px;height:48px}
#scarlet-bag-v30 .duel-block .duel-impact{position:absolute;inset:0 0 14px;width:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-shadow:0 2px 4px #000,0 0 7px #000}
#scarlet-bag-v30 .duel-block .duel-impact strong{font-size:29px;line-height:1.1}
#scarlet-bag-v30 .duel-trajectory{width:40px;flex:0 0 40px;color:#b79964}
#scarlet-bag-v30 .duel-trajectory svg{display:block;width:100%;height:24px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
#scarlet-bag-v30 .trajectory-pulse{stroke:var(--strike-color);stroke-width:2;opacity:0;animation:duel-directed-pulse 420ms 120ms ease-out both}
#scarlet-bag-v30 .from-right .duel-trajectory{transform:scaleX(-1)}
#scarlet-bag-v30 .is-reviewing .trajectory-pulse,#scarlet-bag-v30 .depth-1 .trajectory-pulse,#scarlet-bag-v30 .depth-2 .trajectory-pulse{animation:none;opacity:1}
@keyframes duel-directed-pulse{0%{opacity:0;transform:translateX(-9px)}35%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@media(max-width:370px){#scarlet-bag-v30 .drum-card .duel-block{width:87px;height:87px}#scarlet-bag-v30 .duel-trajectory{width:32px;flex-basis:32px}}

/* Portraits open read-only equipment inspection. */
#scarlet-bag-v30 button.duel-portrait{display:block;padding:0;background:#141218;color:inherit;cursor:pointer}
#scarlet-bag-v30 button.hunt-avatar{display:block;padding:0;cursor:pointer}
#scarlet-bag-v30 .gear-inspect-person{display:flex;gap:14px;align-items:center;margin-bottom:16px}
#scarlet-bag-v30 .gear-inspect-person>img{width:64px;height:76px;object-fit:cover;border:1px solid #80643e}
#scarlet-bag-v30 .gear-inspect-person small{color:#ac9879;font:11px var(--sc-font-display)}
#scarlet-bag-v30 .gear-inspect-person h3{font:21px var(--sc-font-display);color:#e4c9a0;margin:4px 0}
#scarlet-bag-v30 .gear-inspect-person p{color:#b7a48a;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .gear-inspect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#scarlet-bag-v30 .gear-inspect-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:86px;border:1px solid #66513b;background-color:#19161b;padding:7px 4px;color:#cbbba1}
#scarlet-bag-v30 .gear-inspect-item>img,#scarlet-bag-v30 .gear-empty-icon{width:49px;height:49px;object-fit:contain;background-position:center;background-size:contain;background-repeat:no-repeat}
#scarlet-bag-v30 .gear-inspect-item>span:last-child{font:11px var(--sc-font-display)}
#scarlet-bag-v30 .gear-inspect-item[aria-pressed=true]{border-color:#ddbc7e;box-shadow:inset 0 0 10px #d4a64b30}
#scarlet-bag-v30 .gear-inspect-item.is-empty{opacity:.45}
#scarlet-bag-v30 .gear-inspect-detail{border-top:1px solid #5b4531;margin-top:14px;padding-top:12px;min-height:94px}
#scarlet-bag-v30 .gear-inspect-detail h3{font:18px var(--sc-font-display);color:#ddc49e;margin-bottom:6px}
#scarlet-bag-v30 .gear-inspect-detail p{font:12px/1.5 var(--sc-font-display);color:#b8a78f}
#scarlet-bag-v30 .gear-inspect-detail>div{display:flex;flex-wrap:wrap;gap:6px 15px;margin-top:10px;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .gear-inspect-detail strong{color:#e1c184}
#scarlet-bag-v30 .duel-cast>span.duel-mana-badge{top:3px;right:3px;min-width:32px;height:23px;padding:2px 5px 2px 4px;justify-content:center;gap:3px;border:1px solid #8e825f;border-radius:12px;background:linear-gradient(#172a40,#0c1424);box-shadow:0 1px 3px #000b,inset 0 1px 0 #acc4df26;color:#d0e4f6;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .duel-mana-badge .art-icon{width:11px;height:14px}

/* Inspection uses the profile layout without editable controls or private resources. */
#scarlet-bag-v30 .gear-profile .profile-artifact{margin-top:18px}
#scarlet-bag-v30 .gear-profile-slot[aria-pressed=true]{outline:1px solid #ddbc7e;outline-offset:1px}
#scarlet-bag-v30 .gear-profile-slot.is-empty{opacity:.5}
#scarlet-bag-v30 .gear-profile .profile-clan{display:block}
#scarlet-bag-v30 .gear-profile .gear-inspect-detail{min-height:80px}

/* Portrait content stays inside its frame. Clan badges are inset on regular players. */
#scarlet-bag-v30 button.hunt-avatar{width:68px;height:77px;box-sizing:border-box;border:1px solid #947851;background:#141218;overflow:hidden}
#scarlet-bag-v30 button.hunt-avatar>img{display:block;width:100%;height:100%;border:0;object-fit:cover}
#scarlet-bag-v30 .hunt-avatar .clan-mark{right:1px;bottom:1px}
#scarlet-bag-v30 button.duel-portrait{overflow:hidden}
#scarlet-bag-v30 .duel-portrait .clan-mark{right:2px;bottom:2px}
/* A travelling cut and a brief point of contact replace full-face impact stamps. */
#scarlet-bag-v30 .directed-hit{--contact-strength:.75}
#scarlet-bag-v30 .directed-hit.ward-hit{--contact-strength:.4}
#scarlet-bag-v30 .directed-hit.hit-from-right{transform:scaleX(-1)}
#scarlet-bag-v30 .duel-weapon-trace,#scarlet-bag-v30 .duel-magic-trace{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:0;animation:duel-trace-cut 480ms 210ms ease-out both}
#scarlet-bag-v30 .duel-magic-trace{background:var(--strike-color);mask:var(--hit-trace) center/contain no-repeat;-webkit-mask:var(--hit-trace) center/contain no-repeat;filter:drop-shadow(0 0 2px var(--strike-color))}
#scarlet-bag-v30 .duel-contact-flash{position:absolute;width:28px;height:28px;left:54%;top:49%;opacity:0;background:radial-gradient(ellipse,#f3eee7 0%,var(--strike-color) 18%,transparent 67%);animation:duel-contact 240ms 300ms ease-out both}
@keyframes duel-trace-cut{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-6px,-3px)}25%{opacity:var(--contact-strength);clip-path:inset(0 35% 0 0)}50%{opacity:var(--contact-strength);clip-path:inset(0);transform:translate(0)}100%{opacity:0;clip-path:inset(0);transform:translate(3px,2px)}}
@keyframes duel-contact{0%{opacity:0;transform:scale(.6)}35%{opacity:var(--contact-strength)}100%{opacity:0;transform:scale(1.1)}}

/* Simple gold direction marker and mana beneath the relevant card. */
#scarlet-bag-v30 .duel-drum .duel-spell-pair{align-items:flex-start}
#scarlet-bag-v30 .duel-attack-cell,#scarlet-bag-v30 .duel-target-cell{width:98px;flex:0 0 98px;min-height:124px}
#scarlet-bag-v30 .duel-trajectory{width:48px;flex-basis:48px;margin-top:35px}
#scarlet-bag-v30 .duel-trajectory .trajectory-pulse{position:relative;display:block;width:48px;height:28px}
/* One gold arrow for every school and physical attacks; no tint or glow. */
#scarlet-bag-v30 .trajectory-pulse>img{display:block;width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .duel-mana-cost{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:7px;height:18px;color:#afcbe4;font:12px var(--sc-font-display);text-shadow:0 1px 2px #000}
#scarlet-bag-v30 .duel-mana-cost .art-icon{width:12px;height:16px;transform:none}
#scarlet-bag-v30 .duel-block.unblocked .duel-impact{bottom:0}
@media(max-width:370px){#scarlet-bag-v30 .duel-attack-cell,#scarlet-bag-v30 .duel-target-cell{width:87px;flex-basis:87px;min-height:113px}#scarlet-bag-v30 .duel-trajectory{width:38px;flex-basis:38px;margin-top:30px}#scarlet-bag-v30 .duel-trajectory .trajectory-pulse{width:38px;height:26px}}

@media(max-width:370px){#scarlet-bag-v30 .duel-rating{gap:4px}#scarlet-bag-v30 .duel-rating span{font-size:10px}#scarlet-bag-v30 .duel-rating strong{font-size:16px}}

/* Losses use the same slots as rewards, with explicit negative quantities. */
#scarlet-bag-v30 .duel-drum .is-defeat .duel-reward strong{color:#c48786}
#scarlet-bag-v30 .is-defeat .duel-loot-quantity{color:#d7a39c}
#scarlet-bag-v30 .is-defeat .duel-loot-art{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:94% 94%}
#scarlet-bag-v30 .is-defeat .duel-loot-art::before{content:"";position:absolute;inset:0;background:var(--art-slot) center/100% 100% no-repeat;filter:sepia(1) saturate(3) hue-rotate(315deg) brightness(.85);pointer-events:none}
#scarlet-bag-v30 .is-defeat .duel-loot-art::after{content:"";position:absolute;inset:1px;border:1px solid #a34e4e;pointer-events:none}


#scarlet-bag-v30{--art-scene:url("./assets/scene.webp");--art-panelFrame:url("./assets/panelFrame.webp");--art-wine:url("./assets/wine.webp");--art-bar:url("./assets/bar.webp");--art-divider:url("./assets/divider.webp");--art-button:url("./assets/button.webp");--art-buttonSecondary:url("./assets/buttonSecondary.webp");--art-buttonDisabled:url("./assets/buttonDisabled.webp");--art-navBase:url("./assets/navBase.webp");--art-slot:url("./assets/slot.webp");--art-charcoal:url("./assets/charcoal.webp");--art-health:url("./assets/health.webp");--art-mana:url("./assets/mana.webp");--art-energy:url("./assets/energy.webp");--art-xp:url("./assets/xp.webp");--art-settings:url("./assets/settings.webp");--art-close:url("./assets/close.webp");--art-check:url("./assets/check.webp");--art-lore:url("./assets/lore.webp");--art-info:url("./assets/info.webp");--art-repeat:url("./assets/repeat.webp");--art-back:url("./assets/back.webp");--art-city:url("./assets/city.webp");--art-hunt:url("./assets/hunt.webp");--art-bag:url("./assets/bag.webp");--art-magic:url("./assets/magic.webp");--art-avatarFrame:url("./assets/avatarFrame.webp");--art-development:url("./assets/development.webp")}
/* Runtime bindings and accessible states; game content remains server-owned. */
#scarlet-bag-v30{--sc-current:#527f77}
#scarlet-bag-v30 .stage-label{display:block;white-space:nowrap;min-height:16px}
#scarlet-bag-v30 .mission-progress{min-height:1.4em}
#scarlet-bag-v30 .resource-number,#scarlet-bag-v30 .progress-count,#scarlet-bag-v30 .boss-health-label,#scarlet-bag-v30 .profile-xp-label{font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .hud-xp{grid-column:1/-1;min-width:0;margin:0 5px 1px 7px}
#scarlet-bag-v30 .hud-xp-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;color:#b5a281;font:10px/12px var(--sc-font-ui)}
#scarlet-bag-v30 .hud-xp-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .hud-xp .meter{height:5px;padding:0;overflow:hidden;border:1px solid #5e4c35;border-radius:2px;background:#100e11}
#scarlet-bag-v30 .hud-xp .meter:before{display:none}
#scarlet-bag-v30 .hud-xp .meter-fill{border-radius:0;background:linear-gradient(90deg,#665032,#ad8f58)}
body{margin:0;background:#0d0e12;min-height:100vh}
.skip-link{position:absolute;top:-100px;color:#eed7af;background:#20151b;padding:12px;z-index:20}.skip-link:focus{top:0}
#scarlet-bag-v30 .game-content{background:none}
#scarlet-bag-v30 .scene{isolation:isolate;overflow:hidden}
#scarlet-bag-v30 .scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
#scarlet-bag-v30 .scene:after{content:'';position:absolute;inset:0;background:linear-gradient(#070b1240,transparent 23%,transparent 82%,#080b1240);z-index:-1;pointer-events:none}
#scarlet-bag-v30 .notice{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;font:14px/1.4 var(--sc-font-ui);color:#ddc29c;background:#251721;border-bottom:1px solid #79613e}
#scarlet-bag-v30 .notice>span{display:block;min-width:0;overflow-wrap:anywhere}
#scarlet-bag-v30 .notice>.action{align-self:center;max-width:100%;margin:0;font-size:15px}
#scarlet-bag-v30 .notice.error{color:#ffa8a8}
#scarlet-bag-v30 .hud-core{min-width:0}
#scarlet-bag-v30 .hud .age{overflow:hidden;text-overflow:ellipsis}
#scarlet-bag-v30 .muted{color:var(--sc-muted);font:12px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30.muted-resources .resource-row .art-icon,#scarlet-bag-v30.muted-resources .art-icon.tone-gold{filter:saturate(.52) brightness(.88) contrast(.94)}
#scarlet-bag-v30 .boss-timer{font:11px var(--sc-font-ui);color:var(--sc-muted);text-align:right;margin-top:8px}
#scarlet-bag-v30 .item-preview{display:grid;place-items:center;padding:10px}
#scarlet-bag-v30 .item-preview img{height:100%;width:100%;object-fit:contain;min-height:0}
#scarlet-bag-v30 .item-quantity{position:absolute;bottom:5px;right:7px;font:13px var(--sc-font-ui);text-shadow:0 1px 3px #000}
#scarlet-bag-v30 .item-stat{display:flex;align-items:center;gap:9px;padding:5px 0;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .item-stat strong{margin-left:auto;font-weight:400}
#scarlet-bag-v30 .item-stat .better{color:#9abd92}#scarlet-bag-v30 .item-stat .worse{color:#d69592}
#scarlet-bag-v30 .compare-current{display:flex;align-items:center;gap:7px;font:11px var(--sc-font-ui);color:var(--sc-muted);margin-bottom:8px}
#scarlet-bag-v30 .compare-icon{width:30px;height:30px;object-fit:contain}
#scarlet-bag-v30 .slot-select{display:block;width:100%;min-height:44px;background:#171318;color:var(--sc-paper);border:1px solid #745f40;margin:5px 0}
#scarlet-bag-v30 .item-card>.action{width:100%;margin-top:10px}
#scarlet-bag-v30 .item-card .costs{font:11px var(--sc-font-ui);color:var(--sc-muted);margin-top:8px}
#scarlet-bag-v30 .spell-combat-value{display:flex;gap:4px;align-items:center}
#scarlet-bag-v30 .spell-combat svg{width:16px;height:16px}
#scarlet-bag-v30 .spell-mana-badge img{width:16px;height:22px;object-fit:contain}
#scarlet-bag-v30 .spell-school .clan-mark{width:100%;height:100%}
#scarlet-bag-v30 .profile-avatar-wrap>.portrait{display:block;width:126px;height:126px}
#scarlet-bag-v30 .slot-placeholder-image{width:70%;height:70%;object-fit:contain;opacity:.45;filter:grayscale(1)}
#scarlet-bag-v30 .picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
#scarlet-bag-v30 .journal-page{padding:14px 10px}
#scarlet-bag-v30 .journal-page h1{font-size:25px;font-weight:normal;margin:0 0 12px}
#scarlet-bag-v30 .card{padding:12px;margin-bottom:10px}
#scarlet-bag-v30 .card h2{font-size:21px;font-weight:normal}
#scarlet-bag-v30 .card .action{margin-top:10px;width:100%}
#scarlet-bag-v30 .stack{display:grid;gap:10px}
#scarlet-bag-v30 .empty{padding:20px;text-align:center}
#scarlet-bag-v30 .combat-details summary{min-height:44px;padding:12px 0;cursor:pointer}
#scarlet-bag-v30 .combat-events{padding-left:20px;font:12px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30 .sort-option{min-height:48px}
html[data-motion="reduced"] #scarlet-bag-v30 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#scarlet-bag-v30 .game-content{background-image:var(--location-background);background-size:100% auto;background-position:center 50px;background-repeat:no-repeat}
#scarlet-bag-v30 .scene-image{display:none}
#scarlet-bag-v30 .scene{background:linear-gradient(#070b1240,transparent 23%,transparent 82%,#080b1240);isolation:auto}
#scarlet-bag-v30 .scene:after{display:none}
#scarlet-bag-v30 .boss-detail{z-index:1}
#scarlet-bag-v30 .item-quantity{font:bold 14px/16px var(--sc-font-display)}
#scarlet-bag-v30 .profile .age{margin-bottom:5px}
#scarlet-bag-v30 .clan-mark .clan-flag.tone-ember{filter:hue-rotate(-12deg) saturate(.85) brightness(.48)}
/* Preserve visible icon dimensions while correcting the prototype's small touch areas. */
#scarlet-bag-v30 .settings-button{width:44px;height:44px;padding:11px;margin-left:-7px}
#scarlet-bag-v30 .location-heading .icon-button{width:44px;height:44px;padding:3px}

#scarlet-bag-v30 .sheet-head .icon-button{width:44px;height:44px;padding:5px}
#scarlet-bag-v30 .district-bottom .action{min-height:44px}
#scarlet-bag-v30 .profile-clan{min-width:44px}
#scarlet-bag-v30 .profile-combat .stat{gap:4px}
#scarlet-bag-v30 .bag-slot .equipped-mark img{width:100%;height:100%}
#scarlet-bag-v30 .profile-identity>div+div{margin-top:6px}
@media(max-width:370px){#scarlet-bag-v30 .settings-button{margin-left:-10px}}
/* Exact quantities remain in the DOM and title even when their badge is narrow. */
#scarlet-bag-v30 .purse-row{min-width:0;max-width:100%;overflow:hidden}
#scarlet-bag-v30 .purse .purse-number{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scarlet-bag-v30 .boss-health-label>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
#scarlet-bag-v30 .spell-mana-badge>span{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scarlet-bag-v30 .bag-filters button,#scarlet-bag-v30 .gear-types button{min-height:44px;min-width:44px}
#scarlet-bag-v30 .boss-tools .icon-button{width:44px;height:44px;padding:8px}
#scarlet-bag-v30 .hunt-vitals{flex-wrap:wrap;gap:8px 14px}
/* Same duel geometry as the prototype, with touch targets and empty training rewards. */
#scarlet-bag-v30 .duel-back{min-width:44px;min-height:44px}
#scarlet-bag-v30 .duel-back .art-icon{width:28px;height:28px;object-fit:contain}
#scarlet-bag-v30 .duel-controls .action{min-height:44px}
#scarlet-bag-v30 .directed-hit{--hit-trace:url("./assets/hit-physical.png")}
#scarlet-bag-v30 .duel-bar{font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .practice-battle .duel-result-heading{grid-template-columns:48px minmax(0,1fr)}
@media(max-width:370px){#scarlet-bag-v30 .practice-battle .duel-result-heading{grid-template-columns:42px minmax(0,1fr)}}
html[data-motion="reduced"] #scarlet-bag-v30 .trajectory-pulse{opacity:1}
#scarlet-bag-v30 .duel-drum:focus-visible{outline:1px solid #c5a96f;outline-offset:-2px}

#scarlet-bag-v30 .duel-controls .duel-continue{width:220px;max-width:100%;white-space:nowrap}
#scarlet-bag-v30 .bag-filters{grid-template-columns:1.2fr 1.3fr 1fr}
#scarlet-bag-v30 .item-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#scarlet-bag-v30 .item-actions .action{flex:0 1 calc(50% - 4px);min-width:0;width:auto;min-height:44px;margin:0;padding:8px 10px;font-size:14px}
#scarlet-bag-v30 .profile-heading{position:relative;padding-right:44px;min-height:44px}
#scarlet-bag-v30 .achievements-button{position:absolute;right:0;top:0;width:44px;height:44px;padding:7px}
#scarlet-bag-v30 .achievements-button .art-icon{width:30px;height:30px;object-fit:contain}
#scarlet-bag-v30 .achievement-list .card{margin-top:12px}
/* Three inventory rows on taller screens, two on compact screens. */
#scarlet-bag-v30 .bag-page{height:100%;min-height:0;display:grid;grid-template-rows:44px 44px minmax(100px,1fr) 44px minmax(0,max-content);gap:6px;padding:6px 10px}
#scarlet-bag-v30 .bag-heading{margin:0;gap:6px}
#scarlet-bag-v30 .bag-heading h2{font-size:23px}
#scarlet-bag-v30 .bag-count{font-size:10px;flex:1}
#scarlet-bag-v30 .bag-header-tools{display:flex;gap:4px}
#scarlet-bag-v30 .bag-sort,#scarlet-bag-v30 .bag-type{height:44px;min-height:44px;min-width:44px;margin:0;padding:4px 6px;background:#20181c;border:1px solid #6e583a;border-radius:3px;font:12px var(--sc-font-ui);color:#ddc8a8}
#scarlet-bag-v30 .bag-sort{font-size:23px;justify-content:center}
#scarlet-bag-v30 .bag-type{max-width:90px;overflow:hidden;text-overflow:ellipsis}
#scarlet-bag-v30 .bag-filters{margin:0;gap:0}
#scarlet-bag-v30 .bag-grid{min-height:0;grid-template-rows:repeat(var(--bag-rows,2),minmax(44px,1fr));gap:5px;align-items:center;justify-items:center}
#scarlet-bag-v30 .bag-grid .bag-slot{width:auto;max-width:100%;height:100%;max-height:88px;aspect-ratio:1;min-height:44px;padding:6px;background-size:100% 100%,94% 94%,94% 94%}
#scarlet-bag-v30 .bag-pagination{display:flex;align-items:center;gap:10px;font:12px var(--sc-font-ui);color:#cfb994}
#scarlet-bag-v30 .bag-pagination button{min-width:44px;height:44px;margin:0;padding:0;background:none;border:1px solid #79613e;font:26px var(--sc-font-display)}
#scarlet-bag-v30 .bag-pagination button:disabled{opacity:.35;filter:grayscale(1)}
#scarlet-bag-v30 .bag-pagination .bag-range{margin-left:auto;color:#a89b87;font-size:11px}
#scarlet-bag-v30 .bag-item-detail{min-height:0;max-height:100%;align-self:start;display:flex;flex-direction:column;margin:0;padding:5px 7px;gap:4px}
#scarlet-bag-v30 .bag-item-detail .item-card-head{grid-template-columns:40px minmax(0,1fr) 44px;gap:6px;flex-shrink:0}
#scarlet-bag-v30 .bag-item-detail .item-preview{width:40px;height:44px;padding:5px}
#scarlet-bag-v30 .bag-item-detail h3{font-size:17px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#scarlet-bag-v30 .bag-item-detail .item-kind{font-size:10px}

#scarlet-bag-v30 .bag-item-summary{flex:0 1 auto;min-height:0;overflow:hidden;display:flex;align-items:flex-start}
#scarlet-bag-v30 .bag-item-summary .description{margin:0;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#scarlet-bag-v30 .bag-item-summary .item-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;width:100%;margin:0}
#scarlet-bag-v30 .bag-item-summary .item-stat{gap:4px;font-size:11px;padding:2px 0}
#scarlet-bag-v30 .bag-item-detail .item-actions{flex-shrink:0;gap:4px;margin:0}
#scarlet-bag-v30 .bag-item-detail .item-actions .action{flex:1 1 0;min-height:44px;font-size:13px;padding:5px}
#scarlet-bag-v30 .bag-item-detail>.action{flex-shrink:0;margin:0;font-size:14px;min-height:44px;padding:6px}
#scarlet-bag-v30 .bag-item-detail .costs{margin:0;font-size:10px}
@media(max-height:740px){
 #scarlet-bag-v30 .hud{min-height:0;grid-template-columns:54px minmax(0,1fr) 60px 26px;gap:3px;padding-top:0;padding-bottom:0}
 #scarlet-bag-v30 .hud .portrait{width:54px;height:54px;margin:0}
 #scarlet-bag-v30 .hud .age{font-size:15px;margin:0}
 #scarlet-bag-v30 .hud-xp-label{display:none}
 #scarlet-bag-v30 .hud-xp{margin-top:0;margin-bottom:0}
 #scarlet-bag-v30 .navigation button{min-height:52px;padding:4px 2px;gap:2px;font-size:12px}
 #scarlet-bag-v30 .navigation .art-icon{width:24px;height:24px}
 #scarlet-bag-v30 .bag-page{gap:3px;padding:3px 7px;grid-template-rows:44px 44px minmax(94px,1fr) 44px minmax(0,max-content)}
}

/* Short notices and small viewports must not push the item actions off screen. */
@container bag-content (height < 425px){
 #scarlet-bag-v30 .bag-page{grid-template-rows:44px 44px minmax(94px,1fr) 44px minmax(0,max-content)}
}
/* Native selection/tap/drag feedback should not paint over game artwork. */
#scarlet-bag-v30,#scarlet-bag-v30 *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#scarlet-bag-v30 ::selection{background:transparent;color:inherit}
#scarlet-bag-v30 img,#scarlet-bag-v30 svg{-webkit-user-drag:none;user-drag:none}
#scarlet-bag-v30 input,#scarlet-bag-v30 textarea,#scarlet-bag-v30 [contenteditable="true"]{-webkit-user-select:text;user-select:text}

#scarlet-bag-v30 .hunt-action{gap:10px}
#scarlet-bag-v30 .hunt-person>div{min-width:0}
/* Boss encounters own an arena and media binding, independent of PvP cards. */
#scarlet-bag-v30 .boss-rewards{padding:6px 5px 0}
#scarlet-bag-v30 .boss-rewards-label{font:12px var(--sc-font-ui);color:#baa789;margin-bottom:5px}
#scarlet-bag-v30 .boss-rewards .rewards-row{justify-content:flex-start;padding:0}
#scarlet-bag-v30 .boss-loot{display:flex;flex-wrap:wrap;gap:7px;margin-top:5px}
#scarlet-bag-v30 .boss-loot-preview{width:100px;height:100px;object-fit:contain;margin:0 auto 12px}
#scarlet-bag-v30 .boss-arena-page{padding:10px 8px 14px}
#scarlet-bag-v30 .boss-arena-heading{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#scarlet-bag-v30 .boss-arena-heading h2{font-size:23px;font-weight:normal;overflow-wrap:anywhere}
#scarlet-bag-v30 .boss-arena-back.action{min-width:92px;padding:8px;font-size:13px}
#scarlet-bag-v30 .boss-arena-stage{position:relative;isolation:isolate;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;border:1px solid #8c7046;background:radial-gradient(ellipse at 50% 45%,#394143,#101219 75%);padding:12px}
#scarlet-bag-v30 .boss-arena-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:-2}
#scarlet-bag-v30 .boss-arena-stage:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#08090ae6,transparent 30%,#08090a40 55%,#08090af5)}
#scarlet-bag-v30 .boss-arena-enemy{width:100%;height:250px;object-fit:contain;filter:drop-shadow(0 4px 10px #000)}
#scarlet-bag-v30 .boss-arena-health{width:100%;padding:7px;background:#0b0d12c9;border:1px solid #7f634440}
#scarlet-bag-v30 .boss-arena-health .meter{height:15px}
#scarlet-bag-v30 .boss-arena-turn{text-align:center;width:100%;min-height:67px;padding:9px 0;color:#e0c5a0}
#scarlet-bag-v30 .boss-arena-turn>span{font:11px var(--sc-font-ui);color:#b5a58c}
#scarlet-bag-v30 .boss-arena-turn h3{font-size:21px;font-weight:normal}
#scarlet-bag-v30 .boss-arena-controls{display:flex;gap:8px;margin-top:10px}
#scarlet-bag-v30 .boss-arena-controls .action{flex:1;min-width:0;padding:8px;font-size:14px}
#scarlet-bag-v30 .boss-arena-rewards{padding:10px;margin-top:10px}
#scarlet-bag-v30 .boss-grant{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:13px}
@media(max-height:740px){#scarlet-bag-v30 .boss-arena-enemy{height:180px}#scarlet-bag-v30 .boss-arena-stage{min-height:310px}}

/* One paging rail for inventory and magic; only horizontal gestures turn pages. */
#scarlet-bag-v30 .bag-grid,#scarlet-bag-v30 .spell-list{touch-action:pan-y}
#scarlet-bag-v30 .bag-page>.spell-page-rail{margin:0}
#scarlet-bag-v30 .reward-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#scarlet-bag-v30 .reward-tile{position:relative;display:grid;place-items:center;min-width:48px;width:auto;height:50px;margin:0;padding:3px 6px 12px;border:1px solid #68543f;border-radius:5px;background:radial-gradient(ellipse at center,#383027,#191719 75%)}
#scarlet-bag-v30 .reward-tile-art{width:34px;height:34px;object-fit:contain}
#scarlet-bag-v30 .reward-tile-amount{position:absolute;bottom:1px;left:2px;right:2px;text-align:center;color:#e1c7a1;font:11px var(--sc-font-ui);line-height:13px;text-shadow:0 1px 2px #000}
#scarlet-bag-v30 .boss-arena-rewards .reward-strip{margin-top:5px}

/* Clip moving pages locally so gestures never widen or stretch the screen. */
#scarlet-bag-v30 .page-window{position:relative;min-width:0;min-height:0;overflow:clip}
#scarlet-bag-v30 .bag-page>.page-window>.bag-grid{height:100%}
#scarlet-bag-v30 .magic-page>.page-window{margin-bottom:10px}
#scarlet-bag-v30 .page-window>.spell-list{margin-bottom:0}
#scarlet-bag-v30 .page-window>.page-outgoing{position:absolute;inset:0;width:100%;height:100%;margin:0;pointer-events:none}

#scarlet-bag-v30 .boss-detail .boss-attack-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,42%);align-items:center;gap:10px}
#scarlet-bag-v30 .boss-detail .boss-attack-row>.action{width:100%;min-width:0;max-width:100%;min-height:48px;margin:0;padding:8px 10px;font-size:15px}
#scarlet-bag-v30 .boss-loot-icons{display:flex;gap:5px;flex-wrap:wrap}
#scarlet-bag-v30 .boss-loot-icons .reward-tile{width:44px;min-width:44px;height:44px;padding:3px}
#scarlet-bag-v30 .boss-drop-details{margin-top:14px}
#scarlet-bag-v30 .boss-drop-details>.muted{font-size:12px;margin:8px 0}
#scarlet-bag-v30 .boss-drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
#scarlet-bag-v30 .boss-drop-row{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 5px;border:1px solid #9a764755;background:#27111755}
#scarlet-bag-v30 .boss-drop-art{display:grid;place-items:center;width:42px;height:48px;flex:none}
#scarlet-bag-v30 .boss-drop-art>.art-icon{width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .boss-drop-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
#scarlet-bag-v30 .boss-drop-copy strong{font:13px/1.2 'Vollkorn',serif;color:#ead8b8;overflow-wrap:anywhere}
#scarlet-bag-v30 .boss-drop-copy .drop-chance{font:12px/1.2 'PT Sans',sans-serif;color:#e0be7f}
#scarlet-bag-v30 .boss-drop-copy .drop-stock{font:11px/1.2 'PT Sans',sans-serif;color:#bcaa90}
#scarlet-bag-v30 .boss-drop-row.is-collected img{opacity:.4;filter:saturate(.4)}
@media(max-width:350px){#scarlet-bag-v30 .boss-drop-row{gap:4px;padding:6px 3px}#scarlet-bag-v30 .boss-drop-art{width:32px;height:42px}}

#scarlet-bag-v30 .drop-chance{color:#cbb38c;font-size:13px;margin:4px 0 0}

#scarlet-bag-v30 .bag-filters button{margin:0;border-radius:0}

/* Profile: a single frame, compact equipment, actual character development. */
#scarlet-bag-v30 .profile-sheet .sheet-head{margin:0;height:0}
#scarlet-bag-v30 .profile-sheet .sheet-head .icon-button{position:absolute;right:7px;top:5px;z-index:1}
#scarlet-bag-v30 .profile-sheet .profile-heading{padding:3px 40px 7px;min-height:38px}
#scarlet-bag-v30 .profile-sheet .profile-layout{margin:0 0 8px}
#scarlet-bag-v30 .profile-toolbar{display:flex;align-items:center;gap:12px;padding:6px 0 10px;border-bottom:1px solid #8c714b55}
#scarlet-bag-v30 .profile-title-button{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;flex:1;min-width:0;background:none;border:0;text-align:left;padding:3px 0;min-height:44px}
#scarlet-bag-v30 .profile-title-button>.muted{font:11px var(--sc-font-ui);flex-basis:100%}
#scarlet-bag-v30 .title-chevron{color:#b49762;margin-left:auto;font-size:23px}
#scarlet-bag-v30 .profile-toolbar .achievements-button{position:static;width:auto;height:44px;display:flex;gap:4px;padding:4px 0;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .profile-toolbar .achievements-button .art-icon{width:26px;height:30px}
#scarlet-bag-v30 .development-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 0 3px}
#scarlet-bag-v30 .development-heading h4{margin:0;font:18px var(--sc-font-display)}
#scarlet-bag-v30 .development-points{display:flex;align-items:center;gap:5px;font:12px var(--sc-font-ui);color:#c7b389}
#scarlet-bag-v30 .development-points strong{font-size:17px;font-weight:400}
#scarlet-bag-v30 .development-row{display:flex;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid #8c714b25;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .development-stat{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#scarlet-bag-v30 .development-stat strong{margin-left:auto;font-weight:400;font-size:14px;white-space:nowrap}
#scarlet-bag-v30 .development-control{display:flex;align-items:center;gap:3px;margin-left:3px}
#scarlet-bag-v30 .development-control small{width:30px;font-size:10px}
#scarlet-bag-v30 .sheet .development-upgrade{width:53px;min-width:53px;min-height:42px;padding:6px 8px;margin:0;font-size:15px}
#scarlet-bag-v30 .development-hint{font:10px/1.4 var(--sc-font-ui);padding-top:6px}
#scarlet-bag-v30 .profile-combat{margin:6px 0 0}
#scarlet-bag-v30 #sheet-content .panel{border:0;border-image:none;background:none;box-shadow:none;padding:0}
#scarlet-bag-v30 .title-choice{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid #8c714b55;text-align:left;padding:13px 0;min-height:65px}
#scarlet-bag-v30 .title-copy{display:grid;gap:5px;flex:1;min-width:0}
#scarlet-bag-v30 .title-copy strong{font-weight:400;font-size:16px}
#scarlet-bag-v30 .title-copy small{font:12px/1.4 var(--sc-font-ui)}
#scarlet-bag-v30 .title-choice[aria-pressed=true] .title-status{color:#b49762;font-size:22px}
#scarlet-bag-v30 .title-status{font:11px var(--sc-font-ui);color:#b49762}
#scarlet-bag-v30 .title-choice:disabled:not([aria-pressed=true]){opacity:.55}
#scarlet-bag-v30 .achievement-list .achievement-row{display:block;margin:0;padding:12px;border:1px solid #82643d77;background:linear-gradient(140deg,#36202bb3,#160e14e6);box-shadow:inset 0 1px #ccb58012}
#scarlet-bag-v30 .achievement-art{width:54px;height:64px;object-fit:contain;align-self:start}
#scarlet-bag-v30 .achievement-copy{min-width:0;font:12px/1.4 var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-heading{display:flex;gap:8px;align-items:center;margin-bottom:5px}
#scarlet-bag-v30 .achievement-heading h4{margin:0;flex:1;font:17px/1.2 var(--sc-font-display)}
#scarlet-bag-v30 .achievement-complete{color:#b49762}
#scarlet-bag-v30 .achievement-progress{margin-top:9px}
#scarlet-bag-v30 .achievement-progress-label{display:flex;gap:8px;justify-content:space-between;font-size:11px}
#scarlet-bag-v30 .achievement-progress-label>:last-child{white-space:nowrap}
#scarlet-bag-v30 .achievement-rewards{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:9px;font-size:11px}
#scarlet-bag-v30 .achievement-reward{display:flex;gap:4px;align-items:center}
#scarlet-bag-v30 .achievement-reward .art-icon{width:18px;height:20px}
#scarlet-bag-v30 .profile-sheet .equipment-side{gap:6px}
#scarlet-bag-v30 .profile-sheet .profile-equipped{height:60px}
#scarlet-bag-v30 .profile-sheet .profile-avatar-wrap{width:112px;margin-bottom:8px}
#scarlet-bag-v30 .profile-sheet .profile-avatar-button .portrait{width:112px;height:112px}
#scarlet-bag-v30 .profile-sheet .profile-xp{margin:8px 0 9px}
#scarlet-bag-v30 .sheet .development-upgrade{min-height:44px}
@media(max-width:370px){#scarlet-bag-v30 .profile-sheet .profile-avatar-wrap{width:105px}#scarlet-bag-v30 .profile-sheet .profile-avatar-button .portrait{width:105px;height:105px}}

/* Adjacent pages stay joined to the current page for the entire drag. */
#scarlet-bag-v30 .page-neighbor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform}
/* Use the spell-card mana badge on both the cast and the knowledge block. */
#scarlet-bag-v30 .duel-mana-cost.spell-mana-badge{position:absolute;right:2px;top:2px;bottom:auto;left:auto;margin:0;min-width:38px;width:auto;height:30px;padding:0 4px;gap:4px;background:#191c24;border:1px solid #8e826d;border-radius:3px;box-shadow:0 1px 3px #000a;color:#d3dbea;font:17px var(--sc-font-display);text-shadow:none;z-index:7}
#scarlet-bag-v30 .duel-mana-cost.spell-mana-badge .art-icon{width:16px;height:22px;transform:none}
#scarlet-bag-v30 .duel-block .duel-mana-cost>span{position:static;background:none;padding:0;color:inherit;font:inherit}
/* Keep a full touch target while bringing the close icon nearer the corner. */
#scarlet-bag-v30 .sheet-head{padding-right:38px;min-height:38px}
#scarlet-bag-v30 .sheet-head .icon-button,#scarlet-bag-v30 .profile-sheet .sheet-head .icon-button{position:absolute;right:-3px;top:-5px;z-index:8;width:44px;height:44px}
#scarlet-bag-v30 .profile-sheet .sheet-head{min-height:0;padding:0}
#scarlet-bag-v30 .boss-turn-mana{display:flex;justify-content:center;gap:12px;margin-top:6px;min-height:30px}
#scarlet-bag-v30 .boss-turn-mana>span{display:flex;align-items:center;gap:5px;font:11px var(--sc-font-ui)}
#scarlet-bag-v30 .boss-turn-mana .duel-mana-cost.spell-mana-badge{position:static}

/* Title belongs above the name; compact point buttons retain touch padding. */
#scarlet-bag-v30 .profile-title-select{display:block;max-width:100%;margin:0 auto 3px;padding:3px 5px;min-height:28px;border:0;background:none;color:#c5a16d;font:13px/1.3 var(--sc-font-display);overflow-wrap:anywhere}
#scarlet-bag-v30 .profile-title-select:hover{color:#ead2a0}
#scarlet-bag-v30 .profile-toolbar{justify-content:flex-end}
#scarlet-bag-v30 .sheet .development-upgrade{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin:0;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .sheet .development-upgrade::before{inset:8px 6px;border:1px solid #9d7d49;border-image:none;border-radius:3px;background:linear-gradient(#46202b,#29131c);box-shadow:inset 0 1px #d9b46b20}
#scarlet-bag-v30 .sheet .development-upgrade:disabled::before{border-color:#655e53;background:#26242a;box-shadow:none}
#scarlet-bag-v30 .development-row{min-height:44px}

#scarlet-bag-v30 .development-stat{flex-wrap:wrap;gap:1px 5px}
#scarlet-bag-v30 .development-stat>span:first-child{flex-basis:100%;font-size:11px}
#scarlet-bag-v30 .development-stat strong{margin-left:0}
#scarlet-bag-v30 .development-preview{font:11px var(--sc-font-ui);color:#c4a569;white-space:nowrap}
#scarlet-bag-v30 .development-control{gap:0}
#scarlet-bag-v30 .development-pending{font:11px var(--sc-font-ui);color:#c4a569;padding-top:5px}
#scarlet-bag-v30 .development-actions{display:flex;gap:8px;align-items:center}
#scarlet-bag-v30 .sheet .development-actions .action{flex:1;width:auto;min-width:0;padding:7px 10px;min-height:44px;margin-top:6px;font-size:14px}

/* Pending commands announce status without shifting the map and action button. */
#scarlet-bag-v30 .notice.transient{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
#scarlet-bag-v30 .game:has(.overlay.fullscreen:not([hidden])) .game-content{display:none}
#scarlet-bag-v30 .overlay.fullscreen{position:fixed;inset:0;margin:0 auto;width:100%;max-width:440px;height:100dvh;padding:0;overflow-y:auto;overscroll-behavior:contain}
#scarlet-bag-v30 .overlay.fullscreen .sheet{min-height:100%;padding-top:max(11px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
#scarlet-bag-v30 .development-upgrade{touch-action:none;-webkit-touch-callout:none}

/* Clan battle entry belongs to Hunt; all schedule/result values come from state. */
#scarlet-bag-v30 .hunt-page>.atlas-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
#scarlet-bag-v30 .hunt-page .atlas-subtitle{max-width:175px}
#scarlet-bag-v30 .campaign-entry{display:flex;align-items:center;gap:6px;min-height:48px;max-width:156px;flex-shrink:0;padding:5px 8px;border:1px solid #756043;background:linear-gradient(125deg,#292126,#15161c);color:#cebd9e;box-shadow:inset 0 0 12px #a1844720;text-align:left}
#scarlet-bag-v30 .campaign-entry-mark svg{width:25px;height:25px;stroke:#b59a67}
#scarlet-bag-v30 .campaign-entry-copy{display:flex;flex-direction:column;gap:5px;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .campaign-entry-copy>strong{font-weight:normal}
#scarlet-bag-v30 .campaign-entry-copy>span{font:10px/1.25 var(--sc-font-ui);color:#b7a994}
#scarlet-bag-v30 .campaign-entry.is-available{border-color:#b08d51;background:linear-gradient(125deg,#43232a,#201820);box-shadow:inset 0 0 15px #a7833920,0 0 9px #ac813324}
#scarlet-bag-v30 .campaign-entry.is-available .campaign-countdown{color:#dcc390}
#scarlet-bag-v30 .campaign-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px}
#scarlet-bag-v30 .campaign-heading h2{font-size:23px;margin:0 0 4px}
#scarlet-bag-v30 .campaign-heading p{margin:0}
#scarlet-bag-v30 .campaign-summary{grid-column:1/-1;grid-row:3;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none;text-shadow:0 1px 3px #000}
#scarlet-bag-v30 .campaign-heading:has(.campaign-summary) .field-heading-copy>p{padding-right:128px;min-height:30px}
#scarlet-bag-v30 .campaign-status{display:grid;gap:4px;text-align:right;color:#c9b895;font:10px/1.2 var(--sc-font-ui);margin-left:auto}
#scarlet-bag-v30 .campaign-status strong{color:#e0c898;font-weight:normal;font-variant-numeric:tabular-nums;font-size:12px}
#scarlet-bag-v30 .campaign-scene{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #645033;background:#14161b}
#scarlet-bag-v30 .campaign-background{display:block;width:100%;height:100%;object-fit:cover}
#scarlet-bag-v30 .campaign-banner{position:absolute;top:36.2%;width:14.35%;height:19.3%;object-fit:fill;filter:brightness(.8)}
#scarlet-bag-v30 .campaign-banner.left{left:16.03%}
#scarlet-bag-v30 .campaign-banner.right{left:69.62%}
#scarlet-bag-v30 .campaign-chest{position:absolute;width:22%;aspect-ratio:1}
#scarlet-bag-v30 .campaign-chest.left{left:6.22%;top:64.35%}
#scarlet-bag-v30 .campaign-chest.center{left:38.3%;top:64.03%}
#scarlet-bag-v30 .campaign-chest.right{left:70.97%;top:64.59%}
#scarlet-bag-v30 .campaign-chest-art{width:100%;height:100%;object-fit:contain}
#scarlet-bag-v30 .campaign-winner{position:absolute;z-index:3;bottom:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-width:164px;max-width:calc(100% - 32px);height:36px;padding:0 12px 0 0;border:1px solid #937448;background:linear-gradient(100deg,#211015f5,#25151bea);box-shadow:inset 0 0 0 2px #130d0e,0 2px 6px #000b;pointer-events:none}
#scarlet-bag-v30 .campaign-winner-frame{position:relative;display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;isolation:isolate;filter:drop-shadow(0 1px 2px #000)}
#scarlet-bag-v30 .campaign-winner-frame:before,#scarlet-bag-v30 .campaign-winner-frame:after{content:'';position:absolute;z-index:-1;clip-path:polygon(17% 0,83% 0,100% 17%,100% 83%,83% 100%,17% 100%,0 83%,0 17%)}
#scarlet-bag-v30 .campaign-winner-frame:before{inset:-2px;background:linear-gradient(135deg,#e0c48a,#9e7741 35%,#4c321f 58%,#c4a16a)}
#scarlet-bag-v30 .campaign-winner-frame:after{inset:1px;background:radial-gradient(ellipse at 50% 25%,#47342c,#170d14 75%);box-shadow:inset 0 0 4px #000}
#scarlet-bag-v30 .campaign-winner .clan-mark{width:25px;height:29px;flex-shrink:0}
#scarlet-bag-v30 .campaign-winner-copy{min-width:0}
#scarlet-bag-v30 .campaign-winner .muted{display:block;white-space:nowrap;font:9px/1.2 var(--sc-font-ui)}
#scarlet-bag-v30 .campaign-winner h3{margin:1px 0 0;color:#dac18e;font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scarlet-bag-v30 .campaign-reward-note{text-align:center;font:12px var(--sc-font-display);color:#ba9a62;margin:8px 0}
#scarlet-bag-v30 .campaign-leaders{margin:5px 6px 8px;padding:4px 8px}
#scarlet-bag-v30 .campaign-leaders h3{margin:0 0 4px;font-size:17px}
#scarlet-bag-v30 .campaign-leaders>p{margin:4px 0 10px}
#scarlet-bag-v30 .campaign-ranking{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
#scarlet-bag-v30 .campaign-ranking li{--podium-metal:#b99a58;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
#scarlet-bag-v30 .campaign-ranking li:nth-child(2){--podium-metal:#a3a5aa}
#scarlet-bag-v30 .campaign-ranking li:nth-child(3){--podium-metal:#a47550}
#scarlet-bag-v30 .campaign-player-title{width:100%;height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b49a78;font:10px/15px var(--sc-font-display)}
#scarlet-bag-v30 .campaign-player-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;height:30px;margin-bottom:5px;font:12px/15px var(--sc-font-display);color:#e0cba9;overflow-wrap:anywhere}
#scarlet-bag-v30 .campaign-player-portrait{position:relative;width:min(66px,100%);aspect-ratio:1;border:1px solid var(--podium-metal);background:#151219;box-shadow:inset 0 0 0 2px #171418,0 2px 6px #0008}
#scarlet-bag-v30 .campaign-player-image{width:100%;height:100%;object-fit:cover;object-position:center top;padding:2px}
#scarlet-bag-v30 .campaign-player-placeholder{display:grid;place-items:center;height:100%;color:var(--podium-metal);font-size:28px}
#scarlet-bag-v30 .campaign-rank{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);min-width:22px;padding:2px 5px;border:1px solid var(--podium-metal);background:#25171a;color:#e6d6b4;font:11px var(--sc-font-display)}
#scarlet-bag-v30 .campaign-contribution{width:100%;text-align:center;display:flex;justify-content:center;align-items:baseline;gap:4px;margin-top:8px;padding:5px 2px;border-top:1px solid var(--podium-metal);background:linear-gradient(#b89a5820,transparent);font:14px var(--sc-font-display);color:#d0b884}
#scarlet-bag-v30 .campaign-contribution small{font:10px var(--sc-font-ui);color:#9d9386}
@media(max-width:350px){#scarlet-bag-v30 .campaign-entry{max-width:133px;padding:5px}#scarlet-bag-v30 .campaign-entry-mark svg{width:20px}#scarlet-bag-v30 .hunt-page .atlas-subtitle{max-width:140px;font-size:10px}#scarlet-bag-v30 .campaign-heading h2{font-size:20px}}
#scarlet-bag-v30 .campaign-score-details{margin:8px 6px 18px;padding:4px 12px;color:#c7b38f;font:12px var(--sc-font-display)}
#scarlet-bag-v30 .campaign-score-details summary{cursor:pointer;min-height:32px;padding:8px 0}
#scarlet-bag-v30 .campaign-score-details>.campaign-scales{margin:0;padding:4px 0 8px;border:0;background:none}

/* Compact flags and round field markers from the approved battle screen. */
#scarlet-bag-v30 .campaign-crest{position:relative;display:block;width:34px;height:39px;flex-shrink:0;filter:drop-shadow(0 2px 3px #000e);pointer-events:none}
#scarlet-bag-v30 .campaign-crest-art{position:absolute;left:0;top:0;width:54px;height:61px;transform:scale(.63);transform-origin:top left}
#scarlet-bag-v30 .campaign-matte-plate{position:absolute;inset:0;clip-path:path('M4 5 Q27 9 50 5 L47 34 Q43 47 27 57 Q11 47 7 34 Z');background:#201c1a}
#scarlet-bag-v30 .campaign-cloth{position:absolute;left:-9%;top:-16%;width:118%;max-width:none;height:140%;object-fit:fill;filter:brightness(.78)}
#scarlet-bag-v30 .campaign-crest.is-ember .campaign-cloth{filter:hue-rotate(-12deg) saturate(.85) brightness(.48)}
#scarlet-bag-v30 .campaign-crest-outline{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#89734d;stroke-width:1.5}
#scarlet-bag-v30 .campaign-emblem{position:absolute;left:23%;top:20%;width:54%;height:54%;object-fit:contain;filter:brightness(.88) saturate(.8);pointer-events:none}
#scarlet-bag-v30 .campaign-marker{position:absolute;width:56px;height:56px;display:grid;place-items:center;padding:0;background:none;border:0;transform:translate(-50%,-50%);cursor:pointer;will-change:transform}
#scarlet-bag-v30 .campaign-marker[aria-pressed=true]{z-index:2}
#scarlet-bag-v30 .campaign-marker[aria-pressed=true] .campaign-coin{filter:brightness(1.15) drop-shadow(0 0 3px #e7c884) drop-shadow(0 0 7px #ae3c47)}
#scarlet-bag-v30 .campaign-marker:focus-visible{outline:1px solid #eed6a7;border-radius:5px}
#scarlet-bag-v30 .campaign-scales{margin:8px 6px 18px;border:9px solid transparent;border-image:url('./assets/panelFrame.webp') 32 / 9px / 0 stretch;background-color:#250f16;background-image:linear-gradient(#1a090dc9,#170b10c9),url('./assets/wine.webp');background-size:auto,280px;padding:8px 12px;display:grid;gap:4px}
#scarlet-bag-v30 .campaign-scale-row{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px}
#scarlet-bag-v30 .campaign-scale{height:20px;padding:4px 5px;position:relative;isolation:isolate;min-width:0}
#scarlet-bag-v30 .campaign-scale-number{position:absolute;inset:0;display:grid;place-items:center;color:#f0e3cb;font:11px/1 var(--sc-font-ui);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
#scarlet-bag-v30 .campaign-scale:before{content:'';position:absolute;inset:0;background:url('./assets/bar.webp') center/100% 100% no-repeat;z-index:-1}
#scarlet-bag-v30 .campaign-scale-fill{display:block;height:100%;border-radius:9px;background:linear-gradient(var(--clan-fill-top,#ac8853),var(--clan-fill-bottom,#6b5030))}
#scarlet-bag-v30 .campaign-target[hidden]{display:none}
@media(max-width:370px){#scarlet-bag-v30 .campaign-scales{padding:8px 7px}#scarlet-bag-v30 .campaign-scale-row{gap:10px}}
html[data-motion="reduced"] #scarlet-bag-v30 .campaign-marker{will-change:auto}

#scarlet-bag-v30 .campaign-coin{position:relative;display:block;width:52px;height:52px;overflow:hidden;border:1px solid #b99d67;border-radius:50%;background:#242126;box-shadow:0 2px 5px #000c,inset 0 0 0 2px #302a23;pointer-events:none}
#scarlet-bag-v30 .campaign-coin:after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px #302a23;pointer-events:none}
#scarlet-bag-v30 .campaign-coin.is-ember .campaign-cloth{filter:hue-rotate(-12deg) saturate(.85) brightness(.48)}
#scarlet-bag-v30 .campaign-coin .campaign-emblem{left:18%;top:18%;width:64%;height:64%}
#scarlet-bag-v30 .campaign-rules p+p{margin-top:14px}


/* Crop the opaque cloth, excluding the flag's transparent edges and pointed tip. */
#scarlet-bag-v30 .campaign-coin .campaign-cloth{left:-30%;top:-15%;width:160%;height:240%;max-width:none}
#scarlet-bag-v30 .field-refresh{position:absolute;right:8px;bottom:8px;z-index:3;width:auto;min-height:44px;padding:5px 14px;font-size:14px}
#scarlet-bag-v30 .campaign-target{display:block;padding:0;border:0;margin:8px 6px 18px}
#scarlet-bag-v30 .campaign-target .atlas-card{margin:0}
#scarlet-bag-v30 .opponent-card{position:relative}
#scarlet-bag-v30 .opponent-card:has(.opponent-card-close) .hunt-person{padding-right:30px}
#scarlet-bag-v30 .opponent-card-close{position:absolute;right:0;top:0;font-size:26px}

/* Scores and the selected opponent share one stable mobile layout slot. */
#scarlet-bag-v30 .campaign-combat-panel{display:grid;grid-template-columns:minmax(0,1fr);height:var(--field-panel-height);flex-shrink:0;margin:5px 6px 8px}
#scarlet-bag-v30 .campaign-combat-panel>.campaign-scales,#scarlet-bag-v30 .campaign-combat-panel>.campaign-target{grid-area:1/1;min-width:0;min-height:0;height:100%;margin:0}
#scarlet-bag-v30 .campaign-combat-panel>.campaign-scales{padding:4px 8px;gap:2px;grid-auto-rows:minmax(0,1fr)}
#scarlet-bag-v30 .campaign-combat-panel .campaign-scale-row{grid-template-columns:25px minmax(0,1fr);gap:8px}
#scarlet-bag-v30 .campaign-combat-panel .campaign-crest{width:25px;height:28px}
#scarlet-bag-v30 .campaign-combat-panel .campaign-crest-art{transform:scale(.459)}
#scarlet-bag-v30 .campaign-combat-panel .opponent-card{height:100%;min-height:0;padding:4px 8px;display:grid;grid-template-rows:minmax(0,1fr) auto auto}
#scarlet-bag-v30 .campaign-combat-panel .hunt-person{min-height:0;align-items:start}
#scarlet-bag-v30 .campaign-combat-panel .hunt-name{font-size:18px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#scarlet-bag-v30 .campaign-combat-panel .hunt-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scarlet-bag-v30 .campaign-combat-panel .hunt-meta{gap:3px 8px;margin-top:3px;font-size:10px}
#scarlet-bag-v30 .campaign-combat-panel .hunt-vitals{padding:4px 0;gap:4px 12px}
#scarlet-bag-v30 .campaign-combat-panel .hunt-action{padding-top:4px}
#scarlet-bag-v30 .campaign-combat-panel .hunt-action .action{min-width:128px}
#scarlet-bag-v30 .campaign-field{position:absolute;inset:0 0 52px}
@media(max-height:740px){
 #scarlet-bag-v30 .campaign-field .campaign-marker{width:44px;height:44px}
 #scarlet-bag-v30 .campaign-field .campaign-coin{width:40px;height:40px}
}

/* Reuse the location title and its ornamental gold divider over each map. */
#scarlet-bag-v30 .field-heading{position:absolute;inset:0 0 auto;z-index:4;margin:0;padding:15px 12px;background:linear-gradient(#070c15d9,#070c1560 75%,transparent);pointer-events:none}
#scarlet-bag-v30 .field-heading-copy{flex:1;min-width:0}
#scarlet-bag-v30 .field-heading h2{font-size:29px;font-weight:400;line-height:1.2;margin:0;text-shadow:0 2px 4px #000}
#scarlet-bag-v30 .field-heading p{margin-top:3px;text-shadow:0 1px 3px #000,0 1px 6px #000}
#scarlet-bag-v30 .field-heading button{pointer-events:auto}
#scarlet-bag-v30 .field-heading .campaign-entry{align-self:flex-start}
#scarlet-bag-v30 .atlas-horizon{position:relative;width:100%;overflow:visible;z-index:1;pointer-events:none}
/* Blend every horizon into its original map: city, hunt and campaign share this layer. */
#scarlet-bag-v30 .atlas-horizon-image{display:block;position:absolute;inset:0 auto auto 0;width:100%;height:calc(100% + 24px);object-fit:cover;object-position:center top;mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
#scarlet-bag-v30 .campaign-surface,#scarlet-bag-v30 .atlas-surface{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
@media(max-width:370px){#scarlet-bag-v30 .field-heading{padding:14px 9px;gap:5px}#scarlet-bag-v30 .field-heading h2{font-size:26px}#scarlet-bag-v30 .campaign-heading.field-heading h2{font-size:25px}}

/* The divider has its own full-width row; header controls only share the title row. */
#scarlet-bag-v30 .location-heading{--heading-inset:12px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;row-gap:0;padding-inline:var(--heading-inset)}
#scarlet-bag-v30 .location-heading h2{grid-column:2;grid-row:1;min-width:0}
#scarlet-bag-v30 .location-heading>.icon-button{grid-column:1;grid-row:1}
#scarlet-bag-v30 .location-heading>.info-button{grid-column:3}
#scarlet-bag-v30 .location-heading:has(>.field-heading-copy){grid-template-columns:minmax(0,1fr) auto}
#scarlet-bag-v30 .field-heading-copy{display:contents}
#scarlet-bag-v30 .location-heading .field-heading-copy>h2{grid-column:1;grid-row:1}
#scarlet-bag-v30 .location-heading .field-heading-copy>p{grid-column:1/-1;grid-row:3}
#scarlet-bag-v30 .location-heading:has(>.field-heading-copy)>button{grid-column:2;grid-row:1;align-self:center}
#scarlet-bag-v30 .location-heading:after{content:'';grid-column:1/-1;grid-row:2;display:block;width:calc(100% + 2 * var(--heading-inset));height:16px;margin:1px calc(-1 * var(--heading-inset)) 0;background:url('./assets/heading-divider.svg') center/100% auto no-repeat;pointer-events:none}
@media(max-width:370px){#scarlet-bag-v30 .location-heading{--heading-inset:9px}}

#scarlet-bag-v30 .campaign-picker{width:100%;padding:10px;background:#19131a;color:var(--sc-paper);border:1px solid #756043;font:inherit}
#scarlet-bag-v30 button.campaign-chest{border:0;padding:0;background:none;box-shadow:none}
#scarlet-bag-v30 .campaign-chest.is-claimed{opacity:1;cursor:default;filter:none}
#scarlet-bag-v30 .campaign-chest-canvas{display:block;pointer-events:none}

/* Rewards float over the live scene without changing the document's geometry. */
#scarlet-bag-v30 .overlay.floating{position:fixed;inset:0;z-index:80;width:100%;max-width:440px;height:100dvh;margin:0 auto;padding:20px 12px;display:flex;align-items:center;justify-content:center;background:#07080bb8;overscroll-behavior:contain;touch-action:none}
#scarlet-bag-v30 .overlay.floating[hidden]{display:none}
#scarlet-bag-v30 .overlay.floating .sheet{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#scarlet-bag-v30 .campaign-result-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #735333;margin:0 0 5px}
#scarlet-bag-v30 .campaign-result-tabs button{min-height:42px;padding:8px 4px;border:0;border-bottom:2px solid transparent;background:none;box-shadow:none;color:#ae9d83;font:13px var(--sc-font-display)}
#scarlet-bag-v30 .campaign-result-tabs button[aria-selected=true]{color:#e2c594;border-bottom-color:#b8965c;background:linear-gradient(transparent,#b8965c14)}
#scarlet-bag-v30 .campaign-result-tabs button:focus-visible{outline:1px solid #d6b578;outline-offset:-3px}
#scarlet-bag-v30 .campaign-result-window{overflow:hidden;min-width:0}
#scarlet-bag-v30 .campaign-result-track{display:flex;align-items:stretch;width:100%;transition:transform .32s cubic-bezier(.22,.7,.18,1);touch-action:pan-y}
#scarlet-bag-v30 .campaign-result-track.is-dragging{transition:none}
#scarlet-bag-v30 .campaign-result-page{flex:0 0 100%;min-width:0;box-sizing:border-box}
#scarlet-bag-v30 .campaign-top>p{margin:0 0 8px;font-size:11px}
#scarlet-bag-v30 .campaign-history>.campaign-scales{margin:0;border:0;background:none;padding:0 0 6px}
#scarlet-bag-v30 .campaign-history .campaign-scale-row{grid-template-columns:23px minmax(0,1fr);gap:8px}
#scarlet-bag-v30 .campaign-history .campaign-crest{width:23px;height:26px}
#scarlet-bag-v30 .campaign-history .campaign-crest-art{transform:scale(.426)}

/* Ambient victory motion stays on the retained scene during state sync. */
#scarlet-bag-v30 .campaign-victory-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#scarlet-bag-v30 .campaign-source-light{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.5) saturate(.85);mask-image:radial-gradient(ellipse 13% 50% at 50% 40%,#000 10%,transparent 100%);animation:campaign-source-breathe 4.8s ease-in-out infinite}
#scarlet-bag-v30 .campaign-victory-flow{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
#scarlet-bag-v30 .has-victory-motion .campaign-victory-flow{visibility:visible}
#scarlet-bag-v30 .has-victory-motion .campaign-banner,#scarlet-bag-v30 .has-victory-motion .campaign-source-light{visibility:hidden}
#scarlet-bag-v30 .campaign-scene.is-complete .campaign-banner{transform-origin:50% 0;animation:campaign-banner-wind 4.2s ease-in-out infinite}
#scarlet-bag-v30 .campaign-scene.is-complete .campaign-banner.right{animation-delay:-2.1s;animation-duration:4.9s}
#scarlet-bag-v30 .campaign-chest:not(:disabled):not(.is-claimed) .campaign-chest-art{animation:campaign-chest-glow 3.8s ease-in-out infinite}
#scarlet-bag-v30 .campaign-chest.center .campaign-chest-art{animation-delay:-1.25s}
#scarlet-bag-v30 .campaign-chest.right .campaign-chest-art{animation-delay:-2.5s}
@keyframes campaign-source-breathe{0%,100%{opacity:.12}45%{opacity:.62}65%{opacity:.38}}
@keyframes campaign-banner-wind{0%,100%{transform:skewX(-1deg) scaleX(.99);filter:brightness(.78)}50%{transform:skewX(1.5deg) scaleX(1);filter:brightness(.87)}}
@keyframes campaign-chest-glow{0%,100%{filter:drop-shadow(0 0 2px #ac84302b)}50%{filter:drop-shadow(0 0 7px #c099527a)}}

/* One viewport frame for every section; only the middle region may scroll. */
#scarlet-bag-v30{--field-panel-height:224px;--field-min-height:260px;--game-height:var(--sc-game-viewport-height)}
/* Desktop preview uses phone proportions; real phone viewports retain their full height. */
@media(min-width:480px){:root{--sc-game-viewport-height:min(100svh,calc(var(--sc-game-max-width) * 844 / 390))}}
#scarlet-bag-v30 .game{height:var(--game-height);overflow:hidden}
#scarlet-bag-v30 .game-content{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top);background:none}
#scarlet-bag-v30 .hud{grid-row:1;min-width:0}
#scarlet-bag-v30 #content{grid-row:2;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none}
#scarlet-bag-v30 .navigation{grid-row:3;padding-bottom:env(safe-area-inset-bottom);z-index:4}
#scarlet-bag-v30 .scene{isolation:isolate}
#scarlet-bag-v30 .scene-image{display:block}
#scarlet-bag-v30 .notice:not(.transient){position:absolute;z-index:6;top:0;left:0;right:0;max-height:100%;overflow:auto}
#scarlet-bag-v30 .overlay:not(.fullscreen):not(.floating){height:100%;overflow:auto;overscroll-behavior:contain}
#scarlet-bag-v30 .overlay:not(.fullscreen):not(.floating)>.sheet{margin-block:auto;flex-shrink:0}
#scarlet-bag-v30 .overlay.fullscreen{height:var(--game-height)}
#scarlet-bag-v30 .overlay.floating{height:var(--game-height)}
#scarlet-bag-v30 .overlay.floating .sheet{max-height:calc(var(--game-height) - 40px)}

/* Identical map/panel boundaries in City, Hunt and every campaign state. */
#scarlet-bag-v30 #content>.atlas-page,#scarlet-bag-v30 .campaign-page{height:100%;min-height:calc(var(--field-min-height) + var(--field-panel-height) + 13px);display:flex;flex-direction:column;padding:0}
#scarlet-bag-v30 .atlas-page>.atlas-map,#scarlet-bag-v30 .campaign-page>.campaign-scene{flex:1;min-height:0;aspect-ratio:auto!important;overflow:hidden;container-type:size}
#scarlet-bag-v30 .atlas-page>.atlas-card,#scarlet-bag-v30 .campaign-results{flex-shrink:0;height:var(--field-panel-height);min-height:0;margin:5px 6px 8px;padding:4px 8px;overflow:auto;overscroll-behavior:contain}
#scarlet-bag-v30 .atlas-page>.atlas-card:not(.opponent-card){display:flex;flex-direction:column}
#scarlet-bag-v30 .atlas-page>.atlas-empty{justify-content:center}
#scarlet-bag-v30 .atlas-card>.atlas-empty{justify-content:center;min-height:0;flex:1}
#scarlet-bag-v30 .district-description{min-height:0;flex:1;overflow:auto}
#scarlet-bag-v30 .district-bottom{flex-shrink:0;margin-top:auto}
#scarlet-bag-v30 .atlas-page>.opponent-card{display:grid;grid-template-rows:minmax(0,1fr) auto auto}
#scarlet-bag-v30 .atlas-world{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100cqw,calc(100cqh / var(--world-ratio,1)));aspect-ratio:calc(1 / var(--world-ratio,1));isolation:isolate}
/* When the square city fits, crop excess sky instead of shrinking the whole
   map to include the decorative horizon. Compact maps still keep every POI. */
@container(min-height:1px) and (max-aspect-ratio:1/1){
 #scarlet-bag-v30 .atlas-world{width:100cqw}
}
#scarlet-bag-v30 .atlas-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(7px) brightness(.45);pointer-events:none}
#scarlet-bag-v30 .hunt-field{position:absolute;inset:0 0 52px}
#scarlet-bag-v30 .campaign-scene:has(.campaign-surface){display:grid;grid-template-rows:minmax(24px,1fr) minmax(0,5fr)}
#scarlet-bag-v30 .campaign-surface,#scarlet-bag-v30 .campaign-scene>.atlas-horizon{height:100%;min-height:0;aspect-ratio:auto!important}
#scarlet-bag-v30 .campaign-surface>.campaign-background{object-position:center top}
#scarlet-bag-v30 .campaign-victory-stage{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100cqw,100cqh);aspect-ratio:1}
#scarlet-bag-v30 .campaign-results{overflow:hidden}
#scarlet-bag-v30 .campaign-picker{flex-shrink:0}

/* Paginated inventory and spell grids share the space left by the fixed HUD/menu. */
/* Location markers use image coordinates, including when the scene is cropped. */
#scarlet-bag-v30 .city-page:has(>.scene){display:flex;flex-direction:column;height:100%;min-height:calc(var(--field-min-height) + var(--field-panel-height) + 13px)}
#scarlet-bag-v30 .city-page>.scene{flex:1;height:auto;min-height:0;overflow:hidden;container-type:size}
#scarlet-bag-v30 .location-world{position:absolute;left:50%;top:35%;transform:translate(-50%,-35%);width:max(100cqw,calc(100cqh * var(--location-ratio,.667)));aspect-ratio:var(--location-ratio,.667);isolation:isolate}
#scarlet-bag-v30 .location-world>.scene-image{width:100%;height:100%;object-fit:fill}
#scarlet-bag-v30 .location-world>.poi:not(.boss){width:60px}
#scarlet-bag-v30 .location-world>.poi:not(.boss) .medal{width:60px;height:60px}
#scarlet-bag-v30 .city-page>.scene>.location-heading{position:absolute;inset:0 0 auto;z-index:2;pointer-events:none}
#scarlet-bag-v30 .city-page>.scene>.location-heading button{pointer-events:auto}
#scarlet-bag-v30 .city-page>.scene>.location-heading h2.compact-location-name{font-size:clamp(17px,6cqw,25px);white-space:nowrap}
#scarlet-bag-v30 .city-page>.detail{height:var(--field-panel-height);flex-shrink:0;min-height:0;margin:5px 6px 8px;padding:4px 8px;display:flex;flex-direction:column}
#scarlet-bag-v30 .city-page>.detail:not(.boss-detail)>.description{flex:1;min-height:0;min-width:0;margin:5px 0;overflow-x:hidden;overflow-y:auto;overflow-wrap:anywhere;scrollbar-width:none}
#scarlet-bag-v30 .city-page>.detail:not(.boss-detail)>.description::-webkit-scrollbar{display:none}
#scarlet-bag-v30 .city-page>.detail>.divider{flex-shrink:0;width:calc(100% + 16px);height:16px;margin:3px -8px;background:url('./assets/heading-divider.svg') center/100% auto no-repeat;pointer-events:none}
#scarlet-bag-v30 .city-page>.detail>.action-row{margin-top:5px;flex-shrink:0}
#scarlet-bag-v30 .city-page>.boss-detail{display:grid;grid-template-rows:minmax(0,1fr) 16px 24px 64px;gap:2px;overflow:visible}
#scarlet-bag-v30 .city-page>.boss-detail>.divider{margin:0 -8px}
#scarlet-bag-v30 .city-page>.boss-detail>.action-row{margin:0}
#scarlet-bag-v30 .boss-detail .boss-main{min-height:0;grid-template-columns:34% minmax(0,1fr);gap:8px}
#scarlet-bag-v30 .boss-detail .boss-portrait{min-height:0;margin:-65px 0 0;overflow:hidden}
#scarlet-bag-v30 .boss-detail .boss-portrait:before{content:none}
#scarlet-bag-v30 .boss-detail .boss-portrait img{inset:auto;top:0;right:0;width:154%;height:auto;max-width:none;object-fit:contain}
#scarlet-bag-v30 .boss-detail .boss-summary{position:relative;padding:0;min-height:0}
#scarlet-bag-v30 .boss-detail .boss-name{font-size:18px;line-height:1.15}
#scarlet-bag-v30 .boss-detail .boss-summary>.description{display:none}
#scarlet-bag-v30 .boss-detail .boss-health{margin-top:5px;padding-right:44px}
#scarlet-bag-v30 .boss-detail .boss-health-label{font-size:10px}
#scarlet-bag-v30 .boss-detail .boss-tools{position:absolute;right:0;bottom:0;margin:0}
#scarlet-bag-v30 .boss-detail .boss-tools .icon-button{width:44px;height:44px;padding:11px}
#scarlet-bag-v30 .boss-detail .boss-timer{min-height:14px;line-height:14px;margin:0}
#scarlet-bag-v30 .boss-detail .boss-loot-icons{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0;height:50px;padding:3px 2px;align-items:center}
#scarlet-bag-v30 .boss-detail .boss-loot-icons .reward-tile{flex-shrink:0}
#scarlet-bag-v30[data-screen="bag"] #content{container:bag-content / size}
#scarlet-bag-v30 .bag-page{min-height:390px}
#scarlet-bag-v30 .magic-page{height:100%;min-height:390px;padding:6px 10px;display:grid;grid-template-rows:44px auto 24px minmax(0,1fr) 44px;gap:5px}
#scarlet-bag-v30 .magic-heading,#scarlet-bag-v30 .magic-page .clan-tabs,#scarlet-bag-v30 .magic-page .spell-page-heading,#scarlet-bag-v30 .magic-page>.page-window,#scarlet-bag-v30 .magic-page>.spell-page-rail{margin:0;min-height:0}
#scarlet-bag-v30 .magic-heading h2{font-size:23px}
#scarlet-bag-v30 .spell-page-rail{overflow:clip}
#scarlet-bag-v30 .magic-page>.page-window{container-type:size}
#scarlet-bag-v30 .magic-page .spell-list{height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:8px}
#scarlet-bag-v30 .magic-page .spell-row{width:min(100%,calc((100cqh - 8px) / 2));max-height:100%;aspect-ratio:1}
#scarlet-bag-v30 .magic-page .spell-emblem.has-scene{height:100%;min-height:0}
@media(max-height:740px){
 #scarlet-bag-v30 .magic-page .clan-tab{min-height:60px;padding:2px}
 #scarlet-bag-v30 .magic-page .clan-tab .clan-mark{width:30px;height:34px}
 #scarlet-bag-v30 .magic-page .spell-row .spell-school{width:30px;height:34px}
 #scarlet-bag-v30 .magic-page .spell-row .spell-mana-badge{min-width:29px;height:24px;font-size:13px}
 #scarlet-bag-v30 .magic-page .spell-row .spell-level{min-width:24px;height:25px;font-size:15px}
 #scarlet-bag-v30 .magic-page .spell-emblem>.spell-combat{font-size:11px;gap:4px;padding-right:28px;height:28px}
 #scarlet-bag-v30 .magic-page .spell-combat-stat svg{width:13px;height:13px}
 #scarlet-bag-v30 .magic-page .spell-row .spell-lock-reason{bottom:28px;font-size:10px}
}

/* Ambient canvas shares the source image coordinates; interaction stays above it. */
#scarlet-bag-v30 .location-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
#scarlet-bag-v30 .has-location-motion>.location-motion{display:block}
#scarlet-bag-v30 .has-location-motion>.scene-image{opacity:0}
html[data-motion="reduced"] #scarlet-bag-v30 .location-motion{display:none!important}html[data-motion="reduced"] #scarlet-bag-v30 .has-location-motion>.scene-image{opacity:1}

/* Sky canvas shares the authored horizon overlap and fade; field art keeps its cover crop. */
#scarlet-bag-v30 .campaign-ambient-sky>.location-motion{height:calc(100% + 24px);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}

/* Independent transparent sprites over a clean plate, sharing source coordinates. */
#scarlet-bag-v30 .campaign-surface{container-type:size}
#scarlet-bag-v30 .campaign-layer-plane{position:absolute;top:0;left:50%;width:max(100cqw,100cqh);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;z-index:1}
#scarlet-bag-v30 .campaign-layer{position:absolute;pointer-events:none;object-fit:fill;transform-origin:50% 100%;will-change:transform}
#scarlet-bag-v30 .campaign-layer.tree{animation:campaign-tree-sway var(--period) ease-in-out var(--phase) infinite alternate}

@keyframes campaign-tree-sway{from{transform:skewX(calc(var(--swing) * -1)) rotate(-1deg)}to{transform:skewX(var(--swing)) rotate(1deg)}}

#scarlet-bag-v30 .game:has(.overlay:not([hidden])) .campaign-layer{animation-play-state:paused}
/* Leave room for the heading; show the whole square rather than a second cropped copy. */
#scarlet-bag-v30 .campaign-scene.is-complete{background:linear-gradient(#111821,#19212b 45%,#17191d)}
#scarlet-bag-v30 .campaign-scene.is-complete>.atlas-backdrop{display:none}
#scarlet-bag-v30 .campaign-victory-stage{width:min(100cqw,100cqh);opacity:0;transition:opacity .22s ease-out}
#scarlet-bag-v30 .victory-ready .campaign-victory-stage{opacity:1}
#scarlet-bag-v30 .campaign-source-light{display:none}
#scarlet-bag-v30 .campaign-choice{display:grid;gap:12px;min-width:0}
#scarlet-bag-v30 .campaign-choice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0}
#scarlet-bag-v30 .campaign-choice-option{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;margin:0;padding:8px 3px;background:#21161a;border:1px solid #68543f;font-size:13px;white-space:normal;overflow-wrap:anywhere}
#scarlet-bag-v30 .campaign-choice-option[aria-checked=true]{border-color:#c0a15e;box-shadow:inset 0 0 12px #a3814133;background:#34231d}
#scarlet-bag-v30 .campaign-choice-art{width:100%;height:88px;object-fit:contain}
#scarlet-bag-v30 .campaign-choice-description{margin:0;min-height:38px;font-size:13px;color:#bfae93}
#scarlet-bag-v30 .overlay.floating .sheet{box-sizing:border-box;min-width:0;overflow-x:hidden}
#scarlet-bag-v30 .campaign-granted{padding:4px;overflow:visible}
#scarlet-bag-v30 .overlay.floating:has(.campaign-choice),#scarlet-bag-v30 .overlay.floating:has(.campaign-granted){overflow:hidden}
#scarlet-bag-v30 .overlay.floating .sheet:has(.campaign-choice),#scarlet-bag-v30 .overlay.floating .sheet:has(.campaign-granted){height:auto;min-height:0;overflow:visible}
html[data-motion="reduced"] #scarlet-bag-v30 .campaign-layer{animation:none!important}html[data-motion="reduced"] #scarlet-bag-v30 .campaign-victory-stage{opacity:1;transition:none}
@media(max-height:500px){#scarlet-bag-v30 .campaign-choice-art{height:48px}#scarlet-bag-v30 .campaign-choice-description{min-height:0}}
/* Sky extension contains only sky; do not repeat the square field's horizon. */
#scarlet-bag-v30 .campaign-ambient-sky:has(.campaign-layer.cloud){background:linear-gradient(#161e2a,#262d38)}
#scarlet-bag-v30 .campaign-ambient-sky:has(.campaign-layer.cloud)>.scene-image,#scarlet-bag-v30 .campaign-ambient-sky:has(.campaign-layer.cloud)>.location-motion{visibility:hidden}
#scarlet-bag-v30 .campaign-field{z-index:2}
#scarlet-bag-v30 .overlay.floating .sheet-head .icon-button{right:0;top:0}
#scarlet-bag-v30 .sheet .campaign-choice-option{display:flex;margin:0}

/* An endless overlapping cloud belt. The visible tile arrangement is identical
   on both sides of the animation loop, with constant leftward velocity. */
#scarlet-bag-v30 .campaign-cloud-window{position:absolute;inset:-14% 0 -30%;overflow:hidden;pointer-events:none;opacity:.8}
#scarlet-bag-v30 .campaign-cloud-window>.cloud{display:flex;width:400%;height:100%;left:0;top:0;animation:campaign-cloud-stream var(--period) linear var(--phase) infinite}
#scarlet-bag-v30 .campaign-cloud-tile{position:relative;flex:0 0 25%;height:100%}
#scarlet-bag-v30 .campaign-cloud-tile>img{position:absolute;left:-22.5%;top:0;width:145%;height:100%;object-fit:fill;max-width:none}
@keyframes campaign-cloud-stream{from{transform:translateX(-25%)}to{transform:translateX(-50%)}}
#scarlet-bag-v30 .campaign-victory-extension{position:absolute;bottom:0;left:0;width:100%;height:auto;max-width:none;pointer-events:none}
#scarlet-bag-v30 .campaign-victory-stage:has(.campaign-victory-extension)>.campaign-background,#scarlet-bag-v30 .campaign-victory-stage:has(.campaign-victory-extension) .campaign-victory-flow{mask-image:linear-gradient(transparent,#000 26px)}
#scarlet-bag-v30 .campaign-victory-stage>.campaign-background{position:relative}
/* Timer and attack share the same column, keeping both centers aligned. */
#scarlet-bag-v30 .boss-detail .boss-attack-row{row-gap:2px}
#scarlet-bag-v30 .boss-detail .boss-attack-row>.boss-timer{grid-column:2;grid-row:1;text-align:center;white-space:nowrap;font-size:10px}
#scarlet-bag-v30 .boss-detail .boss-attack-row>.boss-loot-icons{grid-column:1;grid-row:1 / 3}
#scarlet-bag-v30 .boss-detail .boss-attack-row>.action{grid-column:2;grid-row:2}
#scarlet-bag-v30 .boss-loot-icons .is-collected .reward-tile-art{filter:brightness(.5) saturate(.55)}

/* Approved brass diamonds; the frame itself is supplied by presentation data. */
#scarlet-bag-v30 .diamond-marker .mission-diamond-base{position:absolute;left:50%;top:50%;width:60.83%;height:60.83%;transform:translate(-50%,-50%) rotate(45deg);background:#242126;box-shadow:inset 0 0 0 2px #151313,0 2px 5px #000c;transition:background-color .16s,box-shadow .16s}
#scarlet-bag-v30 .diamond-marker .mission-brass-rim{position:absolute;inset:7%;width:86%;height:86%;pointer-events:none;transition:filter .16s}
#scarlet-bag-v30 .diamond-marker:not(.boss) .medal-symbol{inset:30%;width:40%;height:40%;z-index:1}
#scarlet-bag-v30 .diamond-marker.boss .medal-symbol{inset:5% auto auto 12%;width:76%;height:76%;z-index:1}
#scarlet-bag-v30 .diamond-marker[aria-pressed=true] .medal{filter:drop-shadow(0 2px 3px #000a)}
#scarlet-bag-v30 .diamond-marker[aria-pressed=true] .mission-diamond-base{background:#541f2b;box-shadow:inset 0 0 0 2px #36151d,0 0 10px #bd4f4b66}
#scarlet-bag-v30 .diamond-marker[aria-pressed=true] .mission-brass-rim{filter:brightness(1.13)}
#scarlet-bag-v30 .stat-breakdown{display:flex;flex-wrap:wrap;gap:2px 7px;color:#9e9486;font:11px/1.4 var(--sc-font-ui);font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .stat-bonus.permanent{color:#bda77e}#scarlet-bag-v30 .stat-bonus.temporary{color:#83a994}
#scarlet-bag-v30 .profile-combat .stat{flex-wrap:wrap}#scarlet-bag-v30 .profile-combat .stat-breakdown{flex-basis:100%}
#scarlet-bag-v30 .profile-effects{margin-top:12px;padding-top:9px;border-top:1px solid #665038}
#scarlet-bag-v30 .profile-effects h4{margin:0 0 7px;font:17px var(--sc-font-display);color:#cfb384}
#scarlet-bag-v30 .profile-effects>p{font-size:13px}
#scarlet-bag-v30 .profile-effect{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #57453155}
#scarlet-bag-v30 .effect-icon{width:38px;height:38px;object-fit:contain;flex-shrink:0}
#scarlet-bag-v30 .effect-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;font-size:13px}
#scarlet-bag-v30 .effect-copy>span{font:12px var(--sc-font-ui);color:#83a994}
#scarlet-bag-v30 .effect-timer{font:12px var(--sc-font-ui);color:#bda77e;font-variant-numeric:tabular-nums;flex-shrink:0}

/* Invisible scene interaction stays anchored to the sheep, not the viewport. */
#scarlet-bag-v30 .scene-hotspot,#scarlet-bag-v30 .scene-hotspot:hover,#scarlet-bag-v30 .scene-hotspot:active{position:absolute;z-index:3;margin:0;padding:0;border:0;border-radius:45%;background:transparent;box-shadow:none;touch-action:manipulation;min-width:0;min-height:0;cursor:pointer}
#scarlet-bag-v30 .scene-hotspot:focus-visible{outline:1px solid #8b7547;outline-offset:2px}
#scarlet-bag-v30 .scene-hotspot:active{background:radial-gradient(ellipse,#c9b89225,transparent 70%)}
#scarlet-bag-v30 .location-reveal{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}

#scarlet-bag-v30 .location-world>.poi{z-index:4}

/* A buff is shown beside the resulting value; underlying base stays in data. */
#scarlet-bag-v30 .profile-stat-value{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .profile-stat-value.is-boosted,#scarlet-bag-v30 .stat-boost{color:#79a69f}
#scarlet-bag-v30 .stat-boost{font-size:12px;font-weight:normal}
#scarlet-bag-v30 .profile-effects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
#scarlet-bag-v30 .profile-effect{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 4px;border:0;background:#151b1bcc;border-radius:5px;color:#79a69f;cursor:pointer}
#scarlet-bag-v30 .profile-effect .effect-icon{width:38px;height:38px}
#scarlet-bag-v30 .profile-effect .effect-bonus{position:absolute;right:3px;top:3px;font:12px var(--sc-font-ui);text-shadow:0 1px 3px #000,0 0 3px #000}
#scarlet-bag-v30 .profile-effect .effect-timer{font-size:10px;color:#b8ac93}
#scarlet-bag-v30 .profile-effect:focus-visible{outline:1px solid #79a69f;outline-offset:2px}
#scarlet-bag-v30 .boss-detail.has-portrait-focus .boss-portrait img{width:152%;right:auto;left:calc(50% - var(--portrait-focus-x) * 152%)}
.effect-detail-icon{display:block;width:80px;height:80px;object-fit:contain;margin:0 auto 10px}
.effect-details{text-align:center}
#scarlet-bag-v30 .boss-detail .boss-loot-icons .reward-tile{width:clamp(28px,calc((100% - 15px)/4),44px);min-width:0;height:auto;aspect-ratio:1;flex-shrink:0}
#scarlet-bag-v30 .boss-loot-icons .reward-tile.rarity-surface{border-color:var(--item-rarity,#68543f);background-image:linear-gradient(#0002,#0005),var(--item-background);background-position:center;background-size:100% 100%;background-color:#191719}
/* The opaque story curtain hides the prepared scene until the player closes it. */
#scarlet-bag-v30 .overlay.floating.scene-story{background:#0b0c10;backdrop-filter:none}
#scarlet-bag-v30 .scene-story .close-sheet{display:none}
#scarlet-bag-v30 .scene-story .sheet-head{padding-right:0;text-align:center}
#scarlet-bag-v30 .scene-story-copy{font:16px/1.65 var(--sc-font-display);color:#c7b99f;text-align:center}
#scarlet-bag-v30 .scene-story-copy p{margin:12px 0 18px}
#scarlet-bag-v30 .scene-story-copy .action{display:block;min-width:140px;margin:24px auto 4px}

/* Server-owned treasury entry in the wallet. */
#scarlet-bag-v30 .purse-buy{border:0;background:transparent;box-shadow:none;padding:0;min-width:0;min-height:0;color:inherit;font:inherit;cursor:pointer}
#scarlet-bag-v30 .purse-plus{color:#b29a61;font:14px var(--sc-font-display);margin-left:2px}
#scarlet-bag-v30 .purse-buy:focus-visible{outline:1px solid #a28c58;outline-offset:3px}
#scarlet-bag-v30 .purse-buy{display:flex;align-items:center;gap:4px;text-align:left}
#scarlet-bag-v30 .purse-buy .purse-plus{flex:none;line-height:1}
/* Local map artwork is clipped to a data-defined region, never replacing the city. */
#scarlet-bag-v30 .atlas-detail{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:0}
/* Data-authored optional scene interactions and two-leaf passage gate. */
#scarlet-bag-v30 .scene-hotspot.has-art{opacity:1;z-index:4}
#scarlet-bag-v30 .scene-hotspot.has-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px #c29a56)}
#scarlet-bag-v30 .scene-hotspot.interactive-window:active{background:#cda25844;box-shadow:0 0 10px #cda25888}
#scarlet-bag-v30 .scene-passage-gate{position:absolute;pointer-events:none;perspective:220px;z-index:1;filter:drop-shadow(2px 1px 2px #000b)}
#scarlet-bag-v30 .passage-leaf{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(transparent 14%,#554734 14% 17%,transparent 17% 73%,#554734 73% 76%,transparent 76%),repeating-linear-gradient(90deg,transparent 0 17%,#141315 17% 20%,#76634b 20% 24%,#29241f 24% 28%,transparent 28% 33%);border:1px solid #372e24;transition:transform 1.4s ease-in-out}
#scarlet-bag-v30 .passage-leaf.left{left:0;transform-origin:left center}
#scarlet-bag-v30 .passage-leaf.right{right:0;transform-origin:right center}
#scarlet-bag-v30 .is-open .passage-leaf.left{transform:rotateY(-82deg)}
#scarlet-bag-v30 .is-open .passage-leaf.right{transform:rotateY(82deg)}
#scarlet-bag-v30 .detail .action-row:has(>button:nth-child(2)){gap:6px}
#scarlet-bag-v30 .detail .action-row:has(>button:nth-child(2)) .action{min-width:0;padding-inline:9px;font-size:14px}

/* A personal chronicle: clear conditions, exact progress and distinct rewards. */
#scarlet-bag-v30 .achievement-intro{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;padding:0 0 12px}
#scarlet-bag-v30 .achievement-seal{width:48px;height:52px;object-fit:contain}
#scarlet-bag-v30 .achievement-eyebrow{font:10px/1.5 var(--sc-font-ui);text-transform:uppercase;letter-spacing:2px;color:#b99b68}
#scarlet-bag-v30 .achievement-intro h2{font:19px/1.2 var(--sc-font-display);color:#e1ca9e;margin:5px 0 9px}
#scarlet-bag-v30 .achievement-intro p{font:12px/1.6 var(--sc-font-ui);color:#bfae98;margin:0}
#scarlet-bag-v30 .achievement-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0;border-top:1px solid #8c714b66;border-bottom:1px solid #8c714b66;background:linear-gradient(90deg,transparent,#9d784211,transparent)}
#scarlet-bag-v30 .achievement-summary>div{display:grid;gap:5px;text-align:center;border-right:1px solid #8c714b44}
#scarlet-bag-v30 .achievement-summary>div:last-child{border:0}
#scarlet-bag-v30 .achievement-summary strong{font:21px/1 var(--sc-font-display);color:#dfc18d}
#scarlet-bag-v30 .achievement-summary span{font:10px/1.4 var(--sc-font-ui);color:#c9b9a2}
#scarlet-bag-v30 .achievement-scope{font:11px/1.5 var(--sc-font-ui);color:#b4a28c;margin:10px 0 15px;display:block}
#scarlet-bag-v30 .achievement-search{display:block}
#scarlet-bag-v30 .achievement-search input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #866a475c;border-radius:3px;background:#110b10a6;color:#eadcc5;font:13px var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-search input::placeholder{color:#a49480}
#scarlet-bag-v30 .achievement-filters{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
#scarlet-bag-v30 .achievement-filters button{flex:1 0 auto;min-height:44px;border:1px solid #8c714b44;background:#1a1016;color:#c3b49e;padding:8px;font:12px var(--sc-font-ui);border-radius:3px}
#scarlet-bag-v30 .achievement-filters button[aria-pressed=true]{border-color:#aa8855;background:linear-gradient(#59432c,#33231d);color:#f1d8a6;box-shadow:inset 0 1px #c9a66633}
#scarlet-bag-v30 .achievement-result-count{font:11px var(--sc-font-ui);color:#ab9a83;margin:13px 0}
#scarlet-bag-v30 .achievement-cards{display:grid;gap:9px}
#scarlet-bag-v30 .achievement-card-heading{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center}
#scarlet-bag-v30 .achievement-card-heading .achievement-art{height:46px;width:42px}
#scarlet-bag-v30 .achievement-heading-copy{min-width:0}
#scarlet-bag-v30 .achievement-heading-copy h3{margin:2px 0;font:18px/1.25 var(--sc-font-display);color:#e6cfaa;overflow-wrap:anywhere}
#scarlet-bag-v30 .achievement-state{font:10px/1.4 var(--sc-font-ui);text-transform:uppercase;letter-spacing:1px;color:#b6a182}
#scarlet-bag-v30 .achievement-state.state-reward{color:#f0ca7b}
#scarlet-bag-v30 .achievement-state.state-completed{color:#b6c091}
#scarlet-bag-v30 .achievement-story{font:italic 14px/1.65 var(--sc-font-display);color:#c1af96;margin:12px 0 16px;padding-left:11px;border-left:2px solid #83654077;white-space:pre-line}
#scarlet-bag-v30 .achievement-section-label{margin:0 0 9px;font:10px/1.4 var(--sc-font-ui);letter-spacing:1.4px;text-transform:uppercase;color:#af9161}
#scarlet-bag-v30 .achievement-conditions{margin-top:8px}
#scarlet-bag-v30 .achievement-instruction{font:13px/1.4 var(--sc-font-ui);color:#e1d2bb;margin:0 0 10px;white-space:pre-line}
#scarlet-bag-v30 .achievement-progress{margin-top:7px}
#scarlet-bag-v30 .achievement-progress-label{font:12px/1.5 var(--sc-font-ui);gap:12px;color:#c7b8a0}
#scarlet-bag-v30 .achievement-progress-label strong{font-weight:400;color:#e6d3ae;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .achievement-track{height:6px;margin-top:5px;overflow:hidden;border:1px solid #88704b66;border-radius:8px;background:#100c0dcc;box-shadow:inset 0 1px 3px #0008}
#scarlet-bag-v30 .achievement-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(#bf9d60,#78613f)}
#scarlet-bag-v30 .achievement-card--completed .achievement-track>span{background:linear-gradient(#a1a077,#656647)}
#scarlet-bag-v30 .achievement-list .achievement-rewards{display:flex;align-items:stretch;flex-wrap:wrap;gap:6px 12px;margin:10px 0 0;padding:8px 0 0;border-top:1px solid #88704b33}
#scarlet-bag-v30 .achievement-rewards h4{flex-basis:100%;margin:0;font-size:9px}
#scarlet-bag-v30 .achievement-list .achievement-reward{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;font:12px/1.4 var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-reward>div{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
#scarlet-bag-v30 .achievement-reward strong{font-weight:400;color:#ecd3a1}
#scarlet-bag-v30 .achievement-reward span,#scarlet-bag-v30 .achievement-reward small{font-size:11px;color:#baaa94}
#scarlet-bag-v30 .achievement-rewards .art-icon{width:28px;height:30px;object-fit:contain;flex:none}
#scarlet-bag-v30 .achievement-title-reward{flex:1 1 auto;padding:4px 7px;background:#b7924d0d;border-left:2px solid #af8b5366}
#scarlet-bag-v30 .achievement-title-reward strong{font:14px var(--sc-font-display)}
#scarlet-bag-v30 .achievement-card-footer{margin-top:10px;font:11px/1.5 var(--sc-font-ui);color:#a99880;display:grid;gap:8px}
#scarlet-bag-v30 .achievement-card-footer .button{width:100%;min-height:44px}
#scarlet-bag-v30 .achievement-list .achievement-card--reward{border-color:#b9975c}
#scarlet-bag-v30 .achievement-empty{font:14px/1.7 var(--sc-font-display);color:#bfae98;padding:26px 12px;text-align:center}
#scarlet-bag-v30 .profile-toolbar .achievements-button{width:100%;height:auto;min-height:52px;gap:10px;padding:4px 8px;background:linear-gradient(90deg,#ab854515,transparent);text-align:left;font:16px var(--sc-font-display)}
#scarlet-bag-v30 .profile-toolbar .achievements-button .art-icon{width:40px;height:42px}
#scarlet-bag-v30 .profile-toolbar .achievements-button:after{content:'›';margin-left:auto;font:24px var(--sc-font-display);color:#b99b68}
@media(max-width:360px){#scarlet-bag-v30 .achievement-list .achievement-row{padding:12px}#scarlet-bag-v30 .achievement-intro{grid-template-columns:48px minmax(0,1fr);gap:10px}#scarlet-bag-v30 .achievement-seal{width:48px;height:60px}#scarlet-bag-v30 .achievement-intro h2{font-size:20px}#scarlet-bag-v30 .achievement-filters button{font-size:11px;padding:6px}}
/* Longer district boss names must leave room for HP on narrow phones. */
@media(max-width:370px){#scarlet-bag-v30 .boss-detail .boss-name{font-size:15px;line-height:1.12}}

/* Compact achievement stages: thresholds retain their lifetime meaning. */
#scarlet-bag-v30 .achievement-type{display:block;color:#ae9b83;font:10px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-lore{margin-top:4px}
#scarlet-bag-v30 .achievement-lore summary{cursor:pointer;color:#b9a386;font:11px/1.4 var(--sc-font-ui);padding:7px 0;width:fit-content}
#scarlet-bag-v30 .achievement-lore .achievement-story{margin:3px 0 8px;font-size:13px;line-height:1.5}
#scarlet-bag-v30 .achievement-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;list-style:none;margin:5px 0 9px;padding:0}
#scarlet-bag-v30 .achievement-stages li{display:grid;justify-items:center;gap:4px;border-bottom:2px solid #5c494344;padding:5px 1px;color:#968674;font:11px/1.3 var(--sc-font-ui);min-width:0}
#scarlet-bag-v30 .achievement-stage-mark{width:20px;height:20px;display:grid;place-items:center;border:1px solid #80674666;border-radius:50%;font-size:10px}
#scarlet-bag-v30 .achievement-stages strong{font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .achievement-stages .is-complete{color:#a9b58c;border-color:#70794c}
#scarlet-bag-v30 .achievement-stages .is-current{color:#f0d4a3;border-color:#c09a5b;background:linear-gradient(transparent,#b58b3620)}
#scarlet-bag-v30 .is-current .achievement-stage-mark{border-color:#c09a5b;background:#89663233}
#scarlet-bag-v30 .profile-special{align-self:flex-start;margin:4px 0;font-size:13px}
#scarlet-bag-v30 .duel-control-status{position:absolute;inset:auto 0 12px;text-align:center;font-size:15px;color:#b1c9c2;text-shadow:0 1px 4px #000}
#scarlet-bag-v30 .duel-exchange.is-skipped{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#bdc9c4}
#scarlet-bag-v30 .duel-block.is-dodged .duel-impact strong{font-size:14px;color:#b1c9c2}
#scarlet-bag-v30 .duel-block .duel-control-note{position:absolute;inset:auto 0 1px;text-align:center;font-size:10px;line-height:1.1;color:#b1c9c2;text-shadow:0 1px 3px #000}

/* One compact disclosure row; details and claim buttons remain separate. */
#scarlet-bag-v30 .achievement-list .achievement-row{padding:0;overflow:hidden}
#scarlet-bag-v30 .achievement-row>summary{list-style:none;cursor:pointer;min-height:62px;padding:9px 10px;display:grid;grid-template-columns:30px minmax(0,1fr) auto 15px 10px;gap:8px;align-items:center;user-select:none}
#scarlet-bag-v30 .achievement-row>summary::-webkit-details-marker{display:none}
#scarlet-bag-v30 .achievement-row>summary:hover{background:#b79a5910}
#scarlet-bag-v30 .achievement-row>summary:focus-visible{outline:2px solid #d4b77d;outline-offset:-3px}
#scarlet-bag-v30 .achievement-card-heading .achievement-art{width:30px;height:34px;align-self:center}
#scarlet-bag-v30 .achievement-heading-copy h3{font-size:15px;line-height:1.25;margin:0 0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#scarlet-bag-v30 .achievement-card-heading .achievement-state{display:block;text-transform:none;letter-spacing:0;font:10px/1.3 var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-inline-progress{display:grid;gap:5px;min-width:48px;max-width:96px;color:#d9c5a2;font:11px/1.2 var(--sc-font-ui);font-variant-numeric:tabular-nums;text-align:right}
#scarlet-bag-v30 .achievement-inline-progress strong{font-weight:400;overflow-wrap:anywhere}
#scarlet-bag-v30 .achievement-inline-track{height:3px;background:#0b080b;border-radius:3px;overflow:hidden}
#scarlet-bag-v30 .achievement-inline-track>span{display:block;height:100%;background:#ad8b52}
#scarlet-bag-v30 .achievement-earned-mark{font:17px var(--sc-font-display);color:#756754;text-align:center}
#scarlet-bag-v30 .achievement-earned-mark.is-earned{color:#bdc695}
#scarlet-bag-v30 .achievement-card--reward .achievement-earned-mark{color:#e3bd71}
#scarlet-bag-v30 .achievement-chevron{font:22px var(--sc-font-display);color:#b79a68;transition:transform .16s}
#scarlet-bag-v30 .achievement-row[open] .achievement-chevron{transform:rotate(90deg)}
#scarlet-bag-v30 .achievement-body{padding:0 12px 12px;border-top:1px solid #88704b33}
#scarlet-bag-v30 .achievement-body .achievement-story{margin:10px 0;font-size:13px;line-height:1.5}
@media(max-width:360px){#scarlet-bag-v30 .achievement-row>summary{grid-template-columns:25px minmax(0,1fr) auto 12px 8px;gap:5px;padding:9px 8px}#scarlet-bag-v30 .achievement-card-heading .achievement-art{width:25px;height:30px}#scarlet-bag-v30 .achievement-heading-copy h3{font-size:14px}#scarlet-bag-v30 .achievement-inline-progress{min-width:40px;max-width:70px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .achievement-chevron{transition:none}}

#scarlet-bag-v30 .achievement-stages{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
#scarlet-bag-v30 .achievement-hidden>.achievement-card-heading{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px;min-height:62px;align-items:center}
#scarlet-bag-v30 .achievement-hidden .achievement-art{opacity:.55}
#scarlet-bag-v30 .achievement-hidden h3{white-space:normal}
#scarlet-bag-v30 .achievement-row[open] .achievement-heading-copy h3{white-space:normal}

/* Achievements keep their controls in view and scroll only the entries. */
#scarlet-bag-v30 .achievement-list{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
#scarlet-bag-v30 .achievement-list> :not(.achievement-cards){flex-shrink:0}
#scarlet-bag-v30 .achievement-cards{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;overscroll-behavior-y:contain;touch-action:pan-y;padding-right:4px;scroll-padding-block:8px}
#scarlet-bag-v30 .achievement-cards:focus-visible{outline:1px solid #ad8b52;outline-offset:-1px}
#scarlet-bag-v30 .overlay:has(.achievement-list){height:var(--game-height,100dvh);overflow:hidden}
#scarlet-bag-v30 .sheet:has(.achievement-list){display:flex;flex-direction:column;height:100%;min-height:0;max-height:100%;overflow:hidden;box-sizing:border-box}
#scarlet-bag-v30 .sheet:has(.achievement-list) .sheet-head{flex-shrink:0}
#scarlet-bag-v30 #sheet-content:has(.achievement-list){flex:1;min-height:0;overflow:hidden}
@media(max-height:650px){#scarlet-bag-v30 .achievement-intro{padding-bottom:5px}#scarlet-bag-v30 .achievement-intro h2{font-size:16px;margin:2px 0}#scarlet-bag-v30 .achievement-seal{height:36px}#scarlet-bag-v30 .achievement-summary{padding:6px 0}#scarlet-bag-v30 .achievement-scope{margin:5px 0;font-size:10px}#scarlet-bag-v30 .achievement-result-count{margin:7px 0}}

#scarlet-bag-v30 .achievement-cards{grid-template-columns:minmax(0,1fr)}
#scarlet-bag-v30 .achievement-cards>.achievement-row{min-width:0}
#scarlet-bag-v30 .achievement-row:not([open])>.achievement-body{display:none}
#scarlet-bag-v30 .achievement-chevron{display:block;width:5px;height:5px;box-sizing:border-box;font-size:0;border-right:1px solid #b79a68;border-bottom:1px solid #b79a68;transform:rotate(-45deg);justify-self:center}
#scarlet-bag-v30 .achievement-row[open] .achievement-chevron{transform:rotate(45deg)}
#scarlet-bag-v30 .achievement-cards{grid-auto-rows:max-content}

/* A single compact strip; each stage reveals only its own reward. */
#scarlet-bag-v30 .achievement-stages{display:flex;gap:3px;margin:5px 0 7px;padding:0 0 3px;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
#scarlet-bag-v30 .achievement-stages li{display:block;flex:0 0 44px;min-width:44px;padding:0;border:0;background:none}
#scarlet-bag-v30 .achievement-stage-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:44px;padding:3px 2px;background:transparent;border:0;border-bottom:2px solid #5c494344;border-radius:0;color:inherit;cursor:pointer;font:11px/1.1 var(--sc-font-ui)}
#scarlet-bag-v30 .achievement-stage-button[aria-pressed=true]{background:#af873222;border-bottom-color:#d0ac68;color:#ebd4a5}
#scarlet-bag-v30 .achievement-stage-button:focus-visible{outline:1px solid #d0ac68;outline-offset:-2px}
#scarlet-bag-v30 .achievement-stage-mark{width:15px;height:15px;font-size:9px}
#scarlet-bag-v30 .achievement-stages .is-complete .achievement-stage-button{color:#b1bf91}
#scarlet-bag-v30 .achievement-stage-caption{font:11px/1.4 var(--sc-font-ui);color:#b6a389;margin:9px 0 0}
#scarlet-bag-v30 .achievement-stage-reward-panel .achievement-rewards{margin-top:5px;padding-top:6px}
#scarlet-bag-v30 .achievement-equipment-reward .art-icon{width:42px;height:44px}

/* Approved header 14: age on the experience ring, rank below, title above name. */
#scarlet-bag-v30 .hud{grid-template-columns:32% minmax(0,1fr);gap:0 8px;min-height:0;padding:5px 8px;border-width:5px;border-image-width:5px}
#scarlet-bag-v30 .hud-person{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:5px;padding-right:8px;min-width:0}
#scarlet-bag-v30 .hud-ring-portrait{position:relative;isolation:isolate;width:96px;height:96px;flex-shrink:0}
#scarlet-bag-v30 .hud .portrait{position:absolute;inset:0;width:100%;height:100%;margin:0}
#scarlet-bag-v30 .hud .portrait-cut{inset:10%}
#scarlet-bag-v30 .hud .portrait-frame{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);z-index:1}
#scarlet-bag-v30 .hud .hud-clan{right:4px;bottom:5px;width:25px;height:30px;z-index:3}
#scarlet-bag-v30 .hud-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2;pointer-events:none;z-index:2}
#scarlet-bag-v30 .hud-ring-track{stroke:#443623}
#hud-ring-progress{stroke:#c6a262;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:center}
#scarlet-bag-v30 .hud-age-badge{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:grid;place-items:center;min-width:25px;padding:4px 5px 0;border:1px solid #8c7045;border-radius:8px;background:#27151b;color:#ddc293;font:12px/13px var(--sc-font-display);font-variant-numeric:lining-nums tabular-nums;text-align:center;white-space:nowrap;z-index:4;pointer-events:none}
#scarlet-bag-v30 .hud-portrait-meta{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:13px}
#scarlet-bag-v30 .hud-rank{font:13px/13px var(--sc-font-display);color:#d9bf8b;white-space:nowrap}
#scarlet-bag-v30 .hud-core{grid-column:2;grid-row:1;align-self:center;padding-top:1px}
#scarlet-bag-v30 .hud-identity{padding-right:24px;min-width:0}
#scarlet-bag-v30 .hud-nickname{font:17px/19px var(--sc-font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scarlet-bag-v30 .hud-title{display:block;width:100%;min-width:0;border:0;background:none;padding:0;text-align:left;color:#b59a6b;font:10px/13px var(--sc-font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scarlet-bag-v30 .hud-tools{position:absolute;right:6px;top:5px}
#scarlet-bag-v30 .hud .settings-button{width:23px;height:23px;padding:4px}
#scarlet-bag-v30 .hud .meters{gap:5px;margin-top:5px}
#scarlet-bag-v30 .hud .resource-row{grid-template-columns:12px minmax(12px,1fr) minmax(41px,max-content);gap:3px;height:15px}
#scarlet-bag-v30 .hud .resource-row .art-icon{width:12px;height:15px}
#scarlet-bag-v30 .hud .meter{height:11px}
#scarlet-bag-v30 .hud .resource-number{font:10px/13px var(--sc-font-ui);text-align:right;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .hud .purse{position:relative;grid-column:2;grid-row:2;display:flex;align-items:center;align-self:end;justify-content:space-between;gap:3px;border-top:1px solid #9f7d4859;margin-top:5px;padding:5px 26px 2px 0;min-width:0;min-height:29px}
#scarlet-bag-v30 .hud .purse-row{display:flex;flex:0 1 auto;justify-content:flex-start;align-items:center;gap:2px;height:21px;min-width:0;padding:0;font:11px/14px var(--sc-font-ui)}
#scarlet-bag-v30 .hud .purse-row .art-icon{width:18px;height:20px;flex-shrink:0}
#scarlet-bag-v30 .hud .purse-number{font-variant-numeric:tabular-nums}
/* The wallet pouch opens top-up with the bag wallet as its return destination. */
#scarlet-bag-v30 .hud .hud-wallet-add{position:absolute;right:-2px;top:2px;width:26px;height:28px;display:grid;place-items:center;border:0;border-radius:3px;background:none;padding:0;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
#scarlet-bag-v30 .hud .hud-wallet-add img{width:22px;height:23px;object-fit:contain;filter:saturate(.65) brightness(.85);pointer-events:none;transition:filter .15s,transform .15s}
@media(hover:hover){#scarlet-bag-v30 .hud .hud-wallet-add:hover:not(:disabled) img{filter:saturate(.7) brightness(1.1)}}
#scarlet-bag-v30 .hud .hud-wallet-add:active:not(:disabled) img{transform:translateY(1px);filter:brightness(.75)}
#scarlet-bag-v30 .hud .hud-wallet-add:focus-visible{outline:1px solid #e7c68a;outline-offset:1px}
#scarlet-bag-v30 .hud .hud-wallet-add:disabled{opacity:.4;cursor:default}
@media(max-width:370px){
 #scarlet-bag-v30 .hud{padding-left:6px;padding-right:6px;column-gap:6px}
 #scarlet-bag-v30 .hud-person{padding-right:5px}
 #scarlet-bag-v30 .hud-ring-portrait{width:82px;height:82px}
 #scarlet-bag-v30 .hud-nickname{font-size:16px}
 #scarlet-bag-v30 .hud-title{font-size:9px}
 #scarlet-bag-v30 .hud .purse{gap:2px;padding-right:24px}
 #scarlet-bag-v30 .hud .purse-row{font-size:10px}
 #scarlet-bag-v30 .hud .purse-row .art-icon{width:14px;height:17px}
 #scarlet-bag-v30 .hud .hud-wallet-add{width:24px}
 #scarlet-bag-v30 .hud .resource-row{grid-template-columns:11px minmax(10px,1fr) minmax(37px,max-content);gap:2px}
 #scarlet-bag-v30 .hud .resource-number{font-size:9px}
}
@media(max-height:740px){
 #scarlet-bag-v30 .hud{padding-top:3px;padding-bottom:3px;border-top-width:4px;border-bottom-width:4px}
 #scarlet-bag-v30 .hud-ring-portrait{width:72px;height:72px}
 #scarlet-bag-v30 .hud-nickname{font-size:15px;line-height:17px}
 #scarlet-bag-v30 .hud-title{font-size:9px;line-height:11px}
 #scarlet-bag-v30 .hud .meters{gap:3px;margin-top:3px}
 #scarlet-bag-v30 .hud .resource-row{height:13px}
 #scarlet-bag-v30 .hud .purse{min-height:25px;margin-top:3px;padding-top:3px}
 #scarlet-bag-v30 .hud .purse-row{height:19px}
 #scarlet-bag-v30 .hud .hud-wallet-add{top:0}
 #scarlet-bag-v30 .hud-tools{top:3px}
}

/* Rating comes from the server; the last rank has no fictitious next threshold. */
#scarlet-bag-v30 .hud-rank{display:flex;align-items:baseline;justify-content:center;gap:4px}
#scarlet-bag-v30 .hud-rank-percent{font:9px/12px var(--sc-font-ui);color:#ac9573;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .profile-rating{width:100%;margin-top:5px}
#scarlet-bag-v30 .profile-rating-label{font:9px/13px var(--sc-font-ui);color:#bba47e;text-align:center;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .profile-rating .meter{height:10px;margin-top:2px}
#scarlet-bag-v30 .profile-rating .meter-fill{background:linear-gradient(#c6a262,#77603e)}
#scarlet-bag-v30 .duel-rating-change{font:13px/18px var(--sc-font-display);color:#d9bf8b}

/* Preserve the compact boss card and use its reward layout for missions. */
#scarlet-bag-v30 .city-page:has(>.scene){--field-panel-height:252px}
#scarlet-bag-v30 .city-page>.mission-detail>.description{scrollbar-width:var(--sc-scrollbar-width);font:14px/21px var(--sc-font-ui);color:#ddcebb;overscroll-behavior:contain}
#scarlet-bag-v30 .city-page>.mission-detail>.description::-webkit-scrollbar{display:block}
#scarlet-bag-v30 .mission-detail .stage-group .segments{height:20px;margin-top:2px}
#scarlet-bag-v30 .detail>.activity-rewards{justify-content:space-between;gap:9px}
#scarlet-bag-v30 .detail>.activity-rewards .cost{margin-right:0}

/* Clan battle gateway: a brass standard above the full-width heading divider. */
#scarlet-bag-v30 .hunt-page .campaign-entry{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;width:176px;max-width:176px;min-height:48px;height:48px;padding:3px 13px 3px 6px;border:0;border-radius:0;background:linear-gradient(90deg,#30162005,#301620c9 35%,#1a1016aa);box-shadow:none;color:#dec59d;text-align:left;cursor:pointer}
#scarlet-bag-v30 .hunt-page .campaign-entry::before{content:'';position:absolute;z-index:-1;inset:3px 0 3px 22px;border-block:1px solid #9b794f55;background:none;transform:none;pointer-events:none}
#scarlet-bag-v30 .hunt-page .campaign-entry::after{content:'';position:absolute;right:3px;top:21px;width:5px;height:5px;border-top:1px solid #a78957;border-right:1px solid #a78957;transform:rotate(45deg);background:none;pointer-events:none}
#scarlet-bag-v30 .campaign-entry-mark{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;isolation:isolate}
#scarlet-bag-v30 .campaign-entry-mark::before{content:'';position:absolute;inset:3px;z-index:-1;transform:rotate(45deg);border:1px solid #a38350;background:linear-gradient(135deg,#4d3730,#25161d 55%,#130d13);box-shadow:inset 0 0 0 2px #21131a,inset 0 0 0 3px #94734655,0 2px 6px #0009}
#scarlet-bag-v30 .campaign-entry-mark img{width:28px;height:28px;object-fit:contain;filter:brightness(.78) saturate(.7) drop-shadow(0 1px 1px #000)}
#scarlet-bag-v30 .hunt-page .campaign-entry-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px;font:14px/17px var(--sc-font-display)}
#scarlet-bag-v30 .hunt-page .campaign-entry-copy>strong{white-space:nowrap;font-weight:normal;text-shadow:0 1px 3px #000}
#scarlet-bag-v30 .hunt-page .campaign-entry-copy>.campaign-countdown{display:flex;align-items:center;gap:5px;font:10px/13px var(--sc-font-ui);font-variant-numeric:tabular-nums;color:#b9a589}
#scarlet-bag-v30 .hunt-page .campaign-entry.is-available .campaign-countdown{color:#94b7aa}
#scarlet-bag-v30 .hunt-page .campaign-entry.is-available .campaign-countdown::before{content:'';width:4px;height:4px;flex:none;transform:rotate(45deg);background:#91b4a7;box-shadow:0 0 6px #86ad9866}
#scarlet-bag-v30 .hunt-page .campaign-entry.is-available .campaign-entry-mark::before{border-color:#b5955d;box-shadow:inset 0 0 0 2px #21131a,inset 0 0 0 3px #94734655,0 0 10px #b08d4829}
#scarlet-bag-v30 .hunt-page .campaign-entry:hover{background:linear-gradient(90deg,#30162005,#49222dde 35%,#21121aba)}
#scarlet-bag-v30 .hunt-page .campaign-entry:focus-visible{outline:1px solid #b99b65;outline-offset:3px}
#scarlet-bag-v30 .hunt-page .campaign-entry:active .campaign-entry-mark{transform:scale(.96)}
@media(max-width:350px){#scarlet-bag-v30 .hunt-page .campaign-entry{width:161px;max-width:161px;gap:7px;padding-left:4px}#scarlet-bag-v30 .hunt-page .campaign-entry-copy{font-size:13px}}

/* City and Hunt use the same wine, brass and typography as the catalogue. */
#scarlet-bag-v30 #content>.atlas-page,#scarlet-bag-v30 #content>.city-page:has(>.scene){background:linear-gradient(#29151dee,#180c13f5),var(--art-wine)}
#scarlet-bag-v30 .atlas-page>.atlas-map{border-color:#98764855;background:#1d131b}
#scarlet-bag-v30 .atlas-page .atlas-heading{background:linear-gradient(#21121ce8,#1c131c99 62%,transparent);padding-top:12px;padding-bottom:9px}
#scarlet-bag-v30 .atlas-page .atlas-heading h2{font:25px/1.2 var(--sc-font-display);color:#ead4b0}
#scarlet-bag-v30 .atlas-page .atlas-subtitle{font:11px/15px var(--sc-font-ui);color:#baa68e}
#scarlet-bag-v30 .atlas-page>.atlas-card{margin:5px 7px 8px;padding:13px 14px;border:1px solid #98764899;border-image:none;border-radius:8px;background:linear-gradient(#321921ee,#180c13f5),var(--art-wine);box-shadow:0 3px 12px #0003;color:#e6d0ac}
#scarlet-bag-v30 .atlas-page>.atlas-card::before,#scarlet-bag-v30 .atlas-page>.atlas-card::after{display:none}
#scarlet-bag-v30 .atlas-page .district-top h3,#scarlet-bag-v30 .atlas-page .hunt-name{font:21px/1.2 var(--sc-font-display);color:#e6c99c}
#scarlet-bag-v30 .atlas-page .district-description{font:14px/1.45 var(--sc-font-ui);color:#d0beaa;margin:8px 0}
#scarlet-bag-v30 .atlas-page .district-bottom,#scarlet-bag-v30 .atlas-page .hunt-action{border-top:1px solid #99784940;padding-top:9px}
#scarlet-bag-v30 .atlas-page .district-tags,#scarlet-bag-v30 .atlas-page .hunt-meta{color:#b29b87;font:11px/1.4 var(--sc-font-ui)}
#scarlet-bag-v30 .atlas-page .atlas-empty{padding:12px 18px}
#scarlet-bag-v30 .atlas-page .atlas-empty h3{font:20px/1.25 var(--sc-font-display);color:#dbc39e}
#scarlet-bag-v30 .atlas-page .atlas-empty p{font:13px/1.5 var(--sc-font-ui);color:#b9a48f;max-width:290px;margin:9px auto 0}
#scarlet-bag-v30 .atlas-page .atlas-point-face{background:linear-gradient(140deg,#49342c,#26161e 58%,#180f17);border-color:#987b50;box-shadow:inset 0 0 0 2px #20121a,inset 0 0 0 3px #92734b35,0 2px 5px #000b}
#scarlet-bag-v30 .atlas-page .atlas-point[aria-pressed=true] .atlas-point-face{background:linear-gradient(140deg,#664332,#38202a 60%,#211219);border-color:#c1a06a;box-shadow:inset 0 0 0 2px #28171d,0 0 9px #b692514d}
#scarlet-bag-v30 .atlas-page .atlas-point:focus-visible{outline:1px solid #c1a06a;outline-offset:3px;border-radius:50%}
#scarlet-bag-v30 .atlas-page .atlas-point .district-art{filter:brightness(.9) saturate(.8)}
#scarlet-bag-v30 .atlas-page .field-refresh{min-height:40px;font-size:13px;filter:saturate(.8)}
#scarlet-bag-v30 .atlas-page .hunt-avatar>img{border-color:#987b50;border-radius:3px}
@media(max-width:350px){#scarlet-bag-v30 .atlas-page .atlas-heading h2{font-size:23px}#scarlet-bag-v30 .atlas-page>.atlas-card{padding:10px}#scarlet-bag-v30 .atlas-page .district-description{font-size:13px}}
/* The source is a standalone brass relief; it supplies its own silhouette. */
#scarlet-bag-v30 .hunt-page .campaign-entry-mark{width:40px;height:40px}
#scarlet-bag-v30 .hunt-page .campaign-entry-mark img{width:40px;height:40px;filter:brightness(.86) saturate(.72) drop-shadow(0 2px 2px #000a)}
#scarlet-bag-v30 .hunt-page .campaign-entry-mark::before{inset:0;transform:none;border:0;background:radial-gradient(ellipse,#ad884016,transparent 70%);box-shadow:none}
#scarlet-bag-v30 .hunt-page .campaign-entry.is-available .campaign-entry-mark::before{border:0;box-shadow:none;background:radial-gradient(ellipse,#ad88402b,transparent 72%)}

/* Aether Source shares the City/Hunt frame without changing the retained scene. */
#scarlet-bag-v30 .campaign-page{background:linear-gradient(#29151dee,#180c13f5),var(--art-wine)}
#scarlet-bag-v30 .campaign-page .campaign-scene{border-color:#98764855}
#scarlet-bag-v30 .campaign-page .campaign-heading{background:linear-gradient(#21121ce8,#1c131c99 62%,transparent);padding-top:12px;padding-bottom:9px}
#scarlet-bag-v30 .campaign-page .campaign-heading h2{font:25px/1.2 var(--sc-font-display);color:#ead4b0}
#scarlet-bag-v30 .campaign-page .campaign-heading .field-heading-copy>p{font:11px/15px var(--sc-font-ui);color:#baa68e}
#scarlet-bag-v30 .campaign-combat-panel{margin:5px 7px 8px}
#scarlet-bag-v30 .campaign-combat-panel>.campaign-scales,#scarlet-bag-v30 .campaign-combat-panel .opponent-card,#scarlet-bag-v30 .campaign-page>.campaign-results{border:1px solid #98764899;border-image:none;border-radius:8px;background:linear-gradient(#321921ee,#180c13f5),var(--art-wine);box-shadow:0 3px 12px #0003;color:#e6d0ac;padding:13px 14px}
#scarlet-bag-v30 .campaign-combat-panel .opponent-card::before,#scarlet-bag-v30 .campaign-combat-panel .opponent-card::after,#scarlet-bag-v30 .campaign-page>.campaign-results::before,#scarlet-bag-v30 .campaign-page>.campaign-results::after{display:none}
#scarlet-bag-v30 .campaign-combat-panel .hunt-name{font:21px/1.2 var(--sc-font-display);color:#e6c99c}
#scarlet-bag-v30 .campaign-combat-panel .hunt-meta{gap:5px 10px;margin-top:5px;color:#b29b87;font:11px/1.4 var(--sc-font-ui)}
#scarlet-bag-v30 .campaign-combat-panel .hunt-avatar>img{border-color:#987b50;border-radius:3px}
#scarlet-bag-v30 .campaign-combat-panel .hunt-action{border-top:1px solid #99784940;padding-top:9px}
#scarlet-bag-v30 .campaign-combat-panel .hunt-vitals{padding:8px 0}
#scarlet-bag-v30 .campaign-combat-panel .opponent-card-close{width:32px;height:32px;min-height:32px;right:3px;top:3px;color:#bd9d70;font:25px Arial}
#scarlet-bag-v30 .campaign-page .campaign-scale-row{grid-template-columns:25px minmax(0,1fr);gap:10px}
#scarlet-bag-v30 .campaign-page .campaign-crest{width:25px;height:28px}
#scarlet-bag-v30 .campaign-page .campaign-crest-art{transform:scale(.459)}
#scarlet-bag-v30 .campaign-page .campaign-scale{height:15px;padding:2px;border:1px solid #96764899;border-radius:9px;background:#120d13;box-shadow:inset 0 1px 3px #0009}
#scarlet-bag-v30 .campaign-page .campaign-scale::before{display:none}
#scarlet-bag-v30 .campaign-page .campaign-scale-fill{filter:saturate(.65) brightness(.82);border-radius:6px}
#scarlet-bag-v30 .campaign-page .campaign-scale-number{font-size:11px;line-height:13px;color:#e9dcc5}
#scarlet-bag-v30 .campaign-page .campaign-coin{border-color:#987b50;box-shadow:inset 0 0 0 2px #20121a,0 2px 5px #000b}
#scarlet-bag-v30 .campaign-page .campaign-marker[aria-pressed=true] .campaign-coin{filter:brightness(1.08) drop-shadow(0 0 5px #b6925180)}
#scarlet-bag-v30 .campaign-page .field-refresh{min-height:40px;font-size:13px;filter:saturate(.8)}
#scarlet-bag-v30 .campaign-page>.campaign-results{display:flex;flex-direction:column;margin:5px 7px 8px;padding:7px 12px 3px;overflow:hidden}
#scarlet-bag-v30 .campaign-result-tabs{flex:none;gap:0;margin:0 0 5px;border-bottom:1px solid #99784940}
#scarlet-bag-v30 .campaign-result-tabs button{min-height:30px;padding:4px 2px;font:12px/18px var(--sc-font-ui);border:1px solid transparent;color:#ad9680}
#scarlet-bag-v30 .campaign-result-tabs button[aria-selected=true]{border-color:#94704570;background:#94704518;color:#ead4aa}
#scarlet-bag-v30 .campaign-result-tabs button::before,#scarlet-bag-v30 .campaign-result-tabs button::after{display:none}
#scarlet-bag-v30 .campaign-result-window{flex:1;min-height:0}
#scarlet-bag-v30 .campaign-result-track{height:100%}
#scarlet-bag-v30 .campaign-result-page{min-height:0;overflow-y:auto;scrollbar-width:none}
#scarlet-bag-v30 .campaign-history>.campaign-scales{height:100%;min-height:0;grid-template-rows:repeat(5,minmax(0,1fr));gap:1px;padding:0;border-radius:0;box-shadow:none}
#scarlet-bag-v30 .campaign-history .campaign-crest{width:22px;height:25px}
#scarlet-bag-v30 .campaign-history .campaign-crest-art{transform:scale(.407)}
#scarlet-bag-v30 .campaign-results>.spell-page-rail{flex:none;height:22px;min-height:22px;margin:2px 0 0}
#scarlet-bag-v30 .campaign-results>.spell-page-rail .spell-page-stop{min-height:0;height:100%}
#scarlet-bag-v30 .campaign-ranking{height:100%;align-items:center}
#scarlet-bag-v30 .campaign-player-portrait{width:56px;border-radius:3px}
#scarlet-bag-v30 .campaign-contribution{margin-top:6px;padding:3px 2px;border-top-color:#99784940;background:none}
#scarlet-bag-v30 .campaign-winner{border-color:#98764899;border-radius:5px;background:linear-gradient(100deg,#321921f2,#180c13f5);box-shadow:0 2px 6px #0009}
#scarlet-bag-v30 .campaign-winner-frame:before{background:linear-gradient(135deg,#ba9a65,#816238 35%,#463121 58%,#a48351)}
#scarlet-bag-v30 .overlay .sheet:has(.campaign-choice,.campaign-granted,.campaign-rules){border:1px solid #a58150;border-image:none;border-radius:8px;background:linear-gradient(#321921ee,#180c13f5),var(--art-wine);box-shadow:0 12px 48px #000a;padding:14px;max-width:424px;max-height:calc(100% - 24px);overflow-x:hidden;overflow-y:auto}
#scarlet-bag-v30 .overlay .sheet:has(.campaign-choice,.campaign-granted,.campaign-rules)::before,#scarlet-bag-v30 .overlay .sheet:has(.campaign-choice,.campaign-granted,.campaign-rules)::after{display:none}
#scarlet-bag-v30 .sheet .campaign-choice-option{padding:8px 4px;background:linear-gradient(#38202a80,#1d101880);border:1px solid #98764870;border-radius:3px;box-shadow:none;font:12px/16px var(--sc-font-display)}
#scarlet-bag-v30 .sheet .campaign-choice-option::before,#scarlet-bag-v30 .sheet .campaign-choice-option::after{display:none}
#scarlet-bag-v30 .sheet .campaign-choice-option[aria-checked=true]{border-color:#c1a06a;background:#94704520;box-shadow:inset 0 0 12px #a3814118}
#scarlet-bag-v30 .campaign-choice-description,#scarlet-bag-v30 .campaign-rules p{font:13px/1.5 var(--sc-font-ui);color:#d0beaa}
@media(max-width:350px){#scarlet-bag-v30 .campaign-page .campaign-heading h2{font-size:23px}#scarlet-bag-v30 .campaign-combat-panel>.campaign-scales,#scarlet-bag-v30 .campaign-combat-panel .opponent-card{padding:10px}#scarlet-bag-v30 .campaign-combat-panel .hunt-name{font-size:19px}}

/* Named clan scores: stable rows and a separate animated score column. */
#scarlet-bag-v30 .campaign-combat-panel>.campaign-scales{padding:9px 12px;gap:1px}
#scarlet-bag-v30 .campaign-page .campaign-scale-row{grid-template-columns:36px minmax(0,1fr) minmax(24px,max-content);gap:10px;min-height:0;padding:0 4px;border-radius:4px}
#scarlet-bag-v30 .campaign-page .campaign-scale-row>.campaign-crest{width:36px;height:40px;filter:drop-shadow(0 2px 2px #0009)}
#scarlet-bag-v30 .campaign-page .campaign-scale-row .campaign-crest-art{transform:scale(.66)}
#scarlet-bag-v30 .campaign-scale-row .campaign-crest-outline{stroke:#af8c59;stroke-width:1.5}
#scarlet-bag-v30 .campaign-scale-content{display:flex;flex-direction:column;gap:4px;min-width:0}
#scarlet-bag-v30 .campaign-scale-name{display:flex;align-items:baseline;gap:8px;min-width:0;font:13px/16px var(--sc-font-display);color:#d9c4a6;white-space:nowrap}
#scarlet-bag-v30 .campaign-page .campaign-scale-content>.campaign-scale{height:9px;padding:1px;border-color:#896d4677;border-radius:5px}
#scarlet-bag-v30 .campaign-page .campaign-scale-row>.campaign-scale-number{position:static;inset:auto;min-width:24px;font:16px/20px var(--sc-font-ui);font-variant-numeric:tabular-nums;text-align:right;justify-items:end;color:#ead8b7}
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row{grid-template-columns:28px minmax(0,1fr) minmax(24px,max-content);gap:8px}
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row>.campaign-crest{width:28px;height:31px}
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row .campaign-crest-art{transform:scale(.51)}
#scarlet-bag-v30 .campaign-history .campaign-scale-content{gap:2px}
#scarlet-bag-v30 .campaign-history .campaign-scale-name{font-size:12px;line-height:14px}
@media(max-width:350px){#scarlet-bag-v30 .campaign-page .campaign-scale-row{gap:7px}#scarlet-bag-v30 .campaign-scale-name{gap:5px}}

/* Shared brass mission diamonds for city, hunt and clan battlefield markers. */
#scarlet-bag-v30 .atlas-page .atlas-point-face{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate}
#scarlet-bag-v30 .atlas-page .atlas-point-face::before{content:'';position:absolute;inset:16%;transform:rotate(45deg);background:#242126;box-shadow:0 2px 5px #000b;z-index:-1}
#scarlet-bag-v30 .atlas-page .atlas-point-face::after,#scarlet-bag-v30 .campaign-page .campaign-coin::after{content:'';position:absolute;inset:0;background:url('./assets/mission-diamond-brass-rim-v2.png') center/100% 100% no-repeat;border-radius:0;box-shadow:none;pointer-events:none;filter:brightness(.83) saturate(.78)}
#scarlet-bag-v30 .atlas-page .atlas-point-face .district-art{position:relative;z-index:1;max-width:26px;max-height:26px;object-fit:contain}
#scarlet-bag-v30 .atlas-page .atlas-point[aria-pressed=true] .atlas-point-face{background:none;border:0;box-shadow:none}
#scarlet-bag-v30 .atlas-page .atlas-point[aria-pressed=true] .atlas-point-face::before{background:#541f2b}
#scarlet-bag-v30 .atlas-page .atlas-point[aria-pressed=true] .atlas-point-face::after{filter:brightness(1.1)}
#scarlet-bag-v30 .campaign-page .campaign-field .campaign-marker{width:56px;height:56px}
#scarlet-bag-v30 .campaign-page .campaign-coin{width:56px;height:56px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;isolation:isolate;filter:drop-shadow(0 2px 3px #000a)}
#scarlet-bag-v30 .campaign-diamond-cloth{position:absolute;inset:0;overflow:hidden;clip-path:polygon(50% 4%,96% 50%,50% 96%,4% 50%);background:#201c1a}
#scarlet-bag-v30 .campaign-page .campaign-coin .campaign-cloth{left:-9%;top:-16%;width:118%;height:140%;object-fit:fill}
#scarlet-bag-v30 .campaign-page .campaign-coin .campaign-emblem{left:24%;top:24%;width:52%;height:52%;z-index:1}
#scarlet-bag-v30 .campaign-page .campaign-marker[aria-pressed=true] .campaign-coin::after{filter:brightness(1.1)}

/* Leave room for the raven’s beak and tail inside the diamond rim. */
#scarlet-bag-v30 .campaign-page .campaign-coin .campaign-emblem[data-art="clan_morvain"]{left:27%;top:27%;width:46%;height:46%}

/* A stable location panel; compact footer leaves room for the full mission text. */
#scarlet-bag-v30 .city-page>.mission-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(118px,44%);grid-template-rows:auto minmax(0,1fr) 20px 22px 24px 44px;grid-template-areas:"title title" "description description" "progress progress" "divider divider" "rewards rewards" "actions actions";gap:2px 8px}
#scarlet-bag-v30 .mission-detail>.detail-top{grid-area:title;min-width:0;gap:8px}
#scarlet-bag-v30 .mission-detail .detail-title{font-size:20px;line-height:1.15;overflow-wrap:anywhere}
#scarlet-bag-v30 .mission-detail .stage-group{width:82px}
#scarlet-bag-v30 .city-page>.mission-detail>.description{grid-area:description;margin:3px 0;font-size:13px;line-height:18px;align-self:stretch;overflow-x:hidden;overflow-y:auto}
#scarlet-bag-v30 .mission-detail>.mission-progress{grid-area:progress;min-width:0;min-height:0}
#scarlet-bag-v30 .city-page>.mission-detail>.divider{grid-area:divider;height:22px;margin:0 -8px}
#scarlet-bag-v30 .mission-detail>.activity-rewards{grid-area:rewards;justify-content:space-between;align-content:center;flex-wrap:nowrap;gap:4px 6px;min-width:0;font-size:12px}
#scarlet-bag-v30 .mission-detail>.activity-rewards .cost{margin-right:0}
#scarlet-bag-v30 .mission-detail>.activity-rewards .art-icon{width:18px;height:22px;object-fit:contain}
#scarlet-bag-v30 .city-page>.mission-detail>.action-row{grid-area:actions;margin:0;min-width:0;align-items:stretch}
#scarlet-bag-v30 .mission-detail>.action-row>.action{min-width:0;width:100%;min-height:44px;padding:5px 10px;font-size:14px;line-height:17px;overflow-wrap:anywhere}
#scarlet-bag-v30 .city-page>.mission-detail.has-optional-actions{grid-template-rows:auto minmax(0,1fr) 20px 22px 24px 44px;grid-template-areas:"title title" "description description" "progress progress" "divider divider" "rewards rewards" "actions actions"}
#scarlet-bag-v30 .mission-detail.has-optional-actions>.action-row>.action{flex:1}

#scarlet-bag-v30 .city-page>.mission-detail:has(>.mission-progress[aria-hidden=true]){grid-template-rows:auto minmax(0,1fr) 0 22px 24px 44px}
#scarlet-bag-v30 .city-page>.mission-detail.has-optional-actions:has(>.mission-progress[aria-hidden=true]){grid-template-rows:auto minmax(0,1fr) 0 22px 24px 44px}

/* Victory UI uses the same subdued brass, wine panels and portrait medallions
   as the profile. Scene geometry and the shared panel height stay unchanged. */
#scarlet-bag-v30 .campaign-heading:has(.campaign-summary)::after{grid-row:3}

#scarlet-bag-v30 .campaign-heading>.campaign-summary{grid-row:2;justify-content:flex-end;margin:3px 0 0}
#scarlet-bag-v30 .campaign-summary .campaign-status{display:flex;align-items:baseline;gap:6px;margin:0;padding:2px 7px;border:1px solid #94744840;border-radius:3px;background:#180e16b8;white-space:nowrap}
#scarlet-bag-v30 .campaign-summary .campaign-clock-label{font:10px/14px var(--sc-font-ui);color:#ac967d}
#scarlet-bag-v30 .campaign-summary .campaign-status strong{font:12px/14px var(--sc-font-ui);font-variant-numeric:tabular-nums;color:#ddc59f;min-width:51px;text-align:center}
#scarlet-bag-v30 .campaign-winner{bottom:3px;gap:5px;min-width:0;width:max-content;height:54px;padding:0 12px 0 0;border:0;border-radius:0;background:radial-gradient(ellipse,#180e17ed 20%,#180e17b8 60%,transparent 75%);box-shadow:none}
#scarlet-bag-v30 .campaign-winner>.ranking-seal.place-1{flex:none;width:66px;height:66px;max-width:none;margin:0;filter:drop-shadow(0 2px 3px #000a)}
#scarlet-bag-v30 .campaign-winner .ranking-seal-number{font-size:9px}
#scarlet-bag-v30 .campaign-winner-copy{text-shadow:0 1px 3px #000,0 1px 6px #000}
#scarlet-bag-v30 .campaign-winner .muted{font:10px/12px var(--sc-font-ui);color:#b69c7b}
#scarlet-bag-v30 .campaign-winner h3{margin:1px 0 0;font:19px/21px var(--sc-font-display);color:#ead3a9}
#scarlet-bag-v30 .campaign-page>.campaign-results{border-color:#98764870;background:linear-gradient(#2a151ee8,#180c13f5),var(--art-wine);padding:7px 12px 3px}
#scarlet-bag-v30 .campaign-results>.campaign-result-tabs{border-bottom-color:#92734a40;margin-bottom:6px}
#scarlet-bag-v30 .campaign-result-tabs .campaign-result-tab{position:relative;min-height:32px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:4px 3px;color:#a98f77}
#scarlet-bag-v30 .campaign-result-tabs .campaign-result-tab[aria-selected=true]{border-color:#a1804d;background:linear-gradient(transparent,#ad86401c);color:#ead4aa}
#scarlet-bag-v30 .campaign-results .campaign-ranking{grid-template-columns:repeat(var(--leader-count,3),minmax(0,120px));justify-content:center;gap:10px;align-items:center}
#scarlet-bag-v30 .campaign-results .campaign-player-title{color:#b49a78}
#scarlet-bag-v30 .campaign-results .campaign-player-name{font-weight:400}
#scarlet-bag-v30 .campaign-results .campaign-player-portrait{width:58px;border-radius:50%;border-color:var(--podium-metal);box-shadow:0 0 0 2px #1b1118,0 0 0 3px #8d6b3e55,0 3px 8px #0008}
#scarlet-bag-v30 .campaign-results .campaign-player-image,#scarlet-bag-v30 .campaign-results .campaign-player-placeholder{border-radius:50%}
#scarlet-bag-v30 .campaign-results .campaign-rank{bottom:-6px;min-width:22px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:10px;background:#26151e;color:#dfc392;font:11px/1 var(--sc-font-display)}
#scarlet-bag-v30 .campaign-results .campaign-contribution{border:0;margin-top:9px;padding:2px;font-variant-numeric:tabular-nums}
#scarlet-bag-v30 .campaign-results .campaign-contribution strong{font-weight:400;font-size:15px}
/* Five history rows fit the same fixed panel without a nested scroll area. */
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row{grid-template-rows:minmax(0,1fr)}
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row>.campaign-crest{width:26px;height:29px;overflow:hidden}
#scarlet-bag-v30 .campaign-page .campaign-history .campaign-scale-row .campaign-crest-art{transform:scale(.47)}

/* Centered clan-colour ribbon, matching the approved winner comparison (24).
   The colour comes from the same content metadata as the clan field markers. */
#scarlet-bag-v30 .campaign-victory-caption{position:absolute;inset:0 0 auto;z-index:4;pointer-events:none}
#scarlet-bag-v30 .campaign-victory-caption>.campaign-heading{position:relative;inset:auto}
#scarlet-bag-v30 .campaign-victory-caption>.campaign-winner{--winner-cloth:#49305a;position:relative;inset:auto;transform:none;display:flex;align-items:center;gap:9px;width:max-content;min-width:0;max-width:calc(100% - 24px);height:auto;min-height:49px;margin:6px auto 0;padding:5px 22px;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--winner-cloth) 86%,transparent) 16%,color-mix(in srgb,var(--winner-cloth) 86%,transparent) 84%,transparent)}
#scarlet-bag-v30 .campaign-victory-caption>.campaign-winner::before,#scarlet-bag-v30 .campaign-victory-caption>.campaign-winner::after{content:'';position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#b2966699 22%,#b2966699 78%,transparent)}
#scarlet-bag-v30 .campaign-victory-caption>.campaign-winner::before{top:0}
#scarlet-bag-v30 .campaign-victory-caption>.campaign-winner::after{bottom:0}
#scarlet-bag-v30 .campaign-winner .campaign-winner-emblem{width:34px;height:39px;filter:drop-shadow(0 2px 3px #000)}
#scarlet-bag-v30 .campaign-winner-emblem .clan-flag{filter:brightness(.75)}
#scarlet-bag-v30 .campaign-winner.is-ember .clan-flag{filter:hue-rotate(-12deg) saturate(.85) brightness(.48)}
#scarlet-bag-v30 .campaign-winner-emblem .clan-symbol{left:20%;top:12%;width:60%;height:57%;filter:brightness(.88)}
#scarlet-bag-v30 .campaign-victory-caption .campaign-winner-copy{display:flex;flex-direction:column;gap:1px;min-width:0;background:none;text-align:left}
#scarlet-bag-v30 .campaign-victory-caption .campaign-winner .muted{font:11px/15px var(--sc-font-ui);color:#e4d5be;text-shadow:0 1px 2px #0b0b10,0 0 4px #0b0b10}
#scarlet-bag-v30 .campaign-victory-caption .campaign-winner h3{margin:0;font:20px/24px var(--sc-font-display);color:#f4e6cb;text-shadow:0 1px 2px #0b0b10,0 0 5px #0b0b10}

/* The countdown shares the info-button row, above the full-width divider. */
#scarlet-bag-v30 .campaign-heading:has(.campaign-summary){grid-template-columns:minmax(0,1fr) auto 24px;column-gap:8px}
#scarlet-bag-v30 .campaign-heading:has(.campaign-summary)>.campaign-info{grid-column:3;grid-row:1;align-self:center;margin-inline:0}
#scarlet-bag-v30 .campaign-heading>.campaign-summary{grid-column:2;grid-row:1;margin:0;align-self:center}
#scarlet-bag-v30 .campaign-heading:has(.campaign-summary)::after{grid-row:2}
@media(max-width:420px){#scarlet-bag-v30 .campaign-summary .campaign-status{flex-direction:column;gap:0;padding:2px 4px}}

/* Closed districts disclose their story and requirement, without an entry action. */
#scarlet-bag-v30 .atlas-point.is-locked .district-art{filter:brightness(.35) saturate(.3);opacity:.55}
#scarlet-bag-v30 .district-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:20px;height:24px;z-index:2;isolation:isolate;pointer-events:none}
#scarlet-bag-v30 .district-lock::before{content:'';position:absolute;inset:-6px;z-index:-1;background:radial-gradient(ellipse,#08090be6 15%,#08090b9c 45%,transparent 72%)}
#scarlet-bag-v30 .district-lock .art-icon{width:18px;height:22px;object-fit:contain;filter:brightness(1.85) saturate(.8) drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px #c6a56866)}
#scarlet-bag-v30 .district-unlock{display:flex;align-items:center;gap:8px;font:13px var(--sc-font-ui);color:#c6b28f;margin:6px 0 0}
#scarlet-bag-v30 .district-unlock .art-icon{width:18px;height:22px;object-fit:contain}
#scarlet-bag-v30.is-registering .game-content{grid-template-rows:minmax(0,1fr)}
#scarlet-bag-v30.is-registering #content{overflow:hidden;padding:0}
#scarlet-bag-v30 .registration-page{height:100%;min-height:0}
#scarlet-bag-v30 .level-up{text-align:center}
#scarlet-bag-v30 .level-up-age{font:48px/1.2 var(--sc-font-display);font-variant-numeric:lining-nums tabular-nums;color:#d5b67a;margin:8px}
#scarlet-bag-v30 .level-up h2{font:23px var(--sc-font-display);margin:8px 0}
#scarlet-bag-v30 .level-up-points{display:flex;justify-content:center;align-items:center;gap:8px;color:#b9d3c6;font:19px var(--sc-font-display)}
#scarlet-bag-v30 .level-up-points .art-icon{width:25px;height:25px;flex:none;object-fit:contain}
#scarlet-bag-v30 .level-up-unlocks-title{margin-top:18px}
#scarlet-bag-v30 .level-up-unlock-group{margin-top:12px;text-align:left}
#scarlet-bag-v30 .level-up-unlock-group h4{margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid #80644066;color:#c5a873;font:14px var(--sc-font-ui)}
#scarlet-bag-v30 .level-up-unlock-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
#scarlet-bag-v30 .level-up-unlock{display:flex;gap:9px;align-items:center;min-width:0;text-align:left;margin:0;font:14px/1.35 var(--sc-font-ui);overflow-wrap:anywhere}
#scarlet-bag-v30 .level-up-unlock .art-icon{width:30px;height:30px;flex:none;object-fit:contain}
#scarlet-bag-v30 .level-up>button{margin-top:14px}
/* Four readable loot icons per page; paging replaces the native scroll strip. */
#scarlet-bag-v30 .boss-detail .boss-loot-icons{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;overflow:visible;height:auto;min-height:44px;padding:2px;align-content:center}
#scarlet-bag-v30 .boss-loot-icons>.page-window{height:44px}
#scarlet-bag-v30 .boss-loot-icons:has(.boss-loot-pages)>.page-window{height:38px}
#scarlet-bag-v30 .boss-loot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;height:100%;width:100%;align-items:center;touch-action:pan-y}
#scarlet-bag-v30 .boss-detail .boss-loot-icons .reward-tile{width:100%;max-width:44px;height:auto;max-height:100%;min-width:0;min-height:0;aspect-ratio:1;padding:2px;justify-self:center}
#scarlet-bag-v30 .boss-loot-pages.spell-page-rail{grid-column:1 / -1;height:18px;min-height:18px;margin:0;min-width:0}
#scarlet-bag-v30 .boss-loot-pages .spell-page-stop{min-height:0;height:18px}
#scarlet-bag-v30 .boss-loot-pages .page-rail-marker{transition:left .4s cubic-bezier(.22,.75,.25,1)}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .boss-loot-pages .page-rail-marker{transition:none}}
#scarlet-bag-v30.is-registering #content{grid-row:1}
#scarlet-bag-v30 .boss-loot-icons .reward-tile-art{max-width:100%;max-height:100%;min-width:0;min-height:0}
#scarlet-bag-v30 .boss-detail .boss-loot-icons:has(.boss-loot-pages) .reward-tile{max-width:38px}

/* Completed mission milestones: short story and actual, separately granted rewards. */
#scarlet-bag-v30 .mission-stage-result{text-align:center;min-width:0}
#scarlet-bag-v30 .mission-stage-number{margin:2px 0 8px;color:#b49765;font:13px var(--sc-font-ui)}
#scarlet-bag-v30 .mission-stage-result h2{font:23px/1.2 var(--sc-font-display);color:#d5b67a;margin:0 0 12px;overflow-wrap:anywhere}
#scarlet-bag-v30 .mission-stage-story{font:15px/1.5 var(--sc-font-ui);color:#d2c5af;margin:0 0 18px;overflow-wrap:anywhere}
#scarlet-bag-v30 .mission-stage-rewards-title{font:15px var(--sc-font-ui);color:#b49765;margin:0 0 8px}
#scarlet-bag-v30 .mission-stage-result>button{margin-top:8px}

/* Battle receipt rewards stay within the fixed result card, and appear only at the end. */
#scarlet-bag-v30 .duel-drum .duel-result.has-grants{grid-template-rows:52px 52px 38px}
#scarlet-bag-v30 .duel-drum .duel-result.has-grants .duel-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;height:52px;align-content:center;overflow:visible}
#scarlet-bag-v30 .duel-drum .duel-result.has-grants .duel-reward{height:24px;gap:6px}
#scarlet-bag-v30 .duel-drum .duel-result.has-grants .duel-reward .art-icon{width:23px;height:23px;object-fit:contain;flex:none}
#scarlet-bag-v30 .duel-drum .duel-result.has-grants .duel-reward strong{font-size:16px;font-weight:normal}
#scarlet-bag-v30 .duel-result.has-grants .duel-loot{height:38px;padding-top:0;gap:6px;scrollbar-width:none}
#scarlet-bag-v30 .duel-result.has-grants .duel-loot::-webkit-scrollbar{display:none}
#scarlet-bag-v30 .duel-result.has-grants .reward-tile{width:32px;height:32px;min-height:0;flex:none}
#scarlet-bag-v30 .practice-battle .duel-result-heading.has-rating{grid-template-columns:48px minmax(0,1fr) max-content}
#scarlet-bag-v30 .duel-result-heading>.duel-rating{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;min-width:62px;align-self:center}
#scarlet-bag-v30 .duel-result-heading>.duel-rating strong{font-family:var(--sc-font-ui);font-variant-numeric:tabular-nums;line-height:22px;white-space:nowrap}
@media(max-width:370px){#scarlet-bag-v30 .practice-battle .duel-result-heading.has-rating{grid-template-columns:42px minmax(0,1fr) max-content;gap:6px}}

/* A locked section remains clickable to explain its server-authored requirement. */
#scarlet-bag-v30 .navigation .nav-art{position:relative;display:grid;place-items:center}
#scarlet-bag-v30 .navigation .is-locked .nav-art>.art-icon{filter:brightness(.3) saturate(.2);opacity:.55}
#scarlet-bag-v30 .navigation .nav-lock{position:absolute;inset:-3px;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse,#08090be6 20%,#08090b99 48%,transparent 76%)}
#scarlet-bag-v30 .navigation .nav-lock .art-icon{width:25px;height:30px;object-fit:contain;filter:brightness(1.9) saturate(.85) drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px #c6a56866)}
#scarlet-bag-v30 .hunt-gate{text-align:center;font:16px/1.45 var(--sc-font-ui)}
#scarlet-bag-v30 .hunt-gate-icon{width:32px;height:38px;object-fit:contain;margin:8px auto;filter:brightness(1.5)}
#scarlet-bag-v30 .hunt-gate>button{margin-top:12px}

/* Gold artwork has ~12% transparent inset; match the visible silver diameter. */
#scarlet-bag-v30 .hud .purse-row img[data-art="gold"]{scale:1.14}
#scarlet-bag-v30 .location-info .location-story{font:15px/1.55 var(--sc-font-ui);color:#d0c0a9}
#scarlet-bag-v30 .location-info h4{font:19px/1.3 var(--sc-font-display);color:#d4bb8b;margin:18px 0 10px}
#scarlet-bag-v30 .location-casket{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;margin:10px 0}
#scarlet-bag-v30 .location-casket>.art-icon{width:58px;height:58px;object-fit:contain}
#scarlet-bag-v30 .location-casket strong{font:17px/1.25 var(--sc-font-display);color:#e2cdab}
#scarlet-bag-v30 .location-casket .drop-chance{color:#91b1a4;font:13px/1.5 var(--sc-font-ui);margin:4px 0}
#scarlet-bag-v30 .location-drop-note{font:12px/1.5 var(--sc-font-ui);color:#ab9c88;overflow-wrap:anywhere}
#scarlet-bag-v30 .location-drop-note{margin-top:12px}

/* Received rewards: shared receipt for chests, offers and the wishing well. */
#scarlet-bag-v30 .sheet:has(.received-rewards) .sheet-head{justify-content:center;padding:12px 26px 20px;margin-bottom:4px;background:url('./assets/heading-divider.svg') center bottom/100% auto no-repeat}
#scarlet-bag-v30 .sheet:has(.received-rewards) .sheet-head h3{text-align:center;font-size:25px;color:#ebd3a2;text-shadow:0 2px 8px #0008}
#scarlet-bag-v30 .received-rewards{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px}
#scarlet-bag-v30 .received-rewards::before{content:'';position:absolute;inset:0 0 48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,#ad804c1e 0%,#ad804c12 35%,#ad804c05 65%,#ad804c00 100%)}
#scarlet-bag-v30 .received-rewards .page-window{min-width:0;padding:8px 0}
#scarlet-bag-v30 .received-rewards-grid{display:grid;grid-template-columns:repeat(var(--reward-columns),minmax(0,1fr));align-items:start;gap:16px 8px;padding:8px 4px;min-width:0}
#scarlet-bag-v30 .received-rewards-grid.has-two-rows{grid-template-rows:repeat(2,176px)}
#scarlet-bag-v30 .received-reward{--item-rarity:#bc9862;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0;padding:0;border:0;background:none;box-shadow:none;text-align:center}
#scarlet-bag-v30 .received-reward-art{position:relative;display:grid;place-items:center;width:100%;height:86px}
#scarlet-bag-v30 .received-reward-art::before{content:'';position:absolute;inset:-10px -4px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--item-rarity) 30%,transparent) 0%,color-mix(in srgb,var(--item-rarity) 16%,transparent) 35%,color-mix(in srgb,var(--item-rarity) 4%,transparent) 70%,transparent 100%);animation:received-reward-glow 5s ease-in-out infinite alternate}
#scarlet-bag-v30 .received-reward-art::after{content:'';position:absolute;bottom:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--item-rarity),transparent);opacity:.65}
#scarlet-bag-v30 .received-reward-icon{position:relative;display:block;width:86px;max-width:100%;height:76px}
#scarlet-bag-v30 .received-reward-icon>img{display:block;height:100%;max-height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #0009)}
#scarlet-bag-v30 .received-reward-amount{position:absolute;right:-4px;bottom:-2px;max-width:100%;padding:0 4px;background:transparent;color:#f3dab0;font:700 14px/1.4 var(--sc-font-ui);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-shadow:0 1px 3px #000}
#scarlet-bag-v30 .received-reward-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:14px/1.25 var(--sc-font-display);color:#ead7ba;overflow-wrap:anywhere}
#scarlet-bag-v30 .received-reward-rarity{font:11px/1.2 var(--sc-font-ui);color:var(--item-rarity)}
#scarlet-bag-v30 .received-rewards.is-single .received-reward{max-width:230px;justify-self:center}
#scarlet-bag-v30 .received-rewards.is-single .received-reward-art{height:150px}
#scarlet-bag-v30 .received-rewards.is-single .received-reward-icon{width:150px;height:138px}
#scarlet-bag-v30 .received-rewards.is-single .received-reward-name{font-size:19px}
#scarlet-bag-v30 .received-rewards>.action{width:100%;margin:0;min-height:44px}
#scarlet-bag-v30 .received-reward-detail{text-align:center}
#scarlet-bag-v30 .received-reward-detail>.boss-loot-preview{margin:0 auto 12px}
#scarlet-bag-v30 .received-reward-detail>.action{width:100%}
@keyframes received-reward-glow{from{opacity:.65}to{opacity:1}}
@media(max-height:700px){#scarlet-bag-v30 .received-rewards-grid{gap:10px 6px}#scarlet-bag-v30 .received-rewards-grid.has-two-rows{grid-template-rows:repeat(2,148px)}#scarlet-bag-v30 .received-reward-art{height:68px}#scarlet-bag-v30 .received-reward-icon{width:70px;height:60px}#scarlet-bag-v30 .received-reward-name{font-size:13px}#scarlet-bag-v30 .received-rewards{gap:8px}}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .received-reward-art::before{animation:none}}

/* Shared numeric typography: never use descending/old-style figures in the UI.
   This intentionally overrides component font shorthands and tabular-only rules. */
#scarlet-bag-v30,#scarlet-bag-v30 *,#scarlet-bag-v30 *::before,#scarlet-bag-v30 *::after,
.startup-screen,.startup-screen *{
 font-variant-numeric:lining-nums tabular-nums!important;
 font-feature-settings:"lnum" 1,"tnum" 1;
}

#scarlet-bag-v30 .campaign-chest.is-waiting{opacity:1;cursor:default}
#scarlet-bag-v30 .campaign-chest.is-waiting>img,#scarlet-bag-v30 .campaign-chest.is-waiting>canvas{filter:brightness(.6) saturate(.65)}
#scarlet-bag-v30 .campaign-chest.left .campaign-chest-timer{left:24%}
#scarlet-bag-v30 .campaign-chest.right .campaign-chest-timer{left:76%}
#scarlet-bag-v30 .campaign-chest-timer{position:absolute;z-index:5;left:50%;top:108%;transform:translateX(-50%);padding:2px 6px;min-width:64px;border:1px solid #8d7048;border-radius:3px;background:#24151ee8;box-shadow:0 2px 5px #0006;color:#ead5aa;text-shadow:0 1px 2px #000;font:12px/16px var(--sc-font-ui);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;pointer-events:none}

#scarlet-bag-v30 .activity-rewards>span{flex:none;white-space:nowrap}
#scarlet-bag-v30 .hud-title-placeholder{display:block;height:13px}
/* System mail uses the same brass dividers and wine panels as rewards. */
#scarlet-bag-v30 .hud-tools{display:flex;align-items:center;gap:5px}
#scarlet-bag-v30 .hud-tools .settings-button{margin-left:0}
#scarlet-bag-v30 .hud-identity{padding-right:63px}
#scarlet-bag-v30 .hud-tools .mail-button{position:relative;width:28px;height:28px;padding:3px;margin:0}
#scarlet-bag-v30 .mail-badge{position:absolute;right:-4px;top:-3px;min-width:13px;height:13px;padding:0 2px;display:grid;place-items:center;border:1px solid #d3ac66;border-radius:8px;background:#791f2b;color:#ffedbd;font:9px/1 var(--sc-font-ui);font-variant-numeric:lining-nums tabular-nums}
#scarlet-bag-v30 .mail-badge[hidden]{display:none}
#scarlet-bag-v30 .sheet:has(.mailbox){display:flex;flex-direction:column;height:min(660px,calc(var(--game-height) - 40px));max-height:100%;min-height:0;overflow:hidden;box-sizing:border-box}
#scarlet-bag-v30 .sheet:has(.mailbox) .sheet-head{flex-shrink:0}
#scarlet-bag-v30 #sheet-content:has(.mailbox){flex:1;min-height:0;overflow:hidden}
#scarlet-bag-v30 .mailbox{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;padding:8px 3px 12px}
#scarlet-bag-v30 .mailbox>.mail-intro,#scarlet-bag-v30 .mailbox>.mail-filters,#scarlet-bag-v30 .mailbox>.mail-footer{flex-shrink:0}
#scarlet-bag-v30 .mail-messages,#scarlet-bag-v30 .mail-letter{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
#scarlet-bag-v30 .mail-messages:focus-visible{outline:1px solid #ad8b52;outline-offset:-1px}
#scarlet-bag-v30 .campaign-rewards-heading{padding-top:14px;border-top:1px solid #715936;color:#e3c28c;font-weight:normal}
#scarlet-bag-v30 .mail-icon{width:30px;height:30px;flex:0 0 auto;object-fit:contain}
#scarlet-bag-v30 .mail-intro{display:flex;gap:10px;align-items:center;margin-bottom:16px}
#scarlet-bag-v30 .mail-intro h3{margin:0;color:#e3c28c;font-size:20px;font-weight:normal}
#scarlet-bag-v30 .mail-intro p{margin:5px 0 0;font:12px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30 .mail-filters{display:flex;border-bottom:1px solid #715936;margin-bottom:12px}
#scarlet-bag-v30 .mail-filter{flex:1;min-width:0;min-height:36px;padding:5px 3px;background:none;border:0;border-radius:0;color:#ad9780;box-shadow:none;font:12px var(--sc-font-ui)}
#scarlet-bag-v30 .mail-filter[aria-selected=true]{color:#f0d59e;border-bottom:2px solid #c49f60;background:linear-gradient(transparent,#a0773020)}
#scarlet-bag-v30 .mail-row{display:flex;align-items:center;gap:9px;text-align:left;width:100%;min-height:76px;padding:10px 8px;margin:0;background:linear-gradient(100deg,#30181c80,#130f1400);border:0;border-bottom:1px solid #72533366;border-radius:0;box-shadow:none;white-space:normal}
#scarlet-bag-v30 .mail-row.is-unread{background:linear-gradient(100deg,#68302755,#28151d33)}
#scarlet-bag-v30 .mail-row-copy{flex:1;min-width:0;display:grid;gap:5px}
#scarlet-bag-v30 .mail-row-copy strong{font:16px/1.25 var(--sc-font-display);color:#e5d5bc;overflow-wrap:anywhere}
#scarlet-bag-v30 .mail-category{font:10px/1.4 var(--sc-font-ui);color:#c4a46d;letter-spacing:.05em;margin:0}
#scarlet-bag-v30 .mail-row-date,#scarlet-bag-v30 .mail-meta{font:11px/1.5 var(--sc-font-ui);color:#a58d7d}
#scarlet-bag-v30 .mail-status{font:10px/1.3 var(--sc-font-ui);color:#a58d7d;max-width:58px}
#scarlet-bag-v30 .mail-status.has-reward{color:#e2bd77}
#scarlet-bag-v30 .mail-empty{padding:40px 18px;text-align:center}
#scarlet-bag-v30 .mail-empty .mail-icon{width:64px;height:64px;opacity:.75;margin:0 auto}
#scarlet-bag-v30 .mail-empty h3{font-size:20px;color:#d8bd8d;font-weight:normal}
#scarlet-bag-v30 .mail-empty p{font:13px/1.7 var(--sc-font-ui)}
#scarlet-bag-v30 .mail-footer{padding-top:12px}
#scarlet-bag-v30 .mail-close{display:block;width:100%;margin:0 auto}
#scarlet-bag-v30 .mail-letter{padding:4px 7px}
#scarlet-bag-v30 .mail-subject{font-size:23px;font-weight:normal;line-height:1.3;color:#efd7a7;overflow-wrap:anywhere;margin:7px 0 12px}
#scarlet-bag-v30 .mail-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 12px}
#scarlet-bag-v30 .mail-rule{height:15px;background:var(--art-divider) center/100% 15px no-repeat;margin:12px 0}
#scarlet-bag-v30 .mail-body{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.8 var(--sc-font-ui);color:#dacbb6;margin:10px 0 22px}
#scarlet-bag-v30 .mail-reward-heading{font-size:17px;font-weight:normal;color:#d7b77b}
#scarlet-bag-v30 .mail-attachments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 20px}
#scarlet-bag-v30 .mail-attachment{display:flex;align-items:center;gap:7px;min-width:0;border-bottom:1px solid #72533366;padding:6px 0}
#scarlet-bag-v30 .mail-reward-icon,#scarlet-bag-v30 .mail-reward-fallback{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
#scarlet-bag-v30 .mail-attachment>div{min-width:0;display:grid;gap:4px;font:12px/1.4 var(--sc-font-ui);overflow-wrap:anywhere}
#scarlet-bag-v30 .mail-attachment strong{color:#f1d89b;white-space:nowrap;font-size:14px}
#scarlet-bag-v30 .mail-claim{display:block;max-width:250px;min-height:40px;margin:0 auto;font-size:16px}
#scarlet-bag-v30 .mail-collected{text-align:center;color:#bba276;font-size:14px}

/* Well rewards use the same compact cabinet as event rewards. */
#scarlet-bag-v30 .service-detail .detail-title:has(.well-info){display:flex;align-items:center;gap:6px;padding-right:28px}


#scarlet-bag-v30 .well-rules .well-intro{font:13px/1.45 var(--sc-font-ui);color:#bbaa92}
#scarlet-bag-v30 .well-rules .well-daily-bonus{padding:7px 0;border-block:1px solid #b5985433;font:13px/1.4 var(--sc-font-ui);color:#dfc58e}
#scarlet-bag-v30 .well-rules .event-rewards-heading{margin-top:5px}
#scarlet-bag-v30 .well-rules .event-stock-chance{color:#dfc58e;font-variant-numeric:lining-nums tabular-nums}
#scarlet-bag-v30 .well-rules .event-stock-card{justify-content:space-between}

/* Overflow energy is separate from the capacity and the filled bar. */
#scarlet-bag-v30 .resource-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
#scarlet-bag-v30 .resource-reserve{display:inline-block;white-space:nowrap;color:#e3bc76;font-size:11px;line-height:1.3;font-variant-numeric:lining-nums tabular-nums}
#scarlet-bag-v30 .development-stat>.resource-reserve{margin-left:5px}

/* Purchased-portrait catalogue: preview now, acquisition configured separately. */
#scarlet-bag-v30 .avatar-collection-group + .avatar-collection-group{margin-top:22px}
#scarlet-bag-v30 .avatar-collection-group h3{margin:0 0 12px;font-size:16px;color:#c6ae83;font-weight:500}
#scarlet-bag-v30 .avatar-choice{background:linear-gradient(145deg,#2c161c,#171318);border-color:#65523a}
#scarlet-bag-v30 .avatar-choice-name{display:block;line-height:1.3}
#scarlet-bag-v30 .avatar-choice-status{display:block;margin-top:5px;color:#a4947d;font-size:10px}
#scarlet-bag-v30 .avatar-preview>img{display:block;width:100%;height:auto;border:1px solid #65523a;border-radius:3px}
#scarlet-bag-v30 .avatar-preview-back{display:block;margin-bottom:12px;color:#c6ae83;background:transparent;border:0;padding:6px 0}
#scarlet-bag-v30 .avatar-preview p{line-height:1.5}

#scarlet-bag-v30 .event-mission-progress{margin-top:auto}
#scarlet-bag-v30 .event-mission-progress>small{display:block;color:#c8b38c;margin-bottom:6px;font-size:11px}
#scarlet-bag-v30 .event-mission-link{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:10px;background:#25131b;border:1px solid #79603d;color:#e2c89d;margin:8px 0}
#scarlet-bag-v30 .event-mission-link-icon{width:42px;height:42px;object-fit:contain}
/* The event glyph has brighter, yellower highlights than the regular brass markers. */
#scarlet-bag-v30 .event-mission-marker .medal-symbol,#scarlet-bag-v30 .event-mission-link-icon{filter:saturate(.65) brightness(.82)}
#scarlet-bag-v30 .event-mission-link strong,#scarlet-bag-v30 .event-mission-link small{display:block}
#scarlet-bag-v30 .event-mission-link small{color:#af9d86;font-size:12px}

#scarlet-bag-v30 .event-mission-detail>.event-mission-progress{grid-area:progress;min-width:0;margin:0}
#scarlet-bag-v30 .event-mission-detail .stage-label{color:#d5b67d}

#scarlet-bag-v30 .event-mission-detail .event-mission-progress>small{display:none}
#scarlet-bag-v30 .city-page>.event-mission-detail:not(.boss-detail)>.description{margin:0;font-size:13px;line-height:18px}

#scarlet-bag-v30 .event-mission-detail .activity-rewards .reward{white-space:nowrap;min-width:0}

/* Catalog rarity colours, soft light behind the art without a rectangular crop. */
#scarlet-bag-v30 .rarity-lit{position:relative;isolation:isolate;overflow:visible}
#scarlet-bag-v30 .item-rarity-aura{position:absolute;pointer-events:none;z-index:-1;inset:-22%;border-radius:50%}
#scarlet-bag-v30 .item-rarity-aura::before,#scarlet-bag-v30 .item-rarity-aura::after{content:'';position:absolute;inset:0;border-radius:50%;mask-image:radial-gradient(ellipse,#000 15%,transparent 71%)}
#scarlet-bag-v30 .item-rarity-aura::before{background:radial-gradient(ellipse,color-mix(in srgb,var(--item-rarity) 48%,transparent),color-mix(in srgb,var(--item-rarity) 18%,transparent) 40%,transparent 72%);animation:item-aura-breathe 7s ease-in-out infinite alternate}
#scarlet-bag-v30 .item-rarity-aura::after{background:repeating-conic-gradient(from 15deg,transparent 0deg 22deg,color-mix(in srgb,var(--item-rarity) 24%,transparent) 29deg,transparent 36deg 65deg);filter:blur(3px);opacity:.6}
@keyframes item-aura-breathe{from{opacity:.65;transform:scale(.95)}to{opacity:1;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .item-rarity-aura::before{animation:none}}

#scarlet-bag-v30 .boss-drop-section{margin-top:14px}
#scarlet-bag-v30 .boss-drop-section>h4{margin:0;color:#d3b47a;font:17px/1.3 'Vollkorn',serif}
#scarlet-bag-v30 .boss-drop-section .boss-drop-grid{margin-top:7px}

#scarlet-bag-v30 .locked-boss-condition{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font:13px/1.4 'PT Sans',sans-serif;color:#d4b67e}
#scarlet-bag-v30 .locked-boss-condition>.art-icon{width:18px;height:22px;flex:none}
#scarlet-bag-v30 .locked-boss-requirements{list-style:none;margin:0;padding:0;display:grid;gap:7px;font:13px/1.3 'PT Sans',sans-serif}
#scarlet-bag-v30 .locked-boss-requirements li{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #9c794c3b;padding-top:7px}
#scarlet-bag-v30 .locked-boss-requirements strong{white-space:nowrap;font-weight:400;color:#bca78a;font-size:12px}
#scarlet-bag-v30 .locked-boss-requirements .is-complete strong{color:#bdc18c}
#scarlet-bag-v30 .city-page>.locked-boss-detail{grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px}
#scarlet-bag-v30 .locked-boss-detail>.description{min-height:0;overflow-y:auto;overflow-x:hidden;margin:0;font-size:12px;line-height:1.4}
#scarlet-bag-v30 .locked-boss-detail .locked-boss-condition{margin:0}

/* Locked bosses show one lock inside the same brass diamond as available bosses. */
#scarlet-bag-v30 .poi.boss.is-locked .medal-symbol,
#scarlet-bag-v30 .poi.boss.is-locked .completion{display:none}
#scarlet-bag-v30 .poi.boss.is-locked .district-lock{width:24px;height:29px}
#scarlet-bag-v30 .poi.boss.is-locked .district-lock .art-icon{width:22px;height:27px}

/* Recovery lives above the current screen without replacing a reward or event. */
#scarlet-bag-v30 .error-dialog{box-sizing:border-box;width:calc(100% - 24px);max-width:410px;max-height:calc(100dvh - 32px);padding:18px 16px;color:var(--sc-paper);overflow:auto;box-shadow:0 15px 60px #000b}
#scarlet-bag-v30 .error-dialog::backdrop{background:#07060bd6;backdrop-filter:blur(3px)}
#scarlet-bag-v30 .error-dialog .sheet-head{position:relative;padding-right:35px;padding-bottom:13px;border-bottom:1px solid #93734577}
#scarlet-bag-v30 .error-dialog h3{font:23px/1.2 var(--sc-font-display);color:#e7c58d}
#scarlet-bag-v30 .error-dialog .close-sheet{position:absolute;right:-9px;top:-9px}
#scarlet-bag-v30 .error-emblem{display:grid;place-items:center;width:46px;height:46px;margin:27px auto 23px;border:1px solid #b58b51;background:linear-gradient(135deg,#63343b,#271319);box-shadow:0 0 24px #b2703533,inset 0 0 0 4px #27171b;transform:rotate(45deg)}
#scarlet-bag-v30 .error-emblem span{transform:rotate(-45deg);font:30px/1 var(--sc-font-display);color:#f0cb8c}
#scarlet-bag-v30 .error-message{text-align:center;font:15px/1.5 var(--sc-font-ui);overflow-wrap:anywhere}
#scarlet-bag-v30 .error-actions{display:grid;gap:8px;margin-top:22px}
#scarlet-bag-v30 .error-actions .action{width:100%;min-height:42px;margin:0;font-size:16px}
#scarlet-bag-v30 .error-details{margin-top:12px;font:12px/1.4 var(--sc-font-ui);color:#b8a68d}
#scarlet-bag-v30 .error-details summary{cursor:pointer}
#scarlet-bag-v30 .error-details textarea{box-sizing:border-box;width:100%;height:110px;margin-top:8px;padding:8px;border:1px solid #6b5136;background:#140d13;color:#d7c8b2;resize:vertical;font:12px/1.5 var(--sc-font-ui)}

/* Stage completion and reward collection are separate states. */
#scarlet-bag-v30 .achievement-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));overflow:visible;gap:5px}
#scarlet-bag-v30 .achievement-stages li{min-width:0}
#scarlet-bag-v30 .achievement-stage-button{height:66px;gap:4px}
#scarlet-bag-v30 .achievement-stage-status{font:9px/1.15 var(--sc-font-ui);min-height:20px;display:grid;place-items:center}
#scarlet-bag-v30 .achievement-stages .is-claimable{color:#ffda83;background:linear-gradient(transparent,#b8842526)}
#scarlet-bag-v30 .is-claimable .achievement-stage-mark{border-color:#ddb765;box-shadow:0 0 9px #db9c3844;background:#80602144}
#scarlet-bag-v30 .achievement-stages .is-claimable .achievement-stage-button{border-bottom-color:#d5ac60}
#scarlet-bag-v30 .achievement-stages .is-claimed{color:#a2b38c}
#scarlet-bag-v30 .achievement-stages .is-locked{color:#978b81}
#scarlet-bag-v30 .achievement-pending-stages{color:#eac583;font:12px/1.4 var(--sc-font-ui);margin:6px 0}

#scarlet-bag-v30 .campaign-prize-section{border-top:1px solid #a0834244;padding:12px 0}
#scarlet-bag-v30 .campaign-prize-section h3{margin:0 0 8px;color:#e8ca8e}
#scarlet-bag-v30 .campaign-prize-section h4{font:12px var(--sc-font-ui);margin:12px 0 8px}
#scarlet-bag-v30 .campaign-prize-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 7px}
#scarlet-bag-v30 .campaign-prize{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font:11px/1.35 var(--sc-font-ui);min-width:0;color:#d5c6b1}
#scarlet-bag-v30 .campaign-prize-art{display:grid;place-items:center;width:64px;height:64px;position:relative}
#scarlet-bag-v30 .campaign-prize-art img{width:56px;height:56px;object-fit:contain}
#scarlet-bag-v30 .campaign-prize strong{color:#eed39b}

#scarlet-bag-v30 .campaign-prize-chance{color:#e3bd78;font:12px/1.4 var(--sc-font-ui);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* The panel paints one continuous background behind both title and contents. */
#scarlet-bag-v30 .overlay .sheet>.sheet-head,
#scarlet-bag-v30 .error-dialog>.sheet-head{position:sticky;top:0;z-index:20;isolation:isolate;background-color:transparent}
#scarlet-bag-v30 .overlay .sheet>.sheet-head::before,
#scarlet-bag-v30 .error-dialog>.sheet-head::before{display:none}
#scarlet-bag-v30 .overlay .sheet>.sheet-head .close-sheet,
#scarlet-bag-v30 .error-dialog>.sheet-head .close-sheet{background:transparent;border-radius:0;box-shadow:none;top:0;right:0}
/* Title and close share a row, including wrapped titles and padded event headers. */
#scarlet-bag-v30 .overlay:not(.shop-overlay):not(.scene-story) .sheet:not(.profile-sheet):not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail))>.sheet-head,
#scarlet-bag-v30 .error-dialog>.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:8px;padding-right:0}
#scarlet-bag-v30 .overlay:not(.shop-overlay):not(.scene-story) .sheet:not(.profile-sheet):not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail))>.sheet-head>h3,
#scarlet-bag-v30 .error-dialog>.sheet-head>h3{margin:0;min-width:0}
#scarlet-bag-v30 .overlay:not(.shop-overlay):not(.scene-story) .sheet:not(.profile-sheet):not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail))>.sheet-head .close-sheet,
#scarlet-bag-v30 .error-dialog>.sheet-head .close-sheet{position:static;inset:auto;align-self:center;width:44px;height:44px;min-height:44px;margin:0;transform:none}
/* These windows already have an independent scrolling body. No sticky offset. */
#scarlet-bag-v30 .sheet:has(>.sheet-content>:is(.phoenix-copy,.phoenix-event,.mailbox,.achievement-list))>.sheet-head{position:relative;top:auto}
/* Ordinary sheets keep their transparent header outside the scrolling text.
   Special screens already manage their own scroll region and retain that layout. */
#scarlet-bag-v30 .overlay:not(.fullscreen):not(.shop-overlay)>.sheet:not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail,.mailbox,.achievement-list,.phoenix-copy,.phoenix-event)){
 display:flex;flex-direction:column;min-height:0;max-height:calc(var(--game-height) - 40px);overflow:hidden
}
#scarlet-bag-v30 .overlay:not(.fullscreen):not(.shop-overlay)>.sheet:not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail,.mailbox,.achievement-list,.phoenix-copy,.phoenix-event))>.sheet-head{position:relative;top:auto;flex:none}
#scarlet-bag-v30 .overlay:not(.fullscreen):not(.shop-overlay)>.sheet:not(.rankings-sheet):not(:has(.item-card,.magic-v8-detail,.mailbox,.achievement-list,.phoenix-copy,.phoenix-event))>.sheet-content{min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Item and profile headers are intentionally zero-height overlays. */
#scarlet-bag-v30 .overlay .sheet:is(.profile-sheet,:has(.item-card,.magic-v8-detail))>.sheet-head{background:transparent}
#scarlet-bag-v30 .overlay .sheet:is(.profile-sheet,:has(.item-card,.magic-v8-detail))>.sheet-head::before{display:none}


/* Ranking mail: a ceremony header, compact standings and tangible rewards. */
#scarlet-bag-v30 .mail-ranking-letter{background:radial-gradient(ellipse at 50% 0,#a176292c,transparent 58%),linear-gradient(#28131b,#160e15);border:1px solid #a0834255;padding:16px 12px}
#scarlet-bag-v30 .mail-ranking-header{text-align:center;padding:8px 0 16px;border-bottom:1px solid #a0834244}
#scarlet-bag-v30 .mail-ranking-emblem{display:grid;place-items:center;margin:5px auto 17px;width:42px;height:42px;color:#f3d48f;font-size:35px;text-shadow:0 0 18px #e5b55777}
#scarlet-bag-v30 .mail-ranking-kicker{font:10px var(--sc-font-ui);text-transform:uppercase;letter-spacing:1.5px;color:#bda475;margin:0 0 6px}
#scarlet-bag-v30 .mail-ranking-header h3{font:27px var(--sc-font-display);color:#edd39f;margin:0}
#scarlet-bag-v30 .mail-ranking-period{font:11px/1.5 var(--sc-font-ui);color:#b7a58e;margin:8px 0 0}
#scarlet-bag-v30 .mail-ranking-results{display:grid;margin:8px 0 18px}
#scarlet-bag-v30 .mail-ranking-result{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #a083422b}
#scarlet-bag-v30 .mail-ranking-place{display:grid;text-align:center;color:#baa98f}
#scarlet-bag-v30 .mail-ranking-place strong{font:25px/1 var(--sc-font-display)}
#scarlet-bag-v30 .mail-ranking-place span{font:9px var(--sc-font-ui)}
#scarlet-bag-v30 .mail-ranking-result[data-podium=true] .mail-ranking-place{color:#eed293;text-shadow:0 0 12px #ba863c66}
#scarlet-bag-v30 .mail-ranking-result-copy{display:grid;gap:4px;min-width:0}
#scarlet-bag-v30 .mail-ranking-result-copy small{font:10px var(--sc-font-ui);color:#ad9881}
#scarlet-bag-v30 .mail-ranking-result-copy strong{font:16px var(--sc-font-display);color:#e3cba4}
#scarlet-bag-v30 .mail-ranking-score{font:11px var(--sc-font-ui);color:#bfab8b;white-space:nowrap}
#scarlet-bag-v30 .mail-ranking-letter .mail-attachments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#scarlet-bag-v30 .mail-ranking-letter .mail-attachment{display:flex;flex-direction:column;text-align:center;min-width:0;gap:7px;padding:10px 4px;border:1px solid #ae8c4d55;background:radial-gradient(ellipse at 50% 18%,#ab85352b,transparent 80%)}
#scarlet-bag-v30 .mail-ranking-letter .mail-attachment>div{display:flex;flex-direction:column;gap:5px}
#scarlet-bag-v30 .mail-ranking-letter .mail-reward-icon{width:52px;height:52px;object-fit:contain}
#scarlet-bag-v30 .mail-ranking-letter .mail-attachment span{font:11px/1.3 var(--sc-font-ui)}
#scarlet-bag-v30 .mail-ranking-letter .mail-attachment strong{color:#f0d495;font:18px var(--sc-font-display)}
#scarlet-bag-v30 .ranking-casket .art-icon{width:32px;height:32px;object-fit:contain}

/* Milestones share the receipt tiles, while retaining their story and unlock text. */
#scarlet-bag-v30 .milestone-dialog .milestone-title{font:23px/1.25 var(--sc-font-display);color:#d5b67a;margin:8px 0 12px;overflow-wrap:anywhere}
#scarlet-bag-v30 .milestone-dialog .milestone-note{margin:12px 0;color:#b9aa96;font:13px/1.5 var(--sc-font-ui)}
#scarlet-bag-v30 .milestone-dialog>button{width:100%;min-height:44px;margin:14px 0 0}
#scarlet-bag-v30 .milestone-rewards{margin:10px 0 12px;padding-top:10px;border-top:1px solid #80644040;gap:6px}
#scarlet-bag-v30 .milestone-rewards::before{inset:0}
#scarlet-bag-v30 .milestone-dialog .milestone-rewards .received-reward-art{height:104px}
#scarlet-bag-v30 .milestone-dialog .milestone-rewards .received-reward-icon{width:86px;height:70px}
#scarlet-bag-v30 .milestone-dialog .received-reward-name{font:17px/1.3 var(--sc-font-display);color:#e5c990}
#scarlet-bag-v30 .received-reward.is-experience .received-reward-icon,
#scarlet-bag-v30 .milestone-dialog .milestone-rewards .received-reward.is-experience .received-reward-icon{width:80px;height:64px}
#scarlet-bag-v30 .received-reward.is-experience .received-reward-icon>img{width:64px;max-width:100%;height:42px;margin:0 auto}

.appearance-intro{display:grid;grid-template-columns:64px 1fr;gap:8px 14px;align-items:center;margin-bottom:14px}
.appearance-mask{width:64px;grid-row:span 2}.appearance-intro p{margin:0;color:var(--muted);font-size:14px}.appearance-deadline{color:#d8bb78;font-size:12px}
.appearance-wallet,.appearance-price{display:flex;align-items:center;justify-content:center;gap:5px;color:#e0c18b}.appearance-wallet{margin:12px 0}
.appearance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-bottom:20px}
.appearance-card{min-width:0;text-align:center;padding:10px 6px;border:1px solid #78593666;background:radial-gradient(ellipse at 50% 20%,#b4873c18,transparent 70%)}
.appearance-portrait{position:relative;width:100%;aspect-ratio:1;max-width:160px;margin:auto}.appearance-portrait>img{display:block;width:100%;height:100%;object-fit:contain}
.appearance-card h3{font-size:16px;line-height:1.3;min-height:2.6em;margin:8px 0}.appearance-card .action{width:100%;margin-top:8px;font-size:14px;padding-inline:5px}.appearance-shop>.action{width:100%}
.appearance-preview{text-align:center}.appearance-preview>img{width:190px;max-width:70%;display:block;margin:0 auto 14px}.appearance-preview>.action{width:100%;margin-top:12px}.appearance-preview .art-icon{vertical-align:middle}
button.appearance-portrait{display:block;padding:0;border:0;background:none;cursor:pointer}.appearance-shop>.action{margin-bottom:16px}

.appearance-bonus{color:#cdb47f;font-size:13px;line-height:1.3;margin:10px 0;min-height:1.3em}.appearance-preview .appearance-bonus{font-size:18px}