/* --- Browser-game classes, attributes, and inventory management --- */
.class-option-row,
.inventory-detail-card,
.inventory-management-card,
.attribute-card {
    background: rgba(255,255,255,0.03);
}

.class-option-head,
.inventory-detail-head,
.inventory-card-footer,
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.class-option-row,
.inventory-detail-card,
.inventory-management-card {
    display: grid;
    gap: 10px;
}

.inventory-detail-card > *,
.inventory-management-card > * {
    min-width: 0;
}

.inventory-management-card {
    min-width: 0;
    min-height: 100%;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    align-content: start;
    grid-template-rows: auto auto auto 1fr auto;
}

.inventory-detail-card {
    gap: 12px;
}

.attribute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.compact-attribute-grid {
    margin-top: 12px;
}

.attribute-card {
    text-align: center;
}

.attribute-card span {
    color: var(--muted);
    font-size: 0.88rem;
}

.attribute-card strong {
    font-size: 1.2rem;
}

.inventory-page-grid {
    align-items: start;
}

.inventory-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.inventory-card-footer {
    margin-top: auto;
    align-items: end;
    gap: 12px;
}

.inventory-management-card .inventory-card-footer {
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.inventory-detail-card p,
.inventory-management-card p,
.class-option-row p {
    margin-bottom: 0;
}

.chip-row {
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .inventory-management-grid,
    .attribute-grid {
        grid-template-columns: 1fr;
    }
}


/* Registration + canonical location polish */
.auth-shell {
    padding: 18px 0;
}

.class-option-head {
    align-items: flex-start;
}

.class-option-head > * {
    min-width: 0;
}

.passive-picker-card .section-head {
    align-items: flex-start;
}

@media (max-width: 720px) {
    .auth-card.wide {
        width: 100%;
    }

    .class-option-head,
    .inventory-detail-head,
    .inventory-card-footer,
    .party-option-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .party-vote-count {
        min-width: 0;
        text-align: left;
    }

    .passive-picker-card .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}


.register-start-grid,
.register-roleplay-toggle {
    min-width: 0;
}

.register-roleplay-toggle {
    display: flex;
    align-items: end;
}

.register-start-grid .section-copy,
.register-start-grid select {
    min-width: 0;
}

@media (max-width: 720px) {
    .register-roleplay-toggle {
        align-items: stretch;
    }
}


.grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 760px) {
    .grid-two {
        grid-template-columns: 1fr;
    }
}

/* --- Mobile chip row + hero breathing upgrade --- */
.pill,
.chip,
.tag-pill,
.mini-stat-chip,
.tab {
    max-width: 100%;
    min-width: 0;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
}

@media (max-width: 720px) {
    .hero-card h1,
    .profile-hero h1,
    .page-banner h1 {
        font-size: clamp(1.72rem, 6.6vw, 2.3rem);
        line-height: 1.1;
    }

    .hero-card p,
    .profile-hero p,
    .page-banner p {
        font-size: 0.98rem;
    }

    .feed-tabs,
    .tag-cloud,
    .meta-row,
    .profile-status-row,
    .composer-actions,
    .post-actions,
    .chip-row,
    .hud-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .feed-tabs > *,
    .tag-cloud > *,
    .meta-row > *,
    .profile-status-row > *,
    .composer-actions > *,
    .post-actions > *,
    .chip-row > *,
    .hud-chip-row > * {
        flex: 0 0 auto;
    }

    .pill,
    .chip,
    .tag-pill {
        min-width: max(8.5rem, max-content);
        white-space: nowrap;
    }

    .mini-stat-chip {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tab {
        min-width: max(8.75rem, max-content);
        white-space: nowrap;
    }
}


/* --- Canonical location page layout polish --- */
.location-page-grid {
    grid-template-columns: minmax(295px, 340px) minmax(0, 1fr);
    gap: 24px;
}

.location-sidebar {
    gap: 18px;
}

.location-sidebar-card {
    padding: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 239, 153, 0.08), transparent 0 42%),
        linear-gradient(180deg, rgba(38, 36, 22, 0.92), rgba(17, 17, 12, 0.98));
}

.location-sidebar-card .section-head {
    display: grid;
    align-items: start;
    gap: 8px;
    margin-bottom: 14px;
}

.location-sidebar-card .section-head h2 {
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.02;
}

.location-sidebar-card .section-head small {
    max-width: none;
    line-height: 1.4;
    white-space: normal;
}

.location-sync-btn {
    background: rgba(255,255,255,0.045);
}

.route-context-current {
    gap: 6px;
}

.route-context-location {
    font-size: 1.08rem;
    font-weight: 780;
    line-height: 1.28;
}

.available-locations-card {
    padding: 22px;
}

.available-locations-card > .section-head {
    margin-bottom: 14px;
}

.location-results-stack {
    gap: 16px;
}

.location-result-card {
    gap: 12px;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
}

.location-result-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.location-result-head > *,
.location-chip-row,
.location-chip-row > * {
    min-width: 0;
    max-width: 100%;
}

.location-result-title-wrap {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.location-kicker {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.location-result-title {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.34rem);
    line-height: 1.14;
}

.location-state-line,
.location-excerpt,
.location-result-body p,
.location-state-note p {
    margin-bottom: 0;
}

.location-state-line {
    font-size: 0.92rem;
}

.location-result-body {
    display: grid;
    gap: 8px;
}

.location-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.location-meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255,255,255,0.055);
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.2;
}

.location-chip-row {
    justify-content: flex-end;
}

.location-state-note {
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0, 0, 0, 0.12);
}

.location-state-note-current {
    border-color: rgba(255, 239, 153, 0.12);
}

.location-state-note-reachable {
    border-color: rgba(170, 226, 174, 0.14);
}

.location-state-note-blocked {
    border-color: rgba(255, 208, 128, 0.1);
}

.location-action-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.location-action-row .btn[disabled] {
    opacity: 0.58;
    box-shadow: none;
}

.contract-card {
    gap: 12px;
}

.contract-card-head {
    align-items: flex-start;
}

.contract-card-head strong {
    flex: 1 1 auto;
}

.contract-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 34px;
    min-width: 3.75rem;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-weight: 750;
    line-height: 1.1;
}

.contract-status-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: auto;
}

.contract-status-row .pill {
    align-self: flex-start;
}

.contract-status-row .btn {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 920px) {
    .location-page-grid {
        grid-template-columns: 1fr;
    }

    .location-sidebar-card .section-head {
        gap: 10px;
    }

    .location-chip-row {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .available-locations-card,
    .location-sidebar-card {
        padding: 18px;
    }

    .location-sidebar-card .section-head {
        gap: 6px;
    }

    .location-sidebar-card .section-head h2 {
        font-size: clamp(1.2rem, 8vw, 1.7rem);
        line-height: 1.05;
    }

    .location-sidebar-card .section-head small {
        font-size: 0.92rem;
    }

    .location-result-card {
        padding: 14px;
    }

    .location-result-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .location-meta-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .location-meta-row > * {
        flex: 0 0 auto;
    }
}