/* =========================================================
   Cloud Reverie v2
   1. 主角使用你提供的图（紫发女孩坐云）
   2. 自定义光标（小星星 + 拖尾）
   3. 浮动气泡（可拖动，单击打开转运小游戏）
   4. 她的身世：神秘、灰色未解锁
   ========================================================= */

:root {
  --sky-1: oklch(96% 0.025 240);
  --sky-2: oklch(86% 0.06 250);
  --sky-3: oklch(72% 0.1 260);
  --sky-4: oklch(55% 0.13 275);

  --cloud-light: oklch(98% 0.005 250);
  --cloud-shadow: oklch(78% 0.04 260);
  --cloud-edge: oklch(35% 0.06 280);

  --ink-1: oklch(28% 0.06 280);
  --ink-2: oklch(48% 0.05 280);
  --ink-3: oklch(68% 0.04 270);

  --accent-1: oklch(72% 0.18 320);
  --accent-2: oklch(78% 0.14 60);
  --accent-3: oklch(72% 0.16 200);
  --accent-4: oklch(72% 0.18 280);

  --shadow-soft: 0 30px 60px -25px oklch(35% 0.1 270 / 0.45);
  --shadow-cloud: 0 18px 30px -18px oklch(40% 0.08 270 / 0.55);
  --shadow-bubble: 0 20px 50px -22px oklch(40% 0.1 270 / 0.5);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  --radius-1: 14px;
  --radius-2: 22px;
  --radius-3: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky-1: oklch(22% 0.05 270);
    --sky-2: oklch(28% 0.07 275);
    --sky-3: oklch(36% 0.09 280);
    --sky-4: oklch(50% 0.12 290);

    --cloud-light: oklch(92% 0.02 260);
    --cloud-shadow: oklch(55% 0.05 270);
    --cloud-edge: oklch(75% 0.04 270);

    --ink-1: oklch(94% 0.01 250);
    --ink-2: oklch(82% 0.02 260);
    --ink-3: oklch(68% 0.03 260);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink-1);
  background: var(--sky-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* 默认系统光标隐藏，用自定义光标替代 */
  cursor: none;
}

/* =========================================================
   天空与云层（视差）
   ========================================================= */
.sky {
  position: fixed; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.sky-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, oklch(95% 0.05 240) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 30%, oklch(80% 0.12 290) 0%, transparent 60%),
    linear-gradient(180deg,
      var(--sky-1) 0%,
      var(--sky-2) 35%,
      var(--sky-3) 70%,
      var(--sky-4) 100%);
  z-index: 0;
}
.cloud-layer {
  position: absolute; inset: -10% -50%;
  pointer-events: none;
  will-change: transform;
  animation: drift var(--drift, 60s) linear infinite;
}
.cloud-layer[data-depth="0.15"] { --drift: 140s; opacity: 0.55; }
.cloud-layer[data-depth="0.35"] { --drift: 90s;  opacity: 0.8; }
.cloud-layer[data-depth="0.6"]  { --drift: 55s;  opacity: 1; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cloud {
  position: absolute;
  display: block;
  background: var(--cloud-light);
  border-radius: 100px;
  box-shadow:
    inset 0 -10px 0 var(--cloud-shadow),
    0 6px 14px -8px oklch(45% 0.06 270 / 0.5);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
  box-shadow: inset 0 -8px 0 var(--cloud-shadow);
}
.cloud-1  { width: 70px;  height: 22px; top: 12%; left: 10%; }
.cloud-1::before { width: 36px; height: 36px; top: -18px; left: 8px; }
.cloud-1::after  { width: 28px; height: 28px; top: -12px; left: 32px; }
.cloud-2  { width: 90px;  height: 24px; top: 22%; left: 55%; }
.cloud-2::before { width: 38px; height: 38px; top: -20px; left: 14px; }
.cloud-2::after  { width: 30px; height: 30px; top: -14px; left: 46px; }
.cloud-3  { width: 50px;  height: 18px; top: 45%; left: 78%; }
.cloud-3::before { width: 26px; height: 26px; top: -12px; left: 4px; }
.cloud-3::after  { width: 22px; height: 22px; top: -10px; left: 22px; }
.cloud-4  { width: 60px;  height: 20px; top: 8%;  left: 40%; }
.cloud-4::before { width: 30px; height: 30px; top: -14px; left: 6px; }
.cloud-4::after  { width: 24px; height: 24px; top: -10px; left: 28px; }
.cloud-5  { width: 80px;  height: 22px; top: 60%; left: 5%; }
.cloud-5::before { width: 34px; height: 34px; top: -16px; left: 8px; }
.cloud-5::after  { width: 28px; height: 28px; top: -12px; left: 38px; }
.cloud-6  { width: 65px;  height: 20px; top: 70%; left: 30%; }
.cloud-6::before { width: 32px; height: 32px; top: -14px; left: 6px; }
.cloud-6::after  { width: 24px; height: 24px; top: -10px; left: 30px; }
.cloud-7  { width: 140px; height: 36px; top: 18%; left: 25%; }
.cloud-7::before { width: 60px; height: 60px; top: -32px; left: 18px; }
.cloud-7::after  { width: 48px; height: 48px; top: -22px; left: 70px; }
.cloud-8  { width: 110px; height: 30px; top: 50%; left: 65%; }
.cloud-8::before { width: 48px; height: 48px; top: -26px; left: 12px; }
.cloud-8::after  { width: 40px; height: 40px; top: -18px; left: 56px; }
.cloud-9  { width: 160px; height: 40px; top: 75%; left: 10%; }
.cloud-9::before { width: 70px; height: 70px; top: -36px; left: 22px; }
.cloud-9::after  { width: 56px; height: 56px; top: -26px; left: 84px; }
.cloud-10 { width: 100px; height: 28px; top: 30%; left: 85%; }
.cloud-10::before { width: 44px; height: 44px; top: -24px; left: 10px; }
.cloud-10::after  { width: 36px; height: 36px; top: -16px; left: 50px; }
.cloud-11 { width: 220px; height: 56px; top: 8%;  left: 60%; }
.cloud-11::before { width: 96px; height: 96px; top: -50px; left: 28px; }
.cloud-11::after  { width: 80px; height: 80px; top: -38px; left: 116px; }
.cloud-12 { width: 180px; height: 48px; top: 65%; left: 75%; }
.cloud-12::before { width: 80px; height: 80px; top: -42px; left: 22px; }
.cloud-12::after  { width: 64px; height: 64px; top: -30px; left: 96px; }

.sparkle-field {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, oklch(98% 0.05 240 / 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 42%, oklch(98% 0.05 240 / 0.8), transparent 60%),
    radial-gradient(2px 2px at 52% 24%, oklch(98% 0.05 240 / 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 12%, oklch(98% 0.05 240 / 0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 50%, oklch(98% 0.05 240 / 0.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 65% 75%, oklch(98% 0.05 240 / 0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 65%, oklch(98% 0.05 240 / 0.65), transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes twinkle {
  from { opacity: 0.45; transform: translateY(0); }
  to   { opacity: 0.9;  transform: translateY(-6px); }
}

/* =========================================================
   自定义光标 — 细碎银色流星（鼠标移动时按速度在光标后方留下）
   ========================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  pointer-events: none;
  z-index: 200;
  will-change: transform;
  transform: translate3d(-50px, -50px, 0);
  mix-blend-mode: screen;
}
.cursor::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  background: oklch(95% 0.02 250);
  border-radius: 50%;
  box-shadow:
    0 0 4px oklch(95% 0.02 250 / 0.95),
    0 0 10px oklch(95% 0.02 250 / 0.6),
    0 0 18px oklch(95% 0.02 250 / 0.3);
  transform: translate(-50%, -50%);
  transition: transform 180ms var(--ease-out-quart), background 180ms;
}
.cursor.clicking::before {
  transform: translate(-50%, -50%) scale(1.8);
  background: oklch(98% 0.05 250);
  box-shadow:
    0 0 8px oklch(98% 0.05 250),
    0 0 18px oklch(98% 0.05 250 / 0.8),
    0 0 32px oklch(98% 0.05 250 / 0.4);
}
.cursor-trail {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 199;
  overflow: hidden;
  mix-blend-mode: screen;
}
.meteor {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: 0 50%;
}
.meteor-head {
  position: absolute;
  left: -2.5px; top: -2.5px;
  width: 5px; height: 5px;
  background: oklch(96% 0.02 250);
  border-radius: 50%;
  filter: blur(0.3px);
  box-shadow: 0 0 4px oklch(96% 0.02 250 / 0.9);
}
.meteor-tail {
  position: absolute;
  left: -2.5px; top: -0.6px;
  height: 1.2px;
  width: 0;
  background: linear-gradient(90deg, transparent 0%, oklch(95% 0.02 250 / 0.3) 30%, oklch(96% 0.02 250 / 0.85) 100%);
  border-radius: 1px;
  transform-origin: 0 50%;
  filter: blur(0.2px);
}

/* 触屏设备恢复系统光标 */
@media (hover: none) {
  body { cursor: auto; }
  .cursor, .cursor-trail { display: none; }
}

/* =========================================================
   主视觉 — 你提供的图片
   ========================================================= */
.stage {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  padding: clamp(24px, 5vw, 72px);
  gap: clamp(24px, 4vw, 80px);
}

.hero-scene {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: oklch(85% 0.08 250);
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / 0.4) inset,
    0 0 0 4px oklch(100% 0 0 / 0.2) inset,
    var(--shadow-soft);
}
.hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: scale(1.04);
  transition: transform 800ms var(--ease-out-quart);
}
.hero-scene:hover .hero-image { transform: scale(1.06); }
.hero-glaze {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, oklch(100% 0 0 / 0.35) 0%, transparent 50%),
    radial-gradient(60% 40% at 20% 100%, oklch(20% 0.05 270 / 0.18) 0%, transparent 60%),
    linear-gradient(180deg, oklch(100% 0 0 / 0.05), oklch(20% 0.05 270 / 0.1));
  pointer-events: none;
}
.hero-pulse {
  position: absolute; inset: -8px;
  border-radius: 36px;
  border: 2px solid oklch(95% 0.16 80 / 0.4);
  pointer-events: none;
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.02); }
}

/* 浮动小标签 */
.float-tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: oklch(98% 0.005 250 / 0.6);
  border: 1px solid oklch(85% 0.04 250 / 0.6);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-cloud);
  font-family: "Caveat", cursive;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.tag-1 { top: 8%;   left: -10%; animation: floatY 5s ease-in-out infinite; }
.tag-2 { top: 30%;  right: -8%; animation: floatY 6s ease-in-out infinite 0.6s; }
.tag-3 { bottom: 18%; left: -8%; animation: floatY 7s ease-in-out infinite 1.2s; }
.tag-dot {
  width: 6px; height: 6px;
  background: oklch(72% 0.18 320);
  border-radius: 50%;
  box-shadow: 0 0 6px oklch(72% 0.18 320);
}

/* =========================================================
   标题区
   ========================================================= */
.caption {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0 auto;
}
.eyebrow {
  margin: 0 0 18px;
  font-family: "Caveat", cursive;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--accent-1);
  letter-spacing: 0.05em;
}
.caption h1 {
  font-size: clamp(64px, 11vw, 152px);
  line-height: 1;
  margin: 0 0 28px;
  font-weight: 400;
  color: var(--ink-1);
  display: flex; flex-direction: column;
  gap: clamp(4px, 0.8vw, 12px);
}
.title-line { display: block; }
.main-title {
  /* 书法主标题：Ma Shan Zheng（毛笔硬笔感） */
  font-family: "Ma Shan Zheng", "Liu Jian Mao Cao", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-size: 1em;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, oklch(28% 0.06 280) 0%, oklch(45% 0.16 295) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.4);
  position: relative;
}
.main-title::after {
  /* 朱砂印章 */
  content: "印";
  position: absolute;
  right: -2.4em; top: 0.1em;
  width: 1.6em; height: 1.6em;
  display: grid; place-items: center;
  background: oklch(52% 0.22 30);
  color: oklch(98% 0.05 50);
  font-family: "Ma Shan Zheng", serif;
  font-size: 0.32em;
  border-radius: 4px;
  box-shadow: 0 0 0 2px oklch(98% 0.05 50), 0 0 0 4px oklch(52% 0.22 30 / 0.6);
  -webkit-text-fill-color: oklch(98% 0.05 50);
}
.sub-title {
  /* 副标题：ZCOOL XiaoWei（细楷，间距大） */
  font-family: "ZCOOL QingKe HuangYou", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-style: normal;
  font-weight: 400;
  color: oklch(45% 0.14 280);
  font-size: 0.42em;
  letter-spacing: 0.6em;
  margin-left: 0.2em;
  opacity: 0.85;
  text-indent: 0.2em;
}
.sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 38ch;
  margin: 0 0 28px;
  font-family: "Noto Serif SC", "Fraunces", serif;
  font-weight: 400;
}
.sub em {
  font-family: "Liu Jian Mao Cao", "Ma Shan Zheng", cursive;
  font-style: normal;
  color: var(--accent-1);
  font-size: 1.08em;
  display: inline-block;
  margin-top: 0.3em;
}
.caption-meta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: oklch(98% 0.005 250 / 0.6);
  border: 1px solid oklch(85% 0.04 250 / 0.8);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-cloud);
  margin-top: 18px;
}
.caption-meta .dot {
  width: 8px; height: 8px;
  background: var(--accent-1);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-1);
  animation: pulse 1.6s ease-in-out infinite;
}

/* =========================================================
   她的身世 — 神秘，灰色未解锁
   ========================================================= */
.lore {
  margin-top: 28px;
  padding: 20px 22px;
  background: oklch(98% 0.005 250 / 0.5);
  border: 1px solid oklch(85% 0.04 250 / 0.6);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-cloud);
  max-width: 480px;
}
.lore-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.lore-mark {
  font-size: 18px;
  color: var(--ink-3);
  animation: pulse 3s ease-in-out infinite;
}
.lore-title {
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--ink-1);
  flex: 1;
  letter-spacing: 0.08em;
}
.lore-meta {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.lore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: oklch(85% 0.04 250 / 0.5) transparent;
}
.lore-list::-webkit-scrollbar { width: 6px; }
.lore-list::-webkit-scrollbar-thumb {
  background: oklch(85% 0.04 250 / 0.5);
  border-radius: 3px;
}
.lore-list::-webkit-scrollbar-track { background: transparent; }
.lore-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: oklch(96% 0.01 250 / 0.6);
  border-radius: 12px;
  border: 1px solid oklch(85% 0.04 250 / 0.4);
  transition: all 300ms var(--ease-out-quart);
}
.lore-item.locked {
  filter: grayscale(1) opacity(0.6);
}
.lore-item.locked:hover {
  filter: grayscale(0.8) opacity(0.85);
  transform: translateX(2px);
}
.lore-item.unlocked {
  filter: none; opacity: 1;
  background: oklch(95% 0.05 80 / 0.4);
  border-color: oklch(85% 0.1 80 / 0.6);
}
.lore-item.unlocking {
  animation: loreUnlock 1.2s var(--ease-out-expo);
}
@keyframes loreUnlock {
  0%   { filter: grayscale(1) opacity(0.6); transform: scale(1); }
  40%  { filter: grayscale(0.4) opacity(0.9); transform: scale(1.03); }
  100% { filter: none; opacity: 1; transform: scale(1); }
}
.lore-q {
  position: relative;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: oklch(88% 0.03 270 / 0.7);
  border: 1.5px dashed oklch(60% 0.05 280 / 0.5);
  color: var(--ink-2);
  border-radius: 50%;
  font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  transition: all 400ms var(--ease-out-quart);
}
.lore-q .q-mark {
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-weight: 700;
  color: oklch(45% 0.08 280);
  z-index: 1;
  position: relative;
}
.lore-q .q-lock {
  position: absolute;
  right: -4px; bottom: -4px;
  font-size: 12px;
  line-height: 1;
  background: oklch(98% 0.005 250);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px oklch(40% 0.08 280 / 0.25);
  filter: grayscale(0.3);
}
.lore-item.unlocked .lore-q {
  background: linear-gradient(135deg, oklch(82% 0.16 60), oklch(72% 0.18 320));
  color: white;
  border: 1.5px solid oklch(72% 0.18 320 / 0.4);
  box-shadow: 0 4px 12px -2px oklch(72% 0.18 320 / 0.4);
}
.lore-item.unlocked .lore-q .q-star {
  color: white;
  font-size: 16px;
  text-shadow: 0 1px 2px oklch(40% 0.16 320 / 0.4);
}
.lore-txt {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
  font-family: "Noto Serif SC", "Fraunces", serif;
  font-weight: 400;
}
.lore-state {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.lore-item.unlocked .lore-state {
  color: var(--accent-1);
}
.lore-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  font-family: "Liu Jian Mao Cao", "Ma Shan Zheng", cursive;
  font-style: normal;
}

/* =========================================================
   浮动气泡 — 转运小游戏
   - 拖动用 pointer 事件
   - 单击打开游戏（区别于双击）
   - 每个气泡都微微浮动
   ========================================================= */
.bubbles {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 12;
  transition: opacity 320ms var(--ease-out-quart), transform 320ms var(--ease-out-quart);
}
/* 关键修复：游戏打开时气泡全部淡出隐藏（避免挡视线） */
.bubbles.game-active {
  opacity: 0;
  transform: scale(0.85) translateY(-12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 280ms var(--ease-out-quart), transform 280ms var(--ease-out-quart), visibility 0s 280ms;
}
.bubble {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 14px;
  background: oklch(98% 0.01 250 / 0.85);
  border: 1px solid oklch(85% 0.04 250 / 0.7);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-bubble);
  color: var(--ink-1);
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 200ms var(--ease-out-quart), box-shadow 200ms;
  font-family: inherit;
}
.bubble::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: inherit;
  border-right: 1px solid oklch(85% 0.04 250 / 0.7);
  border-bottom: 1px solid oklch(85% 0.04 250 / 0.7);
  z-index: -1;
}
.bubble:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 30px 60px -22px oklch(40% 0.1 270 / 0.6);
}
.bubble:active { cursor: grabbing; }
.bubble.dragging { opacity: 0.85; cursor: grabbing; }
.bubble.clicking { animation: bubbleClick 320ms var(--ease-out-expo); }
@keyframes bubbleClick {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* 各气泡初始位置（绝对定位，5 个沿左侧弧线） */
.bubble-omikuji  { animation: bubbleFloat 7s ease-in-out infinite; }
.bubble-maze     { animation: bubbleFloat 8s ease-in-out infinite 0.6s; }
.bubble-breakout { animation: bubbleFloat 9s ease-in-out infinite 1.2s; }
.bubble-mokugyo  { animation: bubbleFloat 7.5s ease-in-out infinite 1.8s; }
.bubble-tarot    { animation: bubbleFloat 8.5s ease-in-out infinite 0.3s; }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.bubble.dragging { animation: none !important; }

.bubble-glyph {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px oklch(40% 0.06 270 / 0.4);
  position: relative;
}

/* 云签 (omikuji) — 木签 */
.glyph-omikuji { background: linear-gradient(160deg, oklch(85% 0.1 60), oklch(72% 0.12 50)); }
.glyph-omikuji::after {
  content: "签"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: oklch(30% 0.08 50);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 700;
}

/* 云海迷宫 (maze) */
.glyph-maze { background: linear-gradient(135deg, oklch(75% 0.1 220), oklch(60% 0.12 250)); }
.glyph-maze::after {
  content: ""; position: absolute; inset: 7px;
  background:
    linear-gradient(oklch(98% 0.01 250), oklch(98% 0.01 250)) 0 0 / 100% 22% no-repeat,
    linear-gradient(oklch(98% 0.01 250), oklch(98% 0.01 250)) 0 78% / 100% 22% no-repeat,
    linear-gradient(oklch(98% 0.01 250), oklch(98% 0.01 250)) 0 50% / 22% 30% no-repeat,
    linear-gradient(oklch(98% 0.01 250), oklch(98% 0.01 250)) 78% 30% / 22% 50% no-repeat;
  border-radius: 2px;
}

/* 云雾砖块 (breakout) */
.glyph-breakout { background: linear-gradient(135deg, oklch(80% 0.12 280), oklch(72% 0.14 220)); }
.glyph-breakout::after {
  content: ""; position: absolute; inset: 6px;
  background:
    linear-gradient(oklch(95% 0.05 250), oklch(95% 0.05 250)) 0 0 / 33% 50% no-repeat,
    linear-gradient(oklch(95% 0.05 250), oklch(95% 0.05 250)) 100% 0 / 33% 50% no-repeat,
    linear-gradient(oklch(95% 0.05 250), oklch(95% 0.05 250)) 0 100% / 100% 50% no-repeat;
  border-radius: 3px;
}

/* 云朵木鱼 (mokugyo) */
.glyph-mokugyo { background: linear-gradient(160deg, oklch(92% 0.04 60), oklch(82% 0.08 50)); }
.glyph-mokugyo::after {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 24px; height: 14px;
  background: oklch(60% 0.08 40);
  border-radius: 4px 4px 50% 50% / 4px 4px 100% 100%;
  box-shadow: inset 0 -2px 0 oklch(45% 0.08 40);
}

/* 云端塔罗 */
.glyph-tarot { background: linear-gradient(160deg, oklch(45% 0.15 320), oklch(30% 0.12 290)); }
.glyph-tarot::after {
  content: "✦"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: oklch(95% 0.14 80);
  font-size: 18px;
}

/* 环球旅行 */
.glyph-globe { background: linear-gradient(135deg, oklch(72% 0.12 200), oklch(60% 0.14 250)); }
.glyph-globe::after {
  content: "✈"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: white;
  font-size: 16px;
  transform: rotate(45deg);
}

.bubble-text {
  display: flex; flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
.bubble-tag {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--accent-1);
  font-weight: 700;
  text-transform: uppercase;
}
.bubble-name {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-1);
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  letter-spacing: 0.05em;
}

/* =========================================================
   烟花画布
   ========================================================= */
#fx {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* =========================================================
   小游戏模态
   ========================================================= */
.game-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: oklch(20% 0.05 270 / 0.4);
  backdrop-filter: blur(10px);
  z-index: 50;
  padding: 24px;
  animation: modalIn 320ms var(--ease-out-quart);
  cursor: auto;
}
.game-modal *, .game-modal { cursor: auto; }
.game-modal.open { display: flex; }
@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.game-shell {
  width: min(720px, 100%);
  background: linear-gradient(180deg, oklch(99% 0.005 250), oklch(94% 0.02 250));
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: 0 40px 80px -20px oklch(20% 0.06 270 / 0.4);
  animation: shellIn 360ms var(--ease-out-expo);
}
@keyframes shellIn {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.game-bar {
  display: flex; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid oklch(85% 0.04 250);
  gap: 16px;
}
.game-tag {
  font-size: 12px;
  letter-spacing: 0.4em;
  padding: 4px 14px;
  border: 1px solid oklch(70% 0.1 290);
  border-radius: 999px;
  color: oklch(45% 0.15 295);
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-weight: 400;
}
.game-title {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink-1);
  flex: 1;
  font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
  letter-spacing: 0.05em;
}
.game-close {
  width: 36px; height: 36px;
  border: none; padding: 0;
  border-radius: 50%;
  background: oklch(92% 0.02 250);
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-2);
  transition: transform 200ms var(--ease-out-quart);
}
.game-close:hover { background: oklch(88% 0.03 250); transform: rotate(90deg); }

.game-score {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 14px 24px;
  font-size: 14px;
  color: var(--ink-2);
  border-bottom: 1px dashed oklch(85% 0.04 250);
  background: oklch(96% 0.01 250);
  align-items: center;
}
.game-score b {
  font-family: "Caveat", cursive;
  font-size: 22px;
  color: var(--ink-1);
  margin-left: 6px;
}
.game-lore-tip {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent-1);
  font-style: italic;
}

.game-canvas-wrap {
  position: relative;
  aspect-ratio: 5 / 3;
  background:
    radial-gradient(80% 60% at 50% 0%, oklch(92% 0.05 240), transparent 60%),
    linear-gradient(180deg, oklch(85% 0.06 240), oklch(72% 0.1 260));
  overflow: hidden;
}
#gameCanvas {
  width: 100%; height: 100%;
  display: block;
}
.game-start, .game-end {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: oklch(20% 0.05 270 / 0.35);
  backdrop-filter: blur(4px);
  color: oklch(98% 0.01 250);
  text-align: center;
  padding: 24px;
}
/* 关键：[hidden] 属性的 display 优先级要高于上面的 flex，否则游戏结束页会一直显示 */
.game-start[hidden], .game-end[hidden] { display: none !important; }
.game-end-title { font-size: 30px; margin: 0; font-weight: 400; font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif; letter-spacing: 0.05em; }
.game-end-sub { margin: 0; opacity: 0.9; }
.game-end-sub b {
  font-family: "Caveat", cursive;
  font-size: 32px;
  color: oklch(95% 0.15 80);
}
.game-end-lore {
  margin: 0;
  padding: 8px 16px;
  background: oklch(95% 0.16 80 / 0.25);
  border: 1px solid oklch(95% 0.16 80 / 0.5);
  border-radius: 999px;
  font-size: 13px;
  color: oklch(95% 0.15 80);
  font-style: italic;
  animation: loreUnlock 1s var(--ease-out-expo);
}
.game-go {
  border: none; padding: 12px 28px;
  border-radius: 999px;
  background: oklch(98% 0.01 250);
  color: oklch(28% 0.06 280);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--ease-out-quart), box-shadow 200ms;
  box-shadow: 0 12px 30px -10px oklch(20% 0.06 270 / 0.5);
  font-family: inherit;
}
.game-go:hover { transform: translateY(-2px); }
.game-go:active { transform: translateY(0); }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 980px) {
  body { overflow-y: auto; }
  .stage {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .hero-scene { width: min(380px, 100%); }
  .caption { text-align: center; }
  .caption h1 { text-align: center; }
  .title-line.italic { transform: translateX(0); }
  .sub { margin-left: auto; margin-right: auto; }
  .caption-meta, .lore { margin-left: auto; margin-right: auto; }
  .bubbles {
    position: static;
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
    padding: 24px 16px;
    width: 100%;
  }
  .bubble { position: static !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cloud-layer, .sparkle-field, .cursor { animation: none; }
}