/* The pilot's screens (hangar.js) in the HUD Master look of front.css: skewed plates, condensed caps, lime = yours, gold = earned.
   - #overlay.hangar: the hangar panel over the live hangar scene. cinematics hangarLayout() stands the pilot in the left 55 % of a
     wide box and gives the panel the right 45 %; a tall box (aspect under 23:20) puts the pilot in the top half and the panel
     below 56 %. Head and tabs stay put; the pane scrolls inside itself.
   - the home pilot plate (#home-pilot), the results XP report (.xp-report) and the mid-match toasts (#toasts).
   Loaded after front.css; the type scale (--base/--small/--head/--field) and tokens come from there and hud.css. */
#overlay{--js-gold:#ffd166}

/* ---------- Hangar panel ---------- */
#overlay.scene-side.hangar{background:none}
/* An absolute child of the flex overlay honours align-self (front.css gives scene-side sections flex-start), so it stretches here. */
#overlay.hangar>section.hangar-panel{position:absolute;top:0;right:0;bottom:0;align-self:stretch;display:flex;flex-direction:column;width:45%;min-height:0;max-width:none;margin:0;padding:5.5cqh 2.6cqw 0 4.2cqw;
 overflow:hidden;background:linear-gradient(90deg,rgba(9,23,30,0),rgba(9,23,30,.8) 4cqw,rgba(9,23,30,.92))}
.hg-head{display:flex;flex-wrap:wrap;align-items:center;gap:.9em 1em;margin:0 0 1em}
.hg-head .eyebrow{flex:1;margin:0}
#overlay .hg-head .text-button{order:1}
.hg-tabs{order:2;display:flex;flex:0 0 100%;gap:.55em;padding-left:.35em}
#overlay .hg-tabs [role=tab]{position:relative;isolation:isolate;flex:none;min-height:0;padding:.55em 1.35em .5em;border:0;border-radius:0;background:none;cursor:pointer;outline:none;
 color:var(--js-muted);font:700 var(--field)/1 var(--js-font);letter-spacing:.2em;transition:color .2s}
#overlay .hg-tabs [role=tab]::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(237,242,231,.06);transition:background .2s,border-color .2s}
#overlay .hg-tabs [role=tab]:hover{color:var(--js-text)}
#overlay .hg-tabs [role=tab]:hover::before{border-color:rgba(197,250,105,.42)}
#overlay .hg-tabs [role=tab][aria-selected=true]{color:var(--js-ground)}
#overlay .hg-tabs [role=tab][aria-selected=true]::before{border-color:var(--js-lime);background:var(--js-lime);box-shadow:0 10px 30px -16px rgba(197,250,105,.9)}
#overlay .hg-tabs [role=tab]:focus-visible::before{box-shadow:0 0 0 2px var(--js-ground),0 0 0 3px var(--js-text)}
.hg-pane{flex:1;min-height:0;overflow:hidden auto;overscroll-behavior:contain;margin-right:-.9em;padding:.2em .9em 3cqh .35em;scrollbar-width:thin;scrollbar-color:rgba(197,250,105,.35) transparent}
#overlay .hg-note{margin:.2em 0 1em;font-size:.9em!important}
#overlay .hg-note b{color:var(--js-text);letter-spacing:.14em;white-space:nowrap}

/* LOOK: one row per part, a lime-edged strip of swatches with the worn (or pointed-at) item named on the right. */
.hg-row{margin:0 0 .6em;padding:.5em .8em .7em;border-left:3px solid rgba(197,250,105,.28);background:rgba(237,242,231,.035);transition:border-color .2s,background .2s}
.hg-row:focus-within{border-left-color:var(--js-lime);background:rgba(237,242,231,.06)}
.hg-row-head{display:flex;align-items:baseline;gap:1em;margin:0 0 .55em;font:600 var(--head)/1.1 var(--js-font);letter-spacing:.28em;color:var(--js-muted);text-transform:uppercase}
.hg-row-head b{flex:none;font-weight:600}
.hg-cap{min-width:0;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--js-text);font-weight:700;letter-spacing:.16em}
.hg-cap.locked{color:var(--js-amber)}
.hg-strip{display:flex;flex-wrap:wrap;gap:.6em .42em;padding-left:.3em}
/* A swatch: a small skewed plate; chips fill it with the colour, helmets and flames show their art. */
#overlay .hg-sw{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:2.3em;height:2.05em;min-height:0;margin:0;padding:0;border:0;border-radius:0;
 background:none;color:var(--js-text);cursor:pointer;outline:none}
#overlay .hg-sw::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.7);transition:border-color .15s,box-shadow .15s}
#overlay .hg-sw.helm{width:3.3em;height:2.5em}
#overlay .hg-sw.flame{width:3em}
.hg-fill{position:absolute;inset:3px;transform:skewX(var(--js-skew));background:var(--c)}
.hg-fill.gloss{background:linear-gradient(165deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%,rgba(0,0,0,.22)),var(--c)}
.hg-fill.glow{box-shadow:0 0 10px -3px var(--c)}
.hg-helmet{display:block;width:2.85em;height:auto;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
#overlay .hg-sw:hover::before{border-color:rgba(197,250,105,.55)}
#overlay .hg-sw.on::before{border-color:var(--js-lime);box-shadow:0 0 0 1px var(--js-lime),0 0 16px -5px rgba(197,250,105,.9)}
#overlay .hg-sw.on::after{content:"";position:absolute;left:22%;right:22%;bottom:-.42em;height:3px;background:var(--js-lime);transform:skewX(var(--js-skew))}
#overlay .hg-sw:focus-visible::before{border-color:var(--js-text);box-shadow:0 0 0 2px var(--js-ground),0 0 0 3px var(--js-text)}
#overlay .hg-sw.on:focus-visible::before{border-color:var(--js-lime);box-shadow:0 0 0 2px var(--js-ground),0 0 0 3px var(--js-lime)}
#overlay .hg-sw.locked{cursor:not-allowed}
#overlay .hg-sw.locked>:not(.hg-lock){opacity:.3;filter:grayscale(.75)}
#overlay .hg-sw.locked::before{background:repeating-linear-gradient(-45deg,rgba(237,242,231,.05) 0 3px,transparent 3px 6px),rgba(9,23,30,.7)}
.hg-lock{position:absolute;width:.72em;height:.86em;color:#dfe6dc;filter:drop-shadow(0 1px 1px #000)}

/* PATCHES: the two slots (the armed one takes the next pick), then a card per patch: earned in colour, locked greyed with progress. */
.hg-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em;margin:0 0 .8em}
.hg-slot-wrap{position:relative;display:flex;min-width:0}
#overlay .hg-slot{position:relative;isolation:isolate;display:flex;flex:1;align-items:center;gap:.75em;min-width:0;min-height:0;margin:0;padding:.5em 1em .5em .7em;border:0;border-radius:0;background:none;
 color:var(--js-text);cursor:pointer;outline:none;text-align:left}
#overlay .hg-slot::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.6);transition:border-color .2s,box-shadow .2s}
#overlay .hg-slot:hover::before{border-color:rgba(197,250,105,.42)}
#overlay .hg-slot.armed::before{border-color:var(--js-lime);background:rgba(197,250,105,.08);box-shadow:inset 3px 0 0 var(--js-lime)}
#overlay .hg-slot:focus-visible::before{box-shadow:inset 3px 0 0 var(--js-lime),0 0 0 2px var(--js-ground),0 0 0 3px var(--js-text)}
.hg-slot img,.hg-empty{flex:none;width:2.9em;height:2.9em}
.hg-empty{display:block;box-sizing:border-box;border:1px dashed rgba(237,242,231,.3);border-radius:50%}
.hg-slot span{min-width:0}
.hg-slot b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--small)/1.2 var(--js-font);letter-spacing:.26em;color:var(--js-muted)}
.hg-slot.armed b{color:var(--js-lime)}
.hg-slot small{display:block;margin-top:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--field)/1.1 var(--js-font);letter-spacing:.08em;color:var(--js-text)}
#overlay .hg-unequip{position:absolute;top:50%;right:.5em;display:grid;place-items:center;width:1.7em;height:1.7em;min-height:0;margin:-.85em 0 0;padding:0;border:1px solid var(--js-line);border-radius:0;
 background:rgba(9,23,30,.85);color:var(--js-muted);font:700 1.1em/1 var(--js-font);cursor:pointer}
#overlay .hg-unequip:hover,#overlay .hg-unequip:focus-visible{outline:none;border-color:var(--js-red);color:var(--js-red)}
#overlay .hg-slot-wrap:has(.hg-unequip) .hg-slot{padding-right:2.9em}
.hg-patches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14em,100%),1fr));gap:.45em}
#overlay .hg-patch{position:relative;display:flex;align-items:center;gap:.75em;min-width:0;min-height:0;margin:0;padding:.45em .8em .45em .5em;border:1px solid var(--js-line);border-radius:0;
 background:rgba(9,23,30,.55);color:var(--js-text);text-align:left;cursor:default;outline:none;transition:border-color .2s,background .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#overlay .hg-patch.earned{cursor:pointer;background:rgba(20,40,44,.62)}
#overlay .hg-patch.earned:hover{border-color:rgba(197,250,105,.42)}
#overlay .hg-patch:focus-visible{box-shadow:inset 0 0 0 2px var(--js-lime)}
.hg-patch img{flex:none;width:3.2em;height:3.2em}
.hg-patch.earned img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.hg-patch.locked img{filter:grayscale(1) brightness(.65) contrast(.9);opacity:.55}
.pt-text{display:flex;flex-direction:column;gap:.22em;min-width:0;flex:1}
.pt-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--field)/1.05 var(--js-font);letter-spacing:.08em}
.hg-patch.locked .pt-text b{color:#9fb3ad}
.pt-text small{font:500 .88em/1.25 var(--js-font);letter-spacing:.02em;color:var(--js-muted)}
.hg-patch.earned .pt-text small{font-weight:600;letter-spacing:.2em;color:var(--js-gold)}
.pt-prog{display:flex;align-items:center;gap:.55em}
.pt-prog i{flex:1;height:.34em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.1);overflow:hidden}
.pt-prog i b{display:block;height:100%;background:var(--js-amber)}
.pt-prog em{font:700 .8em/1 var(--js-font);font-style:normal;letter-spacing:.08em;color:#b6c7c2}
.pt-at{position:absolute;top:50%;right:1em;margin-top:-.75em;padding:.3em .55em .25em;background:var(--js-lime);color:var(--js-ground);font:800 var(--small)/1 var(--js-font);letter-spacing:.12em;transform:skewX(var(--js-skew))}
.hg-patch:has(.pt-at) .pt-text{padding-right:2.2em}

/* RECORD: callsign, rank block with the XP bar, career tiles. */
#overlay .hg-callsign{display:flex;flex-direction:column;gap:.55em;font:600 var(--head)/1.2 var(--js-font);letter-spacing:.26em;color:var(--js-muted);text-transform:uppercase}
#overlay .hg-callsign input{width:100%;padding:.4em .7em .32em;font:italic 800 calc(var(--field)*1.6)/1 var(--js-font);letter-spacing:.12em;text-transform:uppercase}
.hg-rank{display:flex;align-items:center;gap:1.1em;margin:.4em 0 1em;padding:.9em 1.1em;border-left:3px solid var(--js-lime);background:rgba(237,242,231,.045)}
.hg-rank img{flex:none;width:4.6em;height:4.6em;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.hg-rank-text{flex:1;min-width:0}
.hg-lv{display:flex;align-items:baseline;gap:.7em}
.hg-lv b{font:italic 800 2.7em/.9 var(--js-font);letter-spacing:.01em;color:var(--js-text)}
.hg-lv span{font:700 var(--field)/1 var(--js-font);letter-spacing:.3em;color:var(--js-lime)}
.hg-xp{display:flex;align-items:center;gap:.8em;margin:.55em 0 .45em}
.hg-xp i{flex:1;height:.6em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.08);border:1px solid rgba(237,242,231,.12);overflow:hidden}
.hg-xp i b,.hp-bar b{display:block;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),var(--js-lime)}
.hg-xp span{flex:none;font:700 var(--small)/1 var(--js-font);letter-spacing:.14em;color:var(--js-text)}
.hg-rank small{display:block;font:600 var(--small)/1.3 var(--js-font);letter-spacing:.2em;color:var(--js-muted)}
.hg-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45em .6em}
.hg-stat{position:relative;isolation:isolate;min-width:0;padding:.55em 1em .55em 1.1em}
.hg-stat::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.55)}
.hg-stat strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 800 1.75em/1.05 var(--js-font);letter-spacing:.02em;color:var(--js-text)}
.hg-stat span{display:block;margin-top:.2em;font:600 var(--small)/1.2 var(--js-font);letter-spacing:.22em;color:var(--js-muted)}
.hg-stat em{font-style:normal;letter-spacing:.08em;color:#b6c7c2}
.hg-stat.wide{grid-column:1/-1}

/* Tall boxes (touch portrait, a narrow window): the pilot on top, the panel below 56 %. */
@container overlay (aspect-ratio < 23/20){
 #overlay.hangar>section.hangar-panel{top:56%;left:0;width:100%;padding:.9em 1em 0;background:linear-gradient(180deg,rgba(9,23,30,.78),rgba(9,23,30,.94) 3em)}
 .hg-head{gap:.6em 1em;margin-bottom:.7em}
}
/* Short boxes (landscape phones): no eyebrow, BACK beside the tabs, and a touch toolbar (top right) to clear. */
@container overlay (max-height:460px){
 #overlay.hangar>section.hangar-panel{padding-top:.8em}
 .hg-head{margin-bottom:.6em}
 .hg-head .eyebrow{display:none}
 .hg-tabs{order:0;flex:1 1 auto}
 .hg-rank{padding:.6em .8em}
}
.mobile-mode #overlay.hangar>section.hangar-panel{padding-top:max(62px,calc(env(safe-area-inset-top) + 58px))}
/* Portrait touch: the panel starts mid-screen and ends above the rotate hint (style.css) along the bottom edge. */
@media (max-aspect-ratio:23/20){.mobile-mode #overlay.hangar>section.hangar-panel{padding-top:.8em}}
@media (orientation:portrait){
 .mobile-mode #overlay.hangar>section.hangar-panel{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 20px)}
 .mobile-mode #overlay.scene-side.hangar{background:linear-gradient(transparent calc(100% - max(16px,env(safe-area-inset-bottom)) - 20px),rgba(9,23,30,.94) 0)}
}
@container overlay (max-height:460px){
 #overlay .hg-tabs{gap:.4em}
 #overlay .hg-tabs [role=tab]{padding:.5em .85em .45em;letter-spacing:.14em}
 #overlay .hg-head .text-button{padding-inline:.95em}
}
.mobile-mode #overlay .hg-sw{width:2.6em;height:2.4em;min-height:0}
.mobile-mode #overlay .hg-sw:is(.helm,.flame){width:3.2em}
.mobile-mode #overlay .hg-tabs [role=tab]{min-height:40px}
.mobile-mode #overlay .hg-patch,.mobile-mode #overlay .hg-slot{min-height:44px}
.mobile-mode #overlay .hg-unequip{width:2.2em;height:2.2em;min-height:0;margin-top:-1.1em}

/* ---------- Home: the pilot plate above the menu (and the hint's colour chip) ---------- */
#overlay .home-pilot{position:relative;isolation:isolate;display:flex;align-items:center;gap:.8em;width:max-content;max-width:min(27em,100%);min-height:0;margin:0 0 min(1.5em,3.2cqh);padding:.4em 1.4em .45em .55em;
 border:0;border-radius:0;background:none;color:var(--js-text);cursor:pointer;outline:none;text-align:left;transition:transform .22s var(--js-ease)}
#overlay .home-pilot::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.5);transition:border-color .2s,box-shadow .2s}
#overlay .home-pilot:hover,#overlay .home-pilot:focus-visible{transform:translateX(8px)}
#overlay .home-pilot:hover::before,#overlay .home-pilot:focus-visible::before{border-color:rgba(197,250,105,.5);box-shadow:-6px 0 22px -8px rgba(197,250,105,.55)}
#overlay .home-pilot:empty{display:none}
.hp-rank{flex:none;width:3em;height:3em;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.hp-text{display:block;min-width:0}
.hp-name{display:block;overflow:hidden;text-overflow:ellipsis;font:italic 800 1.7em/1 var(--js-font);letter-spacing:.06em;white-space:nowrap}
.hp-lv{display:block;margin-top:.28em;font:600 var(--small)/1 var(--js-font);letter-spacing:.26em;color:var(--js-muted);white-space:nowrap}
.hp-lv em{font-style:normal;font-weight:700;color:var(--js-lime)}
.hp-bar{display:block;width:100%;min-width:9em;height:3px;margin-top:.45em;background:rgba(237,242,231,.12);transform:skewX(var(--js-skew))}
#overlay .hint .you-chip{display:inline-block;width:.75em;height:.75em;margin:0 .45em -.04em 0;background:var(--c);transform:skewX(-12deg);box-shadow:0 0 8px -1px var(--c)}
@media (max-height:460px) and (min-aspect-ratio:3/2){
 .mobile-mode #overlay.scene-side>section.home-col{grid-template-rows:auto auto 1fr}
 .mobile-mode #overlay .home-col .home-pilot{grid-column:1;grid-row:2;margin:.8em 0 0}
 .mobile-mode #overlay .home-col .home-menu{grid-row:1/span 3}
 .mobile-mode #overlay .home-col .hint{grid-row:3}
 /* Seven items (PILOT joined the menu) in the ~324 px the landscape overlay leaves: 40 px rows, 4 px apart. */
 .mobile-mode #overlay .home-col .home-menu{gap:4px}
 .mobile-mode #overlay .home-col .home-menu button{min-height:40px}
}
@media (max-aspect-ratio:23/20){.mobile-mode #overlay .home-pilot{margin:0 auto .2em}}

/* ---------- Results: the XP report under the table ---------- */
#overlay .xp-report{margin:1.2em 0 .3em;padding:.85em 1.1em 1em;border-left:3px solid var(--js-lime);background:linear-gradient(100deg,rgba(20,40,44,.7),rgba(9,23,30,.5))}
.xp-head{display:flex;align-items:center;gap:.8em}
.xp-rank{flex:none;width:3em;height:3em;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.xp-lv{min-width:0}
.xp-level{display:block;font:italic 800 1.9em/.9 var(--js-font);letter-spacing:.01em;color:var(--js-text)}
.xp-title{display:block;margin-top:.2em;font:700 var(--small)/1 var(--js-font);letter-spacing:.3em;color:var(--js-lime)}
.xp-total{margin-left:auto;font:italic 800 1.8em/1 var(--js-font);letter-spacing:.02em;color:var(--js-lime);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-bar{position:relative;height:.7em;margin:.75em 0 .4em;transform:skewX(var(--js-skew));background:rgba(237,242,231,.08);border:1px solid rgba(237,242,231,.14);overflow:hidden}
.xp-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%),var(--js-lime);box-shadow:0 0 12px rgba(197,250,105,.6)}
.xp-flash{position:absolute;inset:0;background:#fff;opacity:0;font-size:0}
.xp-report.up .xp-flash{animation:xp-flash .7s ease-out}
.xp-report.up .xp-level{animation:xp-pop .6s var(--js-ease)}
.xp-nums{display:flex;justify-content:space-between;gap:1em;font:600 var(--small)/1.2 var(--js-font);letter-spacing:.2em;color:var(--js-muted);font-variant-numeric:tabular-nums}
.xp-into{color:var(--js-text)}
.xp-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12em,100%),1fr));gap:.2em 1.6em;margin:.75em 0 0;padding:0;list-style:none}
.xp-rows li{display:flex;justify-content:space-between;gap:.8em;min-width:0;font:600 var(--small)/1.55 var(--js-font);letter-spacing:.16em;color:#a9bcb8;border-bottom:1px solid rgba(237,242,231,.06)}
.xp-rows li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-rows li b{flex:none;color:var(--js-text);font-weight:700;font-variant-numeric:tabular-nums}
.xp-levelup{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1em;margin:.9em 0 0;padding:.5em 1em .45em}
.xp-levelup::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid rgba(197,250,105,.6);background:rgba(197,250,105,.14);box-shadow:0 0 30px -12px rgba(197,250,105,.9)}
.xp-levelup b{font:italic 800 1.45em/1 var(--js-font);letter-spacing:.06em;color:var(--js-lime)}
.xp-levelup span{font:600 var(--small)/1 var(--js-font);letter-spacing:.26em;color:var(--js-text)}
.xp-unlocks{display:flex;align-items:center;gap:.8em 1.2em;margin-top:.8em}
.xp-sub{flex:none;font:600 var(--small)/1 var(--js-font);letter-spacing:.3em;color:var(--js-muted)}
.xp-unlocks>div{display:flex;flex-wrap:wrap;gap:.7em .9em}
.xp-item{display:flex;flex-direction:column;align-items:center;gap:.45em}
.xp-item .hg-sw{position:relative;isolation:isolate;display:grid;place-items:center;width:2.3em;height:2.05em}
.xp-item .hg-sw.helm,.xp-item .hg-sw.flame{width:3em}
.xp-item .hg-sw::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid rgba(197,250,105,.5);background:rgba(9,23,30,.7)}
.xp-item small{font:600 .72em/1 var(--js-font);letter-spacing:.14em;color:#b6c7c2;white-space:nowrap}
/* New patches: a row of large emblems, each over its name. */
.xp-patches{display:grid;grid-template-columns:repeat(auto-fill,minmax(8em,1fr));gap:.9em .7em;margin-top:1em}
.xp-patch{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:0;text-align:center}
.xp-patch img{flex:none;width:4.8em;height:4.8em;margin-bottom:.25em;filter:drop-shadow(0 0 16px rgba(255,209,102,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.xp-patch small{font:600 .75em/1 var(--js-font);letter-spacing:.28em;color:var(--js-gold)}
.xp-patch b{max-width:100%;font:italic 800 1.2em/1.05 var(--js-font);letter-spacing:.04em;color:var(--js-text);overflow-wrap:anywhere}
/* Playing: rows slide in as they count, the tail (level-up card, unlocks, patches) reveals after the bar. */
.xp-report.play .xp-rows li{opacity:0;transform:translateX(-.6em);transition:opacity .25s,transform .3s var(--js-ease)}
.xp-report.play .xp-rows li.in{opacity:1;transform:none}
.xp-report.play :is(.xp-levelup,.xp-unlocks,.xp-patch){opacity:0}
.xp-report.play :is(.xp-levelup,.xp-unlocks).in{animation:xp-in .45s var(--js-ease) both}
.xp-report.play .xp-patch.in{animation:xp-in .3s ease-out both}
.xp-report.play .xp-patch.in img{animation:xp-reveal .9s var(--js-ease) both}
@keyframes xp-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes xp-flash{0%{opacity:.85}100%{opacity:0}}
@keyframes xp-pop{0%{transform:scale(1.35);color:var(--js-lime)}100%{transform:none}}
@keyframes xp-reveal{0%{opacity:0;transform:scale(1.9) rotate(-10deg);filter:brightness(3) blur(3px)}55%{opacity:1;transform:scale(.94) rotate(2deg);filter:brightness(1.5)}
 100%{opacity:1;transform:none;filter:drop-shadow(0 0 16px rgba(255,209,102,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}}

/* ---------- Mid-match toasts (hangar.js Toasts): top centre, under the score strip and the kill banner ---------- */
.toasts{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;container-type:size}
.mobile-mode .toasts{z-index:4}
.toast{position:absolute;left:50%;top:13.6em;isolation:isolate;display:flex;align-items:center;gap:.8em;padding:.4em 1.9em .4em .8em;white-space:nowrap;
 font-family:var(--js-font);font-size:clamp(9px,min(1cqw,1.78cqh),20px);color:var(--js-text);opacity:0;transform:translate(-50%,-.8em);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1)}
.toast::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-14deg);border:1px solid rgba(255,209,102,.45);border-left:3px solid #ffd166;background:rgba(9,23,30,.85);box-shadow:0 10px 30px -14px rgba(255,209,102,.6)}
.toast.in{opacity:1;transform:translate(-50%,0)}
.toast.out{opacity:0;transform:translate(-50%,-.4em)}
.toast.still{transition:none}
.toast img{flex:none;width:3em;height:3em}
.toast small{display:block;font:600 .95em/1 var(--js-font);letter-spacing:.3em;color:#ffd166}
.toast b{display:block;margin-top:.15em;font:italic 800 1.75em/1 var(--js-font);letter-spacing:.06em;text-transform:uppercase}
.mobile-mode .toast{top:7.2em;font-size:clamp(9px,min(1.6cqw,2.9cqh),14px)}
@media (prefers-reduced-motion:reduce){
 .toast,#overlay .home-pilot,.hg-row{transition:none}
 .xp-report.up .xp-flash,.xp-report.up .xp-level{animation:none}
}

/* ---------- Online lobby rows: each player's level and title (from their look code) ---------- */
#overlay .net-players em.lv{margin-left:auto;letter-spacing:.2em;color:#9fb3ad}
#overlay .net-players em.lv+em{margin-left:0}