/* Play Forge: LoL-style play screen, party lobby, social rail and add-friend dialog (pairs with play-forge.js).
   Loaded after pick-forge.css; presentation only. */

/* ===== Play screen ===== */
#matchSetup>.screenHeading,#matchSetup>.modeHeading{display:none}
#matchSetup .forgePlayTabs{display:flex;align-items:center;gap:34px;height:54px;padding:0 34px;box-shadow:inset 0 -1px 0 #000,0 1px 0 #6e5a3366;background:linear-gradient(180deg,#141a18cc,#0b100fcc)}
#matchSetup .forgePlayTab{height:100%;padding:0 2px;border:0;border-bottom:2px solid transparent;background:none;color:#a99f86;font:700 14px/1 system-ui,sans-serif;letter-spacing:.16em;cursor:pointer}
#matchSetup .forgePlayTab:hover{color:var(--forge-ivory)}
#matchSetup .forgePlayTab[aria-current="true"]{color:#fff1c9;border-bottom-color:var(--forge-brass-hi);text-shadow:0 0 8px #f0cf7455}
#matchSetup .forgeTabDivider{width:1px;height:22px;background:#6e5a3388}
#matchSetup:has(#rivalParty:not([hidden])) .forgePlayTabs{display:none}

/* Mode row: big crests with label and title, a glow under the selected mode, a brass rule beneath the row. */
#entry #matchSetup .modeChoices{position:static;inset:auto;display:flex;justify-content:flex-start;align-items:stretch;gap:0;margin:0;padding:34px 34px 0;
 background:linear-gradient(90deg,transparent,#6e5a33aa 8%,#6e5a33aa 92%,transparent) bottom/100% 1px no-repeat}
#entry #matchSetup .modeCard{width:min(330px,24vw);height:auto;margin:0;padding:0;background:none;border:0}
#entry #matchSetup .modeCrest::before{background:radial-gradient(ellipse,#f0d79a40 0%,#f0d79a18 36%,transparent 72%)}
#matchSetup .modeChoice,#matchSetup .modeChoice:hover,#matchSetup .modeChoice[aria-pressed="true"],#matchSetup .modeChoice.selected{--forge-corner-a:none;--forge-corner-b:none;
 display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:8px 10px 34px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;cursor:pointer}
#matchSetup .modeChoice::before{display:none}
#matchSetup .modeChoice .modeCrest{width:118px;height:118px;transition:transform .14s,filter .14s;filter:drop-shadow(0 6px 10px #000c)}
#matchSetup .modeChoice:hover .modeCrest{transform:translateY(-3px);filter:drop-shadow(0 0 14px #f0cf7455) drop-shadow(0 6px 10px #000c)}
#matchSetup .modeChoice .modeType{margin-top:22px;color:#e7d9ab;font:700 15px/1 system-ui,sans-serif;letter-spacing:.14em}
#matchSetup .modeChoice strong{margin-top:12px;color:#e9dcbc;font:700 30px/1.15 Georgia,serif;letter-spacing:.1em;text-transform:uppercase;text-align:center}
#matchSetup .modeChoice .modeDescription{display:none}
#matchSetup .modeChoice[aria-pressed="true"]{background:radial-gradient(60% 40% at 50% 100%,#f0d79a33,transparent 70%);box-shadow:inset 0 -2px 0 var(--forge-brass-hi)}
#matchSetup .modeChoice[aria-pressed="true"] strong{color:#fff1c9;text-shadow:0 0 14px #f0cf7444}
@media(prefers-reduced-motion:reduce){#matchSetup .modeChoice .modeCrest{transition:none}}

/* Info panel: description and queue list with diamond radios. */
#matchSetup .forgeModeInfo{width:300px;margin:26px 0 0 34px}
#matchSetup .forgeModeText{margin:0 0 18px;padding-bottom:18px;color:#eadfc0;font-size:17px;line-height:1.55;background:linear-gradient(90deg,#6e5a33aa,transparent) bottom/100% 1px no-repeat}
#matchSetup .forgeQueues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#matchSetup .forgeQueue button{display:grid;grid-template-columns:20px 1fr;column-gap:14px;width:100%;padding:4px 0;border:0;background:none;text-align:left;cursor:pointer;color:#bfb59a}
#matchSetup .forgeQueue button::before{content:"";grid-row:1/3;align-self:center;width:12px;height:12px;margin-left:3px;transform:rotate(45deg);border:2px solid var(--forge-brass)}
#matchSetup .forgeQueue[data-current="true"] button::before{background:radial-gradient(circle,#fff3c8 0 30%,var(--forge-brass) 32% 55%,transparent 58%);box-shadow:0 0 8px #f0cf7488}
#matchSetup .forgeQueue b{color:#eadfc0;font:700 15px/1.3 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
#matchSetup .forgeQueue[data-current="true"] b{color:#fff1c9}
#matchSetup .forgeQueue small{color:#a99f86;font-size:13px}

/* Confirm bar: circular X and an arrow-ended gold CONFIRM, centred at the bottom. */
#matchSetup .modeFooter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#matchSetup .forgeConfirmBar{display:flex;align-items:center;gap:0;padding:6px;border:1px solid #3a3424;border-radius:30px 4px 4px 30px;background:linear-gradient(180deg,#121816,#070a09);box-shadow:0 0 0 1px #000,0 8px 20px #000a}
#matchSetup .modeFooter .forgeCancel{flex:none;width:44px;min-width:0;height:44px;padding:0;margin-right:6px;border:2px solid var(--forge-brass);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);color:var(--forge-brass-hi);font-size:16px;cursor:pointer;box-shadow:0 0 0 1px #000}
#matchSetup .modeFooter .forgeCancel:hover{border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 12px #f0cf7455}
#matchSetup .forgeConfirmBar .modeConfirm{min-width:250px;height:44px;margin:0;padding:0 40px 0 30px;clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%);font-size:15px;letter-spacing:.22em}
#matchSetup .forgeConfirmBar .modeConfirm span{margin-left:12px}
#matchSetup .forgeConfirmBar:not(:has(.modeConfirm:not([hidden])))::after{content:"CONFIRM";display:grid;place-items:center;min-width:250px;height:44px;clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%);
 background:linear-gradient(180deg,#1c2220,#121715);color:#8d8670;font:800 15px/1 system-ui,sans-serif;letter-spacing:.22em}
#matchSetup #modeFooterText{color:#a99f86;font-size:12px}

/* ===== Party lobby ===== */
.forgePartyCrest{display:inline-block;flex:none;width:32px;height:32px;border:1px solid var(--forge-brass);border-radius:3px;background:url('icons/gate-sigil.svg') center/70% no-repeat,radial-gradient(circle at 50% 35%,#22302d,#080c0b 75%);box-shadow:0 0 0 1px #000,0 0 0 2px #5a4a2b}

/* ===== Social rail ===== */
#entry .forgePartyCard{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:14px 18px 16px;border:0;border-radius:0;text-align:left;cursor:pointer;
 background:radial-gradient(90% 120% at 100% 0,#5fa24a66,transparent 60%),linear-gradient(135deg,#2f5a2a,#1c3a1a 60%,#132a12);box-shadow:inset 0 -1px 0 #000,inset 0 1px 0 #ffffff1a}
#entry .forgePartyCard:hover{filter:brightness(1.12)}
#entry .forgePartyTitle{color:#d8f0c8;font:700 13px/1 system-ui,sans-serif;letter-spacing:.18em}
#entry .forgePartyTitle::before{content:"";display:inline-block;width:14px;height:12px;margin-right:10px;vertical-align:-1px;background:radial-gradient(circle at 50% 30%,#d8f0c8 0 28%,transparent 30%),radial-gradient(ellipse 60% 45% at 50% 100%,#d8f0c8 0 98%,transparent 100%)}
#entry .forgePartyBody{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
#entry .forgePartyBody .forgePartyCrest{grid-row:1/3;width:44px;height:44px}
#entry .forgePartyPips{display:flex;gap:6px}
#entry .forgePartyPips i{width:14px;height:16px;background:radial-gradient(circle at 50% 28%,#f6ead0 0 26%,transparent 28%),radial-gradient(ellipse 55% 45% at 50% 100%,#f6ead0 0 98%,transparent 100%)}
#entry .forgePartyCard[data-members="1"] .forgePartyPips i+i{opacity:.35}
#entry .forgePartyBody small{color:#d8f0c8;font-size:13px}
#entry .clientSidebar #socialPanel>header{display:flex;align-items:center;gap:10px;padding:14px 0 10px;box-shadow:0 1px 0 #6e5a3366}
#entry .clientSidebar #socialPanel>header h2{margin:0 auto 0 0;color:#e7d9ab;font:700 13px/1 system-ui,sans-serif;letter-spacing:.2em}
#entry .clientSidebar #addFriend,#entry .clientSidebar #filterFriends{width:30px;height:30px;padding:0;border:0;background:none;color:var(--forge-brass-hi);font-size:20px;line-height:1;cursor:pointer}
#entry .clientSidebar #addFriend:hover,#entry .clientSidebar #filterFriends:hover{color:#fff1c9;text-shadow:0 0 8px #f0cf7488}
#entry .clientSidebar .friendsHeading{display:flex;align-items:center;gap:8px;margin:12px 0 6px;padding:8px 10px;background:#ffffff08;color:#e7d9ab;font:700 12px/1 system-ui,sans-serif;letter-spacing:.16em}
#entry .clientSidebar .friendsHeading::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--forge-brass-hi)}
#entry .clientSidebar #friendsCount::before{content:"("}#entry .clientSidebar #friendsCount::after{content:")"}
#entry .clientSidebar .friendRow{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px;border-left:3px solid #4fd06a;background:linear-gradient(90deg,#4fd06a14,transparent 60%)}
#entry .clientSidebar .friendRow.offline{border-left-color:transparent;background:none;opacity:.6}
#entry .clientSidebar .friendAvatar{position:relative;flex:none;width:40px;height:40px;border:2px solid var(--forge-brass);border-radius:50%;box-shadow:0 0 0 1px #000}
#entry .clientSidebar .friendAvatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#entry .clientSidebar .friendAvatar::after{content:"";position:absolute;right:-3px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#4fd06a;box-shadow:0 0 0 2px #0d1211}
#entry .clientSidebar .friendRow.offline .friendAvatar::after{background:#6b6b62}
#entry .clientSidebar .friendDetails strong{color:#f6ead0;font-size:15px}
#entry .clientSidebar .friendDetails small{color:#4fd06a}
#entry .clientSidebar .friendRow.offline .friendDetails small{color:#8d8670}
#entry .clientSidebar .friendTag{color:#8d8670}
#entry .clientSidebar .sidebarFooter{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #3a3424;background:linear-gradient(180deg,#121816,#070a09);color:#8d8670;letter-spacing:.14em}
#entry .clientSidebar .sidebarFooter::after{content:attr(data-forge-version);color:#6e6650;font-size:11px;letter-spacing:.06em}

/* ===== Add friend dialog ===== */
#addFriendDialog.panel{width:min(880px,92vw);padding:34px 40px 56px;overflow:visible;text-align:left}
#addFriendDialog.panel .socialEyebrow{display:none}
#addFriendDialog h2{margin:0 0 14px;text-align:center;font:700 26px/1.2 Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
#addFriendDialog.panel>p{color:#d3c9ae;font-size:15px}
#addFriendDialog #friendSearchForm label{display:block;margin:18px 0 8px;font-size:12px}
#addFriendDialog.panel .friendSearchRow{display:flex;gap:14px}
#addFriendDialog #friendSearch{flex:1;height:46px;padding:0 14px;font-size:15px}
#addFriendDialog.panel .friendSearchRow .clientPrimary{min-width:150px;height:46px;border:1px solid var(--forge-brass);background:linear-gradient(180deg,#1f2421,#121614);color:#f0d79a;text-shadow:none;box-shadow:0 0 0 1px #000;letter-spacing:.1em}
#addFriendDialog.panel .friendSearchRow .clientPrimary:hover{background:linear-gradient(180deg,#2c2a20,#171711);color:#fff1c9}
#addFriendDialog #friendSearchResults{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 20px;margin-top:22px;max-height:300px;overflow:auto}
#addFriendDialog #friendSearchResults:not(:empty)::before{content:"WARDENS FOUND";grid-column:1/-1;color:var(--forge-brass);font:700 12px/1 system-ui,sans-serif;letter-spacing:.18em}
#addFriendDialog.panel .friendRow{display:flex;align-items:center;gap:12px}
#addFriendDialog.panel .friendAvatar{flex:none;width:44px;height:44px;border:2px solid var(--forge-brass);border-radius:50%;overflow:hidden}
#addFriendDialog.panel .friendAvatar img{width:100%;height:100%;object-fit:cover}
#addFriendDialog.panel .socialClose{position:absolute;top:-20px;right:-20px;z-index:4;width:42px;height:42px;padding:0;border:2px solid var(--forge-brass-hi);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);color:#f0d79a;font-size:22px;line-height:1;box-shadow:0 0 0 2px #000,0 4px 10px #000c;cursor:pointer}
#addFriendDialog.panel .socialClose:hover{box-shadow:0 0 0 2px #000,0 0 14px #f0cf7488}
#addFriendDialog.panel .forgeDone{position:absolute;left:50%;bottom:-22px;z-index:4;transform:translateX(-50%);min-width:130px;height:46px;border:1px solid var(--forge-brass-hi);border-radius:2px;
 background:linear-gradient(180deg,#2a2416,#141008);color:#f0d79a;font:800 17px/1 Georgia,serif;letter-spacing:.14em;box-shadow:0 0 0 2px #000,0 0 0 4px var(--forge-brass-lo),0 6px 14px #000c;cursor:pointer}
#addFriendDialog.panel .forgeDone:hover{color:#fff1c9;box-shadow:0 0 0 2px #000,0 0 0 4px var(--forge-brass),0 0 16px #f0cf7466}
#entry .clientSidebar .friendRow .friendTag{display:none}
#entry .clientSidebar .friendDetails{min-width:0;flex:1}
#entry .clientSidebar .friendDetails strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#entry #matchSetup .modeChoice .modeType{margin-top:52px}
#entry #matchSetup .modeChoices{gap:2vw}
@media(max-height:800px){

 #entry #matchSetup .modeChoices{padding-top:16px}#entry #matchSetup .modeChoice{padding-bottom:20px}
 #entry #matchSetup .modeChoice .modeType{margin-top:40px;font-size:13px}#entry #matchSetup .modeChoice strong{font-size:24px;margin-top:8px}
 #matchSetup .forgeModeInfo{margin-top:14px}#matchSetup .forgeModeText{font-size:14px;margin-bottom:10px;padding-bottom:10px}
 #matchSetup .forgeQueues{gap:4px}#matchSetup .forgeQueue b{font-size:13px}#matchSetup .forgeQueue small{font-size:12px}
 #matchSetup .forgePlayTabs{height:46px}}
/* Mode crests in the Forge palette (stone fill, brass rims), not the old teal. */
#entry #matchSetup .modeCrest .crestOuter{fill:#121816}
#entry #matchSetup .modeCrest .crestInner{fill:none;stroke:#6e5a33}
#entry #matchSetup .modeCrest .crestSymbol{stroke:#e7c98a!important}
#entry #matchSetup .modeChoice.selected .crestOuter{fill:#1c2421}
#entry #matchSetup .modeChoice.selected .crestInner{stroke:#f0d79a;stroke-width:3}
#entry #matchSetup .modeChoice.selected .crestSymbol{stroke:#fff1c9!important;filter:drop-shadow(0 0 6px #f0cf7488)}
/* Sweep of the last old-teal accents on out-of-match screens, so old and new palettes never mix. */
#entry .screenHeading i,#heroSelect .heroChoice i,#entry .clientPrimary span{color:var(--forge-brass)}
#heroSelect #pickerSkills h4 small,#heroSelect .selectHeader p{color:var(--forge-brass)}
#heroSelect .selectHeroName>span{color:#e7d9ab}
#heroSelect #soloOpponentChoices button:hover{border-color:var(--forge-brass);color:var(--forge-ivory)}
#heroSelect .pickerFooter p,#rivalParty .rivalFooter p,#rivalParty .rivalFooter>span{color:#bfb59a}
#heroSelect .oathHalo,#heroSelect .oathHalo:before,#heroSelect .oathHalo:after{border-color:#6e5a3366;box-shadow:none}
#entry .modeCrest::before{background:radial-gradient(ellipse,#f0d79a40 0%,#f0d79a18 36%,transparent 72%)}
#collectionPage button:focus-visible,#entry button:focus-visible,#heroSelect button:focus-visible{outline-color:var(--forge-brass-hi)}

/* ===== Party lobby, LoL-style: a tall pennant banner hanging from the header in the centre, emblem at mid-height,
   the invite circle beside it at emblem height. Content-sized (only the tail is clipped), footer flows after it. ===== */
#rivalParty{display:flex;flex-direction:column;--forge-pennant-top:clamp(24px,calc(100vh - 860px),180px)}
#rivalParty .rivalHeading{display:flex;align-items:center;justify-content:flex-start;gap:18px;flex:none;padding:14px 34px;box-shadow:inset 0 -1px 0 #000,0 1px 0 #6e5a3366}
#rivalParty .rivalHeading>div:not(.forgePartyLine){display:none}
#rivalParty #partyModes{order:-1;width:40px;height:40px;min-width:0;padding:0;border:0;background:none;box-shadow:none;font-size:0;color:var(--forge-brass)}
#rivalParty #partyModes::before{content:"\2039";font:400 40px/1 Georgia,serif;color:var(--forge-brass-hi)}
#rivalParty #partyModes:hover::before{text-shadow:0 0 10px #f0cf7488}
#rivalParty .forgePartyLine{display:flex;align-items:center;gap:14px;padding-left:18px;border-left:1px solid #6e5a3388;color:#eadfc0;font:700 16px/1 system-ui,sans-serif;letter-spacing:.14em}
#rivalParty .forgePartyLine i{font-style:normal;color:var(--forge-brass)}
#rivalParty .rivalSeats{display:flex;justify-content:center;align-items:flex-start;gap:110px;flex:1 0 auto;height:auto;min-height:0;padding:0 34px 3vh}
#rivalParty .rivalSeats::before{content:"";flex:none;width:200px}
#rivalParty .rivalSeats:has(.rivalGuest.hasRival)::before{display:none}
#rivalParty .rivalDivider{display:none}
#rivalParty .rivalBanner,#rivalParty .rivalGuest.hasRival{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:290px;height:auto;min-height:0;margin:0;padding:var(--forge-pennant-top) 24px 96px;border:0;border-radius:0;text-align:center;
 background:radial-gradient(70% 22% at 50% 38%,#f0d79a14,transparent 70%),linear-gradient(180deg,#0b100f,#1a211f 30%,#121816 75%,#0b100f);
 clip-path:polygon(0 0,100% 0,100% calc(100% - 50px),50% 100%,0 calc(100% - 50px));
 box-shadow:inset 1px 0 0 var(--forge-brass),inset -1px 0 0 var(--forge-brass),inset 4px 0 0 #050807,inset -4px 0 0 #050807,inset 5px 0 0 #9a7f4a66,inset -5px 0 0 #9a7f4a66}
#rivalParty .rivalBanner::before,#rivalParty .rivalGuest.hasRival::before{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;pointer-events:none;
 background:linear-gradient(to top right,transparent calc(50% - 1px),var(--forge-brass) 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),var(--forge-brass) 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
#rivalParty .rivalBanner::after{content:"";position:absolute;left:50%;bottom:64px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,#fff3c8,#c9a85f 55%,#6e5a33);box-shadow:0 0 12px #f0cf7488}
#rivalParty .rivalBanner .rivalPortrait{order:-1;flex:none;width:150px;height:150px;margin:0 0 16px;border:3px solid var(--forge-brass-hi);border-radius:50%;overflow:hidden;background:#070a09;box-shadow:0 0 0 4px #050807,0 0 0 6px var(--forge-brass-lo),0 0 34px #f0cf7455,0 10px 20px #000c}
#rivalParty .rivalBanner .rivalPortrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
#rivalParty .rivalBanner #partyName{order:0;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 22px/1.25 Georgia,serif;letter-spacing:.02em;color:#f6ead0}
#rivalParty .rivalBanner .partyLeader{order:1;color:var(--forge-brass-hi);font:700 11px/1 system-ui,sans-serif;letter-spacing:.18em}
#rivalParty .rivalBanner .bannerSubtitle{order:2;margin:12px 0 0;color:var(--forge-brass);font-size:11px;letter-spacing:.16em}
#rivalParty .rivalBanner .rivalReady{order:3;color:#9fe0b0;font-size:13px}
/* Empty rival seat: an invite circle level with your emblem. */
#rivalParty .rivalGuest:not(.hasRival){flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:200px;margin-top:calc(var(--forge-pennant-top) + 31px);padding:0;border:0;background:none;box-shadow:none;clip-path:none;text-align:center}
#rivalParty .rivalGuest #partyInvite{flex:none;display:grid;place-items:center;width:88px;height:88px;padding:0;border:2px solid var(--forge-brass-lo);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421cc,#070a09cc);box-shadow:0 0 0 1px #000;font-size:0;cursor:pointer}
#rivalParty .rivalGuest:not(.hasRival) #partyInvite::before{content:"+";font:300 40px/1 system-ui,sans-serif;color:var(--forge-brass-hi)}
#rivalParty .rivalGuest:not(.hasRival) #partyInvite:hover{border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 16px #f0cf7455}
#rivalParty .rivalGuest #rivalSlot{display:none}
#rivalParty .rivalGuest:not(.hasRival) #partyRival,#rivalParty .rivalGuest:not(.hasRival) #copyPartyInvite{display:none}
#rivalParty .rivalGuest #partyRivalHint{margin:0;color:#a99f86;font-size:13px;line-height:1.4}
#rivalParty .rivalGuest #copyPartyLink{padding:0;color:var(--forge-brass);background:none;border:0;font-size:12px}
/* Filled rival seat: the same pennant in red trim. */
#rivalParty .rivalGuest.hasRival{box-shadow:inset 1px 0 0 #c07a5c,inset -1px 0 0 #c07a5c,inset 4px 0 0 #050807,inset -4px 0 0 #050807;background:radial-gradient(70% 22% at 50% 38%,#ff9a7a14,transparent 70%),linear-gradient(180deg,#0d0a09,#1f1715 30%,#160f0e 75%,#0d0a09)}
#rivalParty .rivalGuest.hasRival::before{background:linear-gradient(to top right,transparent calc(50% - 1px),#c07a5c 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),#c07a5c 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
#rivalParty .rivalGuest.hasRival #partyInvite{order:-1;width:150px;height:150px;margin-bottom:16px;border:3px solid #c07a5c;background:#070a09;box-shadow:0 0 0 4px #050807,0 0 0 6px #6e3a2a;overflow:hidden;cursor:default}
#rivalParty .rivalGuest.hasRival #partyRivalPortrait{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
#rivalParty .rivalGuest.hasRival #partyRival{margin:0;font:700 22px/1.25 Georgia,serif;color:#ffd9cc}
#rivalParty .rivalGuest.hasRival #partyRivalHint{color:#ffb39a}
#rivalParty .rivalGuest.hasRival #copyPartyInvite,#rivalParty .rivalGuest.hasRival #copyPartyLink{display:none}
/* Footer flows after the seats, never on top of them: browse link | FIND MATCH | region. */
#rivalParty .rivalFooter{position:static;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:96px;height:auto;margin-top:auto;padding:12px 34px}
#rivalParty .rivalFooter>div{display:flex;flex-direction:column;align-items:center;gap:6px}
#rivalParty #findRival{min-width:300px;height:56px;padding:0 44px;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);font-size:17px;letter-spacing:.24em}
#rivalParty #findRival span{display:none}
#rivalParty #cancelSearch{min-width:220px}
#rivalParty #partyBrowse{justify-self:start;padding:0;color:var(--forge-brass);letter-spacing:.06em;text-align:left}
#rivalParty #partyRegion{justify-self:end;width:auto;color:#a99f86}
#rivalParty #partyStatus{margin:0;color:#bfb59a;font-size:12px}
#rivalParty #partyInviteBox{flex:none;margin:0 auto 10px;max-width:520px}
@media(max-height:800px){#rivalParty{--forge-pennant-top:16px}#rivalParty .rivalSeats{gap:80px}
 #rivalParty .rivalBanner,#rivalParty .rivalGuest.hasRival{padding-bottom:88px}
 #rivalParty .rivalBanner .rivalPortrait,#rivalParty .rivalGuest.hasRival #partyInvite{width:116px;height:116px;margin-bottom:10px}
 #rivalParty .rivalGuest:not(.hasRival){margin-top:calc(var(--forge-pennant-top) + 14px)}
 #rivalParty .rivalFooter{min-height:80px}#rivalParty #findRival{height:48px}}

/* Character select: no ability kit (LoL shows only the teams there). */
#heroSelect .forgeKit{display:none}

/* The old coronation.css caps (#entry .rivalBanner max-height/stretch, h2 !important size) must not clip the pennant. */
#entry #rivalParty .rivalBanner,#entry #rivalParty .rivalGuest.hasRival{max-height:none;min-height:0;align-self:flex-start;box-sizing:border-box}
#entry #rivalParty .rivalBanner #partyName,#entry #rivalParty .rivalGuest.hasRival #partyRival{font-size:22px!important;margin:0}
@media(max-height:800px){#entry #rivalParty .rivalBanner #partyName,#entry #rivalParty .rivalGuest.hasRival #partyRival{font-size:19px!important}}

@media(max-height:960px){#rivalParty .rivalHeading{padding:10px 34px}#rivalParty .rivalFooter{min-height:84px;padding:8px 34px}#rivalParty #findRival{height:50px}
 #rivalParty .rivalBanner,#rivalParty .rivalGuest.hasRival{padding-bottom:84px}}
@media(max-height:800px){#rivalParty .rivalBanner .rivalPortrait,#rivalParty .rivalGuest.hasRival #partyInvite{width:100px;height:100px}
 #rivalParty .rivalBanner,#rivalParty .rivalGuest.hasRival{gap:5px;padding-bottom:76px}#rivalParty .rivalBanner::after{bottom:56px}
 #rivalParty .rivalBanner .bannerSubtitle{margin-top:6px}#rivalParty .rivalFooter{min-height:74px}#rivalParty #findRival{height:44px}
 #rivalParty .rivalGuest:not(.hasRival){margin-top:22px}}

/* Jan: no helper copy in the party lobby. Region, browse link, banner subtitle/ready line and the tail diamond go;
   #partyStatus shows only real status or errors (play-forge.js marks the default sentences as quiet). */
#rivalParty #partyRegion,#rivalParty #partyBrowse,#rivalParty .rivalBanner .bannerSubtitle,#rivalParty .rivalBanner .rivalReady,#rivalParty .rivalBanner::after{display:none}
#rivalParty #partyStatus.forgeQuiet{display:none}
#rivalParty .rivalFooter{display:flex;justify-content:center}

/* Warden detail (Jan): no tagline, art caption, owned/finish list or roster strip; a smaller portrait in a brass frame. */
#collectionPage .collectionCopy>p:first-child,#collectionPage .artCaption,#collectionPage .collectionRoster,
#collectionPage .collectionPurchase small,#collectionPage .collectionFinishTitle,#collectionPage .collectionPurchase .clientSecondary{display:none}
#entry #collectionPage .collectionArt{left:5%!important;top:118px;bottom:auto!important;width:min(400px,28vw)!important;height:auto;aspect-ratio:1;
 border:2px solid var(--forge-brass);border-radius:2px;background:#070a09;
 box-shadow:0 0 0 3px #050807,0 0 0 4px var(--forge-brass-lo),0 0 40px #f0cf7422,0 14px 30px #000c}
#entry #collectionPage .collectionArt::before{content:"";position:absolute;inset:-7px;z-index:2;pointer-events:none;border:0;
 background:var(--forge-corner-tl) left top/30px 30px no-repeat,var(--forge-corner-tr) right top/30px 30px no-repeat}
#entry #collectionPage .collectionArt .collectionHero{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 22%;clip-path:none}
#entry #collectionPage.showModel .collectionArt .collectionHero{object-fit:contain;object-position:50% 100%}
#entry #collectionPage .collectionArt .artToggle{position:absolute;left:50%;bottom:-18px;z-index:3;transform:translateX(-50%);white-space:nowrap}
#entry #collectionPage .collectionCopy{left:calc(5% + min(400px,28vw) + 64px);right:6%;top:118px;bottom:110px}
#entry #collectionPage .collectionCopy h1#collectionTitle{margin-top:0}
#entry #collectionPage .collectionFooter{justify-content:flex-end}
@media(max-height:800px){#entry #collectionPage .collectionArt{top:96px;width:min(320px,26vw)!important}#entry #collectionPage .collectionCopy{top:92px;left:calc(5% + min(320px,26vw) + 52px)}}
/* Back to the gallery as a round X at the top right instead of a left "← COLLECTION" button. */
#entry #collectionPage .collectionBack{left:auto!important;right:3%;top:72px;width:42px;height:42px;min-width:0;padding:0;border:2px solid var(--forge-brass-hi);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);font-size:0;box-shadow:0 0 0 2px #000,0 4px 10px #000c}
#entry #collectionPage .collectionBack::before{content:"\2715";font:400 18px/1 system-ui,sans-serif;color:#f0d79a}
#entry #collectionPage .collectionBack:hover{box-shadow:0 0 0 2px #000,0 0 14px #f0cf7488}
#entry #collectionPage .collectionCopy{max-width:760px}#entry #collectionPage .collectionPurchase{align-items:flex-start}#entry #collectionPage .collectionPurchase .clientPrimary{width:auto;min-width:300px;max-width:420px}
#entry #collectionPage:not(.collectionDetail)>.collectionArt{display:none}

/* ===== Play screen v2 (Jan): centred stage — PVP | AI toggle, ARAM and BATTLEGROUND, queue sizes, CONFIRM right below. ===== */
#matchSetup .forgePlayTabs,#matchSetup .modeChoices,#matchSetup .modeFooter{display:none!important}
#matchSetup .forgePlayStage{display:flex;flex-direction:column;align-items:center;gap:26px;padding:5vh 34px 40px}
#matchSetup .forgePlayStage[hidden]{display:none}
/* Opponent toggle: a brass segmented control. */
#entry #matchSetup .forgeQueueToggle{display:flex;width:auto;height:auto;margin:0;padding:4px;gap:4px;border:1px solid #4a4130;border-radius:3px;background:linear-gradient(180deg,#070a09,#0e1412);box-shadow:inset 0 2px 4px #000,0 0 0 1px #000}
#entry #matchSetup .forgeQueueToggle .modeChoice,#entry #matchSetup .forgeQueueToggle .modeChoice:hover,#entry #matchSetup .forgeQueueToggle .modeChoice[aria-pressed="true"]{display:block;width:auto;min-width:130px;height:40px;padding:0 26px;border:0;border-radius:2px;background:none;box-shadow:none;transform:none;font-size:0;line-height:0}
#entry #matchSetup .forgeQueueToggle .modeChoice>*{display:none}
#entry #matchSetup .forgeQueueToggle .modeChoice::after{content:attr(data-forge-label);display:block;font:700 15px/40px system-ui,sans-serif;letter-spacing:.2em;color:#a99f86}
#entry #matchSetup .forgeQueueToggle .modeChoice:hover::after{color:var(--forge-ivory)}
#entry #matchSetup .forgeQueueToggle .modeChoice[aria-pressed="true"]{background:linear-gradient(180deg,#3a3020,#1c1a12);box-shadow:inset 0 0 0 1px var(--forge-brass),0 0 12px #f0cf7433}
#entry #matchSetup .forgeQueueToggle .modeChoice[aria-pressed="true"]::after{color:#fff1c9;text-shadow:0 0 8px #f0cf7455}
/* Games. */
#matchSetup .forgeGames{display:flex;justify-content:center;gap:4vw;padding-bottom:6px;background:linear-gradient(90deg,transparent,#6e5a33aa 15%,#6e5a33aa 85%,transparent) bottom/100% 1px no-repeat}
#matchSetup .forgeGame{display:flex;flex-direction:column;align-items:center;width:300px;padding:6px 10px 28px;border:0;background:none;cursor:pointer}
#matchSetup .forgeGameCrest svg{width:120px;height:128px;filter:drop-shadow(0 6px 10px #000c);transition:transform .14s,filter .14s}
#matchSetup .forgeGame:hover .forgeGameCrest svg{transform:translateY(-3px);filter:drop-shadow(0 0 14px #f0cf7455) drop-shadow(0 6px 10px #000c)}
#matchSetup .forgeGameCrest .crestOuter{fill:#121816;stroke-width:7}#matchSetup .forgeGameCrest .crestInner{fill:none;stroke:#6e5a33;stroke-width:2}
#matchSetup .forgeGameCrest .crestSymbol{stroke:#e7c98a!important;stroke-width:6}#matchSetup .forgeGameCrest .crestDepth{fill:#020504;stroke:#3d3424;stroke-width:7}
#matchSetup .forgeGame[aria-checked="true"] .crestOuter{fill:#1c2421}
#matchSetup .forgeGame[aria-checked="true"] .crestInner{stroke:#f0d79a;stroke-width:3}
#matchSetup .forgeGame[aria-checked="true"] .crestSymbol{stroke:#fff1c9!important;filter:drop-shadow(0 0 6px #f0cf7488)}
#matchSetup .forgeGameSub{margin-top:18px;color:#a99f86;font:700 12px/1 system-ui,sans-serif;letter-spacing:.16em}
#matchSetup .forgeGame strong{margin-top:10px;color:#e9dcbc;font:700 32px/1.1 Georgia,serif;letter-spacing:.12em}
#matchSetup .forgeGame[aria-checked="true"]{background:radial-gradient(60% 40% at 50% 100%,#f0d79a33,transparent 70%);box-shadow:inset 0 -2px 0 var(--forge-brass-hi)}
#matchSetup .forgeGame[aria-checked="true"] strong{color:#fff1c9;text-shadow:0 0 14px #f0cf7444}
#matchSetup .forgeGame[aria-checked="true"] .forgeGameSub{color:var(--forge-brass)}
@media(prefers-reduced-motion:reduce){#matchSetup .forgeGameCrest svg{transition:none}}
/* Description and queue sizes, centred. */
#matchSetup .forgeModeInfo{width:min(640px,100%);margin:0;text-align:center}
#matchSetup .forgeModeText{margin:0 0 18px;padding:0;background:none;color:#d3c9ae;font-size:16px;line-height:1.55}
#matchSetup .forgeQueues{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:10px}
#matchSetup .forgeQueue button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:120px;padding:10px 16px;border:1px solid #3a3424;border-radius:2px;background:linear-gradient(180deg,#1a211f,#0e1312);text-align:center}
#matchSetup .forgeQueue button::before{display:none}
#matchSetup .forgeQueue button:hover:not(:disabled){border-color:var(--forge-brass)}
#matchSetup .forgeQueue[data-current="true"] button{border-color:var(--forge-brass-hi);background:linear-gradient(180deg,#3a3020,#1c1a12);box-shadow:0 0 12px #f0cf7433}
#matchSetup .forgeQueue[data-soon="true"] button{opacity:.45;cursor:default}
#matchSetup .forgeQueue b{font-size:16px;letter-spacing:.14em}
#matchSetup .forgeQueue small{font-size:11px}
/* CONFIRM directly under the games. */
#matchSetup .forgePlayStage .forgeConfirmBar{margin-top:6px}
#matchSetup .forgeConfirmBar .forgeCancel{flex:none;width:44px;min-width:0;height:44px;margin-right:6px;padding:0;border:2px solid var(--forge-brass);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);color:var(--forge-brass-hi);font-size:16px;cursor:pointer;box-shadow:0 0 0 1px #000}
#matchSetup .forgeConfirmBar .forgeCancel:hover{border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 12px #f0cf7455}
#matchSetup[data-forge-blocked="true"] .forgeConfirmBar .modeConfirm{display:none}
#matchSetup[data-forge-blocked="true"] .forgeConfirmBar::after{content:"COMING SOON";display:grid;place-items:center;min-width:250px;height:44px;clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%);background:linear-gradient(180deg,#1c2220,#121715);color:#8d8670;font:800 15px/1 system-ui,sans-serif;letter-spacing:.22em}
@media(max-height:800px){#matchSetup .forgePlayStage{gap:16px;padding-top:3vh}#matchSetup .forgeGameCrest svg{width:96px;height:102px}#matchSetup .forgeGame strong{font-size:26px}#matchSetup .forgeModeText{font-size:14px;margin-bottom:12px}#matchSetup .forgeGame{padding-bottom:18px}}
#entry #matchSetup .forgeQueueToggle{flex-direction:row;align-items:center}
#entry #matchSetup .forgeGame,#entry #matchSetup .forgeGame:focus{border:0;outline:none}
#entry #matchSetup .forgeGame:focus-visible{outline:2px solid var(--forge-brass-hi);outline-offset:4px}
#entry #matchSetup .forgeQueueToggle .modeChoice:focus:not(:focus-visible){outline:none}
#entry #matchSetup .forgeGame[aria-checked="true"]{position:relative;background:none;box-shadow:none;border-bottom:2px solid var(--forge-brass-hi)}
#entry #matchSetup .forgeGame[aria-checked="true"]::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:46%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,#f0d79a33,transparent 70%)}
#entry #matchSetup .forgeGames{isolation:isolate}
/* Home feature tiles: small centred framed icons (Jan). */
#entry #clientHome .homeFeatures button{min-height:104px;padding:16px 18px 16px 112px;align-items:center}
#entry #clientHome .homeFeatures button img,#entry #clientHome .homeFeatures .rulesFeature img{position:absolute;left:20px;top:50%;bottom:auto;width:72px!important;height:72px!important;transform:translateY(-50%);object-fit:cover;object-position:50% 25%}
/* CONFIRM label centred in both buttons (#play has its own padding/line-height). */
#matchSetup .forgeConfirmBar .modeConfirm{display:inline-flex;align-items:center;justify-content:center;line-height:1}
#entry #clientHome .homeFeatures button img,#entry #clientHome .homeFeatures .rulesFeature img{top:50%!important;left:20px!important;width:64px!important;height:64px!important}

/* ===== Home (Jan): same stone wash as every other page; no subnav, sidebar footer or duplicate sidebar resume. ===== */
#entry #clientHome.homePage{background-color:#0b100f}
#entry #clientHome.homePage::before{background:linear-gradient(90deg,#0b100fe6 0,#0b100f99 43%,#0b100f00 73%),linear-gradient(0deg,#0b100fe6 0,transparent 48%)}
#entry #clientHome .homeSubnav{display:none}
#entry .clientSidebar .sidebarFooter{display:none}
/* The hero CTA already reads RETURN TO MATCH and clicks this button (client.js); hide it without the hidden attribute. */
#entry .clientSidebar #resumeMatch{display:none}

/* ===== Warden detail: one compact group centred on the page instead of spread edge to edge. ===== */
#collectionPage{--forge-detail-left:max(5%,calc(50% - 540px))}
#entry #collectionPage .collectionArt{left:var(--forge-detail-left)!important;top:150px}
#entry #collectionPage .collectionCopy{left:calc(var(--forge-detail-left) + min(400px,28vw) + 56px);right:auto;width:min(620px,calc(100% - var(--forge-detail-left) - min(400px,28vw) - 96px));top:150px;bottom:auto;max-height:calc(100% - 260px)}
#entry #collectionPage .collectionFooter{left:auto;right:var(--forge-detail-left);bottom:56px}
#entry #collectionPage .collectionBack{right:var(--forge-detail-left)!important;top:96px}
#entry #collectionPage .collectionPurchase .clientPrimary{width:auto!important;min-width:300px;max-width:420px}
@media(max-height:800px){#entry #collectionPage .collectionArt,#entry #collectionPage .collectionCopy{top:110px}#entry #collectionPage .collectionCopy{left:calc(var(--forge-detail-left) + min(320px,26vw) + 48px)}#entry #collectionPage .collectionBack{top:70px}#entry #collectionPage .collectionFooter{bottom:28px}}
/* Gallery must never show the detail portrait (also after returning from a detail view). */
#entry #collectionPage:not(.collectionDetail)>.collectionArt,#entry #collectionPage:not(.collectionDetail)>.collectionCopy{display:none!important}
@media(max-height:800px){#entry #collectionPage .collectionCopy{max-height:calc(100% - 170px)}#entry #collectionPage .collectionCopy h1#collectionTitle{font-size:40px}#entry #collectionPage .collectionCopy>p{font-size:12px;line-height:1.55}}
/* Play stage centred vertically in the page (Jan). */
#entry #matchSetup .forgePlayStage{position:absolute;inset:0;justify-content:center;padding:24px 34px;overflow:auto}
/* Ability preview clip in the warden detail (collection.js): a framed 16:9 video above the ability text. */
#entry #collectionPage .collectionPreview{position:relative;margin:4px 0 14px;width:min(100%,480px);aspect-ratio:16/9;border:2px solid var(--forge-brass);border-radius:2px;background:#070a09;overflow:hidden;
 box-shadow:0 0 0 3px #050807,0 0 0 4px var(--forge-brass-lo),0 10px 24px #000b}
#entry #collectionPage .collectionPreview[hidden]{display:none}
#entry #collectionPage .collectionPreview video{display:block;width:100%;height:100%;object-fit:cover}
#entry #collectionPage .collectionSkill{max-width:480px}
@media(max-height:800px){#entry #collectionPage .collectionPreview{width:min(100%,360px)}}
/* Preview clip sits under the portrait in the left column, so the text column keeps its height. */
#entry #collectionPage>.collectionPreview{position:absolute;left:var(--forge-detail-left);top:calc(150px + min(400px,28vw) + 34px);width:min(400px,28vw);margin:0;z-index:1}
#entry #collectionPage:not(.collectionDetail)>.collectionPreview{display:none}
@media(max-height:800px){#entry #collectionPage .collectionArt{width:min(260px,22vw)!important}
 #entry #collectionPage .collectionCopy{left:calc(var(--forge-detail-left) + min(260px,22vw) + 48px)}
 #entry #collectionPage>.collectionPreview{top:calc(110px + min(260px,22vw) + 28px);width:min(260px,22vw)}}

/* Champion select: the old coronation.css teal stage wash sat behind the whole draft; use the Forge stone. */
#heroSelect.clientSelect,#heroSelect .selectBody{background:radial-gradient(ellipse at 50% 45%,#1a211f,#0a0f0e 70%)!important}
#heroSelect .selectStage{background:radial-gradient(ellipse at 50% 45%,#1c2421,#0a0f0e 72%)!important}
#heroSelect .selectRoster{background:none!important}
#heroSelect .selectHeader{background:linear-gradient(180deg,#222b28,#141a18)!important}
#heroSelect[data-forge-phase="loadout"] .selectStage{background:#070a09!important}

/* Collection detail (Jan): no "Your collection · Wardens" heading and no PLAY button; the group sits in the middle. */
#entry #collectionPage>.screenHeading,#entry #collectionPage #collectionPlay{display:none!important}
#collectionPage{--forge-detail-top:max(40px,calc(50% - 260px))}
#entry #collectionPage .collectionArt,#entry #collectionPage .collectionCopy{top:var(--forge-detail-top)!important}
#entry #collectionPage>.collectionPreview{top:calc(var(--forge-detail-top) + min(400px,28vw) + 34px)}
#entry #collectionPage .collectionBack{top:calc(var(--forge-detail-top) - 30px)!important}
#entry #collectionPage .collectionCopy{max-height:calc(100% - var(--forge-detail-top) - 40px)}
@media(max-height:800px){#collectionPage{--forge-detail-top:max(30px,calc(50% - 220px))}#entry #collectionPage>.collectionPreview{top:calc(var(--forge-detail-top) + min(260px,22vw) + 28px)}}
#entry #collectionPage .collectionGallery{top:28px}

/* Level up (Jan, like LoL): no HUD toast — the sound and the level-up arrows above the abilities are the cue. */
#battleMoment[data-kind="level"]{display:none!important}
/* Avatar picker (avatar-forge.js). */
.forgeAvatarGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:10px 0 18px}
.forgeAvatarChoice{position:relative;aspect-ratio:1;padding:0;border:2px solid var(--forge-brass-lo);border-radius:50%;background:#070a09;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px #000,0 4px 10px #000a;transition:transform .12s,box-shadow .12s}
.forgeAvatarChoice img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.forgeAvatarChoice:hover{transform:translateY(-2px);border-color:var(--forge-brass)}
.forgeAvatarChoice[aria-checked="true"]{border-color:var(--forge-brass-hi);box-shadow:0 0 0 2px #000,0 0 0 4px var(--forge-brass),0 0 16px #f0cf7466}
.forgeAvatarLabel{display:block;color:var(--forge-brass);font:700 11px/1 system-ui,sans-serif;letter-spacing:.16em}
#avatarDialog.panel{width:min(620px,92vw);padding:34px 36px 56px;overflow:visible;text-align:center}
#avatarDialog h2{margin:0 0 8px;font:700 24px/1.2 Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
#avatarDialog .forgeAvatarGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px auto 4px;max-width:420px}
#avatarDialog .socialClose{position:absolute;top:-20px;right:-20px;z-index:4;width:42px;height:42px;padding:0;border:2px solid var(--forge-brass-hi);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);color:#f0d79a;font-size:22px;line-height:1;box-shadow:0 0 0 2px #000,0 4px 10px #000c;cursor:pointer}
#avatarDialog .forgeDone{position:absolute;left:50%;bottom:-22px;z-index:4;transform:translateX(-50%);min-width:130px;height:46px;border:1px solid var(--forge-brass-hi);border-radius:2px;background:linear-gradient(180deg,#2a2416,#141008);color:#f0d79a;font:800 17px/1 Georgia,serif;letter-spacing:.14em;box-shadow:0 0 0 2px #000,0 0 0 4px var(--forge-brass-lo),0 6px 14px #000c;cursor:pointer}
#entry .avatarMedallion,#entry .profileCrest{cursor:pointer}
#entry .avatarMedallion:hover,#entry .profileCrest:hover{filter:brightness(1.12)}
#entry .avatarMedallion img,#entry .profileCrest img{object-fit:cover;object-position:50% 18%}

/* ===== Kill banner (moments.js), LoL style: your portrait | text | victim portrait on a dark brass-trimmed strip. ===== */
#battleMoment[data-kind="kill"],#battleMoment[data-kind="slain"]{top:120px;gap:18px;min-width:420px;padding:8px 10px;border:0;border-radius:40px;
 background:linear-gradient(90deg,transparent,#0b100fee 12%,#0b100fee 88%,transparent);box-shadow:none}
#battleMoment[data-kind="kill"]::after,#battleMoment[data-kind="slain"]::after{content:"";position:absolute;left:18%;right:18%;bottom:2px;height:2px;background:linear-gradient(90deg,transparent,#6fb7ff,transparent)}
#battleMoment[data-kind="slain"]::after{background:linear-gradient(90deg,transparent,#e5486b,transparent)}
#battleMoment[data-kind="kill"] img,#battleMoment[data-kind="slain"] img{width:54px;height:54px;border:2px solid var(--forge-brass);border-radius:50%;box-shadow:0 0 0 2px #050807}
#battleMoment[data-kind="kill"] .momentVictim{border-color:#6fb7ff;box-shadow:0 0 0 2px #050807,0 0 12px #6fb7ff88}
#battleMoment[data-kind="slain"] .momentVictim{border-color:#e5486b}
#battleMoment[data-kind="kill"] strong,#battleMoment[data-kind="slain"] strong{font:700 24px/1.1 Georgia,serif;color:#f6ead0;text-shadow:0 2px 6px #000}
#battleMoment[data-kind="kill"] span{color:#f3d77a}
#battleMoment .momentVictim[hidden]{display:none}

/* ===== End of match (endgame-forge.js) ===== */
#result[data-forge-stage]{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;box-shadow:none;overflow:hidden;color:var(--forge-ivory)}
#result[data-forge-stage]::before{display:none}
#result[data-forge-stage]>:not(.forgeOutcome):not(.forgePostgame){display:none!important}
#result:not([data-forge-stage]) .forgeOutcome,#result:not([data-forge-stage]) .forgePostgame{display:none}
/* Stage 1: plaque over the battlefield. */
#result[data-forge-stage="banner"]{background:radial-gradient(ellipse at 50% 45%,transparent 30%,#000a 100%)}
#result[data-forge-stage="banner"]::backdrop{background:transparent}
#result[data-forge-stage="post"] .forgeOutcome,#result[data-forge-stage="banner"] .forgePostgame{display:none}
#result .forgeOutcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
#result .forgeOutcomePlaque{position:relative;display:grid;place-items:center;min-width:min(620px,80vw);height:170px;padding:0 70px;
 clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,58% 100%,50% 118%,42% 100%,7% 100%,0 50%);
 background:radial-gradient(70% 90% at 50% 40%,#3a3020,#141008 75%),#141008;
 box-shadow:inset 0 0 0 3px #050807,inset 0 0 0 6px var(--forge-brass),inset 0 0 0 9px #050807,inset 0 0 0 10px var(--forge-brass-lo)}
#result .forgeOutcome::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,96vw);height:420px;transform:translate(-50%,-56%);pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,var(--forge-glow,#6fb7ff55),transparent 62%);animation:forgeOutcomeGlow 2.4s ease-in-out infinite}
#result[data-forge-outcome="defeat"]{--forge-glow:#e5486b55}
@keyframes forgeOutcomeGlow{50%{opacity:.6;transform:translate(-50%,-56%) scale(1.05)}}
#result .forgeOutcomeWord{font:700 clamp(64px,8vw,104px)/1 Georgia,serif;letter-spacing:.06em;background:linear-gradient(180deg,#fff3c8,#f0d79a 40%,#c9a85f 70%,#8a6224);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px #f0cf7444)}
#result .forgeOutcome{animation:forgeOutcomeIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes forgeOutcomeIn{from{opacity:0;transform:scale(1.12)}}
#result .forgeOutcomeContinue{min-width:180px;height:40px;border:1px solid #f6e2a8;border-radius:2px;color:#1d1405;font:800 14px/1 system-ui,sans-serif;letter-spacing:.2em;cursor:pointer;
 background:linear-gradient(180deg,#f3d88c,#d4a650 45%,#a77a2e 75%,#8a6224);box-shadow:0 0 0 1px #000,0 0 16px #f0cf7455,inset 0 1px 0 #fff9}
#result[data-forge-outcome="defeat"] .forgeOutcomeContinue{border-color:#ffb39a;background:linear-gradient(180deg,#e88a6e,#b04a32 50%,#7a2a16);color:#fff1e8;text-shadow:0 1px 0 #0006}
@media(prefers-reduced-motion:reduce){#result .forgeOutcome,#result .forgeOutcome::before{animation:none}}
/* Stage 2: post-game client screen. */
#result[data-forge-stage="post"]{background:radial-gradient(80% 60% at 70% 20%,#2b353240,transparent 70%),linear-gradient(90deg,#070b0af2,#0b100fe6 50%,#0b100ff2),url('icons/causeway-menu.jpg') center/cover}
#result .forgePostgame{position:absolute;inset:0;display:flex;flex-direction:column;padding:28px 48px 0}
#result .forgePostHead h2{margin:0;font:700 34px/1 Georgia,serif;letter-spacing:.12em;color:#f6ead0}
#result[data-forge-outcome="defeat"] .forgePostHead h2{color:#ffb39a}
#result .forgePostHead p{margin:8px 0 0;color:#a99f86;font-size:13px;letter-spacing:.06em}
#result .forgePostTabs{display:flex;gap:34px;margin:22px 0 0;padding-bottom:0;background:linear-gradient(90deg,#6e5a3399,transparent 70%) bottom/100% 1px no-repeat}
#result .forgePostTabs button{height:40px;padding:0 2px;border:0;border-bottom:2px solid transparent;background:none;color:#a99f86;font:700 13px/1 system-ui,sans-serif;letter-spacing:.16em;cursor:pointer}
#result .forgePostTabs button[aria-selected="true"]{color:#fff1c9;border-bottom-color:var(--forge-brass-hi)}
#result .forgePostPanel{flex:1;min-height:0;overflow:auto;padding:34px 0}
#result .forgePostPanel[hidden]{display:none}
#result .forgeProgressHero{display:flex;align-items:center;gap:26px}
#result .forgeProgressRing{position:relative;width:130px;height:130px;border:3px solid var(--forge-brass-hi);border-radius:50%;box-shadow:0 0 0 4px #050807,0 0 0 6px var(--forge-brass-lo),0 0 30px #f0cf7433}
#result .forgeProgressRing img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%}
#result .forgeProgressRing b{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);min-width:34px;padding:3px 8px;border:1px solid var(--forge-brass-hi);border-radius:12px;background:#0b100f;color:#fff1c9;font:800 13px/1 system-ui,sans-serif;text-align:center}
#result .forgeProgressText strong{display:block;font:700 26px/1.2 Georgia,serif;color:#f6ead0}
#result .forgeProgressText span{display:block;margin-top:6px;color:#bfb59a}
#result .forgeProgressTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:34px;max-width:1180px}
#result .forgeTile{display:flex;flex-direction:column;gap:8px;padding:20px 18px;border:1px solid #3a3424;border-radius:2px;background:linear-gradient(180deg,#1a211fee,#0e1312ee);box-shadow:0 0 0 1px #000,inset 0 1px 0 #ffffff10}
#result .forgeTile b{font:700 30px/1 Georgia,serif;color:#f6ead0}
#result .forgeTile span{color:var(--forge-brass);font:700 11px/1 system-ui,sans-serif;letter-spacing:.16em}
#result .forgeTile.accent{border-color:var(--forge-brass);background:radial-gradient(90% 80% at 50% 0,#f0d79a1c,transparent 70%),linear-gradient(180deg,#232c29,#121816)}
#result .forgeTile.accent b{color:#f3d77a}
#result .forgeScoreboard{max-width:1180px}
#result .forgeTeamHead{margin:0 0 8px;font:700 13px/1 system-ui,sans-serif;letter-spacing:.18em;color:#9fd3ff}
#result .forgeTeamHead.enemy{margin-top:28px;color:#ffb39a}
#result .forgeScoreboard table{width:100%;border-collapse:collapse;background:#070a09cc;border:1px solid #3a3424}
#result .forgeScoreboard th,#result .forgeScoreboard td{padding:10px 14px;border-bottom:1px solid #2b2a22;text-align:right;color:#d3c9ae;font-variant-numeric:tabular-nums}
#result .forgeScoreboard thead th{background:linear-gradient(180deg,#222b28,#141a18);color:var(--forge-brass);font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em}
#result .forgeScoreboard tbody th{text-align:left}
#result .forgeScoreboard tr.ally th{box-shadow:inset 3px 0 0 #6fb7ff}#result .forgeScoreboard tr.enemy th{box-shadow:inset 3px 0 0 #e5486b}
#result .forgeScoreHero{display:flex;align-items:center;gap:12px}
#result .forgeScoreHero img{width:42px;height:42px;border:2px solid var(--forge-brass);border-radius:50%;object-fit:cover;object-position:50% 18%}
#result .forgeScoreHero b{display:block;color:#f6ead0;font-size:15px}#result .forgeScoreHero small{color:#a99f86}
#result .forgePostFoot{display:flex;align-items:center;justify-content:center;gap:0;padding:14px 0 22px}
#result .forgePostLeave{flex:none;width:44px;height:44px;margin-right:8px;padding:0;border:2px solid var(--forge-brass);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1c2421,#070a09);color:var(--forge-brass-hi);font-size:16px;cursor:pointer}
#result .forgePostFoot #rematch{min-width:280px;height:48px;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);border:1px solid #f6e2a8;border-radius:2px;color:#1d1405;font:800 15px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;
 background:linear-gradient(180deg,#f3d88c,#d4a650 45%,#a77a2e 75%,#8a6224)}
#result .forgePostFoot #rematchStatus{margin:0 0 0 16px;color:#bfb59a;font-size:12px}
@media(max-height:800px){#result .forgePostgame{padding:18px 32px 0}#result .forgePostPanel{padding:20px 0}#result .forgeProgressRing{width:96px;height:96px}#result .forgeTile b{font-size:24px}#result .forgeProgressTiles{margin-top:22px}}
/* The shared dialog panel style (stone fill, frame, corners) must not cover the end-of-match stages. */
dialog#result.panel[data-forge-stage]{box-shadow:none!important;border:0!important}
dialog#result.panel[data-forge-stage]::before{display:none!important}
dialog#result.panel[data-forge-stage="banner"]{background:radial-gradient(ellipse at 50% 45%,transparent 30%,#000a 100%)!important}
dialog#result.panel[data-forge-stage="post"]{background:radial-gradient(80% 60% at 70% 20%,#2b353240,transparent 70%),linear-gradient(90deg,#070b0af2,#0b100fd9 50%,#0b100ff2),url('icons/causeway-menu.jpg') center/cover!important}
dialog#result.panel .forgeOutcomeContinue{border:1px solid #f6e2a8!important;color:#1d1405!important;background:linear-gradient(180deg,#f3d88c,#d4a650 45%,#a77a2e 75%,#8a6224)!important}
dialog#result.panel[data-forge-outcome="defeat"] .forgeOutcomeContinue{border-color:#ffb39a!important;color:#fff1e8!important;background:linear-gradient(180deg,#e88a6e,#b04a32 50%,#7a2a16)!important}
dialog.panel .forgeAvatarChoice,.forgeAvatarChoice{border-radius:50%!important;padding:0!important;background:#070a09!important}
/* Slain (Jan): the world greys out (style.css) and the respawn timer sits on your HUD portrait; no centred panel. */
#death{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0!important;border:0!important}
#heroHud #portrait[data-respawn] img{filter:grayscale(1) brightness(.45)}
#heroHud #portrait[data-respawn]::after{content:attr(data-respawn);position:absolute;inset:0;z-index:4;display:grid;place-items:center;border-radius:50%;
 background:radial-gradient(circle,#00000088,#000000cc);color:#fff1c9;font:700 34px/1 Georgia,serif;text-shadow:0 0 10px #f0cf7488,0 2px 0 #000;pointer-events:none}
#heroHud #portrait[data-respawn] #portraitFallback{visibility:hidden}
body.hero-fallen #battleMoment{top:120px;bottom:auto}
/* Tower banners, same strip as the kill banner: tower sigil | text. */
#battleMoment[data-kind="tower"],#battleMoment[data-kind="loss"]{top:120px;gap:18px;min-width:380px;padding:8px 26px 8px 10px;border:0;border-radius:40px;background:linear-gradient(90deg,transparent,#0b100fee 12%,#0b100fee 88%,transparent);box-shadow:none}
#battleMoment[data-kind="tower"]::after,#battleMoment[data-kind="loss"]::after{content:"";position:absolute;left:18%;right:18%;bottom:2px;height:2px;background:linear-gradient(90deg,transparent,#6fb7ff,transparent)}
#battleMoment[data-kind="loss"]::after{background:linear-gradient(90deg,transparent,#e5486b,transparent)}
#battleMoment[data-kind="tower"]>img:first-child,#battleMoment[data-kind="loss"]>img:first-child{width:50px;height:50px;padding:8px;border:2px solid var(--forge-brass);border-radius:50%;background:radial-gradient(circle at 50% 35%,#22302d,#080c0b 75%);box-shadow:0 0 0 2px #050807;object-fit:contain}
#battleMoment[data-kind="loss"]>img:first-child{border-color:#e5486b}
#battleMoment[data-kind="tower"] strong,#battleMoment[data-kind="loss"] strong{font:700 22px/1.1 Georgia,serif;color:#f6ead0;text-shadow:0 2px 6px #000}
#battleMoment[data-kind="tower"] span:empty,#battleMoment[data-kind="loss"] span:empty{display:none}