/* ================================================================
   心屿星球 · 独立情感陪伴空间
   视觉基调：低饱和治愈系 / 琉璃质感 / 16px 圆角 / 柔和阴影
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: #4d4a56;
  --ink-soft: #8a8698;
  --cream: #faf6f0;
  --card: rgba(255, 251, 245, 0.78);
  --radius: 16px;
  font-size: 16px;
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #141a3a;
  user-select: none;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; border: none; outline: none; background: none; color: inherit; user-select: text; }

/* 与心桥主页一致的顶部头像滑轨 */
.planet-contact-rail {
  position: fixed; z-index: 2147482000; left: 0; right: 0;
  top: env(safe-area-inset-top); height: 118px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px calc((100% - 86px) / 2) 10px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  background: linear-gradient(180deg, rgba(13,19,49,.94), rgba(20,26,58,.72) 72%, transparent);
  pointer-events: auto;
}
.planet-contact-rail::-webkit-scrollbar { display: none; }
.planet-contact-rail[hidden] { display:none; }
.planet-rail-card {
  position: relative; flex: 0 0 86px; width: 86px; padding: 0;
  display: grid; justify-items: center; gap: 7px;
  color: rgba(255,255,255,.86); scroll-snap-align: center; scroll-snap-stop: always;
}
.planet-rail-card img,.planet-rail-glyph {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.26); font-size: 29px;
}
.account-glyph { background:linear-gradient(145deg,rgba(220,232,255,.96),rgba(116,139,196,.94)); }
.account-glyph svg { width:34px; height:34px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; }
.account-user-avatar-fallback { color:#fff; background:linear-gradient(145deg,#79a8ca,#4f5f9d); font-size:22px; font-weight:900; }
.planet-rail-card > span:last-child { font-size: 12px; white-space: nowrap; }
.planet-rail-card.ai-entry::after { content:"AI"; position:absolute; top:1px; right:12px; padding:2px 5px; border-radius:999px; color:#fff; background:rgba(7,19,29,.78); border:1px solid rgba(255,255,255,.45); font-size:10px; font-weight:900; }
.planet-rail-card.heartlink-entry .planet-rail-glyph { background:linear-gradient(145deg,#ffd8a8,#d87567); }
.planet-rail-card.my-home-entry .planet-rail-glyph { background:linear-gradient(145deg,#ffe5a9,#9b6e55); }
.planet-rail-card.family-entry .planet-rail-glyph { color:#fff; background:linear-gradient(145deg,#8f83db,#4f77bd); font-weight:800; }
.planet-contact-rail #planetMusicPlayer { position:relative!important; flex:0 0 auto; left:auto!important; right:auto!important; top:auto!important; transform:scale(.88); transform-origin:center; }
.planet-title { top:max(124px,calc(env(safe-area-inset-top) + 118px)); }
@media(max-width:600px){.planet-contact-rail{height:104px;gap:6px}.planet-title{top:max(108px,calc(env(safe-area-inset-top) + 104px))}.planet-rail-card{flex-basis:78px;width:78px}}

/* 心链家园：顶部沿用成员头像滑轨，回声版主体在同源页面内运行。 */
#heartlinkView {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  background: #170f0e;
}
#heartlinkView[hidden] { display: none; }
.heartlink-app-frame {
  position: absolute;
  top: max(118px, calc(env(safe-area-inset-top) + 118px));
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - max(118px, calc(env(safe-area-inset-top) + 118px)));
  border: 0;
  background: #170f0e;
}
@media (max-width:600px) {
  .heartlink-app-frame {
    top: max(104px, calc(env(safe-area-inset-top) + 104px));
    height: calc(100% - max(104px, calc(env(safe-area-inset-top) + 104px)));
  }
}

/* ================= 视图一：琉璃星球 ================= */
#planetView { position: fixed; inset: 0; }
#planetCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.planet-title {
  position: absolute; top: max(4vh, env(safe-area-inset-top)); left: 0; right: 0;
  text-align: center; pointer-events: none;
}
.planet-title h1 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 600; letter-spacing: 0.35em;
  color: #f4efe6; text-shadow: 0 0 24px rgba(255, 240, 210, 0.35); padding-left: 0.35em;
}
.planet-title p { margin-top: 10px; font-size: clamp(12px, 1.4vw, 15px); color: rgba(230, 226, 240, 0.62); letter-spacing: 0.12em; }

.planet-hint {
  position: absolute; bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px)); left: 0; right: 0;
  text-align: center; font-size: 12px; letter-spacing: 0.18em;
  color: rgba(220, 216, 235, 0.4); pointer-events: none;
}

.app-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(255,255,255,.52); font-size: 11px; font-weight: 700;
}
.app-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.app-footer-text { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.4; }
.app-footer-text em { font-style: normal; }
.planet-company-footer {
  position: absolute; z-index: 3; right: 0; bottom: max(7px, env(safe-area-inset-bottom)); left: 0;
  padding: 0 12px; pointer-events: none;
}

/* 岛屿名牌（跟随投影位置） */
#chips { position: absolute; inset: 0; pointer-events: none; }
.island-chip {
  position: absolute; transform: translate(-50%, -110%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 14px 6px; border-radius: 14px;
  background: rgba(20, 26, 58, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(8, 10, 30, 0.35);
  pointer-events: auto; transition: opacity 0.25s, box-shadow 0.25s;
}
.island-chip b { font-size: 14px; font-weight: 600; color: #fdfaf4; letter-spacing: 0.08em; }
.island-chip span { font-size: 10px; color: var(--chip-c, #ffd9a8); letter-spacing: 0.1em; }
.island-chip::after {
  content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 12px; background: linear-gradient(rgba(255,255,255,0.4), transparent);
}
.island-chip:hover { box-shadow: 0 4px 24px var(--chip-glow, rgba(255, 200, 140, 0.35)); }

/* 缩到极小时的宇宙寄语 */
#farHint {
  position: absolute; left: 0; right: 0; top: 62%;
  text-align: center; font-size: 14px; line-height: 2;
  color: rgba(214, 222, 248, 0.75); letter-spacing: 0.15em;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
#farHint span { font-size: 11.5px; color: rgba(190, 200, 235, 0.45); }
#farHint.show { opacity: 1; transform: none; }

/* ================= 穿云过渡层 ================= */
#cloudLayer {
  position: fixed; inset: -10%; z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
#cloudLayer.on { opacity: 1; }
#cloudLayer .cb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,253,248,0.98) 30%, rgba(255,253,248,0) 70%);
  filter: blur(18px);
  transform: scale(0.85);
  transition: transform 1.1s ease;
}
#cloudLayer.on .cb { transform: scale(1.25); }
.cb.c1 { width: 70vmax; height: 55vmax; left: -18vmax; top: -12vmax; }
.cb.c2 { width: 75vmax; height: 60vmax; right: -20vmax; top: -15vmax; }
.cb.c3 { width: 70vmax; height: 58vmax; left: -15vmax; bottom: -18vmax; }
.cb.c4 { width: 78vmax; height: 62vmax; right: -16vmax; bottom: -14vmax; }
.cb.c5 { width: 60vmax; height: 48vmax; left: 22vmax; top: 28vmax; }
.cb.c6 { width: 55vmax; height: 45vmax; right: 18vmax; top: 6vmax; }

/* ================= 视图二：岛上房间 ================= */
#roomView { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr minmax(320px, 400px); }
#roomView[hidden] { display: none; }

/* ------- 三套房间主题色 ------- */
.room-lebao {
  --acc: #f98d66; --acc2: #ffd9a1;
  --wall1: #fdf4e7; --wall2: #f8e3cd; --floor: #eed6ba;
  --skyA: #ffeccb; --skyB: #ffcfa8; --panelbg: rgba(255, 250, 242, 0.85);
}
.room-xiaokang {
  --acc: #6fa583; --acc2: #cfe6d6;
  --wall1: #f3f7f0; --wall2: #e2ecdf; --floor: #d7e3d2;
  --skyA: #e3efe6; --skyB: #a9c9b6; --panelbg: rgba(248, 252, 248, 0.85);
}
.room-xiaomeng {
  --acc: #9d94e2; --acc2: #a5ecd9;
  --wall1: #efecf8; --wall2: #dcd7ef; --floor: #cfc9e8;
  --skyA: #232853; --skyB: #3d4380; --panelbg: rgba(246, 244, 253, 0.85);
}

/* ------- 场景（左侧） ------- */
.scene { position: relative; overflow: hidden; }
.scene .wall { position: absolute; inset: 0; background: linear-gradient(168deg, var(--wall1) 20%, var(--wall2) 100%); }
.scene .floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background: linear-gradient(var(--floor), color-mix(in srgb, var(--floor) 82%, #7a6a58));
  border-top-left-radius: 50% 22%; border-top-right-radius: 50% 22%;
  transform: scaleX(1.3);
}

/* 弧形落地窗 */
.scene .window {
  position: absolute; left: 7%; top: 9%; width: 44%; height: 66%;
  border-radius: 46% 46% 14px 14px / 34% 34% 14px 14px;
  padding: 1.1vmin;
  background: linear-gradient(#ffffffcc, #ffffff70);
  box-shadow: 0 10px 40px rgba(90, 70, 50, 0.16), inset 0 0 0 1px rgba(255,255,255,0.7);
}
.scene .sky {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 44% 44% 10px 10px / 32% 32% 10px 10px;
  background: linear-gradient(var(--skyA), var(--skyB));
}
.scene .sky i { position: absolute; display: block; }

/* —— 乐包：阳光海岛窗景 —— */
.sky-lebao .sun {
  width: 22%; aspect-ratio: 1; border-radius: 50%; left: 16%; top: 16%;
  background: radial-gradient(circle, #fff6dc, #ffd98c 65%, rgba(255,217,140,0));
  filter: blur(1px); animation: sunFloat 9s ease-in-out infinite;
}
.sky-lebao .sea {
  left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(#8fd0cf, #5fb3bd);
  border-top-left-radius: 40% 30%; border-top-right-radius: 46% 26%;
}
.sky-lebao .sea::after {
  content: ""; position: absolute; left: 8%; right: 12%; top: 18%;
  height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 0 -0.5px rgba(255,255,255,0.35), 0 22px 0 -0.5px rgba(255,255,255,0.22);
  animation: shimmer 5s ease-in-out infinite;
}
.sky-lebao .puff {
  width: 30%; height: 13%; border-radius: 40px; background: rgba(255,255,255,0.8);
  filter: blur(2px); animation: drift 26s linear infinite;
}
.sky-lebao .p1 { top: 12%; left: 55%; }
.sky-lebao .p2 { top: 30%; left: -10%; animation-duration: 34s; animation-delay: -12s; height: 9%; }

/* —— 小康：雾林温泉窗景 —— */
.sky-xiaokang .pine {
  bottom: 16%; width: 16%; height: 34%;
  background: color-mix(in srgb, var(--acc) 75%, #33523f);
  clip-path: polygon(50% 0, 66% 30%, 58% 30%, 78% 62%, 68% 62%, 92% 100%, 8% 100%, 32% 62%, 22% 62%, 42% 30%, 34% 30%);
  opacity: 0.85;
}
.sky-xiaokang .k1 { left: 10%; }
.sky-xiaokang .k2 { left: 32%; bottom: 13%; height: 42%; opacity: 0.95; }
.sky-xiaokang .k3 { right: 12%; height: 28%; opacity: 0.7; }
.sky-xiaokang .mist {
  left: -20%; right: -20%; height: 16%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); filter: blur(8px);
  animation: drift 22s linear infinite;
}
.sky-xiaokang .m1 { bottom: 26%; }
.sky-xiaokang .m2 { bottom: 8%; animation-duration: 30s; animation-delay: -9s; opacity: 0.8; }
.sky-xiaokang .steam {
  bottom: 4%; width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,0.5); filter: blur(4px);
  animation: steamUp 6s ease-in infinite;
}
.sky-xiaokang .s1 { left: 58%; } .sky-xiaokang .s2 { left: 68%; animation-delay: -2s; } .sky-xiaokang .s3 { left: 63%; animation-delay: -4s; }

/* —— 小梦：永夜极光窗景 —— */
.sky-xiaomeng { background: linear-gradient(#1c2148, #34386e 70%, #4b4f8e); }
.sky-xiaomeng .starfield {
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent),
    radial-gradient(1px 1px at 65% 15%, #ffe9c9, transparent),
    radial-gradient(1.5px 1.5px at 80% 45%, #fff, transparent),
    radial-gradient(1px 1px at 40% 55%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 12% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 35%, #ffd7ef, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.sky-xiaomeng .aurora {
  width: 120%; height: 46%; left: -10%; border-radius: 50%;
  filter: blur(14px); opacity: 0.55; mix-blend-mode: screen;
  animation: auroraSway 11s ease-in-out infinite alternate;
}
.sky-xiaomeng .a1 { top: 4%; background: linear-gradient(100deg, transparent 10%, #7ee8c9 40%, #7f8bf2 70%, transparent 92%); }
.sky-xiaomeng .a2 { top: 22%; opacity: 0.35; animation-delay: -5s; background: linear-gradient(80deg, transparent 12%, #c9a0f0 45%, #7ee8c9 75%, transparent 90%); }
.sky-xiaomeng .moonx {
  width: 16%; aspect-ratio: 1; border-radius: 50%; right: 14%; top: 14%;
  background: radial-gradient(circle at 38% 38%, #fffdf4, #f0e6c8);
  box-shadow: 0 0 26px rgba(255, 250, 225, 0.65);
}

@keyframes sunFloat { 50% { transform: translateY(6%); } }
@keyframes shimmer { 50% { opacity: 0.5; transform: translateX(4%); } }
@keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(112%); } }
@keyframes steamUp {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  25% { opacity: 0.55; }
  100% { transform: translateY(-320%) scale(1.5); opacity: 0; }
}
@keyframes twinkle { to { opacity: 0.55; } }
@keyframes auroraSway { to { transform: translateX(6%) skewX(-6deg); } }

/* ------- 家具剪影 ------- */
.furniture i { position: absolute; display: block; }
.furniture b { position: absolute; display: block; }

.shelf { right: 26%; top: 20%; width: 13%; height: 30%; }
.shelf::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 12px; background: color-mix(in srgb, var(--wall2) 55%, #b99b78);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35), 0 8px 24px rgba(100, 80, 55, 0.14);
}
.shelf b { left: 14%; right: 14%; height: 9%; border-radius: 4px; background: rgba(255, 253, 248, 0.75); }
.shelf b:nth-child(1) { top: 22%; } .shelf b:nth-child(2) { top: 48%; } .shelf b:nth-child(3) { top: 74%; }

.plant { right: 8%; bottom: 13%; width: 9%; aspect-ratio: 0.62; }
.plant .pot {
  bottom: 0; left: 22%; width: 56%; height: 30%;
  border-radius: 6px 6px 12px 12px; background: color-mix(in srgb, var(--acc) 45%, #c9b096);
}
.plant .leaf { background: color-mix(in srgb, var(--acc) 78%, #4c7a5c); border-radius: 50% 50% 50% 4px; }
.plant .l1 { left: 8%; bottom: 24%; width: 42%; height: 46%; transform: rotate(-24deg); animation: leafSway 6s ease-in-out infinite; }
.plant .l2 { right: 8%; bottom: 24%; width: 42%; height: 46%; border-radius: 50% 50% 4px 50%; transform: rotate(24deg); animation: leafSway 6s ease-in-out infinite reverse; }
.plant .l3 { left: 30%; bottom: 26%; width: 40%; height: 58%; border-radius: 50% 50% 8px 8px; }
@keyframes leafSway { 50% { transform: rotate(-18deg); } }

.lamp { left: 55%; bottom: 14%; width: 6%; aspect-ratio: 0.4; }
.lamp .stem { left: 46%; bottom: 0; width: 8%; height: 72%; border-radius: 4px; background: #b7a288; }
.lamp .shade {
  top: 0; left: 8%; width: 84%; height: 34%;
  border-radius: 40% 40% 8px 8px; background: color-mix(in srgb, var(--acc2) 80%, #fff);
  box-shadow: inset 0 -6px 12px rgba(255, 220, 160, 0.6);
}
.lamp .glow {
  top: 16%; left: -40%; width: 180%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 168, 0.5), rgba(255, 226, 168, 0));
  animation: lampBreath 5s ease-in-out infinite;
}
@keyframes lampBreath { 50% { opacity: 0.6; } }

/* 时段氛围叠加 */
.ambient { position: absolute; inset: 0; pointer-events: none; transition: background 1.5s; }
body[data-phase="dusk"] .ambient { background: linear-gradient(rgba(255, 166, 100, 0.10), rgba(255, 120, 80, 0.14)); }
body[data-phase="night"] .ambient { background: linear-gradient(rgba(24, 28, 70, 0.20), rgba(18, 20, 55, 0.30)); }
.room-xiaomeng .ambient { background: linear-gradient(rgba(30, 30, 80, 0.10), rgba(25, 25, 70, 0.16)) !important; }

.back-btn {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; letter-spacing: 0.05em;
  color: var(--ink); background: rgba(255, 253, 248, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(90, 70, 50, 0.18);
  transition: transform 0.2s;
}
.back-btn:active { transform: scale(0.94); }

/* ------- 聊天面板（右侧） ------- */
.panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panelbg, var(--card));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: -12px 0 40px rgba(70, 55, 40, 0.10);
}

.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
}
.panel-head img {
  width: 46px; height: 46px; border-radius: 16px; object-fit: cover; object-position: top;
  background: linear-gradient(145deg, var(--acc2), var(--acc));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 40%, transparent);
}
.panel-head .who { display: flex; flex-direction: column; gap: 3px; }
.panel-head b { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
.panel-head span { font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.panel-head span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #7ecf9a; box-shadow: 0 0 6px #7ecf9a;
}

.tabs { display: flex; gap: 4px; padding: 0 12px 10px; }
.tab {
  flex: 1; padding: 8px 0; border-radius: 12px; font-size: 13px; color: var(--ink-soft);
  transition: all 0.25s;
}
.tab.on {
  color: color-mix(in srgb, var(--acc) 70%, #4a4046); font-weight: 600;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 3px 10px rgba(90, 70, 50, 0.10);
}

.pane { display: none; flex: 1; min-height: 0; flex-direction: column; padding: 4px 14px 14px; overflow-y: auto; }
.pane.on { display: flex; }
.pane-tip { font-size: 12px; color: var(--ink-soft); padding: 6px 4px 12px; line-height: 1.6; }

/* 聊天消息 */
.pane-chat { padding-bottom: 10px; }
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; scroll-behavior: smooth; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.65; word-break: break-word; animation: msgIn 0.3s ease; }
.msg-voice {
  float: right; width: 26px; height: 26px; margin: 0 0 2px 8px; padding: 0;
  border: 1px solid rgba(92,72,52,.15); border-radius: 50%; background: rgba(255,255,255,.72);
  color: inherit; font-size: 13px; line-height: 24px; cursor: pointer;
}
.msg-voice:active { transform: scale(.92); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg.ai {
  align-self: flex-start; color: var(--ink);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), color-mix(in srgb, var(--acc2) 30%, #ffffffdd));
  border-bottom-left-radius: 6px;
  box-shadow: 0 4px 14px rgba(95, 75, 55, 0.10);
}
.msg.user {
  align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 88%, #fff), var(--acc));
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent);
}
.msg.sys {
  align-self: center; font-size: 11.5px; color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 6px 14px;
}

.typing { display: flex; gap: 5px; padding: 6px 10px; }
.typing[hidden] { display: none; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); opacity: 0.5; animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 30% { transform: translateY(-5px); opacity: 1; } }

.input-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 6px 6px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 18px rgba(90, 70, 50, 0.12), inset 0 0 0 1px rgba(255,255,255,0.8);
}
.input-row input { flex: 1; font-size: 14px; padding: 8px 2px; }
.input-row input::placeholder { color: #bdb8c6; }
.mic { font-size: 17px; opacity: 0.75; }
.send {
  width: 38px; height: 38px; border-radius: 50%; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 85%, #fff), var(--acc));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acc) 45%, transparent);
  transition: transform 0.15s;
}
.send:active { transform: scale(0.9); }

/* 活动 */
.act-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 10px;
  align-items: center; padding: 14px 16px; margin-bottom: 10px;
  border-radius: var(--radius); background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 14px rgba(95, 75, 55, 0.08); opacity: 0.62;
}
.act-card.ready { opacity: 1; cursor: pointer; transition: transform 0.2s; }
.act-card.ready:active { transform: scale(0.97); }
.act-card b { font-size: 14.5px; font-weight: 600; }
.act-card span { grid-column: 1; font-size: 12px; color: var(--ink-soft); }
.act-card em {
  grid-row: 1 / 3; font-style: normal; font-size: 12px; padding: 6px 13px; border-radius: 999px;
  color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 80%, #fff), var(--acc));
}
.act-card:not(.ready) em { background: #cfcad6; }

/* 记忆 */
.memo-list { display: flex; flex-direction: column; gap: 8px; }
.memo-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 3px 12px rgba(95, 75, 55, 0.08); font-size: 13.5px; line-height: 1.5;
  animation: msgIn 0.3s ease;
}
.memo-item::before { content: "🫧"; }
.memo-item p { flex: 1; }
.memo-item small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.memo-item button { font-size: 15px; color: #c9c2d2; padding: 4px; }
.memo-empty { text-align: center; padding: 40px 20px; font-size: 13px; color: var(--ink-soft); line-height: 2; }

/* 日记 */
.mood-row { display: flex; gap: 8px; padding-bottom: 10px; }
.mood-row button {
  flex: 1; font-size: 24px; padding: 9px 0; border-radius: 14px;
  background: rgba(255, 255, 255, 0.6); transition: all 0.2s; filter: grayscale(0.55);
}
.mood-row button.sel { filter: none; background: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent); transform: translateY(-3px); }
#diaryText {
  border-radius: 14px; background: rgba(255, 255, 255, 0.8); padding: 12px 14px;
  font-size: 13.5px; line-height: 1.6; resize: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 3px 12px rgba(95,75,55,0.07);
}
.diary-save {
  margin: 10px 0 14px; padding: 11px; border-radius: 999px; font-size: 14px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 82%, #fff), var(--acc));
  box-shadow: 0 5px 16px color-mix(in srgb, var(--acc) 40%, transparent);
}
.diary-item {
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.72); box-shadow: 0 3px 12px rgba(95, 75, 55, 0.08);
  font-size: 13px; line-height: 1.6;
}
.diary-item b { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.diary-item .comfort {
  margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px;
  background: color-mix(in srgb, var(--acc2) 35%, #fff); color: color-mix(in srgb, var(--acc) 55%, #4a4046);
}

/* ================= 正念呼吸 ================= */
#breath {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; gap: 0;
  background: rgba(30, 34, 70, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#breath[hidden] { display: none; }
.breath-circle {
  width: min(46vmin, 260px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 225, 255, 0.55), rgba(150, 190, 255, 0.12) 70%);
  box-shadow: 0 0 60px rgba(160, 200, 255, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.35);
  transition: transform 4s ease-in-out;
}
#breathLabel { margin-top: 4vh; font-size: 19px; letter-spacing: 0.5em; padding-left: 0.5em; color: #eef2ff; }
#breathClose {
  margin-top: 4vh; padding: 10px 34px; border-radius: 999px; font-size: 14px;
  color: #dde4ff; border: 1px solid rgba(220, 228, 255, 0.4);
}

/* ================= Toast ================= */
#toast {
  position: fixed; left: 50%; bottom: 12vh; transform: translateX(-50%);
  z-index: 90; padding: 11px 22px; border-radius: 999px; font-size: 13px; color: #fff;
  background: rgba(45, 42, 60, 0.88); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  animation: msgIn 0.3s ease; max-width: 80vw; text-align: center;
}

/* ------- 窗户：实时星球取景 ------- */
#skyCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: grab;
}
#skyCanvas:active { cursor: grabbing; }
.window-tip {
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%) translateY(6px);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.05em; color: #fff; white-space: nowrap;
  background: rgba(20, 26, 58, 0.68);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(8, 10, 30, 0.35);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.scene .window:hover .window-tip { opacity: 1; transform: translateX(-50%); }

/* ================= 竖屏 / 窄屏适配 ================= */
@media (max-width: 780px), (orientation: portrait) {
  #roomView { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .panel { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.5); }
  .scene .window { left: 5%; top: 7%; width: 52%; height: 62%; }
  .shelf { display: none; }
  .lamp { left: 6%; }
  .panel-head { padding-top: 10px; }
  .back-btn { width: 46px; height: 46px; }
  .surfboard, .teatable, .fireplace { transform: scale(0.8); transform-origin: bottom; }
  .frame { display: none; }
}

/* ================================================================
   新增：图标心跳呼吸 + 房间真实感大改造
   ================================================================ */

/* ------- 心跳+呼吸动效（哚-哚……缓呼吸） ------- */
@keyframes heartBreath {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.12); }
  16% { transform: scale(0.99); }
  24% { transform: scale(1.08); }
  36% { transform: scale(1); }
  68% { transform: scale(1.045); }
}
@keyframes ringPulse {
  0% { transform: scale(0.85); opacity: 0.75; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* 返回星球：圆形星球图标按钮 */
.back-btn {
  width: 58px; height: 58px; padding: 4px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.28);
  box-shadow: 0 6px 22px rgba(30, 50, 110, 0.35);
}
.back-btn img {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  animation: heartBreath 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(120, 190, 255, 0.55));
}
.back-btn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(130, 195, 255, 0.55);
  animation: ringPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.back-btn:hover img { animation-duration: 1.4s; }
.back-btn .fb {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 26px; font-style: normal;
  animation: heartBreath 2.8s ease-in-out infinite;
}
.back-btn .fb[hidden], .back-btn img[hidden] { display: none; }
@media (max-width: 780px), (orientation: portrait) {
  .back-btn { width: 46px; height: 46px; }
}

/* 标题旁主页图标 */
.planet-title h1 { display: inline-flex; align-items: center; gap: 0.4em; }
#homeBtn {
  pointer-events: auto; position: relative;
  width: 1.55em; height: 1.55em; padding: 0; flex: none;
  border-radius: 50%;
}
#homeBtn img, #homeBtn .fb {
  width: 100%; height: 100%; display: block; object-fit: contain;
  animation: heartBreath 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 228, 170, 0.6));
}
#homeBtn .fb { display: grid; place-items: center; font-size: 0.95em; font-style: normal; }
#homeBtn .fb[hidden], #homeBtn img[hidden] { display: none; }
#homeBtn::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(255, 230, 175, 0.6);
  animation: ringPulse 2.8s ease-out infinite 0.4s;
  pointer-events: none;
}
#homeBtn:hover img, #homeBtn:hover .fb { animation-duration: 1.4s; }

/* ------- 场景真实感：纹理 / 光束 / 地板 / 地毯 / 暗角 ------- */
.wall-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.46 0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

.scene .floor {
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 60, 0.10) 0 2px, transparent 2px 10%),
    linear-gradient(rgba(255, 255, 255, 0.35), transparent 18%),
    linear-gradient(var(--floor), color-mix(in srgb, var(--floor) 76%, #6d5c4a));
}

.lightbeam {
  position: absolute; left: 8%; top: 10%; width: 52%; height: 84%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, var(--beam, rgba(255, 222, 150, 0.30)), transparent 62%);
  clip-path: polygon(8% 0, 58% 0, 98% 100%, 20% 100%);
  filter: blur(7px);
  animation: beamShift 9s ease-in-out infinite;
  transform: translate3d(calc(var(--mx, 0) * -5px), calc(var(--my, 0) * -3px), 0);
}
@keyframes beamShift { 50% { opacity: 0.7; } }
.room-lebao { --beam: rgba(255, 214, 138, 0.34); }
.room-xiaokang { --beam: rgba(214, 238, 220, 0.30); }
.room-xiaomeng { --beam: rgba(126, 232, 201, 0.16); }
.room-xiaomeng .lightbeam {
  background:
    linear-gradient(118deg, rgba(126, 232, 201, 0.20), transparent 55%),
    linear-gradient(126deg, rgba(157, 148, 226, 0.18), transparent 60%);
}

.rug {
  position: absolute; left: 34%; bottom: 5%; width: 46%; height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%,
    color-mix(in srgb, var(--acc2) 50%, #fff) 0 55%,
    color-mix(in srgb, var(--acc) 38%, #d8c8b4) 56% 72%,
    color-mix(in srgb, var(--acc2) 65%, #fff) 73%);
  box-shadow: 0 8px 22px rgba(90, 70, 50, 0.20), inset 0 -4px 10px rgba(120, 90, 60, 0.12);
  opacity: 0.92;
  transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 3px), 0);
  transition: transform 0.25s ease-out;
}

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 38%, transparent 58%, rgba(70, 50, 40, 0.17));
}
.room-xiaomeng .vignette {
  background: radial-gradient(125% 95% at 50% 38%, transparent 55%, rgba(18, 18, 55, 0.30));
}

/* 视差层 */
.scene .window {
  transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0);
  transition: transform 0.25s ease-out;
}
.furniture, .props {
  position: absolute; inset: 0; pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0);
  transition: transform 0.25s ease-out;
}
.props i { position: absolute; display: block; }
.props b { position: absolute; display: block; }

/* ------- 墙上挂画（每间一幅小风景） ------- */
.frame {
  right: 10%; top: 14%; width: 11%; aspect-ratio: 0.8;
  border-radius: 8px; background: #fffdf6;
  box-shadow: 0 10px 24px rgba(90, 70, 50, 0.22), inset 0 0 0 4px #fffdf6, inset 0 0 0 5.5px rgba(160, 130, 95, 0.65);
}
.frame::before {
  content: ""; position: absolute; left: 50%; top: -12%;
  width: 1.5px; height: 12%; background: rgba(120, 95, 70, 0.5);
}
.frame b { inset: 9%; border-radius: 4px; }
.fr-lebao b { background: linear-gradient(#ffe3b0 45%, #7fc9c9 45% 75%, #f3ddb0 75%); }
.fr-kang b { background: linear-gradient(#e8f2e6 40%, #9dc4aa 40%); }
.fr-meng b { background: linear-gradient(#232853 55%, #4b4f8e); }
.fr-meng b::after {
  content: ""; position: absolute; right: 18%; top: 16%; width: 22%; aspect-ratio: 1;
  border-radius: 50%; background: #f5ecc8; box-shadow: 0 0 8px rgba(255, 250, 220, 0.8);
}

/* ------- 乐包：冲浪板 + 贝壳花环 ------- */
.surfboard {
  right: 5.5%; bottom: 12%; width: 7%; height: 44%;
  border-radius: 50% 50% 42% 42% / 26% 26% 70% 70%;
  background: linear-gradient(105deg, #ffe9c4, #ffb27d 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 14px 22px rgba(120, 80, 50, 0.25);
  transform: rotate(7deg);
}
.surfboard b {
  left: 46%; top: 6%; bottom: 6%; width: 8%;
  border-radius: 4px; background: rgba(214, 108, 60, 0.75);
}
.garland { left: 6%; right: 52%; top: 5.5%; height: 6%; }
.garland::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60%;
  border: 1.5px solid rgba(170, 135, 95, 0.55); border-top: none;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.garland b {
  top: 52%; width: 9px; height: 11px;
  border-radius: 50% 50% 50% 0; background: #ffe9d2;
  box-shadow: inset -1.5px -1.5px 0 rgba(220, 160, 120, 0.6);
  animation: garlandSway 4.5s ease-in-out infinite;
  transform-origin: top center;
}
.garland b:nth-child(1) { left: 4%; } .garland b:nth-child(2) { left: 22%; top: 62%; }
.garland b:nth-child(3) { left: 40%; top: 68%; } .garland b:nth-child(4) { left: 58%; top: 66%; }
.garland b:nth-child(5) { left: 76%; top: 58%; } .garland b:nth-child(6) { left: 92%; top: 48%; }
.garland b:nth-child(2n) { animation-delay: -2.2s; }
@keyframes garlandSway { 50% { transform: rotate(9deg); } }

/* ------- 小康：茶几热茶 + 挂干香草 ------- */
.teatable { left: 8%; bottom: 9%; width: 17%; height: 15%; }
.teatable .top {
  left: 0; right: 0; top: 34%; height: 17%;
  border-radius: 10px; background: linear-gradient(#b28a63, #96714e);
  box-shadow: 0 8px 18px rgba(90, 65, 40, 0.3);
}
.teatable .leg { top: 50%; bottom: 0; width: 7%; border-radius: 3px; background: #8a684a; }
.teatable .leg.l { left: 9%; } .teatable .leg.r { right: 9%; }
.teatable .pot {
  left: 18%; top: 4%; width: 26%; height: 32%;
  border-radius: 20% 20% 46% 46%; background: linear-gradient(#e7e0d2, #c8bfa9);
  box-shadow: inset 0 -4px 6px rgba(120, 100, 70, 0.3);
}
.teatable .pot::before {
  content: ""; position: absolute; right: -22%; top: 30%;
  width: 30%; height: 22%; border-radius: 0 60% 60% 0;
  background: #d6cdb9;
}
.teatable .cup {
  left: 56%; top: 18%; width: 13%; height: 16%;
  border-radius: 12% 12% 40% 40%; background: #efe7d6;
}
.teatable .tsteam {
  width: 10%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.65); filter: blur(3px);
  animation: steamUp 5s ease-in infinite;
}
.teatable .s1 { left: 26%; top: 0; } .teatable .s2 { left: 60%; top: 8%; animation-delay: -2.4s; }
.herbs { left: 30%; top: 5%; width: 15%; height: 15%; }
.herbs b {
  top: 0; width: 16%; height: 100%;
  background: linear-gradient(rgba(150, 120, 85, 0.7) 0 22%, transparent 22%),
    radial-gradient(ellipse at 50% 72%, #7fa588 40%, #5f8a6c 75%, transparent 76%);
  animation: garlandSway 5.5s ease-in-out infinite; transform-origin: top center;
}
.herbs b:nth-child(1) { left: 6%; } .herbs b:nth-child(2) { left: 42%; animation-delay: -1.8s; height: 84%; }
.herbs b:nth-child(3) { left: 78%; animation-delay: -3.4s; height: 92%; }

/* ------- 小梦：壁炉 + 星星灯串 ------- */
.fireplace { left: 7%; bottom: 10%; width: 17%; height: 26%; }
.fireplace .arch {
  inset: 0; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(#5a5480, #46416b);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 12px 26px rgba(15, 15, 45, 0.5);
}
.fireplace .arch::before {
  content: ""; position: absolute; inset: 18% 16% 12%;
  border-radius: 46% 46% 6px 6px; background: #1d1a33;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.6);
}
.fireplace .fire {
  left: 30%; right: 30%; bottom: 16%; height: 34%;
  border-radius: 50% 50% 20% 20%;
  background: radial-gradient(ellipse at 50% 88%, #fff3c0 8%, #ffb45e 38%, #f2703d 68%, rgba(242, 112, 61, 0));
  filter: blur(1.5px);
  animation: fireFlick 0.9s ease-in-out infinite alternate;
  transform-origin: bottom;
}
.fireplace .fspill {
  left: -32%; right: -32%; bottom: -9%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 176, 100, 0.4), rgba(255, 176, 100, 0));
  animation: fireFlick 1.3s ease-in-out infinite alternate;
}
@keyframes fireFlick {
  from { transform: scale(1, 0.94) translateX(-1%); opacity: 0.85; }
  to { transform: scale(1.05, 1.06) translateX(1%); opacity: 1; }
}
.fairy { left: 30%; right: 6%; top: 4.5%; height: 8%; }
.fairy::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 68%;
  border: 1px solid rgba(200, 200, 240, 0.28); border-top: none;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.fairy b {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffe9b3; box-shadow: 0 0 9px 2px rgba(255, 233, 179, 0.75);
  animation: fairyTw 2.6s ease-in-out infinite;
}
.fairy b:nth-child(1) { left: 2%; top: 30%; } .fairy b:nth-child(2) { left: 15%; top: 58%; }
.fairy b:nth-child(3) { left: 29%; top: 74%; background: #b8f2dd; box-shadow: 0 0 9px 2px rgba(126, 232, 201, 0.7); }
.fairy b:nth-child(4) { left: 43%; top: 82%; } .fairy b:nth-child(5) { left: 57%; top: 80%; background: #d3c8ff; box-shadow: 0 0 9px 2px rgba(180, 160, 255, 0.7); }
.fairy b:nth-child(6) { left: 71%; top: 70%; } .fairy b:nth-child(7) { left: 85%; top: 52%; background: #b8f2dd; box-shadow: 0 0 9px 2px rgba(126, 232, 201, 0.7); }
.fairy b:nth-child(8) { left: 96%; top: 28%; }
.fairy b:nth-child(2n) { animation-delay: -1.3s; }
@keyframes fairyTw { 50% { opacity: 0.45; transform: scale(0.85); } }

/* ------- 氛围粒子 ------- */
.ambient span { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.ambient .mote {
  background: radial-gradient(circle, #ffedbc, rgba(255, 237, 188, 0));
  animation: floatUp linear infinite;
}
.ambient .steamp {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  filter: blur(3px);
  animation: floatUp linear infinite;
}
.ambient .sparkle {
  background: radial-gradient(circle, #fff, rgba(210, 220, 255, 0));
  animation: sparkleTw ease-in-out infinite;
}
.ambient .firefly {
  background: radial-gradient(circle, #cdeed9, rgba(126, 232, 201, 0));
  box-shadow: 0 0 10px 2px rgba(126, 232, 201, 0.45);
  animation: floatUp ease-in-out infinite;
}
@keyframes floatUp {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--o, 0.6); }
  82% { opacity: var(--o, 0.6); }
  100% { transform: translate3d(var(--dx, 0px), -62vh, 0); opacity: 0; }
}
@keyframes sparkleTw {
  0%, 100% { opacity: 0; transform: scale(0.45); }
  50% { opacity: var(--o, 0.8); transform: scale(1); }
}

/* ------- 全局喇叭按钮（背景音乐开关） ------- */
#soundBtn {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; font-size: 20px;
  display: grid; place-items: center;
  background: rgba(20, 26, 58, 0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(8, 10, 30, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.2s, opacity 0.3s;
  animation: soundPulse 3.5s ease-in-out infinite;
}
#soundBtn:active { transform: scale(0.9); }
#soundBtn.off { animation: none; opacity: 0.7; }
@keyframes soundPulse {
  50% { box-shadow: 0 4px 24px rgba(120, 190, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
}

/* 切换曲风按钮（喇叭下方） */
#soundNextBtn {
  position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 54px); right: 14px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; font-size: 17px;
  display: grid; place-items: center; color: #eef2ff;
  background: rgba(20, 26, 58, 0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(8, 10, 30, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.2s, opacity 0.3s;
}
#soundNextBtn:active { transform: scale(0.9) rotate(18deg); }
#soundNextBtn.off { opacity: 0.45; }

/* 曲风名提示 */
#trackTip {
  position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 12px); right: 70px; z-index: 70;
  padding: 9px 16px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.08em; color: #fff; white-space: nowrap;
  background: rgba(20, 26, 58, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(8, 10, 30, 0.4);
  pointer-events: none;
}
#trackTip[hidden] { display: none; }
#trackTip.show { animation: tipIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tipIn { from { opacity: 0; transform: translateX(12px) scale(0.9); } }

/* ================= 房间：回心桥主页按钮（Windows d998d06 迁移） ================= */
.room-home-btn { left: 84px; }
.room-home-btn img {
  filter: drop-shadow(0 0 10px rgba(255, 228, 170, 0.6));
}
.room-home-btn::after {
  border-color: rgba(255, 230, 175, 0.6);
  animation-delay: 0.4s;
}
@media (max-width: 780px), (orientation: portrait) {
  .room-home-btn { left: 68px; }
}

/* ------- 星球住民计划：圈地按钮 ------- */
#landBtn {
  pointer-events: auto;
  width: 2.5em; height: 2.5em; margin-left: 8px; padding: 0; flex: none;
  display: inline-grid; place-items: center; vertical-align: middle;
  touch-action: manipulation;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 220, 160, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 170, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}
#landBtn:hover { transform: scale(1.1); background: rgba(255, 220, 160, 0.3); }
#landBtn .fb { display: grid; place-items: center; font-size: 1.15em; line-height: 1; font-style: normal; }
#landBtn[hidden] { display: none; }

/* ═══════════ 星球住民计划二期：我的地块 ═══════════ */
#plotView {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr minmax(320px, 400px);
  background: #101430;
}
#plotView[hidden] { display: none; }

/* ------- 地块舞台（左） ------- */
.plot-stage { position: relative; overflow: hidden; }
.plot-stage.photo-exterior { isolation:isolate; background:#080d20; }
.plot-stage.photo-exterior::before { content:""; position:absolute; z-index:0; inset:-2.5%; background-image:var(--home-exterior); background-position:center; background-size:cover; background-repeat:no-repeat; will-change:transform; animation:exteriorBreath 8s ease-in-out infinite alternate; }
@keyframes exteriorBreath { from { transform:scale(1); } to { transform:scale(1.045); } }
.plot-stage.photo-exterior .plot-sky,.plot-stage.photo-exterior .plot-ground,.plot-stage.photo-exterior .plot-items,.plot-stage.photo-exterior .villa-house { display:none; }
.building-entry { display:none; }
.plot-stage.photo-exterior .building-entry { position:absolute; z-index:24; left:52%; top:55%; display:grid; place-items:center; width:clamp(120px,17vw,190px); aspect-ratio:1; transform:translate(-50%,-50%); border:2px solid rgba(255,239,190,.48); border-radius:50%; color:#fff; background:radial-gradient(circle,rgba(255,223,141,.08),rgba(255,203,92,.03) 55%,rgba(255,203,92,0) 70%); box-shadow:0 0 0 7px rgba(255,239,190,.06),inset 0 0 30px rgba(255,226,155,.12); cursor:pointer; animation:buildingEntryPulse 2.8s ease-in-out infinite; }
.building-entry span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(25,29,50,.68); font-size:22px; opacity:.86; }
@keyframes buildingEntryPulse { 0%,100% { transform:translate(-50%,-50%) scale(.97); opacity:.72; } 50% { transform:translate(-50%,-50%) scale(1.035); opacity:1; } }
.home-nav-group { position:absolute; z-index:35; left:16px; top:16px; display:flex; align-items:center; gap:8px; }
.home-nav-button { display:grid; place-items:center; width:44px; height:44px; padding:8px; border:1px solid rgba(255,255,255,.38); border-radius:50%; color:#fff; background:rgba(18,24,48,.66); box-shadow:0 5px 14px rgba(0,0,0,.25); backdrop-filter:blur(7px); cursor:pointer; }
.home-nav-button img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.home-nav-button:hover { background:rgba(35,43,76,.82); transform:translateY(-1px) scale(1.04); }
.home-door-button { font-size:22px; line-height:1; }
.plot-sky { position: absolute; inset: 0 0 42% 0; transition: background 0.8s ease; }
.plot-sky.sky-day   { background: linear-gradient(#8ec9ee 10%, #cdeafa 70%, #eef8ff); }
.plot-sky.sky-dusk  { background: linear-gradient(#5a4f8e 5%, #c97b8e 55%, #ffd9a1); }
.plot-sky.sky-night { background: linear-gradient(#141a3a 20%, #2c3364 75%, #4a4f86); }
.plot-sky.sky-night::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 22% 30%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 48% 18%, #ffe9b8 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 70% 36%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 86% 22%, #cfe0ff 60%, transparent 61%);
  animation: plotStarTwinkle 3.5s ease-in-out infinite alternate;
}
@keyframes plotStarTwinkle { from { opacity: 0.55; } to { opacity: 1; } }
.plot-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; transition: background 0.8s ease; }
.plot-ground.g-grass { background: linear-gradient(#b9dd9e, #8fc172 40%, #6ea757); }
.plot-ground.g-sand  { background: linear-gradient(#f4e3bc, #ecd29b 40%, #d9b97e); }
.plot-ground.g-snow  { background: linear-gradient(#f3f6fb, #e3ebf5 40%, #ccd9ea); }
.plot-ground.g-stone { background: linear-gradient(#cfcbc4, #b6b1a8 40%, #98938a); }
.plot-ground::after { /* 地平线柔光 */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 26px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
.plot-items { position: absolute; inset: 0; }
.plot-item {
  position: absolute; transform: translate(-50%, -92%);
  font-style: normal; line-height: 1; user-select: none; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(40, 40, 60, 0.28));
  animation: plotPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes plotPop { from { opacity: 0; transform: translate(-50%, -92%) scale(0.2); } to { opacity: 1; transform: translate(-50%, -92%) scale(1); } }
.plot-item.flip { transform: translate(-50%, -92%) scaleX(-1); }
.plot-item.css-pond {
  width: 9em; height: 3.2em; border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, #bfe6f2 0 45%, #7ec3dd 46% 80%, #5aa8c8 81%);
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(60, 100, 130, 0.25);
  transform: translate(-50%, -55%);
}
.plot-item.css-path {
  width: 3.6em; height: 12em; border-radius: 45%;
  background: repeating-linear-gradient(8deg, #d9c9a8 0 0.9em, #cbbe9d 0.9em 1.8em);
  transform: translate(-50%, -50%) perspective(240px) rotateX(52deg);
  opacity: 0.9;
}
.plot-item.css-fence {
  width: 10em; height: 1.6em;
  background: repeating-linear-gradient(90deg, #b98a5e 0 0.35em, transparent 0.35em 1.2em),
    linear-gradient(#0000 35%, #a97b50 35% 55%, #0000 55%);
  transform: translate(-50%, -80%);
}
.plot-item.css-swing {
  width: 5em; height: 5.4em; transform: translate(-50%, -96%);
  background:
    linear-gradient(#8a6a48, #8a6a48) 0 0 / 0.32em 100% no-repeat,
    linear-gradient(#8a6a48, #8a6a48) 100% 0 / 0.32em 100% no-repeat,
    linear-gradient(#8a6a48, #8a6a48) 0 0 / 100% 0.32em no-repeat,
    linear-gradient(#0000, #0000);
}
.plot-item.css-swing::after {
  content: ""; position: absolute; left: 50%; top: 0.3em; width: 1.9em; height: 2.9em;
  border-left: 2px solid #caa; border-right: 2px solid #caa;
  transform: translateX(-50%); transform-origin: top center;
  border-bottom: 0.4em solid #c8874f; animation: swingSway 3.2s ease-in-out infinite alternate;
}
@keyframes swingSway { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.plot-sign {
  position: absolute; left: 18px; top: 14px; padding: 7px 14px; border-radius: 12px;
  background: rgba(20, 24, 52, 0.45); color: #ffe9c4; font-size: 13px; letter-spacing: 1px;
  display:flex; align-items:center; gap:8px; backdrop-filter: blur(6px);
}
.plot-sign img { width:26px; height:26px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.42); }

/* ------- 地灵面板（右） ------- */
.plot-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(248, 246, 253, 0.94); border-left: 1px solid rgba(120, 110, 160, 0.15);
}
.plot-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid rgba(120, 110, 160, 0.12);
}
.plot-spirit { font-size: 26px; animation: spiritFloat 3s ease-in-out infinite alternate; }
@keyframes spiritFloat { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
.plot-panel-head .who b { display: block; font-size: 14px; color: #4a4560; }
.plot-panel-head .who span { font-size: 11px; color: #8d87a3; }
.plot-panel-head #plotUndoBtn {
  margin-left: auto; border: 1px solid rgba(120, 110, 160, 0.3); background: #fff;
  border-radius: 10px; padding: 5px 10px; font-size: 12px; color: #6b6485; cursor: pointer;
}
#plotUndoBtn { display:none !important; }
.home-template-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px 12px 2px; }
.home-setup-title { margin:12px 14px 0; color:#4a435e; font-size:14px; }
.home-setup-title.game-title { margin-top:15px; }
.home-game-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:9px 12px 2px; }
.home-game-picker button { border:1px solid rgba(112,102,150,.2); border-radius:12px; padding:9px 6px; color:#575069; background:#fff; cursor:pointer; font:600 11px/1.2 inherit; }
.home-game-picker button.on { border-color:#d0a052; color:#7c5724; background:#fff3d8; box-shadow:0 0 0 2px rgba(208,160,82,.12); }
.save-home-setup { margin:13px 12px 5px; border:0; border-radius:14px; padding:12px; color:#fff; background:linear-gradient(135deg,#7d6aa8,#bd8155); box-shadow:0 7px 18px rgba(82,59,112,.24); cursor:pointer; font:700 13px/1 inherit; }
.save-home-setup:disabled { opacity:.55; cursor:wait; }
.plot-view-settling .plot-stage { transform:scale(.025); opacity:.15; border-radius:50%; transition:transform 1.15s cubic-bezier(.55,.02,.3,1),opacity 1.05s ease; }
.plot-view-settling .plot-panel { opacity:0; transform:translateX(30px); transition:opacity .55s ease,transform .7s ease; }
.home-template-picker[hidden] { display:none; }
.home-template-picker button { min-width:0; padding:11px 8px 9px; border:1px solid rgba(112,102,150,.18); border-radius:14px; background:linear-gradient(145deg,#fff,#f4f0fa); color:#554f69; text-align:left; cursor:pointer; box-shadow:0 4px 12px rgba(75,65,105,.08); transition:transform .18s,border-color .18s,box-shadow .18s; }
.home-template-picker button:hover { transform:translateY(-2px); border-color:rgba(112,102,150,.38); box-shadow:0 7px 18px rgba(75,65,105,.14); }
.home-template-picker button:disabled,.home-game-picker button:disabled { opacity:.68; cursor:default; transform:none; }
.plot-stage.photo-exterior .plot-sign { top:72px; }
.home-template-picker button.on { border-color:#d6a85d; background:linear-gradient(145deg,#fff8e9,#f4e7ce); box-shadow:0 0 0 2px rgba(214,168,93,.16),0 7px 18px rgba(112,79,35,.14); }
.home-template-picker b,.home-template-picker span,.home-template-picker em { display:block; }
.home-template-picker b { font-size:13px; color:#403a55; white-space:nowrap; }
.home-template-picker span { margin-top:4px; font-size:10px; line-height:1.35; color:#8d87a3; }
.home-template-picker em { margin-top:7px; font-size:10px; font-style:normal; color:#a27027; }
.game-install-row { display:flex !important; flex-wrap:wrap; gap:7px; align-self:stretch !important; background:transparent !important; padding:0 !important; }
.game-install-row button { flex:1 1 94px; border:1px solid rgba(112,102,150,.22); border-radius:12px; padding:9px 7px; color:#544c68; background:linear-gradient(145deg,#fff,#f2eef8); box-shadow:0 3px 9px rgba(65,55,90,.08); cursor:pointer; font:600 11px/1.2 inherit; }
.game-install-row button:hover { border-color:#c99d55; transform:translateY(-1px); }
.game-install-row button.installed { color:#756b83; background:#ece8f0; cursor:default; transform:none; }
#villaHouse[data-template="sunshine"] { filter:drop-shadow(0 0 18px rgba(255,208,118,.22)); }
#villaHouse[data-template="forest"] .vh-wall { box-shadow:0 18px 30px rgba(30,64,40,.3),inset 0 0 0 3px rgba(84,68,45,.22); }
#villaHouse[data-template="forest"] .vh-grain { opacity:.38; background:repeating-linear-gradient(0deg,transparent 0 15px,rgba(74,52,30,.34) 16px 18px); }
#villaHouse[data-template="polar"] .vh-wall { box-shadow:0 18px 32px rgba(25,34,65,.42),inset 0 0 0 3px rgba(235,244,255,.22); }
#villaHouse[data-template="polar"] .vh-grain { opacity:.32; background:repeating-linear-gradient(0deg,transparent 0 16px,rgba(220,230,245,.28) 17px 19px),repeating-linear-gradient(90deg,transparent 0 42px,rgba(220,230,245,.18) 43px 45px); }
#plotMsgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#plotView .input-row { padding: 10px 12px; }

/* ------- 可进入的别墅外观 ------- */
.villa-house { position:absolute; left:50%; top:47%; width:min(46vw,440px); height:min(42vh,350px); transform:translate(-50%,-52%); z-index:8; pointer-events:none; }
.villa-house[data-source-role] { width:min(66vw,660px); height:min(55vh,460px); }
.vh-existing-home { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(20,25,45,.32)); pointer-events:none; }
.vh-existing-enter { position:absolute; left:50%; bottom:5%; transform:translateX(-50%); z-index:6; pointer-events:auto; border:1px solid rgba(255,238,195,.75); border-radius:999px; padding:8px 16px; color:#4f3c29; background:rgba(255,244,214,.9); box-shadow:0 5px 18px rgba(40,30,30,.28); cursor:pointer; font:600 12px/1 inherit; backdrop-filter:blur(5px); }
.vh-existing-enter:hover { transform:translateX(-50%) translateY(-2px); }
.vh-wall { position:absolute; left:12%; right:12%; bottom:0; height:58%; border-radius:7px 7px 3px 3px; background:var(--vh-wall); box-shadow:0 18px 30px rgba(45,40,60,.28), inset 0 0 0 2px rgba(255,255,255,.35); pointer-events:auto; }
.vh-wall[data-x] { display:block; }
.villa-house .vh-grain { position:absolute; inset:0; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(80,60,50,.25) 18px 19px); }
.villa-house[data-floors="2"] .vh-wall,.villa-house .vh-wall { height:66%; }
.vh-roof { position:absolute; left:-12%; right:-12%; top:-43%; height:46%; background:var(--vh-roof); filter:drop-shadow(0 7px 4px rgba(50,30,35,.22)); }
.roof-slope { clip-path:polygon(50% 0,100% 100%,0 100%); }
.roof-flat { top:-18%; height:20%; border-radius:7px 7px 2px 2px; }
.roof-dome { left:4%; right:4%; top:-38%; height:40%; border-radius:50% 50% 8px 8px; }
.vh-window { position:absolute; width:18%; height:25%; border:6px solid #f3ede0; border-radius:5px; background:linear-gradient(145deg,var(--vh-sky),#fff2b2); box-shadow:inset 0 0 12px rgba(255,255,255,.8); }
.vh-window::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.75) 47% 53%,transparent 54%),linear-gradient(transparent 46%,rgba(255,255,255,.75) 47% 53%,transparent 54%); }
.vh-wL { left:12%; bottom:13%; }.vh-wR { right:12%; bottom:13%; }.vh-wU { left:18%; top:9%; }
.vh-door { position:absolute; left:50%; bottom:0; width:18%; height:43%; transform:translateX(-50%); border:0; border-radius:8px 8px 0 0; background:linear-gradient(90deg,#75482f,#9b6846 50%,#70422d); box-shadow:inset 0 0 0 3px rgba(70,35,22,.24),0 0 18px rgba(255,210,125,.38); cursor:pointer; z-index:5; }
.vh-door-knob { position:absolute; right:14%; top:53%; width:7px; height:7px; border-radius:50%; background:#f3cf78; box-shadow:0 0 7px #ffe8a9; }
.vh-door-glow { position:absolute; inset:-8px; border-radius:12px; border:2px solid rgba(255,226,155,.28); animation:landAttn 2.4s ease-in-out infinite; }
.vh-balcony { position:absolute; left:37%; top:28%; width:26%; height:15%; border:4px solid #eee3d3; border-top:0; background:repeating-linear-gradient(90deg,#eee3d3 0 4px,transparent 4px 16px); z-index:4; }
.vh-chimney { position:absolute; right:16%; top:-35%; width:10%; height:27%; background:#8f5140; z-index:2; }
.vh-smoke { position:absolute; left:20%; top:-28px; width:22px; height:22px; border-radius:50%; background:rgba(245,240,232,.55); filter:blur(2px); animation:spiritFloat 2.8s ease-in-out infinite alternate; }

/* ------- 别墅室内 ------- */
#villaView { position:fixed; left:0; top:0; bottom:0; right:clamp(320px,38vw,400px); z-index:45; display:block; background:#12152b; transition:opacity .32s ease; }
#villaView[hidden] { display:none; } #villaView.vi-pending { opacity:0; }
.villa-stage { position:relative; width:100%; height:100%; overflow:hidden; perspective:900px; background:#e5d3bc; }
.vi-wall { position:absolute; inset:0 0 28%; background:linear-gradient(110deg,#efe2cf,#d7c0a5); }
.villa-stage[data-source-role] .vi-wall,.villa-stage[data-source-role] .vi-floor,.villa-stage[data-source-role] .vi-window,.villa-stage[data-source-role] .vi-fireplace { display:none !important; }
.vi-furniture[data-copied-role] { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:auto; touch-action:none; cursor:grab; }
.vi-furniture[data-copied-role]:active { cursor:grabbing; }
.vi-existing-track { position:absolute; left:0; top:0; height:100%; will-change:transform; }
.vi-existing-room { display:block; width:100%; height:100%; object-fit:cover; background:#101424; pointer-events:none; }
.vi-copied-game { z-index:18; pointer-events:auto; }
.vi-copied-game.editing { cursor:grab; outline:2px dashed rgba(255,239,176,.72); outline-offset:3px; animation:gameEditPulse 1.8s ease-in-out infinite; }
.vi-copied-game.editing:active { cursor:grabbing; }
@keyframes gameEditPulse { 50% { filter:drop-shadow(0 0 10px rgba(255,220,125,.85)); } }
.vi-copied-game.pr-remote { display:grid; place-items:center; font-size:clamp(22px,3vw,38px); filter:drop-shadow(0 4px 7px rgba(10,15,30,.45)); }
.vi-copied-tv-screen { z-index:3; }
.vi-copied-tv-hit { z-index:2; }
.vi-window-exit { position:absolute; z-index:12; border:1px solid transparent; border-radius:18px; color:#fff; background:transparent; cursor:pointer; pointer-events:auto; }
.vi-window-exit:hover { border-color:rgba(255,242,195,.34); box-shadow:inset 0 0 35px rgba(255,235,172,.08); }
.vi-window-exit span { position:absolute; left:14px; bottom:12px; padding:6px 10px; border-radius:999px; background:rgba(20,25,48,.62); opacity:0; transition:opacity .2s; font:600 11px/1 inherit; }
.vi-window-exit:hover span,.vi-window-exit:focus-visible span { opacity:1; }
.vi-wall::after { content:""; position:absolute; inset:0; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 35px,#9f8068 36px 37px); }
.villa-stage[data-sky="night"] .vi-wall { background:linear-gradient(110deg,#59536c,#3e405c); }
.vi-floor { position:absolute; left:-10%; right:-10%; bottom:-8%; height:43%; transform:rotateX(58deg); transform-origin:bottom; background:repeating-linear-gradient(90deg,#b6875e 0 12%,#a97a54 12% 13%); box-shadow:inset 0 20px 30px rgba(70,40,25,.22); }
.vi-window { position:absolute; right:8%; top:10%; width:27%; height:29%; border:11px solid #f2eadc; border-radius:7px; overflow:hidden; box-shadow:0 8px 22px rgba(50,40,55,.2); }
.vi-outside { position:absolute; inset:0; background:linear-gradient(#8fc9ec 0 58%,#77aa61 59%); }
.vi-outside[data-sky="dusk"] { background:linear-gradient(#68578d,#e39b85 58%,#6e9a5d 59%); }.vi-outside[data-sky="night"] { background:linear-gradient(#171b3d,#414776 58%,#314c3c 59%); }
.vi-yard { position:absolute; bottom:2%; transform:translateX(-50%); font-style:normal; }
.vi-roomtabs { position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:25; display:flex; gap:7px; padding:6px; border-radius:16px; background:rgba(35,30,50,.38); backdrop-filter:blur(8px); }
.vi-roomtabs[hidden] { display:none; }
.vi-tab { border:0; border-radius:11px; padding:7px 13px; color:#f7eee4; background:transparent; cursor:pointer; }.vi-tab.on { color:#55443e; background:#fff3de; }
.vi-furniture { position:absolute; inset:0; z-index:10; pointer-events:none; }.vi-item { position:absolute; transform:translate(-50%,-50%); font-style:normal; line-height:1; filter:drop-shadow(0 8px 7px rgba(45,30,35,.25)); animation:plotPop .45s ease both; }.vi-onwall { filter:drop-shadow(0 4px 4px rgba(45,30,35,.2)); }
.vi-wall-tv { width:clamp(176px,28vw,300px); aspect-ratio:16/10; transform:translate(-50%,-50%) scale(var(--vi-tv-scale,1)); transform-origin:center; pointer-events:auto; overflow:visible; filter:drop-shadow(0 14px 18px rgba(20,24,42,.34)); }
.vi-tv-bezel { position:absolute; inset:0 0 15%; overflow:visible; border:clamp(7px,1vw,12px) solid #202638; border-bottom-width:clamp(10px,1.4vw,16px); border-radius:15px 15px 8px 8px; background:linear-gradient(145deg,#30384c,#111724); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 4px 0 #0b0f18; }
.vi-wall-tv .vi-tv-screen { opacity:.42; border-radius:5px; background:radial-gradient(circle at 48% 42%,rgba(58,104,151,.38),#07101f 72%); box-shadow:inset 0 0 20px rgba(70,135,190,.22); }
.vi-wall-tv .vi-tv-screen.on { opacity:1; }
.vi-tv-hit { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; border-radius:5px; color:rgba(211,235,255,.7); background:transparent; cursor:pointer; font-size:clamp(24px,4vw,42px); }
.vi-tv-hit span { opacity:.28; filter:grayscale(.55); transition:opacity .2s,filter .2s,transform .2s; }
.vi-tv-hit:hover span,.vi-tv-hit:focus-visible span { opacity:.72; filter:none; transform:scale(1.08); }
.vi-tv-power { position:absolute; right:5%; bottom:-11%; width:6px; height:6px; border-radius:50%; background:#e55f63; box-shadow:0 0 7px rgba(255,95,100,.8); pointer-events:none; }
.vi-wall-tv .tv-onwall-remote { max-width:118%; gap:3px; padding:4px; }
.vi-wall-tv .tv-onwall-remote button { padding:4px 6px; font-size:clamp(7px,1vw,10px); }
.vi-item.css-rug { width:8em; height:3.5em; border-radius:50%; background:radial-gradient(ellipse,#d4a998,#a96e72 68%,#7b4d5a 70%); }
.vi-fireplace { position:absolute; left:7%; bottom:24%; width:18%; height:22%; z-index:8; border-radius:8px 8px 0 0; background:radial-gradient(circle at 50% 76%,#ffd37d,#e26b3f 24%,#4a2d2c 29%,#8f7868 31%); box-shadow:0 0 40px rgba(255,145,75,.36); }
@media (max-width:760px), (orientation:portrait) { .villa-house { width:min(72vw,360px); height:34vh; top:51%; } #villaView { left:0; right:0; top:0; bottom:54%; }.vi-window { width:24%; height:25%; }.vi-tab { padding:6px 9px; font-size:12px; } }

@media (max-width: 760px), (orientation: portrait) {
  #plotView { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .plot-panel { border-left: none; border-top: 1px solid rgba(120, 110, 160, 0.15); }
  .home-template-picker { gap:5px; padding:7px 8px 1px; }
  .home-template-picker button { padding:8px 6px; }
  .home-template-picker b { font-size:11px; }
  .home-template-picker span { font-size:9px; }
}


/* ------- 圈地按钮：还没圈地时轻轻呼吸提醒 ------- */
#landBtn.attn { animation: landAttn 2.4s ease-in-out infinite; }
@keyframes landAttn {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 224, 170, 0.45), 0 0 0 0 rgba(255, 200, 120, 0.55); }
  55% { box-shadow: inset 0 0 0 1px rgba(255, 224, 170, 0.45), 0 0 0 9px rgba(255, 200, 120, 0); }
}

/* ------- 大陆寓意气泡：触碰浮现，离开即散 ------- */
#contMotto {
  position: fixed; z-index: 60; transform: translate(-50%, -100%);
  padding: 9px 16px; border-radius: 14px; pointer-events: none;
  background: rgba(16, 22, 52, 0.72); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(5, 10, 35, 0.45), inset 0 0 0 1px rgba(160, 200, 255, 0.18);
  text-align: center; animation: mottoIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  max-width: 72vw;
}
#contMotto[hidden] { display: none; }
#contMotto b { display: block; font-size: 14px; letter-spacing: 3px; color: #ffe9c4; margin-bottom: 3px; }
#contMotto span { font-size: 12px; letter-spacing: 1px; color: rgba(230, 240, 255, 0.85); }
@keyframes mottoIn { from { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); } }

/* 房间左上角第三个按钮：圈地/我的地块 */
.room-land-btn { left: 148px; background: rgba(255, 220, 160, 0.16); }
.room-land-btn .fb { display: grid; place-items: center; font-size: 1.05em; font-style: normal; }

/* ------- 小游戏壳 ------- */
#gameView { position: fixed; inset: 0; z-index: 120; background: rgba(10, 14, 40, 0.92); backdrop-filter: blur(6px); display: flex; flex-direction: column; }
#gameView[hidden] { display: none; }
.game-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.game-head b { color: #ffe9c4; font-size: 17px; letter-spacing: 2px; }
.game-head button { border: 1px solid rgba(255, 224, 170, 0.4); background: rgba(255, 220, 160, 0.14); color: #ffe9c4; border-radius: 12px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
#gameStage { flex: 1; display: grid; place-items: center; min-height: 0; }
#gameStage canvas { border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }

/* ------- 星球气泡话：顶部滑入，读完自动散去 ------- */
#planetSay {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%; z-index: 96;
  transform: translateX(-50%); max-width: min(560px, 88vw);
  padding: 12px 20px; border-radius: 18px; text-align: center;
  background: rgba(16, 22, 52, 0.78); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(5, 10, 35, 0.5), inset 0 0 0 1px rgba(255, 224, 170, 0.22);
  color: #ffeed2; font-size: 14px; line-height: 1.7; letter-spacing: 0.5px;
  animation: planetSayIn 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
  pointer-events: none;
}
#planetSay[hidden] { display: none; }
#planetSay.bye { animation: planetSayOut 0.45s ease forwards; }
@keyframes planetSayIn { from { opacity: 0; transform: translate(-50%, -18px); } }
@keyframes planetSayOut { to { opacity: 0; transform: translate(-50%, -14px); } }

/* ------- 朗读喇叭角标：AI 气泡与星球气泡话（伪元素，流式更新不会被抹掉） ------- */
.msg.ai { position: relative; padding-right: 34px; cursor: pointer; }
.msg.ai::after {
  content: "🔊"; position: absolute; right: 9px; bottom: 7px;
  font-size: 11px; opacity: 0.45; transition: opacity 0.15s ease;
}
.msg.ai:hover::after { opacity: 0.9; }
#planetSay { pointer-events: auto; cursor: pointer; padding-right: 40px; }
#planetSay::after {
  content: "🔊"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: 0.55;
}

/* 游戏壳里的嵌入式游戏 */
.game-frame {
  width: min(520px, 94vw); height: min(680px, 82vh);
  border: none; border-radius: 18px; background: #faf8ef;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ═══════════ 实景房间 ═══════════ */
.scene.photo-mode .wall, .scene.photo-mode .wall-grain, .scene.photo-mode .window,
.scene.photo-mode .lightbeam, .scene.photo-mode .floor, .scene.photo-mode .rug,
.scene.photo-mode .furniture, .scene.photo-mode #props { display: none; }
#photoRoom { position: absolute; inset: 0; overflow: hidden; cursor: grab; z-index: 1; }
/* 实景模式下，返回星球/回主页/圈地三按钮必须浮在照片之上 */
.scene .back-btn { z-index: 6; }
#photoRoom:active { cursor: grabbing; }
.pr-track { position: absolute; top: 0; height: 100%; will-change: transform; }
.pr-img { height: 100%; width: auto; display: block; user-select: none; pointer-events: none; }

/* ------- 热区 ------- */
.pr-hot {
  position: absolute; border: none; background: transparent; cursor: pointer; padding: 0;
  border-radius: 12px; transition: box-shadow 0.25s ease, background 0.25s ease;
}
.pr-hot span {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(16, 22, 52, 0.6); backdrop-filter: blur(6px);
  color: #ffe9c4; font-size: 12px; letter-spacing: 1px;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.pr-hot:hover { background: rgba(255, 235, 190, 0.08); box-shadow: inset 0 0 0 2px rgba(255, 224, 170, 0.45); }
.pr-hot:hover span { opacity: 1; }
/* 电视：待机呼吸微光，勾着你去点 */
.pr-tv { animation: tvIdle 3.2s ease-in-out infinite; }
@keyframes tvIdle {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(140, 200, 255, 0.0), 0 0 0 rgba(140, 200, 255, 0); }
  50% { box-shadow: inset 0 0 0 2px rgba(140, 200, 255, 0.25), 0 0 26px rgba(140, 200, 255, 0.18); }
}
/* 遥控器：小星光一闪一闪 */
.pr-remote { font-size: 16px; animation: remoteTwinkle 2.6s ease-in-out infinite; text-shadow: 0 0 8px rgba(255, 240, 180, 0.9); }
@keyframes remoteTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* ------- 场景物件入口（阳光沙滩方案：入口藏在真实物件里，不用浮动按钮） ------- */
.pr-obj { position: absolute; border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.25s ease; }
.pr-obj:hover { box-shadow: inset 0 0 0 2px rgba(255, 224, 170, 0.5); }
.pr-obj:active { transform: scale(0.94); }
/* 三间实景房左侧原有冲浪板的点击热区：不盖住板，只用暖海雾与水光提示可互动。 */
.pr-surfobj {
  z-index: 2;
  overflow: visible;
  border-radius: 48% 48% 38% 38% / 24% 24% 72% 72%;
  touch-action: manipulation;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 190, .12);
  animation: prSurfboardHeat 2.8s ease-in-out infinite;
}
.pr-surfobj::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 165%;
  height: 24%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 75%, rgba(255, 211, 135, .52), transparent 58%),
    repeating-radial-gradient(ellipse at 50% 100%, rgba(118, 237, 255, .58) 0 2px, transparent 3px 10px);
  filter: blur(.4px);
  mix-blend-mode: screen;
  animation: prSurfMist 2.2s ease-in-out infinite;
}
.pr-surfobj::after {
  content: "🌊 冲浪";
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  min-width: 64px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  color: #fff7d3;
  background: rgba(8, 49, 76, .58);
  box-shadow: 0 6px 18px rgba(0, 32, 64, .3), inset 0 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font: 800 12px/1.1 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes prSurfboardHeat {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 238, 190, .1), 0 0 0 rgba(108, 229, 255, 0); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 238, 190, .42), 0 0 24px rgba(108, 229, 255, .34); }
}
@keyframes prSurfMist {
  0%, 100% { opacity: .42; transform: translate(-50%, 5%) scale(.84); }
  50% { opacity: .95; transform: translate(-50%, -8%) scale(1.08); }
}
/* 一条鱼：盖住右下角"豆包AI生成"水印，轻轻游动 */
.pr-fishobj { display: grid; place-items: center; animation: prFishSwim 3.4s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
.pr-fish-svg { width: 100%; height: 100%; }
@keyframes prFishSwim { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-4%, -6%) rotate(2deg); } }
/* 暖光提示：浮在可点物件上（遥控器 / 椰子），一呼一吸勾着你去点 */
.pr-glow { position: absolute; width: 46px; height: 46px; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.85), rgba(255, 225, 150, 0.35) 42%, transparent 72%);
  mix-blend-mode: screen; animation: prGlowPulse 2.4s ease-in-out infinite; }
@keyframes prGlowPulse { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.8); } 50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.12); } }

/* ------- 窗外动效（纯 CSS，零体积）：容器裁切在窗户区域 ------- */
.pr-fx { position: absolute; overflow: hidden; pointer-events: none; border-radius: 6px; }
.pr-fx i { position: absolute; inset: -20%; display: block; }
/* 海面波光：斜向光带缓缓流动 + 高光闪烁 */
.fx-sea i:first-child {
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, 0.10) 26px 30px, transparent 30px 64px);
  mix-blend-mode: screen; animation: seaFlow 9s linear infinite;
}
.fx-sea i:last-child {
  background:
    radial-gradient(3px 2px at 30% 62%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(2px 2px at 55% 70%, rgba(255,255,255,0.7), transparent 70%),
    radial-gradient(3px 2px at 72% 58%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(2px 2px at 44% 78%, rgba(255,255,255,0.6), transparent 70%);
  mix-blend-mode: screen; animation: seaGlint 3.4s ease-in-out infinite alternate;
}
@keyframes seaFlow { to { transform: translateX(64px); } }
@keyframes seaGlint { 0% { opacity: 0.15; } 55% { opacity: 0.75; } 100% { opacity: 0.3; } }
/* 森林雾气：两团柔雾反向漂 */
.fx-fog i:first-child {
  background: radial-gradient(45% 32% at 30% 55%, rgba(255, 255, 255, 0.30), transparent 75%);
  filter: blur(6px); animation: fogDriftA 16s ease-in-out infinite alternate;
}
.fx-fog i:last-child {
  background: radial-gradient(52% 36% at 70% 40%, rgba(235, 245, 240, 0.24), transparent 75%);
  filter: blur(8px); animation: fogDriftB 21s ease-in-out infinite alternate;
}
@keyframes fogDriftA { from { transform: translateX(-7%) translateY(1%); opacity: 0.55; } to { transform: translateX(8%) translateY(-2%); opacity: 0.95; } }
@keyframes fogDriftB { from { transform: translateX(6%) translateY(-1%); opacity: 0.85; } to { transform: translateX(-8%) translateY(2%); opacity: 0.45; } }
/* 极光：绿紫光幕缓慢摇曳变色 */
.fx-aurora i:first-child {
  background: linear-gradient(100deg, transparent 15%, rgba(120, 255, 190, 0.22) 35%, rgba(150, 130, 255, 0.20) 55%, transparent 78%);
  filter: blur(4px); transform-origin: top center; animation: auroraSway 11s ease-in-out infinite alternate;
}
.fx-aurora i:last-child {
  background: linear-gradient(84deg, transparent 25%, rgba(170, 255, 220, 0.16) 48%, rgba(190, 150, 255, 0.16) 66%, transparent 85%);
  filter: blur(7px); transform-origin: top center; animation: auroraSway 17s ease-in-out -6s infinite alternate-reverse;
}
@keyframes auroraSway {
  from { transform: skewX(-4deg) translateX(-3%); filter: blur(4px) hue-rotate(0deg); }
  to { transform: skewX(5deg) translateX(4%); filter: blur(5px) hue-rotate(35deg); }
}

/* ------- 心屿星球电视 ------- */
#planetTV { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgba(8, 12, 36, 0.72); backdrop-filter: blur(6px); }
#planetTV[hidden] { display: none; }
.tv-set { width: min(620px, 92vw); }
.tv-screen {
  position: relative; border-radius: 16px 16px 6px 6px; overflow: hidden;
  background: linear-gradient(170deg, #0d1220, #101a30);
  border: 10px solid #1c2233; border-bottom-width: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(80, 140, 255, 0.06);
  min-height: 300px;
}
.tv-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 6px; }
.tv-head b { color: #cfe3ff; font-size: 15px; letter-spacing: 2px; }
.tv-live { color: #ff6d6d; font-size: 11px; letter-spacing: 2px; animation: liveBlink 1.6s steps(2) infinite; }
@keyframes liveBlink { 50% { opacity: 0.25; } }
.tv-body { padding: 6px 18px 18px; max-height: 46vh; overflow-y: auto; }
.tv-item {
  margin: 0 0 10px; padding: 9px 13px; border-radius: 10px;
  background: rgba(120, 170, 255, 0.08); color: #e6efff; font-size: 14px; line-height: 1.7;
  opacity: 0; animation: tvItemIn 0.5s ease forwards;
}
@keyframes tvItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.tv-tuning { color: #7f92c8; font-size: 13px; letter-spacing: 2px; animation: liveBlink 1s steps(2) infinite; }
.tv-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(255, 255, 255, 0.02) 3px 4px); }
.tv-bar { display: flex; gap: 8px; justify-content: center; padding: 12px 0 0; }
.tv-bar button {
  border: 1px solid rgba(160, 190, 255, 0.25); background: rgba(20, 28, 56, 0.9); color: #cfe0ff;
  border-radius: 12px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background 0.15s ease;
}
.tv-bar button:hover, .tv-bar button.on { background: rgba(90, 130, 230, 0.35); }
.tv-off { color: #ff9d9d !important; }

/* 动效层边缘羽化：融进窗景，不露矩形边 */
.pr-fx {
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, black 52%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, black 52%, transparent 96%);
}

/* 壁炉火光：暖橙光晕呼吸 + 火苗跳动感（叠在壁炉区域） */
.fx-fire i:first-child {
  background: radial-gradient(55% 62% at 50% 72%, rgba(255, 150, 60, 0.42), rgba(255, 110, 40, 0.14) 60%, transparent 82%);
  mix-blend-mode: screen; animation: fireGlow 1.7s ease-in-out infinite alternate;
}
.fx-fire i:last-child {
  background:
    radial-gradient(12% 22% at 42% 78%, rgba(255, 220, 130, 0.75), transparent 75%),
    radial-gradient(10% 18% at 56% 74%, rgba(255, 180, 90, 0.65), transparent 75%),
    radial-gradient(8% 15% at 49% 68%, rgba(255, 240, 170, 0.55), transparent 75%);
  mix-blend-mode: screen; animation: fireFlicker 0.55s steps(3, jump-both) infinite alternate;
}
@keyframes fireGlow { from { opacity: 0.55; transform: scale(0.97); } to { opacity: 1; transform: scale(1.04); } }
@keyframes fireFlicker {
  from { opacity: 0.5; transform: translateY(1.5%) scaleY(0.95); }
  to { opacity: 0.95; transform: translateY(-1.5%) scaleY(1.06); }
}

/* ═══════════ 墙上真电视播放（on-TV） ═══════════ */
.pr-tv-screen {
  position: absolute; pointer-events: none; overflow: hidden;
  border-radius: 2px; opacity: 0; transition: opacity 0.5s ease;
}
/* 点亮：屏幕从熄灭黑到通电亮 */
.pr-tv-screen.on {
  pointer-events: auto;
  z-index: 3;
  opacity: 1;
  background: linear-gradient(160deg, #0a1830, #123056 60%, #0a1830);
  box-shadow: inset 0 0 12px rgba(120,180,255,0.35), 0 0 22px rgba(90,150,255,0.28);
}
.pr-tv { z-index: 2; }
.tv-scr-head {
  display: flex; align-items: center; gap: 5%;
  padding: 4% 6% 2%; color: #cfe3ff; font-weight: 600;
  font-size: clamp(7px, 1.7vw, 13px); letter-spacing: 1px; white-space: nowrap;
}
.tv-scr-live { color: #ff6d6d; font-size: 0.82em; animation: liveBlink 1.6s steps(2) infinite; }
.tv-voice-replay {
  margin-left: auto; width: 24px; height: 24px; padding: 0; flex: 0 0 auto;
  border: 1px solid rgba(207,227,255,.35); border-radius: 50%; background: rgba(207,227,255,.12);
  color: #eaf3ff; font-size: 12px; line-height: 22px; cursor: pointer;
}
.tv-voice-replay:active { transform: scale(.9); }
.tv-scr-line {
  padding: 2% 7%; color: #eaf3ff; line-height: 1.5;
  font-size: clamp(8px, 2.1vw, 16px);
  animation: tvScrIn 0.5s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@keyframes tvScrIn { from { opacity: 0; transform: translateY(6%); } to { opacity: 1; } }
.tv-scr-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(255,255,255,0.025) 2px 3px);
}
/* 浮动换台栏：贴场景底部中央，不遮电视 */
.tv-remote-bar {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px 8px; z-index: 7;
  background: rgba(12,18,42,0.72); backdrop-filter: blur(8px); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(5,10,35,0.5);
}
.tv-remote-bar button {
  border: 1px solid rgba(160,190,255,0.25); background: rgba(24,32,60,0.9); color: #cfe0ff;
  border-radius: 10px; padding: 6px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.tv-remote-bar button:hover { background: rgba(90,130,230,0.4); }
.tv-remote-bar [data-ch="off"] { color: #ff9d9d; }
@media (max-width: 760px) { .tv-remote-bar button { padding: 6px 8px; font-size: 11px; } }

/* 贴在电视机下方的换台栏（在 pr-track 内，随房间平移） */
.tv-onwall-remote {
  position: absolute; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 4px; padding: 4px 6px; white-space: nowrap;
  background: rgba(12,18,42,0.78); backdrop-filter: blur(6px);
  border-radius: 11px; box-shadow: 0 6px 18px rgba(5,10,35,0.5);
}
.tv-onwall-remote button {
  border: 1px solid rgba(160,190,255,0.22); background: rgba(24,32,60,0.92); color: #cfe0ff;
  border-radius: 8px; padding: 4px 8px; font-size: 11px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.tv-onwall-remote button:hover { background: rgba(90,130,230,0.4); }
.tv-onwall-remote button.on { background: rgba(90,130,230,0.55); color: #fff; }
.tv-screen-off {
  position: absolute; right: 3%; bottom: 4%; z-index: 6;
  width: clamp(20px,3.8vw,30px); height: clamp(20px,3.8vw,30px); padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(255,155,155,.55); border-radius: 50%;
  color: #ffb0b0; background: rgba(62,18,30,.82); cursor: pointer; pointer-events: auto;
  font: 700 clamp(10px,1.8vw,14px)/1 inherit; box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.tv-screen-off:active { transform: scale(.9); }

/* 电视屏副标题 + 音乐均衡器 */
.tv-scr-sub { padding: 2% 7%; color: #a9c2ee; font-size: clamp(7px,1.7vw,12px); }
.tv-eq { display: flex; align-items: flex-end; gap: 8%; height: 34%; padding: 3% 12% 2%; }
.tv-eq i {
  flex: 1; background: linear-gradient(#8fd0ff, #5a8de0); border-radius: 2px 2px 0 0;
  height: 30%; animation: tvEq 0.9s ease-in-out infinite alternate;
}
@keyframes tvEq { from { height: 18%; opacity: 0.7; } to { height: 100%; opacity: 1; } }

/* 电视音乐播放器：上一首/均衡器/下一首 */
.tv-music { display: flex; align-items: center; justify-content: center; gap: 6%; padding: 2% 8%; }
.tv-music .tv-eq { flex: 1; max-width: 55%; padding: 0; height: clamp(20px, 6vw, 46px); }
.tv-mbtn {
  pointer-events: auto; cursor: pointer;
  border: 1px solid rgba(160,200,255,0.4); background: rgba(30,44,80,0.9); color: #dbe8ff;
  border-radius: 50%; width: clamp(22px,4.4vw,34px); height: clamp(22px,4.4vw,34px);
  font-size: clamp(10px,2vw,15px); line-height: 1; display: grid; place-items: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.tv-mbtn:hover { background: rgba(90,130,230,0.6); }
.tv-mbtn:active { transform: scale(0.9); }

/* 墙上电视内的小游戏：连线填格在前，消消乐在后 */
.tv-game-top { display:flex; align-items:center; justify-content:space-between; gap:4%; padding:3% 6% 1%; }
.tv-game-tabs { display:flex; gap:3px; min-width:0; }
.tv-game-tabs button { min-width:0; padding:2px 6px; border:1px solid rgba(170,215,255,.28); border-radius:999px; color:#a9c2e8; background:rgba(24,47,80,.7); cursor:pointer; pointer-events:auto; font:700 clamp(6px,1.25vw,10px)/1.3 inherit; white-space:nowrap; }
.tv-game-tabs button.on { color:#fff; border-color:rgba(188,219,255,.72); background:linear-gradient(135deg,rgba(47,105,238,.9),rgba(151,61,185,.9)); box-shadow:0 0 8px rgba(111,131,255,.35); }
.tv-game-head { display:flex; align-items:center; justify-content:space-between; padding:1% 7% 2%; color:#eaf3ff; font-size:clamp(7px,1.55vw,12px); }
.tv-game-head span { color:#9ed8ff; }
.tv-game-fullscreen { position:relative; z-index:5; flex:0 0 auto; padding:2px 7px; border:1px solid rgba(170,215,255,.45); border-radius:999px; color:#eef7ff; background:rgba(35,73,116,.88); cursor:pointer; pointer-events:auto; font:700 clamp(6px,1.25vw,10px)/1.3 inherit; white-space:nowrap; }
.tv-game-fullscreen:active { transform:scale(.92); }
.tv-match3 { width:48%; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.tv-match3 button { aspect-ratio:1; min-width:0; padding:0; border:1px solid rgba(170,215,255,.24); border-radius:5px; background:rgba(30,60,98,.78); cursor:pointer; pointer-events:auto; font-size:clamp(10px,2.55vw,22px); line-height:1; box-shadow:inset 0 0 5px rgba(130,200,255,.12); }
.tv-match3 button.selected { border-color:#fff3a1; background:rgba(110,105,40,.82); transform:scale(.9); box-shadow:0 0 8px rgba(255,235,120,.75); }
.tv-game-tip { margin-top:2%; text-align:center; color:#9bb5d8; font-size:clamp(6px,1.35vw,10px); }

.tv-zip-board { position:relative; width:40%; aspect-ratio:1; margin:0 0 0 9%; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:2px; touch-action:none; user-select:none; }
.tv-zip-path { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }
.tv-zip-path polyline { stroke-width:16.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(120,155,255,.92)); }
.tv-zip-path [data-zip-head] { stroke:#fff3b0; stroke-width:2; filter:drop-shadow(0 0 4px rgba(255,218,95,.95)); transform-box:fill-box; transform-origin:center; animation:zipSnakeHead 1s ease-in-out infinite alternate; }
.tv-zip-board.drawing .tv-zip-path [data-zip-head] { fill:#fff7c9; animation-duration:.48s; }
@keyframes zipSnakeHead { to { transform:scale(1.18); filter:drop-shadow(0 0 7px rgba(255,218,95,1)); } }
.tv-zip-cell { position:relative; z-index:2; min-width:0; min-height:0; padding:0; border:1px solid rgba(170,215,255,.18); border-radius:4px; color:#fff; background:rgba(18,42,73,.5); cursor:pointer; pointer-events:auto; touch-action:none; }
.tv-zip-cell span { position:relative; z-index:2; display:grid; place-items:center; width:72%; aspect-ratio:1; margin:auto; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:#09101c; box-shadow:0 2px 5px rgba(0,0,0,.45); font:900 clamp(7px,1.7vw,13px)/1 inherit; }
.tv-zip-cell.visited { border-color:rgba(224,235,255,.86); background:var(--zip-step-color,rgba(83,112,224,.78)); box-shadow:inset 0 0 10px rgba(255,255,255,.18),0 0 5px rgba(111,131,255,.3); }
.tv-zip-cell.tip { box-shadow:inset 0 0 0 2px rgba(255,240,156,.9),0 0 8px rgba(255,218,95,.45); }
.tv-zip-foot { position:absolute; left:54%; right:7%; top:25%; display:grid; gap:6px; justify-items:center; text-align:left; }
.tv-zip-voice-bubble { position:relative; display:flex; align-items:center; gap:6px; width:100%; padding:6px 8px; border:1px solid rgba(214,233,255,.85); border-radius:11px; color:#17335a; background:rgba(238,247,255,.94); box-shadow:0 5px 14px rgba(0,0,0,.24); }
.tv-zip-voice-bubble::after { content:""; position:absolute; left:13px; bottom:-5px; width:9px; height:9px; border-right:1px solid rgba(214,233,255,.85); border-bottom:1px solid rgba(214,233,255,.85); background:rgba(238,247,255,.94); transform:rotate(45deg); }
.tv-zip-voice-bubble > button { flex:0 0 auto; width:clamp(19px,3.2vw,26px); height:clamp(19px,3.2vw,26px); padding:0; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,#3475e9,#9c4bc5); cursor:pointer; pointer-events:auto; font-size:clamp(8px,1.5vw,12px); }
.tv-zip-voice-bubble > span { min-width:0; display:grid; gap:1px; }
.tv-zip-voice-bubble b { color:#3266aa; font-size:clamp(6px,1.15vw,9px); line-height:1; }
.tv-zip-voice-bubble i { color:#17335a; font:normal 600 clamp(6px,1.28vw,9px)/1.28 inherit; }
.tv-zip-voice-bubble.speaking > button { animation:zipVoicePulse .8s ease-in-out infinite alternate; box-shadow:0 0 0 4px rgba(91,134,239,.2); }
@keyframes zipVoicePulse { to { transform:scale(1.1); box-shadow:0 0 0 7px rgba(91,134,239,.08); } }
.tv-zip-actions { display:flex; gap:5px; }
.tv-zip-actions button { padding:3px 7px; border:1px solid rgba(188,219,255,.42); border-radius:999px; color:#eef7ff; background:rgba(35,73,116,.88); cursor:pointer; pointer-events:auto; font:700 clamp(6px,1.25vw,10px)/1.2 inherit; }

/* 游戏全屏层：关闭后回到房间电视里的同一局。 */
#tvMatch3Fullscreen, #tvZipFullscreen { position:fixed; inset:0; z-index:190; display:grid; place-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 50% 35%,#244f83,#09162c 72%); }
.tv-match3-full-close { position:absolute; z-index:3; top:max(20px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); min-width:min(78vw,360px); padding:16px 28px; border:2px solid rgba(255,255,255,.75); border-radius:999px; color:#fff; background:#b72d48; box-shadow:0 12px 34px rgba(0,0,0,.4); cursor:pointer; font:900 clamp(20px,4vw,30px)/1 inherit; }
.tv-match3-full-close:active { transform:translateX(-50%) scale(.96); }
.tv-match3-full-panel { width:min(92vw,680px); margin-top:72px; padding:clamp(18px,4vw,34px); border:1px solid rgba(180,220,255,.45); border-radius:30px; background:rgba(12,31,59,.72); box-shadow:0 24px 70px rgba(0,0,0,.45); backdrop-filter:blur(12px); }
.tv-match3-full-panel header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-size:clamp(20px,4vw,30px); }
.tv-match3-full-panel header span { color:#9ed8ff; font-size:.72em; }
.tv-match3-full-board { width:min(76vw,520px); gap:clamp(7px,1.5vw,12px); }
.tv-match3-full-board button { border-radius:18px; font-size:clamp(36px,8vw,70px); border-width:2px; box-shadow:inset 0 0 18px rgba(130,200,255,.18),0 8px 20px rgba(0,0,0,.22); }
.tv-match3-full-panel p { margin:18px 0 0; text-align:center; color:#bed3ec; font-size:clamp(14px,2.5vw,18px); }
.tv-zip-full-panel { width:min(92vw,760px); max-height:calc(100vh - 120px); margin-top:72px; padding:clamp(16px,3vw,28px); overflow:auto; border:1px solid rgba(180,220,255,.45); border-radius:30px; background:rgba(12,31,59,.78); box-shadow:0 24px 70px rgba(0,0,0,.45); backdrop-filter:blur(12px); }
.tv-zip-full-panel header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.tv-zip-full-panel header > div:first-child { display:grid; gap:4px; }
.tv-zip-full-panel header b { font-size:clamp(22px,4vw,32px); }
.tv-zip-full-panel header span { color:#a9c8ee; font-size:clamp(12px,2.2vw,16px); }
.tv-zip-full-actions { display:flex; gap:8px; }
.tv-zip-full-actions button { padding:9px 14px; border:1px solid rgba(188,219,255,.52); border-radius:999px; color:#eef7ff; background:rgba(47,89,145,.88); cursor:pointer; font-weight:800; white-space:nowrap; }
.tv-zip-full-board { width:min(68vw,44vh,500px); margin:0 auto; gap:clamp(4px,1vw,8px); }
.tv-zip-full-board .tv-zip-cell { border-radius:12px; border-width:2px; }
.tv-zip-full-board .tv-zip-cell span { width:66%; font-size:clamp(20px,5vw,34px); border-width:2px; }
.tv-zip-full-board .tv-zip-path polyline { stroke-width:17.5; filter:drop-shadow(0 0 6px rgba(120,155,255,.92)); }
.tv-zip-full-voice { width:min(100%,620px); margin:12px auto 0; padding:10px 14px; gap:10px; border-radius:16px; }
.tv-zip-full-voice > button { width:42px; height:42px; font-size:19px; }
.tv-zip-full-voice b { font-size:13px; }
.tv-zip-full-voice i { font-size:clamp(13px,2.2vw,17px); line-height:1.35; }
@media (max-height:620px) { .tv-match3-full-close { padding:10px 24px; font-size:20px; }.tv-match3-full-panel,.tv-zip-full-panel { margin-top:55px; padding:14px; }.tv-match3-full-panel header,.tv-zip-full-panel header { margin-bottom:10px; }.tv-match3-full-panel p { margin-top:9px; }.tv-zip-full-board { width:min(36vh,430px); }.tv-zip-full-voice { margin-top:6px; padding:4px 8px; }.tv-zip-full-voice > button { width:28px; height:28px; font-size:14px; } }

/* ═══════════ 钓鱼（视频版全屏覆盖层） ═══════════ */
#fishingView { position: fixed; inset: 0; z-index: 130; background: #061627; overflow: hidden; }
#fishingView[hidden] { display: none; }
#fishingView.fv-pending { opacity: 0; pointer-events: none; }
.game-panorama-media {
  --game-pan:0px; position:absolute; left:50%; top:50%; width:100%; height:100%;
  overflow:hidden; transform:translate3d(calc(-50% + var(--game-pan)),-50%,0);
  will-change:transform; cursor:grab;
}
.game-user-panning .game-panorama-media { cursor:grabbing; }
.game-panorama-media > img,.game-panorama-media > video { transform:none !important; }
/* 原始游戏素材是 16:9。屏幕比它窄时保留原比例；巡航和手动滑动由
   GamePanorama 统一控制，避免 CSS 动画与用户手势互相抢画面。 */
@media (max-aspect-ratio:16/9) {
  .game-panorama-media { width:max(100vw,177.7778vh); }
}
.fv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #061627; opacity: 0; transition: opacity .14s linear; }
.fv-video.fv-on { opacity: 1; }
.fv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,8,25,.35), transparent 32%, transparent 58%, rgba(0,8,25,.52)); }
#fishingView.fv-underwater .fv-shade { background: rgba(0,45,90,.08); }
.fv-status { position: absolute; z-index: 4; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(3,15,36,.58); color: #fff; font-size: 14px; text-shadow: 0 1px 5px #000; white-space: nowrap; }
.fv-nav { position: absolute; z-index: 8; left: max(16px,env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); display: flex; gap: 9px; }
.fv-nav-btn { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #fff; font-size: 21px; background: rgba(4,18,42,.7); box-shadow: 0 8px 24px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); cursor: pointer; animation: fvNavFloat 3s ease-in-out infinite; }
.fv-nav-btn:nth-child(2) { animation-delay: -1s; }
.fv-nav-btn:nth-child(3) { animation-delay: -2s; }
.fv-nav-btn img { width: 27px; height: 27px; object-fit: contain; }
.fv-nav-btn:active { transform: scale(.92); }
@keyframes fvNavFloat { 50% { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(60,190,220,.28), inset 0 1px rgba(255,255,255,.2); } }
.fv-sound { position: absolute; z-index: 8; right: 16px; top: calc(16px + env(safe-area-inset-top)); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; font-size: 18px; background: rgba(4,18,42,.64); cursor: pointer; }
.fv-result { position: absolute; z-index: 6; left: 50%; top: 17%; transform: translateX(-50%); max-width: 85vw; padding: 14px 22px; border-radius: 22px; color: #14213c; background: rgba(255,252,235,.95); font-size: clamp(16px,2.6vw,22px); box-shadow: 0 14px 45px rgba(0,0,0,.35); animation: fvPop .45s ease; text-align: center; }
.fv-result[hidden] { display: none; }
@keyframes fvPop { from { opacity: 0; transform: translate(-50%,-12px) scale(.92); } }
.fv-score { position: absolute; z-index: 6; right: 0; bottom: 0; width: 172px; min-height: 92px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; background: transparent; }
.fv-score b { order: 3; margin-top: 7px; padding: 6px 16px; min-width: 138px; border-radius: 10px; white-space: nowrap; text-align: center; font-size: 13px; letter-spacing: 1px; color: #fff; background: rgba(90,150,210,.3); text-shadow: 0 2px 6px #000; }
.fv-catch-stack { width: 74px; max-height: 42vh; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; overflow: hidden; }
.fv-catch { min-width: 52px; height: 28px; padding: 0 4px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; font-style: normal; font-size: 20px; color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(5px); animation: fvCatchIn .45s cubic-bezier(.2,.9,.25,1.3); }
@keyframes fvCatchIn { from { opacity: 0; transform: translateY(15px) scale(.55); } }
.fv-catalog { order: 2; display: flex; gap: 8px; padding: 3px 7px; }
.fv-catalog i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; font-style: normal; font-size: 20px; filter: grayscale(1); opacity: .32; transition: filter .35s, opacity .35s, transform .35s, background .35s; }
.fv-catalog i.on { filter: none; opacity: 1; transform: translateY(-2px); background: rgba(255,222,112,.2); text-shadow: 0 0 12px rgba(255,224,120,.8); }
.fv-lens-wrap { position: absolute; z-index: 7; left: 50%; bottom: calc(7vh + env(safe-area-inset-bottom)); transform: translateX(-50%); text-align: center; }
.fv-lens-wrap p { margin: 0 0 10px; color: #fff; text-shadow: 0 2px 8px #000; font-size: 13px; }
.fv-lens { width: 88px; height: 88px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; font-size: 40px; cursor: pointer; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(118,219,255,.55) 35%, rgba(10,87,125,.8) 70%); box-shadow: 0 10px 35px rgba(0,0,0,.45), 0 0 0 10px rgba(126,225,255,.12); animation: fvFloat 2.5s ease-in-out infinite; }
.fv-lens:disabled { opacity: .7; cursor: default; animation: none; }
@keyframes fvFloat { 50% { transform: translateY(-5px); } }

/* 房间右下角钓鱼入口：只显示鱼，不保留旧圆形按钮的视觉。 */
.room-fishing-btn {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 6; width: 104px; height: 72px; border: 0; border-radius: 0; cursor: pointer;
  color: inherit; background: transparent; box-shadow: none;
  display: grid; place-items: center; padding: 0;
  animation: fishBtnFloat 2.8s ease-in-out infinite;
}
.room-fishing-btn .pr-fish-svg { width: 112px; height: 76px; max-width: none; pointer-events: none; filter: drop-shadow(0 7px 8px rgba(0,0,0,.38)); }
.pr-appleobj { display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; overflow: visible; }
.pr-appleobj span { font-size: clamp(34px, 5vw, 58px); line-height: 1; filter: drop-shadow(0 6px 5px rgba(0,0,0,.42)); transition: transform .18s ease; animation: appleTableGlow 2.4s ease-in-out infinite; }
.pr-appleobj:active span { transform: scale(.9); }
.pr-farmobj { display:grid; place-items:center; border:0; background:transparent; cursor:pointer; overflow:visible; }
.pr-farm-img { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 7px 6px rgba(0,0,0,.48)); animation:prFarmBreathe 2.4s ease-in-out infinite; }
.pr-farmobj:hover .pr-farm-img { animation-play-state:paused; transform:rotate(5deg) translateY(-4px) scale(1.08); }
.pr-farmobj:active .pr-farm-img { transform:rotate(8deg) scale(.92); }
@keyframes prFarmBreathe { 0%,100% { transform:rotate(-7deg) scale(.94); } 50% { transform:rotate(-3deg) translateY(-5px) scale(1.06); filter:drop-shadow(0 8px 11px rgba(143,235,173,.7)); } }
@keyframes appleTableGlow { 50% { filter: drop-shadow(0 6px 5px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255,70,50,.7)); } }
/* 地灵水晶球：底部锚定坐桌上，一呼一吸地发光 */
.pr-spiritobj { display: grid; place-items: end center; border: 0; background: transparent; cursor: pointer; overflow: visible; }
.pr-spirit-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; animation: prSpiritGlow 2.8s ease-in-out infinite; }
.pr-spiritobj:active .pr-spirit-img { transform: scale(.94); }
@keyframes prSpiritGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(120,220,255,.35)); } 50% { filter: drop-shadow(0 0 15px rgba(150,235,255,.75)); } }
@keyframes fishBtnFloat { 50% { transform: translateY(-4px); } }
.room-fishing-btn:active { transform: scale(.92); }
.room-fishing-btn:disabled { cursor: default; opacity: .72; }
.fishing-travel-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 28% 42%, rgba(210,250,255,.92) 0, rgba(120,215,255,.38) 18%, rgba(70,140,220,.12) 42%, transparent 68%); transform: scale(.68); transition: opacity .82s ease, transform .92s cubic-bezier(.18,.72,.18,1); mix-blend-mode: screen; }
.fishing-travel-flash.on { opacity: 1; transform: scale(1.75); }
.surfing-travel-flash { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transform:scale(.72); transform-origin:6% 56%; background:radial-gradient(circle at 6% 56%, rgba(255,231,164,.98) 0, rgba(111,239,255,.66) 12%, rgba(42,151,235,.28) 30%, transparent 62%); mix-blend-mode:screen; transition:opacity .76s ease,transform .88s cubic-bezier(.16,.78,.18,1); }
.surfing-travel-flash.on { opacity:1; transform:scale(1.9); }

/* ═══════ 勇气之浪（PlanetSurfing） ═══════ */
#surfingView {
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow: hidden;
  color: #fff;
  background: #083665;
  font-family: inherit;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transition: opacity .32s ease;
  isolation: isolate;
}
#surfingView[hidden], #surfingView [hidden] { display: none !important; }
#surfingView.sv-pending { opacity: 0; pointer-events: none; }
.sv-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; outline:none; touch-action:none; }
.sv-vignette { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(3,14,48,.34),transparent 28%,transparent 66%,rgba(0,17,46,.5)),radial-gradient(ellipse at center,transparent 52%,rgba(1,14,37,.38)); }
.sv-nav { position:absolute; z-index:12; left:max(14px,env(safe-area-inset-left)); top:max(14px,env(safe-area-inset-top)); display:flex; gap:9px; }
.sv-nav-btn,.sv-round { width:48px; height:48px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.52); border-radius:50%; color:#fff; background:rgba(5,37,72,.56); box-shadow:0 8px 24px rgba(0,17,50,.27),inset 0 1px rgba(255,255,255,.2); backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%); font-size:21px; cursor:pointer; touch-action:manipulation; }
.sv-nav-btn img { width:27px; height:27px; object-fit:contain; pointer-events:none; }
.sv-nav-btn:active,.sv-round:active { transform:scale(.92); }
.sv-round { position:absolute; z-index:12; top:max(84px,calc(env(safe-area-inset-top) + 84px)); }
.sv-pause-btn { right:max(72px,calc(14px + env(safe-area-inset-right) + 58px)); }
.sv-sound-btn { right:max(14px,env(safe-area-inset-right)); }
.sv-hud { position:absolute; z-index:6; left:50%; top:max(14px,env(safe-area-inset-top)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,minmax(68px,94px)); gap:7px; pointer-events:none; }
.sv-hud>div { min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5px 10px; border:1px solid rgba(255,255,255,.27); border-radius:16px; background:rgba(5,33,72,.42); box-shadow:inset 0 1px rgba(255,255,255,.15); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); text-shadow:0 2px 8px rgba(0,15,44,.82); }
.sv-hud small { color:rgba(232,251,255,.78); font-size:10px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.sv-hud b { margin-top:1px; font-size:clamp(16px,2vw,22px); line-height:1; font-variant-numeric:tabular-nums; }
.sv-combo b { color:#ffe585; }
.sv-courage { position:absolute; z-index:6; left:50%; top:calc(max(14px,env(safe-area-inset-top)) + 57px); transform:translateX(-50%); width:min(390px,46vw); display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; padding:6px 11px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(3,29,65,.48); box-shadow:0 8px 24px rgba(0,21,58,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none; }
.sv-courage>span { height:9px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.18); box-shadow:inset 0 1px 4px rgba(0,0,0,.26); }
.sv-courage i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5cf2ff,#8fffc8 56%,#ffe471); box-shadow:0 0 13px rgba(111,242,255,.82); transition:width .16s ease; }
.sv-courage b { min-width:92px; color:#fff5bd; font-size:11px; text-align:right; white-space:nowrap; }
.sv-callout { position:absolute; z-index:7; left:50%; top:23%; transform:translateX(-50%); max-width:min(80vw,520px); padding:11px 20px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:#e9fbff; background:rgba(4,43,78,.66); box-shadow:0 12px 36px rgba(0,20,55,.28); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); font-size:clamp(14px,2vw,19px); font-weight:850; text-align:center; animation:svCall .35s cubic-bezier(.2,.9,.2,1.24); pointer-events:none; }
.sv-callout.gold { color:#4b3300; border-color:rgba(255,246,190,.92); background:linear-gradient(135deg,rgba(255,245,174,.96),rgba(255,190,83,.94)); box-shadow:0 0 34px rgba(255,213,86,.72); }
.sv-callout.good { color:#073e43; background:rgba(185,255,232,.93); }
.sv-callout.danger { color:#5a1a18; background:rgba(255,218,205,.94); }
@keyframes svCall { from { opacity:0; transform:translate(-50%,-16px) scale(.86); } }
.sv-gesture,.sv-portrait-tip { position:absolute; z-index:5; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); margin:0; max-width:80vw; padding:8px 15px; border-radius:999px; color:rgba(255,255,255,.9); background:rgba(0,28,62,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:12px; font-weight:750; text-align:center; white-space:nowrap; text-shadow:0 2px 7px rgba(0,0,0,.68); pointer-events:none; }
.sv-portrait-tip { bottom:calc(58px + env(safe-area-inset-bottom)); color:#fff0ad; }
.sv-overlay { position:absolute; inset:0; z-index:10; display:grid; place-items:center; padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); background:radial-gradient(circle at 50% 42%,rgba(69,214,237,.13),rgba(0,18,52,.58) 62%,rgba(0,12,36,.74)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sv-card { width:min(430px,88vw); padding:clamp(22px,4vw,38px); border:1px solid rgba(255,255,255,.46); border-radius:30px; background:linear-gradient(155deg,rgba(8,55,94,.78),rgba(26,38,91,.72)); box-shadow:0 26px 80px rgba(0,14,48,.48),inset 0 1px rgba(255,255,255,.23); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); text-align:center; }
.sv-kicker { display:block; margin-bottom:7px; color:#ffe584; font-size:11px; font-weight:900; letter-spacing:.22em; }
.sv-card h2 { margin:0; font-size:clamp(34px,6vw,58px); line-height:1.02; letter-spacing:.04em; text-shadow:0 5px 24px rgba(0,30,74,.48); }
.sv-card p { margin:12px auto 20px; color:rgba(236,252,255,.86); font-size:clamp(14px,2.1vw,17px); }
.sv-card button { width:100%; min-height:52px; margin-top:10px; padding:10px 18px; border:1px solid rgba(255,255,255,.58); border-radius:18px; color:#093c53; background:linear-gradient(135deg,#e9fff8,#86edff 58%,#ffe387); box-shadow:0 10px 28px rgba(24,174,218,.25),inset 0 1px #fff; font-size:15px; font-weight:900; cursor:pointer; touch-action:manipulation; }
.sv-card button:active { transform:scale(.98); }
.sv-card button.sv-secondary { color:#eefcff; background:rgba(255,255,255,.11); box-shadow:inset 0 1px rgba(255,255,255,.13); }
.sv-card small { display:block; margin-top:18px; color:rgba(230,249,255,.7); font-size:11px; line-height:1.55; }
.sv-end-score { padding:12px; border-radius:16px; color:#fff4b1!important; background:rgba(255,255,255,.09); font-size:18px!important; font-weight:900; }
.sv-flash { position:absolute; inset:0; z-index:9; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(255,250,194,.96),rgba(255,205,74,.32) 36%,transparent 70%); transition:opacity .5s ease; mix-blend-mode:screen; }
.sv-flash.on { opacity:1; }
#surfingView.sv-burst .sv-courage { border-color:rgba(255,235,139,.82); box-shadow:0 0 30px rgba(255,213,77,.48); }
#surfingView.sv-burst .sv-vignette { background:radial-gradient(circle at 50% 52%,rgba(255,222,92,.08),rgba(0,17,46,.44) 78%); }
#surfingView.sv-shake .sv-canvas { animation:svShake .38s linear; }
@keyframes svShake { 0%,100%{transform:translate(0)} 20%{transform:translate(-7px,3px)} 40%{transform:translate(6px,-3px)} 60%{transform:translate(-4px,-2px)} 80%{transform:translate(3px,2px)} }

@media (max-width:900px) {
  .sv-hud { top:calc(max(14px,env(safe-area-inset-top)) + 57px); grid-template-columns:repeat(4,minmax(58px,76px)); }
  .sv-hud>div { min-height:42px; padding:4px 7px; border-radius:13px; }
  .sv-courage { top:calc(max(14px,env(safe-area-inset-top)) + 106px); width:min(360px,72vw); }
  .sv-callout { top:27%; }
}
@media (orientation:portrait) {
  .sv-nav-btn,.sv-round { width:46px; height:46px; }
  .sv-round { top:calc(max(14px,env(safe-area-inset-top)) + 140px); }
  .sv-hud { top:calc(max(14px,env(safe-area-inset-top)) + 55px); width:calc(100% - 22px); grid-template-columns:repeat(4,1fr); gap:5px; }
  .sv-hud>div { min-width:0; min-height:40px; padding:4px; }
  .sv-hud small { font-size:8px; }
  .sv-hud b { font-size:15px; }
  .sv-courage { top:calc(max(14px,env(safe-area-inset-top)) + 102px); width:calc(100% - 34px); }
  .sv-gesture { bottom:calc(19px + env(safe-area-inset-bottom)); max-width:calc(100% - 30px); font-size:10px; white-space:normal; }
  .sv-portrait-tip { bottom:calc(61px + env(safe-area-inset-bottom)); font-size:10px; }
  .sv-card { width:min(390px,90vw); padding:25px 20px; }
  .sv-callout { top:25%; width:max-content; max-width:82vw; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-surfobj, .pr-surfobj::before { animation: none; }
  .surfing-travel-flash { transition-duration: .12s; }
  #surfingView,.sv-callout,.sv-flash { transition:none; animation:none; }
}

/* ═══════ 果园接水果（VideoOrchard） ═══════ */
#orchardView { position: fixed; inset: 0; z-index: 130; background: #0d1a10; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#orchardView[hidden] { display: none; }

/* 海边捡贝壳：墙柜入口会把已经收集的贝壳直接展示在格子里。 */
.pr-shellcabinetobj { display:block; border:0; background:transparent; cursor:pointer; overflow:visible; }
.pr-shell-cabinet-art { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); gap:3%; padding:10% 12%; border:clamp(3px,.45vw,7px) solid #c89559; border-radius:7px; background:linear-gradient(135deg,rgba(255,240,198,.92),rgba(126,75,38,.72)); box-shadow:inset 0 0 0 2px rgba(255,244,205,.52),0 7px 15px rgba(22,13,8,.3); }
.pr-shell-cabinet-art::before,.pr-shell-cabinet-art::after { content:""; position:absolute; left:7%; right:7%; height:3px; background:#9b663a; box-shadow:0 1px rgba(255,241,200,.65); }
.pr-shell-cabinet-art::before { top:34%; }.pr-shell-cabinet-art::after { top:67%; }
.pr-shell-cabinet-art i { display:block; opacity:.16; background-image:url("assets/games/shell-beach/shell-atlas.png"); background-size:400% 300%; background-repeat:no-repeat; filter:drop-shadow(0 2px 2px rgba(46,22,10,.5)); transition:opacity .35s,transform .35s; }
.pr-shell-cabinet-art i.on { opacity:1; transform:scale(1.08); }
.pr-shell-cabinet-art i:nth-child(1){background-position:0 0}.pr-shell-cabinet-art i:nth-child(2){background-position:33.333% 0}.pr-shell-cabinet-art i:nth-child(3){background-position:66.666% 50%}.pr-shell-cabinet-art i:nth-child(4){background-position:100% 50%}.pr-shell-cabinet-art i:nth-child(5){background-position:0 100%}.pr-shell-cabinet-art i:nth-child(6){background-position:66.666% 100%}
#shellBeachView { position:fixed; inset:0; z-index:185; overflow:hidden; background:#143d51; touch-action:none; user-select:none; -webkit-user-select:none; }
#shellBeachView[hidden] { display:none; }
.sb-scene { --scene-pan:0px; position:absolute; left:50%; top:50%; width:max(100vw,177.7778vh); height:100vh; transform:translate3d(calc(-50% + var(--scene-pan)),-50%,0); overflow:hidden; box-shadow:0 0 60px rgba(0,25,40,.46); cursor:grab; will-change:transform; }
#shellBeachView.panning .sb-scene { cursor:grabbing; }
.sb-bg { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 57%; background:#4fc8dd; pointer-events:none; }
.sb-shells { position:absolute; z-index:3; inset:0; pointer-events:none; }
.sb-shell { --shell-scale:1; position:absolute; width:clamp(82px,8vw,126px); aspect-ratio:1; padding:0; border:0; transform:translate(-50%,-50%) scale(var(--shell-scale)); transform-origin:50% 80%; background-color:transparent; background-image:url("assets/games/shell-beach/shell-atlas.png") !important; background-size:400% 300% !important; background-repeat:no-repeat !important; filter:drop-shadow(0 calc(7px * var(--shell-scale)) calc(5px * var(--shell-scale)) rgba(78,48,19,.55)); cursor:pointer; animation:sbShellBreathe 2.4s ease-in-out infinite; touch-action:manipulation; pointer-events:auto; opacity:1; }
.sb-shell:hover,.sb-shell:focus-visible { transform:translate(-50%,-50%) scale(calc(var(--shell-scale) * 1.12)); outline:3px solid rgba(255,255,255,.88); outline-offset:4px; border-radius:50%; }
.sb-shell.picked { pointer-events:none; animation:sbPick .6s cubic-bezier(.2,.8,.2,1) forwards; }
.sb-hud { position:absolute; z-index:4; left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); top:max(14px,env(safe-area-inset-top)); display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.sb-back,.sb-reset { pointer-events:auto; width:48px; height:48px; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; background:rgba(14,68,91,.6); backdrop-filter:blur(8px); font-size:23px; box-shadow:0 7px 20px rgba(0,35,55,.25); }
.sb-reset { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px)); }
.sb-counter { padding:9px 15px; border:1px solid rgba(255,255,255,.6); border-radius:99px; color:#fff; background:rgba(14,68,91,.58); backdrop-filter:blur(8px); font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.sb-toast { position:absolute; z-index:5; left:50%; bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px)); transform:translate(-50%,20px); padding:11px 18px; border-radius:99px; color:#634020; background:rgba(255,248,217,.94); box-shadow:0 10px 26px rgba(62,41,18,.25); opacity:0; transition:.28s; font-weight:800; pointer-events:none; }
.sb-toast.on { transform:translate(-50%,0); opacity:1; }
@keyframes sbShellBreathe { 0%,100%{transform:translate(-50%,-50%) scale(var(--shell-scale))}50%{transform:translate(-50%,calc(-50% - 5px)) scale(var(--shell-scale))} }
@keyframes sbPick { 35%{transform:translate(-50%,calc(-50% - 28px)) scale(1.18) rotate(8deg);opacity:1}100%{transform:translate(-50%,calc(-50% - 110px)) scale(.25) rotate(24deg);opacity:0} }
@media (max-width:700px){.pr-shellcabinetobj{display:none}.sb-shell{width:clamp(70px,18vw,94px)}}

/* 小屋种地 */
#farmingView { position:fixed; inset:0; z-index:134; overflow:hidden; background:#172315; color:#fff; font-family:inherit; user-select:none; -webkit-user-select:none; }
#farmingView[hidden], #farmingView [hidden] { display:none !important; }
.fm-bg,.fm-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fm-video { display:none; z-index:2; background:#000; }
.fm-video.on { display:block; }
.fm-shade { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.28),transparent 28%,transparent 67%,rgba(0,0,0,.42)); pointer-events:none; }
.fm-nav { position:absolute; z-index:5; left:max(14px,env(safe-area-inset-left)); top:max(14px,env(safe-area-inset-top)); display:flex; gap:9px; }
.fm-nav button { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.62); border-radius:50%; background:rgba(21,34,20,.58); color:#fff; font-size:23px; box-shadow:0 5px 18px rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.fm-nav img { width:25px; height:25px; object-fit:contain; }
.fm-panel { position:absolute; z-index:4; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); min-width:min(68vw,520px); padding:10px 22px; text-align:center; border:1px solid rgba(255,255,255,.45); border-radius:22px; background:rgba(38,57,28,.56); box-shadow:0 6px 24px rgba(0,0,0,.2); backdrop-filter:blur(9px); }
.fm-title { display:block; font-size:clamp(18px,2.5vw,28px); }
.fm-hint { margin:4px 0 0; font-size:clamp(13px,1.5vw,17px); }
.fm-plots { position:absolute; z-index:4; left:50%; bottom:23%; transform:translateX(-50%); width:min(72vw,730px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,6vw,80px); pointer-events:none; }
.fm-plots span { padding:7px 5px; text-align:center; border-radius:18px; color:#fff6bd; font-weight:800; text-shadow:0 2px 5px #25180b; background:rgba(80,50,22,.58); border:1px solid rgba(255,235,164,.65); }
.fm-seeds,.fm-care { position:absolute; z-index:5; left:50%; bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px)); transform:translateX(-50%); display:flex; gap:10px; padding:10px; border-radius:22px; background:rgba(25,44,22,.62); backdrop-filter:blur(9px); }
.fm-seeds button,.fm-care button { border:1px solid rgba(255,255,255,.65); border-radius:16px; padding:11px 15px; background:linear-gradient(#fff8dc,#f2d28b); color:#493719; font:700 clamp(13px,1.8vw,17px)/1.2 inherit; box-shadow:0 5px 13px rgba(0,0,0,.28); }
.fm-care button.done { background:#bde8b1; color:#285423; }
.fm-cart { position:absolute; z-index:5; right:max(28px,env(safe-area-inset-right)); bottom:max(30px,env(safe-area-inset-bottom)); width:104px; height:104px; display:grid; place-items:center; border:2px solid #fff0ac; border-radius:50%; background:rgba(69,47,18,.72); color:#fff; font-size:48px; box-shadow:0 8px 25px rgba(0,0,0,.34); animation:fmCartPulse 1.8s ease-in-out infinite; }
.fm-cart span { display:block; font-size:14px; font-weight:800; margin-top:-15px; }
@keyframes fmCartPulse { 50% { transform:translateY(-5px); box-shadow:0 12px 30px rgba(255,225,119,.4); } }
@media (max-width:700px) {
  .fm-panel { top:72px; min-width:82vw; padding:8px 14px; }
  .fm-plots { width:88vw; bottom:25%; gap:8px; }
  .fm-seeds,.fm-care { width:calc(100% - 22px); justify-content:center; gap:6px; }
  .fm-seeds button,.fm-care button { flex:1; padding:10px 5px; }
  .fm-cart { width:88px; height:88px; font-size:40px; }
}
.ov-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1a10; opacity: 0; transition: opacity .35s ease; }
.ov-video.ov-on { opacity: 1; }
/* 新苹果树林素材是 40:17 超宽画面，保持完整高度后由镜头左右探索。 */
.ov-panorama { width:max(100vw,235.2941vh); }
/* 逐坑种地工具与操作反馈 */
.fm-field { position:absolute; z-index:4; left:5%; right:5%; top:42%; bottom:12%; pointer-events:auto; }
.fm-spot { position:absolute; width:clamp(42px,6vw,72px); aspect-ratio:1; padding:0; border:0; border-radius:50%; color:#fff; background:transparent; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; }
.fm-hole { position:absolute; inset:18%; border-radius:50%; background:radial-gradient(ellipse at 50% 38%,#160b04 0 40%,#4a2812 46% 62%,rgba(116,73,35,.35) 67%,transparent 72%); filter:drop-shadow(0 3px 2px rgba(0,0,0,.65)); transition:transform .18s,filter .18s; }
.fm-spot:hover .fm-hole,.fm-spot:focus-visible .fm-hole { transform:scale(1.18); filter:drop-shadow(0 0 9px rgba(255,226,145,.9)); }
.fm-spot.complete .fm-hole { box-shadow:0 0 0 3px rgba(133,235,126,.45); }
.fm-marks,.fm-fx { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.fm-marks b { position:absolute; font-style:normal; text-shadow:0 2px 3px #000; }
.fm-seeded { color:#f3cf72; font-size:16px; letter-spacing:1px; transform:translateY(4px); }
.fm-watered { color:#68d8ff; font-size:18px; opacity:.8; transform:translate(-11px,-6px); }
.fm-fed { color:#c9f06e; font-size:18px; transform:translate(12px,-8px); }
.fm-tools { position:absolute; z-index:6; left:50%; bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px)); transform:translateX(-50%); display:flex; gap:clamp(10px,3vw,28px); padding:25px 14px 10px; border:1px solid rgba(255,255,255,.48); border-radius:24px; background:rgba(19,39,18,.20); box-shadow:0 7px 22px rgba(0,0,0,.2); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:background .2s,box-shadow .2s; cursor:grab; touch-action:none; }
.fm-tools:hover,.fm-tools.dragging { background:rgba(19,39,18,.38); box-shadow:0 10px 30px rgba(0,0,0,.32); }
.fm-tool-grip { position:absolute !important; left:50%; top:3px; width:max-content !important; min-height:17px !important; padding:0 14px !important; border-radius:10px !important; color:rgba(255,255,255,.88) !important; background:rgba(255,255,255,.13) !important; font:700 11px/17px inherit !important; letter-spacing:1px; white-space:nowrap; transform:translateX(-50%); pointer-events:none; user-select:none; -webkit-user-select:none; }
.fm-tool-grip:active,.fm-tools.dragging .fm-tool-grip { cursor:grabbing !important; background:rgba(255,228,144,.28) !important; }
.fm-tools button { position:relative; width:clamp(72px,10vw,108px); min-height:82px; padding:3px 5px 6px; border:2px solid transparent; border-radius:19px; color:#fff; background:rgba(255,255,255,.08); cursor:pointer; touch-action:manipulation; transition:opacity .2s,transform .2s,border-color .2s,background .2s; }
.fm-tools button img { display:block; width:clamp(54px,7vw,78px); height:clamp(54px,7vw,78px); margin:-12px auto -7px; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(0,0,0,.4)); animation:fmToolBreathe 2.2s ease-in-out infinite; }
.fm-tools button:nth-child(2) img { animation-delay:-.7s; }.fm-tools button:nth-child(3) img { animation-delay:-1.4s; }
.fm-tools button span { display:block; font-size:13px; font-weight:800; text-shadow:0 2px 4px #000; }
.fm-tools button.active { border-color:#ffe590; background:rgba(255,220,102,.2); transform:translateY(-7px) scale(1.06); box-shadow:0 0 20px rgba(255,228,126,.38); }
.fm-tools button.done::after { content:"✓"; position:absolute; right:5px; top:4px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#173819; background:#9cf09c; font-weight:900; }
.fm-tools button:disabled { opacity:.48; cursor:not-allowed; }
.fm-day-done { position:absolute; z-index:9; left:50%; top:21%; width:min(88vw,560px); min-height:82px; transform:translate(-50%,-8px) scale(.96); display:grid; grid-template-columns:52px 1fr 46px 34px; align-items:center; gap:10px; padding:13px 12px 13px 15px; border:1px solid rgba(255,244,196,.78); border-radius:25px; color:#2d321d; background:linear-gradient(135deg,rgba(255,252,226,.97),rgba(222,245,190,.95)); box-shadow:0 14px 40px rgba(8,25,8,.38),inset 0 1px rgba(255,255,255,.9); opacity:0; }
.fm-day-done[hidden] { display:none !important; }
.fm-day-done.show { animation:fmDayDoneIn .48s cubic-bezier(.2,.85,.25,1.15) forwards; }
.fm-day-done-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-size:27px; background:rgba(123,184,77,.2); box-shadow:inset 0 0 0 1px rgba(72,126,46,.18); }
.fm-day-done p { margin:0; font:800 clamp(15px,2.3vw,19px)/1.55 inherit; }
.fm-day-voice,.fm-day-close { display:grid; place-items:center; border:0; cursor:pointer; }
.fm-day-voice { width:44px; height:44px; border-radius:50%; font-size:21px; background:rgba(99,159,61,.18); box-shadow:inset 0 0 0 1px rgba(69,119,42,.22); }
.fm-day-voice.off { opacity:.58; filter:grayscale(.7); }
.fm-day-close { width:30px; height:30px; border-radius:50%; color:#526044; background:rgba(73,103,52,.1); font-size:22px; }
@keyframes fmDayDoneIn { to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes fmToolBreathe { 0%,100% { transform:scale(.94) rotate(-2deg); } 50% { transform:translateY(-5px) scale(1.07) rotate(2deg); filter:drop-shadow(0 8px 11px rgba(170,243,176,.65)); } }
.fm-progress { width:min(56vw,390px); height:5px; margin:7px auto 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.2); }.fm-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9bea77,#ffe382); transition:width .25s ease; }
.fm-particle { position:absolute; left:50%; top:30%; font-style:normal; font-size:clamp(12px,2vw,22px); opacity:0; animation:fmParticle .78s cubic-bezier(.15,.75,.2,1) forwards; animation-delay:calc(var(--i) * .045s); }
.fm-seed { color:#e7c469; }.fm-water { color:#7ce1ff; text-shadow:0 0 7px #5bcfff; }.fm-fertilize { color:#b9ed63; text-shadow:0 0 7px #86c84e; }
@keyframes fmParticle { 0% { opacity:0; transform:translate(var(--x),-32px) scale(.55); } 20% { opacity:1; } 100% { opacity:0; transform:translate(var(--x2),14px) scale(1.05); } }
.fm-impact .fm-hole { animation:fmSoilImpact .42s ease; } @keyframes fmSoilImpact { 35% { transform:scale(1.28); filter:drop-shadow(0 0 12px rgba(255,226,145,.95)); } }
@media (max-width:700px) { .fm-field { left:2%; right:2%; top:39%; bottom:18%; }.fm-tools { width:calc(100% - 20px); justify-content:center; gap:7px; padding:21px 7px 7px; }.fm-tools.moved { width:auto; min-width:290px; }.fm-tools button { flex:1; max-width:105px; min-height:72px; }.fm-tools button img { width:58px; height:58px; }.fm-panel { pointer-events:none; }.fm-day-done { top:17%; width:calc(100% - 24px); grid-template-columns:42px 1fr 42px 28px; gap:7px; padding:10px; }.fm-day-done-avatar { width:40px; height:40px; font-size:23px; } }
@media (prefers-reduced-motion:reduce) { .fm-tools button img,.pr-farm-img { animation:none; transform:none; } }
.ov-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,10,4,.30), transparent 26%, transparent 52%, rgba(0,12,5,.55)); }
.ov-status { position: absolute; z-index: 6; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(6,26,12,.6); color: #fff; font-size: 14px; text-shadow: 0 1px 5px #000; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
.ov-nav { position: absolute; z-index: 14; left: max(16px,env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); display: flex; gap: 9px; }
.ov-nav-btn { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #fff; font-size: 21px; background: rgba(12,40,20,.68); box-shadow: 0 8px 24px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); cursor: pointer; }
.ov-nav-btn img { width: 27px; height: 27px; object-fit: contain; }
.ov-nav-btn:active { transform: scale(.92); }
.ov-sound { position: absolute; z-index: 8; right: 16px; top: calc(16px + env(safe-area-inset-top)); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; font-size: 18px; background: rgba(12,40,20,.62); cursor: pointer; }
.ov-hud { position: absolute; z-index: 7; right: 14px; top: calc(70px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.ov-hud .ov-score { padding: 6px 15px; border-radius: 12px; font-size: 20px; font-weight: 800; color: #fff5df; background: rgba(20,60,28,.55); text-shadow: 0 2px 6px #000; }
.ov-hud .ov-best { font-size: 12px; color: #d6ecd0; text-shadow: 0 1px 4px #000; }
.ov-hud .ov-combo { min-height: 0; font-size: 15px; font-weight: 700; color: #ffe07a; text-shadow: 0 2px 8px rgba(0,0,0,.7); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.ov-hud .ov-combo.on { opacity: 1; transform: scale(1); }
.ov-fruits, .ov-rocks, .ov-catchfx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ov-rocks { z-index: 8; overflow:hidden; }
.ov-basket-zone { position:absolute; z-index:4; left:0; right:0; top:50%; bottom:0; touch-action:none; }
.ov-fruit { position: absolute; left: 0; top: 0; display: block; line-height: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); will-change: transform; }
.ov-rock { position:absolute; left:0; top:0; display:block; line-height:1; filter:drop-shadow(0 9px 7px rgba(0,0,0,.52)); will-change:transform; }
.ov-rock-hit { animation:ovRockHit .65s ease-out forwards; }
@keyframes ovRockHit { 45%{filter:drop-shadow(0 0 22px #fff0a6) drop-shadow(0 10px 9px rgba(0,0,0,.65));}100%{opacity:.25;filter:grayscale(.6) drop-shadow(0 10px 9px rgba(0,0,0,.65));} }
.ov-fruit.ov-gold { filter: drop-shadow(0 0 12px rgba(255,224,110,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.4)); animation: ovGoldPulse 1s ease-in-out infinite; }
@keyframes ovGoldPulse { 50% { filter: drop-shadow(0 0 20px rgba(255,236,150,1)) drop-shadow(0 4px 6px rgba(0,0,0,.4)); } }
.ov-pop { position: absolute; transform: translate(-50%,-50%); font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); animation: ovPop .75s ease forwards; }
.ov-pop-gold { color: #ffe07a; font-size: 26px; }
@keyframes ovPop { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-160%) scale(1.1); } }
.ov-basket { position: absolute; z-index: 6; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; width: clamp(96px, 26vw, 150px); height: clamp(76px, 21vw, 120px); transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.ov-basket.ov-bounce { animation: ovBounce .2s ease; }
.ov-basket svg { position: relative; z-index: 1; }
.ov-basket-hole { position: absolute; z-index: 3; left: 50%; top: 46%; width: 12%; aspect-ratio: 1; border-radius: 48% 52% 44% 56%; opacity: 0; transform: translate(-50%,-50%) scale(.05); background: radial-gradient(circle at 46% 42%, #120b05 0 43%, #3b2110 46% 57%, #9a5c2b 60% 67%, transparent 70%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.9)); }
.ov-basket-hole::before, .ov-basket-hole::after { content: ""; position: absolute; left: 50%; top: 50%; width: 210%; height: 4px; border-radius: 5px; background: #281207; box-shadow: 0 -1px #e0a35a; transform-origin: 50% 50%; }
.ov-basket-hole::before { transform: translate(-50%,-50%) rotate(28deg); }
.ov-basket-hole::after { transform: translate(-50%,-50%) rotate(-35deg); }
.ov-splinter { position: absolute; z-index: 4; left: 50%; top: 50%; width: 18%; height: 7%; border-radius: 60% 18% 55% 22%; opacity: 0; background: linear-gradient(90deg,#7a421b,#dda05a 55%,#5a2e12); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.ov-basket.ov-broken { animation: ovBasketBreak .85s cubic-bezier(.2,.75,.25,1) forwards; transform-origin: 50% 70%; }
.ov-basket.ov-broken .ov-basket-hole { animation: ovHoleBurst .85s cubic-bezier(.15,.75,.25,1) forwards; }
.ov-basket.ov-broken .ov-splinter-1 { animation: ovShard1 .78s ease-out forwards; }
.ov-basket.ov-broken .ov-splinter-2 { animation: ovShard2 .82s ease-out forwards; }
.ov-basket.ov-broken .ov-splinter-3 { animation: ovShard3 .75s ease-out forwards; }
.ov-basket.ov-broken .ov-splinter-4 { animation: ovShard4 .84s ease-out forwards; }
.ov-basket.ov-broken .ov-splinter-5 { animation: ovShard5 .8s ease-out forwards; }
.ov-feedback { position:absolute; z-index:13; left:50%; top:18%; width:min(88vw,560px); min-height:82px; transform:translate(-50%,-8px) scale(.96); display:grid; grid-template-columns:52px 1fr 46px 34px; align-items:center; gap:10px; padding:13px 12px 13px 15px; border:1px solid rgba(255,232,157,.82); border-radius:25px; color:#3d2d16; background:linear-gradient(135deg,rgba(255,250,222,.98),rgba(255,218,157,.96)); box-shadow:0 14px 42px rgba(8,20,8,.42),inset 0 1px rgba(255,255,255,.92); opacity:0; }
.ov-feedback[hidden] { display:none !important; }
.ov-feedback.show { animation:ovFeedbackIn .48s cubic-bezier(.2,.85,.25,1.15) forwards; }
.ov-feedback-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-size:28px; background:rgba(222,102,57,.15); box-shadow:inset 0 0 0 1px rgba(137,74,31,.16); }
.ov-feedback p { margin:0; font:800 clamp(15px,2.3vw,19px)/1.55 inherit; }
.ov-feedback-voice,.ov-feedback-close { display:grid; place-items:center; border:0; cursor:pointer; }
.ov-feedback-voice { width:44px; height:44px; border-radius:50%; font-size:21px; background:rgba(194,116,42,.17); box-shadow:inset 0 0 0 1px rgba(130,78,29,.2); }
.ov-feedback-voice.off { opacity:.58; filter:grayscale(.7); }
.ov-feedback-close { width:30px; height:30px; border-radius:50%; color:#69523a; background:rgba(91,65,36,.1); font-size:22px; }
@keyframes ovFeedbackIn { to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes ovBounce { 40% { transform: translateX(-50%) translateY(5px) scale(1.06,.94); } }
@keyframes ovBasketBreak { 0% { transform: translateX(-50%); } 18% { transform: translateX(-50%) translateY(8px) scale(1.16,.72); } 38% { transform: translateX(-50%) translateY(-5px) rotate(-7deg) scale(.94,1.08); } 100% { transform: translateX(-50%) translateY(20px) rotate(10deg) scale(.9); filter: grayscale(.35) drop-shadow(0 8px 14px rgba(0,0,0,.55)); } }
@keyframes ovHoleBurst { 0%,12% { opacity: 0; transform: translate(-50%,-50%) scale(.05) rotate(0); } 28% { opacity: 1; transform: translate(-50%,-50%) scale(3.9) rotate(-8deg); } 52%,100% { opacity: 1; transform: translate(-50%,-50%) scale(3.15) rotate(4deg); } }
@keyframes ovShard1 { 0%,18% { opacity: 0; transform: translate(-50%,-50%) rotate(5deg); } 26% { opacity: 1; } 100% { opacity: 0; transform: translate(-260%,-260%) rotate(-210deg); } }
@keyframes ovShard2 { 0%,18% { opacity: 0; transform: translate(-50%,-50%) rotate(-15deg); } 26% { opacity: 1; } 100% { opacity: 0; transform: translate(210%,-190%) rotate(245deg); } }
@keyframes ovShard3 { 0%,18% { opacity: 0; transform: translate(-50%,-50%) rotate(30deg); } 26% { opacity: 1; } 100% { opacity: 0; transform: translate(-310%,220%) rotate(-170deg); } }
@keyframes ovShard4 { 0%,18% { opacity: 0; transform: translate(-50%,-50%) rotate(-35deg); } 26% { opacity: 1; } 100% { opacity: 0; transform: translate(260%,250%) rotate(190deg); } }
@keyframes ovShard5 { 0%,18% { opacity: 0; transform: translate(-50%,-50%) rotate(80deg); } 26% { opacity: 1; } 100% { opacity: 0; transform: translate(20%,340%) rotate(310deg); } }
.ov-gameover { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 24px; background: rgba(4,12,7,.48); backdrop-filter: blur(4px); }
.ov-gameover[hidden] { display: none; }
.ov-gameover-card { width: min(88vw, 390px); padding: 24px 22px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; color: #fff; text-align: center; background: rgba(18,48,27,.92); box-shadow: 0 18px 54px rgba(0,0,0,.45); }
.ov-gameover-card b { display: block; font-size: 22px; color: #ffe2ad; }
.ov-gameover-card p { margin: 12px 0 18px; font-size: 14px; line-height: 1.65; color: #e1efdf; }
.ov-gameover-card button { min-width: 150px; padding: 11px 20px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 800; color: #18341f; background: #f5d782; box-shadow: 0 6px 18px rgba(0,0,0,.24); cursor: pointer; }
@media (max-width:700px) { .ov-feedback { top:15%; width:calc(100% - 24px); grid-template-columns:42px 1fr 42px 28px; gap:7px; padding:10px; }.ov-feedback-avatar { width:40px; height:40px; font-size:23px; } }

/* 贝壳入口只保留一个清晰图标；收藏详情由独立可滚动橱窗展示。 */
.pr-shell-cabinet-art { inset:auto; left:50%; top:50%; width:clamp(52px,6vw,86px); aspect-ratio:1; transform:translate(-50%,-50%); display:block; padding:0; border:0; border-radius:50%; background:rgba(255,244,210,.2); box-shadow:none; }
.pr-shell-cabinet-art::before,.pr-shell-cabinet-art::after { display:none; }
.pr-shell-cabinet-art i { width:100%; height:100%; opacity:.82; background-position:0 0; filter:drop-shadow(0 5px 5px rgba(46,22,10,.55)); }
.pr-shell-cabinet-art.has-shells i { opacity:1; animation:sbCabinetGlow 2.2s ease-in-out infinite; }
@keyframes sbCabinetGlow { 50%{transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(255,222,130,.9))} }
.sb-danger { filter:drop-shadow(0 0 8px rgba(164,255,72,.82)) saturate(1.25) !important; }
.sb-danger::after { content:"?"; position:absolute; right:2%; top:2%; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#9b2; font-weight:900; }
.sb-rare { filter:drop-shadow(0 0 12px rgba(255,238,130,.95)) saturate(1.35) !important; }
.sb-toast.danger { color:#fff; background:rgba(132,32,45,.94); }
#shellGallery { position:fixed; inset:0; z-index:190; display:grid; place-items:center; padding:20px; background:rgba(7,22,38,.7); backdrop-filter:blur(8px); }
#shellGallery[hidden] { display:none; }
.sg-card { width:min(620px,94vw); max-height:min(760px,88vh); display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:26px; color:#563b25; background:linear-gradient(145deg,#fff8df,#ead3a6); box-shadow:0 28px 80px rgba(0,0,0,.45); }
.sg-card header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; }
.sg-card header b { display:block; font-size:21px; }.sg-card header span { display:block; margin-top:3px; color:#87694d; font-size:12px; }
.sg-head-actions { display:flex; align-items:center; gap:9px; }
.sg-play { min-height:44px; padding:0 18px; border:1px solid rgba(116,77,36,.22); border-radius:999px; color:#65401e; background:linear-gradient(135deg,#fff1a8,#ffc369); box-shadow:0 6px 17px rgba(104,65,25,.2); font-size:15px; font-weight:900; cursor:pointer; }
.sg-close { width:44px; height:44px; border:0; border-radius:50%; color:#fff; background:#72543a; font-size:28px; cursor:pointer; }
.sg-list { min-height:180px; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px 18px 18px; }
.sg-shell { min-height:92px; display:grid; grid-template-columns:76px 1fr; align-items:center; gap:8px; padding:9px; border-radius:17px; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 1px rgba(130,86,45,.12); }
.sg-shell.rare { background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,224,132,.62)); }
.sg-shell i { display:block; width:72px; height:72px; background-image:url("assets/games/shell-beach/shell-atlas.png"); background-size:400% 300%; background-repeat:no-repeat; filter:drop-shadow(0 4px 4px rgba(55,29,13,.35)); }
.sg-shell b,.sg-shell span { display:block; }.sg-shell span { margin-top:5px; color:#8d6a4c; font-size:11px; }
.sg-card footer { padding:10px 18px 16px; color:#8a6a4d; text-align:center; font-size:12px; }.sg-empty{grid-column:1/-1;text-align:center;padding:48px 12px;color:#8a6a4d}
@media(max-width:560px){.sg-list{grid-template-columns:1fr}.sg-card{max-height:92vh}.sg-card header{padding:14px 12px 9px}.sg-play{padding:0 12px;font-size:13px}.sg-head-actions{gap:6px}}
@media(max-width:700px){.pr-shellcabinetobj{display:block!important}}

/* 看电视时让房间画面独占横屏并冻结，避免右侧聊天栏遮住电视。 */
#roomView.tv-focus { grid-template-columns:1fr; }
#roomView.tv-focus > .panel { display:none; }
#villaView.tv-focus { right:0; }

/* 捡贝壳页沿用项目传统三键导航；顶部中央显示战绩/再来一局。 */
.sb-nav { z-index:12; }
.sb-hud { left:50%; right:auto; top:max(14px,env(safe-area-inset-top)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.sb-again { pointer-events:auto; min-width:150px; padding:11px 20px; border:1px solid rgba(255,255,255,.82); border-radius:999px; color:#66401e; background:linear-gradient(135deg,#fff5bc,#ffc96e); box-shadow:0 8px 24px rgba(70,42,15,.3); font-size:16px; font-weight:900; cursor:pointer; animation:sbAgainPulse 1.7s ease-in-out infinite; }
.sb-again[hidden] { display:none; }
#shellBeachView.game-over .sb-hud { z-index:30; top:50%; transform:translate(-50%,-50%); padding:18px 22px; border-radius:24px; background:rgba(13,75,94,.76); backdrop-filter:blur(9px); box-shadow:0 16px 42px rgba(0,30,42,.5); }
.sb-pan-hint { position:fixed; z-index:11; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); margin:0; padding:7px 14px; border-radius:999px; color:#fff; background:rgba(8,52,72,.52); backdrop-filter:blur(7px); font-size:12px; font-weight:800; pointer-events:none; text-shadow:0 1px 3px #000; white-space:nowrap; }
#shellBeachView.panning .sb-pan-hint { opacity:.42; }
@keyframes sbAgainPulse { 50%{transform:scale(1.06);box-shadow:0 8px 28px rgba(255,211,91,.65)} }
.sb-catches { position:absolute; z-index:8; right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); display:flex; align-items:flex-end; gap:8px; pointer-events:none; }
.sb-catches section { width:94px; max-height:43vh; display:flex; flex-direction:column; align-items:center; padding:8px 6px; border:1px solid rgba(255,255,255,.42); border-radius:18px; color:#fff; background:rgba(20,88,111,.46); backdrop-filter:blur(7px); box-shadow:0 7px 20px rgba(0,38,55,.22); }
.sb-catches section.toxic { background:rgba(102,42,60,.58); }
.sb-catches b { font-size:11px; text-shadow:0 1px 3px #000; }
.sb-catches section>span { min-width:34px; margin-top:5px; padding:3px 8px; border-radius:99px; text-align:center; font-size:12px; font-weight:900; background:rgba(0,0,0,.24); }
.sb-safe-stack,.sb-toxic-stack { min-height:38px; max-height:31vh; display:flex; flex-direction:column-reverse; align-items:center; overflow:hidden; margin-top:5px; }
.sb-safe-stack i,.sb-toxic-stack i { display:block; width:50px; height:50px; margin-top:-24px; background-image:url("assets/games/shell-beach/shell-atlas.png"); background-size:400% 300%; background-repeat:no-repeat; filter:drop-shadow(0 4px 4px rgba(20,20,20,.45)); }
.sb-safe-stack i:first-child,.sb-toxic-stack i:first-child { margin-top:0; }
.sb-toxic-stack i { filter:drop-shadow(0 0 6px rgba(167,255,75,.75)) hue-rotate(55deg); }
@media(max-width:620px){
  .fv-status,.ov-status { top:calc(74px + env(safe-area-inset-top)); }
  #shellBeachView:not(.game-over) .sb-hud { top:calc(74px + env(safe-area-inset-top)); }
  .sb-catches section{width:74px}.sb-safe-stack i,.sb-toxic-stack i{width:42px;height:42px;margin-top:-20px}.sb-counter{font-size:12px}
}