/**
 * Responsive Component Styles
 */

/* === RESPONSIVE === */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;

    /* Tablet: Keep 3 columns, mobile will stack */
    .stat-block {
        grid-template-columns: repeat(3, 1fr);

    .status-block {
        grid-template-columns: 1fr;

    .name-input-group {
        flex-direction: column;
        align-items: stretch;

@media (max-width: 600px) {
    /* Mobile: Stack vertically for better mobile experience */
    .stat-block {
        grid-template-columns: 1fr !important;

    .npc-input-group {
        grid-template-columns: 1fr;

    .dashboard-grid {
        grid-template-columns: 1fr;

}}}}}}}}}