/* Group Pet skin v2: cozy premium 2026 pet game. Loaded after style.css. STYLE ONLY: never changes the fixed grid
   (header / stage / bubble / stats / dock heights), so the pet frame top edge and the bottom button row never move. */
@font-face{font-family:"GP Round";src:url(fonts/fredoka-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GP Round";src:url(fonts/baloo2-deva.woff2) format("woff2");font-weight:400 800;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;ascent-override:88%;descent-override:30%;line-gap-override:0%}
:root{
  --skin-top:#fff4e6; --skin-bot:#ffeef4; --ink:#3a2a1f; --ink-soft:#8a7465;
  --card: #ffffff; --text:#2d2230; --hint:#8b7f8f;
  --orange1:#ffbe55; --orange2:#ff8a2b; --lip:rgba(120,50,0,.28);
  --font: "GP Round", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Noto Sans Devanagari", sans-serif;
}
html[data-scheme=dark]{--skin-top:#171a2c; --skin-bot:#1f1830; --card:#2a2c45; --text:#f4f0ff; --hint:#a7a2c4}
html,body{background:linear-gradient(180deg,var(--skin-top) 0%,var(--skin-bot) 100%);background-attachment:fixed}
body,button,input{font-family:var(--font)}
body{color:var(--text)}

/* ---------- header chip ---------- */
#chip{background:var(--card);box-shadow:0 2px 0 rgba(0,0,0,.05),0 6px 16px rgba(120,60,20,.10);font-weight:600;font-size:17px;padding:0 12px 0 6px}
#chip-emoji{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:linear-gradient(180deg,#fff3d6,#ffd98a);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
#chip-stage{color:#fff;background:linear-gradient(180deg,#ff9e5e,#ff6f61);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.6px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.icon{background:var(--card);box-shadow:0 2px 0 rgba(0,0,0,.05),0 6px 16px rgba(120,60,20,.10);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.icon.press{transform:scale(.9)}

/* ---------- picker ---------- */
#pick-title{font-weight:700;font-size:26px;color:var(--text);letter-spacing:.2px}
#pick-title small{font-weight:500;font-size:14px}
.cell{border-radius:20px;border:2px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#fffaf0 0%,#ffe6c4 100%);
  box-shadow:inset 0 -4px 0 rgba(160,90,20,.12),0 4px 10px rgba(160,90,20,.10);
  animation:cellin .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 22ms);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cell:nth-child(4n+2){background:linear-gradient(180deg,#f3fff6,#c9f2d6)}
.cell:nth-child(4n+3){background:linear-gradient(180deg,#f2f8ff,#cfe3ff)}
.cell:nth-child(4n+4){background:linear-gradient(180deg,#fff3fb,#ffd3ea)}
.cell span{font-weight:600;font-size:12px;color:#3a2a1f;background:rgba(255,255,255,.85);border-radius:9px;padding:1px 6px;margin-bottom:4px}
.cell.press,.cell:active{transform:scale(.92)}
html[data-scheme=dark] .cell{border-color:rgba(255,255,255,.18)}
@keyframes cellin{0%{opacity:0;transform:scale(.6) translateY(10px)}100%{opacity:1;transform:none}}

/* ---------- the living scene inside the pet frame ---------- */
#frame{isolation:isolate;border-radius:30px;box-shadow:0 3px 0 rgba(0,0,0,.05),0 12px 28px rgba(120,60,20,.16)}
#frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),inset 0 -14px 28px rgba(0,0,0,.06);transition:box-shadow .6s}
#scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#scene>*{position:absolute}
#scene .sky{inset:0;background:linear-gradient(180deg,#7cc8ff 0%,#bfe6ff 55%,#eaf8ff 100%);transition:background 1s}
.tod-dawn #scene .sky{background:linear-gradient(180deg,#9fc2ff 0%,#ffcdbf 58%,#ffe8c4 100%)}
.tod-dusk #scene .sky{background:linear-gradient(180deg,#6b6bd8 0%,#ff9eaa 58%,#ffd39a 100%)}
.tod-night #scene .sky{background:linear-gradient(180deg,#141b45 0%,#2e3a7c 60%,#4f5aa0 100%)}
#scene .orb{width:56px;height:56px;right:12%;top:9%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff9c9,#ffd84a 70%);
  box-shadow:0 0 0 10px rgba(255,230,120,.25),0 0 40px 16px rgba(255,220,90,.45)}
.tod-dawn #scene .orb{top:30%;background:radial-gradient(circle at 40% 40%,#fff1d6,#ffad5e 70%)}
.tod-dusk #scene .orb{top:30%;right:16%;background:radial-gradient(circle at 40% 40%,#ffe3c2,#ff7d55 70%);box-shadow:0 0 40px 16px rgba(255,140,90,.45)}
.tod-night #scene .orb{width:40px;height:40px;background:radial-gradient(circle at 65% 35%,transparent 0 38%,#fff7d8 40%);background:#fff7d8;
  box-shadow:inset -10px -4px 0 #e6dfb8,0 0 30px 8px rgba(255,248,200,.25)}
#scene .stars{inset:0 0 45% 0;opacity:0;transition:opacity 1s}
.tod-night #scene .stars{opacity:1}
#scene .stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:twinkle 2.8s ease-in-out infinite}
#scene .stars i:nth-child(1){left:8%;top:12%}#scene .stars i:nth-child(2){left:22%;top:34%;animation-delay:.4s}
#scene .stars i:nth-child(3){left:35%;top:8%;animation-delay:.9s}#scene .stars i:nth-child(4){left:48%;top:26%;animation-delay:1.3s}
#scene .stars i:nth-child(5){left:60%;top:6%;animation-delay:.2s}#scene .stars i:nth-child(6){left:70%;top:40%;animation-delay:1.7s}
#scene .stars i:nth-child(7){left:90%;top:52%;animation-delay:.6s}#scene .stars i:nth-child(8){left:14%;top:60%;animation-delay:1.1s}
#scene .stars i:nth-child(9){left:40%;top:50%;animation-delay:2.1s}#scene .stars i:nth-child(10){left:82%;top:16%;animation-delay:1.5s}
#scene .cloud{height:22px;border-radius:22px;background:#fff;opacity:.92;will-change:transform;animation:drift 38s linear infinite}
#scene .cloud::before,#scene .cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
#scene .cloud::before{width:30px;height:30px;left:12px;top:-14px}
#scene .cloud::after{width:22px;height:22px;left:34px;top:-9px}
#scene .c1{width:72px;top:14%;left:-20%}
#scene .c2{width:56px;top:28%;left:-20%;animation-duration:52s;animation-delay:-30s;opacity:.8;transform:scale(.8)}
#scene .c3{width:64px;top:8%;left:-20%;animation-duration:64s;animation-delay:-12s;opacity:.7}
.tod-night #scene .cloud{opacity:.18}
.tod-dusk #scene .cloud{background:#ffe4ec}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(560px)}}
#scene .halo{left:50%;bottom:10%;width:86%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--g1) 0%,color-mix(in srgb,var(--g2) 55%,transparent) 55%,transparent 100%);opacity:.75;transition:background .6s}
.tod-night #scene .halo{opacity:.35}
#scene .hills{left:0;right:0;bottom:0;width:100%;height:40%}
#scene .h-back{fill:#a4e38f}#scene .h-front{fill:#6fcf73}#scene .h-lip{stroke:#b8f29d;stroke-width:3}
.tod-dawn #scene .h-back{fill:#b2dc9b}.tod-dawn #scene .h-front{fill:#7ac47c}
.tod-dusk #scene .h-back{fill:#9ab98d}.tod-dusk #scene .h-front{fill:#62a170}.tod-dusk #scene .h-lip{stroke:#a8d39b}
.tod-night #scene .h-back{fill:#3e6a74}.tod-night #scene .h-front{fill:#2c5560}.tod-night #scene .h-lip{stroke:#4c8086}
#scene .prop{bottom:16%}
#scene .tree{left:-3%;width:25%;bottom:21%}
#scene .trunk{fill:#a8703f}#scene .leaf{fill:#4fbf62}#scene .leaf2{fill:#5ccc6c}#scene .fruit{fill:#ff6b6b}
#scene .fence{right:-2%;width:28%;bottom:22%}
#scene .wood{fill:#f3d3a3;stroke:#c99a62;stroke-width:1.2}
#scene .bowl{right:9%;width:13%;bottom:7%}
#scene .dish{fill:#ff7b8f}#scene .dish-rim{fill:#ff9aab}#scene .food{fill:#c9874d}
.tod-night #scene .prop{filter:brightness(.62) saturate(.8)}
#scene .flowers{inset:auto 0 3% 0;height:18%}
#scene .flowers i{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffd84a;
  box-shadow:0 -6px 0 #ff8fb7,0 6px 0 #ff8fb7,-6px 0 0 #ff8fb7,6px 0 0 #ff8fb7;transform:scale(.7)}
#scene .flowers i:nth-child(1){left:7%;bottom:22%}#scene .flowers i:nth-child(2){left:18%;bottom:6%;box-shadow:0 -6px 0 #fff,0 6px 0 #fff,-6px 0 0 #fff,6px 0 0 #fff}
#scene .flowers i:nth-child(3){left:84%;bottom:44%;transform:scale(.55)}#scene .flowers i:nth-child(4){left:92%;bottom:8%;box-shadow:0 -6px 0 #9fd0ff,0 6px 0 #9fd0ff,-6px 0 0 #9fd0ff,6px 0 0 #9fd0ff}
#scene .flowers i:nth-child(5){left:28%;bottom:40%;transform:scale(.5)}
.tod-night #scene .flowers{opacity:.5}
#scene .rays{left:50%;top:56%;width:170%;aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.6);
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg 9deg,rgba(255,255,255,0) 9deg 24deg);
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%);
  transition:opacity .5s,transform .8s cubic-bezier(.3,1.4,.5,1)}
#frame.growing #scene .rays{opacity:1;transform:translate(-50%,-50%) scale(1);animation:rays 6s linear infinite}
@keyframes rays{to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}
#floor{background:rgba(30,70,20,.22)}
.tod-night #floor{background:rgba(0,0,0,.28)}
/* fireflies at night, sun-motes by day */
.sparkles i{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9)}
.tod-night .sparkles i{background:#fff59a;box-shadow:0 0 8px 2px rgba(255,236,120,.8)}
/* play party lights sit above the sky but below the pet */
#frame.party #scene .sky{filter:saturate(1.2)}

/* stage pill + banner */
#stage-pill{background:rgba(255,255,255,.92);backdrop-filter:none;font-weight:700}
#banner{font-family:var(--font);font-weight:700;font-size:44px;letter-spacing:1.5px;color:#ffe066;
  -webkit-text-stroke:7px #e2641c;paint-order:stroke fill;text-shadow:0 4px 0 #b84a10,0 10px 24px rgba(255,170,40,.7);z-index:7}

/* ---------- speech bubble ---------- */
#bubble::before{background:var(--card);box-shadow:-2px -2px 0 rgba(255,255,255,.0)}
#say{border-radius:22px;font-weight:600;font-size:17px;line-height:1.2;color:var(--text);
  box-shadow:0 3px 0 rgba(120,60,20,.07),0 8px 20px rgba(120,60,20,.08)}
#say.swap{animation:sayv2 .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes sayv2{0%{opacity:0;transform:translateY(8px) scale(.94)}100%{opacity:1;transform:none}}

/* ---------- counters + progress bar (Egg Inc vibes) ---------- */
#counts{height:24px;gap:8px}
#counts span:not(:empty){height:24px;padding:0 10px;border-radius:12px;display:inline-flex;align-items:center;gap:4px;background:var(--card);
  font-weight:700;font-size:15px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06),0 2px 6px rgba(120,60,20,.08);color:var(--text)}
#counts span:empty{display:none}
#counts span.tickup{animation:tickup .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tickup{0%{transform:scale(1)}35%{transform:scale(1.22);background:#fff3c4}100%{transform:scale(1)}}
#bar{height:20px;border-radius:10px;background:rgba(120,80,40,.14);box-shadow:inset 0 2px 3px rgba(0,0,0,.10)}
html[data-scheme=dark] #bar{background:rgba(255,255,255,.12)}
#bar-fill{border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#7ef0a8 0%,#2fc477 100%);
  box-shadow:inset 0 -3px 0 rgba(0,90,40,.18),0 0 10px rgba(60,220,130,.45);min-width:0}
#bar-fill::before{content:"";position:absolute;left:4px;right:4px;top:2px;height:5px;border-radius:4px;background:rgba(255,255,255,.45)}
#bar-fill::after{content:"";position:absolute;top:0;bottom:0;left:-30px;right:-30px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 9px,rgba(255,255,255,0) 9px 18px);
  animation:stripes 1s linear infinite;will-change:transform}
@keyframes stripes{from{transform:skewX(-30deg) translateX(0)}to{transform:skewX(-30deg) translateX(18px)}}
#bar.full #bar-fill{background:linear-gradient(180deg,#ffe27a 0%,#ffb21e 100%);box-shadow:inset 0 -3px 0 rgba(150,80,0,.2),0 0 12px rgba(255,190,40,.6)}
#bar.glint::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:glint .7s ease-out forwards}
@keyframes glint{from{background-position:130% 0}to{background-position:-30% 0}}
#bar-label{font-weight:700;font-size:12.5px;color:#2d2230;text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 0 #fff;z-index:1}

/* ---------- chunky buttons ---------- */
.btn{border-radius:19px;font-weight:600;font-size:18px;letter-spacing:.2px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.10),inset 0 2px 0 rgba(255,255,255,.7),0 3px 8px rgba(120,60,20,.12);
  transition:transform .32s cubic-bezier(.3,1.7,.5,1),box-shadow .15s,filter .15s}
.btn.press{transform:scale(.94,.9) translateY(2px);transition-duration:.08s;filter:brightness(.97);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.10),inset 0 2px 0 rgba(255,255,255,.5),0 1px 3px rgba(120,60,20,.12)}
.btn.primary{background:linear-gradient(180deg,var(--orange1) 0%,var(--orange2) 100%);color:#fff;text-shadow:0 1px 0 rgba(150,60,0,.35);
  box-shadow:inset 0 -4px 0 var(--lip),inset 0 2px 0 rgba(255,255,255,.45),0 4px 12px rgba(255,120,30,.32)}
.btn.green{background:linear-gradient(180deg,#5ee39a 0%,#22b363 100%);text-shadow:0 1px 0 rgba(0,90,40,.35);
  box-shadow:inset 0 -4px 0 rgba(0,80,30,.28),inset 0 2px 0 rgba(255,255,255,.45),0 4px 12px rgba(40,180,100,.28)}
.btn.pink{background:linear-gradient(180deg,#ff9cc9 0%,#f0569a 100%);text-shadow:0 1px 0 rgba(140,0,60,.3);
  box-shadow:inset 0 -4px 0 rgba(120,0,50,.25),inset 0 2px 0 rgba(255,255,255,.45),0 4px 12px rgba(240,80,150,.28)}
.btn.gold{background:linear-gradient(180deg,#ffe27a 0%,#ffb21e 100%);color:#4a2e00;
  box-shadow:inset 0 -4px 0 rgba(150,80,0,.28),inset 0 2px 0 rgba(255,255,255,.6),0 4px 12px rgba(255,170,30,.32)}
.btn.soft{background:var(--card);color:var(--text)}
.btn.primary.press,.btn.green.press,.btn.pink.press,.btn.gold.press{box-shadow:inset 0 -1px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.35)}
.btn .cool{background:rgba(255,255,255,.35)}
.btn .lbl{display:inline-block;max-width:100%}
.btn.pulse{box-shadow:inset 0 -4px 0 var(--lip),inset 0 2px 0 rgba(255,255,255,.45),0 6px 18px rgba(255,120,30,.45)}
.btn.pulse::before{border-radius:19px}
.btn.new::after{border-radius:21px}
.btn.link{font-weight:600;font-size:15px;color:#e0651f;box-shadow:none;text-shadow:none;background:none}
html[data-scheme=dark] .btn.link{color:#ffb070}
#cap{font-weight:500;color:var(--hint)}

/* ---------- Teen climax: golden postcard frame, slow sunburst, glowing Add button ---------- */
#app.teen #frame::after{box-shadow:inset 0 0 0 4px #ffd45c,inset 0 0 0 7px rgba(255,255,255,.8),inset 0 -14px 28px rgba(0,0,0,.05)}
#app.teen #scene .rays{opacity:.55;transform:translate(-50%,-50%) scale(1);animation:rays 24s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,150,.6) 0deg 9deg,rgba(255,255,255,0) 9deg 24deg)}
#app.teen [data-id="add"]{background:linear-gradient(180deg,#ffc35a 0%,#ff7a3d 55%,#ff5f6d 100%)}
#app.teen [data-id="add"]::after{content:"";position:absolute;inset:-3px;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,215,90,.9),0 0 18px 4px rgba(255,190,60,.55);animation:addglow 1.8s ease-in-out infinite}
@keyframes addglow{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- sheet / toast ---------- */
#sheet{border-radius:28px 28px 0 0}
#sheet h2{font-weight:700;font-size:22px}
#sheet input{border-radius:16px}
#toast{font-weight:600;border-radius:20px;background:rgba(45,34,48,.92)}
#net{font-weight:600}

/* ---------- particles ---------- */
#juice{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.jp{position:fixed;left:0;top:0;font-size:20px;line-height:1;will-change:transform,opacity;opacity:0}
.jp.conf{width:8px;height:12px;border-radius:2px}
.jring{position:fixed;width:120px;height:120px;border-radius:50%;border:6px solid rgba(255,230,120,.95);box-shadow:0 0 24px rgba(255,210,80,.8);pointer-events:none}

/* ---------- reduced motion: keep it calm, keep it pretty ---------- */
@media (prefers-reduced-motion: reduce){
  #scene .cloud,#scene .stars i,.sparkles i,#bar-fill::after,#app.teen #scene .rays,#frame.growing #scene .rays,
  #app.teen [data-id="add"]::after,.cell,#pet,.btn.pulse::before{animation:none!important}
  .btn,.cell,.icon{transition:none}
  #bar.glint::after{display:none}
}
html[data-scheme=dark] #bar-label{color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.6)}

/* ---------- sheets: always fully on screen, always above the game, every line wraps ---------- */
#sheet-back{z-index:40}
#sheet{z-index:41;top:auto;
  max-height:calc(var(--tg-viewport-height, 100vh) - var(--safe-top) - var(--ctop) - 12px);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
#sheet .grab{position:sticky;top:0}
#sheet h2,#sheet p,#sheet .note,#sheet .msg,#sheet .sub{overflow-wrap:anywhere;white-space:normal}
.steps{flex-direction:column;flex-wrap:nowrap;gap:2px}
.steps li{white-space:normal;overflow-wrap:anywhere}
#sheet .btn{white-space:normal;height:auto;min-height:var(--row);padding:8px 14px;text-align:center;line-height:1.15}
#sheet .inrow .btn{min-height:50px;height:50px;white-space:nowrap}
#sheet .inrow input{min-width:0}
.best li>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast{z-index:50;max-width:calc(100vw - 32px);white-space:normal;text-align:center}
#net{z-index:45}