/* Character gallery: shares the game's nautical metals, wood and wanted papers. */
#game-modal[data-menu-type="roster"]{width:min(1180px,calc(100vw - 32px));max-width:1180px;border-color:#54727c;background:#0c1b25;border-radius:14px}
#game-modal[data-menu-type="roster"]>header{background:#132b35;border-bottom:1px solid #3c5966;padding:17px 23px}
#game-modal[data-menu-type="roster"] #modal-body{padding:22px}
.character-roster{color:#e5e1cf;font-family:'DM Sans',sans-serif;font-size:12px;min-width:0}
.character-roster *{box-sizing:border-box}
.character-roster [hidden]{display:none!important}
.character-roster button,.character-roster input,.character-roster select{font-family:'DM Sans',sans-serif}
.character-roster button{cursor:pointer;transition:border-color .15s,background .15s}
.character-roster button:disabled{cursor:default;opacity:.6}
.character-roster button:focus-visible,.character-roster input:focus-visible,.character-roster select:focus-visible{outline:2px solid #f2c579;outline-offset:3px}
.character-roster .pirate-icon{object-fit:contain;flex:none}
.character-roster .roster-sprite{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 4px 3px #0004);width:96px;height:96px;max-width:none}
.roster-banner{display:flex;align-items:center;gap:20px;padding:23px;border:1px solid #697454;border-radius:12px;background:radial-gradient(ellipse at 80% 0%,#a78a3830,transparent 60%),linear-gradient(125deg,#203c3e,#12242f);position:relative;overflow:hidden}
.roster-banner::after{content:'';position:absolute;width:170px;height:170px;border:1px solid #ba9b4830;border-radius:50%;right:-48px;top:-95px;pointer-events:none}
.roster-banner-icon{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:13px;background:#07192077;border:1px solid #81966955}
.roster-banner-icon .pirate-icon{width:60px;height:60px}
.roster-banner-copy{flex:1;min-width:0}
.character-roster .roster-banner-copy small,.roster-detail-title small,.roster-catalog-title small{font-size:9px;letter-spacing:1.6px;font-weight:700;color:#e3b96b;display:block}
.character-roster .roster-banner h2{font:700 34px/1.1 'Barlow Condensed',sans-serif;color:#f3e7c9;margin:7px 0}
.character-roster .roster-banner p{margin:0;color:#a9c2c7;font-size:12px;line-height:1.6}
.roster-collection{width:160px;text-align:right;position:relative;z-index:1;flex:none}
.roster-collection>b{display:block;color:#f3d493;font:700 38px/1.1 'Barlow Condensed',sans-serif}
.roster-collection>b>span{font-size:25px;color:#9ab1b8}
.roster-collection>small{display:block;font-size:8px;letter-spacing:.8px;margin:7px 0 10px;color:#bacdcc}
.character-roster progress{width:100%;height:5px;appearance:none;border:0;border-radius:3px;overflow:hidden;background:#071b23;display:block}
.character-roster progress::-webkit-progress-bar{background:#071b23;border-radius:3px}
.character-roster progress::-webkit-progress-value{background:linear-gradient(90deg,#548c82,#d8b660);border-radius:3px}
.character-roster progress::-moz-progress-bar{background:#8cad86;border-radius:3px}
.roster-top-actions{display:flex;align-items:center;gap:8px;margin:12px 0 21px}
.roster-top-actions>span{font-size:10px;color:#96b3bf;margin-left:auto;max-width:420px;text-align:right;line-height:1.6}
.character-roster .roster-action{border:1px solid #516b79;border-radius:6px;background:#152b36;color:#e3dfcd;padding:9px 13px;font-size:11px;font-weight:600;min-height:38px;line-height:1.4;text-align:center;white-space:normal}
.character-roster .roster-action:hover:enabled{border-color:#d1af62;background:#234149}
.character-roster .roster-action.primary{background:linear-gradient(120deg,#f8d087,#e4b354);border-color:#e8bb68;color:#17212a}
.character-roster .roster-action.primary:hover:enabled{background:#ffdb90}
.roster-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 19px}
.character-roster .roster-highlight{display:flex;align-items:center;text-align:left;gap:10px;padding:10px 12px;min-width:0;border:1px solid #43616c;background:linear-gradient(110deg,#213943,#10232f);border-radius:9px;color:#eadfbd;position:relative;overflow:hidden}
.roster-highlight:hover{border-color:#be9e5c}
.roster-highlight>div{flex:1;min-width:0;position:relative;z-index:1}
.roster-highlight-icon .pirate-icon{width:33px;height:33px}
.character-roster .roster-highlight small{display:block;letter-spacing:.9px;font-size:8px;color:#bbac78;line-height:1.5}
.roster-highlight b{font:700 19px/1.2 'Barlow Condensed',sans-serif;display:block;overflow-wrap:anywhere;margin:4px 0}
.roster-highlight div>span{font-size:9px;color:#9cb9c6}
.character-roster .roster-highlight .roster-sprite{width:57px;height:65px;flex:none}
.roster-inspect{margin-bottom:25px;border:1px solid #4d665d;border-radius:10px;background:#182e34;overflow:hidden}
.roster-inspect>summary{cursor:pointer;display:flex;align-items:center;gap:12px;padding:9px 15px;list-style:none;color:#eddbb5}
.roster-inspect>summary::-webkit-details-marker{display:none}
.roster-inspect>summary:focus-visible{outline:2px solid #f2c579;outline-offset:-3px}
.character-roster .roster-inspect>summary .roster-sprite{width:40px;height:40px;flex:none}
.roster-inspect>summary>span:first-of-type{flex:1;min-width:0}
.roster-inspect>summary small{display:block;font-size:8px;letter-spacing:1px;color:#b8a875}
.roster-inspect>summary b{display:block;font:700 21px/1.2 'Barlow Condensed',sans-serif;margin-top:4px;overflow-wrap:anywhere}
.roster-inspect-hint{font-size:10px;color:#b9c6ba}
.roster-inspect>summary::after{content:'';display:block;width:7px;height:7px;flex:none;border-right:2px solid #dbbb79;border-bottom:2px solid #dbbb79;transform:rotate(45deg);margin-left:5px;margin-top:-4px}
.roster-inspect[open]>summary::after{transform:rotate(225deg);margin-top:5px}
.roster-inspect[open]>summary{border-bottom:1px solid #4d665d}
.roster-inspect .roster-detail{border:0;border-radius:0;margin:0}
.roster-detail{display:grid;grid-template-columns:195px minmax(0,1fr);gap:24px;padding:22px;border-radius:12px;border:1px solid #667653;background:linear-gradient(125deg,#203534,#142833 65%);margin:0 0 30px}
.roster-wanted{background:linear-gradient(125deg,#f1e3bc,#ccba8d);padding:13px 14px;border:1px solid #bdaa77;box-shadow:3px 4px 0 #040d1533,-2px -2px 0 #ddd0a018;transform:rotate(-1deg);text-align:center;color:#253935;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;min-width:0}
.roster-wanted>small{font:700 22px 'Barlow Condensed',sans-serif;letter-spacing:3px}
.roster-detail-art{position:relative;margin:9px 0 3px;background:radial-gradient(circle,var(--hero-tint),#e4d5b65c 70%);border:1px solid #75816644;width:100%;max-width:165px;display:grid;place-items:center;aspect-ratio:1}
.roster-detail-art::after,.roster-card-art::after{content:'';position:absolute;left:25%;right:25%;bottom:10%;height:8px;border-radius:50%;filter:blur(3px);background:#081d2933;pointer-events:none}
.character-roster .roster-detail-art .roster-sprite{width:150px;height:150px;position:relative;z-index:1}
.roster-wanted>span{font:700 17px/1.2 'Barlow Condensed',sans-serif;margin:7px 0;overflow-wrap:anywhere}
.roster-wanted>b{border:1px solid #87703f;transform:rotate(-3deg);padding:5px 7px;max-width:100%;font-size:9px;line-height:1.5;color:#725735}
.roster-wanted>b.unlocked{color:#356256;border-color:#577966}
.roster-detail-content{min-width:0}
.roster-detail-title{display:flex;gap:14px;justify-content:space-between;align-items:center;margin-bottom:14px}
.roster-detail-title>div{min-width:0}
.character-roster .roster-detail h3{font:700 32px/1.1 'Barlow Condensed',sans-serif;color:#f0dfb8;margin:5px 0;overflow-wrap:anywhere}
.roster-detail-title p{font-size:12px;color:#9bb9c5;margin:0}
.roster-role{display:inline-flex;align-items:center;gap:4px;color:#f1b798;border:1px solid #ad71504a;border-radius:5px;padding:2px 7px;font-size:10px;flex:none;background:#482d2922}
.roster-role .pirate-icon{width:22px;height:22px}
.roster-role.role-tank{color:#a2d9ee;border-color:#6aa6ce44;background:#27517022}
.roster-role.role-support{color:#9bd6b8;border-color:#7eae7944;background:#34665322}
.roster-form-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:500px}
.roster-form-picker>button{padding:8px 11px;text-align:left;background:#0c202b;border:1px solid #436575;border-radius:6px;color:#a8c0ca;min-width:0}
.roster-form-picker>button.active{border-color:#c3a061;background:#354334;color:#f0d28f}
.roster-form-picker b{display:block;font-size:11px;line-height:1.4}
.roster-form-picker small{display:block;font-size:9px;margin-top:3px;line-height:1.4}
.character-roster .roster-preview-note{font-size:9px;color:#9bb2bd;margin:8px 0 15px;line-height:1.6}
.roster-mastery{max-width:500px}
.roster-mastery>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:10px;color:#c7d5d7}
.roster-mastery>div>span{display:flex;align-items:center;gap:5px}
.roster-mastery .pirate-icon{width:22px;height:22px}
.roster-mastery b{color:#edc575;font-size:13px}
.roster-mastery>small{display:block;font-size:9px;color:#93b2c0;margin-top:6px}
.character-roster .roster-passive{display:flex;flex-direction:column;gap:3px;font-size:10px;line-height:1.5;margin:13px 0;color:#a8c4cb}
.roster-passive b{color:#d4caa7;font-size:11px}
.roster-detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.character-roster .roster-availability{font-size:10px;color:#a0b8c1;line-height:1.6;margin:9px 0 0}
.roster-catalog-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}
.character-roster .roster-catalog-title h3{font:700 27px 'Barlow Condensed',sans-serif;color:#edddb9;margin:5px 0 0}
.roster-catalog-title>span{font-size:10px;color:#c3bc9e;text-align:right}
.roster-filter-panel{padding:15px;border:1px solid #3c5967;background:#112630;border-radius:10px}
.roster-status-filters{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid #334e5c;padding-bottom:12px;margin-bottom:13px}
.roster-status-filters>button{display:flex;gap:8px;align-items:center;min-height:34px;background:#152e3a;color:#b1c4cc;border:1px solid #3a5868;border-radius:6px;padding:6px 10px;font-size:10px}
.roster-status-filters>button.active{background:#344939;color:#f5d794;border-color:#b79d5b}
.roster-status-filters b{padding:3px 5px;min-width:22px;background:#091c2655;border-radius:4px;font-size:9px;text-align:center}
.roster-search-row{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;margin-bottom:12px}
.roster-search-row label{min-width:0;color:#c0d0d4;font-size:10px}
.roster-search-row label>span{display:block;margin-bottom:6px;font-weight:600}
.roster-search>div{position:relative}
.roster-search .pirate-icon{position:absolute;top:8px;left:10px;width:26px;height:26px;pointer-events:none}
.character-roster .menu-search{height:42px;padding:9px 12px;border:1px solid #4a6473;background:#091e2a;color:#e8e8d7;border-radius:6px;width:100%;min-width:0;margin:0;font-size:12px}
.character-roster .roster-search input{padding-left:43px}
.roster-secondary-filters{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.roster-role-filters{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.roster-role-filters>span{font-size:9px;color:#97b5c2;margin-right:5px}
.roster-role-filters>button{display:flex;align-items:center;gap:4px;color:#a9c1ce;border:1px solid #3b5969;border-radius:5px;background:#122d3a;padding:4px 7px;font-size:10px;min-height:30px}
.roster-role-filters>button.active{border-color:#caa763;background:#37493b;color:#f0d696}
.roster-role-filters .pirate-icon{width:22px;height:22px}
.roster-extra-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.roster-extra-filters label{display:flex;align-items:center;gap:5px;font-size:10px;color:#b0c3ca;cursor:pointer}
.roster-extra-filters input{accent-color:#ddb268;width:14px;height:14px;margin:0}
.character-roster .roster-reset{color:#e2c183;font-size:10px;padding:6px 8px;border:1px solid #7a70484d;background:#1e3338;border-radius:5px}
.character-roster .roster-role-note{font-size:9px;line-height:1.6;color:#91aebc;margin:9px 2px 15px}
.roster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.roster-card{display:flex;flex-direction:column;min-width:0;border:1px solid #405a68;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#19313b,#102431);transition:border-color .15s,box-shadow .15s}
.roster-card.locked{border-style:dashed;background:linear-gradient(135deg,#122630,#0d202b)}
.roster-card.is-preview{border-color:#d6ad60;box-shadow:0 0 0 1px #d6ad6055}
.roster-card.is-current{background:linear-gradient(135deg,#2a433c,#142e37)}
.character-roster .roster-card-preview{width:100%;min-width:0;border:0;background:none;text-align:center;padding:12px 12px 0;color:#efe0b9;position:relative}
.roster-card-preview:hover{background:#7ebfba08}
.roster-status{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.5px;color:#9bb4bc;min-height:20px;line-height:1.3;max-width:100%;padding:4px 7px;border:1px solid #6385913b;border-radius:4px;background:#0b1d2555}
.roster-status.current{color:#eacd88;border-color:#b3935355;background:#6c7e2822}
.roster-status.busy{color:#acd2ee;border-color:#71a9c650}
.roster-card-art{position:relative;display:grid;place-items:center;height:113px;margin:5px auto;background:radial-gradient(ellipse at center,#688c8730,transparent 70%)}
.roster-card-art .roster-sprite{position:relative;z-index:1;width:112px;height:112px}
.character-roster .roster-card h4{font:700 22px/1.1 'Barlow Condensed',sans-serif;margin:4px 0;min-height:25px;overflow-wrap:anywhere;color:#efd9a4}
.character-roster .roster-card p{font:10px/1.5 'DM Sans',sans-serif;margin:4px 0 12px;min-height:15px;color:#9db7c4}
.roster-card-meta{display:flex;gap:5px;justify-content:space-between;align-items:center;margin:0 12px 10px}
.roster-card-meta .roster-role{font-size:9px;padding:1px 4px}
.roster-card-meta .pirate-icon{width:18px;height:18px}
.roster-small-mastery{font-size:9px;color:#b9bdac;text-align:right}
.roster-card-progress{margin:auto 12px 11px;min-height:29px}
.roster-card-progress>span{display:flex;gap:5px;align-items:center;color:#95b0c1;font-size:9px;min-height:29px;line-height:1.5}
.roster-card-progress>span.awakened{color:#8dccb0}
.roster-card-progress .pirate-icon{width:23px;height:23px}
.roster-card-progress label{display:flex;gap:5px;justify-content:space-between;font-size:9px;color:#a7bdc8;line-height:1.5;margin-bottom:6px}
.roster-card-progress label b{color:#e3c281}
.roster-card-actions{display:flex;gap:6px;padding:0 12px 12px}
.character-roster .roster-card-actions .roster-action{flex:1;padding:7px 6px;min-height:34px;font-size:10px}
.roster-empty{border:1px dashed #4b6878;text-align:center;border-radius:10px;padding:30px 16px;background:#0e222d}
.roster-empty>.pirate-icon{width:56px;height:56px}
.character-roster .roster-empty h4{font:700 26px 'Barlow Condensed',sans-serif;color:#e6ce9d;margin:10px 0}
.character-roster .roster-empty p{font-size:12px;color:#a4becb;line-height:1.6}
@media(max-width:900px){
 .roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .roster-highlight-icon{display:none}
 .roster-highlight b{font-size:17px}
 .roster-banner{gap:13px;padding:18px}
 .roster-banner h2{font-size:30px}
 .roster-banner-icon{width:60px;height:60px}
 .roster-collection{width:145px}
 .roster-detail{grid-template-columns:170px minmax(0,1fr);gap:18px;padding:18px}
 .roster-top-actions>span{max-width:300px}
}
@media(max-width:600px){
 #game-modal[data-menu-type="roster"]{width:calc(100vw - 14px);max-width:none;border-radius:11px}
 #game-modal[data-menu-type="roster"]>header{padding:12px 13px;gap:8px}
 #game-modal[data-menu-type="roster"]>header h2{font-size:21px}
 #game-modal[data-menu-type="roster"] #modal-body{padding:12px}
 .roster-banner{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:14px}
 .roster-banner-icon{width:42px;height:47px;border-radius:8px;align-self:start}
 .roster-banner-icon .pirate-icon{width:38px;height:38px}
 .roster-banner-copy small{font-size:7px;letter-spacing:.9px}
 .character-roster .roster-banner h2{font-size:27px;margin:4px 0}
 .character-roster .roster-banner p{font-size:10px;line-height:1.6}
 .roster-collection{grid-column:1/-1;width:100%;display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;text-align:left;gap:2px 10px;padding-top:7px;border-top:1px solid #63807544}
 .roster-collection>b{font-size:27px;grid-row:1/3}
 .roster-collection>b>span{font-size:18px}
 .roster-collection>small{font-size:8px;letter-spacing:.5px;margin:2px 0 3px}
 .roster-top-actions{flex-wrap:wrap;margin:10px 0 15px}
 .roster-top-actions>span{width:100%;max-width:none;text-align:left;font-size:9px}
 .character-roster .roster-action{padding:8px 10px;font-size:10px}
 .roster-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:13px}
 .character-roster .roster-highlight{padding:8px 5px;gap:4px;flex-direction:column-reverse;text-align:center}
 .roster-highlight-icon{display:none}
 .character-roster .roster-highlight .roster-sprite{width:40px;height:40px}
 .character-roster .roster-highlight small{font-size:6px;letter-spacing:.4px;line-height:1.5;min-height:18px}
 .roster-highlight b{font-size:15px;margin:3px 0;min-height:35px;display:flex;align-items:center;justify-content:center}
 .roster-highlight div>span{font-size:7px}
 .roster-inspect{margin-bottom:20px}
 .roster-inspect>summary{padding:9px 10px;gap:8px}
 .roster-inspect>summary small{font-size:7px;letter-spacing:.6px}
 .roster-inspect>summary b{font-size:19px}
 .roster-inspect-hint{font-size:8px;max-width:45px;text-align:right;line-height:1.5}
 .roster-detail{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:13px;margin-bottom:24px;align-items:start}
 .roster-wanted{padding:6px;grid-column:1;grid-row:1;align-self:start}
 .roster-wanted>small{font-size:15px;letter-spacing:1px}
 .roster-detail-art{width:77px;max-width:100%;margin:6px 0 0}
 .character-roster .roster-detail-art .roster-sprite{width:76px;height:76px}
 .roster-wanted>span{font-size:13px;margin:5px 0}
 .roster-wanted>b{font-size:7px;padding:3px 4px}
 .roster-detail-content{display:contents}
 .roster-detail-title{grid-column:2;grid-row:1;display:block;margin:4px 0 0}
 .roster-detail-title small{font-size:7px;letter-spacing:.7px}
 .character-roster .roster-detail h3{font-size:27px;line-height:1.05;margin:8px 0 6px}
 .roster-detail-title p{font-size:10px;line-height:1.5;margin-bottom:9px}
 .roster-detail-content>*:not(.roster-detail-title){grid-column:1/-1}
 .roster-form-picker{gap:5px;width:100%;margin-top:0}
 .roster-form-picker>button{padding:7px 9px}
 .roster-form-picker b{font-size:10px}
 .roster-form-picker small{font-size:8px}
 .character-roster .roster-preview-note{margin:-5px 0 0;font-size:8px}
 .roster-mastery{width:100%}
 .character-roster .roster-passive{margin:0;font-size:9px}
 .roster-detail-actions{gap:6px}
 .roster-detail-actions>.roster-action{flex:1}
 .character-roster .roster-availability{margin:0;font-size:9px}
 .roster-catalog-title{margin:0 0 11px;align-items:end}
 .roster-catalog-title small{font-size:7px;letter-spacing:.8px}
 .character-roster .roster-catalog-title h3{font-size:25px;margin-top:4px}
 .roster-catalog-title>span{font-size:9px;max-width:90px;line-height:1.5}
 .roster-filter-panel{padding:11px}
 .roster-status-filters{gap:5px;padding-bottom:10px;margin-bottom:10px}
 .roster-status-filters>button{padding:6px 7px;font-size:9px;gap:5px;min-height:34px;flex-grow:1;justify-content:center}
 .roster-status-filters b{font-size:8px;padding:3px 4px;min-width:19px}
 .roster-search-row{grid-template-columns:1fr;gap:10px;margin-bottom:11px}
 .roster-search-row label>span{font-size:9px}
 .character-roster .menu-search{font-size:11px}
 .roster-role-filters{gap:5px}
 .roster-role-filters>span{width:100%;margin-bottom:1px;font-size:8px}
 .roster-role-filters>button{font-size:9px;gap:3px;padding:4px 5px;min-height:32px}
 .roster-role-filters .pirate-icon{width:19px;height:19px}
 .roster-extra-filters{gap:10px;font-size:9px;width:100%}
 .roster-extra-filters label{font-size:9px}
 .roster-extra-filters .roster-reset{margin-left:auto}
 .character-roster .roster-role-note{font-size:8px;margin-bottom:12px}
 .roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .roster-card-preview{padding:10px 7px 0}
 .roster-status{font-size:7px;letter-spacing:0;padding:4px;min-height:20px}
 .roster-card-art{height:92px;margin:3px 0}
 .roster-card-art .roster-sprite{width:88px;height:88px}
 .character-roster .roster-card h4{font-size:20px;min-height:42px;display:flex;align-items:center;justify-content:center;line-height:1.1}
 .character-roster .roster-card p{font-size:9px;min-height:27px;line-height:1.5;margin-bottom:7px}
 .roster-card-meta{margin:0 8px 7px;gap:3px;flex-wrap:wrap}
 .roster-small-mastery{font-size:8px}
 .roster-card-meta .roster-role{font-size:8px}
 .roster-card-meta .pirate-icon{width:16px;height:16px}
 .roster-card-progress{margin:auto 8px 9px;min-height:32px}
 .roster-card-progress>span{font-size:8px;line-height:1.5;min-height:32px;gap:3px}
 .roster-card-progress .pirate-icon{width:19px;height:19px}
 .roster-card-progress label{font-size:8px;gap:2px}
 .roster-card-actions{padding:0 8px 9px;gap:4px}
 .character-roster .roster-card-actions .roster-action{font-size:9px;padding:7px 4px;min-height:35px}
}
@media(prefers-reduced-motion:reduce){.character-roster button,.roster-card{transition:none}}