/* Character stats panel (public/js/character-stats-ui.js): Explore inventory and
   the lobby "Your wizard" card. Uses the shared --ui-* tokens from ui-system.css. */
.characterStats {display:grid;gap:8px;padding:12px 14px;background:var(--ui-surface);border:1px solid var(--ui-divider);border-radius:10px;color:var(--ui-text);font:13px/1.4 var(--ui-font);min-width:0;}
.characterStats[hidden] {display:none;}
.characterStatsHead {display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
.characterStatsHead span {color:var(--ui-muted);font:700 10px/1.3 var(--ui-font);letter-spacing:.08em;}
.characterStatsHead small {color:var(--ui-gold);font:600 11px/1.3 var(--ui-font);}
.characterStatsList {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;}
.characterStatRow {display:grid;gap:1px;min-width:0;}
.characterStatRow.wide {grid-column:1/-1;}
.characterStatRow dt {color:var(--ui-muted);font:600 11px/1.3 var(--ui-font);}
.characterStatRow dd {margin:0;min-width:0;}
.characterStatRow dd strong {display:block;color:var(--ui-gold);font:700 15px/1.25 var(--ui-font);font-variant-numeric:tabular-nums;}
.characterStatRow dd small {display:block;color:var(--ui-muted);font:500 10.5px/1.35 var(--ui-font);overflow-wrap:anywhere;}
.characterStatsNote {margin:0;color:var(--ui-muted);font:500 11px/1.45 var(--ui-font);}
.characterStatRow[data-stat="health"] dd strong {color:#9fe3b0;}
.characterStatRow[data-stat="spellDamage"] dd strong {color:#ffc98a;}

/* Inventory: the stats flow under the equipped slots; the zone already scrolls. */
@media(max-width:700px) {.inventoryCharacterZone>.characterStats {grid-column:1/-1;}}
body.touchDevice.mobileMatchMode .inventoryCharacterZone>.characterStats {grid-column:1/-1;}

/* Lobby card */
.accountCharacterStats {margin-top:10px;}
.accountCharacterStats>summary {cursor:pointer;color:var(--ui-gold);font:600 12px/1.4 var(--ui-font);}
.accountCharacterStats .characterStats {margin-top:8px;}
#accountStatsLine {color:var(--ui-gold);}
#accountStatsLine[hidden] {display:none;}

/* Level-up banner: two rising numbers between the level and the rewards. */
.levelUpMomentStats {display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:2px 0;}
.levelUpMomentStats[hidden] {display:none;}
.levelUpMomentStat {display:inline-flex;align-items:baseline;gap:6px;font:600 13px/1.3 system-ui;color:#dfe6ef;font-variant-numeric:tabular-nums;}
.levelUpMomentStatLabel {color:#aab7c4;font-weight:600;}
.levelUpMomentStatFrom {color:#aab7c4;}
.levelUpMomentStatArrow {color:#f1d79b;}
.levelUpMomentStatTo {color:#fff8e8;font:800 16px/1.2 system-ui;text-shadow:0 0 12px #f1d79b55;}
.levelUpMomentStat-health .levelUpMomentStatTo {color:#b9f3c7;}
.levelUpMomentStat-spellDamage .levelUpMomentStatTo {color:#ffd6a0;}
.levelUpMomentDetail[hidden] {display:none;}
#accountLevelRoadmap li.levelStatsOnly strong {color:var(--ui-muted);font-weight:600;}