/* ============================================
   MODALS
   Auth modal, settings, import modal, popups
   ============================================ */

/* ============================================
   BASE MODAL — the app-wide dialog shell
   (ui/components/base_modal.rs). The frame every dialog modal shares:
   pinned to a fixed top anchor (title bar never moves as content changes),
   width fills the viewport up to a per-modal cap, height fits content up to
   the viewport with the BODY scrolling while header/footer stay put.
   ============================================ */

/* A profile opened from inside another modal — a player named in a Pod Stats
   drill-down, say — must land on top of the modal that offered the link. Both
   are the same shell, so without this the later-portaled one wins and the
   profile opens underneath. */
.base-modal-overlay:has(> .user-profile-modal) {
    z-index: 9100;
}

.base-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    /* Pin to a top anchor and grow downward — vertical centering makes the
       title bar and buttons shift as content height changes. */
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 16px;
    z-index: 6000;
    animation: fadeIn 0.2s ease;
    cursor: pointer;
}

.base-modal {
    display: flex;
    flex-direction: column;
    /* Fill the viewport width by default; the width variants only cap it. */
    width: 100%;
    /* The overlay's padding is the viewport margin; never grow past it. */
    max-height: 100%;
    background: var(--popup-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: baseModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

@keyframes baseModalPop {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.base-modal--sm { max-width: 440px; }
.base-modal--md { max-width: 600px; }
.base-modal--lg { max-width: 800px; }
.base-modal--xl { max-width: 1100px; }

.base-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    /* The Card Detail Modal's header height, so the title bar reads the same
       across every modal. */
    min-height: 72px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.base-modal-header-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
}

.base-modal-title {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The Card Detail Modal's close button, verbatim — one × for the whole app. */
.base-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--button-bg);
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    font-size: 24px;
    margin-left: auto;
}

.base-modal-close svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5px !important;
    flex-shrink: 0;
}

.base-modal-close:hover {
    background: var(--entry-hover-bg);
}

/* Tab strip that replaces the title on the title bar's left side. Only the
   dimensions live here — every visual state (track, segments, active, hover,
   soft-disabled) comes from the shared button contract in buttons.css, the
   same way the panel/search/legal segmented controls get theirs. The close
   button's own margin-left: auto pushes the strip left. */
.base-modal-tabs {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    overflow-x: auto;
}

.base-modal-tab {
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* The one part that scrolls — vertically only. `min-height: 0` lets it
   actually shrink inside the flex column instead of pushing the footer
   off-screen; `overflow-x: hidden` because setting overflow-y alone computes
   overflow-x to auto, and a modal must never scroll sideways. */
.base-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
}

.base-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

/* Shared button styles for the action bar, so every modal's actions read the
   same. Primary = the accent gradient; secondary = quiet outline. */
.base-modal-footer .modal-action-primary,
.modal-action-primary {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
    transition: all 0.2s;
}

.modal-action-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-action-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: var(--danger-color);
    color: white;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-action-secondary {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-action-secondary:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
}

@media (max-width: 640px) {
    .base-modal-overlay {
        padding: 2vh 8px;
    }

    .base-modal-header,
    .base-modal-body,
    .base-modal-footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Per-modal hooks on the BaseModal shell (kept out of the base section above).
   A left-aligned slot in the action bar, for a footer action that is not part
   of the Cancel/confirm pair (e.g. Manage Tags' "Suggest Tags"). */
.base-modal-footer .modal-action-left {
    margin-right: auto;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
    animation: fadeIn 0.2s ease;
    cursor: pointer;
}

/* Modal Content */
.modal-content {
    background: var(--popup-bg);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    cursor: default;
}

.modal-content h3 {
    margin: 0 0 8px 0;
    color: var(--accent-color);
}

.modal-hint {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-bottom: 16px;
}

.modal-code-sample {
    font-family: monospace;
    font-size: 0.85em;
    color: var(--text-muted);
    background: var(--bg-secondary, rgba(255,255,255,0.05));
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 16px;
    white-space: pre;
}

/* Import Modal */

/* Standard title bar treatment: the shell drops its own padding so the header's
   separating rule spans edge to edge; the body carries the padding instead and
   scrolls on short viewports. */
.import-decklist-modal {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
}

.import-decklist-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

/* Theme text colour, not the accent — matching the other titled modals. */
.import-decklist-modal .modal-header h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.import-modal-body {
    padding: 18px 24px 24px;
    overflow-y: auto;
}

/* The collapsed failure list sits between the status line and the buttons. */
.import-failed-details {
    margin: -4px 0 12px;
}

.import-textarea {
    width: 100%;
    height: 200px;
    padding: 12px 14px 12px 12px;
    border-radius: 8px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-family: monospace;
    font-size: 0.9em;
    resize: vertical;
    box-sizing: border-box;
}

.import-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.import-status {
    color: var(--accent-color);
    font-size: 0.85em;
    min-height: 20px;
    margin: 8px 0;
}

.import-replace-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 15px 0;
    padding: 10px 12px;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--warning-color);
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
}

/* Import sources that no longer work through a URL. Informational rather than a
   warning: nothing the user did is wrong, the upstream site blocks automated
   access, so this states the fact and points at the export-and-paste route. */
.modal-hint--warning {
    margin: -8px 0 16px 0;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--info-bg, #4a90d91a);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
}

/* --- Public profile banner ---

   The art runs the full height of the profile header rather than sitting above it: the avatar,
   name and badges are laid over the image, and it dissolves into the modal background just
   before the "My Color Identity" / "My Signature Card" cards begin. Anchored `center top`
   because card art frames its subject near the top, and with no visible bottom edge there is
   nothing for a user to align -- which is what let the per-user position control go away. */
.profile-banner {
    position: relative;
    width: 100%;
    height: 480px;
    background-image: var(--profile-banner-art, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Sits over the art. Nearly clear at the top so the image keeps its colour, then accelerating
   so the last third is indistinguishable from the modal itself. */
.profile-banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 34%,
        color-mix(in srgb, var(--popup-bg) 30%, transparent) 55%,
        color-mix(in srgb, var(--popup-bg) 70%, transparent) 76%,
        color-mix(in srgb, var(--popup-bg) 92%, transparent) 90%,
        var(--popup-bg) 100%
    );
}

.profile-modal-body {
    padding: 0 32px 32px 32px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

/* Only pulled up when there is art to be pulled up over -- a profile with no banner keeps its
   original spacing rather than opening with 300px of empty modal. */
.profile-modal-body--with-banner {
    margin-top: -300px;
}

/* On the BaseModal shell: the banner art runs edge to edge, so the body carries
   no padding of its own — .profile-modal-body provides the content inset. */
.user-profile-modal .base-modal-body {
    padding: 0;
}

/* Legibility scrim for the header text, which now sits on top of arbitrary card art.
   Built from `--popup-bg` via color-mix so it darkens on dark themes and lightens on light
   ones automatically: profile themes are user-chosen, so a hardcoded black wash would wreck
   the light ones. The ellipse keeps the wash centred on the text and off the art's edges. */
/* Named for the public profile specifically: a plain `.profile-header` already exists further
   down for the settings modal, and it is a horizontal flex row. Reusing that name laid the
   avatar, username and badges out side by side and overflowed the page. */
.public-profile-header {
    text-align: center;
    position: relative;
}

.public-profile-header::before {
    content: "";
    position: absolute;
    inset: -24px -8% 0 -8%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 62% 58% at 50% 46%,
        color-mix(in srgb, var(--popup-bg) 78%, transparent) 0%,
        color-mix(in srgb, var(--popup-bg) 58%, transparent) 45%,
        transparent 78%
    );
}

/* The settings preview shows the same treatment at a size that fits inside the form. */
.profile-banner--preview {
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--input-border);
}

/* Phones get a shorter banner and a smaller pull-up: 480px of art would push the profile's
   actual content off the screen before the reader saw any of it. */
@media (max-width: 768px) {
    .profile-banner {
        height: 300px;
    }

    .profile-modal-body--with-banner {
        margin-top: -190px;
    }

    .public-profile-header::before {
        inset: -16px -4% 0 -4%;
    }
}

.import-file-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--input-bg);
    border: 1px dashed var(--input-border);
    border-radius: 8px;
    transition: all 0.2s;
    text-align: center;
}

.import-file-section.drag-over {
    border-color: var(--accent-color);
    background: var(--accent-bg);
    transform: scale(1.02);
    box-shadow: 0 0 15px var(--accent-glow);
}

.import-file-section:hover {
    border-color: var(--accent-color);
    background: var(--accent-bg);
}

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 0.95em;
    cursor: pointer;
    font-weight: 500;
}

.file-input-label .ui-icon {
    color: var(--accent-color);
}

.file-input-hidden {
    display: none;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.cancel-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.confirm-btn {
    background: var(--accent-color);
    border: none;
    color: var(--button-primary-text, white);
    font-weight: bold;
}

.confirm-btn:hover {
    filter: brightness(1.1);
}

/* Auth Modal */
.auth-modal {
    max-width: 400px;
    width: 90%;
    padding: 32px;
    border-radius: 16px;
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-header h2 {
    font-size: 1.8em;
    margin-bottom: 8px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.95em;
    opacity: 0.9;
}

/* The logo heading the sign-in and forgot-password modals.

   These rules used to live in an inline <style> inside each of those two
   modals — two copies of the same global selectors, so whichever modal
   mounted last won and opening one could re-align the other. */
.auth-modal-logo {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
    transform: scale(1.15);
    transform-origin: center;
}

/* The banner logo's "X" is absolutely positioned outside .logo-composite,
   so the box measures 180px while the artwork runs to 211px. Centring the
   box therefore leaves the visible mark sitting 20.6px right of centre.
   This margin widens the outer box to match the ink, which measures to
   within 0.2px of true centre. The number follows the text asset's aspect
   ratio, so re-measure if that artwork is ever replaced. */
.auth-modal-logo .logo-composite {
    margin-right: 41px;
}

/* Consent, which gates every way of creating an account. */
.auth-consent {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--divider-border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    text-align: left;
}

.auth-consent-hint {
    display: block;
    margin: 0.4rem 0 0 22px;
    font-size: 0.8em;
    color: var(--text-muted);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.auth-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1em;
    transition: all 0.2s;
}

.auth-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    margin-top: 16px;
    transition: transform 0.1s;
}

.auth-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Two different reasons to be disabled, and they should not look alike. */
.auth-submit-btn:disabled {
    opacity: 0.45;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

/* A disabled button still receives :hover, so the lift has to be cancelled
   or it goes on advertising itself as pressable. */
.auth-submit-btn:disabled:hover {
    filter: grayscale(0.6);
    transform: none;
}

/* Mid-request is the other kind: the press landed and the button is working,
   so it stays lit and the cursor says "wait", not "not for you". */
.auth-submit-btn.auth-submit-waiting:disabled,
.auth-submit-btn.auth-submit-waiting:disabled:hover {
    opacity: 0.7;
    filter: none;
    cursor: wait;
}

.auth-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.error-icon {
    font-size: 1.2em;
}

.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.form-group-checkbox {
    margin-bottom: 16px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
}

.checkbox-label span {
    color: var(--text-color);
    font-size: 0.9em;
    line-height: 1.4;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent !important;
    border: none;
    color: var(--text-color) !important;
    padding: 0 !important;
    font-size: 2em;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 100;
    opacity: 1;
}

.modal-close svg {
    stroke: currentColor !important;
    color: inherit !important;
}

.modal-close:hover {
    background: var(--accent-bg) !important;
    color: var(--text-color) !important;
}

.text-link {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    margin-left: 4px;
    transition: all 0.2s;
}

.text-link:hover {
    filter: brightness(1.2);
}

.text-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--text-color);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* ── Third-party sign-in ───────────────────────────────────────────────────
   Deliberately styled as secondary to the email form rather than as the hero
   action. Password sign-in is the only route that works for an account whose
   provider later revokes access, so it stays the primary path. */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider-border);
}

.auth-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--ui-button-border);
    background: var(--ui-button-bg);
    color: var(--ui-button-text);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-oauth-btn:hover:not(:disabled) {
    border-color: var(--ui-button-hover-border);
}

.auth-oauth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Sized to match the text beside it rather than a fixed pixel box, so the
   marks stay aligned when the modal font scales. */
.auth-oauth-btn svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.auth-oauth-error {
    margin-bottom: 12px;
}

/* Settings Modal */
.settings-modal {
    max-width: 1100px;
    width: 90%;
    border-radius: 12px;
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    display: flex;
    overflow: hidden;
    height: 85vh;
    max-height: 1000px;
}

/* On the BaseModal shell: the sidebar+panel layout needs an un-padded,
   non-scrolling body — .settings-body does its own scrolling. */
.settings-modal .base-modal-body {
    padding: 0;
    display: flex;
    overflow: hidden;
}

.settings-sidebar {
    width: 250px;
    background: var(--widget-bg);
    border-right: 1px solid var(--divider-border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}

.settings-sidebar h3 {
    margin-bottom: 24px;
    padding-left: 12px;
    color: var(--text-muted);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-nav-item {
    text-align: left;
    background: transparent;
    border: none;
    padding: 12px;
    border-radius: 6px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-nav-item:hover {
    background: var(--accent-bg);
}

.settings-nav-item.active {
    background: var(--button-bg);
    color: var(--accent-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.settings-header {
    flex: 0 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--divider-border);
}

.settings-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.settings-body {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.settings-footer {
    flex: 0 0 auto;
    padding: 24px 32px;
    border-top: 1px solid var(--divider-border);
    display: flex;
    justify-content: flex-end;
}

.settings-section h2 {
    margin-bottom: 32px;
    font-size: 1.5em;
}

.settings-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.1em;
    color: var(--text-color);
    font-weight: 600;
}

.settings-separator {
    margin: 24px 0;
    border-bottom: 1px solid var(--divider-border);
}

.setting-group {
    margin-bottom: 16px;
}

/* ── Linked accounts ─────────────────────────────────────────────────────── */

.linked-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--divider-border);
    border-radius: 8px;
    background: var(--widget-bg);
}

/* Takes the slack so the button stays hard right at any width. */
.linked-account-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.linked-account-name {
    font-weight: 600;
    font-size: 14px;
}

/* An email address is the usual content and can be longer than the row. */
.linked-account-meta {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linked-account-row button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--divider-border);
}

.large-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.profile-info h3 {
    margin: 0 0 4px 0;
    font-size: 1.4em;
}

.email-text {
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Settings Input */
.settings-input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
}

.settings-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--input-bg);
}

.help-text {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Avatar Styles */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-img-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hidden-file-input {
    display: none;
}

.change-avatar-btn {
    font-size: 0.8em;
    color: var(--accent-color);
    cursor: pointer;
    text-decoration: none;
}

.change-avatar-btn:hover {
    color: var(--accent-hover);
}

/* Plan Card */
.plan-card {
    border: 1px solid var(--divider-border);
    border-radius: 12px;
    padding: 24px;
    background: var(--tab-bg);
}

.plan-card.pro-active {
    border-color: var(--accent-color);
    background: var(--accent-bg);
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.plan-price {
    font-size: 1.25em;
    font-weight: bold;
}

.plan-features {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
}

.plan-features li {
    margin-bottom: 12px;
    font-size: 1em;
}

.plan-actions {
    display: flex;
    justify-content: flex-end;
}

.upgrade-btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.upgrade-btn:hover {
    transform: translateY(-1px);
}

.tags-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.playstyle-tag-toggle {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
}

/* Billing uses the same elevated, icon-led language as the shared PRO gate
   without behaving like an overlay inside Settings. */
.billing-settings-section {
    display: grid;
    gap: 16px;
}

.billing-pro-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--widget-bg) 88%, #05080d);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.36),
        0 0 30px color-mix(in srgb, var(--accent-color) 9%, transparent);
}

.billing-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.billing-plan-heading {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
}

.billing-plan-heading .pro-gate-title,
.billing-plan-heading .pro-gate-description {
    justify-content: flex-start;
    text-align: left;
}

.billing-plan-heading .pro-gate-description {
    max-width: 58ch;
    margin-top: 6px;
}

.billing-plan-icon,
.billing-retention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.billing-plan-price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.billing-plan-price strong {
    color: var(--text-primary);
    font-size: 1.28rem;
    line-height: 1.15;
}

.billing-plan-price span,
.billing-management-note {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.billing-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-status-badge,
.billing-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.billing-status-badge.positive {
    border-color: color-mix(in srgb, var(--success-color, #58a66a) 48%, var(--border-color));
    background: color-mix(in srgb, var(--success-color, #58a66a) 12%, transparent);
    color: var(--success-color, #58a66a);
}

.billing-status-badge.warning {
    border-color: color-mix(in srgb, var(--warning-color) 48%, var(--border-color));
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
}

.billing-seat-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 48%, transparent);
}

.billing-seat-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 13px 10px;
    text-align: center;
}

.billing-seat-summary > div + div {
    border-left: 1px solid var(--border-color);
}

.billing-seat-summary strong {
    color: var(--text-primary);
    font-size: 1.22rem;
}

.billing-seat-summary span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.billing-perks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 2px 0;
}

.billing-perks-grid .pro-gate-feature-item {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-secondary) 34%, transparent);
}

.billing-plan-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 38px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.billing-manage-button,
.billing-management-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.billing-retention-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 72%, transparent);
}

.billing-retention-icon {
    width: 34px;
    height: 34px;
}

.billing-retention-card h4 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.billing-retention-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ── Referral & win-back cards ──────────────────────────────────────────
   Siblings of .billing-pro-card and .billing-retention-card above, and
   deliberately built from the same primitives (--widget-bg mixes, the shared
   icon chip, the pill chips) so the Billing & Account tab reads as one surface
   rather than a styled card followed by a plain one. */

.billing-referral-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 14px;
    padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--widget-bg) 84%, #05080d);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.billing-referral-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.billing-referral-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.billing-referral-header h4 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.billing-referral-headline {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.billing-referral-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.billing-referral-rules strong {
    color: var(--text-primary);
    font-weight: 600;
}

.billing-referral-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Banked days are the least intuitive number here, so they get their own
   emphasis rather than sitting in the run of body text. */
.billing-referral-note--banked {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warning-color) 34%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning-color) 9%, transparent);
}

.billing-referral-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.billing-referral-link-field {
    width: auto;
    flex: 1 1 16rem;
}

.billing-referral-link-input {
    width: 100%;
    height: 36px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 72%, transparent);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
}

.billing-referral-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.billing-referral-copy-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.billing-referral-copy-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* "Were you invited?" - entering a code after signing up. Set apart from the
   share block above it so it reads as a separate errand rather than another
   step in inviting somebody. */
.billing-referral-claim {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.billing-referral-claim h5 {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
}

.billing-referral-code-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.billing-referral-code-hint code {
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--widget-bg) 60%, transparent);
    border: 1px solid var(--border-color);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

/* Mirrors .billing-seat-summary's three-up grid rather than inventing a new
   stat layout. */
.billing-referral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--border-color);
}

.billing-referral-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--widget-bg) 80%, transparent);
}

.billing-referral-stat strong {
    color: var(--text-primary);
    font-size: 1.28rem;
    line-height: 1.15;
}

.billing-referral-stat span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.billing-referral-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.billing-referral-list h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.billing-referral-pending-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.billing-referral-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    font-size: 0.8rem;
}

.billing-referral-row:last-child {
    border-bottom: none;
}

.billing-referral-row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-referral-row-state {
    color: var(--text-muted);
}

.billing-referral-row-state.positive {
    color: var(--success-color, #58a66a);
}

.billing-referral-row-state.muted {
    opacity: 0.6;
}

.billing-referral-row-days {
    color: var(--success-color, #58a66a);
    font-weight: 700;
}

.billing-referral-footnote {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Win-back: same card shape, warning accent, because it is a time-bound offer
   rather than a standing feature. */
.billing-winback-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--warning-color) 40%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--warning-color) 7%, var(--widget-bg));
}

.billing-winback-card .billing-referral-icon {
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
    color: var(--warning-color);
}

.billing-winback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-winback-accept {
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--warning-color) 52%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning-color) 16%, transparent);
    color: var(--warning-color);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.billing-winback-accept:hover:not(:disabled) {
    background: color-mix(in srgb, var(--warning-color) 24%, transparent);
}

.billing-winback-accept:disabled {
    opacity: 0.6;
    cursor: default;
}

.billing-winback-dismiss {
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}

.billing-winback-dismiss:hover {
    color: var(--text-primary);
}

.billing-pro-card--loading {
    min-height: 360px;
}

.billing-loading-line,
.billing-loading-grid {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--widget-bg), var(--tab-bg), var(--widget-bg));
    background-size: 200% 100%;
    animation: billing-shimmer 1.4s linear infinite;
}

.billing-loading-line {
    width: 58%;
    height: 28px;
}

.billing-loading-line.short {
    width: 38%;
    height: 14px;
}

.billing-loading-grid {
    flex: 1;
    min-height: 220px;
}

@keyframes billing-shimmer {
    to { background-position: -200% 0; }
}

@media (max-width: 720px) {
    .billing-plan-header {
        flex-direction: column;
    }

    .billing-plan-price {
        align-items: flex-start;
        padding-left: 54px;
        text-align: left;
    }

    .billing-perks-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .billing-plan-heading {
        flex-direction: column;
    }

    .billing-plan-price {
        padding-left: 0;
    }

    .billing-seat-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-seat-summary > div + div {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .billing-plan-actions {
        justify-content: stretch;
    }

    .billing-plan-actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* Commander Slot */
.commander-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    gap: 10px;
    padding: 12px;
    background: var(--warning-bg);
    border: 1px dashed var(--warning-color);
    border-radius: 8px;
    margin-bottom: 10px;
}

.commander-label {
    color: var(--warning-color);
    font-weight: bold;
    font-size: 0.9em;
}

.commander-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--accent-bg);
    border-radius: 6px;
}

.commander-name {
    color: var(--warning-color);
    font-weight: bold;
}

.clear-commander-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1em;
    padding: 4px 8px;
    border-radius: 4px;
}

.clear-commander-btn:hover {
    color: var(--danger-color);
    background: var(--danger-bg);
}

.no-commander {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
}

/* Markdown Content Styles */
.markdown-body {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    color: var(--accent-color);
    font-weight: 600;
}

.markdown-body h1 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 8px;
}

.markdown-body h2 {
    font-size: 1.3em;
}

.markdown-body h3 {
    font-size: 1.1em;
}

.markdown-body p {
    margin-bottom: 16px;
}

.markdown-body ul,
.markdown-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.markdown-body li {
    margin-bottom: 8px;
}

.markdown-body a {
    color: var(--accent-color);
    text-decoration: none;
}

.markdown-body a:hover {
    color: var(--accent-hover);
}

.markdown-body blockquote {
    border-left: 4px solid var(--divider-border);
    padding-left: 16px;
    margin-left: 0;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .settings-modal {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        border: none;
    }

    .settings-modal .base-modal-body {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--divider-border);
        padding: 12px;
        background: var(--popup-bg);
        /* Match modal bg */
        flex-shrink: 0;
    }

    .settings-sidebar h3 {
        display: none;
    }

    .settings-nav {
        flex-direction: row;
        width: 100%;
        gap: 8px;
    }

    .settings-nav-item {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        padding: 10px;
        min-width: auto;
        background: var(--button-bg);
    }

    .settings-nav-item.active {
        background: var(--accent-gradient);
        color: white;
    }

    .settings-content {
        width: 100%;
    }

    .settings-header {
        padding: 16px;
    }

    .settings-body {
        padding: 16px;
    }

    .settings-footer {
        padding: 16px;
    }
}

/* Payment Context Banners */
.payment-context-banner {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid var(--accent-glow);
    background: var(--accent-bg);
}

.payment-context-banner h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: var(--accent-color);
}

.payment-context-banner p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.4;
}

/* Referral welcome: `.referral-context` is a semantic hook only, deliberately
   carrying no colour of its own so the banner picks up the active theme's
   accent from the base rule above. An earlier version pinned it to the success
   green, which ignored the user's chosen theme. */

.skip-signin-btn {
    width: 100%;
    padding: 10px;
    margin-top: 16px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: white;
    font-weight: bold;
    font-size: 0.95em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.skip-signin-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Notification item base padding */
.notification-item {
    padding: 1.5rem;
}

.notification-item .notification-body {
    padding: 1rem;
}

/* Profile Color Identity Glow */
.has-color-identity {
    box-shadow: 0 0 20px 2px var(--identity-color);
}

@media (max-width: 768px) {
    .notifications-modal {
        padding: 12px !important;
    }

    .notification-item {
        padding: 1rem;
    }

    .notification-item .notification-body {
        padding: 0.5rem;
    }
}

/* ---- User Profile: Games Stats ---- */
.profile-game-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.profile-game-stat {
    flex: 1;
    min-width: 140px;
    background: var(--accent-bg, rgba(88,166,255,0.06));
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
}

.profile-game-stat--muted {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-color, #333);
}

.profile-game-stat__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 6px;
}

.profile-game-stat--muted .profile-game-stat__value {
    color: var(--text-muted, #888);
}

.profile-game-stat__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 2px;
}

.profile-game-stat__sub {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

/* ============================================
   Stat Explanation Modal (Stats widgets "?")
   ============================================ */

.stat-explain-modal {
    max-width: 680px;
    max-height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stat-explain-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stat-explain-heading h3 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.15em;
}

.stat-explain-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 0.8em;
    color: var(--text-muted);
}

.stat-explain-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.stat-explain-close:hover,
.stat-explain-close:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.stat-explain-body {
    overflow-y: auto;
    padding: 16px 22px 20px;
}

.stat-explain-summary {
    margin: 0 0 12px;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--text-color);
    padding: 12px 14px;
    background: var(--accent-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.stat-explain-sections {
    display: flex;
    flex-direction: column;
}

.stat-explain-section {
    padding: 12px 2px;
    border-top: 1px solid var(--border-color);
}

.stat-explain-section:first-child {
    border-top: none;
}

.stat-explain-section.signal-absent {
    opacity: 0.72;
}

.stat-explain-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.stat-explain-section-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--accent-color);
}

.stat-explain-section-title {
    font-weight: 700;
    font-size: 0.9em;
    color: var(--text-color);
}

.stat-explain-floor {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent-color);
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
}

.stat-explain-detail {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--text-secondary);
}

.stat-explain-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.stat-explain-card {
    position: relative;
    width: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
}

.stat-explain-card.chip-clickable {
    cursor: pointer;
}

.stat-explain-card img {
    width: 100%;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-explain-card.chip-clickable:hover img,
.stat-explain-card.chip-clickable:focus-visible img {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    z-index: 2;
    position: relative;
}

.stat-explain-card.chip-clickable:hover .stat-explain-card-name {
    color: var(--accent-color);
}

.stat-explain-card-placeholder {
    width: 100%;
    aspect-ratio: 5 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--accent-bg);
}

.stat-explain-card-count {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
}

.stat-explain-card-name {
    width: 100%;
    font-size: 0.68em;
    line-height: 1.2;
    text-align: center;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stat-explain-markers {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--text-secondary);
}

.stat-explain-footnote {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.78em;
    color: var(--text-muted);
}

.stat-explain-footnote a {
    color: var(--accent-color);
}

/* Tier legend rows inside stat explanation modals */
.stat-explain-tiers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.stat-explain-tier-row {
    display: grid;
    grid-template-columns: 110px 70px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.82em;
}

.stat-explain-tier-row.has-alt {
    grid-template-columns: 110px 70px 70px 1fr;
}

.stat-explain-tier-head {
    padding-bottom: 0;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-explain-tier-head .stat-explain-tier-range {
    color: var(--text-muted);
    font-weight: 700;
}

.stat-explain-reassurance {
    font-weight: 700;
}

.stat-explain-tiers + .stat-explain-detail {
    margin-top: 8px;
    font-size: 0.78em;
    color: var(--text-muted);
}

.stat-explain-tier-row.tier-active {
    background: var(--accent-bg);
    border: 1px solid var(--accent-color);
}

.stat-explain-tier-label {
    font-weight: 700;
    color: var(--text-color);
}

.stat-explain-tier-row.tier-active .stat-explain-tier-label {
    color: var(--accent-color);
}

.stat-explain-tier-range {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.stat-explain-tier-desc {
    color: var(--text-secondary);
}

/* --- Customise Tags modal --- */
.tag-customize-modal {
    max-width: 560px;
    /* Anchor for the close button, and room under the list for the pinned actions bar. */
    position: relative;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.tag-customize-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag-customize-close:hover {
    background: var(--widget-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.tag-customize-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
    margin: 12px 0 0;
    padding-right: 6px;
}

.tag-customize-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tag-customize-row:hover {
    background: var(--widget-bg);
    border-color: var(--border-color);
}

/* A hidden group stays legible rather than disappearing: the reader is here to find it. */
.tag-customize-row.is-hidden .tag-customize-label {
    color: var(--text-muted);
}

/* The shared pill toggle, narrowed: its 80px-per-side default is sized for a settings
   form and would leave no room for the label in a list this dense. */
.tag-customize-toggle {
    flex: 0 0 auto;
    height: 28px;
    /* Last on the row, pinned right. */
    margin-left: auto;
}

.tag-customize-toggle .toggle-btn {
    min-width: 42px;
    padding: 2px 8px;
    font-size: 0.7rem;
}

.tag-customize-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Its own fixed column so the badges form a straight edge down the list rather than
   landing wherever each label happens to end. */
.tag-customize-flag {
    flex: 0 0 92px;
    display: flex;
    justify-content: flex-end;
}

/* A package missing one of its halves: a warmer badge than plain "small". */
.tag-customize-note--sides {
    color: var(--warning-color, #f59e0b);
    border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 55%, transparent);
    white-space: nowrap;
}

.tag-customize-count {
    flex: 0 0 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.85em;
}

/* Marks the groups the size rule hid, so an unfamiliar 'off' state has a stated reason. */
.tag-customize-note {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
}

/* On a phone the four columns leave the tag name a few characters wide, which is the one
   thing in the row the reader is actually looking for. Two rows instead: the name gets the
   full width, and the controls that qualify it sit underneath. */
@media (max-width: 600px) {
    .tag-customize-row {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "label label label"
            "flag count toggle";
        align-items: center;
        gap: 6px 10px;
        padding: 8px 10px;
    }

    .tag-customize-label {
        grid-area: label;
        white-space: normal;
        font-weight: 600;
    }

    .tag-customize-toggle {
        grid-area: toggle;
    }

    /* Sized to its badge rather than the fixed alignment column, which only earns its keep
       when the badges form a straight edge beside a name column. */
    .tag-customize-flag {
        grid-area: flag;
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .tag-customize-count {
        grid-area: count;
        flex: 1 1 auto;
        text-align: right;
    }
}

/* Pinned footer: Reset stays at the left edge where it was, Done sits bottom-right where
   the eye finishes. The top border keeps it distinct while the list scrolls under it. */
.tag-customize-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    background: inherit;
}

/* The title reads as a heading, not as a link. `.modal-content h3` paints every modal title
   in the accent colour; here it competes with the accent-filled On toggles down the list. */
.tag-customize-modal > h3 {
    color: var(--text-color);
}

/* An active "Off" gets a filled grey rather than the accent fill, so a glance down the column
   separates on from off by colour instead of by reading the word in each pill. "On" keeps the
   accent treatment it shares with every other toggle in the app. */
.tag-customize-toggle .toggle-btn.right.active {
    background: color-mix(in srgb, var(--text-muted) 42%, var(--widget-bg));
    color: var(--text-color);
    box-shadow: none;
}

.tag-customize-reset {
    display: inline-flex;
    align-items: center;
    /* The icon sat flush against the label before this. */
    gap: 8px;
}

/* Customize Tags: the same titled header the other modals wear. */
.tag-customize-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
}

.tag-customize-modal .modal-header h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, var(--text-color));
}

/* Inside the header now, so it flows rather than floating in the corner. */
.tag-customize-modal .modal-header .tag-customize-close {
    position: static;
}

/* The count is why a group is off; it should not read as an afterthought. */
.tag-customize-count {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 700;
}


/* ============================================
   DECK SAVED MODAL
   ============================================ */
.deck-saved-modal {
    width: 560px;
    max-width: calc(100vw - 32px);
    position: relative;
}

.deck-saved-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Theme text colour, like every other titled modal — not the accent. */
.deck-saved-modal .modal-header h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, var(--text-color));
}

.deck-saved-modal .modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
}

.deck-saved-modal .share-modal-sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.deck-saved-section h4 {
    margin: 0 0 6px;
    color: var(--accent-light);
    font-size: 0.95rem;
}

.deck-saved-section h4 + .share-url-field,
.deck-saved-section h4 + select {
    margin-bottom: 12px;
}

.deck-saved-section + .deck-saved-section,
.deck-saved-row {
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
}

.deck-saved-note {
    margin: 0 0 12px;
    color: var(--text-color);
    font-weight: 600;
}

.deck-saved-status {
    text-align: center;
    margin-bottom: 1rem;
}

.deck-saved-format {
    width: 100%;
}

.share-url-container {
    display: flex;
    gap: 8px;
    width: 100%;
}

.share-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.share-social-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.share-social-link {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    background: var(--input-bg);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.share-social-link:hover {
    color: var(--accent-light);
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
}

.share-social-icon {
    width: 15px;
    height: 15px;
    background-color: currentColor;
}

.deck-saved-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.deck-saved-row .deck-saved-section {
    display: flex;
    flex-direction: column;
    border-top: none;
    padding-top: 0;
}

.deck-saved-row .deck-saved-section + .deck-saved-section {
    border-left: 1px solid var(--border-color);
    padding-left: 1.25rem;
}

.deck-saved-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.deck-saved-section-title h4 {
    margin: 0;
}

.deck-saved-blurb {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.8rem;
    flex: 1;
}

.deck-saved-modal .deck-saved-action {
    width: 100%;
    height: 40px;
    /* A flex child in a column that may run long: without a real minimum and
       `flex-shrink: 0` the button was compressed to fit, so the two buttons
       came out different heights. */
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0 14px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.deck-saved-action.btn-unavailable {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .deck-saved-row {
        grid-template-columns: 1fr;
    }

    .deck-saved-row .deck-saved-section + .deck-saved-section {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 1.25rem;
    }
}