/* A scalable two-sided character roster, independent from the battle HUD. */
.menu.rosterMenu{background:radial-gradient(ellipse at 18% 38%,#4c2b206b,transparent 46%),radial-gradient(ellipse at 83% 38%,#133f596b,transparent 46%),#11151bf5;padding:24px 30px 18px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.rosterHeader{display:flex;justify-content:space-between;align-items:center;gap:20px}.rosterHeader h1{font-size:29px;letter-spacing:3px;margin:4px 0;color:#f8eee1}.rosterHeader .eyebrow{font-size:9px;color:#b19b84;letter-spacing:3px}.rosterHeader .segmented{width:310px}.rosterHeader .segmented button{padding:10px;font-size:12px}.rosterFilterBar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff15;padding-top:12px}.rosterFilters{display:flex;gap:7px}.rosterFilters button{padding:7px 18px;background:transparent;border:1px solid #ffffff24;font-size:11px;color:#a9adb3}.rosterFilters button.selected{color:#f8e7ce;border-color:#bd9270;background:#b47b4022}.rosterFilterBar>span{font-size:10px;color:#889099;letter-spacing:1px}.pickDuo{display:grid;grid-template-columns:1fr 1fr;gap:28px;flex:1;min-height:0}.pickPanel{position:relative;min-width:0;display:flex;flex-direction:column}.pickHero{position:relative;min-height:150px;flex:1;border-bottom:2px solid #ec995d;overflow:hidden;background:linear-gradient(120deg,#c8803824,transparent 80%)}.pickPanel:nth-child(2) .pickHero{border-color:#67bdde;background:linear-gradient(240deg,#4298c425,transparent 80%)}.pickHero canvas{position:absolute;right:-4%;bottom:0;width:64%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #0009);opacity:.97}.pickInfo{position:relative;z-index:1;padding:14px 0 15px 18px;pointer-events:none}.pickInfo label{font-size:10px;color:#f9b673;letter-spacing:2px;font-weight:bold}.pickPanel:nth-child(2) .pickInfo label{color:#6dc5e9}.pickInfo h2{font:italic 900 clamp(26px,4vw,58px) Impact,system-ui;margin:12px 0 0;letter-spacing:1px;color:#fff4e4;text-shadow:0 3px 12px #0007}.pickInfo strong{font-size:20px;letter-spacing:3px;color:#d9cbbd}.pickInfo p{font-size:10px;color:#b3b6b8;letter-spacing:1px;max-width:53%;line-height:1.8;margin:8px 0 0}.rosterGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}.rosterCard{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5px 3px 8px;background:#1c222b;border:1px solid #ffffff16;border-radius:2px;transition:background .12s,border-color .12s}.rosterCard:hover:not(:disabled){background:#32333a;border-color:#be9b79}.rosterCard.selected{border-color:#f6b579;box-shadow:inset 0 -2px #f6b579;background:#463527}.pickPanel:nth-child(2) .rosterCard.selected{border-color:#66c7e9;box-shadow:inset 0 -2px #66c7e9;background:#233d4b}.rosterCard:disabled{opacity:.53;cursor:not-allowed}.rosterIcon{display:block;width:52px;height:43px;overflow:hidden}.rosterIcon canvas{width:52px;height:52px;object-fit:cover}.rosterIcon i{font:italic 900 30px Impact,system-ui;color:#697580;line-height:43px;letter-spacing:2px}.rosterText strong{display:block;font-size:11px;color:#ece2d8}.rosterText small{display:block;font-size:8px;letter-spacing:1px;color:#a4a3a1;margin-top:3px}.pickMark{display:none;position:absolute;top:0;left:0;background:#edac71;color:#17161c;font-size:8px;padding:2px 4px;font-weight:900}.selected .pickMark{display:block}.pickPanel:nth-child(2) .pickMark{background:#6ec6e5}.rosterFooter{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:2px;padding-top:12px;border-top:1px solid #ffffff18}.rosterFooter p{margin:0;color:#90959c;font-size:10px;line-height:1.9}.rosterFooter p strong{color:#ddc6b0;font-size:12px;font-weight:500}.rosterFooter .startButton{min-width:240px;border-radius:2px;box-shadow:none;background:#e2b88e;letter-spacing:2px;font-size:15px;padding:15px 30px}.rosterMenu~.stageCaption{display:none}.arena:has(.rosterMenu:not(.hidden)) .stageCaption{display:none}.arena:has(.rosterMenu.hidden) .stageCaption{display:flex}
@media(max-width:1100px){.menu.rosterMenu{padding:15px 20px 12px;gap:10px}.rosterHeader h1{font-size:22px}.rosterHeader .segmented{width:270px}.rosterHeader .segmented button{font-size:10px;padding:7px}.pickDuo{gap:20px}.pickHero{min-height:110px}.pickInfo{padding:8px 0 8px 12px}.pickInfo h2{margin-top:7px}.pickInfo strong{font-size:16px}.pickInfo p{font-size:9px}.rosterGrid{gap:5px;margin-top:8px}.rosterIcon{height:29px;width:38px}.rosterIcon canvas{width:38px;height:38px}.rosterIcon i{font-size:23px;line-height:29px}.rosterText strong{font-size:10px}.rosterCard{padding:3px 2px 5px}.rosterFooter{padding-top:8px}.rosterFooter .startButton{padding:11px 22px;font-size:12px;min-width:185px}}
@media(max-width:700px){.arena:has(.rosterMenu:not(.hidden)){aspect-ratio:auto;min-height:690px}.rosterHeader{align-items:flex-start;gap:10px}.rosterHeader .segmented{width:205px}.rosterHeader .segmented button{font-size:9px;padding:8px 3px}.rosterHeader h1{font-size:18px}.rosterHeader .eyebrow{font-size:7px;letter-spacing:1px}.rosterFilterBar>span{display:none}.rosterFilters button{padding:7px 15px}.pickDuo{gap:12px}.pickHero{min-height:210px;max-height:245px}.pickHero canvas{width:100%;height:150px;right:0;opacity:.85}.pickInfo{padding:9px}.pickInfo h2{font-size:29px;margin-top:6px}.pickInfo strong{font-size:15px}.pickInfo p{max-width:100%;font-size:8px;margin-top:4px}.pickInfo label{font-size:9px}.rosterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.rosterIcon{height:27px}.rosterCard{padding:3px}.rosterText small{font-size:7px}.rosterFooter p{font-size:8px}.rosterFooter p strong{font-size:10px}.rosterFooter .startButton{min-width:130px;padding:13px;font-size:11px}.menu.rosterMenu{padding:14px;gap:12px}}
@media(max-width:700px){.pickHero canvas{height:125px}}
.arena>canvas{filter:none}
/* Shared roster: one set of breed cards, two independent player markers. */
.sharedRoster{flex:none}.pickDuo{min-height:175px}.pickHero{min-height:175px}.pickPanel.active .pickHero{box-shadow:inset 0 0 0 1px #f3b47755}.pickPanel.active:nth-child(2) .pickHero{box-shadow:inset 0 0 0 1px #6ec6e566}.sharedRoster .rosterFilterBar{padding-top:10px;gap:16px}.playerPicker{display:flex;gap:6px}.playerPicker button{border:1px solid #ffffff20;background:#1c222b;color:#b6b9c0;font:900 15px system-ui;padding:9px 21px;border-radius:2px;min-width:130px}.playerPicker button span{font-size:10px;font-weight:500;margin-left:8px}.playerPicker button[data-pick-side="0"].selected{background:#f2b17c;color:#241d19;border-color:#ffc28e}.playerPicker button[data-pick-side="1"].selected{background:#7dc9e9;color:#102737;border-color:#a9e5ff}.poolHeading{display:flex;align-items:center;justify-content:space-between;margin:11px 0 7px;font-size:10px;color:#d7c6b4}.poolHeading small{font-size:9px;color:#848e99}.sharedRoster .rosterGrid{grid-template-columns:repeat(8,minmax(0,1fr));margin:0;gap:8px}.sharedRoster .rosterCard{padding:12px 4px 10px;min-height:106px}.sharedRoster .rosterIcon{height:49px;width:64px}.sharedRoster .rosterIcon canvas{width:64px;height:64px}.sharedRoster .rosterIcon i{line-height:49px}.sharedRoster .rosterText strong{font-size:12px}.sharedRoster .rosterText small{font-size:9px}.rosterCard.picked1{border-color:#e9a164;box-shadow:inset 0 -2px #e9a164;background:#3a2b22}.rosterCard.picked2{border-color:#6ebddc;box-shadow:inset 0 -2px #6ebddc;background:#223542}.rosterCard.picked1.picked2{border-color:#c5b6a5;background:linear-gradient(120deg,#432f24 48%,#223b4b 52%);box-shadow:inset 0 -2px #c5b6a5}.pickMarks{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between}.pickMarks .pickMark{position:static;display:none;font-size:10px;padding:2px 6px}.pickMarks .p1{background:#f2ad76}.pickMarks .p2{background:#78c7e6;margin-left:auto}.picked1 .pickMarks .p1,.picked2 .pickMarks .p2{display:block}.sharedRoster .rosterCard.selected{outline:1px solid #ffffff77;outline-offset:2px}.playerPicker button:focus-visible,.rosterCard:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:1100px){.pickDuo,.pickHero{min-height:125px}.sharedRoster .rosterCard{min-height:81px;padding:9px 3px 6px}.sharedRoster .rosterIcon{height:34px;width:44px}.sharedRoster .rosterIcon canvas{width:44px;height:44px}.sharedRoster .rosterIcon i{font-size:24px;line-height:34px}.sharedRoster .rosterText strong{font-size:10px}.sharedRoster .rosterText small{font-size:8px}.playerPicker button{padding:7px 12px;min-width:105px}.poolHeading{margin:8px 0 6px}}
@media(max-width:700px){.arena:has(.rosterMenu:not(.hidden)){min-height:695px}.pickDuo{flex:1;min-height:205px}.pickHero{min-height:205px;max-height:none}.sharedRoster .rosterGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.sharedRoster .rosterCard{min-height:82px}.sharedRoster .rosterFilterBar{gap:8px;flex-wrap:wrap}.playerPicker button{min-width:80px;padding:7px 10px}.playerPicker button span{display:none}.rosterFilters{gap:4px}.rosterFilters button{padding:7px 9px;font-size:10px}.poolHeading small{display:none}.rosterFooter{gap:12px}.rosterFooter p{max-width:55%;line-height:1.7}.sharedRoster .rosterIcon{height:32px}}
/* A compact result card leaves the stage and the outcome animations visible. */
#resultOverlay{display:block;background:transparent;backdrop-filter:none;pointer-events:none;padding:0}
#resultOverlay .result{position:absolute;top:21%;left:50%;transform:translateX(-50%);width:360px;max-width:50%;padding:16px 20px 14px;pointer-events:auto;background:linear-gradient(150deg,#201e23f5,#35271eed);box-shadow:0 12px 35px #0006;border:1px solid #e1b58155;border-radius:4px;text-align:center}
#resultOverlay .eyebrow{font-size:9px;letter-spacing:3px;color:#e2b88e}#resultOverlay h2{font-size:30px;line-height:1.2;margin:7px 0}#resultOverlay p{font-size:11px;line-height:1.6;margin:7px 0 12px;color:#cfbda9}#resultOverlay button{display:inline-block;width:auto;font-size:11px;margin:0;padding:10px 12px;border-radius:2px;box-shadow:none}#resultOverlay .quietButton{margin-left:6px;color:#e5cbae}
@media(max-width:700px){#resultOverlay .result{padding:8px;max-width:65%;top:19%}#resultOverlay h2{font-size:18px;margin:4px 0}#resultOverlay .eyebrow{font-size:7px;letter-spacing:1px}#resultOverlay p{font-size:8px;margin:3px 0 6px}#resultOverlay button{font-size:8px;padding:7px}}
.pickInfo p.weaponDescription{color:#c4c0b7;font-size:10px;line-height:1.7;max-width:46%;margin-top:14px;padding-left:9px;border-left:2px solid #a5a8b044}.sharedRoster .rosterText small{font-size:8px;letter-spacing:0}.pickPanel[data-species="cat"] .pickHero{background-image:linear-gradient(120deg,#654e7624,transparent 80%)}
@media(max-width:1100px){.pickInfo p.weaponDescription{font-size:8px;margin-top:8px;max-width:48%}}
@media(max-width:700px){.pickInfo p.weaponDescription{display:none}}

/* 24 fighters share one pool; portraits stay compact while picks remain readable. */
.arena:has(.rosterMenu:not(.hidden)){min-height:790px;aspect-ratio:auto}
.pickDuo,.pickHero{min-height:155px}.pickHero canvas{height:210px}
.sharedRoster .rosterCard{min-height:78px;padding:5px 3px}.sharedRoster .rosterIcon{height:38px}
.sharedRoster .rosterIcon canvas{width:50px;height:50px}.sharedRoster .rosterText strong{font-size:11px}
.sharedRoster .rosterGrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
@media(max-width:1100px){.sharedRoster .rosterGrid{grid-template-columns:repeat(6,minmax(0,1fr))}.arena:has(.rosterMenu:not(.hidden)){min-height:900px}}
@media(max-width:700px){.sharedRoster .rosterGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.arena:has(.rosterMenu:not(.hidden)){min-height:1120px}.pickDuo,.pickHero{min-height:155px}.pickHero canvas{height:140px}.sharedRoster .rosterCard{min-height:82px}.sharedRoster .rosterText strong{font-size:10px}}

/* Four modes in priority order. */
#modes{width:440px;flex-shrink:0}
#modes button{font-size:12px;padding:10px 9px}
#modes button[disabled]{opacity:.55;cursor:not-allowed}
#modes small{font-size:9px;margin-left:3px;color:#ad9bac}
@media(max-width:950px){#modes{width:365px}#modes button{font-size:10px;padding:8px 6px}#modes small{font-size:8px}}
@media(max-width:700px){.rosterHeader{flex-wrap:wrap;gap:12px}#modes{width:100%;max-width:440px}}

/* Long weapon descriptions must grow the selected-fighter row, not overlap the shared pool. */
.menu.rosterMenu .pickDuo{flex:1 0 auto;min-height:220px}
@media(min-width:1101px){.arena:has(.rosterMenu:not(.hidden)){min-height:850px}}