/* Angeln (Zeitfenster-Minispiel) und Insekten im Basislager (base-catch.js, pixelart-catch.js) */
.pc-px { display: inline-block; line-height: 0; vertical-align: middle; }
.pc-px svg { display: block; width: 1em; height: 1em; image-rendering: pixelated; }
.pc-mini { font-size: 1.5rem; }
.pc-card { font-size: 2.2rem; }
.catch-stockrow { color: var(--cs-ink, #2b1a0e); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: rgba(255, 250, 235, 0.92); border: 2px solid var(--cs-ink, #2b1a0e); border-radius: 10px; padding: 8px 12px; font-weight: 800; }
.catch-stockrow small { flex: 1 0 100%; font-weight: 600; opacity: 0.75; }

.catch-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(8, 14, 24, 0.72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.catch-card { width: min(380px, 100%); background: linear-gradient(180deg, #fdf3e1, #fbe7c8); border: 4px solid var(--cs-ink, #2b1a0e); border-radius: 16px; box-shadow: 6px 6px 0 var(--cs-ink, #2b1a0e); padding: 14px 14px 12px; text-align: center; color: var(--cs-ink, #2b1a0e); }
.catch-title { font-size: 1.15rem; font-weight: 900; color: var(--cs-crimson, #c0392b); margin-bottom: 8px; }
.catch-scene { position: relative; height: 190px; border: 3px solid var(--cs-ink, #2b1a0e); border-radius: 8px; overflow: hidden; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; }
.catch-sky { position: absolute; inset: 0 0 58% 0; background: linear-gradient(180deg, #8ac4ec, #cfe9f8); box-shadow: inset 0 -4px 0 #5a9a48; }
.catch-sky::before { content: ""; position: absolute; left: 12%; top: 18%; width: 34px; height: 8px; background: #fff; box-shadow: 8px -6px 0 #fff, 22px 0 0 #fff, 44px 14px 0 #fff, 56px 8px 0 #fff; opacity: 0.9; }
.catch-water { position: absolute; inset: 42% 0 0 0; background: repeating-linear-gradient(180deg, #3f82c4 0 6px, #3874b4 6px 12px); }
.catch-water::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.16) 22px 28px); background-size: 56px 12px; animation: catchWater 2.4s steps(4) infinite; opacity: 0.6; }
@keyframes catchWater { to { background-position: 56px 0; } }
.catch-line { position: absolute; left: 50%; top: 0; width: 2px; height: 56%; background: rgba(255, 255, 255, 0.8); transform: translateX(-50%); transform-origin: top; }
.catch-bobber { position: absolute; left: 50%; top: 54%; font-size: 44px; transform: translate(-50%, -78%); }
.catch-ripple { position: absolute; left: 50%; top: 62%; width: 70px; height: 20px; margin-left: -35px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; opacity: 0; }
.catch-scene[data-s="cast"] .catch-bobber { animation: catchCast 0.7s cubic-bezier(.3, 0, .6, 1) both; }
.catch-scene[data-s="cast"] .catch-ripple { animation: catchRipple 0.6s 0.55s ease-out both; }
.catch-scene[data-s="wait"] .catch-bobber { animation: catchBob 1.8s ease-in-out infinite; }
.catch-scene[data-s="bite"] .catch-bobber { animation: catchDip 0.24s ease-in-out infinite alternate; }
.catch-scene[data-s="bite"] .catch-ripple { animation: catchRipple 0.5s ease-out infinite; }
.catch-scene[data-s="catch"] .catch-bobber { animation: catchLift 0.6s ease-in both; }
.catch-scene[data-s="result"] .catch-bobber, .catch-scene[data-s="result"] .catch-line { opacity: 0; }
.catch-scene[data-s="fail"] .catch-bobber { opacity: 0.55; }
@keyframes catchCast { from { transform: translate(-50%, -400%) rotate(-30deg); } to { transform: translate(-50%, -78%) rotate(0); } }
@keyframes catchBob { 0%, 100% { transform: translate(-50%, -78%); } 50% { transform: translate(-50%, -70%); } }
@keyframes catchDip { from { transform: translate(-50%, -60%); } to { transform: translate(-50%, -30%); } }
@keyframes catchLift { to { transform: translate(-50%, -330%); } }
@keyframes catchRipple { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } }
.catch-result { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(20, 36, 60, 0.5); }
.catch-result.show { display: flex; }
.catch-fishsprite { font-size: 84px; animation: catchPop 0.45s cubic-bezier(.34, 1.56, .64, 1) both; }
.catch-fishname { font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000; font-size: 1.05rem; }
.catch-new { color: #ffe27a; font-weight: 800; text-shadow: 0 1px 0 #000; }
.catch-perfect { color: #a8f0b8; font-weight: 800; text-shadow: 0 1px 0 #000; font-size: 0.85rem; }
@keyframes catchPop { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.catch-msg { margin: 10px 0 6px; min-height: 2.6em; font-weight: 800; font-size: 0.95rem; }
.catch-bar { height: 12px; border: 2px solid var(--cs-ink, #2b1a0e); border-radius: 7px; background: #3a2a26; overflow: hidden; margin-bottom: 8px; }
.catch-bar[hidden] { display: none; }
.catch-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e8453c, #f2c94c 50%, #3fb87a); }
@keyframes catchBar { from { width: 100%; } to { width: 0; } }
.catch-actions { display: flex; gap: 8px; justify-content: center; }
.catch-actions button { min-height: 44px; padding: 8px 16px; border: 2.5px solid var(--cs-ink, #2b1a0e); border-radius: 8px; box-shadow: 3px 3px 0 var(--cs-ink, #2b1a0e); font: 800 0.95rem inherit; cursor: pointer; background: #f0e2c0; color: inherit; }
.catch-actions .catch-hook { background: var(--cs-mint, #2fa68a); color: #fff; flex: 1; }
.catch-actions button:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.catch-stock { margin-top: 8px; font-size: 0.85rem; font-weight: 700; opacity: 0.85; }

/* Insekten im Lager */
.base-critter { position: absolute; z-index: 7; pointer-events: none; }
.base-critter .bc-body { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -60%); animation: bcBob 0.8s ease-in-out infinite alternate; }
.base-critter .bc-body .pc-px { display: block; width: 100%; }
.base-critter .bc-body svg { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }
.base-critter .bc-shadow { position: absolute; left: 50%; top: 78%; width: 40%; height: 10%; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.22); }
.base-critter[data-bug="schmetterling"] .bc-body { animation: bcFlutter 0.5s ease-in-out infinite alternate; }
.base-critter[data-bug="libelle"] .bc-body, .base-critter[data-bug="biene"] .bc-body { animation: bcBuzz 0.28s ease-in-out infinite alternate; }
.base-critter[data-bug="gluehwuermchen"] .bc-body { width: 34%; animation: bcBob 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 0 5px #e8ff5a); }
.base-critter[data-bug="gluehwuermchen"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -68%); border-radius: 50%; background: radial-gradient(circle, rgba(232, 255, 90, 0.6), rgba(232, 255, 90, 0.18) 40%, transparent 66%); animation: bcGlow 1.7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes bcGlow { from { opacity: 0.25; transform: translate(-50%, -64%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -76%) scale(1.15); } }
@keyframes bcBob { from { transform: translate(-50%, -60%); } to { transform: translate(-50%, -78%); } }
@keyframes bcFlutter { from { transform: translate(-50%, -62%) rotate(-8deg) scaleX(0.85); } to { transform: translate(-50%, -82%) rotate(8deg) scaleX(1); } }
@keyframes bcBuzz { from { transform: translate(-46%, -64%); } to { transform: translate(-54%, -72%); } }
.base-net-swing { position: absolute; left: 30%; top: -90%; width: 110%; font-size: 40px; transform-origin: 0 100%; animation: bcSwing 0.5s ease-in-out both; }
.base-net-swing .pc-px { display: block; }
.base-net-swing svg { width: 100%; height: auto; }
@keyframes bcSwing { 0% { transform: rotate(-80deg); opacity: 0; } 40% { transform: rotate(10deg); opacity: 1; } 100% { transform: rotate(40deg); opacity: 0; } }
.base-stage-wrap.hi-open .base-critter { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .base-critter .bc-body, .catch-scene * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; } }