/* ============================================================
   Komponenta <x-zvire typ="..."> — ilustrované siluety zvířat
   Sdílené napříč všemi stránkami farmy (branka 0, branka 1, další).
   Používá se s komponenty/zvirata.js (definuje custom element).
   ============================================================ */

:root {
  --zv-cream: #fbf1de;
  --zv-sun: #e8a93c;
  --zv-green: #4c7a3d;
  --zv-red: #c1502e;
  --zv-red-deep: #b8482f;
  --zv-brown: #6b4a2c;
}

.critter-icon { width: 74px; height: 62px; margin: 0 auto 10px; position: relative; display: block; }

/* Ovce — vlna jako 5 překrývajících se obrysových kroužků (olympijský vzor) */
.critter-icon.ovce .ring { position: absolute; width: 19px; height: 19px; border-radius: 50%; border: 3px solid #9a8f7a; background: transparent; }
.critter-icon.ovce .ring1 { left: 4px; top: 20px; } .critter-icon.ovce .ring2 { left: 18px; top: 20px; } .critter-icon.ovce .ring3 { left: 32px; top: 20px; }
.critter-icon.ovce .ring4 { left: 11px; top: 27px; } .critter-icon.ovce .ring5 { left: 25px; top: 27px; }
.critter-icon.ovce .face { position: absolute; right: 6px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: #221f1c; }
.critter-icon.ovce .ear { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #221f1c; right: 4px; top: 22px; }
.critter-icon.ovce .leg { position: absolute; bottom: 0; width: 4px; height: 12px; background: #221f1c; }
.critter-icon.ovce .leg1 { left: 20px; } .critter-icon.ovce .leg2 { left: 36px; }
.critter-icon.ovce .grass { position: absolute; right: 0; bottom: 0; width: 24px; height: 6px; border-radius: 3px; background: var(--zv-green); opacity: 0; transform: scaleX(0.6); transform-origin: right center; }

/* Oslík */
.critter-icon.oslik .body { position: absolute; left: 12px; top: 28px; width: 42px; height: 24px; background: #d9bd94; border: 3px solid var(--zv-brown); border-radius: 50%; }
.critter-icon.oslik .head { position: absolute; right: 8px; top: 12px; width: 22px; height: 22px; background: #d9bd94; border: 3px solid var(--zv-brown); border-radius: 50%; }
.critter-icon.oslik .ear { position: absolute; width: 8px; height: 18px; background: #d9bd94; border: 3px solid var(--zv-brown); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.critter-icon.oslik .ear1 { right: 20px; top: -4px; transform: rotate(-14deg); } .critter-icon.oslik .ear2 { right: 8px; top: -4px; transform: rotate(14deg); }
.critter-icon.oslik .leg { position: absolute; bottom: 0; width: 4px; height: 10px; background: var(--zv-brown); }
.critter-icon.oslik .leg1 { left: 22px; } .critter-icon.oslik .leg2 { left: 38px; }

/* Slepice */
.critter-icon.slepice .body { position: absolute; left: 14px; top: 22px; width: 34px; height: 28px; background: var(--zv-cream); border: 3px solid var(--zv-red); border-radius: 60% 60% 55% 55% / 65% 65% 50% 50%; }
.critter-icon.slepice .head { position: absolute; left: 38px; top: 12px; width: 16px; height: 16px; background: var(--zv-cream); border: 3px solid var(--zv-red); border-radius: 50%; }
.critter-icon.slepice .comb { position: absolute; left: 42px; top: 4px; width: 10px; height: 8px; background: var(--zv-red-deep); border-radius: 50% 50% 0 0; }
.critter-icon.slepice .beak { position: absolute; left: 52px; top: 18px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--zv-sun); }
.critter-icon.slepice .leg { position: absolute; bottom: 0; width: 3px; height: 10px; background: var(--zv-red); }
.critter-icon.slepice .leg1 { left: 22px; } .critter-icon.slepice .leg2 { left: 32px; }

/* Kachna */
.critter-icon.kachna .body { position: absolute; left: 10px; top: 24px; width: 42px; height: 24px; background: #f3edda; border: 3px solid #6c93b0; border-radius: 55% 60% 50% 50% / 65% 65% 55% 55%; }
.critter-icon.kachna .head { position: absolute; left: 36px; top: 12px; width: 18px; height: 18px; background: #f3edda; border: 3px solid #6c93b0; border-radius: 50%; }
.critter-icon.kachna .bill { position: absolute; left: 48px; width: 14px; height: 4px; background: var(--zv-sun); border-radius: 0 50% 50% 0; transform-origin: left center; }
.critter-icon.kachna .bill.horni { top: 17px; }
.critter-icon.kachna .bill.dolni { top: 22px; }
.critter-icon.kachna .leg { position: absolute; bottom: 0; width: 4px; height: 8px; background: #6c93b0; }
.critter-icon.kachna .leg1 { left: 20px; } .critter-icon.kachna .leg2 { left: 32px; }

/* Husa */
.critter-icon.husa .body { position: absolute; left: 8px; top: 28px; width: 38px; height: 22px; background: #eef1ec; border: 3px solid #8a9a7b; border-radius: 55% 60% 50% 50% / 65% 65% 55% 55%; }
.critter-icon.husa .neck { position: absolute; left: 38px; top: 8px; width: 10px; height: 24px; background: #eef1ec; border: 3px solid #8a9a7b; border-radius: 40%; transform: rotate(-10deg); transform-origin: bottom center; }
.critter-icon.husa .head { position: absolute; left: 42px; top: 2px; width: 14px; height: 14px; background: #eef1ec; border: 3px solid #8a9a7b; border-radius: 50%; }
.critter-icon.husa .bill { position: absolute; left: 54px; width: 10px; height: 3px; background: var(--zv-sun); border-radius: 0 50% 50% 0; transform-origin: left center; }
.critter-icon.husa .bill.horni { top: 5px; }
.critter-icon.husa .bill.dolni { top: 8px; }
.critter-icon.husa .leg { position: absolute; bottom: 0; width: 4px; height: 10px; background: #8a9a7b; }
.critter-icon.husa .leg1 { left: 16px; } .critter-icon.husa .leg2 { left: 28px; }

/* Křepelka */
.critter-icon.krepelka .body { position: absolute; left: 18px; top: 26px; width: 32px; height: 24px; background: #b98a5c; border: 3px solid var(--zv-brown); border-radius: 55% 55% 50% 50% / 60% 60% 55% 55%; }
.critter-icon.krepelka .head { position: absolute; left: 40px; top: 16px; width: 15px; height: 15px; background: #b98a5c; border: 3px solid var(--zv-brown); border-radius: 50%; }
.critter-icon.krepelka .crest { position: absolute; left: 44px; top: 6px; width: 6px; height: 10px; background: var(--zv-brown); border-radius: 50% 50% 0 50%; transform: rotate(-20deg); }
.critter-icon.krepelka .beak { position: absolute; left: 52px; top: 20px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--zv-sun); }
.critter-icon.krepelka .leg { position: absolute; bottom: 0; width: 3px; height: 8px; background: var(--zv-brown); }
.critter-icon.krepelka .leg1 { left: 26px; } .critter-icon.krepelka .leg2 { left: 36px; }
.critter-icon.krepelka .wing { position: absolute; left: 26px; top: 32px; width: 16px; height: 12px; background: #8a6a44; border-radius: 50% 40% 50% 40%; opacity: .85; transform-origin: center left; }

/* Králík */
.critter-icon.kralik .body { position: absolute; left: 14px; top: 26px; width: 38px; height: 28px; background: #f3ede0; border: 3px solid #9a8f7a; border-radius: 55% 55% 50% 50% / 60% 60% 55% 55%; }
.critter-icon.kralik .head { position: absolute; left: 34px; top: 16px; width: 20px; height: 18px; background: #f3ede0; border: 3px solid #9a8f7a; border-radius: 50%; }
.critter-icon.kralik .ear { position: absolute; width: 8px; height: 22px; background: #f3ede0; border: 3px solid #9a8f7a; border-radius: 50% 50% 40% 40%; }
.critter-icon.kralik .ear1 { left: 36px; top: -4px; transform: rotate(-6deg); } .critter-icon.kralik .ear2 { left: 46px; top: -4px; transform: rotate(6deg); }
.critter-icon.kralik .tail { position: absolute; left: 10px; top: 34px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #9a8f7a; }
.critter-icon.kralik .leg { position: absolute; bottom: 0; width: 4px; height: 8px; background: #9a8f7a; }
.critter-icon.kralik .leg1 { left: 20px; } .critter-icon.kralik .leg2 { left: 32px; }

/* Kravička (Dexter) */
.critter-icon.kravicka .body { position: absolute; left: 8px; top: 24px; width: 46px; height: 28px; background: #3a2e28; border: 3px solid #241a15; border-radius: 50% 55% 45% 45% / 55% 60% 45% 45%; }
.critter-icon.kravicka .patch { position: absolute; left: 14px; top: 32px; width: 15px; height: 13px; background: #f3ede0; border-radius: 50%; }
.critter-icon.kravicka .head { position: absolute; right: 4px; top: 16px; width: 20px; height: 18px; background: #3a2e28; border: 3px solid #241a15; border-radius: 50%; }
.critter-icon.kravicka .horn { position: absolute; width: 6px; height: 9px; background: #d9c9a3; border-radius: 50% 50% 0 0; }
.critter-icon.kravicka .horn1 { right: 6px; top: 8px; transform: rotate(-18deg); } .critter-icon.kravicka .horn2 { right: 15px; top: 8px; transform: rotate(18deg); }
.critter-icon.kravicka .leg { position: absolute; bottom: 0; width: 4px; height: 10px; background: #241a15; }
.critter-icon.kravicka .leg1 { left: 20px; } .critter-icon.kravicka .leg2 { left: 38px; }

/* Prasátko (Kunekune) */
.critter-icon.prase .body { position: absolute; left: 12px; top: 24px; width: 40px; height: 28px; background: #d98a5c; border: 3px solid #8a5a38; border-radius: 55% 55% 50% 50% / 60% 60% 55% 55%; }
.critter-icon.prase .head { position: absolute; left: 36px; top: 16px; width: 20px; height: 18px; background: #d98a5c; border: 3px solid #8a5a38; border-radius: 50%; }
.critter-icon.prase .ear { position: absolute; width: 8px; height: 8px; background: #d98a5c; border: 2px solid #8a5a38; border-radius: 50% 50% 50% 0; }
.critter-icon.prase .ear1 { left: 38px; top: 10px; transform: rotate(-20deg); } .critter-icon.prase .ear2 { left: 48px; top: 10px; transform: rotate(20deg); }
.critter-icon.prase .tassel { position: absolute; width: 3px; height: 8px; background: #b96b46; border-radius: 40%; transform-origin: top center; }
.critter-icon.prase .tassel1 { left: 44px; top: 28px; } .critter-icon.prase .tassel2 { left: 49px; top: 28px; }
.critter-icon.prase .leg { position: absolute; bottom: 0; width: 4px; height: 8px; background: #8a5a38; }
.critter-icon.prase .leg1 { left: 20px; } .critter-icon.prase .leg2 { left: 34px; }

/* Krůta */
.critter-icon.kruta .tailfan { position: absolute; left: 0; top: 10px; width: 30px; height: 30px; background: #4a3c34; border: 3px solid #241a15; border-radius: 50% 50% 50% 0; transform-origin: bottom right; }
.critter-icon.kruta .body { position: absolute; left: 18px; top: 22px; width: 32px; height: 26px; background: #5c4a3e; border: 3px solid #241a15; border-radius: 55% 55% 50% 50% / 60% 60% 55% 55%; }
.critter-icon.kruta .head { position: absolute; left: 42px; top: 12px; width: 15px; height: 15px; background: #5c4a3e; border: 3px solid #241a15; border-radius: 50%; }
.critter-icon.kruta .wattle { position: absolute; left: 50px; top: 20px; width: 4px; height: 8px; background: #c1392b; border-radius: 40%; transform-origin: top center; }
.critter-icon.kruta .beak { position: absolute; left: 55px; top: 16px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--zv-sun); }
.critter-icon.kruta .leg { position: absolute; bottom: 0; width: 3px; height: 9px; background: #241a15; }
.critter-icon.kruta .leg1 { left: 26px; } .critter-icon.kruta .leg2 { left: 36px; }

/* Prase strakaté (přeštické) */
.critter-icon.strakate .body { position: absolute; left: 12px; top: 24px; width: 40px; height: 28px; background: #f3ede0; border: 3px solid #3a332a; border-radius: 55% 55% 50% 50% / 60% 60% 55% 55%; }
.critter-icon.strakate .head { position: absolute; left: 36px; top: 16px; width: 20px; height: 18px; background: #f3ede0; border: 3px solid #3a332a; border-radius: 50%; }
.critter-icon.strakate .spot { position: absolute; border-radius: 50%; background: #241a15; }
.critter-icon.strakate .spot1 { left: 16px; top: 28px; width: 12px; height: 10px; }
.critter-icon.strakate .spot2 { left: 30px; top: 34px; width: 9px; height: 8px; }
.critter-icon.strakate .ear { position: absolute; width: 8px; height: 8px; background: #f3ede0; border: 2px solid #3a332a; border-radius: 50% 50% 50% 0; }
.critter-icon.strakate .ear1 { left: 38px; top: 10px; transform: rotate(-20deg); } .critter-icon.strakate .ear2 { left: 48px; top: 10px; transform: rotate(20deg); }
.critter-icon.strakate .leg { position: absolute; bottom: 0; width: 4px; height: 8px; background: #3a332a; }
.critter-icon.strakate .leg1 { left: 20px; } .critter-icon.strakate .leg2 { left: 34px; }

/* Pes (americký ovčák) */
.critter-icon.pes .tail { position: absolute; left: 4px; top: 18px; width: 8px; height: 16px; background: #a9714a; border: 2px solid #6b4a2c; border-radius: 50% 50% 50% 0; transform: rotate(30deg); transform-origin: top right; }
.critter-icon.pes .body { position: absolute; left: 10px; top: 26px; width: 42px; height: 24px; background: #a9714a; border: 3px solid #6b4a2c; border-radius: 50% 55% 45% 45% / 55% 60% 45% 45%; }
.critter-icon.pes .chest { position: absolute; left: 14px; top: 32px; width: 14px; height: 13px; background: #fdf8ee; border-radius: 50%; }
.critter-icon.pes .head { position: absolute; right: 6px; top: 14px; width: 20px; height: 18px; background: #a9714a; border: 3px solid #6b4a2c; border-radius: 50%; }
.critter-icon.pes .blaze { position: absolute; right: 11px; top: 21px; width: 6px; height: 9px; background: #fdf8ee; border-radius: 50%; }
.critter-icon.pes .ear { position: absolute; width: 10px; height: 14px; background: #6b4a2c; border-radius: 0 0 50% 50%; }
.critter-icon.pes .ear1 { right: 2px; top: 10px; transform: rotate(10deg); } .critter-icon.pes .ear2 { right: 15px; top: 10px; transform: rotate(-10deg); }
.critter-icon.pes .leg { position: absolute; bottom: 0; width: 4px; height: 12px; background: #fdf8ee; border-left: 1px solid #6b4a2c; border-right: 1px solid #6b4a2c; }
.critter-icon.pes .leg1 { left: 20px; } .critter-icon.pes .leg2 { left: 36px; }

/* ============================================================
   Volitelná animace ("je-zive") — samostatná varianta, vypíná se
   snadno (stačí neposílat atribut animovane / neaplikovat třídu).
   Statická verze zůstává vždy default. Animace jsou definované
   vždy a explicitně vypnuté pod prefers-reduced-motion: reduce —
   spolehlivější než spoléhat na "no-preference".
   ============================================================ */
.critter-icon.je-zive { animation: zv-bob 2.6s ease-in-out infinite; }
@keyframes zv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Ovce — občas se skloní k trávě na zemi (hlava i ucho jako jeden pevný celek, stejný pohyb) */
.critter-icon.je-zive.ovce .face,
.critter-icon.je-zive.ovce .ear {
  animation: zv-pastva-hlava 6s ease-in-out infinite;
}
.critter-icon.je-zive.ovce .grass { animation: zv-travnik 6s ease-in-out infinite; }
@keyframes zv-pastva-hlava { 0%, 55%, 100% { transform: translateY(0); } 70%, 85% { transform: translateY(16px); } }
@keyframes zv-travnik { 0%, 55%, 100% { opacity: 0; transform: scaleX(0.6); } 70%, 85% { opacity: 1; transform: scaleX(1); } }

/* Husa — zobák otvírá jako kachna, dlouhý krk se přitom pohupuje */
.critter-icon.je-zive.husa .bill.horni { animation: zv-zobak-h 1.8s ease-in-out infinite; }
.critter-icon.je-zive.husa .bill.dolni { animation: zv-zobak-d 1.8s ease-in-out infinite; }
.critter-icon.je-zive.husa .neck { animation: zv-krk-hyb 3s ease-in-out infinite; }
@keyframes zv-krk-hyb { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-2deg); } }

/* Krůta — vějíř ocasu se jemně pohupuje */
.critter-icon.je-zive.kruta .tailfan { animation: zv-vejir 2.4s ease-in-out infinite; }
@keyframes zv-vejir { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Kravička, prasátka — jemné kývání hlavou */
.critter-icon.je-zive.kravicka .head,
.critter-icon.je-zive.prase .head,
.critter-icon.je-zive.strakate .head {
  animation: zv-hlava-kyv 3.4s ease-in-out infinite;
}

/* Oslík — uši i hlavou kýve */
.critter-icon.je-zive.oslik .ear1 { animation: zv-osel-ucho1 3.4s ease-in-out infinite; }
.critter-icon.je-zive.oslik .ear2 { animation: zv-osel-ucho2 3.4s ease-in-out infinite; }
.critter-icon.je-zive.oslik .head { animation: zv-hlava-kyv 3.4s ease-in-out infinite; }
@keyframes zv-osel-ucho1 { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-26deg); } }
@keyframes zv-osel-ucho2 { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(26deg); } }
@keyframes zv-hlava-kyv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Králík — uši (rychlejší) i hlavou */
.critter-icon.je-zive.kralik .ear1 { animation: zv-ucho1 3.2s ease-in-out infinite; }
.critter-icon.je-zive.kralik .ear2 { animation: zv-ucho2 3.2s ease-in-out infinite; }
.critter-icon.je-zive.kralik .head { animation: zv-hlava-kyv 3.2s ease-in-out infinite; }
@keyframes zv-ucho1 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-18deg); } }
@keyframes zv-ucho2 { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(18deg); } }

/* Slepice — zobe (hlava, zobák i hřebínek dolů k zemi společně) */
.critter-icon.je-zive.slepice .head,
.critter-icon.je-zive.slepice .beak,
.critter-icon.je-zive.slepice .comb {
  animation: zv-zobani 2.2s ease-in-out infinite;
}
@keyframes zv-zobani { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(10px); } }

/* Kachna — zobák (dvě čárky) se otvírá, jako když mluví */
.critter-icon.je-zive.kachna .bill.horni { animation: zv-zobak-h 1.6s ease-in-out infinite; }
.critter-icon.je-zive.kachna .bill.dolni { animation: zv-zobak-d 1.6s ease-in-out infinite; }
@keyframes zv-zobak-h { 0%, 60%, 100% { transform: rotate(0deg); } 80% { transform: rotate(-18deg); } }
@keyframes zv-zobak-d { 0%, 60%, 100% { transform: rotate(0deg); } 80% { transform: rotate(18deg); } }

/* Křepelka — malá neposeda, rychlejší celkový pohyb + cukavé křidýlko */
.critter-icon.je-zive.krepelka { animation: zv-bob 1.4s ease-in-out infinite; }
.critter-icon.je-zive.krepelka .wing { animation: zv-krepelka-krid 1.1s ease-in-out infinite; }
@keyframes zv-krepelka-krid { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-10deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(0deg); } }

.critter-icon.je-zive.pes .tail { animation: zv-ohon 0.9s ease-in-out infinite; }
@keyframes zv-ohon { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(44deg); } }

.critter-icon.je-zive.prase .tassel1,
.critter-icon.je-zive.prase .tassel2,
.critter-icon.je-zive.kruta .wattle {
  animation: zv-houpani 2s ease-in-out infinite;
}
@keyframes zv-houpani { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .critter-icon.je-zive,
  .critter-icon.je-zive .ear,
  .critter-icon.je-zive .head,
  .critter-icon.je-zive .face,
  .critter-icon.je-zive .beak,
  .critter-icon.je-zive .comb,
  .critter-icon.je-zive .grass,
  .critter-icon.je-zive .tail,
  .critter-icon.je-zive .tassel,
  .critter-icon.je-zive .wattle,
  .critter-icon.je-zive .bill,
  .critter-icon.je-zive .wing,
  .critter-icon.je-zive .neck,
  .critter-icon.je-zive .tailfan {
    animation: none !important;
  }
}