/* ═══════════ 組間休息「火仔小任務」（rest-pet.js） ═══════════
   火仔同道具一律 2px 一粒像素（畫框 82×120 → 164×240） */
body.v2 .modal__panel--rest { overflow-y: auto; }
body.v2 .modal__panel--rest .rest-sheet { gap: 12px; justify-content: flex-start; }
body.v2 .modal__panel--rest #timerDisplay { font-size: 96px; }
.v2-rest-say { display: none; }

.fp { display: flex; flex-direction: column; gap: 10px; }
.fp-stage { position: relative; height: 200px; }
.fp-ground { position: absolute; left: -20px; right: -20px; bottom: 10px; height: 2px; background: #16131d; }
.fp-shadow {
  position: absolute; left: 50%; bottom: 2px; width: 150px; height: 16px; margin-left: -75px; border-radius: 50%; opacity: .35;
  background-image: repeating-conic-gradient(#16131d 0 25%, transparent 0 50%); background-size: 4px 4px;
}
.fp-mebtn { position: absolute; left: 50%; top: 12px; width: 164px; height: 240px; margin-left: -82px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-hop, .fp-body { position: absolute; inset: 0; display: block; transform-origin: 50% 74%; }
.fp-spr { position: absolute; inset: 0; display: block; background-repeat: no-repeat; image-rendering: pixelated; background-position-x: 0; }
.fp-spr[hidden] { display: none; }
.fp-spr--me { background-image: url(./images/v2/me-rest.png); background-size: 400% 400%; animation: fpB4 .5s steps(4) infinite; }
.fp-face--eat { background-image: url(./images/v2/faces-eat-rest.png); background-size: 200% 600%; animation: fpB2 .5s steps(2) infinite; }
.fp-face--pet { background-image: url(./images/v2/faces-pet-rest.png); background-size: 200% 400%; animation: fpB2 .5s steps(2) infinite; }
@keyframes fpB4 { to { background-position-x: 133.333%; } }
@keyframes fpB2 { to { background-position-x: 200%; } }

.fp-body--idle { animation: fpBob 1.6s steps(4) infinite; }
.fp-body--in { animation: fpIn 4s steps(8) both; }
.fp-body--out { animation: fpOut 4s steps(8) both; }
@keyframes fpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fpIn { from { transform: scale(1, 1); } to { transform: scale(1.2, 1.13) translateY(-6px); } }
@keyframes fpOut { from { transform: scale(1.2, 1.13) translateY(-6px); } to { transform: scale(1, 1); } }
.fp-hopA { animation: fpHopA .5s cubic-bezier(.3, 1.3, .5, 1); }
.fp-hopB { animation: fpHopB .5s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes fpHopA { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(2px) scale(1.12, .86); } 55% { transform: translateY(-22px) scale(.92, 1.1); } 80% { transform: translateY(0) scale(1.06, .94); } }
@keyframes fpHopB { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(2px) scale(1.12, .86); } 55% { transform: translateY(-22px) scale(.92, 1.1); } 80% { transform: translateY(0) scale(1.06, .94); } }

/* 灰、杯、煙、閃 */
.fp-ash {
  position: absolute; right: 4px; bottom: 11px; width: 80px; height: 36px; padding: 0; border: 0; cursor: pointer;
  background: url(./images/v2/ash-rest.png) 0 0 / 300% 100% no-repeat; image-rendering: pixelated;
}
.fp-ash[hidden] { display: none; }
.fp-cupwrap { position: absolute; left: 50%; top: 122px; margin-left: -12px; }
.fp-cup { display: block; width: 36px; height: 36px; background: url(./images/v2/cup-rest.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: fpSip 1.8s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes fpSip { 0% { transform: translate(70px, 40px) rotate(0); } 40% { transform: translate(14px, -6px) rotate(-30deg); } 70% { transform: translate(14px, -6px) rotate(-55deg); } 100% { transform: translate(70px, 40px) rotate(0); } }
.fp-puffs { position: absolute; left: calc(50% + 10px); top: 142px; }
.fp-puffs i { position: absolute; display: block; width: 20px; height: 16px; opacity: 0; background: url(./images/v2/puff-rest.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; animation: fpPf1 1.3s steps(6) infinite; }
.fp-puffs i:nth-child(2) { animation-name: fpPf2; animation-delay: .4s; }
.fp-puffs i:nth-child(3) { animation-name: fpPf3; animation-delay: .8s; }
@keyframes fpPf1 { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(64px, 26px) scale(1.3); opacity: 0; } }
@keyframes fpPf2 { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(78px, -6px) scale(1.1); opacity: 0; } }
@keyframes fpPf3 { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(56px, 54px) scale(1.2); opacity: 0; } }
.fp-wave {
  position: absolute; left: 50%; top: 142px; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 30px, #16131d 30px 32px, transparent 32px 46px);
  -webkit-mask-image: radial-gradient(circle, transparent 58px, #000 70px, #000 130px, transparent 165px); mask-image: radial-gradient(circle, transparent 58px, #000 70px, #000 130px, transparent 165px);
}
.fp-wave--in { animation: fpWIn 4s steps(8) both; }
.fp-wave--out { animation: fpWOut 4s steps(8) both; }
@keyframes fpWIn { from { transform: scale(1.2); opacity: .15; } to { transform: scale(.8); opacity: .5; } }
@keyframes fpWOut { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.25); opacity: 0; } }
.fp-sparks { position: absolute; right: 16px; bottom: 30px; width: 70px; height: 40px; }
.fp-sparks i { position: absolute; width: 12px; height: 12px; background: #fffdf7; border: 2px solid #16131d; animation: fpSpark .5s steps(4) both; }
.fp-sparks i:nth-child(1) { left: 4px; top: 10px; } .fp-sparks i:nth-child(2) { left: 40px; top: 0; animation-delay: .12s; } .fp-sparks i:nth-child(3) { left: 22px; top: 26px; animation-delay: .24s; }
@keyframes fpSpark { 0% { transform: scale(0) rotate(0); } 50% { transform: scale(1.2) rotate(45deg); } 100% { transform: scale(0) rotate(90deg); } }
.fp-plus {
  position: absolute; left: 50%; top: 40px; margin-left: -150px; padding: 2px 10px; font-size: 13px; font-weight: 900; white-space: nowrap;
  background: #ffd23f; border: 2.5px solid #16131d; border-radius: 999px; animation: fpPlus 1.1s steps(8) both;
}
@keyframes fpPlus { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-42px); opacity: 0; } }
.fp-unlock {
  position: absolute; left: 50%; top: 70px; width: 190px; margin-left: -95px; z-index: 8; padding: 6px 10px; text-align: center;
  font-size: 15px; font-weight: 900; color: #e0341a; border: 3px solid #e0341a; border-radius: 8px; background: rgba(255, 253, 247, .92);
  animation: fcStamp .45s cubic-bezier(.2, 1.2, .4, 1) both;
}

/* 對白 */
.fp-say {
  position: absolute; left: calc(50% + 44px); top: 4px; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 -2px 0 #16131d) drop-shadow(0 2px 0 #16131d) drop-shadow(-2px 0 0 #16131d) drop-shadow(2px 0 0 #16131d) drop-shadow(3px 3px 0 #16131d);
}
.fp-say .v2-pxbub { white-space: nowrap; max-width: none; }
.fp-sayA { transform-origin: 0 100%; animation: v2pxpopA .3s steps(4) both; }
.fp-sayB { transform-origin: 0 100%; animation: v2pxpopB .3s steps(4) both; }

/* 親密度 */
.fp-bond {
  position: absolute; left: 0; top: 0; z-index: 4; width: 128px; padding: 7px 9px; display: flex; flex-direction: column; gap: 4px;
  background: #fffdf7; border: 2.5px solid #16131d; border-radius: 10px; box-shadow: 3px 3px 0 #16131d;
}
.fp-bond__head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; }
.fp-bond__pips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.fp-bond__pips i { height: 10px; border: 2px solid #16131d; border-radius: 3px; background: #fffdf7; }
.fp-bond__pips i.on { background: #ff6b35; }
.fp-bond__next { font-size: 10px; }
.fp-bump { animation: fpBump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fpBump { 40% { transform: scale(1.12) rotate(-3deg); } }

/* 任務卡 */
.fp-task {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #16131d;
  background: #fffdf7; border: 2.5px solid #16131d; border-radius: 12px; box-shadow: 4px 4px 0 #16131d;
  animation: fpTask .45s cubic-bezier(.2, 1.3, .4, 1) .25s both; transition: opacity .3s;
}
@keyframes fpTask { from { transform: translateY(30px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fp-task--done { background: #ffd23f; }
.fp-task--locked:not(.fp-task--done) { opacity: .45; pointer-events: none; }
.fp-task__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-task__txt b { font-size: 16px; font-weight: 900; line-height: 1.3; }
.fp-task__hint { font-size: 12px; color: #3b3542; }
.fp-task__btn {
  flex-shrink: 0; width: 84px; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 900 14px/1 "Noto Sans HK", sans-serif; color: #16131d; background: #ff6b35; border: 2.5px solid #16131d; border-radius: 12px; box-shadow: 3px 3px 0 #16131d; cursor: pointer;
}
.fp-task__btn .v2-mono { font-size: 10px; }
.fp-task__btn:active { transform: translate(3px, 3px); box-shadow: none; }
.fp-task__prog { flex-shrink: 0; padding: 6px 12px; font-weight: 700; background: #fffdf7; border: 2.5px solid #16131d; border-radius: 999px; box-shadow: 3px 3px 0 #16131d; }
.fp-task__stamp {
  flex-shrink: 0; padding: 4px 12px; font-size: 18px; font-weight: 900; color: #e0341a; border: 3px solid #e0341a; border-radius: 8px;
  background: rgba(255, 253, 247, .8); animation: fcStamp .45s cubic-bezier(.2, 1.2, .4, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .fp *, .fp-task { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}