/* ==========================================================================
   Bloom after dark — 手势花园
   移动端优先；≥ 900px 横屏为桌面布局（参考 NOCTURNE 视频版式）
   ========================================================================== */
:root {
  --bg: #060716;
  --bg2: #0b0d26;
  --ink: #f3efe6;
  --muted: rgba(243, 239, 230, 0.58);
  --dim: rgba(243, 239, 230, 0.32);
  --line: rgba(243, 239, 230, 0.14);
  --lime: #d7ff3f;
  --accent: #ff8fb1;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --zh: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --fx: 50vw;
  --fy: 46vh;
  --fr: 160px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--sans); overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.app { position: fixed; inset: 0; overflow: hidden; }

/* ------------------------------------------------------------------ 背景 */
.bg { position: absolute; inset: 0; pointer-events: none; }
.bg-glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(42% 38% at 74% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(120, 40, 160, 0.22), transparent 70%),
    radial-gradient(60% 50% at 50% 50%, rgba(40, 30, 110, 0.35), transparent 75%),
    linear-gradient(180deg, #070820 0%, #05061a 60%, #04040f 100%);
  transition: background 1.2s ease;
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .bg-glow { background:
    radial-gradient(42% 38% at 74% 30%, rgba(255, 120, 170, 0.18), transparent 70%),
    radial-gradient(50% 45% at 20% 80%, rgba(120, 40, 160, 0.22), transparent 70%),
    radial-gradient(60% 50% at 50% 50%, rgba(40, 30, 110, 0.35), transparent 75%),
    linear-gradient(180deg, #070820 0%, #05061a 60%, #04040f 100%); }
}
@keyframes glow-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); } }
.bg-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 80%);
}
.bg-blob {
  position: absolute; left: var(--fx); top: var(--fy);
  width: calc(var(--fr) * 2.5); height: calc(var(--fr) * 2.5);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 22, 52, 0.92), rgba(14, 14, 38, 0.6) 62%, transparent 100%);
  filter: blur(2px);
}
.bg-grain {
  position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 花朵画布与刻度环 */
.flora {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: opacity 0.42s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: var(--fx) var(--fy);
}
.flora.swap-out { opacity: 0; transform: scale(0.94); transition: opacity 0.2s ease, transform 0.22s ease-in; }
.halo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ring-faint { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.ring-main { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.ring-progress {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent)); transition: stroke 0.8s ease;
}
#ticks line { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
#ticks line.major { stroke: rgba(255, 255, 255, 0.5); }
.orbit { animation: orbit 26s linear infinite; }
.orbit-b { animation-duration: 41s; animation-direction: reverse; }
.orbit-c { animation-duration: 15s; }
@keyframes orbit { to { transform: rotate(360deg); } }
.orb { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); transition: fill 0.8s ease; }
.orb-hollow { fill: none; stroke: var(--lime); stroke-width: 1.2; filter: none; }
.orb-white { fill: #fff; }

/* ------------------------------------------------------------------ 顶栏 */
.topbar {
  position: absolute; z-index: 5;
  top: calc(var(--safe-t) + 14px); left: calc(var(--safe-l) + 18px); right: calc(var(--safe-r) + 18px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase;
}
.brand em { font-style: normal; color: var(--dim); }
.brand-full { display: none; }
.status { display: flex; align-items: center; gap: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(10, 10, 30, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #6b6b80; box-shadow: 0 0 0 0 transparent; }
.pill[data-state="loading"] .dot { background: #ffc34d; animation: pulse 1s ease-in-out infinite; }
.pill[data-state="online"] .dot { background: #46f08a; box-shadow: 0 0 10px #46f08a; }
.pill[data-state="demo"] .dot { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.pill[data-state="touch"] .dot { background: var(--accent); }
.pill[data-state="error"] .dot { background: #ff5a5a; }
@keyframes pulse { 50% { opacity: 0.25; } }
.clock { display: none; font-variant-numeric: tabular-nums; }
.heart {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(10, 10, 30, 0.45); color: var(--muted);
  font: 500 10px/1 var(--mono); letter-spacing: 0.14em; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.heart svg { width: 13px; height: 13px; fill: none; stroke: #ff8fb1; stroke-width: 1.8; transition: fill 0.4s; }
.heart:hover, .heart:focus-visible { color: var(--ink); border-color: rgba(255, 143, 177, 0.6); outline: none; }
.heart.done { color: var(--ink); border-color: rgba(255, 143, 177, 0.7); background: rgba(255, 143, 177, 0.14); }
.heart.done svg { fill: #ff8fb1; animation: heartbeat 1.6s ease-in-out infinite; }
.heart.pop svg { animation: heartpop 0.6s ease; }
@keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(0.96); } 45% { transform: scale(1.12); } }
@keyframes heartpop { 40% { transform: scale(1.45); } }

/* ------------------------------------------------------------------ 标题 */
.hero { position: absolute; z-index: 3; top: calc(var(--safe-t) + 50px); left: calc(var(--safe-l) + 18px); pointer-events: none; }
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.3em; color: var(--muted); text-transform: uppercase;
}
.eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.title { margin: 10px 0 0; font-weight: 400; line-height: 0.9; letter-spacing: -0.01em; }
.title .t1 { display: block; font: 400 clamp(46px, 13.5vw, 72px)/0.92 var(--serif); }
.title .t2 {
  display: block; font: italic 400 clamp(34px, 10.4vw, 56px)/1 var(--serif);
  color: transparent; -webkit-text-stroke: 1px rgba(243, 239, 230, 0.85); margin-left: 0.08em;
}
/* 署名行：显式使用已加载的 Noto Serif SC，避免系统按字回退到不同中文字体；
   12px 以下的高笔画汉字（如“稳”）在 1x 屏上灰度抗锯齿会糊成“重影”，因此加大字号、去掉合成粗体。 */
.byline {
  margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font: 400 12.5px/1.5 var(--zh); color: var(--muted); letter-spacing: 0.06em;
  font-synthesis: none; text-rendering: geometricPrecision;
}
.byline b { font-weight: 400; color: var(--ink); }
.byline b span { color: var(--accent); transition: color 0.8s ease; }
.byline i { font-style: normal; color: var(--dim); }
.byline > span { color: var(--muted); }

/* ------------------------------------------------------------------ 花种列表（移动端：横向标签） */
.species {
  position: absolute; z-index: 4; left: 0; right: 0;
  bottom: calc(var(--safe-b) + 112px);
  display: flex; gap: 8px; padding: 0 18px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.species::-webkit-scrollbar { display: none; }
.sp {
  flex: none; scroll-snap-align: center;
  display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(12, 12, 34, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.sp .n { font: 500 10px/1 var(--mono); color: var(--dim); letter-spacing: 0.08em; }
.sp .z { font: 400 13px/1 var(--zh); color: var(--muted); letter-spacing: 0.08em; }
.sp .zf { display: none; }
.sp .zs { display: inline; }
.sp.on { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 14%, rgba(12, 12, 34, 0.6)); }
.sp.on .n { color: var(--lime); }
.sp.on .z { color: var(--ink); }

/* ------------------------------------------------------------------ 信息面板（移动端：花下方一行） */
.info {
  position: absolute; z-index: 4;
  left: calc(var(--safe-l) + 18px); right: calc(var(--safe-r) + 18px);
  bottom: calc(var(--safe-b) + 160px);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 14px;
  align-items: end; pointer-events: none;
}
.idx { grid-column: 1; font: 500 10px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.idx b { color: var(--lime); font-weight: 600; }
.name { grid-column: 1; margin: 8px 0 0; font: 600 22px/1.15 var(--zh); letter-spacing: 0.08em; }
.latin { grid-column: 1; margin-top: 4px; font: italic 400 14px/1.2 var(--serif); color: var(--muted); }
.gauge { grid-column: 2; grid-row: 1 / span 3; position: relative; width: 74px; height: 74px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 5; }
.g-fill {
  fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke 0.8s ease;
}
.g-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-text b { font: 400 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.g-num { display: flex; align-items: flex-start; }
.g-text small { display: none; }
.g-text span { margin-top: 3px; font: 400 10px/1 var(--zh); color: var(--muted); letter-spacing: 0.2em; }
.meta { display: none; margin: 0; }

.frame-tag, .coords {
  position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
  font: 500 8.5px/1 var(--mono); letter-spacing: 0.24em; color: var(--dim);
}
.frame-tag { left: var(--fx); top: calc(var(--fy) + var(--fr) * 1.13 + 10px); transform: translateX(-50%); }
.frame-tag { transition: opacity 0.3s; }
.app.msg .frame-tag { opacity: 0; }
.frame-tag b { color: var(--lime); font-weight: 600; }
.coords { left: calc(var(--fx) + var(--fr) * 0.62); top: calc(var(--fy) - var(--fr) * 1.08); display: none; }

/* ------------------------------------------------------------------ 控制区 */
.controls {
  position: absolute; z-index: 5;
  left: calc(var(--safe-l) + 14px); right: calc(var(--safe-r) + 14px); bottom: calc(var(--safe-b) + 14px);
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch;
}
.ctl {
  position: relative; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(10, 10, 30, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ctl-k { font: 500 9px/1 var(--mono); letter-spacing: 0.22em; color: var(--dim); }
.ctl-k b { color: var(--lime); font-weight: 600; }
.ctl-v { margin-top: 7px; font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink); }
.ctl-v span { margin-left: 6px; font: 400 11px/1 var(--sans); letter-spacing: 0.02em; color: var(--muted); }
.ctl-bloom { grid-column: 1; cursor: ew-resize; touch-action: none; outline: none; }
.ctl-bloom:focus-visible { border-color: var(--lime); }
.ctl-bloom .bar { margin-top: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-right: 44px; }
.ctl-bloom .bar i { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--lime)); box-shadow: 0 0 10px var(--lime); }
.ctl-n { position: absolute; right: 13px; bottom: 9px; font: 400 18px/1 var(--serif); font-variant-numeric: tabular-nums; }
.ctl-switch { display: none; }
.arrows { display: flex; gap: 6px; margin-top: 9px; }
.arrow { width: 34px; height: 26px; border-radius: 8px; border: 1px solid var(--line); font: 500 13px/1 var(--mono); color: var(--muted); }
.arrow:active { background: rgba(255, 255, 255, 0.08); }
.ctl-buttons { grid-column: 2; display: flex; flex-direction: column; gap: 8px; }
.btn-demo, .btn-cam {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; min-height: 36px;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 10, 30, 0.55);
  font: 500 10px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted); white-space: nowrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-demo i, .btn-cam i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.btn-demo[aria-pressed="true"] { color: #0b0c12; background: var(--lime); border-color: var(--lime); }
.btn-demo[aria-pressed="true"] i { background: #0b0c12; }
.btn-cam span { font: 500 11px/1 var(--sans); letter-spacing: 0.06em; }
.btn-cam.on i { background: #46f08a; box-shadow: 0 0 8px #46f08a; }

/* ------------------------------------------------------------------ 摄像头预览 */
.cam {
  position: absolute; z-index: 6; margin: 0;
  top: calc(var(--safe-t) + 46px); right: calc(var(--safe-r) + 14px);
  width: 92px; height: 124px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); background: #0a0a18;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(-6px) scale(0.96); transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.app.cam-on .cam { opacity: 1; transform: none; }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam video { transform: scaleX(-1); filter: saturate(0.6) brightness(0.8) contrast(1.05); }
.cam figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font: 500 7px/1.2 var(--mono); letter-spacing: 0.16em; color: var(--lime);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.cam figcaption i { width: 5px; height: 5px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; animation: pulse 1.4s infinite; }
.cam figcaption span { color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------------ 提示 */
.toast {
  position: absolute; z-index: 8; left: 50%; top: calc(var(--fy) + var(--fr) * 1.1 - 14px);
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 9px 15px; border-radius: 99px; background: var(--lime); color: #0b0c12;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.16em; white-space: nowrap;
  box-shadow: 0 8px 30px rgba(215, 255, 63, 0.25); transition: opacity 0.3s, transform 0.3s;
}
.toast b { font: 600 12px/1 var(--zh); letter-spacing: 0.08em; margin-left: 4px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn {
  background: #ffcf5a; white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 40px);
  font: 600 12px/1.5 var(--sans); letter-spacing: 0.04em; border-radius: 16px;
}
.hint {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--fy) + var(--fr) * 1.13 + 6px); transform: translateX(-50%);
  font: 400 11px/1.4 var(--sans); color: var(--dim); letter-spacing: 0.06em; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.4s;
}
.hint.show { opacity: 1; color: var(--muted); }
.hint.muted { opacity: 0; }
.foot { display: none; }

/* ------------------------------------------------------------------ 启动层 */
.start {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(80% 60% at 50% 45%, rgba(6, 7, 22, 0.35), rgba(6, 7, 22, 0.86));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.5s ease, visibility 0.5s;
}
.start.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.start-card {
  width: min(440px, 100%); padding: 26px 22px 20px; max-height: 100%; overflow-y: auto; scrollbar-width: none; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 10, 28, 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.start-card .eyebrow { justify-content: center; }
.start-card .eyebrow i { background: #ff8fb1; box-shadow: 0 0 8px #ff8fb1; }
.start-love {
  margin: 22px 0 0; text-align: center; white-space: nowrap;
  font: 600 clamp(38px, 11vw, 54px)/1.15 var(--zh); letter-spacing: 0.08em; color: var(--ink);
  font-synthesis: none; text-shadow: 0 0 28px rgba(255, 143, 177, 0.35);
}
.start-love .ch { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px); animation: love-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(0.35s + var(--i) * 0.16s); }
.start-love .ch.accent { color: #ffb3c9; }
@keyframes love-in { to { opacity: 1; filter: blur(0); transform: none; } }
.start-sub {
  margin: 12px 0 0; text-align: center; font: 400 14px/1.5 var(--zh); letter-spacing: 0.32em; color: #ffb3c9;
  opacity: 0; animation: fade-up 1s ease forwards; animation-delay: 1.5s;
}
.start-sub b { font: italic 400 1.35em/1 var(--serif); letter-spacing: 0.02em; margin: 0 0.15em; color: var(--ink); }
.start-gift {
  margin: 16px 0 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center;
  font: 400 13px/1.85 var(--zh); color: var(--muted); letter-spacing: 0.06em;
  opacity: 0; animation: fade-up 1s ease forwards; animation-delay: 1.9s;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.howto li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); text-align: center; }
.howto b { font: 500 12px/1.2 var(--sans); white-space: nowrap; }
.howto span { font: 400 11px/1.2 var(--sans); color: var(--muted); }
.start-note { margin: 12px 2px 0; font: 400 12px/1.6 var(--sans); color: var(--muted); }
.start-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-primary, .btn-ghost { flex: 1; min-height: 46px; border-radius: 14px; font: 600 14px/1 var(--sans); letter-spacing: 0.06em; }
.btn-primary { background: var(--lime); color: #0b0c12; box-shadow: 0 10px 30px rgba(215, 255, 63, 0.22); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ink); }
.start-fine { margin: 12px 2px 0; font: 400 10.5px/1.6 var(--sans); color: var(--dim); text-align: center; }
.start-fine.warn { color: #ffcf5a; }

/* ------------------------------------------------------------------ 盛放时的一句话 */
.love {
  position: absolute; z-index: 7; left: var(--fx); top: calc(var(--fy) + var(--fr) * 0.62);
  width: max-content; max-width: min(calc(100vw - 36px), 440px);
  transform: translate(-50%, 10px); opacity: 0; filter: blur(6px); pointer-events: none;
  padding: 13px 20px 14px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(20, 14, 40, 0.72), rgba(8, 8, 26, 0.62));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--accent) 16%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease;
}
.love.show { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
.love-k { display: flex; align-items: center; justify-content: center; gap: 7px; font: 500 8.5px/1 var(--mono); letter-spacing: 0.26em; color: var(--accent); }
.love-k i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.love-t { margin: 9px 0 0; font: 400 15px/1.65 var(--zh); letter-spacing: 0.06em; color: var(--ink); font-synthesis: none; text-wrap: balance; }
.love-t span { display: inline-block; }
.app.love-on .frame-tag, .app.love-on .hint { opacity: 0; }

/* ------------------------------------------------------------------ 终章：信 + 花瓣 */
.finale {
  position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 20px) 18px calc(var(--safe-b) + 20px);
  background: radial-gradient(70% 60% at 50% 45%, rgba(40, 10, 40, 0.55), rgba(5, 5, 18, 0.9));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s ease, visibility 0.9s;
}
.finale.show { opacity: 1; visibility: visible; pointer-events: auto; }
.petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.letter {
  position: relative; width: min(480px, 100%); max-height: 100%; overflow-y: auto; scrollbar-width: none;
  padding: 30px 28px 24px; border-radius: 22px;
  border: 1px solid rgba(255, 143, 177, 0.28);
  background: linear-gradient(180deg, rgba(26, 16, 44, 0.86), rgba(10, 10, 28, 0.9));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 143, 177, 0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translateY(18px) scale(0.98); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.finale.show .letter { transform: none; }
.letter .eyebrow { justify-content: center; color: #ffb3c9; }
.letter .eyebrow i { background: #ff8fb1; box-shadow: 0 0 8px #ff8fb1; }
.letter-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  font: 300 20px/1 var(--sans); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.1);
}
.letter-x:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.letter-title { margin: 16px 0 18px; text-align: center; font: 600 32px/1.2 var(--zh); letter-spacing: 0.2em; color: var(--ink); text-shadow: 0 0 24px rgba(255, 143, 177, 0.35); font-synthesis: none; }
.letter-body p {
  margin: 0 0 12px; font: 400 14.5px/1.95 var(--zh); letter-spacing: 0.05em; color: rgba(243, 239, 230, 0.86);
  text-indent: 2em; font-synthesis: none;
  opacity: 0; transform: translateY(8px); transition: opacity 0.9s ease, transform 0.9s ease; transition-delay: calc(0.5s + var(--i) * 0.35s);
}
.letter-body p:first-child { text-indent: 0; color: var(--ink); }
.letter-body p:last-child { color: #ffb3c9; }
.finale.show .letter-body p { opacity: 1; transform: none; }
.letter-sign {
  margin: 18px 0 0; text-align: right; font: 400 15px/1.4 var(--zh); letter-spacing: 0.12em; color: var(--ink);
  opacity: 0; transition: opacity 1s ease 2.1s;
}
.finale.show .letter-sign { opacity: 1; }
.letter-actions { display: flex; justify-content: center; margin-top: 20px; }
.letter-actions .btn-ghost { flex: none; padding: 0 22px; min-height: 40px; font-size: 13px; }

.boot {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center;
  background: var(--bg); font: 500 10px/1 var(--mono); letter-spacing: 0.3em; color: var(--muted);
  transition: opacity 0.7s ease, visibility 0.7s;
}
.boot-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: var(--lime); animation: orbit 1s linear infinite; }
.boot.error .boot-ring { display: none; }
.boot.error span { color: #ffcf5a; letter-spacing: 0.12em; font-family: var(--sans); font-size: 13px; padding: 0 24px; text-align: center; line-height: 1.6; }
.app:not(.is-booting) .boot { opacity: 0; visibility: hidden; pointer-events: none; }

/* 小屏手机（高度不足）压缩 */
@media (max-height: 700px) and (orientation: portrait) {
  .title .t1 { font-size: 42px; } .title .t2 { font-size: 32px; }
  .byline { display: none; }
  .info { bottom: calc(var(--safe-b) + 150px); }
  .gauge { width: 64px; height: 64px; }
  .name { font-size: 19px; }
}

/* ------------------------------------------------------------------ 桌面 / 横屏布局 */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .topbar { top: 28px; left: 44px; right: 44px; font-size: 10.5px; }
  .brand-full { display: inline; } .brand-short { display: none; }
  .clock { display: inline; }
  .pill { background: transparent; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero { top: 82px; left: 44px; }
  .eyebrow { font-size: 10.5px; }
  .title { margin-top: 16px; }
  .title .t1 { font-size: clamp(80px, 8vw, 118px); }
  .title .t2 { font-size: clamp(58px, 5.9vw, 86px); }
  .byline { margin-top: 18px; font-size: 14px; }

  .species {
    left: 44px; right: auto; top: 50%; bottom: auto; transform: translateY(-18%);
    flex-direction: column; gap: 4px; padding: 0; overflow: visible;
  }
  .sp { padding: 7px 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; gap: 14px; position: relative; }
  .sp .n { font-size: 10.5px; width: 20px; }
  .sp .z { font-size: 14px; }
  .sp::before { content: ""; position: absolute; left: -16px; top: 50%; width: 0; height: 1px; background: var(--lime); transition: width 0.3s; }
  .sp.on { background: none; }
  .sp.on::before { width: 10px; }
  .sp:hover .z { color: var(--ink); }

  .info {
    left: auto; right: 44px; top: 50%; bottom: auto; transform: translateY(-50%); width: 270px;
    display: block; pointer-events: auto;
  }
  .idx { font-size: 12px; }
  .idx b { font: 400 30px/1 var(--serif); letter-spacing: 0; margin-right: 4px; }
  .name { margin-top: 18px; font-size: 32px; }
  .latin { font-size: 18px; margin-top: 8px; }
  .gauge { width: 132px; height: 132px; margin: 30px 0 26px; }
  .g-track, .g-fill { stroke-width: 3; }
  .g-text b { font-size: 34px; }
  .g-text small { display: inline; margin: 2px 0 0 3px; font: 400 12px/1 var(--mono); color: var(--muted); }
  .g-text span { font-size: 12px; margin-top: 6px; }
  .meta { display: grid; gap: 12px; }
  .meta div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .meta dt { font: 500 9.5px/1 var(--mono); letter-spacing: 0.24em; color: var(--dim); }
  .meta dd { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--ink); font-variant-numeric: tabular-nums; }

  .frame-tag { font-size: 9.5px; }
  .love { top: calc(var(--fy) + var(--fr) * 0.6); padding: 15px 28px 16px; max-width: 600px; }
  .love-k { font-size: 9.5px; }
  .love-t { font-size: 18px; }
  .heart { background: transparent; border-color: transparent; padding: 0; font-size: 10.5px; }
  .heart.done { background: transparent; border-color: transparent; color: #ffb3c9; }
  .coords { display: block; font-size: 9.5px; }

  .controls { left: 44px; right: auto; bottom: 56px; width: 470px; grid-template-columns: 1fr 1fr; }
  .ctl-bloom { grid-column: 1; }
  .ctl-switch { display: block; grid-column: 2; }
  .ctl-buttons { grid-column: 1 / span 2; flex-direction: row; }
  .btn-demo, .btn-cam { flex: none; min-height: 34px; padding: 0 16px; }

  .cam { top: auto; bottom: 56px; right: 44px; width: 264px; height: 198px; border-radius: 16px; }
  .cam figcaption { font-size: 9px; padding: 20px 10px 9px; }
  .toast { top: calc(var(--fy) - var(--fr) * 1.25 - 18px); font-size: 11px; padding: 10px 18px; }
  .hint { top: auto; bottom: 52px; font-size: 12px; }
  .app.msg .frame-tag { opacity: 1; }
  .sp .zf { display: inline; }
  .sp .zs { display: none; }
  .foot {
    display: block; position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%);
    font: 500 9.5px/1 var(--mono); letter-spacing: 0.26em; color: var(--dim); white-space: nowrap;
  }
}
/* 横屏手机 */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { top: calc(var(--safe-t) + 40px); }
  .title .t1 { font-size: 40px; } .title .t2 { font-size: 30px; }
  .byline, .hint, .frame-tag { display: none; }
  .love { top: calc(var(--fy) + var(--fr) * 0.05); max-width: calc(var(--fr) * 2.4); padding: 10px 16px 11px; }
  .love-t { font-size: 13.5px; }
  .toast { top: calc(var(--safe-t) + 10px); }
  .species { left: calc(var(--safe-l) + 14px); right: auto; bottom: auto; top: 50%; transform: translateY(-10%); flex-direction: column; gap: 4px; padding: 0; overflow-y: auto; max-height: 52vh; }
  .sp { padding: 5px 10px; }
  .info { left: auto; right: calc(var(--safe-r) + 18px); bottom: auto; top: calc(var(--safe-t) + 46px); width: 200px; grid-template-columns: 1fr; }
  .gauge { grid-column: 1; grid-row: auto; width: 60px; height: 60px; margin-top: 8px; }
  .controls { left: auto; right: calc(var(--safe-r) + 14px); width: 290px; }
  .cam { top: auto; bottom: calc(var(--safe-b) + 14px); right: auto; left: calc(var(--safe-l) + 14px); width: 120px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .orbit { animation: none; }
  .start-love .ch, .start-sub, .start-gift { animation: none; opacity: 1; filter: none; transform: none; }
}