/* ───────── Mazlíčci (pets.js) ─────────
   Pravidla s #petsRoot jsou schválně, aby přebila stíny a rámečky tlačítek z motivů (Hospoda atd.). */
.petsTop{margin-bottom:12px}
.petChips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.petChip{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--line-neon);background:rgba(var(--ink),.7);font-size:12px;white-space:nowrap}
.petChip b{color:var(--gold)}
.petTag{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid var(--rc,#9fb2d8);color:var(--rc,#9fb2d8);background:rgba(0,0,0,.35);font:700 10.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase}

.petHabitat{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr);gap:16px;margin-bottom:16px;align-items:start}
/* Scéna bere barvy z motivu (--c1, --c3, --panel-hi, --bg*), takže sedí do Kyberu, Zlatého chrámu i Hospody. Stařešina září zlatě. */
.petScene{--pg:var(--c1);position:relative;min-height:320px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-hi);
 box-shadow:inset 0 0 70px rgba(0,0,0,.55);
 background:
  radial-gradient(ellipse 70% 20% at 50% 80%,rgba(var(--pg),.26),transparent 72%),
  radial-gradient(ellipse 65% 50% at 50% 58%,rgba(var(--pg),.2),transparent 74%),
  linear-gradient(180deg,transparent 54.8%,rgba(var(--pg),.45) 55.3%,transparent 57%),
  linear-gradient(180deg,var(--panel-hi) 0%,var(--bg2) 55%,var(--f1) 55.3%,var(--bg0) 100%)}
.petScene::before{content:"";position:absolute;right:12%;top:9%;width:54px;height:54px;border-radius:50%;opacity:.6;background:radial-gradient(circle,rgba(var(--c3),.95) 0 30%,rgba(var(--c3),.3) 58%,transparent 72%)}
.petScene.stg-elder{--pg:var(--c3)}
.petArt{position:absolute;left:50%;bottom:7%;width:min(76%,310px);transform:translateX(-50%)}
.petSvg{display:block;width:100%;height:auto;overflow:visible;animation:petBob 3.2s ease-in-out infinite;transform-origin:50% 92%}
@keyframes petBob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4px) scale(1.012,.99)}}
.petEyes{animation:petBlink 5.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes petBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.petScene.mood-hungry .petSvg,.petScene.mood-sad .petSvg{animation-duration:4.6s}
.petScene.mood-happy .petSvg{animation:petHop 1.8s ease-in-out infinite}
@keyframes petHop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-9px) scale(.99,1.02)}55%{transform:translateY(0) scale(1.03,.97)}}
.petZ{font:800 15px var(--font-ui);fill:#fff;stroke:#2b1a1c;stroke-width:1.2px;paint-order:stroke;animation:petZ 3.2s ease-in-out infinite}
.petZ.z2{animation-delay:.5s}.petZ.z3{animation-delay:1s}
@keyframes petZ{0%{opacity:0;transform:translateY(8px)}30%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.petScene>.petTag{position:absolute;z-index:3;top:12px;right:12px}
.petPoops{position:absolute;z-index:4;left:4%;right:4%;bottom:1%;height:52px;pointer-events:none}
#petsRoot .petPoop{position:absolute;bottom:0;left:calc(var(--i)*16%);width:auto;padding:0;border:0;background:none;box-shadow:none;transform:none;font-size:28px;line-height:1;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));animation:petPoop 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
#petsRoot .petPoop:hover{filter:drop-shadow(0 0 8px #ffe08a) brightness(1.15)}
@keyframes petPoop{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-2px)}}

.petInfo{display:flex;flex-direction:column;gap:8px;min-width:0}
.petHead h3{margin:0;display:flex;align-items:center;gap:8px;font:700 22px var(--font-hd);letter-spacing:.05em;text-transform:none;color:#fff}
.petHead small{color:var(--muted)}.petHead small b{color:var(--gold)}
#petsRoot .petRename{padding:2px 7px;font-size:13px;box-shadow:none}
.pbar{display:grid;grid-template-columns:minmax(96px,34%) 1fr auto;gap:8px;align-items:center;font-size:12px}
.pbarL{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbarT{height:12px;border-radius:999px;background:var(--f1);border:1px solid var(--b1);overflow:hidden}
.pbarFill{display:block;height:100%;border-radius:999px;transition:width .8s linear;background:linear-gradient(90deg,#2a7d6a,#56e0a8)}
.pbar.hunger .pbarFill{background:linear-gradient(90deg,#c0642a,#ffb347)}
.pbar.clean .pbarFill{background:linear-gradient(90deg,#1c7fb5,#59d6ff)}
.pbar.mood .pbarFill{background:linear-gradient(90deg,#b3407a,#ff8fc2)}
.pbar.xp .pbarFill{background:linear-gradient(90deg,#27407e,#19a8d8)}
.pbar.age .pbarFill{background:linear-gradient(90deg,#6a8a2a,#c6e65a)}
.pbar.low .pbarFill{background:linear-gradient(90deg,#c0213e,#ff6b84);animation:pbarLow 1s ease-in-out infinite}
@keyframes pbarLow{50%{opacity:.55}}
.pbarV{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;min-width:48px}
.pbar.age .pbarV{font-size:11px;color:var(--muted);text-align:right}
.careRow{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line-neon);border-radius:var(--radius-md);background:rgba(var(--ink),.6)}
.careBig{font:800 26px var(--font-hd);min-width:78px;text-align:center}
.careBig.good{color:var(--green,#5dff9a)}.careBig.mid{color:#ffd873}.careBig.bad{color:#ff8aa0}
.careRow small{display:block;color:var(--muted)}
.petActions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#petsRoot .petFood{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;line-height:1.15;text-align:center}
.petFood span{font-size:24px}.petFood b{font-size:14px;color:#fff}.petFood small{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:0}
.petPantry{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border:1px solid var(--b1);border-radius:var(--radius-md);background:rgba(var(--ink),.5)}
.manureChip{font-size:13px}.manureChip b{color:#c9a15a}
.shopRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}.shopRow>span{flex:1 1 150px}
#petsRoot .shopRow button{padding:4px 9px;font-size:12px}

.petSkills,.petStable,.petHall{margin-top:6px}
.petSkillsHead{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.petSkillsHead h3{margin:0 auto 0 0}
.petPts{padding:5px 12px;border-radius:999px;border:1px solid var(--line-neon);background:rgba(var(--ink),.7)}.petPts b{color:var(--gold);font-size:16px}
.petSkillList{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.petSkill{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--b1);border-radius:var(--radius-md);background:rgba(var(--ink),.6)}
.petSkill.learned{border-color:rgba(var(--c3),.55);background:linear-gradient(120deg,rgba(var(--c3),.1),rgba(var(--ink),.65))}
.petSkill.locked{opacity:.55}
.skIcon{display:grid;place-items:center;width:48px;height:48px;font-size:26px;border-radius:12px;background:var(--f2);border:1px solid var(--line-hi)}
.skBody{display:flex;flex-direction:column;gap:3px;min-width:0}.skBody b{font-size:14px}.skBody small{color:var(--muted)}
.skVal b{color:var(--gold)}
.skRank{display:flex;align-items:center;gap:8px}.skRank span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text)}
.skPips{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;flex:1;max-width:280px}
.skPips i{height:7px;border-radius:2px;background:var(--f1);border:1px solid var(--b1)}.skPips i.on{background:linear-gradient(180deg,#ffe29a,#e29a2b);border-color:#ffd46a}
.skBtns{display:flex;flex-direction:column;gap:5px;align-items:stretch}
#petsRoot .skBtns button{padding:5px 10px;font-size:12px;white-space:nowrap}
.skMax{color:var(--gold);font-weight:700;font-size:12px;text-align:center}

.stableGrid,.hallGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:8px}
.stableCard,.hallCard{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--b1);border-radius:var(--radius-md);background:rgba(var(--ink),.6)}
.stableCard.owned{border-color:var(--rc,var(--line-neon));box-shadow:0 0 14px color-mix(in srgb,var(--rc,#fff) 30%,transparent)}
.stArt,.hlArt{height:130px;display:flex;align-items:flex-end;justify-content:center;border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(var(--c1),.1),rgba(var(--ink),.5))}
.stArt .petSvg,.hlArt .petSvg{width:auto;height:118px;animation-duration:4s}
.stBody{display:flex;flex-direction:column;gap:3px;flex:1}.stBody b{font-size:15px}.stBody small{color:var(--muted)}.stSk{color:var(--text)!important;font-size:11.5px}
.stBtn{display:flex}#petsRoot .stBtn button{flex:1;padding:7px 10px}
.stActive{flex:1;text-align:center;padding:7px;border-radius:8px;border:1px solid var(--green,#5dff9a);color:var(--green,#5dff9a);font-weight:700}
.hallCard{flex-direction:row;align-items:center}.hallCard .hlArt{height:100px;width:120px;flex:none}.hallCard .hlArt .petSvg{height:92px}
.hlBody{display:flex;flex-direction:column;gap:4px;min-width:0}.hlBody small{color:var(--muted)}.hlBody .petChip{margin:2px 2px 0 0;font-size:11px;padding:2px 8px}
.petEmpty{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;border:1px dashed var(--line-hi);border-radius:var(--radius);background:rgba(var(--ink),.5);margin-bottom:16px}
.petEmptyArt{width:140px}.petEmptyArt .petSvg{width:100%}
.petEmpty h3{margin:0 0 6px}.petEmpty p{margin:0;max-width:520px;color:var(--muted)}

/* upozornění v nabídce, když mazlíček potřebuje péči */
.gameNav button.navPets{position:relative}
.gameNav button.needsCare::after{content:"";position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 8px #ff4d6d;animation:pbarLow 1s ease-in-out infinite}

/* hnůj v herbáři */
#alchemyPanel .plotFert{color:#c9a15a;font-weight:700;text-align:center}
#alchemyPanel .plotManure{padding:4px 8px;font-size:12px}

@media(max-width:860px){.petHabitat{grid-template-columns:1fr}.petScene{min-height:280px}.petSkill{grid-template-columns:44px minmax(0,1fr)}.skBtns{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}}
@media(max-width:520px){.petActions{grid-template-columns:repeat(3,minmax(0,1fr))}.hallCard{flex-direction:column;align-items:stretch}.hallCard .hlArt{width:auto}}
@media(prefers-reduced-motion:reduce){.petSvg,.petEyes,.petZ,.petPoop,.pbar.low .pbarFill,.gameNav button.needsCare::after{animation:none!important}}

/* ───────── v2: vejce, líheň, zdraví, vzácnost, hřbitov ───────── */
.petEggs{margin-bottom:14px;padding:12px;border:1px solid var(--line-neon);border-radius:var(--radius);background:rgba(var(--ink),.5)}
.eggTop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.eggTop h3{margin:0 auto 0 0}
.incubator{display:flex;align-items:center;gap:16px;margin-top:8px}
.incArt{width:84px;flex:none}.incArt.dim{opacity:.55;filter:grayscale(.4)}
.eggSvg{display:block;width:100%;height:auto;overflow:visible}
.eggSvg .eggBody{transform-box:fill-box;transform-origin:50% 100%}
.eggSvg.ready .eggBody{animation:eggWobble 1.4s ease-in-out infinite}
@keyframes eggWobble{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-7deg)}76%{transform:rotate(6deg)}84%{transform:rotate(-4deg)}92%{transform:rotate(2deg)}}
.incBody{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.incBody small{color:var(--muted)}
#petsRoot .incBody button{align-self:flex-start;padding:7px 14px}
.pbar.health .pbarFill{background:linear-gradient(90deg,#b3283f,#ff6b8a)}
.pbar.hatch .pbarFill{background:linear-gradient(90deg,#c9a23a,#ffe28a)}
/* vzácnost mazlíčka: barevná záře za postavou a jiskry u vyšších vzácností */
.petArt{isolation:isolate}
.petScene.mood-sick .petSvg{filter:grayscale(.55) sepia(.2);animation-duration:5.5s}
.graveSvg{width:70px;height:70px}
.hallCard .hlArt{background:linear-gradient(180deg,#2a3350,#1a2036)}
@media(max-width:520px){.incubator{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.eggSvg.ready .eggBody{animation:none!important}}

/* ───────── Líhnutí vejce: praskání skořápky a odhalení mazlíčka ───────── */
dialog.petHatchDialog{padding:0;width:min(440px,94vw);overflow:hidden;background:radial-gradient(circle at 50% 28%,rgba(var(--c1),.2),transparent 62%),linear-gradient(180deg,var(--panel-hi,#1b2236),var(--bg0,#0a0d18))}
.hatchStage{position:relative;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 18px 24px;text-align:center}
.hatchEgg{position:absolute;left:50%;top:34%;width:150px;opacity:0;transform:translate(-50%,-50%);animation:hatchEgg 2.6s ease-in both}
@keyframes hatchEgg{0%{opacity:1;transform:translate(-50%,-50%)}14%{transform:translate(-50%,-50%) rotate(-6deg)}26%{transform:translate(-50%,-50%) rotate(6deg)}38%{transform:translate(-50%,-50%) rotate(-9deg)}50%{transform:translate(-50%,-50%) rotate(9deg) scale(1.03)}62%{transform:translate(-50%,-50%) rotate(-12deg) scale(1.05)}76%{transform:translate(-50%,-50%) rotate(13deg) scale(1.08)}90%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1.12)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.hatchEgg .crk{opacity:0;animation:crkIn .01s both}
.hatchEgg .crk.c1{animation-delay:.7s}.hatchEgg .crk.c2{animation-delay:1.4s}.hatchEgg .crk.c3{animation-delay:2s}
@keyframes crkIn{to{opacity:1}}
.hatchFlash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 34%,#fff 0,rgba(255,255,255,.75) 24%,transparent 62%);animation:hatchFlash .9s 2.25s ease-out both}
@keyframes hatchFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.hatchReveal{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;animation:hatchIn .7s 2.5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes hatchIn{from{opacity:0;visibility:hidden;transform:scale(.55) translateY(20px)}to{opacity:1;visibility:visible;transform:none}}
.hatchSparks{position:absolute;left:50%;top:92px;width:0;height:0;pointer-events:none}
.hatchSparks i{position:absolute;left:0;top:0;font-style:normal;font-size:16px;opacity:0;text-shadow:0 0 8px currentColor;animation:hatchSpark 1.3s ease-out calc(2.55s + var(--d)) both}
@keyframes hatchSpark{from{opacity:1;transform:translate(0,0) scale(.4)}to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.3)}}
.hatchArt{width:170px}.hatchArt .petSvg{width:100%;animation-duration:2.2s}
.hatchReveal h2{margin:0;font:700 22px var(--font-hd);letter-spacing:.04em;color:#fff}
.hatchName{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.hatchName input{width:170px;padding:6px 10px;text-align:center;font:600 14px var(--font-ui);color:#fff;background:rgba(0,0,0,.35);border:1px solid var(--line-hi);border-radius:8px}
.hatchSkills{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;text-align:left;font-size:13px}.hatchSkills small{color:var(--muted);margin-left:4px}
.hatchReveal .hint{margin:2px 0 4px;max-width:340px}
.hatchSkip{position:absolute;right:12px;top:12px;padding:4px 10px;font-size:12px;animation:hatchSkipOut .3s 2.5s both}
@keyframes hatchSkipOut{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
.petHatchDialog.skip .hatchEgg,.petHatchDialog.skip .hatchEgg .crk,.petHatchDialog.skip .hatchFlash,.petHatchDialog.skip .hatchReveal,.petHatchDialog.skip .hatchSparks i,.petHatchDialog.skip .hatchSkip{animation-duration:.01s!important;animation-delay:0s!important}
@media(prefers-reduced-motion:reduce){.petHatchDialog .hatchEgg,.petHatchDialog .hatchEgg .crk,.petHatchDialog .hatchFlash,.petHatchDialog .hatchReveal,.petHatchDialog .hatchSparks i,.petHatchDialog .hatchSkip,.petHatchDialog .petSvg,.petHatchDialog .petEyes{animation:none!important}.hatchSkip{display:none}}

/* ───────── Obchod se stájí: rozšíření, prodej, příprava online tržiště ───────── */
.stBtn{flex-direction:column;gap:6px}
#petsRoot .stBtn .sellBtn{padding:6px 10px;font-size:12px;background:rgba(255,77,109,.08);border-color:rgba(255,77,109,.45);color:#ffb3c0}
#petsRoot .stBtn .sellBtn:hover:not(:disabled){background:rgba(255,77,109,.2);color:#fff}
#petsRoot button.armed{background:linear-gradient(180deg,#ff7a9a,#d71f58);color:#fff;border-color:#ffb3c6;box-shadow:0 0 14px rgba(255,77,109,.55);animation:pbarLow 1s ease-in-out infinite}
.petMarket{margin-top:6px}
.soonTag{margin-left:8px;padding:2px 9px;border-radius:999px;border:1px dashed var(--line-hi);color:var(--muted);font:600 10.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.marketGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:8px}
.marketCard{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--b1);border-radius:var(--radius-md);background:rgba(var(--ink),.6)}
.marketCard b{font-size:14px}.marketCard small{color:var(--muted)}.marketCard small b{color:var(--text)}
.marketCard.soon{border-style:dashed;opacity:.85}
#petsRoot .marketCard button{margin-top:auto;padding:8px 10px}