:root{font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;color:#263f65;background:#182b4f;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overscroll-behavior-y:contain}
body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% -20%,#709ad0 0,#253b65 48%,#142544)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:3px solid #ffaf58;outline-offset:3px}
button:disabled{cursor:not-allowed}
.is-hidden{display:none!important}
.lab-frame{width:min(100%,470px);min-height:100dvh;display:flex;flex-direction:column;
 background:linear-gradient(165deg,#dff5ff 0%,#d8ebfd 36%,#f7eafb 80%,#ffecf0 100%);
 box-shadow:0 0 50px #0d1a387a;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
 background:linear-gradient(120deg,#2c4886,#273d73 65%,#3f5792);
 padding:13px clamp(14px,4vw,22px);border-bottom:3px solid #ffdd9d;color:#fff}
.topbrand{display:flex;align-items:center;gap:8px;min-width:0}
.topbrand>div{display:flex;flex-direction:column;line-height:1.35}
.topbrand strong{font-size:17px;letter-spacing:-.04em;color:#ffedb4}
.topbrand small{font-size:10px;color:#d3e8ff;font-weight:800}
.brandpaw{font-size:24px}
.test-chip{flex-shrink:0;padding:5px 8px;background:#fae1a4;color:#77512d;border:2px solid #fff4cd;
 border-radius:20px;font-size:9px;letter-spacing:.04em;font-weight:1000}
#main{padding:14px clamp(14px,4vw,20px) 8px;flex:1}
.hero{position:relative;overflow:hidden;padding:17px 17px 19px;color:#fff;
 background:linear-gradient(130deg,#496fbb,#6259b4 63%,#9977ca);
 border:3px solid #fff;border-radius:21px;box-shadow:0 5px 0 #a7b6de,0 9px 22px #31456930}
.hero:before{content:"";position:absolute;width:154px;height:154px;right:-37px;bottom:-57px;
 border:25px solid #ffffff18;border-radius:50%}
.eyebrow{display:block;color:#ffe9b2;font-size:11px;font-weight:950;letter-spacing:.11em}
.hero h1{position:relative;margin:6px 0 6px;line-height:1.22;font-size:clamp(23px,6.3vw,29px);
 letter-spacing:-.06em;text-shadow:0 2px #333e84a9}
.hero p{position:relative;margin:0;font-size:12px;color:#e7eafe;font-weight:850}
.hero-decor{position:absolute;right:14px;top:39px;font-size:25px;transform:rotate(14deg);
 color:#fff3c0;text-shadow:0 4px #4359aa}
.wallet{margin:12px 0 15px;display:flex;align-items:center;justify-content:space-around;gap:4px;
 padding:9px 7px;border:2px solid #c7d9f1;border-radius:13px;background:#fffdf6dc}
.walletname{font-size:10px;white-space:nowrap;color:#55728c;font-weight:1000}
.money{display:flex;align-items:center;gap:2px;font-size:10px;white-space:nowrap;color:#4b6484;font-weight:900}
.money img{width:21px;height:21px;object-fit:contain}
.sectionhead{display:flex;align-items:center;justify-content:space-between;margin:0 1px 10px;gap:8px}
.sectionhead>div{display:flex;flex-direction:column;gap:2px}
.sectionhead strong{font-size:19px;font-weight:1000;color:#324c82}
.sectionhead small{font-size:11px;font-weight:750;color:#6a819d}
.pagebadge{padding:6px 10px;border-radius:10px;background:#edf1ff;border:2px solid #b9c7e7;
 color:#5971a5;font-size:12px;font-weight:950;white-space:nowrap}
.pet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.pet-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0;
 min-height:217px;padding:0;overflow:hidden;border:3px solid #fff;border-radius:18px;
 background:linear-gradient(165deg,#ffffff,#e5e8fd 80%);color:#395178;
 box-shadow:0 4px 0 #b7c4de,0 8px 15px #4963a326;transition:transform .14s,box-shadow .14s}
.pet-card:active{transform:translateY(3px);box-shadow:0 1px 0 #b7c4de}
.pet-card:disabled{cursor:default;opacity:.78}
.pet-card:disabled:active{transform:none;box-shadow:0 4px 0 #b7c4de,0 8px 15px #4963a326}
.pet-card:nth-child(2n){background:linear-gradient(165deg,#fffdfc,#fae8fa 90%)}
.pet-card:nth-child(3){background:linear-gradient(165deg,#fcfffd,#e0f5f3 88%)}
.pet-art{height:127px;position:relative;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(ellipse at 50% 60%,#f5faff 0,#dceaff 58%,#d7e0f8 100%)}
.pet-card:nth-child(2n) .pet-art{background:radial-gradient(ellipse at 50% 60%,#fff4ff,#edddf8 73%)}
.pet-card:nth-child(3) .pet-art{background:radial-gradient(ellipse at 50% 60%,#f6fff9,#d9ecf0 73%)}
.pet-number{position:absolute;left:9px;top:9px;color:#6b7fa8;font-size:10px;font-weight:1000}
.pet-locked{position:absolute;right:9px;top:8px;font-size:14px;color:#6175a0}
.silhouette{width:108px;height:110px;overflow:visible;filter:drop-shadow(0 8px 3px #333c6960);
 animation:pet-float 2.6s ease-in-out infinite;animation-delay:var(--delay,0s)}
.silhouette path{fill:#30364b;stroke:#414e70;stroke-width:2;stroke-linejoin:round}
.silhouette .shadow-eye{fill:#283043;stroke:none}
.silhouette .tail{transform-origin:117px 102px;animation:tail-wiggle 1.2s ease-in-out infinite}
.bee-preview .bee-wing{fill:#c5f4ff;stroke:#168de7;stroke-width:5;stroke-linejoin:round}
.bee-preview .bee-body{fill:#ffbb24;stroke:#40261d;stroke-width:5}
.bee-preview .bee-stripe{fill:#41281b;stroke:#40261d;stroke-width:2}
.bee-preview .bee-antenna{fill:none;stroke:#42271d;stroke-width:6;stroke-linecap:round}
.bee-preview .bee-tip{fill:#ffa217;stroke:#42271d;stroke-width:4}
.bee-preview .bee-face{fill:#ffcf38;stroke:#40261d;stroke-width:5}
.bee-preview .bee-highlight{fill:none;stroke:#ffefab;stroke-width:6;stroke-linecap:round}
.bee-preview .bee-eye{fill:#261b25}
.bee-preview .bee-cheek{fill:#ff8192}
.bee-preview .bee-mouth{fill:#bd3647;stroke:#40261d;stroke-width:2}
.bee-preview .bee-wings{transform-origin:80px 78px;animation:bee-wings-flap .26s ease-in-out infinite alternate}
@keyframes bee-wings-flap{from{transform:scaleX(1) scaleY(.92)}to{transform:scaleX(.84) scaleY(1.12)}}
@media (prefers-reduced-motion:reduce){.bee-preview .bee-wings{animation:none}}
.bee-rescue-scene{position:relative;width:195px;height:178px;margin:0 auto;overflow:hidden;font-size:0}
.rescue-bee{position:absolute;top:3px;left:71px;font-size:51px;z-index:4;animation:bee-idle-bob .35s infinite alternate}
.rescue-grabber{position:absolute;top:52px;left:95px;width:6px;height:72px;
  background:linear-gradient(90deg,#ab650d,#ffe181,#875309);z-index:3}
.rescue-grabber span{position:absolute;bottom:-6px;width:20px;height:22px;
  border:6px solid #ffc137;border-top:0;border-radius:0 0 20px 20px}
.rescue-grabber span:first-child{right:1px;border-right:0}
.rescue-grabber span:last-child{left:1px;border-left:0}
.rescue-dog{position:absolute;bottom:5px;left:77px;font-size:40px;z-index:2}
.rescue-stair{position:absolute;bottom:3px;left:0;width:100%;height:8px;
  background:#bfacd3;border-top:5px solid #fff7cc}
.bee-rescue-scene.playing .rescue-bee{animation:bee-pickup 1.4s ease-in-out 1 forwards}
.bee-rescue-scene.playing .rescue-grabber{animation:claw-pickup 1.4s ease-in-out 1 forwards}
.bee-rescue-scene.playing .rescue-dog{animation:dog-picked-up 1.4s ease-in-out 1 forwards}
@keyframes bee-idle-bob{from{transform:translateY(-2px)}to{transform:translateY(4px)}}
@keyframes bee-pickup{0%,35%{transform:translateY(0)}66%{transform:translateY(-22px)}
  85%,100%{transform:translateY(-3px)}}
@keyframes claw-pickup{0%{transform:scaleY(.3);transform-origin:top}35%{transform:scaleY(1)}
  70%{transform:scaleY(.57)}100%{transform:scaleY(.28)}}
@keyframes dog-picked-up{0%,32%{transform:translateY(0)}68%{transform:translateY(-43px)}
  100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.bee-rescue-scene.playing *{animation:none}}
.silhouette .ear-left{transform-origin:56px 47px;animation:ear-flop 2s ease-in-out infinite}
.silhouette .ear-right{transform-origin:104px 47px;animation:ear-flop 2s ease-in-out infinite reverse}
.pet-card[data-pet="1"] .silhouette{transform:rotate(-4deg)}
.pet-card[data-pet="3"] .silhouette{filter:drop-shadow(0 5px 6px #455979)}
.pet-card[data-pet="5"] .silhouette{--delay:-.6s}
.pet-card[data-pet="7"] .silhouette{--delay:-1.2s}
@keyframes pet-float{0%,100%{translate:0 2px}50%{translate:0 -5px}}
@keyframes tail-wiggle{0%,100%{rotate:-11deg}50%{rotate:16deg}}
@keyframes ear-flop{0%,100%{rotate:-6deg}50%{rotate:6deg}}
.pet-coming{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
 padding:4px 9px;border-radius:16px;background:#303e64e8;color:#fff4bd;
 font-size:9px;font-weight:1000;letter-spacing:.05em;white-space:nowrap}
.pet-card-info{display:flex;flex-direction:column;gap:4px;padding:10px 10px 11px;min-height:86px}
.pet-card-info strong{font-size:15px;font-weight:1000;line-height:1.2;letter-spacing:-.04em}
.pet-card-info small{font-size:10px;font-weight:850;color:#7184a4}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:6px}
.card-foot span{font-size:10px;font-weight:950;color:#715ca0}
.card-foot b{font-size:10px;color:#7e91aa}
.pages{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:16px 0 8px}
.pages>button{min-width:85px;min-height:38px;border:2px solid #fff;border-radius:12px;
 background:linear-gradient(#eff8ff,#c9dcf6);box-shadow:0 3px #afbfde;color:#405f92;font-size:13px;font-weight:950}
.pages>button:disabled{opacity:.4}
.page-dots{display:flex;align-items:center;gap:6px}
.page-dots span{width:8px;height:8px;border-radius:50%;background:#c2bad9}
.page-dots span.current{width:24px;border-radius:8px;background:#6f68b8}
.disclaimer{margin:13px 0 5px;text-align:center;font-size:11px;font-weight:950;color:#617796}
.catalog-footer{border-top:1px solid #d3dbea;padding:10px 5px;text-align:center;
 color:#7790a8;font-size:10px;font-weight:800}
.lab-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;
 padding:11px 17px;color:#d6e5fa;background:#263e70;font-size:10px;font-weight:850}
.details{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.detailnav{display:flex;justify-content:space-between;align-items:center;gap:4px}
.back{background:#ffffffc9;border:2px solid #b7d0e7;color:#3a6090;border-radius:10px;
 font-size:12px;font-weight:1000;min-height:35px;padding:5px 12px}
.detailcount{color:#677a9e;font-weight:1000;font-size:11px}
.coming-small{background:#394978;color:#fff1bd;border-radius:16px;padding:6px 8px;
 font-size:9px;font-weight:1000;white-space:nowrap}
.detail-intro h1{margin:0;font-size:27px;color:#304979;letter-spacing:-.06em}
.detail-intro p{margin:3px 0 0;font-size:12px;color:#7586a8;font-weight:800}
.stage{position:relative;min-height:224px;display:flex;flex-direction:column;justify-content:center;
 align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 63%,#f9f6ff 0,#e4dbff 50%,#ced8fa 100%);
 border:3px solid #fff;border-radius:20px;box-shadow:0 5px #b9c7e6}
.stage:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;
 border:3px dashed #a1a1e27d;transform:translateY(-6px)}
.stage-particles{position:absolute;top:24px;left:23px;color:#9989ca;font-size:29px}
.stage-particles span{position:absolute;left:260px;top:60px}
.pet-stage{width:100%;display:flex;justify-content:center;align-items:center;min-height:190px}
.pet-stage .silhouette{width:180px;height:180px;animation-duration:2.5s;transition:transform .3s}
.pet-stage.lv2 .silhouette{transform:scale(1.09) rotate(-3deg)}
.pet-stage.lv3 .silhouette{transform:scale(1.16) rotate(3deg);filter:drop-shadow(0 8px 8px #6862c098)}
.pet-stage .stage-evolution{position:absolute;font-size:27px;color:#a397d1;pointer-events:none;
 animation:glimmer 2.4s ease-in-out infinite}
.pet-stage .stage-evolution:first-of-type{left:22%;top:28%}
.pet-stage .stage-evolution:last-of-type{right:22%;bottom:30%;animation-delay:.7s}
@keyframes glimmer{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.75;transform:scale(1.15)}}
.stage-overlay{position:absolute;top:13px;right:13px;padding:5px 9px;border-radius:9px;
 color:#eaf1ff;background:#334778d6;font-size:10px;font-weight:1000}
.stage-tag{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
 border-radius:20px;background:#fffdf0df;color:#6656a7;border:1px solid #dbcef3;
 padding:6px 12px;font-size:11px;font-weight:1000;white-space:nowrap}
.levelselector{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:10px;border:2px solid #d2def0;background:#ffffffc9;border-radius:13px}
.levelselector>span{white-space:nowrap;font-size:12px;color:#546e92;font-weight:950}
.levelbuttons{display:flex;gap:6px;flex:1}
.levelbuttons button{flex:1;min-width:0;min-height:35px;padding:4px;border:2px solid #d7d9ee;
 border-radius:9px;background:#f4f4ff;color:#78799a;font-size:12px;font-weight:1000}
.levelbuttons button.selected{border-color:#fff8de;background:linear-gradient(#897dc8,#6457aa);
 color:white;box-shadow:0 3px #afb1d9}
.infopanel,.requirements{background:#fffdfaf0;border:2px solid #e4e6f3;border-radius:16px;
 padding:13px;display:flex;flex-direction:column;gap:9px}
.paneltop{display:flex;justify-content:space-between;align-items:center;gap:5px}
.paneltop strong{color:#395583;font-size:15px}
.paneltop span{padding:4px 8px;background:#e2f8eb;color:#4f947b;border-radius:14px;
 font-size:10px;font-weight:1000}
.paneltop .temporary{color:#936b5e;background:#fff2d8}
.abilityhero{display:flex;align-items:center;justify-content:space-between;gap:10px;
 background:#edf4ff;border-radius:12px;padding:10px 12px}
.abilityhero b{color:#5c55af;font-size:22px;letter-spacing:-.04em}
.abilityhero small{font-size:10px;font-weight:850;color:#717eaa}
.infopanel p{margin:0;font-size:12px;color:#637a9a;line-height:1.5}
.lvcomparison{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lvcomparison div{padding:8px 4px;text-align:center;background:#f2f3fb;border:2px solid #e2e7f5;
 border-radius:10px;display:flex;flex-direction:column;gap:4px}
.lvcomparison .active{background:#eae4ff;border-color:#9e91d6}
.lvcomparison small{font-size:10px;color:#7587a1;font-weight:950}
.lvcomparison b{font-size:13px;color:#52668d}
.requirehelp{margin:0;color:#7489a2;font-size:11px}
.cost-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cost-item{display:flex;flex-direction:column;align-items:center;gap:3px;
 background:#fff6e7;border:1.5px solid #ecd7af;border-radius:11px;padding:8px 3px}
.cost-item img{width:26px;height:26px;object-fit:contain}
.cost-item strong{font-size:15px;color:#8c603d}
.cost-item small{font-size:9px;color:#94785c;font-weight:850}
.cost-item em{font-size:9px;color:#8d8f9e;font-style:normal;font-weight:800}
.condition{display:flex;align-items:center;justify-content:space-between;
 font-size:11px;padding:9px 10px;border-radius:10px;background:#eff7ff;color:#536d90;font-weight:850}
.condition strong{color:#49619c}
.main-action,.preview-action{width:100%;min-height:47px;border-radius:12px;font-size:14px;font-weight:1000}
.main-action{background:linear-gradient(#d5def0,#c8d2e7);border:3px solid #fff;
 color:#667b9c;box-shadow:0 3px #b5bfd8}
.preview-action{background:linear-gradient(#ffdc8e,#ffa77c);border:3px solid #fff;
 color:#694d63;box-shadow:0 3px #ceabb0}
.detailnotice{margin:0!important;text-align:center;color:#8491a6;font-size:10px;line-height:1.5}
.play-test-link{display:flex;align-items:center;justify-content:center;text-decoration:none;
 background:linear-gradient(#c6f8de,#85d6be);border-color:#fff;color:#386b75}
.main-action:not(:disabled){cursor:pointer;background:linear-gradient(#ffdf9c,#f6b26a);
 color:#765135;box-shadow:0 3px #be9771}
body.embedded .topbar,body.embedded .lab-footer{display:none}
body.embedded{display:block;overflow-x:hidden;overflow-y:auto;
 background:linear-gradient(165deg,#dff5ff,#d8ebfd 48%,#f7eafb);
 overscroll-behavior:contain;scrollbar-width:thin}
body.embedded .lab-frame{height:auto;min-height:100dvh;
 box-shadow:none;overflow:visible}
body.embedded #main{padding:10px 8px}
body.embedded .catalog,.details{width:100%;min-width:0}
body.embedded .hero{padding:11px}
body.embedded .hero h1{font-size:20px}
body.embedded .wallet{margin:8px 0}
body.embedded .pet-card{min-height:177px}
body.embedded .pet-art{height:102px}
body.embedded .silhouette{height:89px;width:85px}
body.embedded .pet-card-info{padding:7px;min-height:70px}
.modal{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:18px;
 background:#13213ddc;backdrop-filter:blur(4px)}
.revivebox{width:min(100%,365px);display:flex;align-items:center;flex-direction:column;text-align:center;
 padding:23px 15px 15px;border-radius:22px;border:4px solid #fff1ba;
 background:linear-gradient(#fffdf9,#eaf6ff 85%);box-shadow:0 9px #3b4e7b,0 14px 40px #0b16398a;
 animation:dialog-in .18s ease-out}
@keyframes dialog-in{from{transform:translateY(14px) scale(.97);opacity:.35}to{opacity:1;transform:none}}
.modalpaw{font-size:49px;filter:drop-shadow(0 4px #f3c1cc)}
.modaleyebrow{color:#9b86bb;font-size:10px;font-weight:1000;letter-spacing:.09em}
.revivebox h2{font-size:21px;line-height:1.3;margin:8px 0;color:#354f80}
.revivebox p{font-size:12px;line-height:1.5;margin:0;color:#647c99}
.remaining{margin:13px 0 15px;padding:8px 14px;background:#fce5f0;
 border:2px solid #efc4d6;border-radius:12px;font-size:13px;font-weight:1000;color:#ba5f87}
.modalactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.modalactions button{min-height:47px;border-radius:11px;border:2px solid #fff;
 font-weight:1000;font-size:13px;color:#fff}
#noRevive{background:linear-gradient(#95a9be,#70819a)}
#yesRevive{background:linear-gradient(#ffb6d0,#df6d9e)}
.revivebox .demohint{margin-top:12px;font-size:10px;color:#98a4b3}
.modalclose{margin-top:14px;border:0;background:none;padding:8px;color:#4f6c91;
 font-size:12px;font-weight:950}
@media(max-width:360px){
 .pet-card{min-height:193px}
 .pet-art{height:115px}
 .pet-card-info{padding:9px 7px;min-height:78px}
 .pet-card-info strong{font-size:13px}
 .pet-card-info small{font-size:9px}
 .pet-grid{gap:8px}
 .hero{padding:13px}
 .wallet{gap:2px;padding:7px 2px}
 .money{font-size:9px}
 .money img{width:18px;height:18px}
 .levelselector>span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .silhouette,.silhouette .tail,.silhouette .ear-left,.silhouette .ear-right,
 .pet-stage .stage-evolution,.revivebox{animation:none!important}
}

/* Bee is purchasable; other pets remain coming soon. */
.pet-card[data-pet='1'] .pet-locked{display:none!important}