.hero img,.pet-whole img,.final-pet img,.swimmer img,.fade-pet img{mix-blend-mode:normal!important;background:transparent!important}.hero img{animation:mascotBreathe 2.5s ease-in-out infinite;transform-origin:50% 88%}.pet-whole{animation:mascotFloat 2.2s ease-in-out infinite}.pet-whole:after{content:"";position:absolute;width:70px;height:8px;border-radius:50%;background:#ac658221;bottom:16px;animation:shadowBreathe 2.2s ease-in-out infinite}.pet-stage.happy .pet-whole{animation:mascotDance .48s ease 2}.pet-stage.sick .pet-whole{animation:mascotCough .18s linear 4}@keyframes mascotBreathe{0%,100%{transform:translateY(3px) scale(1)}50%{transform:translateY(-6px) scale(1.018)}}@keyframes mascotFloat{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes shadowBreathe{50%{transform:scaleX(.78);opacity:.45}}@keyframes mascotDance{25%{transform:translateY(-13px) rotate(-5deg)}50%{transform:translateY(-4px) rotate(5deg)}75%{transform:translateY(-13px) rotate(-3deg)}}@keyframes mascotCough{25%{transform:translateX(-7px) rotate(-2deg) scale(.98)}75%{transform:translateX(7px) rotate(2deg) scale(.98)}}
.duel-meters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.counter{position:relative;border-radius:14px;padding:8px 9px;background:#fff1f4;border:1px solid #f2c9d3}.counter.good{background:#effbf4;border-color:#c3ead3}.counter>b{display:block;font-size:12px}.counter>span{display:flex;gap:3px;margin-top:5px}.counter i{width:12px;height:7px;border-radius:5px;background:#eadde1}.counter.good i.on{background:#56bd83}.counter.bad i.on{background:#e64f75}.counter strong{position:absolute;right:7px;top:7px;font-size:11px}.pet-whole{width:250px;height:270px;display:grid;place-items:center;z-index:1;transition:transform .35s,opacity .35s,filter .35s}.pet-whole img{width:250px;height:270px;object-fit:contain;mix-blend-mode:multiply}.pet-stage.happy .pet-whole{animation:happy .48s ease 2;filter:drop-shadow(0 0 16px #ffcc55)}.pet-stage.sick .pet-whole{animation:sick .18s linear 4;filter:grayscale(.65)}.harm-1 .pet-whole{transform:scale(.95);opacity:.92}.harm-2 .pet-whole{transform:scale(.88);opacity:.84}.harm-3 .pet-whole{transform:scale(.80);opacity:.73}.harm-4 .pet-whole{transform:scale(.69);opacity:.58}.harm-5 .pet-whole{transform:scale(.55);opacity:.38}.pet-stage.vanishing .pet-whole{animation:vanishPet 1s ease forwards}@keyframes vanishPet{to{transform:scale(.08) rotate(12deg);opacity:0;filter:grayscale(1) blur(4px)}}.outcome{text-align:center;overflow:auto}.outcome h2{font-size:30px;color:#e44378;margin:12px 0}.outcome h3{font-size:22px;line-height:1.45;margin:10px 0}.outcome>p{font-size:15px;line-height:1.65;color:#795764;font-weight:650}.fertilize{height:350px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding-right:28px}.ovum{width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 37% 32%,#fff7c9 0 8%,#ffd45f 38%,#f2a52d 75%,#df8422 100%);border:13px solid #ffe7a8;box-shadow:0 0 0 8px #f3be5973,0 13px 30px #b0672630;display:grid;place-items:center;font-size:42px}.swimmer{position:absolute;left:-80px;width:180px;height:190px;animation:swimToEgg 2.2s ease-in-out forwards;z-index:2}.swimmer img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}@keyframes swimToEgg{0%{transform:translateX(0) scale(.55) rotate(-8deg)}70%{transform:translateX(230px) scale(.42) rotate(5deg)}100%{transform:translateX(300px) scale(.15);opacity:0}}.fade-pet{height:350px;position:relative;display:grid;place-items:center}.fade-pet img{width:280px;height:310px;object-fit:contain;mix-blend-mode:multiply;animation:finalDisappear 2.3s ease forwards}.fade-pet span{position:absolute;font-size:55px;animation:puff 2s ease forwards}@keyframes finalDisappear{0%{opacity:1;transform:scale(1)}65%{opacity:.35;transform:scale(.48)}100%{opacity:0;transform:scale(.05) rotate(15deg);filter:grayscale(1) blur(5px)}}@keyframes puff{0%,65%{opacity:0}100%{opacity:1;transform:translate(30px,-25px)}}.danger{background:#ffe0e7!important;color:#b41f4b!important}
.ending{background:linear-gradient(145deg,#fff1f6,#fff8df);border:1px solid #f2c9d6;border-radius:18px;padding:13px 14px;margin-top:12px}.ending b{display:block;color:#b72958;font-size:18px;line-height:1.45}.ending span{display:block;color:#75515e;font-size:12px;line-height:1.55;margin-top:6px;font-weight:700}
/* Progressive feeding: enlarge the mascot's own lower body, never overlay a drawn egg */
.body-expander{position:absolute;inset:0;z-index:2;background:url('/games/super-sperm/assets/little-sperm.jpeg') center/250px 270px no-repeat;mix-blend-mode:multiply;clip-path:polygon(18% 57%,82% 57%,88% 100%,12% 100%);transform:scaleX(1);transform-origin:50% 77%;opacity:0;transition:transform .42s cubic-bezier(.2,1.35,.45,1),opacity .2s}.belly-1 .body-expander{opacity:1;transform:scaleX(1.06)}.belly-2 .body-expander{opacity:1;transform:scaleX(1.13)}.belly-3 .body-expander{opacity:1;transform:scaleX(1.22)}.belly-4 .body-expander{opacity:1;transform:scaleX(1.32)}.belly-5 .body-expander{opacity:1;transform:scaleX(1.43)}.belly-6 .body-expander{opacity:1;transform:scaleX(1.55)}.belly-1 .pet-body>img,.belly-2 .pet-body>img,.belly-3 .pet-body>img,.belly-4 .pet-body>img,.belly-5 .pet-body>img,.belly-6 .pet-body>img{clip-path:polygon(0 0,100% 0,100% 61%,0 61%)}
.pet-body{width:250px;height:270px;position:relative;display:grid;place-items:center;z-index:1;transition:.35s}.pet-body img{position:relative}.growing-belly{position:absolute;z-index:2;left:50%;top:69%;width:105px;height:78px;transform:translate(-50%,-50%) scale(0);border-radius:52% 52% 48% 48%;background:radial-gradient(circle at 38% 25%,#fff 0 15%,#fffafb 43%,#f1e8eb 100%);box-shadow:inset -8px -10px 18px #dbcdd277,0 8px 14px #9d53631b;opacity:0;transition:transform .42s cubic-bezier(.2,1.45,.45,1),opacity .2s}.belly-1 .growing-belly{opacity:.96;transform:translate(-50%,-50%) scale(1.02)}.belly-2 .growing-belly{opacity:.97;transform:translate(-50%,-50%) scale(1.16)}.belly-3 .growing-belly{opacity:.98;transform:translate(-50%,-50%) scale(1.32)}.belly-4 .growing-belly{opacity:.99;transform:translate(-50%,-50%) scale(1.48)}.belly-5 .growing-belly{opacity:1;transform:translate(-50%,-50%) scale(1.65)}.belly-6 .growing-belly{opacity:1;transform:translate(-50%,-50%) scale(1.84)}.belly-5 .pet-body,.belly-6 .pet-body{transform:translateY(7px)}.pet-stage.happy>img,.pet-stage.sick>img{animation:none}.pet-stage.happy .pet-body{animation:happy .48s ease 2;filter:drop-shadow(0 0 16px #ffcc55)}.pet-stage.sick .pet-body{animation:sick .18s linear 4;filter:grayscale(.65) saturate(.7)}.flying-food{position:absolute;z-index:6;font-size:43px;left:10%;bottom:8%;animation:feedFly .52s cubic-bezier(.2,.8,.4,1) forwards;filter:drop-shadow(0 5px 6px #6b26363b)}@keyframes feedFly{0%{transform:translate(0,0) scale(1) rotate(-10deg)}75%{opacity:1;transform:translate(148px,-135px) scale(.72) rotate(15deg)}100%{opacity:0;transform:translate(166px,-151px) scale(.18) rotate(25deg)}}.tray button{border-radius:50% 50% 42% 42%!important;min-height:78px;box-shadow:0 5px 12px #65233912;transition:.18s}.tray button:hover{transform:translateY(-4px)}.tray button:disabled{opacity:.55}.tray small{font-weight:800}
:root{--pink:#ef4f83;--deep:#4d1429}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:var(--deep);background:#f9dce7}button{font:inherit}.world{min-height:100svh;display:grid;place-items:center;padding:18px 10px;background:radial-gradient(circle at 12% 12%,#fff 0 4%,transparent 24%),linear-gradient(145deg,#fff7fa,#f7cddd 58%,#ffe9f0)}.game-card{width:min(100%,480px);height:min(920px,calc(100svh - 24px));min-height:700px;background:#fffdfef2;border:1px solid white;border-radius:34px;box-shadow:0 26px 80px #7c244431;overflow:hidden;display:flex;flex-direction:column}.panel{flex:1;min-height:0;padding:22px 25px 15px;animation:enter .35s ease}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.brand{font-weight:900;color:var(--pink);font-size:17px}.brand small{display:block;font-size:10px;letter-spacing:.09em}.kicker{display:inline-block;background:#ffe4ed;color:#bd2e5d;border-radius:99px;padding:8px 13px;font-weight:900;font-size:15px}.cover .kicker{margin-top:22px}.cover h1{font-size:49px;line-height:1.04;margin:12px 0 10px;letter-spacing:-.06em}.cover h1 em{font-style:normal;color:var(--pink)}.cover>p{font-size:18px;line-height:1.65;color:#7f5362;font-weight:650;margin:0}.hero{height:318px;display:grid;place-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;background:#ffeaf1}.hero img,.pet-stage img,.final-pet img{mix-blend-mode:multiply;object-fit:contain;position:relative}.hero img{height:300px;width:300px;z-index:1}.spark{position:absolute;font-size:30px;z-index:2;animation:float 1.8s ease-in-out infinite}.s-a{left:35px;top:50px}.s-b{right:30px;bottom:50px}@keyframes float{50%{transform:translateY(-10px) rotate(8deg)}}.start{width:100%;border:0;border-radius:17px;background:linear-gradient(135deg,var(--pink),#ff87aa);color:#fff;padding:16px 20px;font-size:19px;font-weight:900;box-shadow:0 12px 26px #ef4f8241;cursor:pointer}.start b{float:right}.notice{display:block;text-align:center;color:#9a7884;font-size:12px;margin-top:11px}.play{display:flex;flex-direction:column;padding-bottom:8px}.play header{display:flex;justify-content:space-between;align-items:center}.play header>div b,.play header>div small{display:block}.play header>div b{font-size:19px}.play header>div small{font-size:13px;color:#9a7180;margin-top:2px}.play header>strong{font-size:31px;color:var(--pink)}.play header>strong small{font-size:12px}.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.meter{display:flex;align-items:center;gap:6px;background:#fff2f6;border-radius:13px;padding:8px}.meter>span{font-size:19px}.meter>div{flex:1;min-width:0}.meter b{display:flex;justify-content:space-between;font-size:12px}.meter b i{font-style:normal;color:var(--pink)}.bar{height:7px;background:#f3d9e2;border-radius:9px;overflow:hidden;margin-top:4px}.bar u{display:block;height:100%;background:linear-gradient(90deg,#ff9bbb,var(--pink));border-radius:9px;transition:width .3s}.pet-stage{height:287px;position:relative;display:grid;place-items:center;overflow:hidden}.pet-stage:before{content:"";position:absolute;width:245px;height:245px;background:#ffeef3;border-radius:50%}.pet-stage img{width:250px;height:270px;z-index:1;transition:.2s}.pet-stage.happy img{animation:happy .48s ease 2;filter:drop-shadow(0 0 16px #ffcc55)}.pet-stage.sick img{animation:sick .18s linear 4;filter:grayscale(.65) saturate(.7)}@keyframes happy{50%{transform:translateY(-14px) rotate(3deg)}}@keyframes sick{25%{transform:translateX(-7px) rotate(-2deg)}75%{transform:translateX(7px) rotate(2deg)}}.speech{position:absolute;right:5px;top:18px;max-width:170px;background:white;border:2px solid #f5b4c7;border-radius:17px 17px 4px 17px;padding:9px 11px;font-size:13px;font-weight:800;z-index:3;box-shadow:0 7px 18px #92334e1c}.reaction{position:absolute;left:22px;top:62px;font-size:36px;z-index:3}.smoke{position:absolute;right:50px;bottom:76px;font-size:34px;z-index:4;animation:smoke .7s ease forwards}@keyframes smoke{to{transform:translate(35px,-45px);opacity:0}}.play h2{text-align:center;font-size:16px;margin:0 0 8px}.tray{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;overflow:auto;padding-bottom:4px}.tray button{border:2px solid #dff1e9;border-radius:13px;background:#f5fffa;padding:7px 3px;display:grid;place-items:center;cursor:pointer;min-height:75px}.tray button.bad{border-color:#f4d5dd;background:#fff5f7}.tray button:active{transform:scale(.92)}.tray i{font-style:normal;font-size:26px}.tray b{font-size:10px;white-space:nowrap}.tray small{font-size:9px;color:#38966e}.tray .bad small{color:#ce4269}.result{text-align:center;overflow:auto}.result-icon{font-size:47px}.result .kicker{margin:5px 0}.result h2{font-size:31px;color:var(--pink);margin:7px}.final-pet{height:280px;position:relative;display:grid;place-items:center}.final-pet:before{content:"";position:absolute;width:235px;height:235px;border-radius:50%;background:#fff0f4}.final-pet img{height:270px;width:260px}.final-pet strong{position:absolute;right:25px;bottom:38px;background:var(--pink);color:white;border:6px solid white;border-radius:50%;width:78px;height:78px;display:grid;place-content:center;font-size:28px}.final-pet strong small{font-size:10px}.verdict{font-size:16px;line-height:1.6;font-weight:700;color:#795563}.result-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tip{display:flex;text-align:left;gap:9px;background:#fff3d6;border-radius:15px;padding:11px;margin:12px 0}.tip b{white-space:nowrap;color:#ad6a13}.tip span{font-size:13px;line-height:1.5}footer{min-height:55px;border-top:1px solid #f3d7df;background:#fff9fb;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;color:var(--pink);font-size:14px}footer em{font-style:normal;color:#5f414b;font-weight:800}@media(max-width:480px){.world{padding:0}.game-card{height:100svh;min-height:650px;border-radius:0;width:100%}.panel{padding-left:18px;padding-right:18px}.cover h1{font-size:45px}.hero{height:285px}.hero img{height:275px}.pet-stage{height:260px}.pet-stage img{height:250px}.tray{grid-template-columns:repeat(5,1fr)}.tray b{font-size:9px}.result .final-pet{height:255px}.final-pet img{height:245px}}@media(max-height:760px){.cover .kicker{margin-top:10px}.cover h1{font-size:39px}.cover>p{font-size:15px}.hero{height:230px}.hero img{height:225px}.pet-stage{height:210px}.pet-stage img{height:205px}.tray button{min-height:66px}.result .final-pet{height:210px}.final-pet img{height:205px}.tip{margin:7px 0}}

/* Keep the mascot as one transparent animated character, never a white image card. */
.hero img,
.pet-whole img,
.final-pet img,
.swimmer img,
.fade-pet img {
  mix-blend-mode: normal !important;
  background: transparent !important;
}

.pet-whole {
  position: relative;
  animation: mascotFloat 2.2s ease-in-out infinite !important;
  transform-origin: 50% 88%;
}

.pet-stage.happy .pet-whole {
  animation: mascotDance .48s ease 2 !important;
}

.pet-stage.sick .pet-whole {
  animation: mascotCough .18s linear 4 !important;
}

.pet-stage.happy > img,
.pet-stage.sick > img {
  animation: none !important;
}

/* Feeding sequence: open the mascot's own mouth and pull the item inside. */
.eating-mouth {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 49.5%;
  width: 16px;
  height: 18px;
  transform: translate(-50%, -50%) scaleY(.15);
  transform-origin: 50% 25%;
  overflow: hidden;
  border: 2px solid #642238;
  border-radius: 48% 48% 54% 54%;
  background: linear-gradient(#6a243b 0 48%, #ed7899 49% 100%);
  box-shadow: 0 1px 1px #fff7 inset, 0 1px 2px #7e435044;
  animation: openMouth .48s ease both;
}

.eating-mouth i {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 11px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50% 50% 35% 35%;
  background: #f6a1b8;
}

.pet-whole.is-eating {
  animation: eatingNod .48s ease both !important;
}

.flying-food {
  animation: feedIntoMouth .48s cubic-bezier(.25,.8,.35,1) forwards !important;
}

@keyframes openMouth {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.75,.08); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(.88,.42); }
  48%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1,1); }
}

@keyframes eatingNod {
  0%, 100% { transform: translateY(1px) rotate(0); }
  35% { transform: translateY(5px) rotate(-1.5deg); }
  72% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes feedIntoMouth {
  0% { transform: translate(0,0) scale(1) rotate(-10deg); }
  72% { opacity: 1; transform: translate(188px,-91px) scale(.58) rotate(12deg); }
  100% { opacity: 0; transform: translate(193px,-96px) scale(.05) rotate(20deg); }
}

.pet-whole.good-feed::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 72%;
  top: 28%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, #ffd86a99 22%, #ff5c9c6b 48%, transparent 72%);
  box-shadow: 0 0 12px #fff, 0 0 25px #ff78a8, 0 0 38px #ffd76a;
  pointer-events: none;
  animation: logoEnergy .48s ease both;
}

@keyframes logoEnergy {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(8deg); }
  70% { opacity: .9; transform: translate(-50%, -50%) scale(.88) rotate(-5deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

/* The ending uses an anatomical sperm cell; the mascot does not fly into the egg. */
.fertilize .swimmer {
  width: 220px;
  height: 90px;
  display: grid;
  place-items: center;
}

.real-sperm {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 7px 8px #9f52633a);
}

.sperm-tail {
  transform-box: fill-box;
  transform-origin: left center;
  animation: tailSwish .22s ease-in-out infinite alternate;
}

.ovum {
  position: relative;
}

.ovum::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 8px solid #fff7b8;
  box-shadow: 0 0 22px #fff, 0 0 48px #ffd555;
  opacity: 0;
  animation: fertilizedFlash .8s ease 2.05s both;
}

.ovum > .fertilize-spark {
  animation: fertilizedSpark .75s ease 2.08s both;
}

@keyframes tailSwish {
  from { transform: skewY(-5deg) scaleY(.88); }
  to { transform: skewY(5deg) scaleY(1.12); }
}

@keyframes fertilizedFlash {
  0% { opacity: 0; transform: scale(.55); }
  45% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes fertilizedSpark {
  0% { opacity: 0; transform: scale(.2) rotate(-20deg); }
  55% { opacity: 1; transform: scale(1.7) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.fertilize .swimmer {
  animation: spermEnterEgg 2.35s ease-in-out forwards;
}

.fertilize-spark {
  position: relative;
  z-index: 3;
  animation: fertilizedSpark .75s ease 2.08s both !important;
}

.baby-pop {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 53%;
  width: 82px;
  height: 106px;
  opacity: 0;
  filter: drop-shadow(0 7px 8px #a85a663d);
  animation: babyArrives 1s cubic-bezier(.2,1.35,.4,1) 2.65s forwards !important;
}

.baby-head {
  position:absolute;left:13px;top:0;width:56px;height:52px;border:3px solid #d987a7;
  border-radius:48% 48% 46% 46%;background:radial-gradient(circle at 36% 28%,#fff 0 9%,#fff5f8 10% 55%,#f5c7d5 100%);
  box-shadow:inset 0 -5px 10px #e9aab95c;
}

.baby-head::before {
  content:"";position:absolute;left:21px;top:-9px;width:17px;height:15px;border:4px solid #d987a7;
  border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-22deg);
}

.baby-head::after {
  content:"••";position:absolute;left:12px;top:17px;color:#3c1724;font:900 16px/1 sans-serif;letter-spacing:9px;
}

.baby-swaddle {
  position:absolute;left:8px;top:43px;width:66px;height:61px;border:3px solid #d987a7;border-radius:46% 46% 55% 55%;
  background:linear-gradient(145deg,#fff6fa 0 23%,#f2b4cb 24% 49%,#fff2f7 50% 70%,#e89fba 71%);transform:rotate(2deg);
}

.supp-note {
  display: block;
  margin: 6px 0 0;
  text-align: center;
  color: #8e6674;
  font-size: 11px;
  font-weight: 700;
}

@keyframes spermEnterEgg {
  0% { transform: translateX(0) scale(.68); }
  68% { transform: translateX(218px) scale(.55); }
  84% { transform: translateX(240px) scale(.3); opacity: 1; }
  100% { transform: translateX(255px) scale(.04); opacity: 0; }
}

@keyframes babyArrives {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(.1) rotate(-8deg); }
  55% { opacity: 1; transform: translate(-50%,-70%) scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: translate(-50%,-62%) scale(1) rotate(0); }
}

.ssfc-game-nav{position:relative;z-index:30;display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:#fff5f9;color:#842746;font:700 17px/1.5 system-ui}.ssfc-game-nav a{color:inherit;text-decoration:none}.ssfc-game-note{padding:12px 18px;background:#fff5f9;color:#71384e;font:16px/1.7 system-ui;text-align:center}