/* Animated selection lighting. Confined to menu surfaces and small controls. */
@property --trace-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes selectionTrace{to{--trace-angle:360deg}}
@keyframes selectionSheen{0%,45%{transform:translateX(-230%) skewX(-24deg);opacity:0}50%{opacity:.45}78%{opacity:.18}85%,100%{transform:translateX(410%) skewX(-24deg);opacity:0}}
@keyframes platformBreath{0%,100%{opacity:.45;transform:scaleX(.9)}50%{opacity:.8;transform:scaleX(1.03)}}

body{background:radial-gradient(ellipse at 8% 0,#51322542,transparent 42%),radial-gradient(ellipse at 96% 13%,#123a5947,transparent 44%),#101219}
.topbar{background:linear-gradient(110deg,#211c20ee,#101923f5 70%,#142431ee);border-bottom-color:#e8b47440;box-shadow:0 4px 28px #0005,inset 0 -1px #64ceff0d}
.topbar .brand{mix-blend-mode:screen}.brand .gameWordmark{mix-blend-mode:normal;filter:brightness(1.08)}
.topbar nav button{transition:color .18s,text-shadow .18s,background .18s}
.topbar nav button:hover{color:#fff1d5;text-shadow:0 0 14px #f4b26588}
.arena:has(.rosterMenu:not(.hidden)){border-color:#cea16c5c;box-shadow:0 22px 80px #0006,0 0 30px #4bbdff09,inset 0 0 0 1px #ffe6c90a}
.menu.rosterMenu{background:linear-gradient(115deg,#ce87440b,transparent 30%,transparent 68%,#58c8ff0a),repeating-linear-gradient(90deg,transparent 0 89px,#a3c4e203 90px),repeating-linear-gradient(0deg,transparent 0 89px,#a3c4e203 90px),radial-gradient(ellipse at 12% 32%,#5a32234d,transparent 48%),radial-gradient(ellipse at 92% 32%,#16496552,transparent 48%),#0d121bf5}
.rosterHeader .eyebrow{color:#dab480;text-shadow:0 0 12px #e8ba6350}
.selectHeading img{filter:drop-shadow(0 4px 3px #0009) drop-shadow(0 0 16px #e2b66b26)}
.rosterHeader .segmented{background:#090f19c9;border-color:#778c9d40;box-shadow:inset 0 1px 12px #0005}

/* Each selected surface owns its beam, so switching sides changes the light. */
.rosterCard.picked1,.rosterCard.picked2,.playerPicker button.selected,.rosterFilters button.selected,.rosterHeader .segmented button.selected,.pickPanel.active .pickHero{--trace-color:#ffc16d;--trace-secondary:var(--trace-color);--trace-aura:#f7a5473b;position:relative;isolation:isolate}
.rosterCard.picked2,.playerPicker button[data-pick-side="1"].selected,.pickPanel.active:nth-child(2) .pickHero{--trace-color:#73ddff;--trace-aura:#49bfff3b}
.rosterCard.picked1.picked2{--trace-color:#ffc16d;--trace-secondary:#73ddff;--trace-aura:#a5c4ec38}
.rosterCard.picked1::before,.rosterCard.picked2::before,.playerPicker button.selected::before,.rosterFilters button.selected::before,.rosterHeader .segmented button.selected::before,.pickPanel.active .pickHero::before{content:'';position:absolute;inset:-1px;z-index:4;padding:2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--trace-angle),transparent 0 29%,var(--trace-color) 39%,#fff5db 44%,transparent 49% 76%,var(--trace-secondary) 88%,#effcff 91%,transparent 96%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:selectionTrace 3.4s linear infinite}
.rosterCard.picked2::before{animation-direction:reverse;animation-delay:-1.2s}
.rosterCard.picked1.picked2::before{animation-direction:normal;animation-delay:0s}
.pickPanel.active .pickHero::before{inset:0;padding:2px;animation-duration:5s}
.playerPicker button.selected::before,.rosterFilters button.selected::before,.rosterHeader .segmented button.selected::before{padding:1.5px;animation-duration:3s}

.sharedRoster .rosterCard{overflow:hidden;background:linear-gradient(145deg,#242e3bd9,#141c29f2);border-color:#7894ae28;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.sharedRoster .rosterCard:hover:not(:disabled){transform:translateY(-3px);background:linear-gradient(145deg,#344559,#1d2839);border-color:#bfdfff8a;box-shadow:0 5px 18px #0005,0 0 18px #8cd9ff17;z-index:2}
.sharedRoster .rosterCard.picked1{background:radial-gradient(ellipse at 50% 0,#a867315c,transparent 78%),linear-gradient(145deg,#30231e,#1e2029);border-color:#ffbf6970;box-shadow:0 0 17px var(--trace-aura),inset 0 0 14px #fbb75c15}
.sharedRoster .rosterCard.picked2{background:radial-gradient(ellipse at 50% 0,#308fba5c,transparent 78%),linear-gradient(145deg,#1a3142,#19202b);border-color:#75dcff70;box-shadow:0 0 17px var(--trace-aura),inset 0 0 14px #65cfff18}
.sharedRoster .rosterCard.picked1.picked2{background:linear-gradient(120deg,#623d2866,#232735 48%,#20557870);border-color:#b5c7dba0}
.sharedRoster .rosterCard.selected{outline:1px solid #ffeaca50;outline-offset:3px}
.rosterCard .rosterIcon{transition:transform .2s,filter .2s}
.rosterCard:is(.picked1,.picked2) .rosterIcon{transform:translateY(-1px) scale(1.05);filter:drop-shadow(0 0 7px var(--trace-aura))}
.rosterCard:is(.picked1,.picked2)::after{content:'';position:absolute;inset:-30% auto -30% 0;width:32%;background:linear-gradient(90deg,transparent,#fff7de44,transparent);pointer-events:none;z-index:3;animation:selectionSheen 5.8s ease-in-out infinite}
.rosterCard.picked2::after{animation-delay:-2.5s}
.pickMarks{z-index:5}.pickMarks .p1{background:linear-gradient(120deg,#ffda91,#e5a25b);color:#2c1d12;box-shadow:0 2px 9px #f8af5455}.pickMarks .p2{background:linear-gradient(120deg,#a1ecff,#55b9ef);color:#102c40;box-shadow:0 2px 9px #59caff55}

.pickPanel .pickHero{background:linear-gradient(120deg,#9d572126,#1517220a 70%),radial-gradient(ellipse at 70% 85%,#cf8c331b,transparent 63%);border-bottom-color:#f8b46a99}
.pickPanel:nth-child(2) .pickHero{background:linear-gradient(240deg,#26799d2b,#111a230a 70%),radial-gradient(ellipse at 70% 85%,#328baa26,transparent 63%);border-bottom-color:#72d7ff99}
.pickHero canvas{z-index:1}.pickHero .pickInfo{z-index:2}
.pickPanel .pickHero::after{content:'';position:absolute;right:0;bottom:4px;width:58%;height:15px;border-radius:50%;background:radial-gradient(ellipse,#ffcf894a,transparent 68%);box-shadow:0 0 26px #ed9e4815;pointer-events:none;animation:platformBreath 4s ease-in-out infinite}
.pickPanel:nth-child(2) .pickHero::after{background:radial-gradient(ellipse,#78d9ff55,transparent 68%);box-shadow:0 0 26px #58caff15;animation-delay:-2s}
.pickPanel.active .pickHero{box-shadow:inset 0 0 30px var(--trace-aura),0 0 15px #0003}
.pickInfo label{text-shadow:0 0 12px currentColor}.pickInfo h2{text-shadow:0 3px 14px #0008,0 0 25px #f7ca8224}
.pickPanel:nth-child(2) .pickInfo h2{text-shadow:0 3px 14px #0008,0 0 25px #77d5f328}
.playerPicker button,.rosterFilters button{overflow:hidden;transition:color .2s,background .2s,box-shadow .2s}
.playerPicker button[data-pick-side="0"].selected{color:#ffdfaa;background:linear-gradient(120deg,#593723,#332728);border-color:#fac4836b;box-shadow:0 0 15px #f5b36125,inset 0 1px #ffe0a925}
.playerPicker button[data-pick-side="1"].selected{color:#c8f4ff;background:linear-gradient(120deg,#1b4b62,#1d2e43);border-color:#88ddff7a;box-shadow:0 0 15px #68d1ff25,inset 0 1px #b1ecff25}
.rosterFilters button.selected{color:#ffe7ba;background:linear-gradient(135deg,#5b422b77,#27242b);border-color:#dbb47a77}
.rosterHeader .segmented button.selected{overflow:hidden;color:#ffedc7;background:linear-gradient(135deg,#79553177,#28252c);border:0;box-shadow:0 0 17px #d8a15e24,inset 0 1px #ffe5b921;text-shadow:0 1px 7px #000}
.rosterFooter .startButton{position:relative;isolation:isolate;overflow:hidden;color:#2d1f19;background:linear-gradient(115deg,#ffe0a8,#e6b473 50%,#f7d698);border:1px solid #ffeac08a;box-shadow:0 4px 20px #e6a75425,inset 0 1px #fff8dfb8;transition:filter .2s,box-shadow .2s,transform .2s}
.rosterFooter .startButton:not(:disabled):hover{filter:brightness(1.1);box-shadow:0 5px 26px #e6a75452;transform:translateY(-1px)}
.rosterFooter .startButton:not(:disabled)::after{content:'';position:absolute;inset:-50% auto -50% 0;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,#fff9e3b0,transparent);animation:selectionSheen 6s ease-in-out infinite;animation-delay:-3s}
.communityLinks{background:linear-gradient(115deg,#5d392022,#113b5127),#111723;border-color:#b593613d}.communityActions button:hover{box-shadow:0 0 20px #f4c0771a}
@media(min-width:1101px){.arena:has(#challengePanel:not(.hidden)):has(.rosterMenu:not(.hidden)){min-height:910px}}

@media(prefers-reduced-motion:reduce){.rosterCard::before,.rosterCard::after,.pickHero::before,.pickHero::after,.playerPicker button::before,.rosterFilters button::before,.rosterHeader .segmented button::before,.rosterFooter .startButton::after{animation:none!important;--trace-angle:35deg}.rosterCard::after,.rosterFooter .startButton::after{display:none}.sharedRoster .rosterCard:hover:not(:disabled){transform:none}.rosterCard .rosterIcon{transition:none}}