/* «Фрегатик» — мережевий тамагочі (віджет network_pet) */
.pet-stage { position: relative; width: 140px; height: 140px; flex-shrink: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pet-svg { width: 100%; height: 100%; overflow: visible; }
.pet-svg .pet-body { transform-origin: 60px 108px; animation: pet-bob 3s ease-in-out infinite; }

/* настрій */
.pet-mood-happy .pet-body, .pet-mood-yummy .pet-body { animation: pet-bounce 1.6s ease-in-out infinite; }
.pet-mood-love .pet-body     { animation: pet-bounce 1.1s ease-in-out infinite; }
.pet-mood-sleep .pet-body    { animation: pet-breathe 4s ease-in-out infinite; }
.pet-mood-sick .pet-body     { animation: pet-droop 4s ease-in-out infinite; }
.pet-mood-stressed .pet-body { animation: pet-shake .45s linear infinite; }
.pet-mood-hungry .pet-body   { animation: pet-wobble 2.2s ease-in-out infinite; }

/* тап */
.pet-squish .pet-body { animation: pet-squish .35s ease-out !important; }

/* деталі */
.pet-wave   { animation: pet-wave 1.6s ease-in-out infinite; }
.pet-wave-2 { animation-delay: .25s; }
.pet-blink  { animation: pet-blink 1s steps(2) infinite; }
.pet-tear   { animation: pet-tear 2.4s ease-in infinite; }
.pet-sweat  { animation: pet-tear 1.4s ease-in infinite; }
.pet-zzz    { animation: pet-zzz 3s ease-in-out infinite; }
.pet-zzz-2  { animation-delay: 1s; }
.pet-growl  { animation: pet-fade 2.2s ease-in-out infinite; }

.pet-particle { position: absolute; pointer-events: none; font-size: 18px; animation: pet-float 1.2s ease-out forwards; transform: translate(-50%, 0); }

.pet-food-btn { font-size: 22px; line-height: 1; padding: 6px 8px; border-radius: 10px; background: rgba(167,139,250,.15); transition: transform .15s, background .15s; }
.pet-food-btn:hover:not([disabled]) { transform: scale(1.15); background: rgba(167,139,250,.3); }
.pet-food-btn[disabled] { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }

@keyframes pet-bob     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pet-bounce  { 0%,100% { transform: translateY(0) scale(1,1); } 40% { transform: translateY(-7px) scale(.98,1.03); } 70% { transform: translateY(0) scale(1.04,.96); } }
@keyframes pet-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.02,.97); } }
@keyframes pet-droop   { 0%,100% { transform: scale(1,.95) translateY(2px); } 50% { transform: scale(1.01,.93) translateY(3px); } }
@keyframes pet-shake   { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes pet-wobble  { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes pet-squish  { 0% { transform: scale(1,1); } 35% { transform: scale(1.12,.86); } 70% { transform: scale(.95,1.06); } 100% { transform: scale(1,1); } }
@keyframes pet-wave    { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pet-blink   { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes pet-tear    { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes pet-zzz     { 0% { transform: translate(0,0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px,-10px); opacity: 0; } }
@keyframes pet-fade    { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pet-float   { 0% { transform: translate(-50%,0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%,-60px) scale(1.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pet-svg .pet-body, .pet-wave, .pet-blink, .pet-tear, .pet-sweat, .pet-zzz, .pet-growl, .pet-wave-arm, .pet-sip, .pet-note, .pet-read-eye { animation: none !important; }
}

/* ---- FAQ ------------------------------------------------------------------ */
.pet-faq-sec { margin-bottom: 16px; }
.pet-faq-h { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #111827; }
.dark .pet-faq-h { color: #fff; }
.pet-faq-p { color: #4b5563; line-height: 1.5; }
.dark .pet-faq-p { color: #d1d5db; }
.pet-faq-list { display: flex; flex-direction: column; gap: 5px; }
.pet-faq-list li { display: flex; gap: 8px; align-items: flex-start; color: #4b5563; line-height: 1.45; }
.dark .pet-faq-list li { color: #d1d5db; }
.pet-faq-ico { flex-shrink: 0; width: 20px; text-align: center; }
.pet-faq-note { margin-top: 6px; font-size: 12px; color: #6b7280; }
.dark .pet-faq-note { color: #9ca3af; }
.pet-faq-moods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
@media (max-width: 480px) { .pet-faq-moods { grid-template-columns: 1fr; } }
.pet-faq-mood { display: flex; gap: 8px; align-items: flex-start; color: #111827; line-height: 1.3; }
.dark .pet-faq-mood { color: #f3f4f6; }
.pet-faq-sub { font-size: 12px; color: #6b7280; }
.dark .pet-faq-sub { color: #9ca3af; }
.pet-faq-callout { margin-top: 4px; padding: 10px 12px; border-radius: 12px; border-left: 4px solid #a78bfa;
    background: rgba(167,139,250,.12); color: #374151; line-height: 1.5; }
.dark .pet-faq-callout { color: #e5e7eb; background: rgba(167,139,250,.15); }

/* ---- годування: політ їжі, жування, крихти, бульбашка, відмова ------------- */
.pet-mood-eat .pet-chew-closed { opacity: 0; }
.pet-chewing .pet-chew-open   { animation: pet-chew-open .32s steps(1) infinite; }
.pet-chewing .pet-chew-closed { animation: pet-chew-closed .32s steps(1) infinite; }
.pet-mood-eat .pet-body    { animation: pet-bounce 1s ease-in-out infinite; }
.pet-mood-buzz .pet-body   { animation: pet-shake .12s linear infinite; }
.pet-mood-refuse .pet-body { animation: pet-nope .5s ease-in-out 3; }
.pet-fly { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; font-size: 26px; line-height: 1; will-change: transform; }
.pet-bubble { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 5; pointer-events: none; white-space: nowrap;
    background: #fff; color: #1f1235; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
    animation: pet-bubble 1.45s ease-out forwards; }
.dark .pet-bubble { background: #374151; color: #fff; }
.pet-crumb { position: absolute; width: 5px; height: 5px; border-radius: 2px; pointer-events: none; animation: pet-crumb .75s ease-out forwards; }

@keyframes pet-chew-open   { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pet-chew-closed { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes pet-nope   { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes pet-bubble { 0% { transform: translate(-50%,6px) scale(.6); opacity: 0; } 15% { transform: translate(-50%,0) scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%,-10px); opacity: 0; } }
@keyframes pet-crumb  { 0% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---- денні заняття ------------------------------------------------------- */
.pet-gear   { fill: #374151; }          /* гарнітура/ноутбук: темні у світлій темі */
.pet-gear-s { stroke: #374151; }
.dark .pet-gear   { fill: #9ca3af; }    /* …і світлі в темній, щоб не губились на фоні */
.dark .pet-gear-s { stroke: #9ca3af; }
.pet-all { transform-origin: 60px 112px; }
.pet-act-headset .pet-body, .pet-act-laptop .pet-body, .pet-act-read .pet-body, .pet-act-coffee .pet-body { animation: pet-bob 3s ease-in-out infinite; }
.pet-act-rest .pet-all     { animation: pet-liedown .7s ease-out forwards; }
.pet-act-rest .pet-body    { animation: pet-breathe 3.5s ease-in-out infinite; }
.pet-act-stretch .pet-body { animation: pet-stretch 2.4s ease-in-out infinite; }
.pet-act-dance .pet-body   { animation: pet-dance .9s ease-in-out infinite; }
.pet-talk-closed { opacity: 0; }
.pet-act-headset .pet-talk-open   { animation: pet-chew-open .55s steps(1) infinite; }
.pet-act-headset .pet-talk-closed { animation: pet-chew-closed .55s steps(1) infinite; }
.pet-typing > * { animation: pet-type 1.2s steps(2) infinite; }
.pet-typing > *:nth-child(2) { animation-delay: .4s; }
.pet-typing > *:nth-child(3) { animation-delay: .8s; }
.pet-read-eye { animation: pet-read 2.4s ease-in-out infinite; }
.pet-sip  { transform-origin: 80px 96px; animation: pet-sip 4s ease-in-out infinite; }
.pet-steam { animation: pet-steam 2s ease-in-out infinite; }
.pet-wave-arm { transform-origin: 98px 74px; animation: pet-arm .6s ease-in-out infinite alternate; }
.pet-note   { animation: pet-note 1.8s ease-out infinite; }
.pet-note-2 { animation-delay: .9s; }

.pet-mood-sleep:not([class*="pet-act-"]) .pet-all { transform: translateY(4px) scale(1.12,.74); }   /* лежить у ліжечку */
.pet-mood-snuggle .pet-all { transform: translateY(4px) scale(1.12,.74); }
.pet-mood-snuggle .pet-body { animation: pet-wobble 2.6s ease-in-out infinite; }   /* мостится під ковдрою */
html.theme-8bit .pet-svg-8bit.pet-mood-sleep:not([class*="pet-act-"]) .pet-all { transform: translateY(2px) scale(1.12,.74); }
html.theme-8bit .pet-svg-8bit.pet-mood-snuggle .pet-all { transform: translateY(2px) scale(1.12,.74); }
.pet-screen-glow { opacity: .28; animation: pet-glow 2.2s steps(4) infinite; }
@keyframes pet-glow { 0%,100% { opacity: .22; } 50% { opacity: .38; } }
@keyframes pet-liedown { from { transform: none; } to { transform: translateY(12px) scale(1.12,.78); } }
@keyframes pet-stretch { 0%,100% { transform: scale(1,1); } 40%,60% { transform: translateY(-4px) scale(.9,1.12); } }
@keyframes pet-dance   { 0%,100% { transform: rotate(-8deg); } 25% { transform: translateY(-6px); } 50% { transform: rotate(8deg); } 75% { transform: translateY(-6px); } }
@keyframes pet-type    { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pet-read    { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes pet-sip     { 0%,55%,100% { transform: translate(0,0) rotate(0); } 68%,85% { transform: translate(-10px,-6px) rotate(-18deg); } }
@keyframes pet-steam   { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: .85; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pet-arm     { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
@keyframes pet-note    { 0% { opacity: 0; transform: translate(0,4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px,-14px); } }

/* ---- 8-біт тема: піксельний Фрегатик + ретро-контроли ---------------------- */
html.theme-8bit .pet-svg-8bit { image-rendering: pixelated; }
html.theme-8bit .pet-svg-8bit .pet-body { transform-origin: 60px 122px; }
html.theme-8bit .pet-svg * { animation-timing-function: steps(3) !important; }   /* рух «кадрами», як на приставці */
html.theme-8bit .pet-squish .pet-body { animation-timing-function: steps(2) !important; }
html.theme-8bit .pet-bar { height: 12px; border: 2px solid var(--p8-ink); border-radius: 0 !important; background: #000 !important; padding: 1px; }
html.theme-8bit .pet-bar-fill { border-radius: 0 !important; transition: width .7s steps(6) !important;
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
            mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); }
html.theme-8bit .pet-food-btn { border-radius: 0; background: #000; border: 2px solid var(--p8-gold); }
html.theme-8bit .pet-food-btn:hover:not([disabled]) { background: var(--p8-gold); transform: none; }
html.theme-8bit .pet-food-btn[disabled] { border-color: var(--p8-mut); }
html.theme-8bit #pet-help-btn, html.theme-8bit #pet-help-close { border-radius: 0 !important; background: #000 !important; border: 2px solid var(--p8-gold); color: var(--p8-gold) !important; }
html.theme-8bit #pet-help .pet-help-card { background: var(--p8-panel) !important; border: 3px solid var(--p8-acc); border-radius: 0 !important; }
html.theme-8bit #pet-help h4 { color: var(--p8-gold) !important; }
html.theme-8bit #pet-help .font-semibold { color: var(--p8-blue) !important; }
html.theme-8bit .pet-particle { font-family: 'PixelVT', monospace; }
html.theme-8bit .pet-chewing .pet-chew-open, html.theme-8bit .pet-chewing .pet-chew-closed { animation-timing-function: steps(1) !important; }
html.theme-8bit .pet-bubble { border-radius: 0; background: #000; color: var(--p8-gold); border: 2px solid var(--p8-gold); box-shadow: none; font-family: 'PixelVT', monospace; font-size: 16px; animation-timing-function: steps(4); }
html.theme-8bit .pet-crumb { border-radius: 0; width: 6px; height: 6px; animation-timing-function: steps(4); }
html.theme-8bit .pet-faq-h { color: var(--p8-blue) !important; }
html.theme-8bit .pet-faq-callout { border-radius: 0; border: 2px solid var(--p8-gold); border-left-width: 6px; background: #000; }
/* 8-біт: точки обертання під піксельну сітку (viewBox 0 0 120 130) */
html.theme-8bit .pet-svg-8bit .pet-all      { transform-origin: 60px 125px; }
html.theme-8bit .pet-svg-8bit .pet-wave-arm { transform-origin: 108px 68px; }
html.theme-8bit .pet-svg-8bit .pet-sip      { transform-origin: 92px 98px; }
html.theme-8bit .pet-act-headset .pet-talk-open, html.theme-8bit .pet-act-headset .pet-talk-closed { animation-timing-function: steps(1) !important; }