/* ==========================================================================
   Home on a phone: one gutter for every block, the play modes as tiles,
   progress as four even cards, and a lighter top.

   Loaded last. The dark themes still carried the scroll-row bleed
   (margin-inline: -16px) on rows that no longer scroll, so the play modes and
   the progress strip ran to the screen edge there; steppe-light had its own
   fix, which this replaces for every theme.
   ========================================================================== */

@media (max-width: 767px) {
    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-row--modes,
    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-row {
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* ── Identity: the avatar already sits in the top bar ─────────────────── */

    html[data-theme] #screen-home .tp-dash-id { gap: 0; min-height: 0; padding-block: 4px 2px; }
    html[data-theme] #screen-home .tp-dash-id__avatar { display: none; }
    html[data-theme] #screen-home .tp-dash-id__copy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    html[data-theme] #screen-home .tp-dash-id__name {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.015em;
    }
    html[data-theme] #screen-home .tp-dash-id__meta { gap: 6px; }
    html[data-theme] #screen-home :is(.tp-dash-id__rating, .tp-dash-id__status) {
        padding: 3px 9px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--tp-color-text) 7%, transparent);
        font-size: 12px;
    }

    /* ── The top: the board photo is a strip, not half the screen ─────────── */

    html[data-theme] #screen-home .tp-dash-stage { padding-top: 112px; border-radius: 24px; }
    html[data-theme] #screen-home .tp-dash-stage__wordmark { top: 20px; left: 20px; font-size: 21px; }
    html[data-theme] #screen-home .tp-dash-stage .tp-dash-primary { border-radius: 20px; }

    /* ── Play modes: three tiles in a row ──────────────────────────────────── */

    html[data-theme] #screen-home .tp-dash-block--modes .tp-dash-row--modes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        border: 0;
    }

    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        width: auto;
        min-width: 0;
        min-height: 112px;
        margin: 0;
        padding: 12px;
        border: 0;
        border-radius: 18px;
        background: color-mix(in srgb, var(--tp-color-surface-raised) 78%, transparent);
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 8%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        text-align: left;
    }

    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile > i {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        margin: 0 0 6px;
        border-radius: 11px;
        background: color-mix(in srgb, var(--tp-color-primary) 16%, transparent);
        color: var(--tp-color-primary);
        font-size: 15px;
    }

    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile__value {
        color: var(--tp-color-text);
        font-size: 13.5px;
        font-weight: 800;
        line-height: 1.2;
        white-space: normal;
    }

    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile__label {
        color: var(--tp-color-text-muted);
        font-size: 11.5px;
        line-height: 1.3;
        white-space: normal;
    }

    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile:active { transform: scale(0.97); }

    /* ── Progress: four even cards ─────────────────────────────────────────── */

    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        /* The tiles are the cards; the old strip frame around them goes
           (steppe-light paints it with a stronger selector). */
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-row > * {
        min-width: 0;
        width: auto;
        min-height: 76px;
        margin: 0 !important;
        padding: 10px;
        border: 0 !important;
        border-radius: 16px !important;
        background: color-mix(in srgb, var(--tp-color-surface-raised) 78%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    }

    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-tile__value {
        font-size: 22px;
        line-height: 1.1;
    }

    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-tile__label {
        font-size: 11px;
        line-height: 1.25;
        white-space: normal;
    }

    /* ── League: a card like the others, in every theme ───────────────────── */

    html[data-theme] #screen-home .tp-dash-block--league .tp-dash-wide {
        border: 0;
        border-radius: 18px;
        background: color-mix(in srgb, var(--tp-color-surface-raised) 78%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-color-text) 8%, transparent);
    }
}

@media (max-width: 359px) {
    html[data-theme] #screen-home .tp-dash-block--progress .tp-dash-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] #screen-home .tp-dash-row--modes .tp-dash-tile:active { transform: none; }
}