.dino-ability-toolbar {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.dino-ability-toolbar p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}
.dino-ability-search {
    width: min(320px, 100%);
    margin: 0;
}
.dino-ability-list {
    display: grid;
    gap: 18px;
    margin-top: 16px;
}
.dino-ability-slot {
    display: grid;
    gap: 10px;
}
.dino-ability-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(244, 197, 66, 0.32);
}
.dino-ability-slot-head h4 {
    margin: 0;
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
}
.dino-ability-slot-head span {
    min-width: 28px;
    padding: 3px 7px;
    color: var(--muted);
    font-family: var(--font-code);
    font-size: 0.72rem;
    text-align: center;
    background: var(--panel-deep);
    border: 1px solid var(--border);
}
.dino-ability-slot-list {
    display: grid;
    gap: 12px;
}
.dino-ability-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    background: var(--panel-dark);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-m);
}
.dino-ability-icon {
    width: 56px;
    height: 56px;
}
.dino-ability-head h4 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}
.dino-ability-body p {
    margin: 8px 0 12px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.dino-metric-list span {
    padding: 5px 7px;
    color: var(--text);
    font-family: var(--font-code);
    font-size: 0.72rem;
    background: var(--panel-deep);
    border: 1px solid var(--border);
}
.dino-metric-list b {
    color: var(--accent);
}
@media (max-width: 1040px) {
    .dino-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .dino-details-overview {
        display: grid;
    }

    .dino-roster-panel {
        position: static;
        max-height: none;
        min-height: 0;
        min-width: 0;
    }

    .dino-roster-list {
        max-height: 420px;
    }
}
@media (max-width: 640px) {
    /* Keep the mobile frames singular. Chromium can detach copies of the
       decorative pseudo-elements while compositing this long page, so paint
       the same corner ticks directly on each frame instead. */
    body.dinos-page .topbar::after,
    body.dinos-page .panel::after {
        content: none;
        display: none;
        opacity: 0;
        background: none;
    }

    body.dinos-page .topbar,
    body.dinos-page .panel {
        background-image:
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0),
            linear-gradient(rgba(138, 106, 16, 0.55) 0 0);
        background-position:
            left 5px top 5px,
            left 5px top 5px,
            right 5px top 5px,
            right 5px top 5px,
            left 5px bottom 5px,
            left 5px bottom 5px,
            right 5px bottom 5px,
            right 5px bottom 5px;
        background-size:
            12px 2px,
            2px 12px,
            12px 2px,
            2px 12px,
            12px 2px,
            2px 12px,
            12px 2px,
            2px 12px;
        background-repeat: no-repeat;
    }

    .dino-overview-metrics,
    .dino-detail-identity,
    .dino-ability-card {
        grid-template-columns: 1fr;
    }

    .dino-overview-metrics {
        min-width: 0;
    }

    .dino-portrait-frame {
        width: 92px;
        height: 92px;
    }

    .dino-ability-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .dino-ability-search {
        width: 100%;
    }

    

    /* On phones the roster scrolls sideways as a row of cards instead of a
       tall vertical list, keeping the selected dino's details in view. */
    .dino-roster-list {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 10px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .dino-roster-item {
        flex: 0 0 auto;
        width: 220px;
        scroll-snap-align: start;
    }
}