/* Approved composition A, with the full-width rectangular sell target from B.
   Reuse approved raster paper/title/button assets; keep character card skins. */
body #expedition-dialog>.preparation-title{display:none}
body dialog#expedition-dialog[data-mode=gear],body dialog#roster-skill-menu{
 --text:#183446;--muted:#53646a;--accent:#31586c;--line:#31586c45;
 box-sizing:border-box;position:fixed;inset:0;margin:auto;height:fit-content;
 max-height:90dvh;overflow:visible;isolation:isolate;border:0;border-radius:0;
 color:var(--text);background:none;box-shadow:0 22px 65px #0008;
 padding:44px 32px 24px;
}
body dialog#expedition-dialog[data-mode=gear]{width:min(1400px,94vw,calc((100dvh - 400px) * 1340 / 704 + 80px));max-width:94vw}
body dialog#expedition-dialog[data-mode=gear]::before,body dialog#roster-skill-menu::before{
 content:"";position:absolute;inset:-7px;pointer-events:none;z-index:-1;
 border:34px solid transparent;border-image:url("../assets/ui/common/parchment-panel-v2.png") 145 155 140 155 fill / 34px / 0 round;
}
body dialog#expedition-dialog[data-mode=gear]::backdrop,body dialog#roster-skill-menu::backdrop{background:#07121bb8;backdrop-filter:blur(3px)}
body dialog#expedition-dialog[data-mode=gear]>.preparation-title,body dialog#roster-skill-menu>.preparation-title{
 display:grid;place-items:center;box-sizing:border-box;position:absolute;z-index:1;
 top:-30px;left:50%;transform:translateX(-50%);width:320px;max-width:90%;height:64px;
 padding:12px 30px;margin:0;border:0;clip-path:none;
 background:url("../assets/ui/common/title-plaque-v3.png") 50% 49%/100% 182% no-repeat;
 font:900 25px/1.2 "Noto Sans TC","Microsoft JhengHei",sans-serif;letter-spacing:4px;
 color:#f6dbad;text-shadow:0 1px 1px #000;
}
body #expedition-dialog[data-mode=gear]>.ui-panel-body{max-height:calc(90dvh - 80px);overflow:auto;padding:2px 7px;overscroll-behavior:contain;scrollbar-color:#627784 #deccaa}
body #expedition-dialog[data-mode=gear] #expedition-title,
body #expedition-dialog[data-mode=gear] .expedition-head,
body #expedition-dialog[data-mode=gear] .shop-sidebar,
body #expedition-dialog[data-mode=gear] .expedition-footnote,
body #expedition-dialog[data-mode=gear] #roster-cancel{display:none}
body #expedition-dialog[data-mode=gear] .roster-row{min-width:0}
body #expedition-dialog[data-mode=gear] .roster-scroll{padding:2px 3px;overflow:auto}
body #expedition-dialog[data-mode=gear] .roster-heading{padding:12px 2px 4px;color:var(--text)}
body #expedition-dialog[data-mode=gear] .roster-heading h3{font:700 17px/1.5 "PMingLiU",serif;color:var(--text);letter-spacing:2px}
body #expedition-dialog[data-mode=gear] .roster-heading>span{order:2;color:var(--muted)}
body #expedition-dialog[data-mode=gear] #roster-divider{display:none}
/* Approved independent PNG skins: fixed corners and sparks; stretch only plain middle sections. */
body #expedition-dialog .raster-divider{display:none}
body #expedition-dialog[data-mode=gear] #roster-sell-zone{
 --art-height:54px;--cap-width:calc(var(--art-height) * 100 / 269);
 position:sticky;box-sizing:border-box;width:100%;margin:0 0 6px;height:var(--art-height);min-height:var(--art-height);
 color:#f2dfb9;font:700 15px/1.6 "Microsoft JhengHei",sans-serif;letter-spacing:2px;
 display:grid;place-items:center;padding:0 var(--cap-width);
 border:0;border-radius:0;outline:0;box-shadow:none;
 background:transparent url("../assets/ui/preparation/v1/sell-zone.png") 50% 50.1099%/113.243% calc(var(--art-height) * 724 / 269) no-repeat;
 background-origin:content-box;background-clip:content-box;
}
body #expedition-dialog[data-mode=gear] #roster-sell-zone::before,
body #expedition-dialog[data-mode=gear] #roster-sell-zone::after{
 content:"";position:absolute;pointer-events:none;top:0;bottom:0;width:var(--cap-width);
 background:transparent url("../assets/ui/preparation/v1/sell-zone.png") 1.3031% 50.1099%/calc(var(--art-height) * 2172 / 269) calc(var(--art-height) * 724 / 269) no-repeat;
}
body #expedition-dialog[data-mode=gear] #roster-sell-zone::before{left:0}
body #expedition-dialog[data-mode=gear] #roster-sell-zone::after{right:0;background-position:98.6969% 50.1099%}
body #expedition-dialog[data-mode=gear] #roster-sell-zone.drop-hover{
 background:transparent url("../assets/ui/preparation/v1/sell-zone.png") 50% 50.1099%/113.243% calc(var(--art-height) * 724 / 269) no-repeat!important;
 background-origin:content-box!important;background-clip:content-box!important;
}
body #expedition-dialog[data-mode=gear] .roster-heading{gap:8px}
body #expedition-dialog[data-mode=gear] .roster-heading::after{display:none}
body #expedition-dialog[data-mode=gear] .roster-heading>.raster-divider{--divider-height:14px;display:flex;position:relative;flex:1;order:1;min-width:50px;height:var(--divider-height);padding:0;background:none}
body #expedition-dialog[data-mode=gear] .roster-heading>.raster-divider-left{order:-1;flex:0 0 22px;min-width:22px}
body #expedition-dialog[data-mode=gear] .raster-divider>i{display:block;height:100%;flex:none;pointer-events:none;background:transparent url("../assets/ui/preparation/v1/divider-v2.png") var(--piece-x) 49.8466%/var(--piece-scale) calc(var(--divider-height) * 731 / 79) no-repeat}
body #expedition-dialog[data-mode=gear] .raster-divider>i.divider-line{flex:1;min-width:0}
/* The title consumes space on the left. Measure the leading stroke so the
   central spark stays at the BOARD midpoint, not the remaining line midpoint. */
body #expedition-dialog[data-mode=gear] .roster-heading>.raster-divider:not(.raster-divider-left)>i.divider-line:nth-child(2){flex:0 0 var(--divider-leading-width,0px)}

body #expedition-dialog[data-mode=gear] #roster-sell-zone.drop-hover{filter:brightness(1.2)}
body #expedition-dialog[data-mode=gear] .roster-toolbar{justify-content:center;margin:12px 0 0}
body #expedition-dialog[data-mode=gear] #roster-skill,body #roster-skill-menu .skill-picker-actions button{
 margin:0;min-height:50px;max-width:100%;padding:12px 32px;border:0;border-radius:999px;
 background:transparent url("../assets/ui/common/capsule-button-v3.png") 50% 50%/100% 150% no-repeat;
 color:#f6dbad;font:700 14px/1.5 "Microsoft JhengHei",sans-serif;letter-spacing:2px;text-shadow:0 1px 1px #000;
}
body #expedition-dialog[data-mode=gear] #roster-skill:hover,body #roster-skill-menu .skill-picker-actions button:hover:not(:disabled){filter:brightness(1.15)}
/* Source alpha bounds are x15..2156/y131..583 in 2172x724.
   150% keeps the entire painted capsule inside the control (165% clipped it). */
body #expedition-dialog[data-mode=gear] #roster-skill{box-sizing:border-box;width:min(360px,100%);min-height:76px;padding:18px 38px;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #roster-skill-menu .skill-picker-actions button{box-sizing:border-box;min-width:min(200px,100%);min-height:62px;font-size:15px}
body #expedition-dialog[data-mode=gear] .roster-inspect{color:var(--text);border-color:var(--line)}
body #expedition-dialog[data-mode=gear] .expedition-message{margin:8px 0 0;padding:6px 10px;min-height:28px;box-sizing:border-box;color:#65432b;background:transparent;font-size:12px}
body #expedition-dialog[data-mode=gear] .expedition-note{color:#65432b}
body dialog#roster-skill-menu{width:min(820px,92vw);max-width:92vw;padding:42px 28px 22px}
body #roster-skill-menu .skill-picker-body{container-type:inline-size;display:flex;flex-direction:column;gap:12px;max-height:calc(90dvh - 70px);min-height:0}
body #roster-skill-menu #skill-options-note{flex:none;margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
/* Exactly three compact rows fit; subsequent skills scroll independently. */
body #roster-skill-menu #roster-skill-options{box-sizing:border-box;display:flex;flex-direction:column;gap:8px;flex:0 1 auto;min-height:56px;max-height:calc((100cqi - 72px) * 397 / 2158 * 3 + 22px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-color:#546d7a #dac6a4;padding:3px 6px 3px 44px}
/* Preserve the painted PNG's 2158:397 ratio, independently of popup width.
   Native image scaling also preserves the frame and its transparent margins. */
body #roster-skill-menu .skill-choice{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:clamp(6px,2cqi,12px);text-align:left;flex:none;width:100%;height:auto;aspect-ratio:2158 / 397;padding:clamp(5px,1.5cqi,8px) clamp(14px,4cqi,24px);min-width:0;border:0;border-radius:0;background:url("../assets/ui/skill-picker/v1/skill-option-paper-v4.png") 50% 47.5%/100% auto no-repeat,linear-gradient(#f2d7b1,#f2d7b1) center/90% 70% no-repeat;color:#1c4054;box-shadow:none;text-shadow:none}
body #roster-skill-menu .skill-choice:hover{filter:brightness(1.06)}
body #roster-skill-menu .skill-choice[aria-pressed=true]{filter:none}
body #roster-skill-menu .skill-choice[aria-pressed=true]::after{content:"";position:absolute;pointer-events:none;left:-25px;top:50%;width:36px;height:49px;background:url("../assets/ui/common/selection-mineral-muted-v2.png") center/contain no-repeat;transform:translateY(-50%) rotate(-90deg);animation:skill-arrow-float 3s ease-in-out infinite}
@keyframes skill-arrow-float{0%,100%{transform:translate(0,-50%) rotate(-90deg)}50%{transform:translate(-6px,-50%) rotate(-90deg)}}
@media(prefers-reduced-motion:reduce){body #roster-skill-menu .skill-choice[aria-pressed=true]::after{animation:none}}
body #roster-skill-menu .skill-choice strong{font:700 clamp(12px,2.6cqi,15px)/1.4 "Microsoft JhengHei",sans-serif;letter-spacing:1px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body #roster-skill-menu .skill-choice-icon{display:grid;place-items:center;flex:none;width:clamp(24px,6cqi,42px);height:clamp(24px,6cqi,42px);border:0;border-radius:0;background:transparent;color:inherit;font-size:clamp(20px,5cqi,26px)}
body #roster-skill-menu .skill-choice-image{width:100%;height:100%;object-fit:contain;border-radius:4px}
body #roster-skill-menu .skill-selected-details{box-sizing:border-box;flex:1 1 190px;min-height:100px;max-height:230px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:14px 8px 6px;border-top:1px solid #31586c88;scrollbar-color:#546d7a #dac6a4;overflow-wrap:anywhere}
body #roster-skill-menu #skill-selected-name{font-size:17px;line-height:1.5}
body #roster-skill-menu #skill-selected-cooldown{font-size:13px;color:#4c6572;margin:8px 0}
body #roster-skill-menu #skill-selected-cooldown:not(:empty){display:flex;align-items:center;gap:7px}
body #roster-skill-menu #skill-selected-cooldown:not(:empty)::before{content:"";flex:none;width:18px;height:21px;background:url("../assets/ui/character-details/icons-v1/interval.png") center/contain no-repeat}
body #roster-skill-menu #skill-selected-cooldown:empty{display:none}
body #roster-skill-menu #skill-selected-description{white-space:pre-wrap;font-size:14px;line-height:1.9;color:#233e4b;margin:0}
body #roster-skill-menu #skill-picker-error{font-size:12px;color:#863a30;margin:0;flex:none}
body #roster-skill-menu #skill-picker-error:empty{display:none}
body #roster-skill-menu .skill-picker-actions{display:flex;justify-content:center;gap:12px;flex:none;flex-wrap:wrap}
body #roster-skill-menu .skill-picker-actions button:disabled{opacity:.4;cursor:not-allowed}
body #roster-skill-menu :focus-visible{outline:2px solid #955c30;outline-offset:2px}
/* Keep native scroll behavior while theming both list and description rails. */
body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details){scrollbar-width:thin;scrollbar-color:#345364 #dbc49a;scrollbar-gutter:stable}
@supports selector(::-webkit-scrollbar){
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details){scrollbar-width:auto;scrollbar-color:auto}
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details)::-webkit-scrollbar{width:22px;background:transparent}
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details)::-webkit-scrollbar-track{border:0;border-radius:0;box-shadow:none;background:transparent url("../assets/ui/skill-picker/v1/scroll-track.png") center/990% 104% no-repeat}
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details)::-webkit-scrollbar-thumb{min-height:48px;border:0;border-radius:0;background:transparent url("../assets/ui/skill-picker/v1/scroll-thumb.png") center/215% 116% no-repeat}
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details)::-webkit-scrollbar-thumb:hover{background:transparent url("../assets/ui/skill-picker/v1/scroll-thumb.png") center/215% 116% no-repeat}
 body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details)::-webkit-scrollbar-button{display:none;width:0;height:0}
}
@media(forced-colors:active){body #roster-skill-menu :is(#roster-skill-options,.skill-selected-details){scrollbar-color:auto}}
@media(max-width:650px){
 body dialog#expedition-dialog[data-mode=gear]{width:94vw;padding:38px 17px 16px}
 body #expedition-dialog[data-mode=gear] .roster-row{min-width:720px}
 body #expedition-dialog[data-mode=gear] #roster-skill{flex-basis:auto;letter-spacing:1px;padding-inline:25px}
 body dialog#roster-skill-menu{padding:38px 17px 16px}
 body dialog#expedition-dialog[data-mode=gear]>.preparation-title,body dialog#roster-skill-menu>.preparation-title{width:280px;height:56px;top:-27px;font-size:21px;letter-spacing:2px}
 body dialog#expedition-dialog[data-mode=gear]::before,body dialog#roster-skill-menu::before{border-width:25px;border-image-width:25px}
 body #roster-skill-menu .skill-picker-actions button{font-size:12px;padding-inline:23px}
}
@media(max-height:650px){body #roster-skill-menu .skill-picker-body{gap:8px}body #roster-skill-menu #roster-skill-options{flex-basis:160px;min-height:64px}body #roster-skill-menu .skill-selected-details{min-height:64px;flex-basis:110px}}