/* The pet: a fixed overlay laid over every page. The root takes no clicks of its own; only the pet, the ball and the controls do,
   so the page underneath stays fully usable. Colours come from the app's tokens so the dialogs follow the person's theme. */

.rl-pet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    font-family: var(--rl-font, system-ui, sans-serif);
    color: var(--rl-text, #16181d);
}

/* Each pet that is out has a layer of its own inside the overlay for its click area, ball, menu and bubble; the canvas they are
   all drawn on belongs to the overlay itself and goes away only when nobody is out. */
.rl-pet__one { position: absolute; inset: 0; pointer-events: none; }

.rl-pet--hidden .rl-pet__hit,
.rl-pet--hidden .rl-pet__ball,
.rl-pet--empty .rl-pet__canvas { display: none !important; }

.rl-pet__canvas { position: absolute; inset: 0; pointer-events: none; }

.rl-pet__hit {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    border-radius: 38%;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}

.rl-pet__hit:active { cursor: grabbing; }
.rl-pet__hit:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 2px; }

.rl-pet__ball {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    border-radius: 50%;
    user-select: none;
}

.rl-pet__ball--held { cursor: grabbing; }

/* ---- speech bubble ---- */

.rl-pet-bubble {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 240px;
    padding: 6px 13px;
    border-radius: 15px;
    background: #fff;
    color: #26304a;
    border: 1.5px solid rgba(60, 70, 100, 0.28);
    box-shadow: 0 4px 14px rgba(20, 30, 60, 0.18);
    font: 700 14px/1.25 var(--rl-font, system-ui, sans-serif);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    white-space: normal;
    text-align: center;
}

.rl-pet-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1.5px solid rgba(60, 70, 100, 0.28);
    border-bottom: 1.5px solid rgba(60, 70, 100, 0.28);
    transform: translateX(-50%) rotate(45deg);
    border-bottom-right-radius: 3px;
}

.rl-pet-bubble.is-on { opacity: 1; }

/* ---- the menu beside the pet ---- */

.rl-pet-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 262px;
    padding: 12px;
    border-radius: 18px;
    background: var(--rl-surface, #fff);
    color: var(--rl-text, #16181d);
    border: 1px solid var(--rl-border, #dfe2e8);
    box-shadow: 0 14px 40px rgba(10, 16, 40, 0.28);
    pointer-events: auto;
    animation: rl-pet-pop 0.14s ease-out;
}

@keyframes rl-pet-pop {
    from { opacity: 0; scale: 0.94; }
    to { opacity: 1; scale: 1; }
}

.rl-pet-menu__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rl-pet-gear {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--rl-border, #dfe2e8);
    border-radius: 50%;
    background: var(--rl-surface-raised, #f5f6f8);
    color: var(--rl-text-muted, #5b6472);
    cursor: pointer;
}

.rl-pet-gear:hover { color: var(--rl-accent, #2f6df6); border-color: var(--rl-accent, #2f6df6); }
.rl-pet-menu__tools { flex: none; display: flex; gap: 6px; }
.rl-pet-mute.is-muted { color: var(--rl-danger, #d0453b); }
.rl-pet-menu__name { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.rl-pet-menu__sub { font-size: 0.78rem; color: var(--rl-text-muted, #5b6472); line-height: 1.35; }
.rl-pet-menu__note { margin-top: 8px; font-size: 0.78rem; color: var(--rl-text-muted, #5b6472); text-align: center; }

.rl-pet-meters { display: grid; gap: 5px; margin: 10px 0; }
.rl-pet-meter { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; font-size: 0.74rem; }
.rl-pet-meter__label { color: var(--rl-text-muted, #5b6472); font-weight: 600; }
.rl-pet-meter__word { font-weight: 700; min-width: 56px; text-align: right; }
.rl-pet-meter__bar { height: 7px; border-radius: 99px; background: var(--rl-surface-sunken, #eceef2); overflow: hidden; }
.rl-pet-meter__bar > i { display: block; height: 100%; border-radius: 99px; transition: width 0.3s ease; }
.rl-pet-meter__bar > i[data-level='good'] { background: #34b86b; }
.rl-pet-meter__bar > i[data-level='mid'] { background: #f0a21c; }
.rl-pet-meter__bar > i[data-level='low'] { background: #e5534b; }

.rl-pet-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rl-pet-menu__grid--sub { grid-template-columns: repeat(3, 1fr); }

.rl-pet-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    padding: 7px 4px;
    border: 1px solid var(--rl-border, #dfe2e8);
    border-radius: 12px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: inherit;
    font: 600 0.76rem/1.15 var(--rl-font, system-ui, sans-serif);
    cursor: pointer;
    transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}

.rl-pet-act:hover:not(:disabled) { background: var(--rl-surface-sunken, #eceef2); border-color: var(--rl-accent, #2f6df6); transform: translateY(-1px); }
.rl-pet-act:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.rl-pet-act:disabled { opacity: 0.45; cursor: default; }
.rl-pet-act:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 1px; }
.rl-pet-act--primary { background: var(--rl-accent, #2f6df6); color: var(--rl-accent-contrast, #fff); border-color: transparent; }
.rl-pet-act--primary:hover:not(:disabled) { background: var(--rl-accent, #2f6df6); filter: brightness(1.08); }
.rl-pet-act--quiet { background: transparent; }
.rl-pet-act--nudge { border-color: #f0a21c; animation: rl-pet-nudge 1.6s ease-in-out infinite; }

@keyframes rl-pet-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 162, 28, 0); }
    50% { box-shadow: 0 0 0 4px rgba(240, 162, 28, 0.28); }
}

.rl-pet-ico { display: inline-flex; line-height: 0; }

/* The row along the bottom of the menu: the shop, the bag, the other pets. */
.rl-pet-menu__foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rl-border, #dfe2e8); }
.rl-pet-menu__foot > * { flex: 1 1 0; min-width: 0; }
.rl-pet-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--rl-border, #dfe2e8);
    border-radius: 99px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: inherit;
    font: 700 0.74rem/1 var(--rl-font, system-ui, sans-serif);
    white-space: nowrap;
    cursor: pointer;
}

.rl-pet-pill:hover:not(:disabled) { border-color: var(--rl-accent, #2f6df6); color: var(--rl-accent, #2f6df6); }
.rl-pet-pill:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 1px; }
.rl-pet-pill:disabled { opacity: 0.5; cursor: default; }
.rl-pet-menu__wide { margin-top: 8px; display: grid; gap: 6px; font-size: 0.78rem; color: var(--rl-text-muted, #5b6472); }
.rl-pet-act.is-on { border-color: var(--rl-accent, #2f6df6); box-shadow: inset 0 0 0 1px var(--rl-accent, #2f6df6); }
.rl-pet-act__count { font-size: 0.68rem; font-weight: 700; color: var(--rl-text-muted, #5b6472); }
.rl-pet-act canvas { width: 30px; height: 30px; }

/* ---- the "playing" chip and the paw ---- */

.rl-pet-chip {
    position: absolute;
    left: 50%;
    /* One line each when more than one pet has a game on. */
    top: calc(14px + var(--rl-pet-i, 0) * 48px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(560px, calc(100vw - 24px));
    padding: 7px 8px 7px 14px;
    border-radius: 99px;
    background: var(--rl-surface, #fff);
    color: var(--rl-text, #16181d);
    border: 1px solid var(--rl-border, #dfe2e8);
    box-shadow: 0 8px 24px rgba(10, 16, 40, 0.22);
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: auto;
}

.rl-pet-paw {
    position: absolute;
    /* Side by side when more than one pet has been put away. */
    right: calc(16px + var(--rl-pet-i, 0) * 54px);
    /* On the desktop the client sets --rl-pet-inset to the taskbar's height so the button sits above it. */
    bottom: calc(16px + var(--rl-pet-inset, 0px));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--rl-border, #dfe2e8);
    background: var(--rl-surface, #fff);
    color: var(--rl-text-muted, #5b6472);
    box-shadow: 0 6px 18px rgba(10, 16, 40, 0.2);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.12s ease, color 0.12s ease;
}

.rl-pet-paw:hover { transform: scale(1.08); color: var(--rl-accent, #2f6df6); }
.rl-pet-paw.is-adopt { background: var(--rl-accent, #2f6df6); color: var(--rl-accent-contrast, #fff); border-color: transparent; animation: rl-pet-wiggle 3.6s ease-in-out infinite; }

@keyframes rl-pet-wiggle {
    0%, 82%, 100% { transform: rotate(0); }
    86% { transform: rotate(-14deg) scale(1.08); }
    92% { transform: rotate(12deg) scale(1.08); }
}

/* ---- buttons and fields shared by the dialogs ---- */

.rl-pet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--rl-border, #dfe2e8);
    border-radius: 12px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: var(--rl-text, #16181d);
    font: 600 0.9rem/1.2 var(--rl-font, system-ui, sans-serif);
    cursor: pointer;
}

.rl-pet-btn:hover:not(:disabled) { background: var(--rl-surface-sunken, #eceef2); }
.rl-pet-btn:disabled { opacity: 0.55; cursor: default; }
.rl-pet-btn:focus-visible, .rl-pet-input:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 1px; }
.rl-pet-btn--primary { background: var(--rl-accent, #2f6df6); color: var(--rl-accent-contrast, #fff); border-color: transparent; padding: 9px 22px; font-size: 0.95rem; }
.rl-pet-btn--primary:hover:not(:disabled) { background: var(--rl-accent, #2f6df6); filter: brightness(1.08); }
.rl-pet-btn--danger { background: var(--rl-danger, #b3261e); color: #fff; border-color: transparent; }
.rl-pet-btn--danger:hover:not(:disabled) { background: var(--rl-danger, #b3261e); filter: brightness(1.1); }
.rl-pet-btn--small { padding: 5px 12px; font-size: 0.8rem; border-radius: 99px; }
.rl-pet-btn--icon { padding: 8px; border-radius: 50%; }

.rl-pet-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--rl-border, #dfe2e8);
    border-radius: 12px;
    background: var(--rl-surface, #fff);
    color: var(--rl-text, #16181d);
    font: 600 1rem/1.2 var(--rl-font, system-ui, sans-serif);
}

.rl-pet-link { background: none; border: 0; padding: 0; color: var(--rl-danger, #b3261e); font: 600 0.85rem var(--rl-font, system-ui, sans-serif); cursor: pointer; text-decoration: underline; }

/* ---- modal dialogs ---- */

.rl-pet-modal {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14px;
    background: rgba(10, 14, 28, 0.58);
    backdrop-filter: blur(3px);
    pointer-events: auto;
    animation: rl-pet-fade 0.18s ease-out;
}

@keyframes rl-pet-fade { from { opacity: 0; } to { opacity: 1; } }

.rl-pet-card {
    display: flex;
    flex-direction: column;
    width: min(1000px, 100%);
    max-height: calc(100vh - 28px);
    border-radius: 22px;
    background: var(--rl-surface, #fff);
    color: var(--rl-text, #16181d);
    border: 1px solid var(--rl-border, #dfe2e8);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.rl-pet-card--settings { width: min(860px, 100%); }

.rl-pet-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 12px;
}

.rl-pet-card__head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.rl-pet-sub { margin: 2px 0 0; color: var(--rl-text-muted, #5b6472); font-size: 0.92rem; max-width: 56ch; }

.rl-pet-card__body {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 22px;
    padding: 4px 22px 16px;
    overflow-y: auto;
    min-height: 0;
}

.rl-pet-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 22px 16px;
    border-top: 1px solid var(--rl-border, #dfe2e8);
}

.rl-pet-error, .rl-pet-status { margin-right: auto; color: var(--rl-danger, #b3261e); font-weight: 600; font-size: 0.88rem; }

.rl-pet-stage { position: sticky; top: 0; align-self: start; display: grid; gap: 8px; }

.rl-pet-preview {
    width: 100%;
    height: 280px;
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rl-accent, #2f6df6) 14%, var(--rl-surface-raised, #f5f6f8)), var(--rl-surface-sunken, #eceef2));
    border: 1px solid var(--rl-border, #dfe2e8);
    cursor: pointer;
    touch-action: manipulation;
}

.rl-pet-preview--small { height: 200px; }
.rl-pet-stage__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rl-pet-hint { margin: 0; font-size: 0.8rem; color: var(--rl-text-muted, #5b6472); }

.rl-pet-seg { display: inline-flex; border: 1px solid var(--rl-border, #dfe2e8); border-radius: 99px; overflow: hidden; background: var(--rl-surface-raised, #f5f6f8); }
.rl-pet-seg__btn { border: 0; background: none; padding: 5px 12px; font: 600 0.8rem var(--rl-font, system-ui, sans-serif); color: var(--rl-text-muted, #5b6472); cursor: pointer; }
.rl-pet-seg__btn.is-on { background: var(--rl-accent, #2f6df6); color: var(--rl-accent-contrast, #fff); }

.rl-pet-steps { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rl-pet-label { margin-top: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rl-text-muted, #5b6472); }
.rl-pet-label:first-child { margin-top: 0; }

.rl-pet-species { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.rl-pet-species__btn {
    display: grid;
    gap: 1px;
    justify-items: center;
    align-content: start;
    padding: 6px 6px 8px;
    border: 2px solid var(--rl-border, #dfe2e8);
    border-radius: 16px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.rl-pet-species__btn:hover { border-color: color-mix(in srgb, var(--rl-accent, #2f6df6) 50%, var(--rl-border, #dfe2e8)); }
.rl-pet-species__btn.is-on { border-color: var(--rl-accent, #2f6df6); background: color-mix(in srgb, var(--rl-accent, #2f6df6) 10%, var(--rl-surface, #fff)); }
.rl-pet-species__thumb { width: 100%; height: 56px; }
.rl-pet-species__name { font-size: 0.95rem; font-weight: 800; }
.rl-pet-species__hint { font-size: 0.68rem; line-height: 1.2; color: var(--rl-text-muted, #5b6472); }

.rl-pet-breeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.rl-pet-breed {
    display: grid;
    gap: 1px;
    justify-items: center;
    padding: 5px 4px 7px;
    border: 2px solid var(--rl-border, #dfe2e8);
    border-radius: 14px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: inherit;
    cursor: pointer;
}

.rl-pet-breed:hover { border-color: color-mix(in srgb, var(--rl-accent, #2f6df6) 50%, var(--rl-border, #dfe2e8)); }
.rl-pet-breed.is-on { border-color: var(--rl-accent, #2f6df6); background: color-mix(in srgb, var(--rl-accent, #2f6df6) 10%, var(--rl-surface, #fff)); }
.rl-pet-thumb { width: 100%; height: 78px; }
.rl-pet-breed__name { font-size: 0.78rem; font-weight: 700; text-align: center; line-height: 1.2; }
.rl-pet-breed__size { font-size: 0.68rem; color: var(--rl-text-muted, #5b6472); }

.rl-pet-coat { display: grid; gap: 7px; }
.rl-pet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-pet-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 5px;
    border: 2px solid var(--rl-border, #dfe2e8);
    border-radius: 99px;
    background: var(--rl-surface-raised, #f5f6f8);
    color: inherit;
    font: 600 0.8rem var(--rl-font, system-ui, sans-serif);
    cursor: pointer;
}

.rl-pet-chip-btn--plain { padding: 5px 12px; }
.rl-pet-chip-btn.is-on { border-color: var(--rl-accent, #2f6df6); background: color-mix(in srgb, var(--rl-accent, #2f6df6) 12%, var(--rl-surface, #fff)); }
.rl-pet-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.3); flex: none; }

.rl-pet-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.rl-pet-color { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.rl-pet-color input, .rl-pet-collar-custom { width: 34px; height: 28px; padding: 0; border: 1.5px solid var(--rl-border, #dfe2e8); border-radius: 8px; background: none; cursor: pointer; }

.rl-pet-collars { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rl-pet-collar { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.18); cursor: pointer; }
.rl-pet-collar.is-on { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 2px; }

.rl-pet-namerow { display: flex; gap: 8px; }
.rl-pet-slider { display: flex; align-items: center; gap: 12px; }
.rl-pet-slider input { flex: 1; }
.rl-pet-value { min-width: 3.2rem; text-align: right; font-weight: 700; }

.rl-pet-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.rl-pet-toggle input { margin-top: 4px; width: 18px; height: 18px; }
.rl-pet-toggle b { display: block; font-size: 0.92rem; }
.rl-pet-toggle small { color: var(--rl-text-muted, #5b6472); }

.rl-pet-facts { margin: 4px 0 0; padding: 0; list-style: none; color: var(--rl-text-muted, #5b6472); font-size: 0.85rem; }
.rl-pet-danger { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rl-border, #dfe2e8); }
.rl-pet-danger p { margin: 0 0 8px; font-size: 0.88rem; }
.rl-pet-row { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 820px) {
    .rl-pet-card__body { grid-template-columns: 1fr; gap: 10px; }
    .rl-pet-stage { position: static; }
    .rl-pet-preview { height: 220px; }
    .rl-pet-card { max-height: calc(100vh - 20px); border-radius: 18px; }
    .rl-pet-card__head, .rl-pet-card__body, .rl-pet-card__foot { padding-left: 14px; padding-right: 14px; }
}

/* ---- more than one pet: eggs, the roster ---- */

.rl-pet-textbtn { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 2px 0; color: var(--rl-accent, #2f6df6); font: 700 0.8rem var(--rl-font, system-ui, sans-serif); cursor: pointer; }
.rl-pet-textbtn:hover { text-decoration: underline; }

.rl-pet-species__btn.is-locked { border-style: dashed; background: var(--rl-surface-sunken, #eceef2); color: var(--rl-text-muted, #5b6472); cursor: help; }
.rl-pet-species__btn.is-locked .rl-pet-species__name { display: inline-flex; align-items: center; gap: 3px; font-size: 0.86rem; }
/* A breed still in its egg: the egg is shown where the animal would be. */
.rl-pet-breed.is-locked { border-style: dashed; background: var(--rl-surface-sunken, #eceef2); color: var(--rl-text-muted, #5b6472); cursor: help; }
.rl-pet-breed.is-locked:hover { border-color: var(--rl-border, #dfe2e8); }
.rl-pet-breed.is-locked .rl-pet-breed__name { display: inline-flex; align-items: center; gap: 3px; }

.rl-pet-card--roster { width: min(760px, 100%); }
.rl-pet-card__body--one { grid-template-columns: 1fr; gap: 10px; }
.rl-pet-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; padding: 2px; }
.rl-pet-roster__card { display: grid; gap: 4px; padding: 6px; border: 1.5px solid var(--rl-border, #dfe2e8); border-radius: 14px; background: var(--rl-surface-raised, #f5f6f8); }
.rl-pet-roster__card.is-on { border-color: var(--rl-accent, #2f6df6); background: color-mix(in srgb, var(--rl-accent, #2f6df6) 9%, var(--rl-surface, #fff)); }
.rl-pet-roster__pick { display: grid; justify-items: center; gap: 1px; padding: 2px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.rl-pet-roster__pick:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 1px; }
.rl-pet-roster__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; padding: 0 4px; }
.rl-pet-roster__state { font-size: 0.72rem; font-weight: 800; color: var(--rl-text-muted, #5b6472); }
.rl-pet-roster__card.is-on .rl-pet-roster__state { color: var(--rl-accent, #2f6df6); }

/* ---- the shop: the stall takes clicks, the board is its menu ---- */

.rl-pet-stall { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border-radius: 16px; outline: none; -webkit-tap-highlight-color: transparent; }
.rl-pet-stall:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 2px; }
.rl-pet-bubble--keeper { max-width: 230px; }
.rl-pet-menu__grid--two { grid-template-columns: repeat(2, 1fr); }
.rl-pet-pill--shop { border-color: color-mix(in srgb, #e0a400 55%, var(--rl-border, #dfe2e8)); }

.rl-pet-shop {
    position: absolute;
    left: 0;
    top: 0;
    width: 330px;
    max-width: calc(100vw - 16px);
    display: grid;
    gap: 9px;
    padding: 12px;
    border-radius: 18px;
    background: var(--rl-surface, #fff);
    color: var(--rl-text, #16181d);
    border: 1px solid var(--rl-border, #dfe2e8);
    box-shadow: 0 14px 40px rgba(10, 16, 40, 0.28);
    pointer-events: auto;
    animation: rl-pet-pop 0.14s ease-out;
}

.rl-pet-shop__head { display: flex; align-items: center; gap: 8px; }
.rl-pet-shop__title { flex: 1; font-size: 1.05rem; font-weight: 800; }
.rl-pet-shop__purse { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, #e0a400 18%, var(--rl-surface, #fff)); color: color-mix(in srgb, #8a6200 70%, var(--rl-text, #16181d)); font-size: 0.86rem; }
.rl-pet-shop__tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rl-pet-shop__tab { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--rl-text-muted, #5b6472); font: 700 0.62rem/1.1 var(--rl-font, system-ui, sans-serif); cursor: pointer; }
.rl-pet-shop__tab:hover { background: var(--rl-surface-raised, #f5f6f8); }
.rl-pet-shop__tab.is-on { border-color: var(--rl-accent, #2f6df6); color: var(--rl-accent, #2f6df6); background: color-mix(in srgb, var(--rl-accent, #2f6df6) 9%, var(--rl-surface, #fff)); }
.rl-pet-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 262px; overflow-y: auto; padding: 1px; }
.rl-pet-shop__item { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 4px 6px; border: 1px solid var(--rl-border, #dfe2e8); border-radius: 12px; background: var(--rl-surface-raised, #f5f6f8); color: inherit; font: inherit; cursor: pointer; transition: transform 0.08s ease, border-color 0.12s ease; }
.rl-pet-shop__item:hover { border-color: var(--rl-accent, #2f6df6); transform: translateY(-1px); }
.rl-pet-shop__item:focus-visible { outline: 2px solid var(--rl-accent, #2f6df6); outline-offset: 1px; }
.rl-pet-shop__item.is-had { opacity: 0.62; }
.rl-pet-shop__name { font-size: 0.72rem; font-weight: 700; line-height: 1.15; text-align: center; }
.rl-pet-shop__price { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; color: color-mix(in srgb, #8a6200 70%, var(--rl-text, #16181d)); }
.rl-pet-shop__price s { opacity: 0.6; font-size: 0.72rem; }
.rl-pet-shop__owned { font-size: 0.7rem; font-weight: 800; color: #2f9e5d; }
.rl-pet-shop__count { font-size: 0.72rem; font-weight: 700; color: var(--rl-text-muted, #5b6472); }
.rl-pet-shop__item .rl-pet-shop__count { position: absolute; right: 6px; top: 4px; }
.rl-pet-shop__foot, .rl-pet-shop__note, .rl-pet-shop__blurb { margin: 0; font-size: 0.76rem; line-height: 1.35; color: var(--rl-text-muted, #5b6472); }
.rl-pet-shop__note { grid-column: 1 / -1; padding: 14px 6px; text-align: center; }
/* On the eggs' shelf: the name of a kind of animal over its breeds' eggs, and how many of them are had. */
.rl-pet-shop__kind { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 2px 0; font-size: 0.76rem; color: var(--rl-text-muted, #5b6472); }
.rl-pet-shop__kind b { color: var(--rl-text, #16181d); font-size: 0.8rem; }
.rl-pet-shop__kind:first-child { padding-top: 0; }
.rl-pet-shop__detail { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.rl-pet-shop__big { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.rl-pet-shop__status { min-height: 1.1em; font-size: 0.8rem; font-weight: 600; color: var(--rl-danger, #b3261e); }
.rl-pet-shop__row { display: flex; justify-content: flex-end; gap: 8px; }
.rl-pet-shop__asks { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 0.82rem; }
.rl-pet-shop__pips { display: flex; gap: 4px; margin-top: 5px; }
.rl-pet-shop__pips i { width: 16px; height: 7px; border-radius: 99px; background: var(--rl-surface-sunken, #eceef2); }
.rl-pet-shop__pips i.is-on { background: #f0a21c; }
.rl-pet-shop__haggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--rl-text-muted, #5b6472); }
.rl-pet-shop__haggle input { width: 100%; accent-color: var(--rl-accent, #2f6df6); }
.rl-pet-shop__say { font-size: 0.86rem; text-align: center; }
.rl-pet-shop__offer { font-size: 1.15rem; }

@media print {
    .rl-pet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rl-pet-menu, .rl-pet-modal, .rl-pet-shop, .rl-pet-paw.is-adopt, .rl-pet-act--nudge { animation: none; }
}