/* QQ宠物风格 · 灵宠家园 - see pet-home.js */
/* 游戏中心 / 灵宠家园内不显示灵枢悬浮机器人 */
body:has(#view-pet:not(.hidden)) .yc-assist-fab,
body:has(#view-game-center:not(.hidden)) .yc-assist-fab,
body:has(#view-link:not(.hidden)) .yc-assist-fab,
body:has(#view-gomoku:not(.hidden)) .yc-assist-fab,
body:has(#view-pet:not(.hidden)) .yc-feedback-fab,
body:has(#view-game-center:not(.hidden)) .yc-feedback-fab,
body:has(#view-link:not(.hidden)) .yc-feedback-fab,
body:has(#view-gomoku:not(.hidden)) .yc-feedback-fab {
  display: none !important;
}
#view-pet.pet-page { min-height:100dvh; background:#87ceeb; overflow:hidden; }
#view-pet.pet-page:not(.hidden) { display:flex; flex-direction:column; }
#petAppRoot { flex:1; display:flex; flex-direction:column; min-height:0; }
.ph-hud { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 6px; z-index:20; gap:6px; }
.ph-hud__center { flex:1; min-width:0; padding:0 6px; }
.ph-hud__center--visit { text-align:center; font-size:12px; font-weight:700; color:#475569; }
.ph-exp { display:flex; align-items:center; gap:6px; }
.ph-exp__lbl { font-size:9px; font-weight:800; color:#6366f1; letter-spacing:.06em; flex-shrink:0; }
.ph-exp__track { flex:1; height:6px; background:#e2e8f0; border-radius:999px; overflow:hidden; min-width:40px; }
.ph-exp__track i { display:block; height:100%; background:linear-gradient(90deg,#818cf8,#6366f1); border-radius:999px; transition:width .5s cubic-bezier(.34,1.2,.64,1); }
.ph-exp__num { font-size:9px; font-weight:700; color:#94a3b8; flex-shrink:0; }
.ph-hud__back { border:none; background:rgba(255,255,255,.92); color:#334155; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.ph-hud__stats { display:flex; gap:8px; align-items:center; }
.ph-coin { display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:999px; background:linear-gradient(180deg,#fef08a,#facc15); color:#854d0e; font-size:13px; font-weight:800; }
.ph-lv { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.92); font-size:12px; font-weight:800; color:#6366f1; }
.ph-room { flex:1; position:relative; margin:0 10px; border-radius:20px 20px 0 0; overflow:hidden; min-height:340px;
  background:#6b5344; box-shadow:inset 0 0 0 3px rgba(255,255,255,.25), 0 8px 28px rgba(0,0,0,.12);
  transition:filter .6s ease; }
.ph-room--morning { filter:saturate(1.05) brightness(1.03); }
.ph-room--day { filter:saturate(1); }
.ph-room--sunset { filter:sepia(.1) saturate(1.08) hue-rotate(-6deg) brightness(.98); }
.ph-room--night { filter:brightness(.78) saturate(.88); }
.ph-room--mood-happy { box-shadow:inset 0 0 0 3px rgba(255,255,255,.25), 0 8px 28px rgba(0,0,0,.12), inset 0 0 80px rgba(250,204,21,.1); }
.ph-room--mood-sad { box-shadow:inset 0 0 0 3px rgba(255,255,255,.2), 0 8px 28px rgba(0,0,0,.12), inset 0 0 90px rgba(100,116,139,.15); }
.ph-room--mood-sleepy { filter:brightness(.92) saturate(.95); }
.ph-room__scene { position:absolute; inset:0; pointer-events:none; }
/* ── 室外（窗外） ── */
.ph-room__outside { position:absolute; top:0; left:50%; transform:translateX(-50%); width:148px; height:92px; overflow:hidden; border-radius:6px 6px 0 0; z-index:3; }
.ph-room__sun { position:absolute; top:14px; right:18px; width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fef9c3,#facc15 55%,#f59e0b); box-shadow:0 0 20px rgba(250,204,21,.55); animation:ph-sun 6s ease-in-out infinite; }
@keyframes ph-sun { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.ph-room__moon { position:absolute; top:16px; right:20px; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#f8fafc,#e2e8f0); box-shadow:0 0 14px rgba(226,232,240,.6); opacity:0; transition:opacity .5s; }
.ph-room__stars { position:absolute; inset:0; opacity:0; background:radial-gradient(1px 1px at 18% 28%,#fff,transparent), radial-gradient(1px 1px at 55% 18%,#fff,transparent), radial-gradient(1.5px 1.5px at 78% 38%,#fff,transparent), radial-gradient(1px 1px at 38% 48%,#fff,transparent); pointer-events:none; transition:opacity .5s; }
.ph-room--night .ph-room__sun { opacity:0; }
.ph-room--night .ph-room__moon { opacity:1; animation:ph-moon 8s ease-in-out infinite; }
.ph-room--night .ph-room__stars { opacity:.9; animation:ph-twinkle 4s ease-in-out infinite; }
.ph-room--night .ph-room__cloud { opacity:.4; }
@keyframes ph-moon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes ph-twinkle { 0%,100%{opacity:.55} 50%{opacity:.95} }
.ph-room__cloud { position:absolute; background:#fff; border-radius:999px; opacity:.9; animation:ph-cloud 18s linear infinite; }
.ph-room__cloud::before,.ph-room__cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.ph-room__cloud--1 { width:48px; height:16px; top:24px; left:-50px; animation-duration:22s; }
.ph-room__cloud--1::before { width:22px; height:22px; top:-10px; left:6px; }
.ph-room__cloud--1::after { width:18px; height:18px; top:-7px; left:24px; }
.ph-room__cloud--2 { width:60px; height:18px; top:44px; left:-70px; animation-duration:28s; animation-delay:-8s; opacity:.75; }
.ph-room__cloud--2::before { width:28px; height:28px; top:-12px; left:10px; }
.ph-room__cloud--2::after { width:20px; height:20px; top:-8px; left:32px; }
.ph-room__cloud--3 { width:40px; height:14px; top:12px; left:-36px; animation-duration:19s; animation-delay:-4s; opacity:.65; }
@keyframes ph-cloud { from{transform:translateX(0)} to{transform:translateX(220px)} }
/* ── 墙面 / 地板 ── */
.ph-room__wall { position:absolute; inset:0 0 34%; background:
  linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 18%),
  repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(255,255,255,.04) 22px, rgba(255,255,255,.04) 23px),
  linear-gradient(180deg, #c8e6f5 0%, #b8ddf0 42%, #a8d4eb 100%); z-index:1; }
.ph-room__wainscot { position:absolute; left:0; right:0; top:58%; height:8%; background:linear-gradient(180deg,#f5ebe0,#edd9c8); border-top:1px solid rgba(255,255,255,.35); z-index:2;
  background-image:repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,0,0,.03) 18px, rgba(0,0,0,.03) 19px); }
.ph-room__baseboard { position:absolute; left:0; right:0; top:calc(66% - 4px); height:8px; background:linear-gradient(180deg,#fff,#e8dfd4); box-shadow:0 2px 4px rgba(0,0,0,.08); z-index:4; }
.ph-room__floor { position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 8%),
    repeating-linear-gradient(90deg, #d4b896 0, #d4b896 38px, #c9a97e 38px, #c9a97e 40px);
  transform:perspective(280px) rotateX(8deg); transform-origin:center top; }
.ph-room__floor-shine { position:absolute; left:10%; right:10%; bottom:8%; height:18%; z-index:3;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 70%); pointer-events:none; }
.ph-room--night .ph-room__wall { background:linear-gradient(180deg, #5a7a94 0%, #4a6a84 42%, #3d5a72 100%); }
.ph-room--night .ph-room__wainscot { background:linear-gradient(180deg,#6b5d52,#5c4f46); }
.ph-room--night .ph-room__floor { background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 8%), repeating-linear-gradient(90deg, #8b7355 0, #8b7355 38px, #7d6548 38px, #7d6548 40px); }
/* ── 窗户 ── */
.ph-room__window { position:absolute; top:11%; left:50%; transform:translateX(-50%); width:148px; height:92px; border-radius:10px; z-index:5;
  background:linear-gradient(180deg,#7dd3fc,#38bdf8); border:5px solid #fff; box-shadow:inset 0 0 0 2px #e2e8f0, 0 4px 12px rgba(0,0,0,.1); overflow:hidden; }
.ph-room__window-glass { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 45%,rgba(255,255,255,.2) 100%); animation:ph-glass 5s ease-in-out infinite; z-index:2; }
.ph-room__window-pane { position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, transparent 49%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.5) 51%, transparent 51%),
  linear-gradient(180deg, transparent 49%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.5) 51%, transparent 51%); }
.ph-room__window-sill { position:absolute; bottom:-10px; left:-8px; right:-8px; height:12px; background:linear-gradient(180deg,#fff,#e8dfd4); border-radius:0 0 6px 6px; box-shadow:0 3px 6px rgba(0,0,0,.1); z-index:3; }
.ph-room--night .ph-room__window { background:linear-gradient(180deg,#1e3a5f,#0f172a); }
@keyframes ph-glass { 0%,100%{opacity:.55} 50%{opacity:1} }
.ph-room__curtain { position:absolute; top:9%; width:28px; height:100px; z-index:6; border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#fda4af,#fb7185); box-shadow:2px 2px 8px rgba(0,0,0,.12); }
.ph-room__curtain--l { left:calc(50% - 92px); transform:skewY(-2deg); border-radius:0 0 12px 4px; }
.ph-room__curtain--r { right:calc(50% - 92px); transform:skewY(2deg); border-radius:0 0 4px 12px; }
.ph-room--night .ph-room__curtain { background:linear-gradient(180deg,#7c3aed,#6d28d9); opacity:.85; }
/* ── 挂钟 / 画框 ── */
.ph-room__clock { position:absolute; top:14%; right:14%; width:32px; height:32px; border-radius:50%; border:3px solid #fff; background:linear-gradient(180deg,#fef3c7,#fde68a); box-shadow:0 3px 8px rgba(0,0,0,.12); z-index:6; }
.ph-room__clock::before { content:''; position:absolute; left:50%; top:50%; width:2px; height:9px; background:#854d0e; transform-origin:bottom center; transform:translate(-50%,-100%) rotate(-30deg); border-radius:1px; }
.ph-room__clock::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:6px; background:#a16207; transform-origin:bottom center; transform:translate(-50%,-100%) rotate(80deg); border-radius:1px; }
.ph-room__frame { position:absolute; top:22%; right:8%; width:52px; height:44px; z-index:5;
  background:linear-gradient(145deg,#fef3c7,#d4a574); border:4px solid #fff; border-radius:4px; box-shadow:0 4px 10px rgba(0,0,0,.12); padding:3px; }
.ph-frame__art { width:100%; height:100%; border-radius:2px;
  background:linear-gradient(135deg,#bae6fd 0%,#7dd3fc 40%,#fef08a 100%); position:relative; overflow:hidden; }
.ph-frame__art::after { content:'🐧'; position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); font-size:16px; }
/* ── 落地灯 ── */
.ph-room__lamp { position:absolute; bottom:38%; right:22%; width:10px; height:52px; z-index:6; }
.ph-lamp__shade { position:absolute; top:0; left:50%; transform:translateX(-50%); width:28px; height:18px;
  background:linear-gradient(180deg,#fef08a,#fbbf24); border-radius:50% 50% 40% 40%; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.ph-room__lamp::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:8px; height:36px; background:linear-gradient(180deg,#d4a574,#a67c52); border-radius:4px; }
.ph-lamp__glow { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:80px; height:40px;
  background:radial-gradient(ellipse, rgba(251,191,36,.35), transparent 70%); pointer-events:none; }
.ph-room--night .ph-lamp__glow { background:radial-gradient(ellipse, rgba(251,191,36,.55), transparent 70%); animation:ph-lamp-flicker 4s ease-in-out infinite; }
@keyframes ph-lamp-flicker { 0%,100%{opacity:.9} 50%{opacity:1} }
/* ── 书架 ── */
.ph-room__shelf { position:absolute; bottom:48%; left:6%; width:72px; height:88px; z-index:6; }
.ph-shelf__back { position:absolute; inset:0; background:linear-gradient(180deg,#d4a574,#b8956a); border-radius:6px 6px 4px 4px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.2), 3px 4px 10px rgba(0,0,0,.15); }
.ph-shelf__row { position:absolute; left:6px; right:6px; height:3px; background:#a67c52; border-radius:1px; }
.ph-shelf__row--1 { top:28px; }
.ph-shelf__row--2 { top:56px; }
.ph-book { position:absolute; display:block; width:10px; border-radius:2px 3px 2px 2px; box-shadow:1px 1px 2px rgba(0,0,0,.15); bottom:0; }
.ph-shelf__row--1 .ph-book--r { left:8px; height:22px; background:#f87171; bottom:32px; }
.ph-shelf__row--1 .ph-book--b { left:22px; height:26px; background:#60a5fa; bottom:32px; }
.ph-shelf__row--1 .ph-book--g { left:36px; height:20px; background:#4ade80; bottom:32px; }
.ph-shelf__row--2 .ph-book--y { left:8px; height:24px; background:#facc15; bottom:4px; }
.ph-shelf__row--2 .ph-book--p { left:22px; height:18px; background:#c084fc; bottom:4px; }
.ph-shelf__toy { position:absolute; right:8px; bottom:2px; font-size:16px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
/* ── 小床 ── */
.ph-room__bed { position:absolute; bottom:36%; right:5%; width:88px; height:52px; z-index:6; }
.ph-bed__legs { position:absolute; bottom:0; left:6px; right:6px; height:8px; background:linear-gradient(180deg,#a67c52,#8b6914); border-radius:0 0 6px 6px; }
.ph-bed__mattress { position:absolute; bottom:6px; left:0; right:0; height:28px; background:linear-gradient(180deg,#fff,#f1f5f9); border-radius:10px 10px 4px 4px; border:2px solid #e2e8f0; }
.ph-bed__pillow { position:absolute; bottom:28px; left:8px; width:28px; height:14px; background:#fff; border-radius:8px; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.ph-bed__blanket { position:absolute; bottom:20px; right:4px; width:52px; height:22px; background:linear-gradient(135deg,#fda4af,#fb7185); border-radius:8px 12px 6px 6px; border:2px solid rgba(255,255,255,.4); }
/* ── 绿植 ── */
.ph-room__plant { position:absolute; bottom:40%; left:18%; width:40px; height:56px; z-index:6; animation:ph-plant-sway 5s ease-in-out infinite; }
@keyframes ph-plant-sway { 0%,100%{transform:rotate(0)} 50%{transform:rotate(1.5deg)} }
.ph-plant__pot { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:28px; height:22px;
  background:linear-gradient(180deg,#f97316,#ea580c); border-radius:4px 4px 8px 8px; border:2px solid #c2410c; }
.ph-plant__stem { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:4px; height:22px; background:#16a34a; border-radius:2px; }
.ph-plant__leaf { position:absolute; width:18px; height:12px; background:#22c55e; border-radius:50% 50% 50% 0; }
.ph-plant__leaf--1 { bottom:32px; left:4px; transform:rotate(-35deg); }
.ph-plant__leaf--2 { bottom:36px; right:2px; transform:rotate(25deg) scaleX(-1); }
.ph-plant__leaf--3 { bottom:42px; left:50%; transform:translateX(-50%) rotate(-10deg); width:14px; height:10px; }
/* ── 食盆 ── */
.ph-room__bowl { position:absolute; bottom:32%; left:14%; width:48px; height:36px; z-index:7; animation:ph-bowl 3s ease-in-out infinite; }
@keyframes ph-bowl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
.ph-bowl__mat { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:44px; height:14px; background:#fef3c7; border-radius:50%; border:2px solid #fde68a; box-shadow:0 2px 4px rgba(0,0,0,.08); }
.ph-bowl__dish { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:34px; height:14px;
  background:linear-gradient(180deg,#e0f2fe,#7dd3fc); border-radius:0 0 50% 50%; border:3px solid #fff; border-top:none; box-shadow:inset 0 -2px 4px rgba(0,0,0,.08); }
.ph-bowl__food { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:22px; height:8px;
  background:radial-gradient(ellipse,#fbbf24,#f59e0b); border-radius:50%; }
/* ── 玩具箱 / 地毯 ── */
.ph-room__toybox { position:absolute; bottom:34%; right:28%; width:36px; height:28px; z-index:6;
  background:linear-gradient(180deg,#fef08a,#fde047); border-radius:6px; border:2px solid #facc15; box-shadow:0 3px 6px rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:center; gap:2px; font-size:11px; }
.ph-room__rug { position:absolute; bottom:26%; left:50%; transform:translateX(-50%); width:min(240px,72%); height:36px; z-index:7;
  background:repeating-linear-gradient(90deg,#fda4af 0,#fda4af 14px,#fb7185 14px,#fb7185 28px);
  border-radius:50%; box-shadow:0 4px 12px rgba(244,114,182,.25), inset 0 2px 8px rgba(255,255,255,.2); opacity:.92; }
.ph-room__rug::before { content:''; position:absolute; inset:6px 12px; border:2px dashed rgba(255,255,255,.35); border-radius:50%; }
/* ── 光照 ── */
.ph-room__warm-glow { position:absolute; bottom:30%; right:18%; width:120px; height:80px;
  background:radial-gradient(ellipse, rgba(251,191,36,.12), transparent 70%); z-index:4; pointer-events:none; }
.ph-room__light { position:absolute; top:0; left:20%; width:60%; height:40%;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.22), transparent 65%); pointer-events:none; z-index:4; }
.ph-room--night .ph-room__light { background:radial-gradient(ellipse at 70% 10%, rgba(147,197,253,.12), transparent 60%); }
.ph-mote { position:absolute; bottom:30%; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.7); pointer-events:none; animation:ph-mote-rise 5s linear forwards; z-index:8; }
@keyframes ph-mote-rise { 0%{opacity:0;transform:translateY(0)} 10%{opacity:.8} 100%{opacity:0;transform:translateY(-120px)} }
.ph-spotlight { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(200px,70%); height:48px;
  background:radial-gradient(ellipse, rgba(255,255,255,.28), transparent 72%); pointer-events:none; z-index:1; }
.ph-room-prop--pulse { animation:ph-prop-pulse .9s ease; }
@keyframes ph-prop-pulse { 0%,100%{transform:scale(1)} 30%{transform:scale(1.08)} 60%{transform:scale(.97)} }
.ph-room__bowl.ph-room-prop--pulse { animation:ph-bowl-shake .9s ease; }
@keyframes ph-bowl-shake { 0%,100%{transform:translateY(0)} 20%{transform:translateY(-2px) rotate(6deg)} 40%{transform:translateY(0) rotate(-5deg)} 60%{transform:translateY(-1px) rotate(4deg)} 80%{transform:rotate(-2deg)} }
.ph-room__bed.ph-room-prop--pulse .ph-bed__blanket { filter:brightness(1.1); animation:ph-blanket-fluff .9s ease; }
@keyframes ph-blanket-fluff { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.ph-room__shelf.ph-room-prop--pulse { filter:drop-shadow(0 0 10px rgba(99,102,241,.35)); }
.ph-room__toybox.ph-room-prop--pulse { animation:ph-prop-pulse .9s ease; }
.ph-heart { position:absolute; color:#f43f5e; font-size:22px; pointer-events:none; animation:ph-heart .9s ease-out forwards; z-index:12; }
.ph-particle { position:absolute; pointer-events:none; animation:ph-particle 1.1s cubic-bezier(.22,.68,.2,1) forwards; z-index:12; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.ph-particle--1 { animation-duration:1.15s; font-size:20px; }
.ph-particle--2 { animation-duration:1.25s; font-size:24px; }
.ph-particle--3 { animation-duration:1.05s; font-size:18px; }
.ph-particle--burst { animation-name:ph-particle-burst; animation-duration:1.2s; }
@keyframes ph-particle { 0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)} 15%{opacity:1} 100%{opacity:0;transform:translate(calc(var(--ph-dx,0px) * .3), calc(-1 * var(--ph-dy, 52px))) scale(1.2) rotate(18deg)} }
@keyframes ph-particle-burst { 0%{opacity:0;transform:translate(0,0) scale(.35)} 12%{opacity:1;transform:translate(calc(var(--ph-dx,0px) * .15), calc(var(--ph-dy,0px) * -.1)) scale(.9)} 100%{opacity:0;transform:translate(var(--ph-dx,0), calc(-1 * var(--ph-dy, 60px))) scale(1.25) rotate(24deg)} }
.ph-impact { position:absolute; left:50%; top:50%; width:80px; height:80px; margin:-40px 0 0 -40px; border-radius:50%; pointer-events:none; z-index:9; animation:ph-impact .65s ease-out forwards; border:3px solid rgba(244,63,94,.55); }
.ph-impact--laugh,.ph-impact--dance,.ph-impact--play { border-color:rgba(251,191,36,.6); }
.ph-impact--wash,.ph-impact--drink { border-color:rgba(56,189,248,.55); }
.ph-impact--sleep { border-color:rgba(129,140,248,.5); }
@keyframes ph-impact { 0%{opacity:.85;transform:scale(.35)} 100%{opacity:0;transform:scale(1.45)} }
.ph-combo { position:absolute; top:12px; right:12px; z-index:15; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg,#f97316,#ef4444); color:#fff; font-size:12px; font-weight:800; box-shadow:0 4px 14px rgba(239,68,68,.35); pointer-events:none; opacity:0; transform:scale(.8) translateY(6px); }
.ph-combo--pop { animation:ph-combo-pop 1.3s ease forwards; }
@keyframes ph-combo-pop { 0%{opacity:0;transform:scale(.7) translateY(8px)} 18%{opacity:1;transform:scale(1.08) translateY(0)} 75%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(.95) translateY(-4px)} }
.ph-stat-pop { position:absolute; z-index:14; transform:translateX(-50%); padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.96); font-size:11px; font-weight:800; color:#4f46e5; white-space:nowrap; pointer-events:none; box-shadow:0 4px 12px rgba(99,102,241,.2); border:1.5px solid #e0e7ff; animation:ph-stat-pop 1.1s ease-out forwards; }
@keyframes ph-stat-pop { 0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.85)} 20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05)} 100%{opacity:0;transform:translateX(-50%) translateY(-36px) scale(1)} }
.ph-pet--react { animation:ph-pet-react .42s cubic-bezier(.34,1.3,.64,1); }
@keyframes ph-pet-react { 0%{transform:scale(1)} 35%{transform:scale(1.06)} 100%{transform:scale(1)} }
.ph-pet--walk-trip { animation:ph-walk-trip 1.2s ease-in-out; }
@keyframes ph-walk-trip { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-18px)} 75%{transform:translateX(18px)} }
.ph-room--fx { animation:ph-room-flash .65s ease; }
.ph-room--fx-love,.ph-room--fx-stroke { --ph-room-glow:rgba(244,63,94,.12); }
.ph-room--fx-laugh,.ph-room--fx-dance,.ph-room--fx-play { --ph-room-glow:rgba(251,191,36,.1); }
.ph-room--fx-wash,.ph-room--fx-drink { --ph-room-glow:rgba(56,189,248,.1); }
.ph-room--fx-sleep { --ph-room-glow:rgba(129,140,248,.12); }
@keyframes ph-room-flash { 0%,100%{filter:none} 30%{filter:brightness(1.04) drop-shadow(0 0 24px var(--ph-room-glow, rgba(99,102,241,.1)))} }
@keyframes ph-heart { 0%{opacity:1;transform:translateY(0) scale(.6)} 100%{opacity:0;transform:translateY(-48px) scale(1.2)} }
.ph-fly-item { position:absolute; left:50%; bottom:40%; font-size:36px; pointer-events:none; animation:ph-fly .7s ease-out forwards; z-index:11; }
@keyframes ph-fly { 0%{opacity:1;transform:translate(-50%,40px) scale(.5)} 100%{opacity:0;transform:translate(-50%,-20px) scale(1.1)} }
.ph-name-tag { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:86px; text-align:center; z-index:10; pointer-events:none; white-space:nowrap; }
.ph-name-tag span { display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.95); font-size:12px; font-weight:800; color:#312e81; box-shadow:0 2px 8px rgba(99,102,241,.15); border:1.5px solid #e0e7ff; }
.ph-name-tag em { display:block; font-size:9px; font-style:normal; font-weight:700; color:#94a3b8; margin-top:3px; }
.ph-mood-chip { position:absolute; right:-8px; top:-6px; font-size:16px; font-style:normal; filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.ph-pet--enter { animation:ph-pet-enter .65s cubic-bezier(.34,1.2,.64,1); }
@keyframes ph-pet-enter { from{opacity:0;transform:translateY(24px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} }
.ph-pet { overflow:visible; }
.ph-ripple { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:rgba(99,102,241,.25); pointer-events:none; animation:ph-ripple .65s ease-out forwards; z-index:20; }
@keyframes ph-ripple { from{transform:scale(1);opacity:.7} to{transform:scale(14);opacity:0} }
.ph-care-tip { position:absolute; top:78px; left:50%; transform:translateX(-50%); z-index:14; display:flex; align-items:center; gap:6px; padding:7px 12px 7px 10px; border:none; border-radius:999px; background:rgba(255,255,255,.95); box-shadow:0 4px 16px rgba(244,63,94,.15); font-size:11px; font-weight:700; color:#be123c; cursor:pointer; white-space:nowrap; animation:ph-care-nudge 2.5s ease-in-out infinite; border:1.5px solid #fecdd3; }
.ph-care-tip em { font-style:normal; font-size:10px; color:#f43f5e; margin-left:2px; }
@keyframes ph-care-nudge { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-2px)} }
.ph-coin-burst { position:absolute; font-size:18px; pointer-events:none; animation:ph-coin-burst 1s ease-out forwards; z-index:13; }
@keyframes ph-coin-burst { 0%{opacity:1;transform:translateY(0) scale(.6)} 100%{opacity:0;transform:translateY(-56px) scale(1.1)} }
.ph-dock-btn span:first-child { position:relative; }
.ph-dock-dot { position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:#ef4444; border:2px solid #fff; animation:ph-dot-pulse 1.4s ease infinite; }
.ph-dock-btn--notify span:first-child { animation:ph-dock-glow 2s ease-in-out infinite; }
@keyframes ph-dot-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes ph-dock-glow { 0%,100%{box-shadow:0 3px 0 #ca8a04} 50%{box-shadow:0 3px 0 #ca8a04,0 0 12px rgba(250,204,21,.6)} }
.ph-toast { border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.ph-toast--ok { background:rgba(22,101,52,.92); }
.ph-toast--warn { background:rgba(154,52,18,.92); }
.ph-inv-hint { text-align:center; font-size:12px; color:#94a3b8; margin:12px 0 0; }
.ph-bag-summary { display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:12px; border-radius:16px; background:linear-gradient(135deg,#eef2ff,#faf5ff); border:1px solid #e0e7ff; flex-wrap:wrap; }
.ph-bag-summary > div { flex:1; min-width:72px; text-align:center; }
.ph-bag-summary span { font-size:20px; display:block; }
.ph-bag-summary strong { display:block; font-size:18px; color:#312e81; margin-top:2px; }
.ph-bag-summary em { font-size:10px; color:#94a3b8; font-style:normal; }
.ph-bag-quick { border:none; border-radius:999px; padding:8px 14px; background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ph-bag-tabs, .ph-feed-tabs { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; }
.ph-bag-tab, .ph-feed-tab { flex-shrink:0; border:none; border-radius:999px; padding:7px 12px; font-size:11px; font-weight:700; color:#64748b; background:#f1f5f9; cursor:pointer; }
.ph-bag-tab.on, .ph-feed-tab.on { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; }
.ph-inv-item { position:relative; transition:transform .12s, box-shadow .12s; }
.ph-inv-item--rec { border-color:#fbbf24 !important; box-shadow:0 0 0 2px rgba(251,191,36,.35); }
.ph-inv-rec { position:absolute; top:6px; right:6px; font-size:9px; font-style:normal; font-weight:800; color:#fff; background:#f59e0b; padding:2px 6px; border-radius:999px; }
.ph-mini-bar { height:4px; background:#e2e8f0; border-radius:999px; overflow:hidden; margin-top:4px; }
.ph-mini-bar i { display:block; height:100%; border-radius:999px; }
.ph-friend-tools { display:flex; gap:8px; margin-bottom:10px; }
.ph-friend-tools input { flex:1; border:2px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-size:13px; }
.ph-friend-sort { border:none; border-radius:12px; padding:0 12px; background:#eef2ff; color:#4f46e5; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ph-friend-tip { font-size:11px; color:#94a3b8; margin:0 0 10px; }
.ph-friend-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:#f8fafc; margin-bottom:8px; cursor:pointer; border:1px solid #e8edf3; transition:transform .1s, box-shadow .15s; }
.ph-friend-row:active { transform:scale(.99); box-shadow:0 2px 10px rgba(99,102,241,.1); }
.ph-friend-row__pet { width:64px; height:72px; flex-shrink:0; overflow:hidden; }
.ph-friend-row__main { flex:1; min-width:0; }
.ph-friend-row__main strong { display:block; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-friend-row__meta { font-size:11px; color:#64748b; }
.ph-friend-row__bars { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:160px; margin-top:4px; }
.ph-friend-row__dept { display:block; font-size:10px; color:#94a3b8; margin-top:3px; }
.ph-friend-row__go { font-size:12px; font-weight:700; color:#6366f1; flex-shrink:0; }
.ph-feed-list { max-height:50vh; overflow-y:auto; }
.ph-feed-item { display:flex; gap:10px; padding:12px; margin-bottom:8px; border-radius:14px; background:#f8fafc; border:1px solid #e8edf3; }
.ph-feed-item__ico { width:40px; height:40px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.ph-feed-item__head { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:4px; }
.ph-feed-item__head strong { font-size:12px; color:#312e81; }
.ph-feed-item__head time { font-size:10px; color:#94a3b8; flex-shrink:0; }
.ph-feed-item__body p { margin:0; font-size:13px; color:#475569; line-height:1.45; }
.ph-feed-loading, .ph-daily-loading { text-align:center; padding:32px; color:#94a3b8; }
.ph-daily-hero { text-align:center; margin-bottom:16px; padding-top:6px; position:relative; z-index:1; }
.ph-daily-streak { display:inline-block; padding:8px 16px; border-radius:999px; background:linear-gradient(135deg,#fef08a,#fde047); color:#854d0e; font-size:14px; font-weight:800; line-height:1.35; position:relative; z-index:2; box-shadow:0 2px 8px rgba(245,158,11,.2); }
.ph-daily-sub { font-size:12px; color:#64748b; margin:10px 0 0; line-height:1.5; position:relative; z-index:1; }
.ph-daily-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:14px; }
.ph-daily-day { text-align:center; padding:8px 4px; border-radius:12px; background:#f1f5f9; border:2px solid transparent; }
.ph-daily-day span { display:block; font-size:10px; font-weight:800; color:#94a3b8; }
.ph-daily-day em { display:block; font-size:10px; font-style:normal; font-weight:700; color:#6366f1; margin-top:4px; }
.ph-daily-day--done { background:#eef2ff; border-color:#c7d2fe; }
.ph-daily-day--today { background:linear-gradient(180deg,#fef08a,#fde047); border-color:#f59e0b; animation:ph-dock-glow 2s ease-in-out infinite; }
.ph-daily-reward { padding:14px; border-radius:16px; background:linear-gradient(135deg,#faf5ff,#eef2ff); border:1px solid #e0e7ff; margin-bottom:14px; }
.ph-daily-reward h4 { margin:0 0 8px; font-size:13px; color:#312e81; }
.ph-daily-loot { display:flex; flex-wrap:wrap; gap:8px; }
.ph-daily-loot span { padding:6px 10px; border-radius:999px; background:#fff; font-size:12px; font-weight:700; color:#4f46e5; }
.ph-daily-btn { width:100%; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:800; cursor:pointer; background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 6px 18px rgba(99,102,241,.35); min-height:48px; margin-bottom:env(safe-area-inset-bottom, 0px); }
.ph-daily-btn--done { background:#e2e8f0; color:#64748b; box-shadow:none; cursor:default; }
.ph-game-intro { margin-bottom:10px; }
.ph-game-stats { display:flex; gap:10px; margin-bottom:10px; }
.ph-game-stats > div { flex:1; text-align:center; padding:10px; border-radius:14px; background:#f8fafc; border:1px solid #e8edf3; }
.ph-game-stats strong { display:block; font-size:22px; color:#6366f1; }
.ph-game-stats em { font-size:10px; color:#94a3b8; font-style:normal; }
.ph-game-intro p { font-size:12px; color:#64748b; text-align:center; margin:0 0 8px; line-height:1.5; }
.ph-game-loot { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; list-style:none; padding:0; margin:0; font-size:10px; color:#94a3b8; }
.ph-game-loot li { padding:4px 8px; background:#fff; border-radius:999px; border:1px solid #e8edf3; }
.ph-game-hud { position:absolute; top:10px; right:10px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.85); font-size:11px; font-weight:800; color:#475569; z-index:2; }
.ph-game-wrap { position:relative; margin:0 auto; max-width:360px; }
.ph-game-start { width:100%; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:800; background:linear-gradient(135deg,#f59e0b,#ea580c); color:#fff; cursor:pointer; box-shadow:0 6px 16px rgba(245,158,11,.35); min-height:48px; -webkit-tap-highlight-color:transparent; }
.ph-game-start--off { background:#e2e8f0; color:#94a3b8; box-shadow:none; }
.ph-game-ghost { width:100%; margin-top:8px; border:none; border-radius:14px; padding:12px; font-size:14px; font-weight:700; background:#f1f5f9; color:#64748b; cursor:pointer; }
.ph-game-result { margin-top:12px; }
.ph-game-result.hidden { display:none; }
.ph-game-result__card { text-align:center; padding:16px; border-radius:16px; background:linear-gradient(135deg,#eef2ff,#faf5ff); border:2px solid #c7d2fe; }
.ph-game-result__score { display:block; font-size:32px; font-weight:900; color:#4f46e5; }
.ph-game-result__new { display:block; font-style:normal; font-size:13px; font-weight:800; color:#f59e0b; margin:4px 0; }
.ph-game-result__card p { margin:6px 0; font-size:13px; color:#475569; }
.ph-game-result__card small { color:#94a3b8; }
.ph-game-result__err { text-align:center; color:#dc2626; padding:12px; }
.ph-empty-card { text-align:center; padding:28px 16px; border-radius:16px; background:#f8fafc; border:1px dashed #e2e8f0; }
.ph-empty-card span { font-size:36px; display:block; margin-bottom:8px; }
.ph-empty-card p { margin:0; font-weight:700; color:#475569; }
.ph-empty-card em { display:block; font-size:12px; color:#94a3b8; font-style:normal; margin-top:6px; line-height:1.5; }
.ph-guest-item { padding:12px; margin-bottom:8px; border-radius:14px; background:#fff7ed; border:1px solid #fed7aa; }
.ph-guest-item__head { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ph-guest-item__head time { font-size:10px; color:#94a3b8; }
.ph-guest-item p { margin:0; font-size:13px; color:#475569; line-height:1.45; }
.ph-inv-item--has { border-color:#c7d2fe; background:linear-gradient(180deg,#fff,#eef2ff); box-shadow:0 2px 8px rgba(99,102,241,.08); }
.ph-inv-item--has:active { transform:scale(.97); }
.ph-inv-item--empty { opacity:.55; cursor:not-allowed; }
.ph-inv-item .desc { font-size:9px; color:#94a3b8; margin-top:3px; line-height:1.3; }
.ph-adopt__hero { text-align:center; padding:16px 12px; margin-bottom:12px; border-radius:18px; background:linear-gradient(135deg,#eef2ff,#faf5ff); border:1px solid #e0e7ff; }
.ph-adopt__emoji { font-size:36px; display:block; margin-bottom:8px; }
.ph-adopt__input { width:100%; box-sizing:border-box; padding:12px 14px; border:2px solid #e2e8f0; border-radius:14px; font-size:15px; margin-bottom:12px; }
.ph-adopt__go { width:100%; padding:14px; border:none; border-radius:14px; background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; font-size:16px; font-weight:700; box-shadow:0 6px 20px rgba(99,102,241,.35); }
.ph-species-opt { transition:border-color .2s, transform .12s, box-shadow .2s; }
.ph-species-opt.on { box-shadow:0 4px 16px rgba(99,102,241,.15); transform:scale(1.01); }

/* ── 排行榜 ── */
.ph-rank-loading { text-align:center; padding:40px 16px; color:#94a3b8; font-size:14px; }
.ph-rank-loading span { display:block; font-size:36px; margin-bottom:10px; animation:ph-rank-spin 1.2s linear infinite; }
@keyframes ph-rank-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.ph-rank-refresh { border:none; background:#eef2ff; color:#4f46e5; border-radius:8px; width:28px; height:28px; font-size:16px; font-weight:700; cursor:pointer; margin-left:6px; vertical-align:middle; }
.ph-rank-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.ph-rank-tab { border:none; border-radius:12px; padding:8px 4px; font-size:11px; font-weight:700; color:#64748b; background:#f1f5f9; cursor:pointer; transition:background .15s, color .15s, transform .1s; }
.ph-rank-tab.on { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 4px 12px rgba(99,102,241,.3); }
.ph-rank-tab:active { transform:scale(.97); }
.ph-rank-meta { text-align:center; font-size:11px; color:#94a3b8; margin-bottom:12px; }
.ph-rank-podium { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:14px; padding:12px 8px 8px; border-radius:16px; background:linear-gradient(180deg,#eef2ff,#fff); border:1px solid #e0e7ff; }
.ph-rank-podium__item { flex:1; text-align:center; min-width:0; }
.ph-rank-podium__item--1 { order:2; transform:translateY(-6px); }
.ph-rank-podium__item--2 { order:1; }
.ph-rank-podium__item--3 { order:3; }
.ph-rank-podium__medal { font-size:22px; line-height:1; margin-bottom:4px; }
.ph-rank-podium__item--1 .ph-rank-podium__medal { font-size:28px; }
.ph-rank-podium__pet {
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ph-rank-podium__item--1 .ph-rank-podium__pet { height: 88px; }
.ph-rank-podium__name {
  font-size: 12px;
  font-weight: 800;
  color: #312e81;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 2px 0;
  line-height: 1.2;
}
.ph-rank-podium__owner {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  margin-top: 1px;
}
.ph-rank-podium__score { font-size: 9px; color: #6366f1; font-weight: 700; margin-top: 3px; }

/* 排行榜内灵宠：覆盖家园 absolute，避免精灵飞出弹层 */
.ph-rank-podium__pet .ph-pet,
.ph-rank-row__pet .ph-pet {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 72px;
  max-height: 76px;
  margin: 0 auto !important;
  cursor: default;
  overflow: hidden;
  z-index: 1;
}
.ph-rank-podium__item--1 .ph-rank-podium__pet .ph-pet {
  max-width: 84px;
  max-height: 84px;
}
.ph-rank-podium__pet .ph-pet[data-stage='1'],
.ph-rank-podium__pet .ph-pet[data-stage='2'],
.ph-rank-row__pet .ph-pet[data-stage='1'],
.ph-rank-row__pet .ph-pet[data-stage='2'] {
  transform: none !important;
}
.ph-rank-podium__pet .ph-pet .ph-bubble,
.ph-rank-row__pet .ph-pet .ph-bubble,
.ph-rank-podium__pet .ph-pet .ph-name-tag,
.ph-rank-row__pet .ph-pet .ph-name-tag {
  display: none !important;
}
.ph-rank-row__pet {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.ph-rank {
  position: relative;
  overflow: hidden;
}
.ph-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 36vh;
  overflow-y: auto;
  position: relative;
}
.ph-rank-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#f8fafc; border:1px solid #e8edf3; cursor:pointer; transition:transform .1s, box-shadow .15s; }
.ph-rank-row:active { transform:scale(.99); }
.ph-rank-row--me { border-color:#c7d2fe; background:linear-gradient(90deg,#eef2ff,#fff); box-shadow:0 2px 10px rgba(99,102,241,.12); }
.ph-rank-row__pos { width:32px; text-align:center; font-size:18px; flex-shrink:0; }
.ph-rank-row__pos b { font-size:14px; color:#64748b; }
.ph-rank-row__pet {
  width: 52px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ph-rank-row__info { flex:1; min-width:0; }
.ph-rank-row__info strong { display:block; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-rank-row__owner { display:block; font-size:11px; color:#64748b; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-rank-row__score { display:block; font-size:10px; font-weight:700; color:#6366f1; margin-top:3px; }
.ph-rank-row__tag { font-size:10px; font-weight:800; color:#4f46e5; background:#e0e7ff; padding:3px 8px; border-radius:999px; flex-shrink:0; }
.ph-rank-row__go { color:#cbd5e1; font-size:18px; flex-shrink:0; }
.ph-rank-mine { margin-top:12px; padding-top:12px; border-top:2px dashed #e2e8f0; }
.ph-rank-mine__lbl { font-size:11px; font-weight:800; color:#94a3b8; margin-bottom:6px; letter-spacing:.04em; }
.ph-rank-empty { text-align:center; padding:24px; color:#94a3b8; font-size:13px; }
.ph-rank-tip { text-align:center; font-size:10px; color:#94a3b8; margin:12px 0 4px; line-height:1.5; }
.ph-rank--loading { opacity:.55; pointer-events:none; }
.ph-pet--mini .ph-name-tag { display:none; }
.ph-pet-zone { position:absolute; left:0; right:0; bottom:14%; height:280px; z-index:9; overflow:visible; touch-action:none; }
.ph-pet-zone--dragging { z-index:11; }
.ph-pet-zone .ph-spotlight { transition:left .15s ease-out; }
.ph-pet-zone--dragging .ph-spotlight { transition:none; }
.ph-pet { position:absolute; left:50%; bottom:24px; width:150px; height:145px; margin-top:0; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:filter .2s; transform:translateX(-50%); transform-origin:center bottom; z-index:2; }
.ph-pet--placed { cursor:grab; }
.ph-pet--dragging { cursor:grabbing; z-index:12; transition:none !important; will-change:transform; touch-action:none; }
.ph-pet--dragging .ph-bubble { pointer-events:none; opacity:.95; transition:none; animation:none; }
.ph-pet--dragging .ph-name-tag { opacity:.85; transition:none; }
.ph-pet--dragging .ph-pet__anim { transition:none !important; animation:none !important; }
.ph-pet--dragging .ph-sprite__glow { opacity:0; }
.ph-pet:active:not(.ph-pet--dragging) { filter:brightness(1.03); }
.ph-pet__anim { width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; transition:transform .28s cubic-bezier(.34,1.15,.64,1); }
.ph-pet:has(.ph-sprite--ready) .ph-pet__anim { animation:none !important; }
.ph-pet--acting .ph-pet__anim { animation:none !important; }
.ph-pet--acting { z-index:9; }
.ph-pet--mini { width:72px; height:76px; margin-top:0; }
.ph-pet--mini .ph-pet__anim { animation:none; }
.ph-pet--mini .ph-bubble { display:none; }
.ph-pet.walk .ph-pet__anim,
.ph-pet.jump .ph-pet__anim,
.ph-pet.ph-act-walk .ph-pet__anim,
.ph-pet.ph-act-dance .ph-pet__anim,
.ph-pet.ph-act-sad .ph-pet__anim,
.ph-pet.ph-act-sleep .ph-pet__anim,
.ph-pet.ph-act-angry .ph-pet__anim,
.ph-pet.ph-act-wave .ph-pet__anim,
.ph-pet.ph-act-love .ph-pet__anim,
.ph-pet.ph-act-play .ph-pet__anim,
.ph-pet.ph-act-wash .ph-pet__anim,
.ph-pet.ph-act-eat .ph-pet__anim,
.ph-pet.ph-act-surprise .ph-pet__anim,
.ph-pet.ph-act-jump .ph-pet__anim { animation:none !important; }
.ph-pet[data-stage='1']:not(.ph-pet--placed) { transform:translateX(-50%) scale(.82); }
.ph-pet[data-stage='2']:not(.ph-pet--placed) { transform:translateX(-50%) scale(.92); }
.ph-pet[data-stage='1'].ph-pet--placed { transform:scale(.82); }
.ph-pet[data-stage='2'].ph-pet--placed { transform:scale(.92); }

/* ── img 精灵图 + Lottie 层 ── */
.ph-sprite { position:relative; display:flex; align-items:flex-end; justify-content:center; min-width:60px; min-height:80px; }
.ph-sprite__viewport { position:relative; overflow:hidden; flex-shrink:0; background:transparent; filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)); transform-origin:center bottom; will-change:transform; contain:paint; }
.ph-sprite__img { display:block; position:absolute; left:0; bottom:0; max-width:none; pointer-events:none; user-select:none; -webkit-user-drag:none; transition:none !important; image-rendering:auto; backface-visibility:hidden; }
.ph-sprite--breathe .ph-sprite__viewport { animation:sp-breathe 3.4s ease-in-out infinite; }
.ph-sprite--breathe .ph-sprite__shadow { animation:sp-shadow-breathe 3.4s ease-in-out infinite; }
@keyframes sp-breathe { 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-3px) scale(1.015,0.99)} 70%{transform:translateY(-1px) scale(1.008,0.995)} }
@keyframes sp-shadow-breathe { 0%,100%{transform:translateX(-50%) scale(1); opacity:1} 45%{transform:translateX(-50%) scale(.88); opacity:.75} 70%{transform:translateX(-50%) scale(.94); opacity:.85} }
.ph-sprite__placeholder { position:absolute; left:50%; bottom:0; transform:translateX(-50%); font-size:52px; line-height:1; z-index:0; pointer-events:none; animation:ph-placeholder-bounce 1.2s ease-in-out infinite; }
.ph-sprite--ready .ph-sprite__placeholder { display:none; }
.ph-sprite--ready .ph-sprite__img { position:absolute; z-index:1; }
.ph-sprite--error .ph-sprite__placeholder { display:block; z-index:2; }
.ph-sprite--error .ph-sprite__img { display:none; }
.ph-sprite__viewport--pop { animation:sp-ease-in .32s cubic-bezier(.34,1.2,.64,1); }
@keyframes sp-ease-in { 0%{transform:scale(.96) translateY(4px); opacity:.85} 100%{transform:scale(1) translateY(0); opacity:1} }
@keyframes ph-placeholder-bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-6px)} }
.ph-sprite[data-species='cloudie'] .ph-sprite__viewport { filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)) hue-rotate(155deg) saturate(1.15); }
.ph-sprite[data-species='qubit'] .ph-sprite__viewport { filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)) hue-rotate(285deg) saturate(1.1); }
.ph-sprite__glow { position:absolute; inset:-8px -12px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%); opacity:0; pointer-events:none; z-index:1; transition:opacity .2s; }
.ph-sprite__glow--on { opacity:1; animation:sp-glow .32s ease-out; }
.ph-sprite__shadow { position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:72%; height:10px; background:radial-gradient(ellipse,rgba(0,0,0,.2),transparent 72%); border-radius:50%; z-index:0; display:block; transition:transform .2s ease, opacity .2s ease; }
.ph-pet--acting .ph-sprite__shadow { transition:transform .12s ease, opacity .12s ease; }
.ph-pet--acting[data-act='jump'] .ph-sprite__shadow,
.ph-pet--acting[data-act='play'] .ph-sprite__shadow { transform:translateX(-50%) scale(.7); opacity:.55; }
.ph-pet--acting[data-act='sleep'] .ph-sprite__shadow { transform:translateX(-50%) scale(1.08); opacity:.35; }
.ph-pet--acting[data-act='dance'] .ph-sprite__shadow { animation:sp-shadow-dance .7s ease-in-out infinite; }
@keyframes sp-glow { 0%{opacity:0;transform:scale(.8)} 50%{opacity:1} 100%{opacity:0;transform:scale(1.15)} }
@keyframes sp-shadow-dance { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(.85)} }
.ph-lottie { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); width:140px; height:140px; pointer-events:none; z-index:6; opacity:0; transition:opacity .15s; }
.ph-lottie--in { opacity:1; }
.ph-expr { position:absolute; inset:0; pointer-events:none; z-index:3; }
.ph-expr-badge { position:absolute; top:-4px; right:-10px; font-size:18px; z-index:4; animation:ph-badge-pop .5s ease; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.ph-expr__z { position:absolute; top:0; right:-6px; font-size:15px; font-weight:800; color:#64748b; animation:qq-zzz 1.8s ease-in-out infinite; }
.ph-expr__z--2 { right:8px; top:-12px; font-size:12px; animation-delay:.5s; }
.ph-expr__drool { position:absolute; right:8%; top:42%; width:7px; height:14px; background:#7dd3fc; border-radius:0 0 8px 8px; animation:qq-drool 1.1s infinite; }
.ph-expr__tear { position:absolute; top:38%; left:42%; width:6px; height:10px; background:#7dd3fc; border-radius:50%; animation:qq-drool 1.2s infinite; }
.ph-expr__tear--2 { left:52%; animation-delay:.6s; }
.ph-expr__spark { position:absolute; top:8%; right:10%; font-size:14px; animation:qq-zzz 1.4s ease-in-out infinite; }
.ph-expr__spark--2 { top:18%; right:22%; font-size:11px; animation-delay:.7s; }
.ph-expr__icon { position:absolute; font-size:16px; }
.ph-expr__fly { top:25%; right:-8px; animation:sp-fly-bug 2s linear infinite; }
/* 无专属精灵图的补充动效 */
.ph-sprite--poke .ph-sprite__viewport { animation:sp-shake .12s ease-in-out 6 !important; }
.ph-pet--mini .ph-sprite { transform:scale(.22); transform-origin:center bottom; }
.ph-pet--mini .ph-expr-badge, .ph-pet--mini .ph-lottie { display:none; }
@keyframes sp-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes sp-fly-bug { 0%{transform:translate(0,0)} 50%{transform:translate(-10px,-6px)} 100%{transform:translate(0,0)} }
@keyframes qq-zzz { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(-14px)} }
@keyframes qq-drool { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.25)} }
@keyframes ph-badge-pop { 0%{transform:scale(0)} 70%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* 快捷互动栏 */
.ph-quick-act { display:flex; justify-content:center; gap:8px; padding:8px 12px 4px; background:linear-gradient(180deg,rgba(255,255,255,.92),#fff); border-top:1px solid #e8edf3; }
.ph-quick-act button { border:none; width:48px; height:44px; border-radius:14px; background:linear-gradient(180deg,#f8fafc,#eef2ff); box-shadow:0 2px 0 #c7d2fe; font-size:22px; cursor:pointer; transition:transform .1s; }
.ph-quick-act button:active { transform:translateY(2px); box-shadow:0 1px 0 #c7d2fe; }
.ph-quick-act button span { display:block; font-size:9px; font-weight:700; color:#64748b; margin-top:1px; }
.ph-quick-act__more { background:linear-gradient(180deg,#fef08a,#fde047) !important; box-shadow:0 2px 0 #ca8a04 !important; }
.ph-quick-act__more span { color:#854d0e !important; }

/* 更多互动面板 */
.ph-act-panel { background:linear-gradient(180deg,#fafbff,#fff); border-top:2px solid #e0e7ff; max-height:42vh; display:flex; flex-direction:column; animation:ph-panel-in .28s cubic-bezier(.34,1.2,.64,1); }
.ph-act-panel.hidden { display:none; }
.ph-act-panel--open { animation:ph-panel-in .28s cubic-bezier(.34,1.2,.64,1); }
@keyframes ph-panel-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.ph-act-panel__head { display:flex; justify-content:space-between; align-items:center; padding:8px 14px 6px; border-bottom:1px solid #f1f5f9; flex-shrink:0; }
.ph-act-panel__head span { font-size:12px; font-weight:800; color:#6366f1; }
.ph-act-panel__head button { border:none; background:#eef2ff; color:#4f46e5; border-radius:999px; padding:5px 12px; font-size:11px; font-weight:700; cursor:pointer; }
.ph-act-panel__body { overflow-y:auto; padding:8px 12px 10px; -webkit-overflow-scrolling:touch; }
.ph-act-group { margin-bottom:10px; }
.ph-act-group h4 { font-size:11px; font-weight:800; color:#94a3b8; margin:0 0 6px 4px; letter-spacing:.04em; }
.ph-act-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.ph-act-grid button { border:none; border-radius:12px; padding:8px 4px 6px; background:linear-gradient(180deg,#f8fafc,#f1f5f9); box-shadow:0 2px 0 #e2e8f0; cursor:pointer; transition:transform .08s, box-shadow .08s, background .15s; }
.ph-act-grid button:active { transform:translateY(2px); box-shadow:0 1px 0 #e2e8f0; }
.ph-act-btn--flash { background:linear-gradient(180deg,#eef2ff,#e0e7ff) !important; box-shadow:0 0 0 2px #a5b4fc, 0 4px 12px rgba(99,102,241,.25) !important; transform:scale(1.1); animation:ph-act-flash .45s ease; }
@keyframes ph-act-flash { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1.06)} }
.ph-act-ico { display:block; font-size:22px; line-height:1.1; }
.ph-act-lbl { display:block; font-size:9px; font-weight:700; color:#64748b; margin-top:3px; }

.ph-pet-fallback { font-size:64px; text-align:center; line-height:180px; }
.ph-bubble { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:10px; min-width:130px; max-width:240px; padding:11px 16px; background:#fff; border-radius:18px; font-size:13px; font-weight:600; color:#334155; text-align:center; box-shadow:0 6px 20px rgba(99,102,241,.15), 0 2px 6px rgba(0,0,0,.06); z-index:20; border:2px solid #e0e7ff; line-height:1.45; white-space:normal; animation:ph-bubble-float 3s ease-in-out infinite; }
.ph-bubble--below { bottom:auto; top:100%; margin-bottom:0; margin-top:12px; animation:ph-bubble-float-below 3s ease-in-out infinite; }
.ph-bubble--below::after { bottom:auto; top:-8px; border-top-color:transparent; border-bottom-color:#fff; filter:drop-shadow(0 -2px 0 #e0e7ff); }
@keyframes ph-bubble-float-below { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(3px)} }
.ph-bubble--pop { animation:ph-bubble-pop .35s cubic-bezier(.34,1.3,.64,1); }
.ph-bubble--typing { animation:none; }
.ph-bubble__caret { display:inline-block; width:2px; height:1em; background:#6366f1; margin-left:2px; vertical-align:text-bottom; animation:ph-caret .6s step-end infinite; }
@keyframes ph-bubble-float { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)} }
@keyframes ph-bubble-pop { 0%{opacity:0;transform:translateX(-50%) scale(.85) translateY(6px)} 100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)} }
@keyframes ph-caret { 0%,100%{opacity:1} 50%{opacity:0} }
.ph-bubble__mood { font-size:15px; }
.ph-bubble::after { content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color:#fff; filter:drop-shadow(0 2px 0 #e0e7ff); }
.ph-status { position:absolute; top:12px; left:12px; right:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; z-index:10; }
.ph-stat { background:rgba(255,255,255,.92); border-radius:10px; padding:5px 6px 4px; font-size:9px; font-weight:700; color:#64748b; text-align:center; backdrop-filter:blur(6px); box-shadow:0 1px 4px rgba(0,0,0,.05); transition:transform .25s, box-shadow .25s; }
.ph-stat--pulse { transform:scale(1.04); box-shadow:0 2px 10px rgba(99,102,241,.15); }
.ph-stat__ico { font-size:11px; display:block; line-height:1; }
.ph-stat__lbl { display:block; font-size:8px; margin-top:1px; letter-spacing:.02em; }
.ph-stat__bar { height:4px; background:#e2e8f0; border-radius:999px; margin:3px 0 2px; overflow:hidden; }
.ph-stat__bar i { display:block; height:100%; border-radius:999px; transition:width .45s cubic-bezier(.34,1.2,.64,1); }
.ph-stat strong { display:block; font-size:11px; color:#0f172a; font-weight:800; }
.ph-stat--low { background:rgba(254,242,242,.95); border:1px solid #fecaca; }
.ph-stat--low strong { color:#dc2626; }
.ph-stat--low .ph-stat__bar { background:#fee2e2; }
.ph-dock { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding:10px 8px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:2px solid #f1f5f9; }
.ph-dock-btn { display:flex; flex-direction:column; align-items:center; gap:4px; border:none; background:transparent; padding:6px 2px; cursor:pointer; }
.ph-dock-btn span:first-child { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(180deg,#fff,#f1f5f9); box-shadow:0 3px 0 #cbd5e1, inset 0 1px 0 rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.8); }
.ph-dock-btn:active span:first-child { transform:translateY(2px); box-shadow:0 1px 0 #cbd5e1; }
.ph-dock-btn span:last-child { font-size:10px; font-weight:700; color:#475569; }
.ph-dock-btn--hot span:first-child { background:linear-gradient(180deg,#fef9c3,#fde047); box-shadow:0 3px 0 #ca8a04, inset 0 1px 0 rgba(255,255,255,.5); }
.ph-dock-btn--notify span:first-child { animation:ph-dock-glow 2s ease-in-out infinite; }
.ph-sheet { position:fixed; inset:0; z-index:10050; background:rgba(15,23,42,0); display:flex; align-items:flex-end; justify-content:center; transition:background .28s; pointer-events:none; }
body.ph-sheet-open { overflow:hidden; }
.ph-sheet.ph-sheet--open { pointer-events:auto; }
.ph-sheet.ph-sheet--visible { background:rgba(15,23,42,.45); }
.ph-sheet.hidden { display:none; }
.ph-sheet__panel { width:100%; max-width:480px; max-height:min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)); background:#fff; border-radius:20px 20px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateY(100%); transition:transform .28s cubic-bezier(.34,1.15,.64,1); display:flex; flex-direction:column; box-sizing:border-box; }
.ph-sheet.ph-sheet--visible .ph-sheet__panel { transform:translateY(0); }
.ph-sheet__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-shrink:0; }
#phSheetBody { flex:1; min-height:0; }
.ph-sheet--game .ph-sheet__panel { max-height:min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px))); padding-bottom:0; overflow:hidden; }
.ph-sheet--game #phSheetBody { display:flex; flex-direction:column; overflow:hidden; }
.ph-game-sheet { flex:1; min-height:0; display:flex; flex-direction:column; }
.ph-game-sheet__scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.ph-game-sheet__footer { flex-shrink:0; padding:12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid #e8edf3; background:#fff; position:sticky; bottom:0; z-index:3; }
.ph-game-timer { position:absolute; top:0; left:0; height:4px; background:linear-gradient(90deg,#6366f1,#f472b6); border-radius:0 2px 2px 0; transition:width .1s linear; z-index:2; }
.ph-game-score { text-align:center; font-size:28px; font-weight:800; color:#6366f1; margin:8px 0 2px; }
.ph-game-combo { text-align:center; font-size:13px; font-weight:700; color:#f59e0b; min-height:18px; margin-bottom:8px; }
.ph-levelup { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.4); opacity:0; transition:opacity .35s; pointer-events:none; }
.ph-levelup.show { opacity:1; }
.ph-levelup__card { background:#fff; border-radius:20px; padding:24px 32px; text-align:center; box-shadow:0 20px 60px rgba(99,102,241,.3); transform:scale(.7); transition:transform .4s cubic-bezier(.34,1.4,.64,1); border:3px solid #e0e7ff; }
.ph-levelup.show .ph-levelup__card { transform:scale(1); }
.ph-levelup__card span { font-size:40px; display:block; margin-bottom:8px; }
.ph-levelup__card strong { display:block; font-size:20px; color:#312e81; }
.ph-levelup__card em { display:block; font-size:15px; font-style:normal; font-weight:800; color:#6366f1; margin-top:4px; }
.ph-inv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ph-inv-item { border:2px solid #e2e8f0; border-radius:14px; padding:10px 8px 8px; text-align:center; background:#f8fafc; cursor:pointer; }
.ph-inv-item .ico { font-size:32px; } .ph-inv-item .name { font-size:12px; font-weight:700; } .ph-inv-item .cnt { font-size:11px; color:#6366f1; font-weight:800; margin-top:4px; }
.ph-toast { position:fixed; top:45%; left:50%; transform:translate(-50%,-50%); z-index:200; padding:14px 20px; border-radius:16px; background:rgba(30,27,75,.92); color:#fff; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s; max-width:85%; text-align:center; }
.ph-toast.show { opacity:1; }
.ph-adopt { padding:20px 16px; } .ph-adopt h2 { color:#312e81; text-align:center; }
.ph-species-opt { display:flex; align-items:center; gap:14px; padding:14px; border:3px solid #e2e8f0; border-radius:18px; margin-bottom:10px; cursor:pointer; background:#fff; }
.ph-species-opt.on { border-color:#6366f1; background:#eef2ff; }
.ph-visit-banner { position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:15; padding:8px 16px; border-radius:999px; background:rgba(99,102,241,.92); color:#fff; font-size:12px; font-weight:700; }
#phMiniCanvas { display:block; width:100%; max-width:360px; margin:0 auto; border-radius:16px; background:linear-gradient(180deg,#bae6fd,#fef08a); touch-action:none; -webkit-tap-highlight-color:transparent; }
.ph-species-opt .ph-pet--mini { pointer-events:none; width:76px; height:88px; }
.ph-friend-row .ph-pet--mini { flex-shrink:0; width:72px; height:84px; }
.mini-pet { width:76px; height:88px; flex-shrink:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }

/* —— 定位 / 天气联动场景 —— */
.ph-scene-chip { position:absolute; top:108px; left:12px; right:12px; z-index:14; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; pointer-events:none; }
.ph-scene-chip__place, .ph-scene-chip__wx { padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.94); font-size:10px; font-weight:800; color:#4338ca; box-shadow:0 2px 10px rgba(99,102,241,.15); border:1.5px solid #e0e7ff; white-space:nowrap; }
.ph-scene-chip__wx { color:#0369a1; border-color:#bae6fd; background:rgba(240,249,255,.95); }
.ph-scene-panorama { position:absolute; inset:0 0 34%; z-index:1; pointer-events:none; overflow:hidden; }
.ph-room--landmark .ph-room__outside { opacity:0; }
.ph-room--landmark .ph-room__window-glass { background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 60%); }
.ph-room--landmark.ph-scene--beijing .ph-room__wall {
  background:linear-gradient(180deg,#fecaca 0%,#fca5a5 38%,#f87171 100%);
}
.ph-room--landmark.ph-scene--beijing .ph-room__curtain { background:linear-gradient(180deg,#dc2626,#b91c1c); }

/* 故宫动漫景 */
.ph-scene-panorama--beijing { background:linear-gradient(180deg,#7dd3fc 0%,#bae6fd 35%,#fef3c7 68%,#fde68a 100%); }
.ph-gugong-mountain { position:absolute; left:0; right:0; top:8%; height:28%; background:linear-gradient(180deg,transparent,#94a3b8 80%); clip-path:polygon(0 100%,8% 55%,18% 70%,30% 40%,42% 62%,55% 35%,68% 58%,80% 42%,92% 65%,100% 48%,100% 100%); opacity:.45; }
.ph-gugong-wall { position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(180deg,#dc2626,#b91c1c 55%,#991b1b); border-top:4px solid #fbbf24; }
.ph-gugong-wall::before { content:''; position:absolute; inset:12% 6% auto; height:3px; background:repeating-linear-gradient(90deg,#fbbf24 0,#fbbf24 12px,transparent 12px,transparent 20px); opacity:.7; }
.ph-gugong-stairs { position:absolute; left:50%; bottom:0; width:120px; height:18%; margin-left:-60px; background:linear-gradient(180deg,#e5e7eb,#d1d5db); clip-path:polygon(10% 0,90% 0,100% 100%,0 100%); }
.ph-gugong-roof { position:absolute; left:50%; height:22px; background:linear-gradient(180deg,#fde047,#f59e0b); border-radius:50% 50% 0 0 / 100% 100% 0 0; box-shadow:0 -2px 0 #b45309; }
.ph-gugong-roof::after { content:''; position:absolute; left:50%; top:-8px; width:10px; height:10px; margin-left:-5px; background:#fbbf24; border-radius:2px; transform:rotate(45deg); }
.ph-gugong-roof--1 { bottom:38%; width:180px; margin-left:-90px; height:28px; }
.ph-gugong-roof--2 { bottom:48%; width:140px; margin-left:-70px; opacity:.92; }
.ph-gugong-roof--3 { bottom:56%; width:100px; margin-left:-50px; opacity:.85; }
.ph-gugong-trees { position:absolute; bottom:8%; left:8%; width:36px; height:48px; background:radial-gradient(circle at 50% 30%,#4ade80,#16a34a); border-radius:50% 50% 40% 40%; }
.ph-gugong-trees::after { content:''; position:absolute; left:48px; top:8px; width:32px; height:40px; background:radial-gradient(circle at 50% 30%,#4ade80,#16a34a); border-radius:50% 50% 40% 40%; }

/* 上海外滩 */
.ph-scene-panorama--shanghai { background:linear-gradient(180deg,#1e3a5f 0%,#7c3aed 45%,#f472b6 100%); }
.ph-bund-river { position:absolute; left:0; right:0; bottom:0; height:28%; background:linear-gradient(180deg,#0ea5e9,#0369a1); opacity:.85; }
.ph-bund-skyline { position:absolute; left:5%; right:5%; bottom:24%; height:35%; background:linear-gradient(180deg,#1e293b,#0f172a); clip-path:polygon(0 100%,5% 60%,12% 75%,20% 40%,28% 55%,36% 30%,44% 50%,52% 25%,60% 45%,68% 35%,76% 55%,84% 38%,92% 62%,100% 48%,100% 100%); }
.ph-bund-pearl { position:absolute; right:22%; bottom:42%; width:14px; height:90px; background:linear-gradient(180deg,#f472b6,#ec4899); border-radius:8px 8px 40% 40%; box-shadow:0 0 20px rgba(244,114,182,.6); }
.ph-bund-tower { position:absolute; right:18%; bottom:42%; width:28px; height:110px; background:linear-gradient(180deg,#a78bfa,#6366f1); clip-path:polygon(30% 0,70% 0,100% 100%,0 100%); }

/* 银川贺兰山 */
.ph-scene-panorama--yinchuan { background:linear-gradient(180deg,#38bdf8,#fef08a 70%,#fcd34d); }
.ph-helan-peak { position:absolute; left:0; right:0; top:18%; height:40%; background:linear-gradient(180deg,#64748b,#475569); clip-path:polygon(0 100%,15% 45%,35% 65%,50% 30%,65% 55%,82% 38%,100% 60%,100% 100%); }
.ph-helan-sand { position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg,#fde68a,#f59e0b); }
.ph-helan-city { position:absolute; left:10%; right:10%; bottom:22%; height:16%; background:repeating-linear-gradient(90deg,#94a3b8 0,#94a3b8 16px,#cbd5e1 16px,#cbd5e1 18px); opacity:.5; border-radius:4px; }

/* 杭州西湖 */
.ph-scene-panorama--hangzhou { background:linear-gradient(180deg,#7dd3fc,#a7f3d0 55%,#6ee7b7); }
.ph-xihu-mountain { position:absolute; left:0; right:0; top:20%; height:30%; background:#86efac; clip-path:polygon(0 100%,20% 50%,45% 70%,70% 40%,100% 65%,100% 100%); opacity:.6; }
.ph-xihu-lake { position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg,#38bdf8,#0ea5e9); border-radius:50% 50% 0 0 / 20% 20% 0 0; }
.ph-xihu-bridge { position:absolute; left:20%; right:20%; bottom:30%; height:20px; border:3px solid #a16207; border-bottom:none; border-radius:100% 100% 0 0; }
.ph-xihu-lotus { position:absolute; bottom:18%; left:30%; font-size:18px; opacity:.8; }

/* 成都 */
.ph-scene-panorama--chengdu { background:linear-gradient(180deg,#bbf7d0,#fef08a); }
.ph-cd-bamboo { position:absolute; left:12%; bottom:10%; width:8px; height:55%; background:repeating-linear-gradient(180deg,#16a34a 0,#16a34a 18px,#15803d 18px,#15803d 20px); box-shadow:16px 0 0 #22c55e, 32px 4px 0 #16a34a; }
.ph-cd-roof { position:absolute; right:15%; bottom:28%; width:100px; height:24px; background:#b91c1c; border-radius:4px; box-shadow:0 -16px 0 -4px #7f1d1d, 0 -28px 0 -8px #991b1b; }
.ph-cd-panda::after { content:'🐼'; position:absolute; right:22%; bottom:18%; font-size:32px; }

/* 广州 */
.ph-scene-panorama--guangzhou { background:linear-gradient(180deg,#38bdf8,#fda4af); }
.ph-canton-tower { position:absolute; right:28%; bottom:15%; width:16px; height:70%; background:linear-gradient(180deg,#f472b6,#ec4899); clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }
.ph-canton-river { position:absolute; left:0; right:0; bottom:0; height:22%; background:#0ea5e9; opacity:.75; }

/* 西安 */
.ph-scene-panorama--xian { background:linear-gradient(180deg,#fde68a,#fca5a5); }
.ph-dayan-pagoda { position:absolute; right:25%; bottom:12%; width:48px; height:55%; background:linear-gradient(180deg,#a16207,#92400e); clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); }
.ph-dayan-pagoda::before { content:''; position:absolute; left:10%; right:10%; top:20%; height:8%; background:#78350f; box-shadow:0 22% 0 #78350f, 0 44% 0 #78350f; }
.ph-dayan-wall { position:absolute; left:0; right:0; bottom:0; height:18%; background:#b91c1c; }

/* 深圳 */
.ph-scene-panorama--shenzhen { background:linear-gradient(180deg,#1e40af,#38bdf8 60%,#a5f3fc); }
.ph-sz-bridge { position:absolute; left:10%; right:10%; bottom:30%; height:8px; background:#e2e8f0; border-radius:4px; transform:skewY(-3deg); }
.ph-sz-towers { position:absolute; right:15%; bottom:15%; width:60%; height:40%; background:repeating-linear-gradient(90deg,#1e293b 0,#1e293b 14px,transparent 14px,transparent 22px); opacity:.7; }

/* 天气特效层 */
.ph-weather-fx { position:absolute; inset:0; z-index:16; pointer-events:none; overflow:hidden; }
.ph-weather-fx--rain .ph-rain-drop { position:absolute; top:-12px; width:2px; height:14px; background:linear-gradient(180deg,transparent,rgba(147,197,253,.85)); border-radius:2px; animation:ph-rain-fall linear infinite; }
@keyframes ph-rain-fall { to{ transform:translateY(110vh); opacity:.2; } }
.ph-weather-fx--snow .ph-snow-flake { position:absolute; top:-10px; font-size:12px; opacity:.85; animation:ph-snow-fall linear infinite; }
@keyframes ph-snow-fall { to{ transform:translateY(105vh) rotate(180deg); } }
.ph-weather-fx--fog { background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(226,232,240,.25) 40%,transparent); animation:ph-fog-pulse 6s ease-in-out infinite; }
@keyframes ph-fog-pulse { 0%,100%{opacity:.55} 50%{opacity:.85} }
.ph-weather-fx--sunray { background:radial-gradient(circle at 78% 12%,rgba(254,240,138,.35),transparent 45%); animation:ph-sunray 8s ease-in-out infinite; }
@keyframes ph-sunray { 0%,100%{opacity:.6} 50%{opacity:1} }
.ph-weather--rain .ph-room__outside { filter:brightness(.85) saturate(.9); }
.ph-weather--snow .ph-scene-panorama, .ph-weather--snow .ph-room__wall { filter:brightness(1.05) saturate(.9); }
.ph-weather--fog .ph-scene-panorama { filter:blur(1px) brightness(1.08); }
.ph-room--night.ph-room--landmark .ph-scene-panorama { filter:brightness(.55) saturate(.85); }
.ph-room--night.ph-room--landmark .ph-scene-panorama--shanghai { filter:brightness(.75) saturate(1.1); }
.ph-room--sunset .ph-scene-panorama { filter:sepia(.15) saturate(1.1) hue-rotate(-8deg); }

/* —— 手机端游戏与弹层适配 —— */
@media (max-width: 480px) {
  .ph-hud { padding:8px 10px 4px; }
  .ph-hud__back { padding:7px 12px; font-size:12px; }
  .ph-coin, .ph-lv { font-size:11px; padding:5px 8px; }
  .ph-room { margin:0 6px; min-height:min(52dvh, 320px); }
  .ph-pet-zone { height:min(240px, 38dvh); bottom:12%; }
  .ph-scene-chip { top:96px; left:8px; right:8px; }
  .ph-scene-chip__place, .ph-scene-chip__wx { font-size:9px; padding:4px 8px; }
  .ph-status { gap:4px; padding:6px 8px; }
  .ph-stat { font-size:9px; }
  .ph-quick-act { gap:6px; padding:6px 8px 2px; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; flex-wrap:nowrap; }
  .ph-quick-act button { flex-shrink:0; width:44px; height:40px; font-size:20px; }
  .ph-quick-act button span { font-size:8px; }
  .ph-dock { gap:2px; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); }
  .ph-dock-btn { font-size:9px; padding:6px 2px; min-height:52px; }
  .ph-dock-btn span:first-child { font-size:20px; }
  .ph-act-panel { max-height:min(48dvh, 360px); }
  .ph-sheet__panel { max-height:min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px))); }
  .ph-sheet--game .ph-sheet__panel { max-height:min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px))); }
  .ph-game-intro p { font-size:11px; }
  .ph-game-loot { font-size:9px; }
  .ph-game-score { font-size:24px; margin:4px 0 0; }
  .ph-inv-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .ph-inv-item .ico { font-size:28px; }
  .ph-rank-list { max-height:min(40dvh, 320px); }
  .ph-feed-list { max-height:min(48dvh, 360px); }
  .ph-daily-strip { gap:4px; }
  .ph-daily-day { padding:6px 2px; }
  .ph-daily-day span, .ph-daily-day em { font-size:9px; }
  .gc-header { padding:10px 12px 6px; }
  .gc-hero { margin:0 10px 12px; padding:14px; }
  .gc-hero h2 { font-size:18px; }
  .gc-list { padding:0 10px calc(12px + env(safe-area-inset-bottom)); }
}