/* ==========================================================================
   NEXTBALL — Levels (badge, menu bar XP, post-match XP panel, level-up)
   Flat, one accent (tokens in arena.css). Badge markup: levels.js badgeHTML()
   ========================================================================== */

/* --------------------------------------------------------------------------
   Level badge: small hexagon with the number, tiered colours
   grey 1-9 · bronze 10-24 · silver 25-49 · gold 50-74 · platinum 75-98 · MAX 99
   -------------------------------------------------------------------------- */
.nb-lv {
    --s: 20px;
    --lv-rim: #4A515C; --lv-fill: #3A4049; --lv-ink: #DDE0E6;
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: var(--s); height: calc(var(--s) * 1.12); vertical-align: middle;
    line-height: 1; user-select: none;
}
.nb-lv::before, .nb-lv::after {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.nb-lv::before { background: var(--lv-rim); }
.nb-lv::after { inset: 1.5px; background: var(--lv-fill); }
.nb-lv-num {
    position: relative; z-index: 1; color: var(--lv-ink);
    font: 700 calc(var(--s) * .5)/1 var(--f-display, sans-serif); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; margin-top: 1px;
}
.nb-lv--xs { --s: 16px; }
.nb-lv--sm { --s: 20px; }
.nb-lv--md { --s: 26px; }
.nb-lv--lg { --s: 48px; }
.nb-lv--lg::after { inset: 3px; }
.nb-lv[data-level="99"] .nb-lv-num { font-size: calc(var(--s) * .34); letter-spacing: 0; }

.nb-lv--grey     { --lv-rim: #5A616C; --lv-fill: #353A43; --lv-ink: #C9CDD4; }
.nb-lv--bronze   { --lv-rim: #D99A5E; --lv-fill: #8A4F22; --lv-ink: #FFE3C7; }
.nb-lv--silver   { --lv-rim: #EEF2F6; --lv-fill: #A7B1BD; --lv-ink: #1B1F26; }
.nb-lv--gold     { --lv-rim: #FFE08A; --lv-fill: #E4B13A; --lv-ink: #2A1A00; }
.nb-lv--platinum { --lv-rim: #DDFBF7; --lv-fill: #6FD3C8; --lv-ink: #07231F; }
.nb-lv--max      { --lv-rim: #FFD27A; --lv-fill: #1A0D05; --lv-ink: #FFD27A; }
.nb-lv--max::before {
    background: conic-gradient(from var(--nb-lv-ang, 0deg), #FF6A13, #FFD27A, #FFF4CC, #E4B13A, #FF6A13);
    animation: nb-lv-spin 3s linear infinite;
}
@property --nb-lv-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes nb-lv-spin { to { --nb-lv-ang: 360deg; } }

/* tier colour for bars */
.nb-lv-tier--grey     { --lv-c: #8C939E; }
.nb-lv-tier--bronze   { --lv-c: #D99A5E; }
.nb-lv-tier--silver   { --lv-c: #C9D1DA; }
.nb-lv-tier--gold     { --lv-c: #E4B13A; }
.nb-lv-tier--platinum { --lv-c: #7FDCD2; }
.nb-lv-tier--max      { --lv-c: #FFB347; }

/* in lists */
.player-item .player-level { margin: 0 -2px 0 -4px; }
.sp-row-name .sp-lv { margin-left: 6px; }
.top-player-name .top-player-lv { margin-left: 6px; }
.pc-name-row .pc-lv { margin-right: 2px; }

/* --------------------------------------------------------------------------
   Menu profile bar: badge + "Lv 12 · 1,240 / 3,400 XP" + thin bar
   -------------------------------------------------------------------------- */
.user-level { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 6px; border-radius: 3px; background: var(--bg-2); cursor: default; }
.user-level.hidden { display: none !important; }
.user-level-badge { display: inline-flex; }
.user-level-meta { display: inline-flex; flex-direction: column; gap: 4px; min-width: 112px; }
.user-level-txt { font: 700 11px/1 var(--f-display); letter-spacing: .05em; color: var(--fg-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.user-level-bar { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
.user-level-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lv-c, var(--orange)); transition: width 600ms cubic-bezier(.2, .8, .2, 1); }
.user-level.is-guest .user-level-txt { color: var(--fg-2); }
@media (max-width: 700px) {
    .user-level { padding: 0 8px 0 4px; gap: 6px; }
    .user-level-meta { min-width: 44px; }
    .user-level-txt { font-size: 10px; }
    .user-level-txt .ul-xp { display: none; }
    .user-mmr { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Mini profile card: XP bar under the name
   -------------------------------------------------------------------------- */
.pc-level { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pc-level-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--bg-3, #242932); overflow: hidden; }
.pc-level-bar i { position: absolute; inset: 0 auto 0 0; background: var(--lv-c, var(--orange)); border-radius: 2px; }
.pc-level-txt { font: 600 11px/1 var(--f-body); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-level-txt b { color: var(--fg-0); font-family: var(--f-display); letter-spacing: .03em; }

/* --------------------------------------------------------------------------
   Result screen: XP panel
   -------------------------------------------------------------------------- */
.match-result-xp { margin: 14px 0 0; text-align: left; }
.match-result-xp.hidden { display: none !important; }
.xp-panel { position: relative; padding: 14px 16px 14px; background: var(--bg-2); border-radius: var(--r); overflow: hidden; animation: xp-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xp-kicker { font: 700 11px/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.xp-total { font: 700 24px/1 var(--f-display); color: var(--orange); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.xp-panel--none .xp-total { color: var(--fg-3); }
.xp-reason { margin: 8px 0 0; font: 500 13px/1.4 var(--f-body); color: var(--fg-2); }

.xp-lines { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; padding: 0; }
.xp-line { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 3px; background: var(--bg-3); font: 600 12px/1 var(--f-body); color: var(--fg-1);
    opacity: 0; animation: xp-line-in 260ms ease-out forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
.xp-line b { font: 700 12px/1 var(--f-display); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.xp-line--mult { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.xp-line--bonus { background: var(--orange); color: var(--orange-ink); }
.xp-line--bonus b { color: var(--orange-ink); }
@keyframes xp-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.xp-track { display: flex; align-items: center; gap: 10px; }
.xp-lv { display: inline-flex; min-width: 20px; }
.xp-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--bg-4); overflow: hidden; }
.xp-fill, .xp-gain { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.xp-fill { background: var(--lv-c, var(--fg-2)); opacity: .55; }
.xp-gain { background: var(--orange); }
.xp-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font: 600 12px/1.3 var(--f-body); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.xp-note { color: var(--fg-3); }

.xp-nudge { display: grid; gap: 6px; justify-items: start; margin-top: 12px; padding: 12px 14px; background: var(--bg-1); border-left: 3px solid var(--orange); border-radius: 3px; }
.xp-nudge .signup-nudge-text { padding-right: 0; }
.match-result-content .xp-nudge .btn { margin-top: 2px; height: 32px; padding: 0 16px; font-size: 12px; }
.xp-panel { transition: min-height 320ms ease-out; }

/* level-up moment (covers the panel for ~2 s, then the bar refills) */
.xp-levelup { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--bg-2); }
.xp-levelup[hidden] { display: none; }
.xp-levelup.is-in { animation: xp-up-in 360ms cubic-bezier(.2, .9, .25, 1.2) both; }
.xp-levelup.is-out { animation: xp-up-out 380ms ease-in both; }
@keyframes xp-up-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes xp-up-out { to { opacity: 0; } }
.xp-up-card { display: grid; justify-items: center; gap: 8px; padding: 8px 12px; text-align: center; }
.xp-up-kicker { font: italic 700 30px/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--fg-0); }
.xp-up-kicker::after { content: ''; display: block; height: 3px; margin: 7px auto 0; width: 54px; background: var(--lv-c, var(--orange)); }
.xp-up-levels { display: flex; align-items: center; gap: 12px; }
.xp-up-levels .nb-lv--lg { animation: xp-up-pop 520ms cubic-bezier(.2, .9, .25, 1.4) 120ms both; }
@keyframes xp-up-pop { from { transform: scale(.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.xp-up-arrow { width: 22px; height: 2px; background: var(--fg-3); position: relative; }
.xp-up-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--fg-3); border-right: 0; }
.xp-up-txt { display: flex; align-items: center; gap: 12px; font: 700 14px/1 var(--f-display); color: var(--fg-1); letter-spacing: .04em; }
.xp-up-coins { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); }
.xp-up-coins .cos-coin { width: 13px; height: 13px; }
.xp-up-unlocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.xp-unlock { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 3px; background: var(--bg-3); }
.xp-unlock-txt { display: grid; text-align: left; font: 700 12px/1.2 var(--f-body); color: var(--fg-0); }
.xp-unlock-txt small { font: 700 9px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.xp-unlock-art { position: relative; display: inline-block; flex: none; overflow: hidden; border-radius: 3px; }
.xp-unlock-art--bg { width: 64px; height: 26px; }
.xp-unlock-art--fr { width: 30px; height: 30px; overflow: visible; margin: 3px; }
.xp-unlock-art--fr .cos-av-wrap { display: block; width: 30px; height: 30px; }
.xp-unlock-art--fr .cos-av--initials { font-size: 11px; }
.xp-unlock-art--fr .cos-frame-tab { display: none; }
.xp-unlock-art--nc { padding: 0 4px; font: 700 14px/26px var(--f-display); }

@media (max-height: 640px) {
    .xp-panel { padding: 10px 12px; }
    .xp-lines { margin: 8px 0 8px; }
    .xp-total { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .xp-panel, .xp-line, .xp-levelup, .xp-up-levels .nb-lv--lg, .nb-lv--max::before { animation: none !important; opacity: 1; }
    .user-level-bar i { transition: none; }
}