:root {
  --bg: #141019;
  --ink: #f5efe9;
  --muted: #a99fae;
  --line: rgba(245, 239, 233, 0.14);
  --card: #1f1826;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* 不要捲動吃掉拖放手勢 */
  overscroll-behavior: none;
  color: var(--ink);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
/* 關卡背景是固定在 z-index:-1 的 .level-bg。body 一定要透明，
   否則不透明的 body 背景在繪製順序上會蓋住那個負 z-index 的圖層（背景就等於沒套）。 */
html { background: #120a1d; }        /* 只是兜底底色（WebGL 沒跑起來時用），平常被 .level-bg 蓋住 */
body { background: transparent; }

body { user-select: none; -webkit-user-select: none; }

#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top { flex: 0 0 auto; }

h1 {
  margin: 0;
  font-size: clamp(17px, 5.2vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}

.hint {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.hud { flex: 0 0 auto; display: flex; gap: 8px; }
.stat {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--muted);
}
.stat b {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg#board { width: 100%; height: 100%; display: block; }

/* 消除時頂部一小條該色，淡入後淡出 */
.banner {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 64px;
  height: 10px;
  transform: translateX(-50%) translateY(-6px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 棋盤：盤上的磚不能點，只有拖曳時才提示空格 */
.slot {
  fill: rgba(255, 255, 255, 0.035);
  stroke: rgba(245, 239, 233, 0.10);
  stroke-width: 1;
}
.slot.is-empty { stroke-dasharray: 5 4; }
svg#board.is-dragging .slot.is-empty {
  fill: rgba(245, 239, 233, 0.08);
  stroke: rgba(245, 239, 233, 0.4);
}
.slot.is-target { fill: rgba(245, 239, 233, 0.2); stroke: #fff; }

.tile-label {
  fill: #fff;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2.5px;
  pointer-events: none;
}
.tile-badge {
  fill: #fff;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* 飛行中的磚永遠在最上層（fx 層在最後），不會被別的疊蓋住 */
.fx { pointer-events: none; }
.fly { pointer-events: none; }
/* 棋盤上的磚是顯示層，不能攔截點擊；點擊要穿透到下面的 .slot 才收得到（沙盒加層／遊玩落子都靠它） */
.stacks { pointer-events: none; }
.fly-ring {
  fill: none;
  stroke-width: 3;
  animation: ringPulse 0.5s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* 落地那一下的回饋：目標疊會輕輕彈一下 */
.stack { transform-box: fill-box; transform-origin: center; }

/* 托盤 */
.tray {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}
.tray-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  touch-action: none;               /* 拖放自己處理 */
  cursor: grab;
}
.tray-item:active { background: rgba(255, 255, 255, 0.12); }
/* 演出播放中：tray 不能再拖 */
.tray.is-locked { pointer-events: none; opacity: 0.45; }
.tray-svg { width: 100%; height: 84px; display: block; }

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.drag-ghost svg { display: block; }

.bar { flex: 0 0 auto; }

button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  touch-action: manipulation;
}
button:active { background: rgba(255, 255, 255, 0.14); }

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 8, 14, 0.74);
  backdrop-filter: blur(3px);
}
.modal.hidden { display: none; }

.card {
  width: min(100%, 360px);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  text-align: center;
}
.eyebrow {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.card p { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.card button { margin-top: 14px; }

/* 過關刮刮卡（對齊 ui/刮刮卡/scratch-card.html，但收進結果卡片內、限定寬度，不搶全螢幕） */
.scratch { margin-top: 14px; }
.scratch.hidden { display: none !important; }
.scratch-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 215, 120, 0.45);
  touch-action: none;
  user-select: none;
}
.scratch-prize {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(145deg, #fff6d8 0%, #ffd36b 45%, #f0a020 100%);
  color: #5a2a00;
  text-align: center;
  padding: 14px;
}
.scratch-label { font-size: 0.78rem; letter-spacing: 0.18em; opacity: 0.75; }
.scratch-amount { font-size: clamp(1.5rem, 7vw, 2.2rem); font-weight: 800; line-height: 1.1; }
.scratch-sub { font-size: 0.88rem; }
/* 第一關獎品固定為過關圖片：隱藏金黃文字、改鋪滿圖片 */
.scratch-prize-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scratch-prize.is-image { background: #fff; }
.scratch-prize.is-image .scratch-label,
.scratch-prize.is-image .scratch-amount,
.scratch-prize.is-image .scratch-sub { display: none; }
.scratch-prize.is-image .scratch-prize-img { display: block; }
#scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#scratch-canvas:active { cursor: grabbing; }
.scratch-pct { font-size: 0.78rem; color: var(--muted); min-height: 1.1em; margin: 8px 0 0; }
.scratch-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.scratch-actions button {
  appearance: none; border: 0; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 0.88rem; cursor: pointer;
  background: #6d4aff; color: #fff; margin-top: 0;
}
.scratch-actions button.ghost {
  background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
}

@media (max-height: 640px) {
  .hint { display: none; }
  .tray-svg { height: 66px; }
}

/* 通用隱藏 */
.hidden { display: none !important; }

/* 模式切換 */
.mode-switch { display: flex; gap: 6px; }
.mode-switch button {
  width: auto; flex: 1; padding: 8px; font-size: 13px; font-weight: 600;
  opacity: 0.55; border-color: var(--line);
}
.mode-switch button.active { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* 沙盒編輯與試玩都隱藏遊玩專用的「重開本關」；只有沙盒編輯模式才隱藏統計 HUD（試玩要能看見統計） */
body.mode-sandbox .play-only,
body.mode-playtest .play-only { display: none; }
body.mode-sandbox .hud { display: none; }

/* 感謝 / 致謝模式：只留背景（#level-bg 六角底）+ 感謝卡片 + 返回主選單。
   遊戲 UI 一律藏掉 —— 棋盤、tray、HUD、重開本關、沙盒面板、過關彈窗、刮刮卡，
   以及遊戲頁頂部「← 主選單」。不是半透明蓋在關卡上，是真的 display:none。 */
body.mode-credits .top,
body.mode-credits .hud,
body.mode-credits #board-wrap,
body.mode-credits .tray,
body.mode-credits #sandbox,
body.mode-credits .bar,
body.mode-credits #result,
body.mode-credits #scratch { display: none !important; }

/* 沙盒面板 */
.sandbox {
  flex: 0 0 auto;
  max-height: 40vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(0, 0, 0, 0.22);
}
.sandbox-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sandbox .label { font-size: 12px; color: var(--muted); }
.palette { display: flex; gap: 6px; }
.swatch {
  width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.sandbox-btn {
  width: auto; flex: 1 1 auto; padding: 9px 10px; font-size: 13px; font-weight: 600;
}
.sandbox-btn.on { background: rgba(255, 255, 255, 0.18); }
.sandbox textarea {
  width: 100%; height: 96px; resize: vertical;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3); color: var(--ink); padding: 8px;
}
.sandbox-msg { margin: 0; font-size: 12px; min-height: 14px; color: var(--muted); }
input.clear-at {
  width: 60px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--ink);
  font: inherit; font-size: 13px;
}

/* 沙盒時棋盤可點擊編輯（tray 由演算法生成，不可編輯） */
body.mode-sandbox .slot { cursor: pointer; }
body.mode-sandbox svg#board { touch-action: none; }

/* 沙盒的 tray 只讀：不能點加層、不能拖（要動就動棋盤，tray 會自己重算） */
body.mode-sandbox .tray-item { cursor: default; opacity: 0.85; }
body.mode-sandbox .tray-item:active { background: rgba(255, 255, 255, 0.05); }
/* 棋盤改過、tray 還是上一份：虛線框提示要按「重新生成 tray」 */
body.mode-sandbox .tray.is-stale { border-style: dashed; opacity: 0.7; }

/* ===== 主選單：套用 ui/code.html 的 Taro Milk Haven 設計 ===== */
/* 全螢幕覆蓋層，顯示與否由 body.menu-open 控制；點 遊玩/沙盒 才進入遊戲 */
#main-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  overflow: hidden;
  color: #ecddf8;
  font-family: "Plus Jakarta Sans", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  background: linear-gradient(180deg, #251c31 0%, #1e1529 50%, #180f22 100%);
}
body.menu-open #main-menu { display: flex; flex-direction: column; }

/* 關卡選擇畫面：與主選單同樣的全螢幕覆蓋層，顯示由 body.levels-open 控制 */
#level-select {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  overflow: hidden;
}
body.levels-open #level-select { display: flex; flex-direction: column; }

/* 感謝 / 致謝畫面：與主選單同樣的全螢幕覆蓋層，顯示由 body.thanks-open 控制；
   內容移植自 ui/感謝/code.html，字型與自訂工具類僅作用於 .thanks 範圍。 */
#thanks {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  overflow: hidden;
}
body.thanks-open #thanks { display: flex; }
.thanks { font-family: "Noto Sans TC", "Plus Jakarta Sans", system-ui, sans-serif; color: #ecddf8; }
.thanks .serif-title { font-family: "Noto Serif TC", serif; }
.thanks .no-scrollbar::-webkit-scrollbar { display: none; }
.thanks .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 關卡模板用到的 safe-area 工具類（Tailwind 設定沒帶，這裡補上，免得頂/底被瀏海包住） */
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 環境光暈 */
.mm-glow { position: absolute; border-radius: 9999px; pointer-events: none; z-index: 0; filter: blur(90px); }
.mm-glow-1 { top: -64px; left: 50%; transform: translateX(-50%); width: 336px; height: 336px; background: rgba(203,178,254,0.15); }
.mm-glow-2 { top: 25%; left: -80px; width: 320px; height: 320px; background: rgba(203,178,255,0.20); }
.mm-glow-3 { top: 50%; right: -64px; width: 336px; height: 336px; background: rgba(245,214,206,0.15); }
.mm-glow-4 { bottom: 40px; left: 50%; transform: translateX(-50%); width: 384px; height: 224px; background: rgba(203,178,254,0.20); }

.mm-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.7; pointer-events: none; }

.mm-content {
  position: relative; z-index: 10;
  flex: 1 1 auto;
  width: 100%; max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(48px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

/* 頂部標題區 */
.mm-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.mm-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 9999px;
  background: rgba(45,36,56,0.6);
  border: 1px solid rgba(139,116,184,0.3);
  backdrop-filter: blur(10px);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #f5d6ce;
}
.mm-dot { width: 6px; height: 6px; border-radius: 9999px; background: #cbb2fe; animation: mm-pulse 1.6s ease-in-out infinite; }
.mm-title {
  margin: 0;
  font-family: "Epilogue", "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 9vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #f9f3ff;
  text-shadow: 0 4px 16px rgba(35,27,46,0.9);
}
.mm-sub {
  margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(227,211,255,0.8);
}

/* 中間 hero：六角疊 */
.mm-hero { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.mm-hero-card {
  position: relative; width: min(72vw, 260px); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; overflow: hidden; padding: 6px;
  background: linear-gradient(180deg, rgba(36,28,47,0.6), rgba(45,36,56,0.5), rgba(32,24,43,0.7));
  border: 1px solid rgba(139,116,184,0.3);
  box-shadow: 0 16px 40px rgba(18,10,29,0.6);
  backdrop-filter: blur(12px);
  animation: mm-levitate 4.5s ease-in-out infinite;
}
.mm-hero-card::before {
  content: ""; position: absolute; inset: -12px; border-radius: 28px;
  background: linear-gradient(135deg, rgba(203,178,254,0.25), rgba(203,178,254,0.2), rgba(245,214,206,0.2));
  filter: blur(28px); z-index: -1;
}
.mm-hero-svg { width: 100%; height: 100%; }
.mm-hero-shadow { fill: rgba(18,10,29,0.5); }
.mm-hex { stroke: rgba(255,255,255,0.28); stroke-width: 1.5; }

/* 底部操作 dock */
.mm-dock { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }
.mm-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 32px;
  border-radius: 9999px; border: 1px solid transparent;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 600;
  cursor: pointer; transition: transform 0.15s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mm-btn:active { transform: scale(0.98); }
.mm-ico { font-size: 22px; }
.mm-label { letter-spacing: 0.04em; font-weight: 600; }

/* 主按鈕：漸層填充 + 掃光 */
.mm-btn-primary {
  background: linear-gradient(90deg, #dec8ff, #cbb2fe, #d2bbff);
  color: #392365;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 8px 24px rgba(203,178,254,0.32);
}
.mm-btn-primary .mm-shine {
  position: absolute; top: 0; left: 0; height: 100%; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(12deg) translateX(-220%);
}
.mm-btn-primary:hover .mm-shine { transform: skewX(12deg) translateX(320%); transition: transform 1s ease; }

/* 次按鈕：玻璃擬態描邊 */
.mm-btn-secondary {
  background: rgba(45,36,56,0.8);
  border-color: rgba(139,116,184,0.45);
  backdrop-filter: blur(20px);
  color: #f9f3ff;
  box-shadow: 0 4px 16px rgba(24,15,34,0.3);
}
.mm-btn-secondary:hover { background: rgba(73,61,91,0.7); }

.mm-foot {
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(203,178,254,0.5);
}

/* 遊戲中的「← 主選單」連結（主選單開啟時被遮住，實際是遊玩/沙盒頁面裡回到選單用） */
.link-to-menu {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.85;
}
.link-to-menu:active { opacity: 1; }

@keyframes mm-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes mm-levitate { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1.2deg); } }

/* 模板 ui/code.html 的 hero 卡漂浮 / 陰影呼吸動畫（Tailwind 不含，這裡補上） */
@keyframes gentle-levitate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(1.2deg); }
}
@keyframes shadow-breathe {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(0.86); opacity: 0.3; }
}

/* ===== 關卡背景：套用 ui/關卡背景/code.html（純背景層，玩法與規則完全沒動） =====
   固定滿版、墊在所有內容之後（z-index:-1）、不吃點擊；主選單 / 關卡選擇是 z-index:50 的不透明覆蓋層，
   所以這層只在「關卡（遊戲棋盤）畫面」看得到。canvas 由 level-bg.js 畫 WebGL，其餘用 CSS。 */
.level-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #120a1d;              /* WebGL 沒跑起來時的底色 */
}
.level-bg canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 環境光暈球 */
.lb-orb { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(90px); }
.lb-orb-1 { top: -64px; left: -64px; width: 320px; height: 320px; background: rgba(203,178,254,0.15); animation: lb-pulse-glow 10s ease-in-out infinite; }
.lb-orb-2 { top: 50%; right: -96px; width: 384px; height: 384px; background: rgba(203,178,254,0.20); filter: blur(100px); animation: lb-pulse-glow 10s ease-in-out infinite; animation-delay: -4s; }
.lb-orb-3 { bottom: -80px; left: 25%; width: 320px; height: 320px; background: rgba(222,192,184,0.10); filter: blur(95px); animation: lb-pulse-glow 10s ease-in-out infinite; animation-delay: -7s; }

/* 漂浮粒子 */
.lb-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lb-particle { position: absolute; border-radius: 9999px; }
.lb-slow { animation: lb-float-slow 8s ease-in-out infinite; }
.lb-medium { animation: lb-float-medium 12s ease-in-out infinite; }
.lb-p1 { top: 20%; left: 25%; width: 8px; height: 8px; background: rgba(228,213,255,0.4); box-shadow: 0 0 12px rgba(228,213,255,0.6); filter: blur(1px); }
.lb-p2 { top: 40%; right: 22%; width: 12px; height: 12px; background: rgba(255,246,232,0.4); box-shadow: 0 0 16px rgba(255,246,232,0.5); filter: blur(2px); animation-delay: -3s; }
.lb-p3 { top: 68%; left: 18%; width: 10px; height: 10px; background: rgba(139,116,184,0.4); box-shadow: 0 0 14px rgba(139,116,184,0.5); filter: blur(1.5px); animation-delay: -5s; }
.lb-p4 { top: 78%; right: 28%; width: 6px; height: 6px; background: rgba(228,213,255,0.5); box-shadow: 0 0 8px rgba(228,213,255,0.7); filter: blur(0.5px); animation-delay: -1.5s; }
.lb-p5 { top: 12%; right: 32%; width: 8px; height: 8px; background: rgba(245,214,206,0.4); box-shadow: 0 0 10px rgba(245,214,206,0.5); filter: blur(1px); animation-delay: -6s; }

/* 暗角，製造景深 */
.lb-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, transparent 45%, rgba(18,10,29,0.55) 85%, rgba(14,7,23,0.92) 100%);
}

@keyframes lb-float-slow {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.4; }
  50%      { transform: translateY(-24px) scale(1.08); opacity: 0.75; }
}
@keyframes lb-float-medium {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.3; }
  50%      { transform: translateY(-35px) translateX(12px) scale(1.15); opacity: 0.65; }
}
@keyframes lb-pulse-glow {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.06); }
}