/* 若鱼里 · 治愈彩蛋（喂鱼）样式 —— 独立模块，BUILD 2026-09-16
   命名空间统一 fb-，避免与 style.css 里的 fish-* 加载层冲突 */
.fb-root {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(120% 120% at 50% 0%, #e9f3ff 0%, #d6e8f5 55%, #c2dbe9 100%);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.fb-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .6s;
}
.fb-bg.on { opacity: .92; }

/* 遮挡层：与 .fb-bg 同一张「仅笔触/色块」的透明图，叠在小鱼之上。
   穿游途中由 JS 交替切换 .on：.on 时线条/色块遮住小鱼（鱼在笔触后），
   无 .on 时小鱼浮到笔触前（鱼遮线条）→ 「有时线条遮鱼，有时鱼遮线条」。
   只在穿游阶段显示，卡片阶段移除；pointer-events:none 不挡点击。 */
.fb-occluder {
  position: absolute; inset: 0; z-index: 2;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.fb-occluder.on { opacity: 1; }

/* ---- 原版定制鱼（分层尾鳍/背鳍/鳞片），命名空间 fb- ---- */
.fb-fishart { overflow: visible; }
.fb-body { animation: fbBreathe 3.4s ease-in-out infinite; transform-origin: 205px 168px; }
/* 鱼身分组：喂鱼后只鼓这一块（肚子下沉、背拱起），纵向为主 → 慢慢变圆而不只是变大 */
.fb-body-shape {
  transform-box: fill-box; transform-origin: center;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
@keyframes fbBreathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
.fb-tail { animation: fbTail 2.5s ease-in-out infinite; transform-origin: 286px 172px; }
@keyframes fbTail { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.fb-t1 { animation: fbStrand 2.0s ease-in-out infinite; transform-origin: 286px 172px; }
.fb-t2 { animation: fbStrand 2.3s ease-in-out infinite .15s; transform-origin: 286px 172px; }
.fb-t3 { animation: fbStrand 2.6s ease-in-out infinite .3s; transform-origin: 286px 172px; }
.fb-t4 { animation: fbStrand 2.1s ease-in-out infinite .1s; transform-origin: 286px 172px; }
.fb-t5 { animation: fbStrand 2.5s ease-in-out infinite .2s; transform-origin: 286px 172px; }
@keyframes fbStrand { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.fb-dorsal { animation: fbDorsal 2.5s ease-in-out infinite; transform-origin: 215px 120px; }
@keyframes fbDorsal { 0%,100% { transform: scaleY(1) rotate(-3deg); } 50% { transform: scaleY(1.08) rotate(3deg); } }
.fb-anal { animation: fbAnal 2.7s ease-in-out infinite; transform-origin: 240px 205px; }
@keyframes fbAnal { 0%,100% { transform: scaleY(1) rotate(2deg); } 50% { transform: scaleY(1.12) rotate(-2deg); } }
.fb-pec { animation: fbPec 1.9s ease-in-out infinite; transform-origin: 180px 180px; }
@keyframes fbPec { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(-3deg); } }
.fb-shine { animation: fbShine 3s ease-in-out infinite; }
@keyframes fbShine { 0%,100% { opacity: .95; } 50% { opacity: .55; } }

/* 穿游的小鱼：从右游到左（鱼头朝左，方向正确） */
.fb-swim {
  position: absolute; top: 40%; left: 108%; width: 150px; height: auto;
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
}
.fb-swim.go { animation: fbSwim 6.5s ease-in-out forwards; }
@keyframes fbSwim {
  0%   { left: 108%; transform: translateY(0); }
  25%  { transform: translateY(-26px); }
  50%  { transform: translateY(14px); }
  75%  { transform: translateY(-18px); }
  100% { left: -22%; transform: translateY(6px); }
}

/* ---- 彩蛋层 ---- */
.fb-egg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(40,46,60,.35); opacity: 0; visibility: hidden; transition: opacity .5s;
  z-index: 3;
}
.fb-egg.show { opacity: 1; visibility: visible; }

/* 「有一份鱼食哎」卡片 */
.fb-card {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%,-50%) scale(.4) rotate(-8deg);
  background: #fff; border-radius: 24px; padding: 26px 34px; text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.24); min-width: 230px; opacity: 0;
}
.fb-card.in { animation: fbCardIn .7s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes fbCardIn { to { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; } }
.fb-card .fb-cap { display: block; font-size: 11px; color: #B08C7D; letter-spacing: .14em; }
.fb-card .fb-title { display: block; margin-top: 9px; font-size: 19px; color: #5A4A42; font-weight: 600; }
.fb-card .fb-sub { display: block; margin-top: 7px; font-size: 12px; color: #A98C7D; }

/* 漂流瓶（装的是鱼食） */
.fb-bottle {
  position: relative; width: 160px; height: 160px; opacity: 0; cursor: pointer;
}
.fb-bottle.rise { animation: fbRise .9s ease-out forwards; }
.fb-bottle.bob { animation: fbBob 3.2s ease-in-out infinite; }
@keyframes fbRise { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fbBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.fb-bottle-svg { width: 100%; height: 100%; display: block; }
.fb-cork { transition: transform .5s, opacity .5s; }
.fb-bottle.open .fb-cork { transform: translateY(-22px) rotate(-12deg); opacity: 0; }
.fb-hint {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 13px; color: #fff; background: rgba(90,74,66,.72);
  padding: 5px 12px; border-radius: 99px; opacity: 0; transition: opacity .4s;
}
.fb-hint.show { opacity: 1; }

/* 自由的小鱼（从水面游进来） */
.fb-free {
  position: absolute; width: 104px; height: auto; left: 114%; top: 56%; opacity: 0;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.14));
}
.fb-free.in { animation: fbSwimIn 1.6s ease-out forwards; }
@keyframes fbSwimIn {
  0%   { left: 114%; opacity: 0; transform: translateY(0); }
  22%  { opacity: 1; }
  100% { left: 54%; opacity: 1; transform: translateY(-8px); }
}

/* 撒一把鱼食 */
.fb-food {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2C57E, #D9883A);
  box-shadow: 0 1px 3px rgba(0,0,0,.22); opacity: 0;
  animation: fbFall 1s ease-in forwards; pointer-events: none;
}
@keyframes fbFall {
  0%   { top: 34%; opacity: 0; transform: translateX(var(--dx,0)) scale(.5); }
  22%  { opacity: 1; }
  100% { top: 66%; opacity: 1; transform: translateX(calc(var(--dx,0) * 1.5)) scale(1); }
}

/* 谢礼泡泡 */
.fb-bubble {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%,-50%) scale(0);
  width: 230px; background: rgba(255,255,255,.97); border-radius: 22px;
  padding: 20px 18px; text-align: center; opacity: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,.2); font-size: 15px; line-height: 1.65; color: #5A4A42;
}
.fb-bubble.in { animation: fbPop .6s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes fbPop { to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.fb-bubble .fb-gift { display: block; font-size: 11px; color: #B08C7D; letter-spacing: .1em; margin-bottom: 9px; }
.fb-bubble.nudge .fb-gift { display: none; }
.fb-bubble .fb-art { font-size: 22px; line-height: 1.5; margin-bottom: 6px; white-space: pre; }
.fb-bubble .fb-dry { display: block; margin-top: 10px; font-size: 12px; color: #E8855A; }

.fb-tap {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #fff; opacity: 0; transition: opacity .5s; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.fb-tap.show { opacity: .9; }


/* ---- 写祝福（前置·必填） ---- */
.fb-write {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(28,38,44,.45); z-index: 6; padding: 20px; box-sizing: border-box;
}
.fb-write.show { display: flex; }
.fb-wcard {
  width: min(360px, 88vw); background: #FFFDF7; border-radius: 22px; padding: 24px 22px 20px;
  text-align: center; box-shadow: 0 18px 44px rgba(20,30,36,.3); box-sizing: border-box;
  transform: translateY(18px) scale(.96); opacity: 0;
  transition: transform .5s cubic-bezier(.2,1.2,.3,1), opacity .5s;
}
.fb-write.show .fb-wcard { transform: none; opacity: 1; }
.fb-write.sent .fb-wcard { transform: translateY(-46px) scale(.92); opacity: 0; transition: all .5s ease-in; }
.fb-wcard .fb-cap { display: block; font-size: 11px; color: #B08C7D; letter-spacing: .14em; }
.fb-wtitle { display: block; font-size: 16px; font-weight: 500; color: #4A3B33; line-height: 1.65; margin: 8px 0 14px; }
.fb-input {
  width: 100%; box-sizing: border-box; min-height: 78px; resize: none; outline: none;
  border: 1.5px solid #E4D6C8; border-radius: 13px; padding: 11px 13px;
  font-size: 15px; font-family: inherit; color: #4A3B33; background: #FFF9F0;
}
.fb-input:focus { border-color: #7FD1D8; }
.fb-wnote { display: block; font-size: 12px; color: #A08C7E; line-height: 1.65; margin: 11px 0 15px; }
.fb-send {
  border: 0; background: #F58B9B; color: #fff; font-size: 15px; padding: 10px 34px;
  border-radius: 99px; cursor: pointer; letter-spacing: .05em; transition: background .25s;
}
.fb-send:disabled { background: #DCD2C8; cursor: not-allowed; }

/* ---- 画友祝福：瓶里纸条 + 信纸态 ---- */
.fb-letter-in { display: none; }
.fb-bottle.blessing .fb-food-pile { display: none; }
.fb-bottle.blessing .fb-letter-in { display: block; }
.fb-bottle.away { animation: fbAway .5s ease-in forwards; }
@keyframes fbAway { to { opacity: 0; transform: translateY(22px) scale(.9); } }
.fb-card.letter { min-width: 240px; max-width: 330px; padding: 30px 26px; border-radius: 22px; }
.fb-card.letter .fb-title { font-size: 17px; font-weight: 400; line-height: 1.85; color: #5A4A42; }
.fb-card.letter .fb-sub { display: none; }

/* 变胖提示（每次喂鱼都圆一点） */
.fb-growth { display: block; margin-top: 4px; font-size: 12px; color: #E8855A; }
.fb-growth[hidden] { display: none; }

/* 同伴小鱼（鱼群一起来吃） */
.fb-companion {
  position: absolute; width: 62px; height: auto;
  opacity: 0; pointer-events: none; z-index: 2;
  transform: translateX(var(--dx, 0));
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.12));
}
.fb-companion.in { animation: fbCompanionIn 1s ease-out forwards; }
@keyframes fbCompanionIn {
  0%   { opacity: 0; transform: translateX(var(--dx, 0)); }
  26%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}