@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Fredoka:wght@400;500;600;700&display=swap');

/* ═══════════════════ PALETTE ═══════════════════ */
:root {
    --pc-bg: #faf5ee;
    --pc-bg2: #f3ebe0;
    --pc-bg3: #ece2d4;
    --pc-panel: #ffffff;
    --pc-panel-border: #e8dfd3;
    --pc-text: #3d3229;
    --pc-text-dim: #8a7e6f;
    --pc-text-muted: #b5a99a;
    --pc-accent: #e8834a;
    --pc-accent-soft: #fdebd5;
    --pc-accent-glow: rgba(232, 131, 74, 0.25);
    --pc-green: #5eb87e;
    --pc-green-soft: #dff5e6;
    --pc-blue: #5ba4d9;
    --pc-blue-soft: #ddeefa;
    --pc-pink: #e57fa0;
    --pc-pink-soft: #fce4ec;
    --pc-yellow: #f0c03e;
    --pc-yellow-soft: #fef7d9;
    --pc-red: #e06060;
    --pc-purple: #9b7ed8;
    --pc-shadow-sm: 0 2px 8px rgba(60, 40, 20, 0.06);
    --pc-shadow: 0 4px 16px rgba(60, 40, 20, 0.08);
    --pc-shadow-lg: 0 8px 32px rgba(60, 40, 20, 0.1);
    --pc-radius: 24px;
    --pc-radius-sm: 14px;
    --pc-radius-xs: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body.pet-corner-page {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    background: var(--pc-bg);
    color: var(--pc-text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

/* ─── Dappled sunlight overlay ─── */
body.pet-corner-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(ellipse 300px 200px at 15% 20%, rgba(240, 192, 62, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 250px 250px at 75% 35%, rgba(232, 131, 74, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse 200px 300px at 50% 80%, rgba(94, 184, 126, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 180px 180px at 85% 75%, rgba(229, 127, 160, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: pc-dapple-drift 30s ease-in-out infinite alternate;
}

@keyframes pc-dapple-drift {
    0% {
        opacity: 0.8;
        transform: translate(0, 0);
    }

    50% {
        opacity: 1;
        transform: translate(8px, -5px);
    }

    100% {
        opacity: 0.85;
        transform: translate(-5px, 8px);
    }
}

/* ─── Canvas ─── */
#pc-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ═══════════════════ APP SHELL ═══════════════════ */
.pc-app {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.pc-sidebar {
    width: 320px;
    height: 100%;
    background: var(--pc-bg);
    border-right: 2px solid var(--pc-panel-border);
    display: flex;
    flex-direction: column;
    z-index: 10;
    transition: transform 0.3s ease;
}

.pc-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(12px, 2vw, 20px);
    padding-bottom: 40px;
}

.pc-sidebar-toggle {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    color: var(--pc-text);
    font-size: 1.2rem;
    z-index: 20;
    cursor: pointer;
    box-shadow: var(--pc-shadow-sm);
}

.pc-sidebar-toggle-mobile {
    display: none;
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    border-radius: 100px;
    padding: 8px 16px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    color: var(--pc-text);
    cursor: pointer;
    box-shadow: var(--pc-shadow-sm);
}

.pc-main-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.pc-environment-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.pc-habitat-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.pc-restricted-shell {
    margin-top: clamp(28px, 10vh, 90px);
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-lg);
    padding: clamp(22px, 5vw, 34px);
    text-align: center;
}

.pc-restricted-kicker {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(0.82rem, 2.3vw, 0.98rem);
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--pc-red);
    margin-bottom: 10px;
}

.pc-restricted-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.45rem, 4.4vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--pc-text);
    margin-bottom: 10px;
}

.pc-restricted-copy {
    color: var(--pc-text-dim);
    font-size: clamp(0.94rem, 2.7vw, 1.04rem);
    line-height: 1.5;
    max-width: 44ch;
    margin: 0 auto 18px;
}

.pc-restricted-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.pc-restricted-btn {
    border-radius: 999px;
    padding: 10px 18px;
    border: 2px solid transparent;
    font: 700 0.95rem/1 'Nunito', system-ui, -apple-system, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.pc-restricted-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.pc-restricted-btn.is-primary {
    background: var(--pc-accent);
    color: #fff;
    border-color: #dd7442;
}

.pc-restricted-btn.is-secondary {
    background: var(--pc-panel);
    color: var(--pc-text);
    border-color: var(--pc-panel-border);
}

/* ═══════════════════ HEADER ═══════════════════ */
.pc-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 3vw, 24px);
    pointer-events: none;
}

.pc-header>* {
    pointer-events: auto;
}

.pc-header-left {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
}

.pc-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    color: var(--pc-text-dim);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.2s ease;
    box-shadow: var(--pc-shadow-sm);
}

.pc-back-link:hover {
    background: var(--pc-accent-soft);
    border-color: var(--pc-accent);
    color: var(--pc-accent);
    transform: translateX(-3px);
}

.pc-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 700;
    color: var(--pc-text);
    letter-spacing: -0.02em;
}

.pc-title-paw {
    display: inline-block;
    margin-left: 4px;
    animation: pc-paw-wiggle 3s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pc-paw-wiggle {

    0%,
    80%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    85% {
        transform: rotate(-12deg) scale(1.1);
    }

    90% {
        transform: rotate(10deg) scale(1.15);
    }

    95% {
        transform: rotate(-6deg) scale(1.05);
    }
}

.pc-credits-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 100px;
    background: linear-gradient(135deg, #fef7d9 0%, #fff3c4 100%);
    border: 2px solid #f0d078;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    color: #a8860e;
    white-space: nowrap;
    box-shadow: var(--pc-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease;
}

.pc-credits-chip:hover {
    transform: scale(1.04);
}

/* ═══════════════════ PET SELECTOR CAROUSEL ═══════════════════ */
.pc-pet-selector-wrap {
    position: relative;
    margin-bottom: clamp(14px, 3vw, 20px);
}

/* Scroll-fade edge indicators */
.pc-pet-selector-wrap::before,
.pc-pet-selector-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 2;
    pointer-events: none;
}

.pc-pet-selector-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--pc-bg) 20%, transparent);
}

.pc-pet-selector-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--pc-bg) 20%, transparent);
}

.pc-pet-selector {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 28px 24px;
}

.pc-pet-selector::-webkit-scrollbar {
    display: none;
}

.pc-pet-type-btn {
    position: relative;
    flex-shrink: 0;
    width: clamp(48px, 11vw, 56px);
    height: clamp(48px, 11vw, 56px);
    border-radius: 50%;
    border: 3px solid var(--pc-panel-border);
    background: var(--pc-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--pc-shadow-sm);
    padding: 0;
    outline: none;
    scroll-snap-align: center;
    opacity: 0.7;
}

.pc-pet-type-emoji {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1;
}

.pc-pet-type-btn::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pc-accent), var(--pc-pink));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.25s ease;
    transform: scale(1.08);
}

.pc-pet-type-btn:hover {
    transform: translateY(-3px) scale(1.08);
    border-color: var(--pc-accent);
    opacity: 1;
}

.pc-pet-type-btn:hover::after {
    opacity: 0.15;
}

.pc-pet-type-btn.is-active {
    border-color: var(--pc-accent);
    background: var(--pc-accent-soft);
    box-shadow: var(--pc-shadow), 0 0 0 4px var(--pc-accent-glow);
    transform: scale(1.12);
    opacity: 1;
}

.pc-pet-type-btn.is-active::after {
    opacity: 0.2;
}

.pc-pet-type-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fredoka', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--pc-text-muted);
    text-transform: capitalize;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pc-pet-type-btn.is-active .pc-pet-type-label {
    opacity: 1;
    color: var(--pc-accent);
}

.pc-pet-type-btn:hover .pc-pet-type-label {
    opacity: 1;
}

/* ═══════════════════ PET STAGE ═══════════════════ */
.pc-pet-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 580px;
    padding: clamp(14px, 3.5vw, 24px);
    margin-bottom: clamp(12px, 3vh, 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pc-pet-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    gap: 8px;
}

.pc-pet-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pc-pet-name {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pc-pet-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px;
    border-radius: 100px;
}

.pc-overall-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(0.62rem, 1.5vw, 0.72rem);
    background: var(--pc-bg2);
    color: var(--pc-text-dim);
    border: 1.5px solid var(--pc-panel-border);
}

.pc-pet-mood-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 100px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.68rem, 1.7vw, 0.78rem);
    background: var(--pc-green-soft);
    color: #3d8a56;
    border: 1.5px solid #b4dfc5;
    transition: all 0.3s ease;
}

.pc-pet-mood-chip.mood-okay {
    background: var(--pc-yellow-soft);
    color: #a8860e;
    border-color: #f0d078;
}

.pc-pet-mood-chip.mood-bad {
    background: var(--pc-pink-soft);
    color: #c0506a;
    border-color: #f0b0c0;
}

/* ── SVG Container ── */
.pc-pet-svg-wrap {
    --pc-live-x: 0px;
    --pc-live-y: 0px;
    --pc-live-tilt: 0deg;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: clamp(220px, 48vw, 340px);
    padding-top: clamp(8px, 2vw, 12px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transform: translate3d(var(--pc-live-x), var(--pc-live-y), 0) rotate(var(--pc-live-tilt));
    will-change: transform;
}

/* Mood gradient backdrop */
.pc-pet-svg-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: background 0.8s ease;
    pointer-events: none;
}

.pc-pet-svg-wrap svg.pc-pet-main {
    position: relative;
    z-index: 2;
    width: clamp(170px, 38vw, 260px);
    height: clamp(170px, 38vw, 260px);
    filter: drop-shadow(0 8px 20px rgba(60, 40, 20, 0.12));
    animation: pc-pet-breathe 3.5s ease-in-out infinite;
    transition: filter 0.3s ease, opacity 0.2s ease;
}

.pc-pet-svg-wrap svg.pc-pet-main g[class^="pc-effect-"] {
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 2px 6px rgba(18, 7, 20, 0.25));
}

.pc-pet-svg-wrap svg.pc-pet-main g.pc-effect-hearts {
    transform: scale(1.15);
}

.pc-pet-svg-wrap svg.pc-pet-main .pc-effect-heart {
    fill: #ff5f97;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.45;
    paint-order: stroke fill;
    filter: drop-shadow(0 2px 4px rgba(255, 67, 135, 0.45));
}

.pc-pet-svg-wrap:hover svg.pc-pet-main {
    filter: drop-shadow(0 10px 24px rgba(60, 40, 20, 0.16));
}

.pc-pet-svg-wrap:active svg.pc-pet-main {
    animation: pc-pet-squish 0.3s ease;
}

/* Cross-fade on pet type change */
.pc-pet-svg-wrap.pc-pet-fading svg.pc-pet-main {
    opacity: 0;
}

/* Idle look animation */
.pc-pet-svg-wrap.pc-idle-look svg.pc-pet-main {
    animation: pc-pet-idle-look 1.2s ease;
}

/* ── Non-selectable ambient/effect layers ── */
.pc-heart-burst,
.pc-reaction,
.pc-speech-bubble,
.pc-pet-svg-wrap svg.pc-pet-main,
.pc-pet-svg-wrap svg.pc-pet-main * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

@keyframes pc-pet-breathe {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

@keyframes pc-pet-squish {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.08, 0.92);
    }

    60% {
        transform: scale(0.96, 1.04);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pc-pet-idle-look {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    25% {
        transform: translateY(-2px) scale(1.01) rotate(3deg);
    }

    50% {
        transform: translateY(-1px) scale(1) rotate(-2deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* ── Status message below pet ── */
.pc-status-message {
    display: inline-flex;
    position: relative;
    z-index: 3;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 16px;
    border-radius: 100px;
    margin-top: clamp(6px, 1.5vw, 10px);
    font-style: italic;
    transition: opacity 0.3s ease;
    min-height: 1.4em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pc-status-message.is-fading {
    opacity: 0;
}

/* ── Speech bubble ── */
.pc-speech-bubble {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    border-radius: 16px;
    padding: 8px 16px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    color: var(--pc-text);
    white-space: nowrap;
    box-shadow: var(--pc-shadow);
    animation: pc-speech-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--pc-panel);
    filter: drop-shadow(0 1px 0 var(--pc-panel-border));
}

.pc-speech-bubble.is-exiting {
    animation: pc-speech-out 0.3s ease forwards;
}

@keyframes pc-speech-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes pc-speech-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px) scale(0.9);
    }
}

/* ── Care streak badge ── */
.pc-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 100px;
    background: linear-gradient(135deg, #fff3c4, #fef7d9);
    border: 1.5px solid #f0d078;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(0.62rem, 1.5vw, 0.72rem);
    color: #a8860e;
    white-space: nowrap;
}

.pc-streak-icon {
    font-size: 0.8em;
}

/* ── Heart burst when clicking pet ── */
.pc-heart-burst {
    position: absolute;
    z-index: 19;
    pointer-events: none;
    line-height: 1;
    font-size: clamp(1.2rem, 4.8vw, 2.15rem);
    text-shadow: 0 0 8px rgba(255, 134, 176, 0.8), 0 0 14px rgba(255, 79, 138, 0.5);
    filter: drop-shadow(0 2px 8px rgba(255, 56, 126, 0.42));
    transform-origin: center;
    animation: pc-heart-pop 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pc-heart-burst.is-reduced {
    animation: pc-heart-pop-reduced 0.45s ease-out forwards;
}

@keyframes pc-heart-pop {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(calc(var(--pc-heart-scale, 1) * 0.35)) rotate(0deg);
    }

    20% {
        opacity: 1;
    }

    45% {
        opacity: 1;
        transform: translate3d(calc(var(--pc-heart-dx, 0px) * 0.5), calc(var(--pc-heart-rise, 64px) * -0.56), 0) scale(calc(var(--pc-heart-scale, 1) * 1.28)) rotate(var(--pc-heart-rot, 0deg));
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--pc-heart-dx, 0px), calc(var(--pc-heart-rise, 64px) * -1), 0) scale(calc(var(--pc-heart-scale, 1) * 0.84)) rotate(var(--pc-heart-rot, 0deg));
    }
}

@keyframes pc-heart-pop-reduced {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    30% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* ── Action reaction burst ── */
.pc-reaction {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    font-size: clamp(1rem, 3vw, 1.4rem);
    animation: pc-reaction-float 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pc-reaction-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.4);
    }

    25% {
        opacity: 1;
        transform: translateY(-20px) scale(1.3);
    }

    100% {
        opacity: 0;
        transform: translateY(-65px) scale(0.7);
    }
}

/* ── Action-specific pet animation classes ── */
.pc-pet-svg-wrap.anim-feed svg.pc-pet-main {
    animation: pc-pet-munch 0.8s ease;
}

.pc-pet-svg-wrap.anim-play svg.pc-pet-main {
    animation: pc-pet-bounce 0.7s ease;
}

.pc-pet-svg-wrap.anim-clean svg.pc-pet-main {
    animation: pc-pet-shake 0.6s ease;
}

@keyframes pc-pet-munch {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    20% {
        transform: scale(1.05) rotate(-3deg);
    }

    40% {
        transform: scale(0.98) rotate(2deg);
    }

    60% {
        transform: scale(1.03) rotate(-2deg);
    }

    80% {
        transform: scale(0.99) rotate(1deg);
    }
}

@keyframes pc-pet-bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    20% {
        transform: translateY(-18px) scale(1.05, 0.95);
    }

    35% {
        transform: translateY(0) scale(0.95, 1.05);
    }

    50% {
        transform: translateY(-10px) scale(1.03, 0.97);
    }

    70% {
        transform: translateY(0) scale(0.98, 1.02);
    }
}

@keyframes pc-pet-shake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    15% {
        transform: translateX(-6px) rotate(-4deg);
    }

    30% {
        transform: translateX(5px) rotate(3deg);
    }

    45% {
        transform: translateX(-4px) rotate(-2deg);
    }

    60% {
        transform: translateX(3px) rotate(2deg);
    }

    80% {
        transform: translateX(-1px) rotate(0deg);
    }
}

/* ═══════════════════ STAT BARS ═══════════════════ */
.pc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 1.5vw, 10px);
    margin-bottom: clamp(12px, 3vw, 16px);
}

.pc-stat {
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    border-radius: var(--pc-radius-sm);
    padding: clamp(9px, 2vw, 13px);
    box-shadow: var(--pc-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pc-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}

.pc-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--pc-shadow);
}

.pc-stat-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.pc-stat-label {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.68rem, 1.7vw, 0.8rem);
    color: var(--pc-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-stat-num {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(0.75rem, 2vw, 0.88rem);
    color: var(--pc-text);
    transition: color 0.3s ease;
}

.pc-stat-track {
    width: 100%;
    height: clamp(10px, 2vw, 14px);
    border-radius: 100px;
    background: var(--pc-bg2);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-stat-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

/* Glossy highlight on bar */
.pc-stat-fill::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    right: 4px;
    height: 4px;
    border-radius: 100px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.5) 40%,
            rgba(255, 255, 255, 0.1) 100%);
}

/* Default stat colors */
.pc-stat-energy .pc-stat-fill {
    background: linear-gradient(90deg, #4a95c8, var(--pc-blue), #7ec4f0);
    box-shadow: 0 0 8px rgba(91, 164, 217, 0.3);
}

.pc-stat-mood .pc-stat-fill {
    background: linear-gradient(90deg, #d06888, var(--pc-pink), #f0a0c0);
    box-shadow: 0 0 8px rgba(229, 127, 160, 0.3);
}

.pc-stat-hunger .pc-stat-fill {
    background: linear-gradient(90deg, #d88a3e, var(--pc-accent), #f0b070);
    box-shadow: 0 0 8px rgba(232, 131, 74, 0.3);
}

.pc-stat-hygiene .pc-stat-fill {
    background: linear-gradient(90deg, #3da06a, var(--pc-green), #80d8a0);
    box-shadow: 0 0 8px rgba(94, 184, 126, 0.3);
}

/* Low stat warning (amber) */
.pc-stat.pc-stat-low .pc-stat-fill {
    background: linear-gradient(90deg, #d88a3e, #e8a050, #f0b868) !important;
    box-shadow: 0 0 8px rgba(216, 138, 62, 0.4) !important;
}

.pc-stat.pc-stat-low .pc-stat-num {
    color: #b87830;
}

/* Critical stat (red + pulse) */
.pc-stat.pc-stat-critical .pc-stat-fill {
    background: linear-gradient(90deg, #c04040, #e06060, #e88080) !important;
    box-shadow: 0 0 12px rgba(224, 96, 96, 0.5) !important;
    animation: pc-stat-pulse 1.5s ease-in-out infinite;
}

.pc-stat.pc-stat-critical .pc-stat-num {
    color: var(--pc-red);
}

@keyframes pc-stat-pulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(224, 96, 96, 0.3);
    }

    50% {
        box-shadow: 0 0 16px rgba(224, 96, 96, 0.6);
    }
}

/* Stat flash animation on change */
.pc-stat.stat-flash .pc-stat-fill {
    animation: pc-stat-glow 0.5s ease;
}

@keyframes pc-stat-glow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

/* ═══════════════════ ACTION BUTTONS ═══════════════════ */
.pc-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(6px, 1.5vw, 10px);
    margin-bottom: clamp(10px, 2.5vw, 14px);
}

.pc-action-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px, 0.6vh, 5px);
    padding: clamp(14px, 3.5vw, 20px) clamp(6px, 1.5vw, 12px);
    border-radius: var(--pc-radius-sm);
    border: 2px solid var(--pc-panel-border);
    background: var(--pc-panel);
    color: var(--pc-text);
    cursor: pointer;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.9vw, 0.88rem);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--pc-shadow-sm);
    outline: none;
    overflow: hidden;
}

/* Gloss overlay */
.pc-action-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
    border-radius: var(--pc-radius-sm) var(--pc-radius-sm) 0 0;
    pointer-events: none;
}

/* Accent bar */
.pc-action-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pc-action-btn[data-action='feed']::before {
    background: var(--pc-accent);
}

.pc-action-btn[data-action='play']::before {
    background: var(--pc-pink);
}

.pc-action-btn[data-action='clean']::before {
    background: var(--pc-blue);
}

.pc-action-btn:hover::before,
.pc-action-btn:focus-visible::before {
    opacity: 1;
}

.pc-action-btn:hover,
.pc-action-btn:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-lg);
}

.pc-action-btn[data-action='feed']:hover {
    border-color: var(--pc-accent);
    background: linear-gradient(180deg, #fef5ed, var(--pc-panel));
}

.pc-action-btn[data-action='play']:hover {
    border-color: var(--pc-pink);
    background: linear-gradient(180deg, #fef0f4, var(--pc-panel));
}

.pc-action-btn[data-action='clean']:hover {
    border-color: var(--pc-blue);
    background: linear-gradient(180deg, #eef6fc, var(--pc-panel));
}

.pc-action-btn:active {
    transform: translateY(-1px) scale(0.97);
}

.pc-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: var(--pc-shadow-sm) !important;
    border-color: var(--pc-panel-border) !important;
    background: var(--pc-panel) !important;
}

.pc-action-icon {
    font-size: clamp(1.5rem, 4vw, 2rem);
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease;
}

.pc-action-btn:hover .pc-action-icon {
    transform: scale(1.15) rotate(-5deg);
}

.pc-action-label {
    position: relative;
    z-index: 1;
    font-size: clamp(0.66rem, 1.6vw, 0.78rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-action-hint {
    position: relative;
    z-index: 1;
    font-size: clamp(0.52rem, 1.1vw, 0.6rem);
    font-weight: 500;
    color: var(--pc-text-muted);
    letter-spacing: 0.02em;
}

.pc-cooldown-chip {
    position: relative;
    z-index: 1;
    display: none;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--pc-bg2);
    font-size: clamp(0.56rem, 1.3vw, 0.68rem);
    font-weight: 700;
    color: var(--pc-text-muted);
    animation: pc-pulse-soft 2s ease-in-out infinite;
}

.pc-action-btn.is-cooldown .pc-cooldown-chip {
    display: block;
}

.pc-action-btn.is-cooldown .pc-action-hint {
    display: none;
}

/* Cooldown progress bar */
.pc-cooldown-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--pc-accent);
    opacity: 0.4;
    transition: width 1s linear;
    z-index: 1;
    border-radius: 0 100px 100px 0;
}

.pc-action-btn:not(.is-cooldown) .pc-cooldown-bar {
    display: none;
}

@keyframes pc-pulse-soft {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Success ripple */
.pc-action-btn.is-success {
    animation: pc-btn-pop 0.45s ease;
}

@keyframes pc-btn-pop {
    0% {
        transform: scale(1);
        box-shadow: var(--pc-shadow-sm);
    }

    35% {
        transform: scale(1.06);
        box-shadow: 0 0 0 6px var(--pc-accent-glow);
    }

    100% {
        transform: scale(1);
        box-shadow: var(--pc-shadow-sm);
    }
}

/* Error shake */
.pc-action-btn.is-error {
    animation: pc-btn-shake 0.4s ease;
    border-color: var(--pc-red) !important;
}

@keyframes pc-btn-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}

/* ═══════════════════ DAILY CAP ═══════════════════ */
.pc-daily-cap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(8px, 2vw, 12px);
    border-radius: var(--pc-radius-xs);
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    box-shadow: var(--pc-shadow-sm);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.7rem, 1.8vw, 0.82rem);
    color: var(--pc-text-dim);
}

/* ═══════════════════ TOAST ═══════════════════ */
.pc-status-region {
    position: fixed;
    bottom: clamp(16px, 4vh, 28px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.pc-toast {
    padding: 10px 22px;
    border-radius: 100px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    pointer-events: auto;
    animation: pc-toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
    box-shadow: var(--pc-shadow-lg);
}

.pc-toast.is-success {
    background: #e8f8ee;
    color: #2d7648;
    border: 2px solid #a0d8b0;
}

.pc-toast.is-error {
    background: #fde8e8;
    color: #b04040;
    border: 2px solid #f0b0b0;
}

.pc-toast.is-info {
    background: var(--pc-accent-soft);
    color: #a0602a;
    border: 2px solid #f0c8a0;
}

.pc-toast.is-exiting {
    animation: pc-toast-out 0.3s ease forwards;
}

@keyframes pc-toast-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }

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

@keyframes pc-toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* ═══════════════════ SIGNED OUT ═══════════════════ */
.pc-signed-out {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    gap: 20px;
    text-align: center;
    padding: 40px 20px;
}

.pc-signed-out-art {
    width: clamp(140px, 35vw, 200px);
    height: clamp(140px, 35vw, 200px);
    animation: pc-pet-breathe 3.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(60, 40, 20, 0.12));
}

.pc-signed-out h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 700;
    color: var(--pc-text);
}

.pc-signed-out p {
    color: var(--pc-text-dim);
    font-size: clamp(0.9rem, 2.2vw, 1.05rem);
    max-width: 34ch;
    line-height: 1.65;
}

.pc-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--pc-accent), #d4743e);
    color: #fff;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px var(--pc-accent-glow);
}

.pc-signin-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px var(--pc-accent-glow);
}

/* ═══════════════════ LOADING ═══════════════════ */
.pc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.pc-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--pc-panel-border);
    border-top-color: var(--pc-accent);
    border-radius: 50%;
    animation: pc-spin 0.8s linear infinite;
}

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

/* ═══════════════════ COLLAPSIBLE CUSTOMIZATION ═══════════════════ */
.pc-customize {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vw, 6px);
    margin-bottom: clamp(12px, 3vw, 16px);
}

.pc-customize-row {
    background: var(--pc-panel);
    border: 2px solid var(--pc-panel-border);
    border-radius: var(--pc-radius-sm);
    box-shadow: var(--pc-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.pc-customize-row.is-open {
    box-shadow: var(--pc-shadow);
}

.pc-customize-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 14px);
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.72rem, 1.8vw, 0.84rem);
    color: var(--pc-text);
    outline: none;
    gap: 8px;
    transition: background 0.15s ease;
}

.pc-customize-header:hover {
    background: var(--pc-bg);
}

.pc-customize-header-label {
    flex-shrink: 0;
}

.pc-customize-header-preview {
    flex: 1;
    text-align: right;
    font-weight: 500;
    font-size: clamp(0.62rem, 1.5vw, 0.72rem);
    color: var(--pc-text-muted);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-customize-chevron {
    flex-shrink: 0;
    font-size: 0.6rem;
    color: var(--pc-text-muted);
    transition: transform 0.2s ease;
}

.pc-customize-row.is-open .pc-customize-chevron {
    transform: rotate(180deg);
}

.pc-customize-row .pc-chip-scroll {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(10px, 2.5vw, 14px) clamp(8px, 2vw, 12px);
}

.pc-customize-row .pc-chip-scroll::-webkit-scrollbar {
    display: none;
}

.pc-chip {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1.5px solid var(--pc-panel-border);
    background: var(--pc-bg);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(0.6rem, 1.4vw, 0.7rem);
    color: var(--pc-text-dim);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    outline: none;
}

.pc-chip:hover {
    border-color: var(--pc-accent);
    color: var(--pc-text);
    background: var(--pc-accent-soft);
}

.pc-chip.is-active {
    border-color: var(--pc-accent);
    background: var(--pc-accent);
    color: #fff;
}

.pc-chip-none {
    font-style: italic;
    opacity: 0.7;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 768px) {
    .pc-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
    }

    .pc-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .pc-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pc-sidebar-toggle-mobile {
        display: flex;
    }
}

@media (max-width: 400px) {
    .pc-stats {
        gap: 4px;
    }

    .pc-actions {
        gap: 4px;
    }

    .pc-stat {
        padding: 7px 8px;
    }

    .pc-pet-name-row {
        flex-wrap: wrap;
        gap: 4px;
        flex-direction: column;
    }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pc-heart-burst,
    .pc-heart-burst.is-reduced {
        animation: pc-heart-pop-reduced 0.45s ease-out forwards !important;
    }
}