/* Der Dino (js/pet.js) – im OBS-Overlay und in der Vorschau auf der Webseite.
   --ds = Größe des Dinos in px, der Behälter braucht position: relative/fixed. */
.dino {
  --ds: 150px;
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: var(--ds); height: calc(var(--ds) * .824);
  pointer-events: none; will-change: transform;
}
/* Ausrichtung: Blickrichtung (dino-body) und Klettern (dino-pose) */
.dino-pose { width: 100%; height: 100%; transform-origin: 50% 86%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.dino.is-climb.climb-right .dino-pose { transform: rotate(-80deg); }
.dino.is-climb.climb-left .dino-pose { transform: rotate(80deg); }
/* Beim Fressen (Heißhunger) lehnt er sich mit dem Maul über die Kartenecke */
.dino.is-starving.is-climb.climb-right .dino-pose { transform: rotate(-62deg); }
.dino.is-starving.is-climb.climb-left .dino-pose { transform: rotate(62deg); }
.dino-body { width: 100%; height: 100%; transition: transform .25s ease; transform-origin: 50% 50%; }
/* Heißhunger: Rexi wächst auf 1,3 × (federnd), Füße bleiben am Boden */
.dino-grow { width: 100%; height: 100%; transform-origin: 50% 86%; transition: transform .7s cubic-bezier(.34, 1.5, .64, 1); }
.dino.is-starving .dino-grow { transform: scale(1.3); }
.dino.is-starving .dino-bubble { bottom: calc(100% + var(--ds) * .3); }
.dino-body.is-left { transform: scaleX(-1); }
.dino-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--ds) * .03) calc(var(--ds) * .04) rgba(0, 0, 0, .45)); }

/* Farben (Klassen dn-… in js/pet.js): grün und satt – bei Hunger rot */
.dino-svg {
  --dn-s1: #72d680; --dn-s2: #52b862; --dn-s3: #3f9a4f; --dn-ln: #2c6e39; --dn-sp: #46a356;
  --dn-lb: #419c51; --dn-lf: #5cc36b; --dn-jw: #4fb35f; --dn-bl: #c9f0a8; --dn-bs: #a6d88a;
}
.dino.is-hungry .dino-svg, .dino-svg.is-hungry {
  --dn-s1: #ff8a7a; --dn-s2: #e8503f; --dn-s3: #c23a2c; --dn-ln: #7a1c14; --dn-sp: #cf4436;
  --dn-lb: #c63f31; --dn-lf: #ef5a48; --dn-jw: #dc4a3b; --dn-bl: #ffd0b8; --dn-bs: #f5a98f;
}
.dino-svg .dn-ln { stroke: var(--dn-ln); }
.dino-svg .dn-f-s3 { fill: var(--dn-s3); }
.dino-svg .dn-f-lb { fill: var(--dn-lb); }
.dino-svg .dn-f-lf { fill: var(--dn-lf); }
.dino-svg .dn-f-bl { fill: var(--dn-bl); }
.dino-svg .dn-f-sp { fill: var(--dn-sp); }
.dino-svg .dn-f-jw { fill: var(--dn-jw); }
.dino-svg .dn-f-ln { fill: var(--dn-ln); }
.dino-svg .dn-st-bs { stroke: var(--dn-bs); }
.dino-svg .dn-f-s2 { fill: var(--dn-s2); }
.dino-svg .dn-st-s2 { stroke: var(--dn-s2); }
.dino-svg .dn-st-s3 { stroke: var(--dn-s3); }
.dino-svg .dn-st-gill { stroke: var(--dn-bl); }
.dino-svg .dn-f-wing { fill: var(--dn-wing, var(--dn-s3)); }
.dino-svg .dn-f-horn { fill: var(--dn-horn, #fff3cf); }
.dino-svg .dn-s1 { stop-color: var(--dn-s1); }
.dino-svg .dn-s2 { stop-color: var(--dn-s2); }
.dino-svg .dn-s3 { stop-color: var(--dn-s3); }
.dino-svg [class*="dn-f-"], .dino-svg .dn-ln, .dino-svg .dn-st-bs, .dino-svg stop { transition: fill .9s, stroke .9s, stop-color .9s; }

/* Kostüme (data-costume am SVG): Mützen fliegen federnd auf den Kopf */
.dino-svg .dn-c { opacity: 0; transition: opacity .3s, transform .5s cubic-bezier(.34, 1.6, .64, 1); }
.dino-svg .dn-hat { transform-origin: 124px 28px; transform: translateY(-26px) rotate(-18deg) scale(.6); }
.dino-svg .dn-scarf { transform-origin: 104px 62px; transform: scale(.4); }
.dino-svg[data-costume="schaffner"] .dn-c-schaffner,
.dino-svg[data-costume="lok"] .dn-c-lok,
.dino-svg[data-costume="bau"] .dn-c-bau { opacity: 1; transform: none; }
/* Kostümwechsel: kurzer Hüpfer */
.dino.is-change .dino-svg { animation: dino-change .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dino-change { 0% { transform: none; } 30% { transform: translateY(-8%) scale(.94, 1.06); } 60% { transform: scale(1.06, .94); } 100% { transform: none; } }

/* Teile und ihre Drehpunkte (SVG-Einheiten, viewBox 170 × 140) */
.dino-svg g { transform-box: view-box; }
.dino-shadow { opacity: .45; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .3s; }
.dino-bodyg { transform-origin: 80px 121px; animation: dino-breathe 2.6s ease-in-out infinite; }
.dino-tail { transform-origin: 52px 72px; animation: dino-tail-idle 2.4s ease-in-out infinite; }
.dino-leg-b { transform-origin: 69px 96px; }
.dino-leg-a { transform-origin: 87px 96px; }
.dino-arm { transform-origin: 104px 75px; }
.dino-whistle { transform-origin: 112px 76px; }
.dino-head { transform-origin: 100px 58px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.dino-jaw { transform-origin: 103px 58px; transition: transform .12s ease; }
.dino-eye { transform-origin: var(--eye-o, 120px 38px); transition: transform .08s; }
.dino-pupil { transform: translate(1px, 0); transition: transform .4s; }
.dino-brow { opacity: 0; transition: opacity .4s; }
.dino-cap { transform-origin: 122px 26px; transition: transform .5s; }

@keyframes dino-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes dino-tail-idle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }

/* Laufen: federt zweimal pro Schritt, Schwanz schwingt gegen, Kopf bleibt ruhig, Pfeife pendelt nach */
.dino.is-walking .dino-shadow { animation: dino-shadow-walk .62s ease-in-out infinite; }
.dino.is-walking .dino-bodyg { animation: dino-bob .62s ease-in-out infinite; }
.dino.is-walking .dino-tail { animation: dino-tail-walk .62s ease-in-out infinite; }
.dino.is-walking .dino-leg-a { animation: dino-leg .62s ease-in-out infinite; }
.dino.is-walking .dino-leg-b { animation: dino-leg .62s ease-in-out -.31s infinite; }
.dino.is-walking .dino-arm { animation: dino-arm-walk .62s ease-in-out infinite; }
.dino.is-walking .dino-whistle { animation: dino-whistle .62s ease-in-out -.15s infinite; }
.dino.is-walking .dino-head { animation: dino-head-walk .62s ease-in-out infinite; }
.dino.is-walking .dino-pupil { transform: translate(2px, 0); }
/* Vor dem Umdrehen schauen die Pupillen schon in die neue Richtung */
.dino.is-glance .dino-pupil { transform: translate(-2.5px, 0); transition-duration: .15s; }
@keyframes dino-bob { 0% { transform: translateY(2px) rotate(-1.2deg); } 25% { transform: translateY(-3px) rotate(0deg); } 50% { transform: translateY(2px) rotate(1.2deg); } 75% { transform: translateY(-3px) rotate(0deg); } 100% { transform: translateY(2px) rotate(-1.2deg); } }
@keyframes dino-shadow-walk { 0%, 50%, 100% { transform: scaleX(1); opacity: .5; } 25%, 75% { transform: scaleX(.88); opacity: .38; } }
@keyframes dino-leg { 0% { transform: rotate(24deg) translateY(0); } 25% { transform: rotate(0deg) translateY(-6px); } 50% { transform: rotate(-24deg) translateY(0); } 100% { transform: rotate(24deg) translateY(0); } }
@keyframes dino-tail-walk { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-7deg); } }
@keyframes dino-head-walk { 0%, 50%, 100% { transform: translateY(-2px) rotate(1.5deg); } 25%, 75% { transform: translateY(1px) rotate(-1deg); } }
@keyframes dino-whistle { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes dino-arm-walk { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }

/* Sprechen */
.dino.is-talking .dino-jaw { animation: dino-talk .24s ease-in-out 5; }
.dino.is-talking:not(.is-walking) .dino-whistle { animation: dino-whistle 2.6s ease-in-out infinite; }
@keyframes dino-talk { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(16deg); } }
.dino.is-chomp .dino-jaw { transform: rotate(28deg); }

/* Blinzeln */
.dino.is-blink .dino-eye { transform: scaleY(.1); }

/* Hunger: schnüffelt, Braue runter, Mütze verrutscht, alle paar Sekunden knurrt der Bauch */
.dino.is-hungry .dino-brow { opacity: 1; }
.dino.is-hungry .dino-pupil { transform: translate(1px, 1.5px); }
.dino.is-hungry .dino-cap { transform: rotate(-6deg); }
.dino.is-hungry:not(.is-walking):not(.is-climb) .dino-bodyg { animation: dino-growl 3s linear infinite; }
.dino.is-hungry:not(.is-walking):not(.is-climb) .dino-head { animation: dino-sniff 2s ease-in-out infinite; }
.dino.is-hungry:not(.is-walking) .dino-tail { animation-duration: 4s; }
@keyframes dino-sniff { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-6deg) translateY(1px); } 30% { transform: rotate(-3deg); } 40% { transform: rotate(-7deg); } 55% { transform: rotate(0deg); } }
@keyframes dino-growl { 0%, 84%, 100% { transform: translateX(0); } 86% { transform: translateX(-2px); } 88% { transform: translateX(2px); } 90% { transform: translateX(-2px); } 92% { transform: translateX(1px); } }

/* Glücklich (gefüttert, gestreichelt): staucht sich, hüpft, Schwanz und Pfeife wedeln */
.dino.is-happy .dino-bodyg { animation: dino-happy 1.2s ease-out 2; }
.dino.is-happy .dino-tail { animation: dino-tail-walk .35s ease-in-out infinite; }
.dino.is-happy .dino-arm { animation: dino-arm-walk .35s ease-in-out infinite; }
.dino.is-happy .dino-whistle { animation: dino-whistle .35s ease-in-out infinite; }
.dino.is-happy .dino-eye { transform: scaleY(.5); }
@keyframes dino-happy { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .94); } 40% { transform: translateY(-12px) scale(.97, 1.03); } 62% { transform: translateY(0) scale(1.05, .95); } 78% { transform: none; } }

/* Klettern an einer Karte (Heißhunger) */
.dino.is-climb .dino-shadow { opacity: 0; }
.dino.is-climb .dino-bodyg { animation: dino-climb .5s ease-in-out infinite; }
.dino.is-climb .dino-leg-a { animation: dino-climb-leg .5s ease-in-out infinite; }
.dino.is-climb .dino-leg-b { animation: dino-climb-leg .5s ease-in-out -.25s infinite; }
.dino.is-climb .dino-arm { animation: dino-climb-leg .5s ease-in-out -.12s infinite; }
.dino.is-climb .dino-whistle { animation: dino-whistle .5s ease-in-out infinite; }
.dino.is-climb .dino-tail { animation: dino-tail-walk .5s ease-in-out infinite; }
.dino.is-climb .dino-pupil { transform: translate(2.5px, 1px); }
.dino.is-climb .dino-tag { opacity: 0; }
@keyframes dino-climb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dino-climb-leg { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-32deg) translateY(-4px); } }

/* Angeknabberte Karte (im Overlay): Löcher per Maske (js/pet.js), wachsen nach dem Füttern zu */
@property --bite { syntax: "<number>"; inherits: false; initial-value: 1; }
.dino-bitten { --bite: 1; transition: --bite .8s cubic-bezier(.2, .8, .2, 1); }
.dino-bitten.dino-regrowing { --bite: 0; }
.dino-crumb {
  position: absolute; z-index: 3; pointer-events: none; width: 7px; height: 7px; border-radius: 2px;
  background: #1a2131; border: 1px solid rgba(255, 255, 255, .2);
  animation: dino-crumb 1.4s ease-in both;
}
@keyframes dino-crumb { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 90px) rotate(160deg); } }

/* Name unter den Füßen, Punkt grün (satt) oder rot (Hunger) */
.dino-tag {
  position: absolute; left: 50%; bottom: calc(var(--ds) * -.09); transform: translateX(-50%);
  display: flex; align-items: center; gap: .4em;
  padding: .12em .6em; border-radius: 999px; white-space: nowrap;
  background: rgba(15, 20, 30, .85); border: 1px solid rgba(255, 184, 28, .35); color: #c9f0a8;
  font: 800 calc(var(--ds) * .088)/1.3 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .3s;
}
.dino-tag i { width: .45em; height: .45em; border-radius: 50%; background: #5cc36b; }
.dino.is-hungry .dino-tag { color: #ffd0b8; }
.dino.is-hungry .dino-tag i { background: #ff5a4e; }
/* Magenknurren (runDino, bei Hunger ab und zu) */
.dino.is-rumble:not(.is-climb) .dino-bodyg { animation: dino-rumble .9s linear; }
@keyframes dino-rumble { 10%, 30%, 50%, 70% { transform: translateX(-2px) scale(1.01, .99); } 20%, 40%, 60%, 80% { transform: translateX(2px); } }

/* Chat-Zeile bei !change: „@user !change lok → LOKFÜHRER“ */
.dino-chat {
  position: absolute; left: 50%; bottom: calc(100% + var(--ds) * .06); z-index: 1;
  transform: translateX(calc(-50% + var(--bx, 0px)));
  width: max-content; max-width: calc(var(--ds) * 3);
  padding: .3em .8em; border-radius: 999px;
  background: rgba(12, 16, 25, .92); border: 1px solid rgba(145, 70, 255, .5); color: #dfe4ec;
  font: 700 calc(var(--ds) * .085)/1.3 "Barlow", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 .2em .6em rgba(0, 0, 0, .4);
}
.dino-chat b { color: #bf94ff; font-weight: 800; }
.dino-chat strong { color: #ffb81c; font-weight: 800; }
.dino-chat.is-in { animation: dino-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.dino.is-starving .dino-chat { bottom: calc(100% + var(--ds) * .3); }
/* Mit Chat-Zeile rutscht die Sprechblase darüber */
.dino.has-chat .dino-bubble { bottom: calc(100% + var(--ds) * .24); }
.dino.has-chat.is-starving .dino-bubble { bottom: calc(100% + var(--ds) * .48); }
.dino.is-hungry .dino-tag b::after { content: " · Hunger!"; color: #ffb3b3; }
.dino-tag b { font-weight: inherit; }

/* Sprechblase */
.dino-bubble {
  position: absolute; left: 50%; bottom: calc(100% + var(--ds) * .06); transform: translateX(calc(-50% + var(--bx, 0px)));
  width: max-content; max-width: calc(var(--ds) * 2.4);
  padding: .45em .75em; border-radius: .8em;
  background: #fff; color: #1b1f27; border: 3px solid #1b1f27;
  font: 800 calc(var(--ds) * .12)/1.25 "Barlow", system-ui, sans-serif; text-align: center;
  box-shadow: 0 .25em .6em rgba(0, 0, 0, .35);
}
.dino-bubble::after {
  content: ""; position: absolute; left: calc(50% - var(--bx, 0px)); top: 100%; width: .9em; height: .9em; margin: -.45em 0 0 -.45em;
  background: #fff; border: 3px solid #1b1f27; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.dino-bubble.is-in { animation: dino-pop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes dino-pop { from { transform: translateX(calc(-50% + var(--bx, 0px))) scale(.6); opacity: 0; } to { transform: translateX(calc(-50% + var(--bx, 0px))) scale(1); opacity: 1; } }

/* Knabbern: Namensschild auf dem Boden */
.dino-snack {
  --ds: 150px;
  position: absolute; bottom: calc(var(--ds) * .05); z-index: 1;
  padding: .3em .8em; border-radius: .5em;
  background: #9146ff; color: #fff; border: 3px solid #1b1f27;
  font: 800 calc(var(--ds) * .14)/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; white-space: nowrap;
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .35);
  opacity: 0;
}
.dino-snack::before { content: "@"; opacity: .7; }
.dino-snack.is-in { animation: dino-drop .5s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.dino-snack.is-bitten { animation: dino-wobble .3s ease-in-out infinite; opacity: 1;
  -webkit-mask: radial-gradient(circle at 100% 20%, transparent .55em, #000 .6em); mask: radial-gradient(circle at 100% 20%, transparent .55em, #000 .6em); }
.dino-snack.is-gone { animation: dino-fall 1.2s ease-in forwards; opacity: 1; }
@keyframes dino-drop { from { opacity: 0; transform: translateY(-120%); } to { opacity: 1; transform: none; } }
@keyframes dino-wobble { 50% { transform: rotate(-6deg); } }
@keyframes dino-fall { to { transform: translateY(160%) rotate(35deg); opacity: 0; } }

/* Futter und Herzchen */
.dino-food, .dino-heart {
  --ds: 150px;
  position: absolute; z-index: 3; pointer-events: none; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.dino-food { bottom: calc(var(--ds) * .3); font-size: calc(var(--ds) * .3); animation: dino-food .65s ease-in forwards; }
@keyframes dino-food { from { transform: translateY(calc(var(--ds) * -3)) rotate(-40deg); } to { transform: none; } }
.dino-heart { bottom: calc(var(--ds) * .7); font-size: calc(var(--ds) * .18); animation: dino-heart 2s ease-out both; }
@keyframes dino-heart { from { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(calc(var(--ds) * -.9)) scale(1.1); } }

/* Einlagen */
.dino.is-hop .dino-svg { animation: dino-jump .52s cubic-bezier(.3, .7, .4, 1); }
.dino.is-hop .dino-shadow { animation: dino-shadow-hop .52s ease-in-out; }
@keyframes dino-jump {
  0% { transform: translateY(0) scale(1.08, .9); }
  35% { transform: translateY(-38%) scale(.95, 1.06); }
  70% { transform: translateY(0) scale(1.1, .88); }
  100% { transform: none; }
}
@keyframes dino-shadow-hop { 45% { transform: scale(.6); opacity: .2; } }
.dino.is-roar .dino-jaw { transform: rotate(32deg); transition-duration: .08s; }
.dino.is-roar .dino-head { transform: rotate(-12deg); transition: transform .15s; }
.dino.is-roar .dino-svg { animation: dino-shake .12s linear infinite; }
@keyframes dino-shake { 25% { transform: translateX(-1.5%); } 75% { transform: translateX(1.5%); } }
.dino.is-look .dino-head { animation: dino-look 1.8s ease-in-out; }
@keyframes dino-look { 20%, 40% { transform: rotate(-8deg); } 60%, 80% { transform: rotate(6deg) translateY(2px); } }
.dino.is-look .dino-pupil { animation: dino-pupil 1.8s ease-in-out; }
@keyframes dino-pupil { 20%, 40% { transform: translate(2px, -1px); } 60%, 80% { transform: translate(-2.5px, 1px); } }
.dino.is-dance .dino-svg { animation: dino-dance .4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dino-dance { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-6%); } }
.dino.is-dance .dino-arm { animation: dino-wave .4s ease-in-out infinite; }
.dino.is-dance .dino-whistle { animation: dino-whistle .4s ease-in-out infinite; }
@keyframes dino-wave { 50% { transform: rotate(-35deg); } }

/* Nickerchen: Mütze rutscht über die Augen, langsamer, tiefer Atem */
.dino.is-sleep .dino-eye { transform: scaleY(.08); }
.dino.is-sleep .dino-head { transform: rotate(10deg) translateY(3px); }
.dino.is-sleep .dino-cap { transform: rotate(14deg) translate(2px, 5px); }
.dino.is-sleep .dino-bodyg { animation: dino-sleep 3.2s ease-in-out infinite; }
.dino.is-sleep .dino-tail { animation-duration: 6s; }
.dino.is-sleep .dino-shadow { opacity: .4; }
@keyframes dino-sleep { 0%, 100% { transform: translateY(5px) scale(1, 1); } 50% { transform: translateY(6px) scale(1.03, .96); } }
.dino-zzz {
  --ds: 150px;
  position: absolute; bottom: calc(var(--ds) * .75); z-index: 3; pointer-events: none;
  font: 800 calc(var(--ds) * .16) / 1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #dff6ff;
  text-shadow: 0 0 .2em rgba(0, 0, 0, .6);
  animation: dino-zzz 2.2s ease-out forwards;
}
@keyframes dino-zzz { from { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } to { opacity: 0; transform: translate(calc(var(--ds) * .25), calc(var(--ds) * -.6)) scale(1.3); } }

/* Staub beim Laufen */
.dino-dust {
  --ds: 150px;
  position: absolute; bottom: 0; z-index: 1; pointer-events: none;
  width: calc(var(--ds) * .09); height: calc(var(--ds) * .09); border-radius: 50%;
  background: rgba(220, 210, 190, .55);
  animation: dino-dust .7s ease-out forwards;
}
@keyframes dino-dust { from { transform: scale(.4); opacity: .8; } to { transform: translate(calc(var(--ds) * -.08), calc(var(--ds) * -.08)) scale(1.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dino-svg *, .dino-svg { animation: none !important; }
  .dino-pose, .dino-body, .dino-grow { transition: none; }
}

/* Kachel auf der Webseite: kleiner Hüpfer beim Überfahren */
@keyframes dino-hop { 40% { transform: translateY(-14%); } }

/* Löcher im Bildschirm (js/screen-holes.js): Rexi frisst bei Heißhunger das Streambild an.
   Über den Karten, aber unter dem Dino (.ov-pet z-index 4). */
.screen-holes { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.screen-holes-edges, .screen-holes-voids { position: absolute; inset: 0; }
.screen-hole {
  position: absolute; overflow: visible;
  transform-origin: 50% 50%;
  animation: screen-hole-in .45s cubic-bezier(.34, 1.56, .64, 1) both, screen-hole-glitch 3.2s steps(1) 1s infinite;
}
.screen-hole-edge { filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)) drop-shadow(0 0 14px rgba(255, 255, 255, .55)) drop-shadow(0 0 28px rgba(150, 80, 255, .8)); }
.screen-hole-cracks { opacity: .85; }
.screen-hole-pixel { animation: screen-pixel 1.4s steps(2) infinite; }
.screen-hole.is-repair { animation: screen-hole-out .85s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes screen-hole-in {
  0% { transform: scale(.15) rotate(var(--rot, 0deg)); opacity: 0; }
  60% { transform: scale(1.08) rotate(0deg); opacity: 1; }
  100% { transform: scale(1); }
}
/* Ab und zu zuckt ein Loch wie ein Bildfehler */
@keyframes screen-hole-glitch {
  0%, 91%, 100% { translate: 0 0; }
  92% { translate: 3px -1px; }
  94% { translate: -3px 1px; }
  96% { translate: 1px 0; }
}
@keyframes screen-pixel { 50% { opacity: .15; } }
@keyframes screen-hole-out {
  0% { transform: scale(1); opacity: 1; filter: none; }
  40% { transform: scale(.9); filter: brightness(2.2) saturate(0); }
  100% { transform: scale(0) rotate(40deg); opacity: 0; }
}
.screen-crumb {
  position: absolute; pointer-events: none; image-rendering: pixelated;
  box-shadow: 0 0 6px currentColor;
  animation: screen-crumb 1.4s cubic-bezier(.3, 0, .7, 1) both;
}
@keyframes screen-crumb {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-hole, .screen-hole-pixel { animation: none; }
}

/* ==========================================================
   Haustier: weitere Tiere (js/pet-species.js), Ei → Baby → Erwachsen
   ========================================================== */
/* Farben je Tier (bei Hunger gilt weiter das Rot oben – es ist spezifischer) */
.dino-svg[data-species="cat"] { --dn-s1: #ffd08a; --dn-s2: #f6a043; --dn-s3: #d97b22; --dn-ln: #6e3810; --dn-sp: #e08a2e; --dn-lb: #e08a30; --dn-lf: #f8a84c; --dn-jw: #f2b27a; --dn-bl: #fff1dc; --dn-bs: #f2d3a8; }
.dino-svg[data-species="fox"] { --dn-s1: #ffa25a; --dn-s2: #f07a28; --dn-s3: #c95714; --dn-ln: #5a250a; --dn-sp: #d9661c; --dn-lb: #4a2410; --dn-lf: #5e2f15; --dn-jw: #fff3e6; --dn-bl: #fff6ec; --dn-bs: #f3d4b8; }
.dino-svg[data-species="axolotl"] { --dn-s1: #ffd3e6; --dn-s2: #ff9cc6; --dn-s3: #f06aa4; --dn-ln: #8a2556; --dn-sp: #ff7ab1; --dn-lb: #f58cbc; --dn-lf: #ffb0d2; --dn-jw: #ff8fbf; --dn-bl: #ffe9f3; --dn-bs: #ffc2dc; }
.dino-svg[data-species="penguin"] { --dn-s1: #4a5370; --dn-s2: #2b3146; --dn-s3: #171b29; --dn-ln: #0b0d16; --dn-sp: #2b3146; --dn-lb: #ff9a1c; --dn-lf: #ffb03f; --dn-jw: #e8780f; --dn-bl: #f6f8fc; --dn-bs: #d5dbe8; }
.dino-svg[data-species="dragon"] { --dn-s1: #c4a3ff; --dn-s2: #9466f2; --dn-s3: #6c42d2; --dn-ln: #34197a; --dn-sp: #7e52e6; --dn-lb: #7c4fe0; --dn-lf: #a37bff; --dn-jw: #8c5cef; --dn-bl: #ffe08a; --dn-bs: #f5c35a; --dn-wing: #43c7b4; --dn-horn: #fff1c9; }
.dino.is-hungry .dino-svg { --dn-wing: #d14a3a; }

/* Drehpunkte der anderen Tiere */
.dino-svg[data-species="cat"] .dino-tail { transform-origin: 50px 84px; }
.dino-svg[data-species="fox"] .dino-tail { transform-origin: 50px 82px; }
.dino-svg[data-species="axolotl"] .dino-tail { transform-origin: 52px 92px; }
.dino-svg[data-species="axolotl"] .dino-head { transform-origin: 104px 78px; }
.dino-svg[data-species="axolotl"] .dino-jaw { transform-origin: 136px 76px; }
.dino-svg[data-species="cat"] .dino-jaw { transform-origin: 138px 58px; }
.dino-svg[data-species="fox"] .dino-jaw { transform-origin: 128px 57px; }
.dino-svg[data-species="penguin"] .dino-head { transform-origin: 98px 56px; }
.dino-svg[data-species="penguin"] .dino-jaw { transform-origin: 126px 44px; }
.dino-svg[data-species="penguin"] .dino-tail { transform-origin: 56px 110px; }
.dino-svg[data-species="penguin"] .dino-leg-b { transform-origin: 70px 114px; }
.dino-svg[data-species="penguin"] .dino-leg-a { transform-origin: 90px 114px; }
.dino-svg[data-species="penguin"] .dino-arm { transform-origin: 102px 70px; }

/* Eigenheiten: Katze schwingt den Schwanz, Fuchs wedelt mit dem Buschschwanz,
   Axolotl bewegt die Kiemen, Pinguin watschelt, Drache schlägt mit den Flügeln und spuckt Feuer */
.dino-svg[data-species="cat"] .dino-tail { animation: pet-cat-tail 3s ease-in-out infinite; }
@keyframes pet-cat-tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
.dino-svg[data-species="fox"] .dino-tail { animation: pet-fox-tail 2.2s ease-in-out infinite; }
@keyframes pet-fox-tail { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(8deg) translateY(-2px); } }
.pet-gills { transform-box: view-box; transform-origin: 110px 60px; animation: pet-gills 2.4s ease-in-out infinite; }
@keyframes pet-gills { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-7deg) scale(1.05); } }
.dino.is-walking .pet-gills { animation-duration: .8s; }
.dino[data-species="penguin"].is-walking .dino-bodyg { animation: pet-waddle .5s ease-in-out infinite; }
@keyframes pet-waddle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }
.dino[data-species="penguin"].is-walking .dino-arm { animation: pet-flipper .25s ease-in-out infinite; }
@keyframes pet-flipper { 50% { transform: rotate(-24deg); } }
.pet-wing { transform-box: view-box; transform-origin: 78px 56px; animation: pet-wing 3.4s ease-in-out infinite; }
@keyframes pet-wing { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-8deg) scaleY(.92); } }
.dino.is-walking .pet-wing, .dino.is-happy .pet-wing, .dino.is-dance .pet-wing { animation: pet-flap .38s ease-in-out infinite; }
@keyframes pet-flap { 0%, 100% { transform: rotate(4deg) scaleY(1); } 50% { transform: rotate(-22deg) scaleY(.7); } }
.pet-fire { opacity: 0; transform-box: view-box; transform-origin: 152px 60px; transform: scaleX(.2); transition: opacity .15s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.dino[data-species="dragon"].is-roar .pet-fire { opacity: 1; transform: none; animation: pet-fire .18s steps(2) infinite; }
@keyframes pet-fire { 50% { transform: scale(1.08, .9); } }
.pet-smoke { opacity: 0; }
.dino[data-species="dragon"].is-hungry .pet-smoke { animation: pet-smoke 2.6s ease-out infinite; }
@keyframes pet-smoke { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Baby: kleiner, großer Kopf und große Augen (Füße bleiben am Boden) */
.dino[data-stage="baby"] .dino-grow { transform: scale(.62); }
.dino[data-stage="baby"].is-starving .dino-grow { transform: scale(.8); }
.dino[data-stage="baby"] .dino-head { scale: 1.3; }
.dino[data-stage="baby"] .dino-eye { scale: 1.2; }
.dino[data-stage="baby"] .dino-tag { bottom: calc(var(--ds) * -.06); }
.dino[data-stage="baby"] .dino-bubble, .dino[data-stage="baby"] .dino-chat { bottom: calc(100% - var(--ds) * .2); }

/* Ei: statt des Tiers. --egg-spot je Tier */
.pet-egg { display: none; position: absolute; left: 50%; bottom: 0; width: 46%; aspect-ratio: 100 / 120; transform: translateX(-50%); transform-origin: 50% 95%; }
.dino[data-stage="egg"] .pet-egg { display: block; animation: pet-egg-idle 3.2s ease-in-out infinite; }
.dino[data-stage="egg"] .dino-grow { display: none; }
.dino[data-stage="egg"] .dino-tag b::after { content: " · Ei"; color: #fff3cf; }
.pet-egg-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 calc(var(--ds) * .03) calc(var(--ds) * .04) rgba(0, 0, 0, .45)); }
.pet-egg-shadow { opacity: .4; }
.pet-egg-shell { fill: #fff6e6; stroke: #5b4a3a; }
.pet-egg-spot { fill: var(--egg-spot, #72d680); opacity: .9; }
.dino[data-species="cat"] { --egg-spot: #f6a043; }
.dino[data-species="fox"] { --egg-spot: #f07a28; }
.dino[data-species="axolotl"] { --egg-spot: #ff9cc6; }
.dino[data-species="penguin"] { --egg-spot: #2b3146; }
.dino[data-species="dragon"] { --egg-spot: #9466f2; }
.pet-egg-crack { stroke: #3a2a1e; opacity: 0; transition: opacity .6s; }
.dino.egg-cracked .pet-egg-crack-1 { opacity: 1; }
.dino.egg-peek .pet-egg-crack-2 { opacity: 1; }
.pet-egg-peek { opacity: 0; transition: opacity .6s; }
.dino.egg-peek .pet-egg-peek { opacity: 1; }
.dino.egg-peek .pet-egg-pupil { animation: pet-egg-look 3s ease-in-out infinite; }
@keyframes pet-egg-look { 0%, 40%, 100% { transform: translateX(0); } 50%, 80% { transform: translateX(2px); } }
@keyframes pet-egg-idle { 0%, 88%, 100% { transform: translateX(-50%) rotate(0deg); } 91% { transform: translateX(-50%) rotate(-4deg); } 94% { transform: translateX(-50%) rotate(4deg); } 97% { transform: translateX(-50%) rotate(-2deg); } }
.dino.is-wobble .pet-egg { animation: pet-egg-wobble .9s ease-in-out; }
@keyframes pet-egg-wobble { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 15% { transform: translateX(-50%) rotate(-12deg); } 35% { transform: translateX(-50%) rotate(10deg); } 55% { transform: translateX(-50%) rotate(-7deg); } 75% { transform: translateX(-50%) rotate(4deg) translateY(-4%); } }
.dino.is-hatching .pet-egg { animation: pet-egg-wobble .3s ease-in-out infinite; }
.dino.is-hatched .dino-grow { animation: pet-hatched 1.1s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pet-hatched { 0% { transform: scale(.2) translateY(10%); opacity: 0; } 50% { transform: scale(.72) translateY(-18%); opacity: 1; } 100% { transform: scale(.62); } }
/* Wachsen: leuchtet auf, dann groß */
.dino.is-growing .dino-svg { animation: pet-glow .9s ease-in-out; }
@keyframes pet-glow { 0%, 100% { filter: drop-shadow(0 0 0 #fff); } 50% { filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 28px #ffe08a) brightness(1.6); } }
.dino.is-grown .dino-grow { animation: pet-grown 1.1s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pet-grown { 0% { transform: scale(.62); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pet-spark {
  --ds: 150px;
  position: absolute; bottom: calc(var(--ds) * .3); z-index: 3; pointer-events: none; font-size: calc(var(--ds) * .16); line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  animation: pet-spark 1.5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes pet-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--ds) * -.9)) scale(1.1) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) {
  .pet-egg, .pet-gills, .pet-wing { animation: none !important; }
}

/* Tier & Entwicklung (Haustier-Dialog, OBS-Fenster) */
.pet-evo { display: grid; gap: 8px; }
.pet-evo-label { margin: 2px 0 0; font-size: 13px; color: var(--text-2, #c9cfdd); font-weight: 600; }
.pet-evo-label small { font-weight: 400; color: var(--muted, #8f99ae); }
.pet-species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.pet-species {
  display: grid; justify-items: center; gap: 1px; padding: 6px 4px 7px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line, rgba(255, 255, 255, .12)); background: var(--surface, rgba(255, 255, 255, .04)); color: var(--text-2, #c9cfdd);
  font: 600 12px var(--font-body, system-ui); transition: border-color .2s, transform .15s, background-color .2s;
}
.pet-species:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(169, 112, 255, .6); }
.pet-species[aria-checked="true"] { border-color: var(--twitch, #9146ff); background: rgba(145, 70, 255, .18); color: #fff; box-shadow: 0 0 0 2px rgba(145, 70, 255, .3); }
.pet-species:disabled { cursor: default; opacity: .8; }
.pet-species-pic { display: block; width: 70px; height: 58px; }
.pet-species-pic .dino-svg { width: 100%; height: 100%; filter: none; }
.pet-species-pic .dino-svg * { animation: none !important; }
.pet-species small { color: var(--muted, #8f99ae); font-weight: 500; font-size: 11px; }
.pet-stage-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-stage-btn {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line, rgba(255, 255, 255, .12));
  background: var(--bg-2, rgba(0, 0, 0, .2)); color: var(--text-2, #c9cfdd); font: 600 13px var(--font-body, system-ui);
}
.pet-stage-btn[aria-checked="true"] { border-color: var(--twitch, #9146ff); background: rgba(145, 70, 255, .22); color: #fff; }
.pet-stage-btn:disabled { cursor: default; }
.pet-evo-progress { margin: 0; font-size: 13px; color: var(--text-2, #c9cfdd); }
.pet-evo-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pet-evo-nums input { width: 100%; }
.pet-evo-msg:empty { display: none; }

/* Versteckt sich (Atombombe im Overlay): duckt sich zusammen, zittert, kommt wieder hoch */
.dino.is-hide .dino-pose { animation: pet-hide 2.6s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 50% 100%; }
.dino.is-hide .dino-svg { animation: dino-shake .14s linear 6; }
@keyframes pet-hide {
  0% { transform: none; }
  12%, 78% { transform: translateY(18%) scale(1.1, .55); filter: brightness(.7); }
  100% { transform: none; filter: none; }
}