/* ============================================================
   幸福泡泡 · Happy Bubbles
   治愈像素风 / 8-bit cozy pixel style
   ============================================================ */

:root {
  /* 天空与海 —— 治愈系黄昏到浅海 */
  --sky-top: #2a3f6b;
  --sky-mid: #3f6e9e;
  --sky-bot: #6fb8b8;
  --sea: #4fa8a8;
  --star: #fff2c4;

  /* 马卡龙心情色（低饱和·雾面） */
  --mood-happy: #fbb9c0;   /* 开心 · 珊瑚粉 */
  --mood-calm:  #d9ecfd;   /* 平静 · 晴空蓝 */
  --mood-love:  #fefad5;   /* 感动 · 奶油黄 */
  --mood-hope:  #ecdef8;   /* 期待 · 薰衣草紫 */
  --mood-proud: #fbd3d1;   /* 骄傲 · 暖橘粉 */
  --mood-thanks:#ffe3f1;   /* 感激 · 樱花粉 */

  --ink: #f4efe2;
  --ink-dim: rgba(244, 239, 226, .62);
  --ink-faint: rgba(244, 239, 226, .34);
  --panel: rgba(26, 48, 74, .95);
  --panel-line: rgba(255, 255, 255, .12);
  --accent: #e8d9a6;

  --px: 4px;
  --shadow-hard: 0 4px 0 rgba(0, 0, 0, .45);
  --font-pixel: "Zpix", "Fusion Pixel 12px", "Silkscreen", "Press Start 2P",
                "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky-top);
  color: var(--ink);
  font-family: var(--font-pixel);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
  letter-spacing: .02em;
}

#app {
  position: fixed; inset: 0;
  min-height: 100dvh;
  overflow: hidden;
}

/* iOS「添加到主屏幕」独立模式：拉伸到真全屏（避开底部安全区黑边）
   只影响独立模式，浏览器打开完全不变 */
@media (display-mode: standalone) {
  html, body {
    height: 100% !important;
    min-height: 100% !important;
    background: #24365e !important;
  }
  #app {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100lvh !important;
    min-height: 100vh !important;
    min-height: 100lvh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ---------------- 天空 ---------------- */
.sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      #24365e 0%,
      #2f5382 22%,
      #3f7f9e 44%,
      #55a3a3 66%,
      #79c6b4 86%,
      #9ad9bd 100%);
  overflow: hidden;
}
/* 像素化地平线光带 */
.sky::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255, 245, 214, .16) 70%, rgba(255,245,214,.26));
  pointer-events: none;
}

.stars { position: absolute; inset: 0; }
.star {
  position: absolute;
  width: var(--px); height: var(--px);
  background: var(--star);
  opacity: .9;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
  animation: twinkle 3.6s steps(2, end) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .85; }
  50% { opacity: .18; }
}

/* 像素云 */
.pixel-cloud {
  position: absolute;
  background: rgba(255, 255, 255, .35);
  box-shadow:
    6px 0 0 rgba(255,255,255,.35),
    12px 0 0 rgba(255,255,255,.35),
    18px 0 0 rgba(255,255,255,.35),
    0 -6px 0 rgba(255,255,255,.35),
    6px -6px 0 rgba(255,255,255,.35),
    -6px 0 0 rgba(255,255,255,.30),
    12px -12px 0 rgba(255,255,255,.24);
  width: 24px; height: 8px;
  animation: drift linear infinite;
}
.cloud-a { top: 12%; left: -10%; animation-duration: 96s; }
.cloud-b { top: 30%; left: -25%; animation-duration: 132s; animation-delay: -30s; opacity: .7; }
.cloud-c { top: 6%;  left: -40%; animation-duration: 168s; animation-delay: -70s; opacity: .5; }
@keyframes drift { to { transform: translateX(160vw); } }

.sea-glow {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(79, 168, 168, .5));
  pointer-events: none;
}
/* 像素波纹 */
.waves {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 90px;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.35) 26px 32px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.22) 44px 50px);
  background-size: 100% 6px, 100% 12px;
  background-position: 0 100%, 0 78%;
  background-repeat: repeat-x, repeat-x;
  animation: wave-shift 6s steps(6, end) infinite;
}
@keyframes wave-shift {
  to { background-position: 32px 100%, -50px 78%; }
}

/* ---------------- 泡泡海 ---------------- */
.ocean {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 1;              /* 泡泡海在最底层 */
}

.bubble {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;               /* 文字/图片裁进圆内 */
  cursor: pointer;
  will-change: transform;
  transform-origin: center;
  border-radius: 50%;
  /* 镭射泡泡：无硬边框，靠多层光影做壳 */
  border: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .62),
    0 0 16px 3px rgba(200, 215, 255, .50),
    0 0 30px 7px rgba(205, 180, 255, .30),
    0 6px 0 rgba(90, 80, 130, .10);
  transition: filter .3s ease;
}

/* 纯文字泡泡：背景透明，只保留边框（当泡泡上显示内容时） */
body.show-bubble-content .bubble:not(.has-img) {
  background: transparent !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .72),
    0 0 14px 2px rgba(255, 255, 255, .28);
}
body.show-bubble-content .bubble:not(.has-img) .b-inner {
  background: none;
}

/* 虹彩壳：紫/青/粉沿边缘流转 */
.bubble .b-iri {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 210deg,
      rgba(196, 150, 255, 1)   0deg,
      rgba(130, 190, 255, 1)  50deg,
      rgba(140, 255, 225, .95) 105deg,
      rgba(255, 175, 235, 1)  165deg,
      rgba(255, 215, 170, .9) 205deg,
      rgba(196, 150, 255, 1)  250deg,
      rgba(130, 190, 255, 1)  305deg,
      rgba(196, 150, 255, 1)  360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%,
      transparent 52%, #000 78%, #000 100%);
          mask: radial-gradient(circle at 50% 50%,
      transparent 52%, #000 78%, #000 100%);
  opacity: 1;
  mix-blend-mode: screen;
  animation: iri-spin 16s linear infinite;
  filter: blur(.4px);
}
@keyframes iri-spin {
  to { transform: rotate(360deg); }
}

/* 位置走 translate，浮动与缩放走内层 wrapper，互不干扰 */
.bubble .b-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  animation: floaty 5.5s ease-in-out infinite alternate,
             breathe 7.5s ease-in-out infinite;
  transition: transform .16s ease-out;
  overflow: hidden;
  /* 内部透明底：保留心情色，只在左上留一点亮 */
  background: radial-gradient(circle at 42% 34%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.12) 42%,
      rgba(255,255,255,0) 72%);
}
/* 图片泡泡：内部不浮动，图片始终居中静止 */
.bubble.has-img .b-inner {
  animation: breathe 7.5s ease-in-out infinite;
}
/* 左上角高光斑（柔光月牙） */
.bubble .b-inner::before {
  content: "";
  position: absolute;
  left: 12%; top: 8%;
  width: 44%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.45) 40%,
      rgba(255,255,255,0) 75%);
  transform: rotate(-20deg);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .95;
}
/* 底部亮弧（泡泡下缘反光） */
.bubble .b-inner::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  width: 52%; height: 22%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.22) 45%,
      rgba(255,255,255,0) 80%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.bubble:hover { filter: brightness(1.06) saturate(1.12); }
.bubble:hover .b-inner { transform: scale(1.06); }
.bubble:active .b-inner { transform: scale(.94); }

@keyframes breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.05); }
}
.bubble .bubble-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* 按比例放大填满 100% 方框 */
  object-position: center center; /* 永远居中，不偏移 */
  image-rendering: pixelated;
  opacity: .62;
  filter: saturate(.72) contrast(.95);
  /* 不设 border-radius：交给父级 .b-inner 的 overflow:hidden + border-radius:50% 统一裁圆 */
}
.bubble .bubble-tint {
  position: absolute; inset: 0;
  background: currentColor;
  opacity: .22;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* 图片泡泡的文字：不要背景框，用投影保证可读 */
.bubble.has-img .bubble-text {
  background: none;
  color: #fff;
  font-weight: 700;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .55),
    0 -1px 0 rgba(0, 0, 0, .55),
    1px 0 0 rgba(0, 0, 0, .55),
    -1px 0 0 rgba(0, 0, 0, .55),
    0 2px 0 rgba(0, 0, 0, .35);
  border-radius: 0;
}
.bubble .b-inner .bubble-text {
  position: absolute;
  inset: 18%;
  display: grid; place-items: center;
}
/* 点击直接打开详情面板，泡泡不再放大 */

/* 设置：泡泡上不显示内容（文字/图片），点开详情才看 */
body.hide-bubble-content .bubble .bubble-img,
body.hide-bubble-content .bubble .bubble-tint,
body.hide-bubble-content .bubble .bubble-text {
  display: none;
}

@keyframes floaty {
  from { transform: translateY(-4px); }
  to   { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble, .star, .pixel-cloud { animation: none !important; }
}

.bubble .ring-icon { opacity: .55; }
.bubble .bubble-text {
  position: absolute;
  inset: 18%;
  display: grid; place-items: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: #3d3a4d;
  font-weight: 700;
  overflow: hidden;
  word-break: break-word;
  pointer-events: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .9),
    0 0 6px rgba(255, 255, 255, .8),
    0 -1px 0 rgba(255, 255, 255, .7);
}

body.show-bubble-content .bubble:not(.has-img) .bubble-text {
  color: #fff;
  text-shadow:
    0 1px 0 rgba(20, 30, 50, .55),
    0 -1px 0 rgba(20, 30, 50, .55),
    1px 0 0 rgba(20, 30, 50, .55),
    -1px 0 0 rgba(20, 30, 50, .55),
    0 0 8px rgba(10, 20, 40, .45);
}

/* 泡泡破裂粒子 */
.spark {
  position: absolute;
  width: var(--px); height: var(--px);
  background: #fff;
  pointer-events: none;
  animation: spark-fly .6s steps(5, end) forwards;
}
@keyframes spark-fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* 新泡泡出现 */
.bubble.appear .b-inner { animation: appear .5s steps(6, end), floaty 5.5s ease-in-out .5s infinite alternate; }
@keyframes appear {
  from { transform: scale(.05); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------------- HUD ---------------- */
.hud {
  position: absolute; top: 0; left: 0; right: 0;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  z-index: 20;
  pointer-events: none;
}
.hud-left { display: flex; gap: 10px; align-items: center; pointer-events: auto; }
.hud-right { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.pixel-logo {
  display: grid; grid-template-columns: repeat(2, var(--px)); gap: var(--px);
}
.pixel-logo .px {
  width: var(--px); height: var(--px);
  background: var(--accent);
  opacity: .9;
  animation: logo-blink 2.4s steps(2, end) infinite;
}
.pixel-logo .px:nth-child(2) { background: var(--mood-love); animation-delay: .3s; }
.pixel-logo .px:nth-child(3) { background: var(--mood-calm); animation-delay: .6s; }
.pixel-logo .px:nth-child(4) { background: var(--mood-hope); animation-delay: .9s; }
@keyframes logo-blink { 50% { opacity: .35; } }

.app-title {
  margin: 0;
  font-size: 15px;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.app-sub {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.icon-btn {
  pointer-events: auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(20, 40, 62, .55);
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.icon-btn svg { fill: currentColor; }
.icon-btn:active { transform: scale(.92); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); }

/* ---------------- 空状态 ---------------- */
.empty-state {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 40px;
  z-index: 5;
  transition: opacity .35s ease;
}
.empty-state.hide { opacity: 0; pointer-events: none; }
.empty-bubble {
  width: 84px; height: 84px;
  border: 2px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
  animation: floaty 5s ease-in-out infinite alternate;
  margin-bottom: 18px;
}
.empty-title { margin: 0; font-size: 14px; letter-spacing: .1em; color: var(--ink-dim); }
.empty-desc  { margin: 10px 0 0; font-size: 11px; line-height: 1.9; color: var(--ink-faint); }
.empty-title, .empty-desc { text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }

/* ---------------- Dock ---------------- */
.dock {
  position: absolute; left: 0; right: 0;
  bottom: 0;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  z-index: 20;
  background: linear-gradient(180deg, transparent, rgba(30, 60, 88, .72) 60%);
}
.dock-btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(22, 44, 66, .68);
  border: 2px solid rgba(255, 255, 255, .26);
  color: var(--ink);
  font-family: inherit;
  font-size: 10px;
  padding: 11px 12px;
  cursor: pointer;
  transition: transform .12s ease, background .2s;
  min-width: 74px;
  justify-content: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.dock-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.3); }
.dock-btn:hover { background: rgba(34, 62, 90, .82); }
.dock-btn svg { fill: currentColor; }
.swatch {
  width: 13px; height: 13px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  transition: background .25s ease;
}
.blow-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .12em;
  color: #3b3628;
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, .6);
  padding: 11px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(60, 50, 40, .22);
  transition: transform .1s ease, box-shadow .1s ease;
}
.blow-btn svg { fill: #3b3628; width: 20px; height: 20px; }
.blow-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, .42);
}

/* ---------------- Sheet ---------------- */
.sheet-mask {
  position: absolute; inset: 0;
  background: rgba(12, 26, 44, .58);
  z-index: 100;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 110;
  background: var(--panel);
  backdrop-filter: blur(6px);
  border-top: 2px solid var(--panel-line);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 88dvh;
  overflow-y: auto;
  animation: rise .3s cubic-bezier(.16, 1, .3, 1);
}
@keyframes rise { from { transform: translateY(100%); } }

.sheet-handle {
  width: 44px; height: 4px;
  background: var(--ink-faint);
  margin: 4px auto 16px;
}
.sheet-title {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.7;
}

.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font-size: 10px;
  color: var(--ink-dim);
  margin-bottom: 8px;
  letter-spacing: .06em;
}
textarea {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--panel-line);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.9;
  padding: 12px;
  resize: none;
  outline: none;
  transition: border-color .2s;
}
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--ink-faint); }
.counter-row { text-align: right; font-size: 9px; color: var(--ink-faint); margin-top: 6px; }

.image-row { display: flex; align-items: center; gap: 12px; }
.image-pick {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed var(--panel-line);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 10px;
  padding: 11px 14px;
  cursor: pointer;
}
.image-pick svg { stroke: currentColor; fill: none; }
.image-pick:hover { color: var(--ink); border-color: var(--ink-faint); }
.preview { position: relative; }
.preview img {
  width: 62px; height: 62px;
  object-fit: cover;
  border: 1px solid var(--panel-line);
  display: block;
}
.preview-del {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px;
  border: none;
  background: #e0667a;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mood-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--panel-line);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 10px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all .18s;
}
.mood-chip .dot { width: 12px; height: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.mood-chip.active {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 1px var(--accent);
}

.sheet-actions {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.btn-plain, .btn-primary {
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 14px;
  cursor: pointer;
  border: 1px solid var(--panel-line);
  transition: transform .1s ease;
}
.btn-plain {
  background: transparent;
  color: var(--ink-dim);
}
.btn-plain:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.btn-plain.danger { color: #e0899b; border-color: rgba(224, 102, 122, .35); }
.btn-plain.danger:hover { background: rgba(224, 102, 122, .12); }
.btn-primary {
  background: var(--accent);
  color: #3b3628;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(60, 50, 40, .2);
}
.btn-primary:disabled {
  opacity: .32; cursor: not-allowed; box-shadow: none;
}
.btn-primary:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* 详情 */
.detail-body { margin-bottom: 20px; }
.detail-img { width: 100%; max-height: 46dvh; object-fit: contain; border: 1px solid var(--panel-line); margin-bottom: 16px; display: block; background: rgba(0,0,0,.2); }
.detail-text { font-size: 13px; line-height: 2; margin: 0 0 14px; white-space: pre-wrap; word-break: break-word; }
.detail-meta { display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--ink-faint); }
.detail-meta .dot { width: 10px; height: 10px; }

/* 清单 */
.list-body { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; max-height: 52dvh; overflow-y: auto; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer;
  text-align: left;
  background: none; border-left: none; border-right: none; border-top: none;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
}
.list-item:hover { background: rgba(255, 255, 255, .04); }
.list-item .dot { width: 14px; height: 14px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-text { font-size: 11px; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .li-time { font-size: 9px; color: var(--ink-faint); margin-top: 4px; }
.list-item .li-thumb { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--panel-line); flex: 0 0 auto; }
.list-empty { font-size: 11px; color: var(--ink-faint); text-align: center; padding: 30px 0; line-height: 2; }

/* 菜单 */
.menu-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none;
  border: none; border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  padding: 16px 6px;
  cursor: pointer;
  text-align: left;
}
.menu-item:hover { background: rgba(255, 255, 255, .04); }
.menu-item .menu-val { font-size: 10px; color: var(--ink-faint); }
.menu-item.danger { color: #e0899b; }
.menu-item.danger .menu-val { color: rgba(224, 102, 122, .7); }

/* Toast */
.toast {
  position: absolute;
  left: 50%; bottom: calc(110px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(9, 20, 33, .95);
  border: 1px solid var(--panel-line);
  color: var(--ink);
  font-size: 11px;
  padding: 11px 18px;
  z-index: 60;
  animation: toast-in .25s ease;
  max-width: 80vw;
  text-align: center;
  line-height: 1.7;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* 颗粒质感 */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .05;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* 小屏微调 */
@media (max-width: 360px) {
  .app-title { font-size: 13px; }
  .blow-btn { font-size: 12px; padding: 14px 12px; }
  .dock-btn { min-width: 62px; padding: 9px 8px; }
}

/* ---------------- 引导页 ---------------- */
.onboard {
  position: absolute; inset: 0;
  z-index: 200;
  background: #fdf6e8;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.onboard.hide { display: none; }

/* 关闭按钮 */
.onboard-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top)); right: 14px;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
}

/* 页码 */
.onboard-page-no {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.92);
  font-size: 13px; letter-spacing: .08em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  z-index: 3;
}

/* 横向滑动容器 */
.onboard-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.onboard-track::-webkit-scrollbar { display: none; }

.onboard-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 64px 22px 8px;
  text-align: center;
  background: #fdf6e8;
}
.onboard-slide img {
  width: 100%;
  max-width: 460px;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.onboard-poem {
  font-size: 15px;
  color: #6a5238;
  margin: 16px 6px 0;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: .05em;
}
.onboard-title {
  font-size: 17px;
  color: #5a4632;
  margin: 20px 6px 0;
  line-height: 1.9;
  font-weight: 700;
  letter-spacing: .04em;
}
.onboard-desc {
  font-size: 12px;
  color: #9a866c;
  margin: 12px 10px 0;
  line-height: 1.9;
  letter-spacing: .02em;
}

/* 纯文字页（封面/结尾） */
.onboard-slide.cover {
  background: linear-gradient(180deg, #f7ecd8 0%, #f0dfc4 100%);
  justify-content: center;
}
.onboard-slide.cover .onboard-big {
  font-size: 22px;
  color: #6a5238;
  line-height: 2.1;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0 18px;
}
.onboard-slide.cover .onboard-emoji {
  font-size: 54px;
  margin-bottom: 10px;
}

/* 底部：圆点 + 按钮 */
.onboard-foot {
  padding: 14px 24px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: #fdf6e8;
}
.onboard-dots {
  display: flex; gap: 8px;
}
.onboard-dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(106, 82, 56, .25);
  transition: background .2s, transform .2s;
}
.onboard-dots i.on {
  background: #c69a5e;
  transform: scale(1.25);
}
.onboard-btn {
  width: 100%; max-width: 340px;
  border: none;
  background: linear-gradient(180deg, #e8c88c, #d8b070);
  color: #5a4326;
  font-size: 14px; font-weight: 700;
  padding: 15px 20px;
  border-radius: 14px;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 4px 0 #b8935a;
}
.onboard-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b8935a; }
/* 单页引导：按钮叠在图片下方 */
.onboard-btn-inline {
  margin-top: 18px;
  max-width: 300px;
}
.onboard-skip {
  border: none; background: none;
  color: #a89372; font-size: 12px;
  cursor: pointer; padding: 4px;
  letter-spacing: .06em;
  text-decoration: underline; text-underline-offset: 3px;
}