/* Fighters screen, owner's mock-up: castle-wall backdrop, a gold-framed Selected Squad panel with a crown,
   chunky filter chips and a two-column grid of fighter cards. Loaded last; overrides collection.css,
   squad.css and fighters.css for this screen. */
#collection-view{background:linear-gradient(180deg,#0a1230b8,#0a1230e6 30%,#0a1230f5 60%),url('/assets/shop/castle.webp') center top/cover fixed;padding:12px 10px 22px}

/* Title */
#collection-view .collection-heading .eyebrow{font:800 11px/1 'Nunito Sans',sans-serif;letter-spacing:2px;color:#a9c4f2}
#collection-view .collection-heading h1{margin:4px 0 4px;font:400 38px/1 'Lilita One',sans-serif;color:#ffd84a;-webkit-text-stroke:2px #6b3508;paint-order:stroke fill;text-shadow:0 3px 0 #6b3508,0 6px 8px #0008}
#collection-view .collection-intro{margin:0 2px 18px;font-size:13px;font-weight:700;color:#e3ecff}

/* Selected Squad panel */
#collection-view .squad-editor{position:relative;margin:0 0 14px;padding:14px 10px 12px;border-radius:16px;border:2px solid #e2b553;background:linear-gradient(180deg,#22407e,#162d61 60%,#122653);box-shadow:0 0 0 2px #081028,0 5px 0 2px #050a1d,0 10px 14px #0007,inset 0 2px 0 #ffffff2e}
.squad-crown{position:absolute;top:-17px;left:50%;width:38px;height:30px;transform:translateX(-50%);filter:drop-shadow(0 2px 0 #6b3508) drop-shadow(0 3px 4px #0008)}
#collection-view .squad-editor-heading strong{font:400 22px/1 'Lilita One',sans-serif;letter-spacing:.5px;color:#ffd84a;-webkit-text-stroke:1.5px #6b3508;paint-order:stroke fill;text-shadow:0 2px 0 #6b3508}
#collection-view .squad-editor-heading>span{font:400 18px/1 'Lilita One',sans-serif;padding:4px 10px;border:2px solid #e2b553;border-radius:9px;background:#0a1636;color:#fff;-webkit-text-stroke:1px #081028;paint-order:stroke fill}
/* Squad cards (owner's pick C, 2026-10-30): collector cards with a level-coloured frame, name on top, level stars and a
   Power gem hanging under the card. Gold at level 10, silver from 5, blue below, like the fighter cards' frames. */
#collection-view .squad-slots{gap:9px;margin:12px 0 24px}
#collection-view .squad-slot.filled{--frame:linear-gradient(180deg,#fff2b0,#ffd24a 35%,#b8730f);--frame-edge:#3a1e00;position:relative;display:block;height:clamp(134px,36.5vw,152px);padding:0;border:0;border-radius:13px;background:var(--frame);box-shadow:0 0 0 2px var(--frame-edge),inset 0 2px 0 #ffffffaa,0 4px 0 #050a1d,0 7px 9px #0006;overflow:visible;text-align:center}
#collection-view .squad-slot.filled.is-silver{--frame:linear-gradient(180deg,#ffffff,#d5e0ee 40%,#7d90ad);--frame-edge:#1c2a44}
#collection-view .squad-slot.filled.is-blue{--frame:linear-gradient(180deg,#bfe1ff,#5d9cf0 40%,#22489a);--frame-edge:#0a1636}
#collection-view .squad-slot.filled.is-gold{box-shadow:0 0 0 2px var(--frame-edge),inset 0 2px 0 #ffffffaa,0 0 14px #ffc83d88,0 4px 0 #050a1d,0 7px 9px #0006}
#collection-view .squad-card-face{position:absolute;inset:4px;display:block;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 56%,#ffffffd9 0,color-mix(in srgb,var(--slot-color) 72%,#fff) 26%,color-mix(in srgb,var(--slot-color) 78%,#000) 78%);box-shadow:inset 0 0 0 1.5px #0005,inset 0 -10px 16px #0004}
#collection-view .squad-card-face::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 58%,#ffffff1f 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle at 50% 58%,#000 20%,transparent 68%);mask:radial-gradient(circle at 50% 58%,#000 20%,transparent 68%)}
#collection-view .squad-card-face::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,#ffffff47 42%,transparent 52%);pointer-events:none}
#collection-view .squad-card-name{position:absolute;z-index:2;left:0;right:0;top:0;padding:5px 2px 6px;background:linear-gradient(180deg,#14275a,#0a1636);border-bottom:2px solid #ffd76a;box-shadow:0 2px 4px #0006;font:400 clamp(14px,4vw,17px)/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.1px #000;paint-order:stroke fill;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#collection-view .squad-slot.filled .ball-art{position:absolute;z-index:1;left:50%;top:24%;width:76%;height:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 5px 3px #0008)}
#collection-view .squad-card-stars{position:absolute;z-index:2;left:50%;bottom:17px;display:flex;gap:1px;padding:2px 5px;border-radius:999px;background:#0b1636c4;transform:translateX(-50%)}
#collection-view .squad-card-stars i{width:11px;height:11px;background:#41557f;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
#collection-view .squad-card-stars i.on{background:linear-gradient(180deg,#fff3a0,#ffc21a)}
#collection-view .squad-slot.filled>.squad-card-level{text-shadow:none;position:absolute;z-index:3;right:6px;top:29px;width:28px;height:28px;display:grid;place-content:center;border-radius:50%;background:linear-gradient(180deg,#ffd84a,#e08a00);border:2px solid #fff6c8;box-shadow:0 2px 0 #3a1400;font:400 13px/.85 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1px #5a2a00;paint-order:stroke fill}
#collection-view .squad-slot.filled>.squad-card-level small{display:block;font-size:7.5px;letter-spacing:.4px;-webkit-text-stroke-width:.6px}
#collection-view .squad-slot.filled.is-silver>.squad-card-level{background:linear-gradient(180deg,#f4f7fc,#8ea3c0);-webkit-text-stroke-color:#1c2a44}
#collection-view .squad-slot.filled.is-blue>.squad-card-level{background:linear-gradient(180deg,#7cc0ff,#2456b0);-webkit-text-stroke-color:#0a1636}
#collection-view .squad-slot.filled>i{position:absolute;z-index:4;left:-7px;top:-7px;right:auto;width:22px;height:22px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:linear-gradient(180deg,#ff6a5a,#d81f1f);box-shadow:0 2px 0 #3a1400;color:#fff;font:900 16px/1 Arial,sans-serif;font-style:normal}
/* The red "!" of a squad fighter that can level up (playtest 3, 2026-11-07): under the LV badge, clear of the next card's × */
#collection-view .squad-slot.filled>.squad-ready-dot{left:auto;right:7px;top:62px;width:22px;height:22px;font-size:15px;line-height:18px;color:#fff;text-shadow:none}
#collection-view .squad-card-power{position:absolute;z-index:4;left:50%;bottom:-15px;padding:2px;transform:translateX(-50%);filter:drop-shadow(0 2px 0 #3a1400)}
/* The gold rim is a layer under the gem, so the drop shadow on the gem's box isn't clipped away with the hex shape. */
#collection-view .squad-card-power::before,.power-badge::before{content:'';position:absolute;inset:0;background:#ffd76a;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}
#collection-view .squad-card-power>span{position:relative;display:flex;align-items:center;gap:3px;padding:4px 11px 4px 8px;background:linear-gradient(180deg,#ff9a4a,#e0480f 55%,#b8300a);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);font:400 15px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.2px #3a1400;paint-order:stroke fill;white-space:nowrap}
#collection-view .squad-card-power .pw-bolt{width:12px;height:15px}
#collection-view .squad-slot.empty{height:clamp(134px,36.5vw,152px);border:2px dashed #5b7cc0;border-radius:13px;background:#0c1c44;color:#8fa6d6}
#collection-view .squad-slot.empty>span{font:400 11px/1.2 'Lilita One',sans-serif;-webkit-text-stroke:0;text-shadow:none;color:#8fa6d6}
#collection-view .squad-editor-actions{grid-template-columns:minmax(0,1fr) 34%;gap:9px;align-items:center}
/* Squad status beside CLEAR: how many picks are left, or that the full squad saved itself. */
#collection-view .squad-status{display:flex;align-items:center;gap:5px;margin:0;font-size:12px;font-weight:700;line-height:1.3;color:#b9c8ea}
#collection-view .squad-status.is-ready{color:#9ff0a8}
#collection-view .squad-status svg{flex:none;width:16px;height:16px;stroke:#9ff0a8;stroke-width:3}
#collection-view .squad-clear{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:12px;border:2px solid #0b1f4d;background:linear-gradient(180deg,#5b9bff,#2b62d0 50%,#1d48a8);box-shadow:inset 0 2px 0 #b9d6ff,inset 0 -3px 0 #173c8c,0 3px 0 #06163a;font:400 18px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.3px #0b1f4d;paint-order:stroke fill;letter-spacing:.5px}
#collection-view .squad-clear svg{width:18px;height:18px;stroke:#fff}
#collection-view .squad-clear:disabled{filter:saturate(.4) brightness(.75)}

/* Filter chips */
#collection-view .collection-controls{gap:6px;padding:0;margin:0 0 12px;border:0;background:none;box-shadow:none}
#collection-view .collection-filters{gap:6px}
#collection-view .collection-filters button{min-height:38px;padding:0 5px;border-radius:10px;border:2px solid #2c4b8e;background:linear-gradient(180deg,#1b3570,#12275a);box-shadow:inset 0 2px 0 #ffffff1f,0 2px 0 #050a1d;font:400 14px/1 'Lilita One',sans-serif;color:#e6edff;letter-spacing:.3px}
#collection-view .collection-filters button svg{width:15px;height:15px;fill:#6ea8ff;color:#6ea8ff}
#collection-view .collection-filters button[aria-pressed=true]{border-color:#7a3d06;background:linear-gradient(180deg,#fff48e,#ffd21f 48%,#f3a50c);box-shadow:inset 0 2px 0 #fffbd2,inset 0 -3px 0 #d6870a,0 2px 0 #5a2c04;color:#fff;-webkit-text-stroke:1.2px #7a3d06;paint-order:stroke fill}

/* Two-column fighter cards: portrait | name, role, ability; stats and the action underneath. */
#collection-view .collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#collection-view .collection-card{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-areas:"art info" "stats stats" "action action";align-items:start;column-gap:6px;row-gap:6px;min-height:0;padding:9px 8px 9px;border-radius:13px;border:2px solid #2c4b8e;background:linear-gradient(180deg,#22407e,#162d61 60%,#122653);box-shadow:0 0 0 2px #081028,0 4px 0 2px #050a1d,inset 0 2px 0 #ffffff26}
#collection-view .collection-card.in-squad{border-color:#e2b553;box-shadow:0 0 0 2px #081028,0 4px 0 2px #050a1d,0 0 14px #ffd25a44,inset 0 2px 0 #ffffff26}
#collection-view .fighter-favorite{position:absolute;z-index:2;top:4px;left:4px;right:auto;width:24px;height:24px;padding:3px;color:#6ea8ff}
#collection-view .fighter-favorite svg{width:17px;height:17px}
#collection-view .collection-art{grid-area:art;position:relative;display:grid;place-items:center;width:58px;height:64px;margin-top:10px;padding:0;border:0;background:radial-gradient(ellipse 50% 22% at 50% 82%,color-mix(in srgb,var(--fighter-color) 70%,transparent),transparent 72%);cursor:pointer}
#collection-view .collection-art .ball-art{width:62px;max-width:none;height:auto;filter:drop-shadow(0 4px 3px #0009)}
#collection-view .collection-info{grid-area:info;min-width:0}
#collection-view .collection-info h2{margin:0 0 2px;font:400 18px/1.05 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.2px #081028;paint-order:stroke fill;text-shadow:0 2px 0 #081028}
#collection-view .collection-info .eyebrow{display:block;margin:0 0 3px;font:400 10px/1.15 'Lilita One',sans-serif;letter-spacing:.4px;color:#6fc3ff}
#collection-view .collection-info>p{margin:0;font-size:10.5px;font-weight:700;line-height:1.3;color:#d3def7}
#collection-view .collection-stats{grid-area:stats;display:grid;gap:3px}
#collection-view .stat-row{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:5px;margin:0;font-size:10px;font-weight:800;color:#a9bde6}
#collection-view .stat-row>span:first-child{width:auto}
#collection-view .stat-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
#collection-view .stat-bars i{height:6px;border-radius:2px;background:#0b1636;box-shadow:inset 0 1px 2px #000a}
#collection-view .stat-bars .filled{background:linear-gradient(180deg,#fff6b0,#ffd23a 50%,#f0a514);box-shadow:none}
#collection-view .squad-toggle{grid-area:action;display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 6px;border-radius:9px;font:400 13px/1 'Lilita One',sans-serif;letter-spacing:.4px;color:#fff;cursor:pointer}
#collection-view .squad-toggle svg{width:14px;height:14px;flex:none}
#collection-view .squad-toggle.is-add{border:2px solid #0b1f4d;background:linear-gradient(180deg,#5b9bff,#2b62d0 50%,#1d48a8);box-shadow:inset 0 2px 0 #b9d6ff,inset 0 -3px 0 #173c8c,0 2px 0 #06163a;-webkit-text-stroke:1px #0b1f4d;paint-order:stroke fill}
#collection-view .squad-toggle.is-picked{border:2px solid #5e3a10;background:linear-gradient(180deg,#e9c46a,#b8862f 55%,#8e6320);box-shadow:inset 0 2px 0 #fff0b8,inset 0 -3px 0 #7a5418,0 2px 0 #3a2508;-webkit-text-stroke:1px #5e3a10;paint-order:stroke fill}
#collection-view .squad-toggle.is-picked svg{stroke:#fff;stroke-width:3.5}
#collection-view .squad-toggle.is-buy{border:2px solid #2c4b8e;background:#0a1636;box-shadow:inset 0 2px 4px #0009;font-size:16px;-webkit-text-stroke:1px #081028;paint-order:stroke fill}
#collection-view .squad-toggle.is-buy svg{width:20px;height:20px}
#collection-view .squad-toggle:active{transform:translateY(2px)}
#collection-view .fighter-locked .collection-art .ball-art{filter:drop-shadow(0 4px 3px #0009) saturate(.85)}
@media(max-width:360px){
  #collection-view .collection-card{grid-template-columns:50px minmax(0,1fr);padding-inline:6px}
  #collection-view .collection-art{width:50px}
  #collection-view .collection-art .ball-art{width:54px}
  #collection-view .collection-info h2{font-size:16px}
}
#collection-view .collection-filters button{font-size:13px}
#collection-view .collection-card .fighter-favorite{position:absolute}

/* ===== Owner's Fighters sheet: title sign, fighter-coloured cards, coloured stat bars with icons ===== */
#collection-view .collection-heading{text-align:center}
.fighters-title{margin:0 auto 2px;line-height:0}
.fighters-title img{width:min(92%,340px);height:auto;filter:drop-shadow(0 6px 8px #000a)}
#collection-view .collection-intro{text-align:center;margin-bottom:22px}

/* Card: big portrait on top, then name, role, ability, stats and the action. Tinted by the fighter's colour. */
#collection-view .collection-card{grid-template-columns:1fr;grid-template-areas:"art" "info" "stats" "action";row-gap:7px;padding:8px 9px 10px;border-color:color-mix(in srgb,var(--fighter-color) 55%,#2c4b8e);background:radial-gradient(ellipse 80% 45% at 50% 22%,color-mix(in srgb,var(--fighter-color) 55%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--fighter-color) 30%,#1b2a5e),#101c44 70%)}
#collection-view .collection-card.in-squad{border-color:#e2b553}
#collection-view .collection-art{width:100%;height:96px;margin:0;background:radial-gradient(ellipse 34% 12% at 50% 90%,#0008,transparent 75%)}
#collection-view .collection-art .ball-art{width:104px;height:auto}
#collection-view .collection-info h2{font-size:20px}
#collection-view .collection-info .eyebrow{color:color-mix(in srgb,var(--fighter-color) 55%,#ffffff);font-size:10.5px}
#collection-view .collection-info>p{font-size:11px;color:#e3ebff}
.lock-chip{position:absolute;right:2px;bottom:2px;display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:8px;background:#0a1636e6;border:1.5px solid #ffffff40;font:400 13px/1 'Lilita One',sans-serif;color:#fff}
.lock-chip svg{width:13px;height:13px;stroke:#fff}

/* Coloured stat bars with the sheet's icons. */
#collection-view .stat-row,dialog .stat-row{grid-template-columns:20px 44px minmax(0,1fr)}
#collection-view .stat-row:before,dialog .stat-row:before{content:'';width:20px;height:20px;background:center/contain no-repeat}
.stat-power:before{background-image:url('/assets/menu/stat-power.webp')!important}
.stat-speed:before{background-image:url('/assets/menu/stat-speed.webp')!important}
.stat-defense:before{background-image:url('/assets/menu/stat-defense.webp')!important}
#collection-view .stat-row>span:first-child{color:#e3ebff}
#collection-view .stat-bars i{height:7px}
#collection-view .stat-power .stat-bars .filled{background:linear-gradient(180deg,#ff9a8a,#f0443a 55%,#c22626)}
#collection-view .stat-speed .stat-bars .filled{background:linear-gradient(180deg,#8fd0ff,#2f8cf0 55%,#1d62c8)}
#collection-view .stat-defense .stat-bars .filled{background:linear-gradient(180deg,#9dff9a,#3fcf4a 55%,#21a033)}

/* Locked fighters: the price button in the card's own colour. */
#collection-view .squad-toggle.is-buy{border:2px solid color-mix(in srgb,var(--fighter-color) 40%,#081028);background:linear-gradient(180deg,color-mix(in srgb,var(--fighter-color) 75%,#fff 10%),color-mix(in srgb,var(--fighter-color) 70%,#081028));box-shadow:inset 0 2px 0 #ffffff55,0 3px 0 #050a1d}

/* Red Clear button, as in the sheet. */
#collection-view .squad-clear{border-color:#5a0a14;background:linear-gradient(180deg,#ff7a6e,#e0313e 50%,#b81c2c);box-shadow:inset 0 2px 0 #ffc2bb,inset 0 -3px 0 #8e1220,0 3px 0 #3d0610;-webkit-text-stroke:1.3px #5a0a14}

/* ===== Fighter levels ===== */
.level-badge{position:absolute;left:4px;bottom:2px;padding:4px 7px 3px;border-radius:8px;background:linear-gradient(180deg,#4f8dff,#1f4fc0);border:2px solid #ffd76a;box-shadow:0 2px 0 #081028;font:400 12px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1px #0b1f4d;paint-order:stroke fill}
/* Shared reward and skin reveal actions. */
.lv-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 12px;border-radius:13px;font:400 19px/1 'Lilita One',sans-serif;color:#fff;cursor:pointer}
.lv-action.is-buy{justify-content:space-between;border:2px solid #0f4a1f;background:linear-gradient(180deg,#8cf07d,#3cc451 50%,#249a3a);box-shadow:inset 0 2px 0 #d8ffd0,inset 0 -3px 0 #1c7a30,0 3px 0 #0a3a16;-webkit-text-stroke:1.4px #0f4a1f;paint-order:stroke fill}
.lv-action.is-buy span{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:9px;background:#0a2a14b3;-webkit-text-stroke:1px #0a2a14}
.lv-action.is-buy svg{width:21px;height:21px}
.lv-action.is-buy:disabled{border-color:#2b3550;background:linear-gradient(180deg,#9aa3b8,#6b7590 55%,#555e78);box-shadow:inset 0 2px 0 #d6dbe8,0 3px 0 #1a2033;-webkit-text-stroke-color:#2b3550;cursor:default}
.lv-action.is-buy span.is-short{color:#ff6a5e}
.lv-action.is-buy:not(:disabled):active{transform:translateY(2px)}
.lv-action.is-locked{border:2px solid #2b3550;background:linear-gradient(180deg,#8a93a8,#5e6780);box-shadow:inset 0 2px 0 #c6ccd9,0 3px 0 #1a2033;color:#eef2fb;-webkit-text-stroke:1.2px #2b3550;paint-order:stroke fill;cursor:default}
.lv-action.is-owned{border:2px solid #145c25;background:linear-gradient(180deg,#2c8a55,#1d6640);color:#e9ffef;cursor:default}
.lv-action.is-owned svg{width:18px;height:18px;stroke-width:4}
.sheet-back{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:15px;border:2px solid #7a3d06;background:linear-gradient(180deg,#fff48e,#ffd21f 48%,#f3a50c);box-shadow:inset 0 2px 0 #fffbd2,inset 0 -3px 0 #d6870a,0 4px 0 #5a2c04;font:400 26px/1 'Lilita One',sans-serif;color:#6b3508;cursor:pointer}
.sheet-back svg{width:24px;height:24px;stroke:#6b3508;stroke-width:3.5}
.sheet-back:active{transform:translateY(2px)}
.lv-action.is-locked svg{width:18px;height:18px;stroke:#fff}
.lv-action.is-buy{font-size:17px;white-space:nowrap;gap:6px;padding:0 10px}
.lv-action.is-buy span{padding:5px 7px}
/* The trail strip under the squad (the whole strip is the button that opens the trail picker). */
#collection-view .trail-strip{position:relative;display:grid;grid-template-columns:min(118px,27%) minmax(0,1fr) auto;align-items:center;gap:clamp(8px,2.6vw,12px);width:100%;margin:0 0 14px;padding:10px 12px;border-radius:16px;border:2px solid #e2b553;background:linear-gradient(180deg,#22407e,#162d61 60%,#122653);box-shadow:0 0 0 2px #081028,0 5px 0 2px #050a1d,inset 0 2px 0 #ffffff2e;color:#fff;text-align:left;transition:transform .15s cubic-bezier(.3,1.5,.5,1)}
#collection-view .trail-strip:active{transform:scale(.97)}
#collection-view .trail-strip>img{width:100%;height:auto;aspect-ratio:118/52;object-fit:cover;object-position:30% 50%;border-radius:10px;display:block;background:#071233}
#collection-view .trail-strip-text{min-width:0}
#collection-view .trail-strip-text small{display:block;white-space:nowrap;font:400 13px/1 'Lilita One',sans-serif;letter-spacing:.5px;color:#ffd84a;-webkit-text-stroke:1px #6b3508;paint-order:stroke fill}
#collection-view .trail-strip-text strong{display:block;margin-top:4px;overflow-wrap:anywhere;font:400 clamp(16px,4.6vw,19px)/1.1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1px #081028;paint-order:stroke fill}
#collection-view .trail-strip-change{padding:10px clamp(9px,3vw,13px);border-radius:12px;border:2px solid #6b3508;background:linear-gradient(180deg,#ffe98f,#ffc933 55%,#f0a20e);box-shadow:inset 0 2px 0 #fff6c8,0 3px 0 #6b3508;font:400 15px/1 'Lilita One',sans-serif;letter-spacing:.4px;color:#5a2a05}
/* Power (fighter-store.js fighterPower): the orange bolt icon on the fighter page and VS screen; an orange gem with the gold
   bolt on fighter cards and squad cards, and the red SQUAD POWER ribbon. */
.pw-icon{width:17px;height:17px;flex:none}
.pw-bolt{display:block;flex:none;width:13px;height:16px}
.power-badge{position:absolute;right:2px;bottom:0;padding:2px;filter:drop-shadow(0 2px 0 #3a1400);white-space:nowrap}
.power-badge>span{position:relative;display:flex;align-items:center;gap:3px;padding:4px 11px 4px 8px;background:linear-gradient(180deg,#ff9a4a,#e0480f 55%,#b8300a);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);font:400 14px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.2px #3a1400;paint-order:stroke fill}
.power-badge .pw-bolt{width:11px;height:14px}
#collection-view .squad-power{position:relative;isolation:isolate;margin:0 16px 14px;padding:0;border:0;background:none;box-shadow:none}
#collection-view .squad-power::before,#collection-view .squad-power::after{content:'';position:absolute;z-index:0;top:9px;width:26px;height:40px;background:linear-gradient(180deg,#b81a1a,#7a0c0c)}
#collection-view .squad-power::before{left:-17px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,38% 50%)}
#collection-view .squad-power::after{right:-17px;clip-path:polygon(0 0,100% 0,62% 50%,100% 100%,0 100%)}
.squad-power-ribbon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;overflow:hidden;background:linear-gradient(180deg,#ff6b5a,#e02a22 50%,#b81818);border-top:2px solid #ffd76a;border-bottom:2px solid #ffd76a;box-shadow:inset 0 2px 0 #ffb0a0,0 3px 0 #5a0a0a,0 6px 8px #0006}
.squad-power-ribbon::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff55 45%,transparent 55%);transform:translateX(-120%);animation:squad-power-shine 4.5s ease-in-out 1s infinite}
@keyframes squad-power-shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.squad-power-ribbon .pw-bolt{width:22px;height:28px;filter:drop-shadow(0 2px 0 #5a0a0a)}
.squad-power-ribbon small{font:400 13px/1 'Lilita One',sans-serif;letter-spacing:1px;color:#ffe2d6;white-space:nowrap}
.squad-power-ribbon b{font:400 26px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1.6px #5a0a0a;paint-order:stroke fill;text-shadow:0 2px 0 #5a0a0a}
@media(prefers-reduced-motion:reduce){.squad-power-ribbon::after{animation:none}}
/* Card frames: silver from level 5, gold with a sweeping shine at level 10. */
#collection-view .collection-card.frame-silver{border-color:#e8eef7;box-shadow:0 0 0 2px #8fa3bf,0 0 14px #cfe0ff88,0 3px #07152d}
#collection-view .collection-card.frame-gold{border-color:#ffd76a;box-shadow:0 0 0 2px #b8730f,0 0 18px #ffc83dcc,0 3px #07152d;background-image:linear-gradient(160deg,#ffd76a33,transparent 45%)}
/* Max level (owner's pick A "Gold shine", 2026-11-03, in place of the crown over the fighter): a shine sweeps across the
   card every few seconds and the fighter stands in a soft gold glow; the rarity colour keeps its outer ring. */
#collection-view .collection-card.frame-gold::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 40%,#fff7d055 46%,#ffffffc0 50%,#fff7d055 54%,transparent 60%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:max-shine 4s ease-in-out infinite}
@keyframes max-shine{0%,50%{background-position:120% 0}100%{background-position:-20% 0}}
#collection-view .collection-card.frame-gold .collection-art{background:radial-gradient(circle at 50% 42%,#ffd76a66,transparent 62%),radial-gradient(ellipse 34% 12% at 50% 90%,#0008,transparent 75%)}
/* The same sweep on a max-level fighter's squad card, through its own shine layer. */
#collection-view .squad-slot.filled.is-gold .squad-card-face::after{background:linear-gradient(115deg,transparent 40%,#fff7d055 46%,#ffffffc0 50%,#fff7d055 54%,transparent 60%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:max-shine 4s ease-in-out infinite}
/* Motion follows the in-game Animations switch (app.js applyMotion), like the rest of the game; at rest the band is off the card. */
.reduce-motion #collection-view .collection-card.frame-gold::before,.reduce-motion #collection-view .squad-slot.filled.is-gold .squad-card-face::after{animation:none}
.collection-card.frame-gold .level-badge{background:linear-gradient(180deg,#ffd84a,#e08a00);-webkit-text-stroke-color:#5a2a00}
.collection-card.frame-silver .level-badge{background:linear-gradient(180deg,#f2f6fb,#9aaecb);color:#1b2b4a;-webkit-text-stroke:0}
/* Swapping a 4th fighter in (owner's pick A, Spotlight, 2026-10-31): the squad asks which fighter to swap with, its cards wiggle and show swap arrows. */
#collection-view .squad-editor{scroll-margin-top:24px}
#collection-view .squad-editor.is-swapping{z-index:6;border-color:#ffe27a;animation:swap-glow 1.2s ease-in-out infinite}
@keyframes swap-glow{50%{box-shadow:0 0 0 2px #081028,0 5px 0 2px #050a1d,0 0 26px 6px #ffd84acc,inset 0 2px 0 #ffffff2e}}
.is-swapping .squad-editor-actions{display:none}
#collection-view .is-swapping .squad-slot.filled{animation:swap-wiggle .9s ease-in-out infinite}
#collection-view .is-swapping .squad-slot.filled:nth-child(2){animation-delay:-.3s}
#collection-view .is-swapping .squad-slot.filled:nth-child(3){animation-delay:-.6s}
@keyframes swap-wiggle{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-3px)}}
#collection-view .is-swapping .squad-slot.filled>i{width:28px;height:28px;left:50%;top:auto;bottom:34px;transform:translateX(-50%);background:linear-gradient(180deg,#5bd0ff,#1f74e0);border-color:#fff;color:#fff;animation:swap-arrows 1.2s ease-in-out infinite}
#collection-view .is-swapping .squad-slot.filled>i svg{width:17px;height:17px}
@keyframes swap-arrows{50%{transform:translateX(-50%) scale(1.15)}}
.swap-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin:10px 0 2px;padding:6px 8px 6px 6px;border:2px solid #ffd76a;border-radius:12px;background:linear-gradient(180deg,#2c5bb8,#173a86);box-shadow:inset 0 2px 0 #ffffff33,0 3px 0 #050a1d;animation:swap-banner-in .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes swap-banner-in{from{transform:translateY(-10px) scale(.9);opacity:0}}
.swap-banner-art{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:2px solid #fff6c8;background:radial-gradient(circle,#fff8 0,#ffd84a 60%,#e08a00);box-shadow:0 0 12px #ffd84a;animation:swap-bob 1.4s ease-in-out infinite}
.swap-banner-art .ball-art{width:42px;height:42px}
@keyframes swap-bob{50%{transform:translateY(-3px) rotate(6deg)}}
.swap-banner-text{display:grid;gap:2px;min-width:0}
.swap-banner-text b{font:400 15px/1.05 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1px #081028;paint-order:stroke fill}
.swap-banner-text small{font:700 11px/1.2 'Nunito Sans',sans-serif;color:#cfe0ff}
.swap-cancel{min-height:38px;padding:0 10px;border-radius:10px;border:2px solid #0b1f4d;background:linear-gradient(180deg,#ff6a5a,#d81f1f);box-shadow:inset 0 2px 0 #ffb4a8,0 2px 0 #3a1400;font:400 13px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:1px #5a0a00;paint-order:stroke fill}
/* Everything but the squad fades back (owner's pick, Spotlight); tapping the dark part calls the swap off. */
#collection-view.is-swapping::after{content:'';position:fixed;inset:0;z-index:5;background:#040a1ccc;animation:swap-dim .3s ease both}
@keyframes swap-dim{from{opacity:0}}
.reduce-motion :is(.swap-banner,.swap-banner-art,#collection-view .squad-editor.is-swapping,#collection-view .is-swapping .squad-slot.filled,#collection-view .is-swapping .squad-slot.filled>i){animation:none}
.reduce-motion #collection-view.is-swapping::after{animation:none}