/* ============================================================
   Pet Display System
   Single source of truth for all pet card, tile, indicator,
   tooltip, and inventory styling across the site.
   ============================================================ */

:root {
    --pet-grid-track: 96px;
    --pet-grid-gap: 12px;
    --pet-grid-gap-lg: 18px;
    --pet-media-size: 76px;
    --pet-name-height: 2.5rem;
    --pet-card-radius: 1.125rem;

    /* Indicator sizing */
    --pet-indicator-size: 18px;
    --pet-indicator-icon: 8px;
    --pet-indicator-offset: 0.35rem;

    /* Indicator colours */
    --pet-wishlist-bg: rgb(244 114 182);
    --pet-wishlist-glow: rgba(244, 114, 182, 0.35);
    --pet-tradeable-bg: rgb(34 197 94);
    --pet-tradeable-glow: rgba(34, 197, 94, 0.35);
    --pet-owned-bg: rgb(59 130 246);
    --pet-owned-glow: rgba(59, 130, 246, 0.35);
}

/* ============================================================
   Pet frame (shared between tile variants)
   ============================================================ */

.pet-frame {
    position: relative;
    width: var(--pet-media-size);
    height: var(--pet-media-size);
    border-radius: 1rem;
    border: 2px solid var(--pet-frame-color, rgba(255, 255, 255, 0.12));
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pet-frame:hover,
.pet-hover-group:hover .pet-frame,
.pet-hover-group:focus-within .pet-frame {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(53, 195, 207, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Pet grid
   ============================================================ */

.pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pet-grid-track), var(--pet-grid-track)));
    gap: var(--pet-grid-gap);
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.pet-grid--scroll {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: clip;
    width: auto;
    max-width: 100%;
    /* Padding gives the selection outline room to paint inside the scroll container
       without being clipped. The negative horizontal margin cancels the layout shift
       on the sides; top padding is absorbed by normal spacing above the grid. */
    padding: 2px;
    margin-left: -2px;
    margin-right: -2px;
}

/* overflow-x: clip does not create a formatting context, so absolutely-positioned
   children (tooltips, indicators) are not clipped by the scroll container.
   The pet-grid--tooltip-safe class is kept for backwards compatibility but is now a no-op. */
.pet-grid--tooltip-safe {}

.pet-grid--lg {
    gap: var(--pet-grid-gap-lg);
}

.pet-panel-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.pet-panel-grid > .card {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .pet-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Pet card (interactive wrapper for inventory)
   ============================================================ */

.pet-card {
    width: var(--pet-grid-track);
    min-width: var(--pet-grid-track);
    max-width: var(--pet-grid-track);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--pet-card-radius);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 20, 32, 0.5);
}

.pet-card--interactive {
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pet-card--interactive:hover,
.pet-card--interactive:focus-visible {
    border-color: rgba(92, 225, 230, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    box-shadow: 0 0 22px rgba(53, 195, 207, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.pet-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 1.7rem;
    padding: 0.3rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(11, 15, 24, 0.82);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(214 219 229);
}

.pet-card__toggle input {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
}

.pet-card__actions,
.pet-card__meta {
    display: grid;
    gap: 0.35rem;
}

.pet-card__meta {
    margin-top: auto;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pet-card__meta p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-card__caption {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(92 102 119);
}

/* ============================================================
   Pet stepper (for trade form quantity)
   ============================================================ */

.pet-stepper {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 0.35rem;
    align-items: center;
}

.pet-stepper button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgb(245 247 250);
    font-size: 9px;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.pet-stepper button:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.pet-stepper__value {
    min-height: 24px;
    display: grid;
    place-items: center;
    gap: 0.15rem;
    padding: 0.25rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(11, 15, 24, 0.84);
    text-align: center;
}

.pet-stepper__count {
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 700;
    color: rgb(255 255 255);
}

.pet-stepper__hint {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(252 211 77);
}

/* ============================================================
   Pet tile (base display component)
   ============================================================ */

.pet-tile {
    position: relative;
    width: var(--pet-grid-track);
    min-width: var(--pet-grid-track);
    max-width: var(--pet-grid-track);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.pet-tile__frame {
    position: relative;
    width: var(--pet-media-size);
    height: var(--pet-media-size);
    border-radius: 1rem;
    border: 2px solid var(--pet-frame-color, rgba(255, 255, 255, 0.12));
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: visible;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pet-card--interactive:hover .pet-tile__frame,
.pet-card--interactive:focus-visible .pet-tile__frame,
.pet-hover-group:hover .pet-tile__frame,
.pet-hover-group:focus-within .pet-tile__frame {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(53, 195, 207, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pet-tile__media {
    position: absolute;
    inset: 0.45rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0rem;
}

.pet-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translate(var(--pet-image-offset-x, 0px), var(--pet-image-offset-y, 0px)) scale(var(--pet-image-scale, 1));
    transform-origin: center bottom;
}

.pet-tile__name {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.2rem;
    font-weight: 600;
    color: rgb(245 247 250);
}

.pet-tile__name--completed {
    color: rgb(16, 185, 129);
}

/* ============================================================
   Pet tile indicators (top-right badges)
   Unified system: wishlist (yellow), tradeable (green), owned (blue)
   ============================================================ */

.pet-tile__indicators {
    position: absolute;
    top: var(--pet-indicator-offset);
    right: var(--pet-indicator-offset);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    z-index: 6;
}

.pet-tile__indicator {
    width: var(--pet-indicator-size);
    height: var(--pet-indicator-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    z-index: 5;
}

.pet-tile__indicators .pet-tile__indicator {
    position: static;
}

/* Wishlist indicator: pink circle with black heart */
.pet-tile__indicator--wishlist {
    background: var(--pet-wishlist-bg);
    color: rgb(255 255 255);
    box-shadow: 0 0 12px var(--pet-wishlist-glow);
}

.pet-tile__indicator--wishlist svg {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    fill: rgb(0 0 0);
}

/* Tradeable indicator: green circle with count */
.pet-tile__indicator--tradeable {
    background: var(--pet-tradeable-bg);
    color: rgb(255 255 255);
    box-shadow: 0 0 12px var(--pet-tradeable-glow);
}

/* Owned indicator: blue circle with checkmark */
.pet-tile__indicator--owned {
    background: var(--pet-owned-bg);
    color: rgb(255 255 255);
    box-shadow: 0 0 14px var(--pet-owned-glow);
}

.pet-tile__indicator--owned svg {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    stroke: rgb(255, 255, 255);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ============================================================
   Wishlist toggle button (unified)
   Used in pet_tile heart toggle AND inventory wishlist
   Always: yellow circle, black star icon
   ============================================================ */

.pet-tile__wishlist-form {
    position: absolute;
    top: var(--pet-indicator-offset);
    right: var(--pet-indicator-offset);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-tile__wishlist-btn {
    width: var(--pet-indicator-size);
    height: var(--pet-indicator-size);
    border-radius: 50%;
    background: var(--pet-wishlist-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 0 12px var(--pet-wishlist-glow);
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.pet-tile__wishlist-btn:hover {
    transform: scale(1.1);
    background: rgb(251, 137, 196);
}

.pet-tile__wishlist-btn--empty {
    background: transparent;
    border: 1.5px solid var(--pet-wishlist-bg);
    box-shadow: none;
}

.pet-tile__wishlist-icon {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    fill: rgb(0, 0, 0);
}

.pet-tile__wishlist-btn--empty .pet-tile__wishlist-icon {
    fill: transparent;
    stroke: var(--pet-wishlist-bg);
    stroke-width: 2;
}

/* Inventory exception: wishlist on the LEFT (top-left), relative to the frame */
.pet-tile__wishlist-form--inventory {
    right: auto;
    left: var(--pet-indicator-offset);
}

.pet-tile__wishlist-form--inventory.hidden {
    display: none !important;
}

/* ============================================================
   Pet Mart button (inventory tile, bottom-left corner)
   Yellow, outlined when off, filled when on.
   ============================================================ */

:root {
    --pet-mart-bg: rgb(234 179 8);
    --pet-mart-glow: rgba(234, 179, 8, 0.40);
}

.pet-mart-btn-wrap {
    position: absolute;
    top: var(--pet-indicator-offset);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-mart-btn {
    width: var(--pet-indicator-size);
    height: var(--pet-indicator-size);
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--pet-mart-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    color: var(--pet-mart-bg);
}

.pet-mart-btn:hover {
    transform: scale(1.1);
    background: rgba(234, 179, 8, 0.18);
    box-shadow: 0 0 8px var(--pet-mart-glow);
}

.pet-mart-btn--active {
    background: var(--pet-mart-bg);
    border-color: var(--pet-mart-bg);
    box-shadow: 0 0 12px var(--pet-mart-glow);
    color: rgb(0, 0, 0);
}

.pet-mart-btn--active:hover {
    background: rgb(253 200 30);
}

.pet-mart-icon {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
}

/* ============================================================
   Pet Mart indicator (listing pages, top-left corner of tile)
   Shown when a pet is marked In Pet Mart for the viewer.
   ============================================================ */

.pet-mart-indicator {
    position: absolute;
    top: var(--pet-indicator-offset);
    left: var(--pet-indicator-offset);
    z-index: 6;
    width: var(--pet-indicator-size);
    height: var(--pet-indicator-size);
    border-radius: 50%;
    background: var(--pet-mart-bg);
    box-shadow: 0 0 12px var(--pet-mart-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
}

.pet-mart-indicator .pet-mart-icon {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    stroke: rgb(0, 0, 0);
    stroke-width: 2.5;
}

/* ============================================================
   Pet tooltip
   ============================================================ */

.pet-tooltip {
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 30;
    width: min(18rem, 90vw);
    margin-bottom: 0.75rem;
    transform: translate(-50%, 0.5rem);
    opacity: 0;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 12, 20, 0.98);
    padding: 1rem;
    text-align: left;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pet-hover-group:hover .pet-tooltip,
.pet-hover-group:focus-within .pet-tooltip {
    transform: translate(-50%, 0);
    opacity: 1;
}

.pet-tooltip__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.pet-tooltip__dot {
    width: 0.65rem;
    height: 0.65rem;
    flex: 0 0 auto;
    margin-top: 0.3rem;
    border-radius: 999px;
}

.pet-tooltip__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgb(255 255 255);
}

.pet-tooltip__meta {
    margin-top: 0.35rem;
    display: grid;
    gap: 0.2rem;
}

.pet-tooltip__eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.pet-tooltip__body {
    margin-top: 0.85rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(214 219 229);
}

.pet-tooltip__untradeable {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255 255 255 / 0.06);
    font-size: 0.75rem;
    line-height: 1.4;
    color: #5c6677;
}

/* Tooltip status badge (top-right corner) */
.pet-tooltip__status {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pet-tooltip__status--wishlist {
    color: var(--pet-wishlist-bg);
}

.pet-tooltip__status--tradeable {
    color: var(--pet-tradeable-bg);
}

.pet-tooltip__status--owned {
    color: var(--pet-owned-bg);
}

/* ============================================================
   Pet select (form selection wrapper)
   ============================================================ */

.pet-select {
    display: block;
    cursor: pointer;
    border-radius: var(--pet-card-radius);
    transition: box-shadow 0.18s ease;
}

.pet-select:hover {
    box-shadow: 0 0 0 1px rgba(92, 225, 230, 0.4);
}

.pet-select--selected {
    outline: 2px solid var(--pet-select-color, rgb(53, 195, 207));
    outline-offset: 0px;
}

.pet-select--selected:hover {
    outline: 2px solid var(--pet-select-color, rgb(53, 195, 207));
    outline-offset: 0px;
}

/* ============================================================
   Pet overflow tile (+N more)
   ============================================================ */

.pet-overflow-tile {
    width: var(--pet-grid-track);
    min-width: var(--pet-grid-track);
    max-width: var(--pet-grid-track);
    min-height: calc(var(--pet-media-size) + var(--pet-name-height) + 0.5rem);
    display: grid;
    place-items: center;
    padding: 0.75rem;
    border-radius: var(--pet-card-radius);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgb(169 178 194);
}

/* ============================================================
   Inventory tile (dashboard inventory)
   ============================================================ */

.inventory-pet {
    gap: 0.35rem;
}

.inventory-pet__tile {
    position: relative;
    width: var(--pet-media-size);
    height: var(--pet-media-size);
    border-radius: 1rem;
    border: 2px solid var(--pet-frame-color, rgba(255, 255, 255, 0.12));
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: block;
    overflow: visible;
}

/* Inventory indicators container (top-right, vertical stack) */
.inventory-pet__indicators {
    position: absolute;
    top: var(--pet-indicator-offset);
    right: var(--pet-indicator-offset);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    z-index: 6;
}

.inventory-pet__indicators .inventory-pet__owned-checkbox {
    position: static;
}

/* Owned checkbox (inventory top-right) */
.inventory-pet__owned-checkbox {
    position: absolute;
    top: var(--pet-indicator-offset);
    right: var(--pet-indicator-offset);
    z-index: 6;
    width: var(--pet-indicator-size);
    height: var(--pet-indicator-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.inventory-pet__owned-checkbox:not(.inventory-pet__owned-checkbox--locked):not(.inventory-pet__owned-checkbox--checked) {
    border: 2px solid rgba(59, 130, 246, 0.5);
    background: transparent;
}

.inventory-pet__owned-checkbox:not(.inventory-pet__owned-checkbox--locked):not(.inventory-pet__owned-checkbox--checked):hover {
    border-color: var(--pet-owned-bg);
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.inventory-pet__owned-checkbox--checked {
    border: none;
    background: var(--pet-owned-bg);
    box-shadow: 0 0 14px var(--pet-owned-glow);
}

.inventory-pet__owned-checkbox--locked {
    background: rgb(100, 116, 139);
    box-shadow: 0 0 10px rgba(100, 116, 139, 0.4);
    cursor: not-allowed;
}

.inventory-pet__owned-checkbox input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.inventory-pet__owned-checkbox input:disabled {
    cursor: not-allowed;
}

.inventory-pet__checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-pet__checkmark svg {
    width: var(--pet-indicator-icon);
    height: var(--pet-indicator-icon);
    stroke: rgb(255, 255, 255);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.inventory-pet__owned-checkbox:not(.inventory-pet__owned-checkbox--checked):not(.inventory-pet__owned-checkbox--locked) .inventory-pet__checkmark svg {
    stroke: rgba(59, 130, 246, 0.7);
    opacity: 0.6;
}

.inventory-pet__owned-checkbox--checked .inventory-pet__checkmark svg,
.inventory-pet__owned-checkbox--locked .inventory-pet__checkmark svg {
    opacity: 1;
}

.inventory-pet__image {
    position: absolute;
    inset: 0.45rem;
    width: calc(100% - 0.9rem);
    height: calc(100% - 0.9rem);
    object-fit: contain;
    object-position: center bottom;
    transform: translate(var(--pet-image-offset-x, 0px), var(--pet-image-offset-y, 0px)) scale(var(--pet-image-scale, 1));
    transform-origin: center bottom;
}

.inventory-pet__name {
    font-size: 10px;
    font-weight: 600;
    color: rgb(245 247 250);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inventory stepper */
.inventory-tile__btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgb(214 219 229);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.inventory-tile__btn:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.inventory-tile__btn:active {
    transform: scale(0.95);
}

.inventory-tile__count {
    width: 32px;
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(11, 15, 24, 0.84);
    font-size: 12px;
    font-weight: 700;
    color: rgb(255 255 255);
}

/* ============================================================
   Admin pet card (no indicators)
   ============================================================ */

.admin-pet-card {
    gap: 0.35rem;
}

.admin-pet-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.admin-pet-card__frame {
    border: 2px solid var(--pet-frame-color, rgba(255, 255, 255, 0.12));
}

.admin-pet-card__image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.admin-pet-card__name {
    font-size: 10px;
    font-weight: 600;
    color: rgb(245 247 250);
    text-align: center;
    width: var(--pet-grid-track);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Utility: hidden override
   ============================================================ */

.hidden {
    display: none !important;
}