#screen-hub .hub-primary-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#screen-hub .hub-secondary-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 10px; }
#hub-player-traits { display: contents; }
.hub-trait-stat { min-width: 0; }
.hub-trait-label { display: block; min-height: 2.5em; font-size: 12px; line-height: 1.25; }
.hub-trait-value small { margin-left: 2px; color: #9eb0c5; font-size: 11px; font-weight: normal; }
.hub-traits-note { display: block; margin: 7px 2px 0; color: #bdc9dc; font-size: 11px; text-align: right; }
#train-player-traits { margin-top: 30px; }
#train-player-traits h3 { margin-bottom: 8px; }
.trait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trait-profile-card, .trait-training-card { min-width: 0; padding: 20px; border: 1px solid #48887e; border-radius: 10px; background: #142d3c; text-align: left; overflow-wrap: anywhere; }
.trait-training-card { display: flex; flex-direction: column; }
.trait-training-card h4 { margin: 0 0 12px; color: #e9f6f4; font-size: 19px; }
.trait-profile-card > strong, .trait-training-card > strong { display: block; color: #91e2d4; font-size: 30px; margin: 8px 0; }
.trait-profile-card p, .trait-training-card p, .trait-note, .trait-rules { color: #bdc9dc; font-size: 13px; line-height: 1.7; }
.trait-training-card p { flex-grow: 1; }
.trait-profile-card small, .trait-training-card small, .trait-xp { color: #cfdbeb; font-size: 12px; line-height: 1.6; }
.trait-training-card progress { width: 100%; height: 16px; margin: 16px 0 6px; accent-color: #74d8bd; }
.trait-xp { margin-bottom: 12px; }
.trait-training-card .action-btn { margin-top: 16px; width: 100%; white-space: normal; background: #286e64; }
.trait-training-card .action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.trait-rules { padding: 12px 16px; border: 1px solid #42617b; border-radius: 8px; text-align: left; }
.trait-rules summary { cursor: pointer; color: #e2eaf6; }
@media (max-width: 950px) { .trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
    .trait-grid { grid-template-columns: minmax(0, 1fr); }
    #screen-hub .hub-header { flex-direction: column; align-items: stretch; }
    #screen-hub .hub-player-media { width: 100% !important; flex-direction: row !important; align-items: flex-end; justify-content: center; }
    #screen-hub .hub-player-media > div { width: 106px; box-sizing: border-box; }
    #screen-hub .player-info { width: 100%; min-width: 0; }
    #screen-hub .player-name, #screen-hub .hub-media-controls { justify-content: center; }
    #screen-hub .hub-primary-stats, #screen-hub .hub-secondary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-traits-note { text-align: left; }
}