/* Shared layout for the fishing_catch family (FC01).
 * Gentle drift, no timer, no miss state. Themes supply only their palette. */
.pond { position:absolute; inset:0; z-index:4; }
.pond.locked .fish { pointer-events:none; }

.fish { position:absolute; aspect-ratio:3/2; min-width:64px; min-height:44px; background:none;
  border:none; padding:0; z-index:5; animation:fish-drift var(--drift,8s) ease-in-out infinite alternate; }
.fish img { width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(30,42,74,.28)); pointer-events:none;
  animation:fish-bob var(--bob,5s) ease-in-out infinite alternate; }
@keyframes fish-drift { from { transform:translateX(-7%) } to { transform:translateX(7%) } }
@keyframes fish-bob { from { transform:translateY(-6%) rotate(-3deg) } to { transform:translateY(6%) rotate(3deg) } }
.fish:active img, .fish.pressing img { transform:scale(.92); animation:none; }
.fish.hooked { animation:none; z-index:12; }
.fish.hooked img { animation:fish-wiggle .28s ease-in-out 3; }
@keyframes fish-wiggle { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
.fish.to-bucket { animation:none; z-index:14;
  transition:translate .62s cubic-bezier(.5,.05,.4,1), scale .62s; scale:.34; pointer-events:none; }
.fish.to-bucket img { animation:none; }

/* rod + line (line themes only; hidden by the engine when tool:"none") */
.rod { position:absolute; left:50%; top:44px; transform:translateX(-50%); z-index:11; pointer-events:none; }
.rod .line { display:block; width:3px; height:0; margin:0 auto; background:rgba(30,42,74,.55);
  transition:height .34s cubic-bezier(.4,.1,.3,1); }
.rod .hook { display:block; width:12px; height:12px; margin:-2px auto 0; border:3px solid rgba(30,42,74,.55);
  border-top:none; border-right:none; border-radius:0 0 0 10px; }

.bucket-holder { position:absolute; right:3%; bottom:max(10px, env(safe-area-inset-bottom)); z-index:9;
  width:clamp(76px,18vw,120px); aspect-ratio:1; }
.bucket { width:100%; height:100%; }
.bucket img, .bucket svg { width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(30,42,74,.3)); }
.bucket-count { position:absolute; right:-4px; top:-6px; min-width:30px; height:30px; border-radius:999px;
  background:var(--deep-coral); color:#fff; font-weight:800; font-size:.95rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(30,42,74,.3); }
.bucket-holder.plop { animation:bucket-plop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bucket-plop { 0%,100%{transform:scale(1)} 45%{transform:scale(1.12)} }
.bucket-holder.full { animation:bucket-happy 1.1s ease-in-out infinite; }
@keyframes bucket-happy { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.host-say { left:12px; bottom:auto; top:52px; }
@media (prefers-reduced-motion:reduce) { .fish, .fish img, .bucket-holder.full { animation:none } }
@media (max-width:420px) { .fish { min-width:60px; } }

/* --- intro panel box (base-branch gap) -------------------------------------
 * engine2.css ships only the <=620px override for .intro-panel and never gives
 * the panel a box, so on a phone  is applied to a
 * STATIC block and drags the whole panel — Play button included — off the left
 * edge of the screen. Restoring the intended absolutely-positioned card here
 * keeps the fix inside this family instead of editing shared engine2.css.
 * Upstream engine2.css should carry this; flagged for the base branch. */
.intro-panel { position:absolute; z-index:5; right:4%; bottom:6%;
  width:min(420px, calc(100vw - 24px));
  background:rgba(255,251,245,.92); border-radius:22px; padding:18px 20px 16px;
  text-align:center; box-shadow:0 10px 30px rgba(30,42,74,.18); }
.intro-panel h1 { font-size:clamp(1.7rem,5.6vw,2.5rem); color:var(--navy); margin:0; }