/* In-match progression visuals (DESIGN.md 15): loadout nameplates, 2 PLAYERS look picker, victory pose + mission toast on the
   round result, post-match reward panel. Self-contained (does not rely on progress.css). */

/* ===== build panel header: nameplate instead of the plain name (same row height) ===== */
.p-name.has-np { display: flex; align-items: center; font-size: 1em; overflow: visible; }
.p-name.has-np .np { font-size: .82em; max-width: 100%; padding-block: .1em; border-width: .14em; }
.p-name.has-np .np-title { font-size: max(.45em, 8px); margin-top: .02em; }
.p-name.has-np .np.np-flames, .p-name.has-np .np.np-crown { margin-top: .5em; }
.p-name.has-np .np-name { font-size: 1.2em; }
.panel.p1 .p-name.has-np { justify-content: flex-start; }
.panel.p2 .p-name.has-np { justify-content: flex-start; }

/* ===== VS splash nameplates (mirror the canvas name tag geometry) ===== */
.vs-plate { position: absolute; display: flex; justify-content: center; align-items: center; transform: translateY(-50%) translateX(0); pointer-events: none;
    opacity: 0; transition: opacity .25s ease-out, margin .3s cubic-bezier(.2, .9, .3, 1.2); }
.vs-plate.p1 { margin-left: -5em; justify-content: flex-start; }
.vs-plate.p2 { margin-left: 5em; justify-content: flex-end; }
.vs-plate.in { opacity: 1; margin-left: 0; }
.vs-plate .np { font-size: 1em; max-width: 100%; }
.vs-plate .np-name { font-size: 1em; }

/* ===== setup: bot looks card (2 PLAYERS) ===== */
.su-look { padding-bottom: .7em; }
.landscape .su-grid > .su-look { grid-column: 1 / -1; }
.landscape .su-look-row { flex-direction: row; gap: .6em; }
.landscape .su-look-sw { width: 2.3em; height: 2.3em; }
.su-look-row { display: flex; flex-direction: column; gap: .45em; }
.su-look-btn { --tc: var(--text); position: relative; min-width: 0; width: 100%; justify-content: flex-start; gap: .55em; padding: .3em .7em .3em .4em; text-align: left; border-radius: .9em; }
.su-look-btn.p1 { --c: #5a2b52; --cd: #3a1a38; border-color: var(--coral); }
.su-look-btn.p2 { --c: #1f3d66; --cd: #15284a; border-color: var(--cyan); }
.su-look-tag { flex: none; font-size: .8em; padding: .02em .55em; border-radius: 1em; color: var(--ink); line-height: 1.35; border: .12em solid var(--ink); }
.su-look-btn.p1 .su-look-tag { background: var(--coral); } .su-look-btn.p2 .su-look-tag { background: var(--cyan); }
.su-look-sw { flex: none; display: flex; width: 2.7em; height: 2.7em; border-radius: .6em; background: rgba(0, 0, 0, .28); }
.su-look-sw img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.su-look-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; align-items: stretch; }
.su-look-txt > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-look-a { font-weight: 800; font-size: 1.05em; }
.su-look-b { font-size: .78em; font-weight: 600; color: var(--text-dim); }
.short .su-look .su-h { display: none; }
.short .su-look-btn { padding: .15em .6em .15em .3em; } .short .su-look-sw { width: 2.3em; height: 2.3em; } .short .su-look-b { display: none; }
.short .su-look { padding: .35em .6em; }
@media (max-height: 720px) and (orientation: portrait) { .su-look .su-h { display: none; } #scr-setup.active { gap: .8em; } }

/* ===== look picker modal ===== */
.lp-modal { width: min(94%, 38em); }
.lp-title { font-size: 1.5em; line-height: 1.1; }
.lp-modal.t1 .lp-title { color: var(--coral); } .lp-modal.t2 .lp-title { color: var(--cyan); }
.lp-body { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: .8em; align-items: start; }
.portrait .lp-body { grid-template-columns: minmax(0, 1fr); }
.lp-prev { display: flex; flex-direction: column; align-items: center; gap: .3em; background: rgba(12, 6, 26, .55); border-radius: 1em; padding: .4em; }
.lp-bot { position: relative; width: 100%; height: 9em; }
.portrait .lp-bot { height: 6.5em; }
.lp-bot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-plate { font-size: .9em; display: flex; justify-content: center; width: 100%; min-height: 2.2em; align-items: center; }
.lp-groups { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.lp-h { font-weight: 800; font-size: .85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.lp-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.lp-chip { --tc: var(--text); font-size: .85em; padding: .3em .7em; gap: .4em; max-width: 100%; min-height: 2.4em; border-color: var(--rar, var(--ink)); }
.lp-chip > span { display: block; min-width: 0; }
.lp-chip.on { --c: var(--yellow); --cd: var(--yellow-d); --tc: var(--ink); }
.lp-chip .sw { width: 1.3em; height: 1.3em; }
.lp-ok { align-self: center; min-width: 8em; font-size: 1.1em; }
.short .lp-modal { padding: .6em .9em .7em; gap: .4em; }
.short .lp-bot { height: 6em; }
.short .lp-title { font-size: 1.1em; }

/* ===== round result: victory pose + quip, mission toast ===== */
.rr-banner.has-pose { position: relative; }
.rr-pose { position: absolute; right: -.1em; bottom: -.15em; width: 5.4em; height: 4.9em; pointer-events: none; }
.rr-pose canvas { width: 100%; height: 100%; display: block; }
.rr-banner.has-pose .rr-head, .rr-banner.has-pose .rr-line { margin-right: 4.9em; }
.rr-line.quip { color: var(--yellow); font-style: italic; }
.short .rr-pose { width: 4.4em; height: 4em; } .short .rr-banner.has-pose .rr-head, .short .rr-banner.has-pose .rr-line { margin-right: 4.2em; }
.rr-mtoast { position: absolute; left: 50%; bottom: 4.5cqh; transform: translate(-50%, 1.2em) scale(.92); opacity: 0; display: flex; align-items: center; gap: .55em;
    width: max-content; max-width: min(92%, 26em); padding: .4em .8em; border-radius: 1em; background: var(--ink); border: .15em solid var(--green); color: var(--text);
    font-weight: 800; pointer-events: none; transition: opacity .25s ease-out, transform .45s cubic-bezier(.2, .9, .3, 1.3); z-index: 3; }
.rr-mtoast.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.rr-mtoast .ico { flex: none; display: flex; width: 1.5em; height: 1.5em; color: var(--yellow); }
.rr-mtoast .ico svg, .rr-mt-ok svg { width: 100%; height: 100%; }
.rr-mt-txt { flex: 1; min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rr-mt-ok { flex: none; display: flex; width: 1.4em; height: 1.4em; padding: .2em; border-radius: 50%; background: var(--green); color: var(--ink); }
.short .rr-mtoast { bottom: 2.5cqh; }

/* ===== match result: nameplates + reward panel ===== */
.ms-names .ms-np { display: flex; min-width: 0; font-size: .8em; }
.ms-names .ms-np.p1 { justify-content: flex-start; } .ms-names .ms-np.p2 { justify-content: flex-end; }
.ms-names .ms-np .np { max-width: 100%; }
.mr-rewards { flex: none; display: flex; flex-direction: column; gap: .35em; padding: .45em .7em .5em; background: rgba(12, 6, 26, .6); border: .12em solid var(--ink); border-radius: 1em; min-width: 0; cursor: pointer; }
.mr-rewards[hidden] { display: none; }
.rw-line { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 5.6em; align-items: center; gap: .6em; }
.rw-lv { position: relative; display: flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; font-size: 1em; }
.rw-lv .lvl-badge { font-size: 1em; }
.rw-lv.pass { gap: .1em; color: #d9c2ff; }
.rw-lv .ri-wrap { position: absolute; inset: 0; opacity: .95; display: flex; } .rw-lv .ri-wrap svg { width: 100%; height: 100%; }
.rw-tier { position: relative; z-index: 1; font-size: .95em; color: #fff; text-shadow: 0 .08em 0 var(--ink), .06em 0 0 var(--ink), -.06em 0 0 var(--ink); padding-bottom: .05em; }
.rw-bar { position: relative; height: 1em; border-radius: 1em; background: rgba(255, 255, 255, .12); border: .12em solid var(--ink); overflow: hidden; }
.rw-bar > i { display: block; height: 100%; width: 0; border-radius: 1em; background: linear-gradient(180deg, #8fe4ff, #2EC4F1 60%, #107fa6); box-shadow: inset 0 .15em 0 rgba(255, 255, 255, .45); }
.rw-bar.pass { height: 1.6em; }
.rw-bar-txt { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .6em; font-size: .85em; line-height: 1; color: #fff; white-space: nowrap; letter-spacing: .02em; text-shadow: 0 .08em 0 var(--ink), .07em 0 0 var(--ink), -.07em 0 0 var(--ink), 0 -.07em 0 var(--ink); pointer-events: none; }
.rw-bar.pass > i { background: linear-gradient(180deg, #d1b0ff, #9B5CFF 60%, #5f2fb3); }
.rw-val { text-align: right; color: #7ddcf9; font-size: .95em; white-space: nowrap; }
.rw-bolts { display: flex; align-items: center; justify-content: flex-end; gap: .25em; color: var(--yellow); font-size: .95em; white-space: nowrap; }
.rw-bolts.none { visibility: hidden; }
.rw-bolts .ri, .rw-bolts .ri svg { width: 1.4em; height: 1.4em; display: block; }
.rw-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .6em; min-width: 0; }
.rw-ms { display: flex; flex-direction: column; gap: .15em; min-width: 0; flex: 1; }
.rw-m { display: flex; align-items: center; gap: .4em; min-width: 0; font-size: .85em; font-weight: 700; opacity: 0; transform: translateX(-.6em); transition: opacity .25s, transform .3s var(--ease-spring, ease-out); }
.rw-m.in { opacity: 1; transform: none; }
.rw-m-ok { flex: none; display: flex; width: 1.3em; height: 1.3em; padding: .22em; border-radius: 50%; background: var(--green); color: var(--ink); }
.rw-m-ok svg { width: 100%; height: 100%; }
.rw-m-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-more { font-size: .85em; color: var(--green); opacity: 0; transition: opacity .25s; } .rw-more.in { opacity: 1; }
.rw-go { flex: none; position: relative; font-size: .8em; padding: .35em .8em; gap: .4em; opacity: 0; transition: opacity .3s; }
.rw-go.in { opacity: 1; }
.rw-go .ico { display: flex; width: 1.2em; height: 1.2em; } .rw-go .ico svg { width: 100%; height: 100%; }
.rw-badge { position: absolute; top: -.7em; right: -.5em; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 1em; background: var(--coral); color: #fff; border: .12em solid var(--ink); font-style: normal; font-size: .85em; line-height: 1.45; text-align: center; animation: rwBadge 1.2s ease-in-out infinite; }
@keyframes rwBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.lvl-badge.bump, .rw-tier.bump { animation: rwBump .5s var(--ease-spring, ease-out); }
@keyframes rwBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.short .mr-rewards { padding: .3em .6em .35em; gap: .2em; }
.short .rw-lv { font-size: .78em; } .short .rw-line { grid-template-columns: 2.6em minmax(0, 1fr) 5.6em; }
#scr-result.has-rewards .mr-roast { padding: .3em .7em; font-size: 1.05em; }
.short #scr-result.has-rewards .mr-stats { display: none; }
@media (prefers-reduced-motion: reduce) { .rw-m, .rw-go, .rr-mtoast, .vs-plate { transition: none; } .rw-badge, .lvl-badge.bump, .rw-tier.bump { animation: none; } }

/* ===== ranked hub: opponent nameplate ===== */
.rk-opp-name .np { font-size: .78em; max-width: 100%; }
.rk-opp-name .np-name { font-size: 1.1em; }

/* the info column (stats + ledger + rewards + buttons) takes what it needs; the bots get the rest (nothing is pushed off-screen) */
.portrait #scr-result.has-rewards .mr-body { grid-template-rows: minmax(0, 1fr) auto; }
.portrait #scr-result.has-rewards .mr-info { justify-content: flex-end; }
@media (max-height: 760px) {
    .portrait #scr-result.has-rewards .mr-ledger-h, .portrait #scr-result.has-rewards .mr-ledger .ledger-title { display: none; }
    .portrait #scr-result.has-rewards .mr-ledger .lv-n { font-size: 1.5em; }
    .portrait #scr-result.has-rewards .mr-title { font-size: 2.8em; }
    .portrait #scr-result.has-rewards .mr-stats { padding: .3em .7em; }
    .portrait #scr-result.has-rewards .ms-v { font-size: 1.35em; }
}