/* ============================================================
   Tamagotcha.pet — 口袋奶油镇
   mobile-first · toy-grade polish · no external assets
   ============================================================ */

/* ---------- 1. design tokens ---------- */
:root{
  --cream:#FFF7EA; --card:#FFFFFF; --ink:#463A5E; --muted:#8B7FA8;
  --berry:#FF8FAB; --grape:#9B8AFB; --butter:#FFD66B; --mint:#7EDBBF; --sky:#8FCBFF;
  --line:#F0E7D8; --cream-deep:#F5EBD6;
  /* per-room accent, overwritten by JS from catalog.accent */
  --acc:#9B8AFB; --acc-soft:#E4DEFC; --acc-deep:#7E6BD8; --acc-edge:#6553B8;
  --r-card:24px; --r-stage:32px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Nunito','Tama Round',sans-serif;
  --frame:430px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --shadow-card:0 2px 0 #00000008,0 12px 28px -12px #463A5E24;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--cream);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.6;min-height:100dvh;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
}
img{user-select:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
button:disabled{cursor:default}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--acc-deep);outline-offset:3px;border-radius:8px}
svg.ic{display:block;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{font-weight:900;line-height:1.2;letter-spacing:.2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
::selection{background:var(--butter)}

/* ---------- 2. toy buttons ---------- */
.btn{
  min-height:54px;border-radius:999px;padding:0 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:900;font-size:16px;letter-spacing:.5px;text-decoration:none;
  background:var(--acc-deep);color:#fff;
  box-shadow:0 4px 0 var(--acc-edge),0 10px 20px -10px var(--acc-edge);
  transition:transform .09s ease,box-shadow .09s ease,filter .2s;
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--acc-edge),0 6px 12px -8px var(--acc-edge)}
.btn:disabled{filter:grayscale(.55) brightness(1.04);opacity:.65;box-shadow:0 4px 0 #C9BFD2}
.btn .ic{width:20px;height:20px}
.btn.soft{background:var(--acc-soft);color:var(--acc-edge);box-shadow:0 4px 0 color-mix(in srgb,var(--acc-edge) 45%,#fff)}
.btn.soft:active{box-shadow:0 2px 0 color-mix(in srgb,var(--acc-edge) 45%,#fff)}
.btn.ghost{background:#fff;color:var(--muted);box-shadow:0 4px 0 #E7DDEC}
.btn.block{width:100%}
.btn.small{min-height:48px;font-size:14px;padding:0 18px}
.icon-btn{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 3px 0 #EBE2D2;color:var(--muted);
  transition:transform .09s,box-shadow .09s;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #EBE2D2}
.icon-btn .ic{width:22px;height:22px}
.linklike{color:var(--acc-deep);font-weight:800;text-decoration:underline;text-underline-offset:4px}

/* ---------- 3. app frame & boot ---------- */
#app{max-width:var(--frame);min-height:100dvh;margin:0 auto;position:relative;background:var(--cream)}
.boot{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px}
.boot-egg{font-size:54px;animation:egg-wobble 1.6s var(--spring) infinite}
.boot p{color:var(--muted);font-size:13px}
@keyframes egg-wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-6px)}}
.brand{display:inline-flex;align-items:baseline;font-weight:900;letter-spacing:-1px;transform:rotate(-2deg);line-height:1}
.brand b{color:var(--grape);font-size:28px}
.brand strong{color:var(--berry);font-size:28px}
.brand em{font-size:14px;letter-spacing:-.3px;color:var(--muted);font-style:normal;margin-left:2px}

/* ---------- 4. shared bits ---------- */
.eyebrow{color:var(--acc-deep);font-size:11px;letter-spacing:2.5px;font-weight:900;text-transform:uppercase}
.pop{animation:pop-in .5s var(--spring) both}
@keyframes pop-in{from{opacity:0;transform:scale(.7) translateY(14px)}to{opacity:1;transform:none}}
.stagger>*{animation:pop-in .5s var(--spring) both}
.stagger>*:nth-child(2){animation-delay:.06s}.stagger>*:nth-child(3){animation-delay:.12s}
.stagger>*:nth-child(4){animation-delay:.18s}.stagger>*:nth-child(5){animation-delay:.24s}
.stagger>*:nth-child(6){animation-delay:.3s}.stagger>*:nth-child(7){animation-delay:.36s}
.stagger>*:nth-child(8){animation-delay:.42s}

#toast{
  position:fixed;z-index:120;top:calc(12px + var(--sat));left:0;right:0;margin-inline:auto;
  width:fit-content;max-width:min(86%,calc(var(--frame) - 40px));
  background:#463A5Ef2;color:#FFF7EA;border-radius:999px;padding:12px 20px;
  font-size:13px;font-weight:700;text-align:center;box-shadow:0 10px 30px -8px #463A5E66;
  opacity:0;transform:translateY(-14px) scale(.92);pointer-events:none;
  transition:opacity .22s,transform .22s var(--spring);
}
#toast.show{opacity:1;transform:none}

.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:13px;font-weight:800;color:var(--muted);margin:0 6px 7px}
.field input{
  width:100%;height:56px;border:2px solid var(--line);border-radius:20px;
  background:#fff;padding:0 18px;font-size:16px;font-weight:700;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;min-width:0;
}
.field input::placeholder{color:#C9BFD2;font-weight:600}
.field input:focus{border-color:var(--acc-deep);box-shadow:0 0 0 4px var(--acc-soft);outline:none}

/* ---------- 5. landing ---------- */
.landing{padding:calc(10px + var(--sat)) 22px 46px}
.landing-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hero{text-align:center;padding:8px 0 0}
.hero .eyebrow{display:inline-block;margin-bottom:12px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 var(--cream-deep)}
.hero h1{font-size:30px;line-height:1.2}
.hero h1 .hl{position:relative;z-index:0;white-space:nowrap}
.hero h1 .hl:after{
  content:'';position:absolute;z-index:-1;left:-2px;right:-2px;bottom:2px;height:12px;
  background:var(--butter);border-radius:999px;transform:rotate(-1.5deg);
}
.hero p{color:var(--muted);font-size:14px;margin-top:12px;line-height:1.9}

.hero-stage{
  position:relative;margin:20px 0 6px;height:216px;border-radius:var(--r-stage);
  background:linear-gradient(180deg,#FFE9C9 0%,#FFF6E3 58%,#F3E3C2 100%);
  box-shadow:var(--shadow-card),inset 0 0 0 3px #fff;overflow:hidden;
}
.hero-stage:before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(#fff 1.6px,transparent 1.7px);background-size:22px 22px}
.hero-stage .sun{position:absolute;top:20px;right:26px;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#FFF3C4,#FFD66B);box-shadow:0 0 24px #FFD66B88}
.hero-stage .hill{position:absolute;bottom:-34px;width:130%;left:-15%;height:100px;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,#CDEBC0,#B7DFA8)}
.hero-pets{position:absolute;inset:auto 0 18px;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.hero-pets .hp{width:31%;max-width:150px;animation:floaty 3.4s ease-in-out infinite;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero-pets .hp.side{width:24%;max-width:104px;opacity:.92;margin-bottom:6px}
.hero-pets .hp.side:first-child{animation-delay:-1.2s;transform:rotate(-4deg)}
.hero-pets .hp.side:last-child{animation-delay:-2.2s;transform:rotate(4deg)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-name{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 2px}
.hero-name b{color:var(--ink)}

.pick-head{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.pick-head h2{font-size:18px}
.pick-head button{color:var(--acc-deep);font-weight:900;font-size:13px;min-height:48px;padding:0 6px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.pick-head button .ic{width:16px;height:16px}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pick-card{
  background:#fff;border-radius:20px;padding:8px 4px 9px;border:3px solid transparent;
  box-shadow:0 3px 0 var(--cream-deep);display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .15s var(--spring),border-color .15s;min-height:98px;
}
.pick-card img{width:56px;height:56px;object-fit:contain}
.pick-card span{font-size:11px;font-weight:800;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-card:active{transform:scale(.94)}
.pick-card.sel{border-color:var(--acc-deep);background:var(--acc-soft);transform:translateY(-3px)}
.pick-card.sel span{color:var(--acc-edge)}

.create-card{background:#fff;border-radius:var(--r-card);padding:20px 18px;margin-top:22px;box-shadow:var(--shadow-card)}
.create-card h2{font-size:18px;margin-bottom:14px}
.join-toggle{width:100%;min-height:52px;margin-top:14px;color:var(--muted);font-weight:800;font-size:14px}
.join-toggle u{text-underline-offset:4px}
.join-panel{overflow:hidden;max-height:0;transition:max-height .35s var(--spring)}
.join-panel.open{max-height:420px}
.join-panel-inner{background:#fff;border-radius:var(--r-card);padding:20px 18px;margin-top:4px;box-shadow:var(--shadow-card)}
.code-input{
  text-transform:uppercase;letter-spacing:6px;font-size:24px!important;font-weight:900!important;
  text-align:center;font-family:'Nunito','Tama Round',monospace!important;
}
.landing-foot{text-align:center;margin-top:26px;color:#B4A9C0;font-size:11px;line-height:2}
.landing-foot .promise{display:flex;justify-content:center;gap:14px;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.landing-foot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 6. fullscreen pet picker ---------- */
.picker{
  position:fixed;inset:0;z-index:60;background:var(--cream);
  left:0;right:0;margin-inline:auto;max-width:var(--frame);
  display:flex;flex-direction:column;animation:sheet-in .3s var(--spring);
}
.picker-top{padding:calc(10px + var(--sat)) 18px 10px;display:flex;align-items:center;gap:10px}
.picker-top h2{font-size:20px;flex:1;text-align:center}
.picker-search{margin:0 18px 10px}
.picker-search input{width:100%;height:50px;border-radius:999px;border:2px solid var(--line);background:#fff;padding:0 20px;font-size:15px;font-weight:700}
.picker-search input:focus{border-color:var(--acc-deep);outline:none}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;
  font-size:13px;font-weight:800;color:var(--muted);box-shadow:0 2px 0 var(--cream-deep);
}
.chip.on{background:var(--acc-deep);color:#fff;box-shadow:0 2px 0 var(--acc-edge)}
.picker-grid{flex:1;overflow-y:auto;padding:2px 18px calc(24px + var(--sab));display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.picker-card{
  background:#fff;border-radius:22px;padding:12px 6px 10px;border:3px solid transparent;
  box-shadow:0 3px 0 var(--cream-deep);display:flex;flex-direction:column;align-items:center;
  transition:transform .15s var(--spring);
}
.picker-card img{width:82px;height:82px;object-fit:contain}
.picker-card b{font-size:13px;margin-top:4px}
.picker-card small{font-size:10px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-card:active{transform:scale(.95)}
.picker-card.sel{border-color:var(--acc-deep);background:var(--acc-soft)}
.picker-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0;font-size:14px}

/* ---------- 7. room shell : topbar + nav ---------- */
.room-top{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:calc(8px + var(--sat)) 16px 8px;display:flex;align-items:center;gap:8px;
}
.room-id{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:3px;padding:4px 2px}
.room-name{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.level-badge{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:900;color:var(--acc-edge)}
.level-badge .lv{background:var(--acc-soft);border-radius:999px;padding:2px 8px}
.xp-track{width:64px;height:6px;border-radius:999px;background:#EFE7D6;overflow:hidden}
.xp-track i{display:block;height:100%;background:linear-gradient(90deg,var(--butter),var(--berry));border-radius:inherit;transition:width .6s var(--spring)}
.mate-dots{display:flex;align-items:center;padding-left:6px}
.mate-dot{
  width:28px;height:28px;border-radius:50%;margin-left:-7px;border:2.5px solid var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
  background:var(--mc,#E4DEFC);color:#5c4f7a;position:relative;
}
.mate-dot.online:after{content:'';position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#58B368;border:2px solid var(--cream)}
.mate-dot.off{filter:grayscale(.7);opacity:.6}

.page{padding:6px 16px calc(118px + var(--sab))}
.page-title{font-size:26px;margin:10px 2px 4px}
.page-sub{color:var(--muted);font-size:13px;margin:0 2px 16px}

.bottom-nav{
  position:fixed;z-index:50;bottom:calc(10px + var(--sab));left:0;right:0;margin-inline:auto;
  width:min(calc(100% - 24px),calc(var(--frame) - 24px));
  background:#fffffff0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:999px;box-shadow:0 6px 0 #EBE2D2,0 18px 40px -14px #463A5E33;
  display:flex;padding:6px;
}
.nav-item{
  flex:1;min-height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:7px;
  color:#B4A9C0;font-size:13px;font-weight:900;position:relative;z-index:1;
  transition:color .2s;
}
.nav-item .ic{width:23px;height:23px}
.nav-item.active{color:#fff}
.nav-glider{
  position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);
  background:var(--acc-deep);border-radius:999px;box-shadow:0 3px 0 var(--acc-edge);
  transition:transform .35s var(--spring);z-index:0;
}
.bottom-nav[data-active="1"] .nav-glider{transform:translateX(100%)}
.bottom-nav[data-active="2"] .nav-glider{transform:translateX(200%)}
.unread-dot{position:absolute;top:10px;right:calc(50% - 30px);width:9px;height:9px;border-radius:50%;background:#F4520B;background:var(--berry);border:2px solid #fff}

/* ---------- 8. the stage (visual core) ---------- */
.stage{
  position:relative;height:min(86vw,342px);border-radius:var(--r-stage);overflow:hidden;
  background:linear-gradient(180deg,var(--sky-t,#A5D8FF),var(--sky-b,#EAF7FF) 62%,var(--sky-b,#EAF7FF));
  box-shadow:var(--shadow-card),inset 0 0 0 4px #ffffff90;
  transition:background 1s;
}
.stage .dots-tex{position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(#fff 1.5px,transparent 1.6px);background-size:24px 24px}
.stars{position:absolute;inset:0;display:none}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFF9DB;animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.sky-night .stars{display:block}
.celestial{position:absolute;top:26px;right:30px;width:46px;height:46px}
.sky-day .celestial,.sky-dawn .celestial,.sky-dusk .celestial{
  border-radius:50%;background:radial-gradient(circle at 36% 32%,#FFF6CF,var(--sun,#FFD66B));
  box-shadow:0 0 26px var(--sun-glow,#ffd66b80)}
.sky-night .celestial{
  border-radius:50%;background:#FFF6D9;box-shadow:inset -10px -7px 0 #E8DDB5,0 0 20px #fff6d955}
.cloud{position:absolute;width:74px;height:26px;border-radius:999px;background:#ffffffd9;opacity:.85;
  animation:drift 26s linear infinite}
.cloud:before{content:'';position:absolute;top:-13px;left:16px;width:34px;height:30px;border-radius:50%;background:inherit}
.cloud.c2{top:64px;width:56px;height:20px;animation-duration:38s;animation-delay:-14s;opacity:.6}
.cloud.c1{top:34px}
.sky-night .cloud{opacity:.12}
@keyframes drift{from{left:-90px}to{left:105%}}
.mountains{position:absolute;left:0;right:0;bottom:34px;height:90px;pointer-events:none}
.mountains:before,.mountains:after{content:'';position:absolute;bottom:0;border-radius:50% 50% 0 0}
.mountains:before{left:-12%;width:74%;height:100%;background:var(--mt1,#B9D9C9);opacity:.75}
.mountains:after{right:-14%;width:66%;height:74%;background:var(--mt2,#A3CDB7);opacity:.85}
.ground{
  position:absolute;left:-8%;right:-8%;bottom:-52px;height:120px;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,var(--g1,#BCE3A9),var(--g2,#9FD48E));
  box-shadow:inset 0 6px 0 #ffffff30;
}
.spot{position:absolute;left:0;right:0;margin-inline:auto;bottom:6px;width:96%;height:88%;pointer-events:none;opacity:.45;
  background:radial-gradient(ellipse 44% 50% at 50% 62%,#FFFDF6f0 0%,#FFFDF6b8 32%,#fffdf600 64%)}
.sky-night .spot{opacity:1;height:96%;width:104%;
  background:radial-gradient(ellipse 46% 54% at 50% 58%,#FFFDF6 0%,#FFFDF6e0 38%,#fffdf600 68%)}
.sky-night .pet-float img{filter:brightness(1.16) saturate(1.06)}
.pet-shadow{
  position:absolute;left:50%;bottom:44px;width:37%;height:22px;transform:translateX(-50%);
  border-radius:50%;background:#3d2f521f;filter:blur(2px);
  animation:shadow-pulse 3.2s ease-in-out infinite;
}
@keyframes shadow-pulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.84);opacity:.6}}
/* .pet-float must NOT form a stacking context (no z-index/transform), or the
   sprite's mix-blend-mode loses its backdrop. DOM order keeps the pet above
   ground/spot and below .pet-hit. */
.pet-float{
  position:absolute;left:0;right:0;margin-inline:auto;bottom:56px;width:min(56%,260px);
}
.pet-float img{
  width:100%;display:block;mix-blend-mode:multiply;transition:opacity .14s;
  animation:pet-bob 3.2s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
@keyframes pet-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.pet-float.react img{animation:pet-bob 3.2s ease-in-out infinite,pet-squeeze .5s var(--spring)}
@keyframes pet-squeeze{35%{transform:scale(1.06,.92)}70%{transform:scale(.97,1.04)}}
.pet-hit{position:absolute;left:50%;bottom:52px;width:60%;height:62%;transform:translateX(-50%);z-index:4;border-radius:32px}
.mood-bubble{
  position:absolute;z-index:5;top:16px;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:18px 18px 18px 4px;padding:9px 15px;
  font-size:13px;font-weight:800;color:var(--ink);box-shadow:0 4px 0 #463a5e10;
  max-width:78%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mood-bubble:after{content:'';position:absolute;left:22px;bottom:-6px;width:12px;height:12px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.mood-bubble.swap{animation:pop-in .45s var(--spring)}
.care-float-emo{position:absolute;z-index:6;font-size:22px;pointer-events:none}

/* wish card floats on the stage's bottom edge */
.wish-card{
  position:relative;z-index:6;margin:-34px 16px 0;background:#fff;border-radius:22px;
  padding:13px 16px 14px;box-shadow:var(--shadow-card);border:2px solid #FFF2D9;
}
.wish-card .wish-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#B8860B;color:#a5803a}
.wish-card .wish-label{font-size:14px;font-weight:800;margin-top:3px}
.wish-track{height:10px;border-radius:999px;background:#F6ECD4;margin-top:9px;overflow:hidden}
.wish-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--butter),var(--berry));transition:width .5s var(--spring)}
.wish-card .wish-count{margin-left:auto;font-size:12px;color:var(--muted)}
.wish-card.done{border-color:#CDEEDB;background:linear-gradient(180deg,#fff,#F2FBF4)}
.wish-card.done .wish-top{color:#3E9E6B}

/* ---------- 9. stats & care ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.stat-card{background:#fff;border-radius:20px;padding:11px 12px 13px;box-shadow:0 3px 0 var(--cream-deep)}
.stat-row{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;color:var(--muted)}
.stat-row .ic{width:16px;height:16px}
.stat-row b{margin-left:auto;font-size:15px;color:var(--ink)}
.stat-bar{height:11px;border-radius:999px;background:#F4EDDE;margin-top:8px;overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:inherit;transition:width .7s var(--spring)}
.stat-full .ic{color:var(--berry)}.stat-full i{background:var(--berry)}
.stat-happy .ic{color:#F5A623}.stat-happy i{background:var(--butter)}
.stat-energy .ic{color:#5BBFA3}.stat-energy i{background:var(--mint)}

.care-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.care-btn{
  position:relative;min-height:84px;border-radius:24px;padding:10px 4px 9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:900;background:var(--cb,#fff);
  box-shadow:0 4px 0 var(--ce,#E7DDEC);transition:transform .09s,box-shadow .09s,filter .2s;
}
.care-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ce,#E7DDEC)}
.care-btn .cb-ico{
  width:40px;height:40px;border-radius:16px;background:#ffffffd9;
  display:flex;align-items:center;justify-content:center;color:var(--ci,#9B8AFB);
  position:relative;
}
.care-btn .cb-ico .ic{width:22px;height:22px}
.care-btn .cb-ico:after{
  content:'';position:absolute;inset:-3px;border-radius:19px;padding:3px;
  background:conic-gradient(var(--ci,#9B8AFB) calc(var(--p,0)*1turn),transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .2s;
}
.care-btn.cooling{filter:grayscale(.6);opacity:.75}
.care-btn.cooling .cb-ico:after{opacity:.9}
.care-btn .cd-sec{position:absolute;top:6px;right:8px;font-size:10px;font-weight:900;color:var(--muted);background:#fff;border-radius:999px;padding:1px 7px;box-shadow:0 2px 0 #00000010}
.care-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px;min-height:18px}

.diary{
  margin-top:16px;display:flex;gap:8px;align-items:flex-start;justify-content:center;
  font-size:12px;color:var(--muted);text-align:center;line-height:1.7;
}
.diary .ic{width:15px;height:15px;margin-top:3px;color:var(--berry);flex:none}

.mates{display:flex;gap:8px;margin-top:14px}
.mate-card{
  flex:1;background:#fff;border-radius:18px;padding:9px 3px 8px;text-align:center;position:relative;
  box-shadow:0 3px 0 var(--cream-deep);min-width:0;
}
.mate-card .avatar{
  width:38px;height:38px;border-radius:14px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;background:var(--mc,#E4DEFC);color:#5c4f7a;position:relative;
}
.mate-card .avatar.online:after{content:'';position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:#58B368;border:2px solid #fff}
.mate-card .m-name{font-size:10.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.mate-card .m-bond{font-size:10px;color:var(--berry);font-weight:900}
.mate-card .crown{position:absolute;top:-9px;left:calc(50% + 8px);font-size:13px;transform:rotate(12deg)}
.mate-card.empty{background:transparent;border:2px dashed #DDD2E3;box-shadow:none;color:#B4A9C0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;min-height:78px}
.mate-card.empty .plus{font-size:20px}

/* ---------- 10. games tab ---------- */
.active-banner{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc));color:#fff;
  border-radius:20px;padding:14px 16px;font-weight:900;font-size:14px;
  box-shadow:0 4px 0 var(--acc-edge);margin-bottom:16px;
  animation:pulse-banner 2s ease-in-out infinite;
}
@keyframes pulse-banner{50%{filter:brightness(1.07)}}
.active-banner .ic{width:20px;height:20px}
.active-banner .arrow{margin-left:auto}
.game-cards{display:flex;flex-direction:column;gap:14px}
.game-card{
  display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border-radius:var(--r-card);
  padding:16px;box-shadow:0 4px 0 var(--ge,#EBE2D2);transition:transform .12s var(--spring);
}
.game-card:active{transform:scale(.98)}
.game-emoji{
  width:60px;height:60px;flex:none;border-radius:20px;background:var(--gb,#F3E9FF);
  display:flex;align-items:center;justify-content:center;font-size:32px;
}
.game-card .g-body{flex:1;min-width:0}
.game-card h3{font-size:17px}
.game-card p{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55}
.game-open{
  flex:none;min-height:48px;padding:0 16px;border-radius:999px;font-weight:900;font-size:13px;
  background:var(--acc-deep);color:#fff;box-shadow:0 3px 0 var(--acc-edge);
}
.game-open:active{transform:translateY(2px);box-shadow:0 1px 0 var(--acc-edge)}
.fair-note{margin-top:18px;text-align:center;font-size:12px;color:var(--muted);line-height:1.8}

/* ---------- 11. game overlay ---------- */
.game-overlay{
  position:fixed;inset:0;z-index:80;background:var(--cream);
  left:0;right:0;margin-inline:auto;max-width:var(--frame);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:sheet-in .28s var(--spring);
}
@keyframes sheet-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.go-top{
  position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:calc(10px + var(--sat)) 14px 10px;display:flex;align-items:center;gap:10px;
}
.go-name{flex:1;text-align:center}
.go-name h1{font-size:19px}
.round-dots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.round-dots i{width:8px;height:8px;border-radius:50%;background:#E3D9EC;transition:.2s}
.round-dots i.on{background:var(--acc-deep);transform:scale(1.25)}
.cd-track{height:7px;border-radius:999px;background:#EFE7D6;margin:2px 16px 0;overflow:hidden}
.cd-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--acc-deep));transition:none}
.go-body{padding:14px 16px calc(30px + var(--sab))}
.go-hint{text-align:center;font-size:13px;color:var(--muted);min-height:22px;margin:6px 0 12px}
.go-hint b{color:var(--ink)}
.arena{
  background:#fff;border-radius:28px;box-shadow:var(--shadow-card);
  padding:22px 16px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:relative;overflow:hidden;
}
.arena.gray{background:#F1EBF6;box-shadow:none}
.arena-msg{font-size:14px;font-weight:800;color:var(--muted);text-align:center}
.mini-pet-row{display:flex;align-items:center;justify-content:center;gap:10px}
.mini-pet-row img{width:74px;height:74px;object-fit:contain;animation:floaty 3s ease-in-out infinite}
.pet-help{
  background:#FFF0F5;border:2px solid #FFD3E1;border-radius:16px 16px 16px 4px;
  padding:9px 13px;font-size:12px;font-weight:700;color:#C05F82;max-width:200px;
  animation:pop-in .45s var(--spring);
}
.go-players{display:flex;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.gp{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--muted)}
.gp .avatar{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;background:var(--mc,#E4DEFC);color:#5c4f7a;position:relative;transition:.2s}
.gp.off .avatar{filter:grayscale(.8);opacity:.55}
.gp.done .avatar{outline:3px solid var(--mint);outline-offset:2px}
.gp.done .avatar:after{
  content:'✓';position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:50%;
  background:#58B368;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream);
}
.go-count{text-align:center;font-size:12px;color:var(--muted);margin-top:10px;font-weight:800}

/* hide — 3d cups */
.cups{display:flex;gap:14px;justify-content:center;padding:18px 0 6px;perspective:600px}
.cup-slot{position:relative;width:88px;height:118px}
.cup-ball{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE3EC,var(--berry));
  box-shadow:0 0 18px var(--berry);opacity:0;transition:opacity .3s .55s,transform .45s var(--spring) .55s;
}
.cup-item{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%) scale(.4);font-size:34px;opacity:0;
  transition:opacity .3s,transform .4s var(--spring);
}
.cup{
  position:absolute;left:0;right:0;bottom:0;height:96px;border-radius:16px 16px 30px 30px;
  background:linear-gradient(180deg,#FFFDF7,#FFEFD9);border:3px solid #EFCDB2;
  box-shadow:0 6px 0 #DFAE8C,inset 0 8px 0 #ffffff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#C09A80;
  transition:transform .5s var(--spring),box-shadow .2s,opacity .2s;transform-origin:bottom center;
}
.cup:not(:disabled):active{transform:translateY(3px)}
.cups.intro .cup{animation:cup-drop .55s var(--spring) both}
.cups.intro .cup-slot:nth-child(2) .cup{animation-delay:.12s}
.cups.intro .cup-slot:nth-child(3) .cup{animation-delay:.24s}
@keyframes cup-drop{from{transform:translateY(-74px) rotateX(-38deg);opacity:0}to{transform:none;opacity:1}}
@keyframes cup-lift{from{transform:none}to{transform:translateY(-60px) rotateX(14deg);box-shadow:0 22px 14px -8px #463a5e2e}}
.cups.peek .cup.target{animation:cup-lift .6s var(--spring) .7s both}
.cups.peek .cup-ball{opacity:1;transform:translateX(-50%) scale(1.12)}
.cups.peek .cup-item{opacity:1;transform:translateX(-50%) scale(1)}
.cup.chosen{border-color:var(--acc-deep);box-shadow:0 6px 0 var(--acc-edge);background:linear-gradient(180deg,#fff,var(--acc-soft))}
.cup.eliminated{opacity:.35;filter:grayscale(.6)}
.cup .cup-no{opacity:.55}

/* memory */
.seq-show{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.seq-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;background:#FFF6E8;border:3px solid #FFE1AC;
  border-radius:20px;padding:10px 12px;min-width:74px;opacity:0;transform:scale(.3);
  animation:seq-pop .5s var(--spring) forwards;
}
@keyframes seq-pop{to{opacity:1;transform:scale(1)}}
.seq-item .s-emo{font-size:34px}
.seq-item .s-name{font-size:11px;font-weight:900;color:#A5713C}
.seq-item.last{border-color:var(--berry);background:#FFF0F4}
.seq-arrow{color:#D9C9A8;font-weight:900;opacity:0;animation:seq-pop .4s var(--spring) forwards}
.mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.mem-card{
  min-height:96px;border-radius:22px;background:#FFFDF6;border:3px solid #F0E3C8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:14px;font-weight:900;box-shadow:0 4px 0 #EBDDC2;transition:transform .09s;
}
.mem-card .m-emo{font-size:36px}
.mem-card:active{transform:translateY(2px)}
.mem-card.chosen{border-color:var(--acc-deep);background:var(--acc-soft);box-shadow:0 4px 0 var(--acc-edge)}
.mem-card.eliminated{opacity:.35;filter:grayscale(.7)}

/* feed timing bar */
.feed-track{
  position:relative;width:100%;height:46px;border-radius:999px;background:#F0EAF8;
  box-shadow:inset 0 3px 6px #463a5e14,0 3px 0 #fff;overflow:hidden;margin:8px 0 4px;
}
.feed-zone{
  position:absolute;top:0;bottom:0;background:linear-gradient(180deg,var(--mint),#5EC9A6);
  border-radius:6px;box-shadow:0 0 14px #7edbbf77;
}
.feed-needle{
  position:absolute;top:-2px;bottom:-2px;width:8px;margin-left:-4px;border-radius:999px;
  background:var(--berry);box-shadow:0 0 0 3px #fff,0 3px 8px #463a5e33;
}
.feed-pos{text-align:center;font-size:12px;color:var(--muted);font-weight:800;min-height:18px}
.big-action{width:100%;min-height:62px;font-size:18px;border-radius:999px}

/* guess */
.guess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.guess-card{
  min-height:104px;border-radius:22px;background:#FFFDF6;border:3px solid #EFE3CB;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:900;box-shadow:0 4px 0 #EBDDC2;transition:transform .09s;
}
.guess-card .g-emo{font-size:34px}
.guess-card:active{transform:translateY(2px)}
.guess-card.chosen{border-color:var(--acc-deep);background:var(--acc-soft);box-shadow:0 4px 0 var(--acc-edge)}
.clue-bubble{
  background:#F3EFFF;border-radius:18px 18px 4px 18px;padding:12px 16px;font-size:14px;font-weight:700;
  color:#6A5A92;max-width:92%;text-align:center;box-shadow:0 3px 0 #463a5e0d;
}

/* reflex */
.reflex-pad{
  width:100%;min-height:230px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#EFE9F2;color:#A99CBB;transition:background .18s,color .18s,transform .09s;
  box-shadow:inset 0 0 0 3px #e2d9ea;
}
.reflex-pad:active{transform:scale(.985)}
.reflex-pad .r-big{font-size:30px;font-weight:900;letter-spacing:2px}
.reflex-pad .r-sub{font-size:13px;font-weight:700}
.reflex-pad .r-dots:after{content:'';animation:r-dots 1.2s steps(4) infinite}
@keyframes r-dots{0%{content:''}25%{content:'·'}50%{content:'··'}75%{content:'···'}}
.reflex-pad.go{
  background:linear-gradient(135deg,var(--butter),var(--berry));color:#fff;
  box-shadow:0 0 0 4px #fff,0 10px 30px -8px var(--berry);
  animation:go-pulse .5s ease-in-out infinite alternate;
}
@keyframes go-pulse{to{transform:scale(1.025)}}
.reflex-pad.done{background:#E9F7EE;color:#3E9E6B;box-shadow:inset 0 0 0 3px #cdeedb;animation:none}
.reflex-pad.early{background:#FBEAEA;color:#C06666;box-shadow:inset 0 0 0 3px #f2cccc;animation:none}
.reflex-ms{font-size:26px;font-weight:900}

/* reveal & finished */
.score-rows{display:flex;flex-direction:column;gap:10px;width:100%}
.score-row{
  display:flex;align-items:center;gap:11px;background:#fff;border-radius:20px;padding:11px 14px;
  box-shadow:0 3px 0 var(--cream-deep);animation:pop-in .5s var(--spring) both;
}
.score-row .rank{font-size:19px;width:26px;text-align:center}
.score-row .avatar{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;background:var(--mc,#E4DEFC);color:#5c4f7a;flex:none}
.score-row .s-name{flex:1;min-width:0;font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-row .s-name small{display:block;font-weight:700;color:var(--muted);font-size:10.5px}
.score-row .s-pts{font-size:22px;font-weight:900;color:var(--acc-edge);animation:pts-bounce .6s var(--spring) both}
.score-row .s-ms{font-size:15px;font-weight:900;color:var(--muted)}
@keyframes pts-bounce{from{transform:scale(0)}60%{transform:scale(1.45)}to{transform:scale(1)}}
.score-row.me{outline:3px solid var(--acc-soft)}
.score-row.top{background:linear-gradient(90deg,#FFF7DF,#fff);box-shadow:0 3px 0 #EFDFAE}
.reveal-note{text-align:center;font-size:12.5px;color:var(--muted);line-height:1.8;margin-top:4px}
.assist-bubble{
  display:flex;gap:10px;align-items:center;background:#FFF0F5;border:2px solid #FFD3E1;border-radius:20px;
  padding:10px 14px;font-size:12.5px;font-weight:700;color:#C05F82;margin-top:12px;text-align:left;
}
.assist-bubble img{width:44px;height:44px;object-fit:contain;flex:none}
.champion{font-size:15px;font-weight:900;text-align:center;color:#B8860B}
.go-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.spectate-note{text-align:center;font-size:12px;color:var(--muted);background:#F4EFFA;border-radius:14px;padding:9px 12px}

/* ---------- 12. chat ---------- */
.chat-page{display:flex;flex-direction:column;min-height:calc(100dvh - 130px);padding-bottom:calc(196px + var(--sab))}
.chat-head{display:flex;align-items:center;gap:12px;padding:4px 2px 12px}
.chat-head img{width:52px;height:52px;object-fit:contain}
.chat-head h1{font-size:19px}
.chat-head p{font-size:12px;color:var(--muted)}
.chat-log{display:flex;flex-direction:column;gap:12px}
.chat-day{align-self:center;font-size:11px;color:#B4A9C0;background:#fff;border-radius:999px;padding:4px 14px;box-shadow:0 2px 0 var(--cream-deep)}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.msg .avatar{width:34px;height:34px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;background:var(--mc,#E4DEFC);color:#5c4f7a}
.msg-body{max-width:76%;min-width:0}
.msg-meta{font-size:10px;color:#B4A9C0;margin:0 4px 3px;font-weight:700}
.msg-meta b{color:var(--mc-deep,#8B7FA8)}
.bubble{
  background:#fff;border-radius:4px 20px 20px 20px;padding:11px 15px;font-size:14.5px;line-height:1.65;
  box-shadow:0 3px 0 #463a5e0d;white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.self{flex-direction:row-reverse}
.msg.self .bubble{background:linear-gradient(135deg,var(--berry),#FF7BA3);color:#fff;border-radius:20px 4px 20px 20px;box-shadow:0 3px 0 #e56b8f55}
.msg.self .msg-meta{text-align:right}
.msg.pending{opacity:.55}
.sticker-msg{font-size:64px;line-height:1.15;padding:2px 6px;filter:drop-shadow(0 4px 4px #463a5e1c)}
.sys-msg{align-self:center;font-size:11px;color:#A99CBB;background:#F4EFF9;border-radius:999px;padding:6px 16px;text-align:center;max-width:92%}
.chat-empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:13px;line-height:2}
.chat-empty .e-emo{font-size:44px;display:block;margin-bottom:10px}
.history-btn{align-self:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--acc-deep);font-weight:900;font-size:12.5px;box-shadow:0 3px 0 var(--cream-deep)}
.chat-dock{
  position:fixed;z-index:45;bottom:calc(88px + var(--sab));left:0;right:0;margin-inline:auto;
  width:min(100%,var(--frame));padding:6px 14px 8px;
  background:linear-gradient(180deg,transparent,var(--cream) 26%);
}
.sticker-row{display:flex;gap:6px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.sticker-row::-webkit-scrollbar{display:none}
.sticker-btn{
  flex:none;width:48px;height:48px;border-radius:17px;background:#fff;font-size:25px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--cream-deep);
  transition:transform .12s var(--spring);
}
.sticker-btn:active{transform:scale(1.18) rotate(-6deg)}
.phrase-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.phrase-row::-webkit-scrollbar{display:none}
.phrase-chip{flex:none;min-height:36px;padding:0 13px;border-radius:999px;background:#fff;font-size:12px;font-weight:800;color:var(--muted);box-shadow:0 2px 0 var(--cream-deep);white-space:nowrap}
.chat-form{display:flex;gap:8px}
.chat-form input{
  flex:1;min-width:0;height:54px;border-radius:999px;border:2px solid var(--line);background:#fff;
  padding:0 20px;font-size:15px;font-weight:600;
}
.chat-form input:focus{border-color:var(--acc-deep);outline:none;box-shadow:0 0 0 4px var(--acc-soft)}
.chat-send{
  width:54px;height:54px;flex:none;border-radius:50%;background:var(--acc-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--acc-edge);
  transition:transform .09s,box-shadow .09s;
}
.chat-send:active{transform:translateY(2px);box-shadow:0 2px 0 var(--acc-edge)}
.chat-send .ic{width:22px;height:22px}

/* ---------- 13. sheets ---------- */
.sheet-shade{
  position:fixed;inset:0;z-index:100;background:#463a5e59;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade-in .18s;
}
@keyframes fade-in{from{opacity:0}}
.sheet{
  width:min(100%,var(--frame));max-height:88dvh;overflow-y:auto;background:var(--cream);
  border-radius:30px 30px 0 0;padding:12px 22px calc(24px + var(--sab));
  box-shadow:0 -12px 50px #32243f2e;animation:sheet-up .32s var(--spring);
}
@keyframes sheet-up{from{transform:translateY(60px);opacity:.4}}
.sheet-handle{width:42px;height:5px;border-radius:999px;background:#E2D8EA;margin:2px auto 16px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sheet-head h2{font-size:22px}
.sheet .sub{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:16px}
.sheet .btn{width:100%;margin-top:10px}
.invite-code{
  font-family:'Nunito','Tama Round',monospace;font-size:36px;font-weight:900;letter-spacing:9px;text-align:center;
  background:#fff;border:3px dashed var(--acc);border-radius:22px;padding:20px 10px 20px 19px;margin:14px 0 6px;
  color:var(--acc-edge);user-select:all;-webkit-user-select:all;
}
.sheet-note{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11.5px;color:var(--muted);margin-top:14px;text-align:center}
.danger-btn{width:100%;min-height:50px;margin-top:18px;color:#D15B7B;font-weight:900;font-size:14px}
.about-list p{padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px;line-height:1.85}
.about-list b{display:block;color:var(--acc-edge)}
.about-list p:last-child{border-bottom:0}

/* ---------- 14. fx : hearts, floats, confetti ---------- */
#fx-root{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden}
.fx-heart{
  position:fixed;font-size:20px;color:var(--berry);will-change:transform,opacity;
  animation:heart-burst .95s ease-out forwards;
}
@keyframes heart-burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  18%{opacity:1;transform:translate(calc(-50% + var(--dx)*.35),calc(-50% + var(--dy)*.35)) scale(1.15)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 46px)) scale(.9) rotate(var(--rot,0deg))}
}
.fx-float{
  position:fixed;font-size:16px;font-weight:900;color:var(--berry);text-shadow:0 2px 0 #fff;
  animation:float-up 1.1s ease-out forwards;white-space:nowrap;
}
@keyframes float-up{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  20%{opacity:1;transform:translate(-50%,-12px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-64px) scale(1)}
}
.confetti{
  position:absolute;top:-16px;width:9px;height:13px;border-radius:3px;background:var(--cc,#FF8FAB);
  animation:confetti-fall var(--cd,2.2s) cubic-bezier(.2,.6,.6,1) forwards;will-change:transform;
}
@keyframes confetti-fall{
  0%{opacity:1;transform:translate3d(0,-10px,0) rotate(0)}
  100%{opacity:.9;transform:translate3d(var(--cx,0),108dvh,0) rotate(var(--cr,540deg))}
}
.connection-banner{
  position:sticky;top:calc(4px + var(--sat));z-index:30;margin:4px 16px 0;background:#FFF0D9;color:#A5713C;
  font-size:12px;font-weight:800;text-align:center;border-radius:999px;padding:7px 12px;
  box-shadow:0 3px 0 #efdfbe;animation:pop-in .3s var(--spring);
}

/* ---------- 15. pet sprites are painted on cream paper — blend & feather ---------- */
.pick-card img,.picker-card img,.chat-head img,.mini-pet-row img,.assist-bubble img{mix-blend-mode:multiply}
.pick-card img,.picker-card img{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* ---------- 16. desktop frame ---------- */
@media (min-width:760px){
  body{
    background:
      radial-gradient(520px 520px at 12% 18%,#ffe9f1 0%,transparent 70%),
      radial-gradient(560px 560px at 88% 78%,#e5deff 0%,transparent 70%),
      radial-gradient(420px 420px at 82% 12%,#fff3d6 0%,transparent 70%),
      linear-gradient(160deg,#fdf3e3,#f3ecfa);
    padding:26px 0;
  }
  body:before{
    content:'🐾 🌱 ⭐ 🐾 🍀 ⭐ 🐾 🌙';position:fixed;inset:auto 0 18px;text-align:center;
    font-size:22px;letter-spacing:26px;opacity:.16;pointer-events:none;
  }
  body:after{
    content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(#d9cdea 1.3px,transparent 1.4px);background-size:26px 26px;
  }
  #app{
    border-radius:46px;min-height:calc(100dvh - 52px);
    box-shadow:0 0 0 10px #fffdf6,0 40px 90px -30px #463a5e59;
    overflow:hidden;
  }
  .bottom-nav{bottom:36px}
  .chat-dock{bottom:112px}
  .game-overlay{top:26px;bottom:26px;border-radius:38px;box-shadow:0 30px 70px -20px #463a5e59}
  .sheet-shade{align-items:center;padding-bottom:0}
  .sheet{border-radius:30px;margin-bottom:0;max-height:calc(100dvh - 90px)}
  .picker{top:26px;bottom:26px;border-radius:38px;box-shadow:0 30px 70px -20px #463a5e59}
}

/* ---------- 16. tiny screens & a11y ---------- */
@media (max-width:360px){
  .page{padding-left:12px;padding-right:12px}
  .landing{padding-left:16px;padding-right:16px}
  .care-grid{gap:7px}
  .care-btn{font-size:11.5px}
  .pick-grid{grid-template-columns:repeat(4,1fr);gap:7px}
  .hero h1{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .pet-float,.pet-shadow,.hero-pets .hp,.cloud{animation:none!important}
}