/* Group Pet Mini App. One static frame: header / stage / bubble / stats / dock never move or resize; only their contents animate. */
:root{
  --bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --accent: var(--tg-theme-button-color, #2f80ed);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  --link: var(--tg-theme-link-color, #2f80ed);
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --safe-bot: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --ctop: var(--tg-content-safe-area-inset-top, 0px);
  --vh: var(--tg-viewport-stable-height, 100vh);
  --g1:#e9fbf3; --g2:#b8f0d8;
  --row: 54px; --gap: 8px;
  --dock: calc(3 * var(--row) + 2 * var(--gap) + 10px + max(14px, var(--safe-bot)));
  --spring: cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font:16px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Text","Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;
  overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
#app{position:fixed;left:0;right:0;top:0;height:var(--vh);display:grid;
  grid-template-rows: calc(48px + var(--safe-top) + var(--ctop)) 1fr var(--dock);overflow:hidden}
#app.booting .screen,#app.booting #dock{opacity:0}

/* header */
#top{display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 6px;padding-top:calc(var(--safe-top) + var(--ctop))}
#chip{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 8px;border-radius:18px;background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:700;font-size:16px;max-width:72vw;white-space:nowrap;overflow:hidden}
#chip-emoji{font-size:21px}
#chip-name{overflow:hidden;text-overflow:ellipsis}
#chip-stage{font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--accent);text-transform:uppercase}
#chip-stage:empty{display:none}
.icon{width:40px;height:36px;border-radius:18px;background:var(--card);font-size:19px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.icon:active{transform:scale(.92)}

/* screens share the middle row */
.screen{grid-row:2;grid-column:1;min-height:0;transition:opacity .25s ease, transform .35s var(--spring)}
.screen.off{opacity:0;pointer-events:none;transform:scale(.97)}

/* picker */
#screen-pick{display:flex;flex-direction:column;padding:4px 12px 0}
#pick-title{text-align:center;font-weight:800;font-size:22px;height:52px;display:flex;flex-direction:column;justify-content:center}
#pick-title small{display:block;font-weight:500;font-size:14px;color:var(--hint);margin-top:2px}
#grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:7px;padding-bottom:6px}
.cell{position:relative;border-radius:18px;background:linear-gradient(160deg,#f4fffa,#c9f3df);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transition:transform .15s}
.cell img{position:absolute;inset:-2% 8% 18% 8%;width:84%;height:80%;object-fit:contain;pointer-events:none}
.cell span{position:relative;font-size:12px;font-weight:700;color:#1f3b30;padding-bottom:5px;white-space:nowrap}
.cell:active{transform:scale(.93)}
.cell.chosen{animation:chosen .5s var(--spring) forwards;z-index:2}
@keyframes chosen{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1.06);box-shadow:0 0 0 3px var(--accent)}}

/* game */
#screen-game{display:grid;grid-template-rows:1fr 84px 62px;padding:0 12px;gap:0}
#stage{min-height:0;padding-top:2px}
#frame{position:relative;height:100%;border-radius:30px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%, #ffffff 0%, var(--g1) 42%, var(--g2) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 6px 22px rgba(0,0,0,.08);transition:background .6s}
#floor{position:absolute;left:22%;right:22%;bottom:7%;height:7%;border-radius:50%;background:rgba(0,0,0,.10);filter:blur(4px);
  transition:transform .3s}
#petwrap{position:absolute;left:50%;bottom:3%;width:min(94%, 100cqh, 400px);aspect-ratio:1;transform:translateX(-50%);
  transform-origin:50% 90%}
#frame{container-type:size}
#petwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#pet{animation:idle 2.6s ease-in-out infinite;transform-origin:50% 92%}
#pet-next{opacity:0}
#clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s;pointer-events:none}
#clip.on{opacity:1}
@keyframes idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1.5%) scale(1.012,.99)}}
.sparkles i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.8;animation:twinkle 3s ease-in-out infinite}
.sparkles i:nth-child(1){left:12%;top:14%}.sparkles i:nth-child(2){left:84%;top:22%;animation-delay:.6s}
.sparkles i:nth-child(3){left:20%;top:52%;animation-delay:1.2s;width:4px;height:4px}.sparkles i:nth-child(4){left:76%;top:58%;animation-delay:1.8s}
.sparkles i:nth-child(5){left:50%;top:8%;animation-delay:2.2s;width:4px;height:4px}.sparkles i:nth-child(6){left:90%;top:76%;animation-delay:.3s;width:5px;height:5px}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.95;transform:scale(1.15)}}
#stage-pill{position:absolute;top:12px;right:12px;height:28px;padding:0 11px;border-radius:14px;background:rgba(255,255,255,.85);
  color:#2a3b33;font-weight:800;font-size:13px;display:flex;align-items:center;gap:4px;backdrop-filter:blur(6px)}
#stage-pill:empty{display:none}
#banner{position:absolute;left:0;right:0;top:16%;text-align:center;font-weight:900;font-size:38px;letter-spacing:1px;color:#fff;
  -webkit-text-stroke:2px rgba(0,0,0,.12);text-shadow:0 3px 0 rgba(0,0,0,.14),0 0 24px rgba(255,214,0,.8);opacity:0;pointer-events:none}
#banner.show{animation:banner 1.6s var(--spring) forwards}
@keyframes banner{0%{opacity:0;transform:translateY(-30px) scale(.5)}18%{opacity:1;transform:translateY(0) scale(1.12)}
  30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px) scale(1)}}
#fx{position:absolute;inset:0;pointer-events:none}
.fx{position:absolute;will-change:transform,opacity}

/* bubble: fixed 2 lines */
#bubble{position:relative;display:flex;align-items:center;padding-top:12px}
#bubble::before{content:"";position:absolute;top:5px;left:50%;width:16px;height:16px;background:var(--card);transform:translateX(-50%) rotate(45deg);border-radius:3px}
#say{position:relative;width:100%;height:64px;border-radius:20px;background:var(--card);display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:700;font-size:17px;line-height:1.22;padding:0 14px;white-space:pre-line;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
#say.swap{animation:say .32s var(--spring)}
@keyframes say{0%{opacity:0;transform:translateY(6px) scale(.97)}100%{opacity:1;transform:none}}

/* stats: fixed 2 lines */
#stats{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 4px}
#counts{display:flex;align-items:center;gap:14px;font-weight:800;font-size:15px;height:20px}
#counts span{font-variant-numeric:tabular-nums}
#c-next{margin-left:auto;color:var(--hint);font-weight:700;font-size:14px}
#bar{position:relative;height:18px;border-radius:9px;background:rgba(127,127,127,.18);overflow:hidden}
#bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:linear-gradient(90deg,#5ee39a,#2fbf71);
  transition:width .55s var(--spring)}
#bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
.bump{animation:bump .35s var(--spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* dock: 3 fixed rows, filled bottom-up; a missing button leaves NO placeholder */
#dock{display:grid;grid-template-rows:repeat(3,var(--row));gap:var(--gap);padding:10px 12px max(14px, var(--safe-bot))}
.row{display:flex;gap:var(--gap)}
.btn{flex:1;position:relative;height:var(--row);border-radius:17px;font-weight:800;font-size:17px;display:flex;align-items:center;
  justify-content:center;gap:6px;background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 -2px 0 rgba(0,0,0,.05);
  overflow:hidden;transition:transform .12s ease, filter .12s;white-space:nowrap}
.btn:active{transform:scale(.95)}
.btn.primary{background:var(--accent);color:var(--accent-text)}
.btn.gold{background:linear-gradient(180deg,#ffd75e,#ffb21e);color:#3b2a00}
.btn.green{background:linear-gradient(180deg,#43d17f,#22a55b);color:#fff}
.btn.pink{background:linear-gradient(180deg,#ff8fc2,#f25c9b);color:#fff}
.btn.soft{background:var(--card)}
.btn .cool{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.28)}
.btn.cooling .cool{animation:cool var(--cd,3s) linear forwards}
@keyframes cool{from{width:100%}to{width:0}}
.btn.in{animation:btnin .55s var(--spring) both}
@keyframes btnin{0%{opacity:0;transform:scale(.4) translateY(14px)}100%{opacity:1;transform:none}}
.btn.new::after{content:"";position:absolute;inset:-2px;border-radius:19px;box-shadow:0 0 0 0 rgba(255,214,0,.85);animation:ring 1.6s ease-out 2}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,200,0,.8)}100%{box-shadow:0 0 0 14px rgba(255,200,0,0)}}
.btn.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.btn.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.btn small{font-size:13px;font-weight:700;opacity:.85}

/* sheet */
#sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
#sheet{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-radius:24px 24px 0 0;padding:8px 18px calc(18px + var(--safe-bot));
  transform:translateY(105%);transition:transform .38s var(--spring);box-shadow:0 -8px 30px rgba(0,0,0,.15)}
#app.sheet-open #sheet{transform:none}
#app.sheet-open #sheet-back{opacity:1;pointer-events:auto}
.grab{width:40px;height:5px;border-radius:3px;background:rgba(127,127,127,.35);margin:0 auto 12px}
#sheet h2{margin:0 0 6px;font-size:21px}
#sheet p{margin:0 0 12px;color:var(--hint);font-size:15px;line-height:1.35}
#sheet .btn{width:100%;margin:8px 0;flex:none}
#sheet .sub{display:block;font-size:13px;color:var(--hint);text-align:center;margin:-2px 0 6px}
#sheet .inrow{display:flex;gap:8px;margin:8px 0}
#sheet input{flex:1;height:50px;border-radius:14px;border:1.5px solid rgba(127,127,127,.3);background:var(--bg);color:var(--text);
  font-size:15px;padding:0 12px;-webkit-user-select:text;user-select:text;outline:none}
#sheet input:focus{border-color:var(--accent)}
#sheet .inrow .btn{width:auto;padding:0 18px;margin:0;height:50px}
#sheet .note{font-size:13px;color:var(--hint);margin:6px 0 0}
#sheet .msg{min-height:20px;font-size:14px;font-weight:700;margin:4px 0}
.best li{display:flex;align-items:center;gap:10px;height:44px;font-weight:700;font-size:16px;border-bottom:1px solid rgba(127,127,127,.15)}
.best ol{list-style:none;margin:0 0 6px;padding:0}
.best .n{width:28px;font-size:20px;text-align:center}
.best .p{margin-left:auto;color:var(--hint)}
.best .me{color:var(--accent)}

/* toast / net */
#toast{position:fixed;left:50%;top:calc(58px + var(--safe-top) + var(--ctop));transform:translate(-50%,-12px);background:rgba(20,20,20,.86);color:#fff;
  padding:9px 16px;border-radius:18px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:all .25s var(--spring);white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
#net{position:fixed;right:14px;top:calc(12px + var(--safe-top) + var(--ctop));height:26px;padding:0 10px;border-radius:13px;background:#ffcc00;color:#3b2a00;
  font-size:12px;font-weight:800;display:flex;align-items:center;opacity:0;transition:opacity .3s;pointer-events:none}
#net.show{opacity:1}

/* play: disco lights */
#frame.party{background:radial-gradient(120% 90% at 50% 18%, #fff 0%, #ffe3f3 45%, #d9c6ff 100%)}
#frame .lights{position:absolute;inset:-20%;background:conic-gradient(from 0deg, rgba(255,80,160,.25), rgba(80,180,255,.25), rgba(255,220,60,.25), rgba(120,255,160,.25), rgba(255,80,160,.25));
  animation:spin 3s linear infinite;mix-blend-mode:multiply}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-height:640px){:root{--row:48px}#screen-game{grid-template-rows:1fr 76px 56px}#say{height:58px;font-size:16px}}
#screen-pick{grid-row:2 / 4}
#app[data-screen=pick] #dock{visibility:hidden;pointer-events:none}
#app[data-screen=pick] #grid{padding-bottom:max(12px, var(--safe-bot))}
#top{grid-row:1;grid-column:1}
#dock{grid-row:3;grid-column:1}
.cell img{inset:0 0 14% 0;width:100%;height:86%;transform:scale(1.75);transform-origin:50% 66%}
.btn.two{flex-direction:column;gap:1px;line-height:1.1}
.btn .subl{font-size:11px;font-weight:600;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94%}
.btn .lbl{white-space:nowrap}
.btn.pulse{animation:none;box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn.pulse::before{content:"";position:absolute;inset:0;border-radius:17px;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:250% 100%;animation:shine 2.4s ease-in-out infinite}
@keyframes shine{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
#app{grid-template-columns:minmax(0,1fr)}
.row{min-width:0}.btn{min-width:0}
/* dock v2: bottom-anchored stack inside a fixed-height dock; the bottom Feed/Play row never moves */
#dock{display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
#dock .row{height:var(--row);flex:none}
#dock .row:empty{display:none}
#cap{font-size:12px;line-height:1.3;color:var(--hint);text-align:center;font-weight:600;padding:0 10px;margin:-2px 0 1px}
#cap:empty{display:none}
#cap.in{animation:btnin .55s var(--spring) both}
#dock .row:has(.link){height:28px}
.btn.link{background:none;box-shadow:none;color:var(--link);font-size:15px;font-weight:700;height:28px}
/* reconnecting: gentle, never dead. Pill under the header; the bubble softly breathes */
#net{left:50%;right:auto;transform:translateX(-50%);top:calc(56px + var(--safe-top) + var(--ctop));height:28px;padding:0 14px;border-radius:14px;
  background:rgba(255,204,0,.95);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:5}
#app.reconnecting #say{animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.72}}
#net{white-space:nowrap}

.steps{margin:2px 0 10px;padding:0;list-style:none;counter-reset:st;display:flex;flex-wrap:wrap;gap:4px 2px;font-size:14px;font-weight:700;line-height:1.5}
.steps li{counter-increment:st;white-space:nowrap}
.steps li:not(:last-child)::after{content:" →";opacity:.55;font-weight:600}
#sheet [hidden]{display:none!important}
#sheet p.small{font-size:13px;opacity:.75;margin-top:4px}