/* 赛博宝宝样式（2026-10-21 从 index.html 的 <style> 原样搬出）：院子（七夕、烟花、院子的风 YARD-WIND:CSS）、昏迷、台灯魔法。
   index.html 里按 base → yard → controls → panels 的顺序 <link>，层叠顺序跟原来一样，别调换。
   ⚠️ 放在 frontend/ 根目录、别挪进子目录：按钮背景走 --btn-bg: url(./assets/…) 这种 CSS 变量，url 是按引用它的样式表的位置解析的。 */
/* 院子（覆盖层场景） */
.yard-overlay { position: absolute; inset: 0; z-index: 24; overflow: hidden; border-radius: inherit; }
.yard-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yard-furn { position: absolute; pointer-events: none; }
/* 院子家具的坐标跟房间家具一样，是在约 0.68 的框里调的；框本身就是 0.68（style-base.css .room），这层铺满就行。
   留着这层是为了以后万一框再变，家具还有个自己的参考框。
   不用 transform、不给 z-index：不然自成层叠上下文，家具和院子里别的东西的前后顺序会乱 */
.yard-furn-layer {
  position: absolute; left: 0; width: 100%;
  height: 100%; top: 0;
  pointer-events: none;
}
.yard-night .yard-dim { filter: brightness(0.62) saturate(0.85); }
.yard-night-tint {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(rgba(24,32,84,0.42), rgba(16,20,60,0.22) 55%, rgba(12,16,48,0.34));
}
.yard-particles { width: 100%; height: 52%; z-index: 6; clip-path: none; }
.yard-sun {
  position: absolute; top: 4%; right: 12%; width: 58px; height: 58px;
  border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, rgba(255,245,200,0.95) 25%, rgba(255,220,120,0.5) 55%, transparent 70%);
  box-shadow: 0 0 46px 16px rgba(255,230,130,0.4), 0 0 92px 30px rgba(255,210,80,0.15);
}
.yard-moon {
  position: absolute; top: 5%; right: 11%; width: 54px; height: 54px; z-index: 2;
}
/* 七夕：银河在天上（z-index 1，压在院子透明天空底下），灯笼挂在院子里（z-index 5，furniture 之上、宝宝之下） */
.qixi-galaxy { position: absolute; left: -10%; top: 0; width: 120%; height: 58%; z-index: 1; pointer-events: none; }
/* 2026-08-11 她改的口径：**不要灯笼本身，只要光圈**——「看上去影影绰绰那种感觉」。
   所以这里没有灯笼壳、没有电线，只有一串一串边缘全虚的暖光晕，慢慢一呼一吸。 */
/* 2026-08-11 她看了真页面说「上面这些橙色的光斑不会动，白色的会动」。
   ⭐ 只做 ±12% 的缩放，在一颗糊掉的光球上人眼根本读不出来——她拿会飘的白色粒子当对照，
   一眼就分出哪个是活的。⇒ 拆成两层：外层慢慢飘（位移，看得见），内层呼吸（缩放，幅度也加大）。
   两层分开是因为定位用的 translate(-50%,-50%) 和动画的 transform 会互相顶掉。 */
/* 烟花。⭐ 她定的层：**在夜幕上面、房子下面** ⇒ z-index 1（天空 0 / 院子图 2），
   所以烟花会被屋顶挡掉半截，像从别人家后院升起来的。 */
.qixi-fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fw-burst { position: absolute; width: 0; height: 0; }
/* 升空那道：一颗带尾巴的小火点从下面窜上来，到位才炸。
   ⭐ 没有这道拖尾，炸开就来得莫名其妙——她第一版说「潦草」，缺的主要是这个。 */
.fw-shell {
  position: absolute; left: 0; top: 0; width: 2px; height: 11px; margin: -5px 0 0 -1px;
  border-radius: 1px; background: linear-gradient(180deg, var(--c), rgba(255,255,255,0));
  box-shadow: 0 0 6px 1px var(--c);
  animation: fw-shell var(--dur) linear infinite;
}
@keyframes fw-shell {
  0%   { transform: translateY(104px) scaleY(0.5); opacity: 0; }
  4%   { opacity: 0.95; }
  18%  { transform: translateY(10px) scaleY(1); opacity: 0.95; }
  21%  { transform: translateY(0) scaleY(0.3); opacity: 0; }
  100% { transform: translateY(0) scaleY(0); opacity: 0; }
}
/* 炸开那一下的白光，一闪就没 */
.fw-flash {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, var(--c) 38%, rgba(255,255,255,0) 70%);
  animation: fw-flash var(--dur) ease-out infinite;
}
@keyframes fw-flash {
  0%, 20% { transform: scale(0.1); opacity: 0; }
  23%     { transform: scale(1); opacity: 0.9; }
  33%     { transform: scale(2.3); opacity: 0; }
  100%    { transform: scale(2.3); opacity: 0; }
}
.fw-spark {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 11px 3px var(--c);
  animation: fw-burst var(--dur) cubic-bezier(0.12, 0.62, 0.3, 1) infinite;
}
/* 60% 之后那点额外下坠是重力，不加的话火星是平着飞出去的，很假 */
@keyframes fw-burst {
  0%, 20% { transform: translate(0, 0) scale(0.2); opacity: 0; }
  23%     { transform: translate(calc(var(--tx) * 0.16), calc(var(--ty) * 0.16)) scale(1.25); opacity: 1; }
  60%     { transform: translate(var(--tx), var(--ty)) scale(0.85); opacity: 0.9; }
  100%    { transform: translate(calc(var(--tx) * 1.28), calc(var(--ty) * 1.28 + 30px)) scale(0.2); opacity: 0; }
}
/* 空心光环：中间是透的（能看见底下的院子），只有边缘那一圈亮，外面再糊开。
   居中用 margin 不用 transform，把 transform 留给呼吸。 */
/* ⚠️ 第一版边缘只给了 0.24 的 alpha，压在画得挺亮的院子上整个看不见。
   改成 mix-blend-mode: screen ——它是"加光"，底下越暗越显，正好是散景该有的行为。 */
.qixi-ring {
  position: absolute; z-index: 5; pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(255,206,150,0.055) 0%,
    rgba(255,206,150,0.085) 54%,
    rgba(255,222,170,0.560) 74%,
    rgba(255,198,134,0.290) 87%,
    rgba(255,186,120,0.000) 100%);
  filter: blur(3px);
  animation: qixi-breathe ease-in-out infinite alternate;
}
/* 换两种别的色相，跟她画里那堆散景一样不是一个颜色 */
.qixi-ring.h1 {
  background: radial-gradient(circle,
    rgba(255,186,196,0.050) 0%,
    rgba(255,186,196,0.080) 54%,
    rgba(255,200,212,0.520) 74%,
    rgba(246,178,190,0.270) 87%,
    rgba(240,170,182,0.000) 100%);
}
.qixi-ring.h2 {
  background: radial-gradient(circle,
    rgba(206,190,255,0.048) 0%,
    rgba(206,190,255,0.076) 54%,
    rgba(216,204,255,0.480) 74%,
    rgba(198,182,246,0.250) 87%,
    rgba(190,176,240,0.000) 100%);
}
/* 白天压淡——真实里白天就看不太出来 */
.qixi-ring { opacity: calc(var(--dim, 1) * 0.30); }
.yard-night .qixi-ring { opacity: var(--dim, 1); }
/* 「一点点很慢很慢的呼吸」——幅度只有 ±5%，周期 15~28 秒，盯着才看得出在动 */
@keyframes qixi-breathe {
  0%   { transform: scale(0.95); }
  100% { transform: scale(1.05); }
}
.yard-sky {
  position: absolute; inset: 0; z-index: 0;
}
.yard-sky-sunny { background: linear-gradient(180deg, #7EC8E3 0%, #A8DCF0 40%, #C8E8F5 100%); }
.yard-sky-cloudy { background: linear-gradient(180deg, #9AB5CA 0%, #B4C8D8 40%, #C8D5E0 100%); }
.yard-sky-rainy { background: linear-gradient(180deg, #6A7D8E 0%, #8A9AAA 40%, #9EACB8 100%); }
.yard-sky-night { background: linear-gradient(180deg, #0E1530 0%, #1A2548 40%, #253060 100%); }
.yard-sky-night_rain { background: linear-gradient(180deg, #121825 0%, #1E2838 40%, #283545 100%); }
.yard-cloud-img {
  position: absolute; z-index: 1; pointer-events: none;
  height: auto; opacity: 0.85;
}
.yard-cloud-img.drift { animation: yard-cloud-drift linear infinite; }
@keyframes yard-cloud-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(480px); }
}
/* 晴天只有两朵小云，用来回轻飘代替横穿——横穿到头会瞬间跳回原位，
   两朵孤零零的云那一下会很扎眼（2026-07-29 小玉说晴天看不到动画） */
.yard-cloud-img.drift-slow { animation: yard-cloud-sway ease-in-out infinite alternate; }
@keyframes yard-cloud-sway {
  0%   { transform: translateX(0); }
  100% { transform: translateX(72px); }
}
.yard-rain-tint {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(70,85,105,0.3), rgba(55,65,85,0.15) 60%, rgba(65,75,95,0.25));
}
/* 换购格子 / 送礼按钮（2026-07-28 网页端补上爸爸的两件事） */
.shop-slot { position: relative; }
.gift-send-btn {
  width: 100%; padding: 11px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(#ffe9c9, #f7d6a8); color: #7a5c3a; font-size: 14px;
}
.gift-send-btn:disabled {
  background: #f2ece4; color: #b5a795; cursor: default; font-size: 13px;
}
/* 种植小卡片（点花盆弹出来） */
.garden-card {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  z-index: 30; width: 78%; max-width: 320px; padding: 14px 16px 10px;
  border-radius: 18px; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(120,100,150,0.25); pointer-events: auto;
  animation: toast-in 0.25s ease;
}
.garden-card-title { font-size: 15px; color: #6d5b82; margin-bottom: 6px; }
.garden-card-line { font-size: 13px; color: #8a7a9a; line-height: 1.6; margin-bottom: 10px; }
.garden-flower-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px; margin-bottom: 10px; border: 1px solid #e3d6ec; border-radius: 10px; background: #fffaf5; color: #4a3a5a; resize: none; }
.garden-flower-note:focus { outline: none; border-color: #c9a6de; }
.garden-card-btns { display: flex; gap: 8px; }
.garden-card-btns button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(#f6ecff, #ece0fb); color: #6d5b82; font-size: 14px;
}
.garden-card-btns button span { font-size: 11px; color: #a596b8; }
.garden-card-btns button:disabled { opacity: 0.45; cursor: default; }
.garden-card-close {
  display: block; margin: 8px auto 0; padding: 4px 14px; border: none; border-radius: 10px;
  background: transparent; color: #a596b8; font-size: 12px; cursor: pointer;
}
/* 手里有花的时候的入口 */
.garden-flower-badge {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  z-index: 28; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 14px; border-radius: 14px; pointer-events: auto;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(4px);
  color: #7a6a8a; font-size: 13px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(120,100,150,0.2);
}
.garden-flower-badge img { width: 18px; height: 18px; }
/* 她出门探险时院子里的那句说明 */
.yard-empty-note {
  position: absolute; top: calc(var(--room-crop, 0px) + 3%); left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 14px; pointer-events: none;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(4px);
  color: #7a6a8a; font-size: 13px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(120,100,150,0.18);
}
.yard-door-glow {
  position: absolute; top: 44.8%; right: 20.4%; width: 16%; height: 12%;
  z-index: 6; pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,150,0.85) 0%, rgba(255,200,110,0.4) 35%, rgba(255,185,90,0.1) 60%, transparent 100%);
  animation: lamp-flicker 4s ease-in-out infinite;
}
@keyframes lamp-flicker {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
  75% { opacity: 0.85; }
}
.lights-lit { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255,225,150,0.9)) drop-shadow(0 0 22px rgba(255,210,120,0.5)) !important; z-index: 6 !important; }
.room-nav-pulse { animation: yard-nav-pulse 2.2s ease-in-out infinite; }
@keyframes yard-nav-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.15); filter: drop-shadow(0 0 6px rgba(140,200,120,0.7)); }
}
.yard-character { width: 48%; bottom: 2%; z-index: 7; }
.yard-furn-shadow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40,30,20,0.45) 0%, rgba(40,30,20,0.2) 50%, rgba(40,30,20,0) 100%); }
/* YARD-WIND:CSS-BEGIN —— 院子的风（2026-10-05）。test-yard-wind.html 原样抠这一段，改了两边一起生效。
   --wind / --fpace / --gpace 由 yardWindVars() 挂在 .yard-overlay 上（跟墨尔本真实风速走）。
   只动 transform；叶丛两层嵌套：外层 .yard-leaf 阵风慢摆，内层 img 快颤，锚点同一个 --origin。 */
.yard-overlay { --wind: 0.8; --fpace: 1; --gpace: 1; }
/* 叶丛图层挂在一个跟底图 object-fit:cover 完全同框的盒子里，坐标直接用底图画布的百分比 */
.yard-foliage-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size; }
.yard-foliage-box { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 941 / 1672; transform: translateX(-50%); }
@supports (width: 1cqh) {
  .yard-foliage-box {
    top: 50%; aspect-ratio: auto; transform: translate(-50%, -50%);
    width: max(100cqw, calc(100cqh * 941 / 1672)); height: max(100cqh, calc(100cqw * 1672 / 941));
  }
}
.yard-leaf {
  position: absolute; pointer-events: none; transform-origin: var(--origin);
  --w: min(var(--wind), var(--wcap, 99));   /* 封顶：见 YARD_LEAF_CAP */
  animation: yard-gust calc(var(--gd) * var(--gpace)) ease-in-out var(--gdl) infinite alternate;
}
.yard-leaf > img {
  display: block; width: 100%; height: auto; transform-origin: var(--origin);
  animation: yard-flutter calc(var(--fd) * var(--fpace)) ease-in-out var(--fdl) infinite alternate;
}
/* 阵风：不是匀速来回，一阵里有起有落（0.35 → 1 → 0.55 → 0.9 → 0.2），配上 alternate 和各块不同周期，永远不重样 */
@keyframes yard-gust {
  0%   { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * -0.15deg)); }
  22%  { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * 0.35deg)); }
  48%  { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * 1deg)); }
  63%  { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * 0.55deg)); }
  82%  { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * 0.9deg)); }
  100% { transform: rotate(calc(var(--ga) * var(--w, var(--wind)) * 0.2deg)); }
}
/* 快颤：以 0 为中心的峰峰值 --fa，中间带一个小回勾，像叶子被扑一下又弹回来 */
/* skewX 跟 rotate 同相位（符号取反才是同一个方向：rotate 正＝顶往右，skewX 正＝顶往左），
   根不动、越往上偏得越多，看着是「弯」不是「转」。--fs 是 skew 峰值，树冠和吊着的那两簇为 0，花盆植物不设＝0 */
@keyframes yard-flutter {
  0%   { transform: rotate(calc(var(--fa) * var(--w, var(--wind)) * -0.5deg)) skewX(calc(var(--fs, 0) * var(--w, var(--wind)) * 1deg)); }
  35%  { transform: rotate(calc(var(--fa) * var(--w, var(--wind)) * 0.28deg)) skewX(calc(var(--fs, 0) * var(--w, var(--wind)) * -0.56deg)); }
  55%  { transform: rotate(calc(var(--fa) * var(--w, var(--wind)) * 0.05deg)) skewX(calc(var(--fs, 0) * var(--w, var(--wind)) * -0.1deg)); }
  100% { transform: rotate(calc(var(--fa) * var(--w, var(--wind)) * 0.5deg)) skewX(calc(var(--fs, 0) * var(--w, var(--wind)) * -1deg)); }
}
/* 花盆里的植物：锚在土面；开花了再加一口极轻的呼吸（用独立的 scale 属性，不跟 transform 打架） */
.yard-furn.yard-plant {
  transform-origin: 50% 95%;
  animation: yard-flutter calc(var(--fd) * var(--fpace)) ease-in-out var(--fdl) infinite alternate;
}
.yard-furn.yard-plant.bloom {
  animation: yard-flutter calc(var(--fd) * var(--fpace)) ease-in-out var(--fdl) infinite alternate,
             yard-bloom 3.8s ease-in-out infinite alternate;
}
@keyframes yard-bloom { 0% { scale: 1; } 100% { scale: 1.015; } }
/* 摇摇马：动画在 JS 里（yardRockHorse，WAAPI）。锚点＝摇板底弧接地点；
   clip-path 切掉左上角那块透明区，不让它的点击框压到旁边那盆花的右下角（视觉上切掉的全是透明像素） */
.yard-furn.yard-horse {
  transform-origin: 49.2% 99.5%; pointer-events: auto; cursor: pointer;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 16%, 12% 16%);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .yard-leaf, .yard-leaf > img, .yard-furn.yard-plant, .yard-furn.yard-plant.bloom { animation: none !important; }
}
/* YARD-WIND:CSS-END */
.particle {
  position: absolute; border-radius: 50%;
  animation: float-up 6s linear infinite;
}
.particle.star {
  width: 6px !important; height: 6px !important;
  animation: star-twinkle 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255,255,220,0.8);
}
.particle.rain {
  border-radius: 0; width: 2px !important; height: 16px !important;
  animation: rain-fall 0.8s linear infinite;
  opacity: 0.6;
}
.particle.sunray {
  width: 14px !important; height: 14px !important;
  background: rgba(255,245,200,0.8) !important;
  box-shadow: 0 0 12px rgba(255,230,150,0.6);
  animation: mote-drift 8s ease-in-out infinite;
}
.particle.mote {
  width: 10px !important; height: 10px !important;
  background: rgba(255,255,255,0.7) !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
  animation: mote-drift 10s ease-in-out infinite;
}
@keyframes float-up {
  0% { transform: translateY(100%) scale(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-20%) scale(1); opacity: 0; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes rain-fall {
  0% { transform: translateY(-10px); opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { transform: translateY(200px); opacity: 0.1; }
}
@keyframes mote-drift {
  0% { transform: translate(0, 0) scale(0.9); opacity: 0; }
  10% { transform: translate(4px, -5px) scale(1); opacity: 0.8; }
  25% { transform: translate(12px, -12px) scale(1.1); opacity: 0.9; }
  40% { transform: translate(8px, -20px) scale(1.2); opacity: 0.7; }
  55% { transform: translate(-5px, -16px) scale(1.1); opacity: 0.85; }
  70% { transform: translate(-10px, -8px) scale(1); opacity: 0.9; }
  85% { transform: translate(-4px, -3px) scale(0.95); opacity: 0.5; }
  100% { transform: translate(0, 0) scale(0.9); opacity: 0; }
}

/* 昏迷覆盖 */
.coma-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.coma-pupi { position: relative; width: 200px; height: 200px; }
.coma-pupi img.coma-body { width: 100%; height: 100%; object-fit: contain; }
/* 转转蚊香眼（小玉拍板保留转圈版），坐标按三张dizzy贴图的脸部55-60%高度校准
   （2026-07-03修，原top:38%飘在天灵盖上） */
.coma-swirl {
  position: absolute; width: 22px; height: 22px;
  animation: swirl-spin 1.5s linear infinite;
}
.coma-swirl.left { top: 47%; left: 35%; }
.coma-swirl.right { top: 47%; left: 50%; }
@keyframes swirl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 台灯魔法特效 */
.lamp-magic-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
}
.lamp-magic-flash {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,200,0.7), rgba(255,215,0,0.3), transparent 70%);
  animation: lamp-flash 2.5s ease-out forwards;
}
@keyframes lamp-flash {
  0% { opacity: 0; transform: scale(0.1); }
  15% { opacity: 1; transform: scale(0.8); }
  40% { opacity: 0.6; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2.5); }
}
.lamp-sparkle { position: absolute; font-size: 14px; opacity: 0; }
.lamp-sparkle.d0 { animation: sp-up 2s ease-out forwards; }
.lamp-sparkle.d1 { animation: sp-ur 2s ease-out forwards; }
.lamp-sparkle.d2 { animation: sp-rt 2s ease-out forwards; }
.lamp-sparkle.d3 { animation: sp-dr 2s ease-out forwards; }
.lamp-sparkle.d4 { animation: sp-dn 2s ease-out forwards; }
.lamp-sparkle.d5 { animation: sp-dl 2s ease-out forwards; }
.lamp-sparkle.d6 { animation: sp-lt 2s ease-out forwards; }
.lamp-sparkle.d7 { animation: sp-ul 2s ease-out forwards; }
.lamp-sparkle.d8 { animation: sp-uul 2s ease-out forwards; }
.lamp-sparkle.d9 { animation: sp-uur 2s ease-out forwards; }
@keyframes sp-up  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(0,-100px) scale(.4)} }
@keyframes sp-ur  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(70px,-70px) scale(.4)} }
@keyframes sp-rt  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(90px,-20px) scale(.4)} }
@keyframes sp-dr  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(60px,50px) scale(.4)} }
@keyframes sp-dn  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(0,80px) scale(.4)} }
@keyframes sp-dl  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(-60px,50px) scale(.4)} }
@keyframes sp-lt  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(-90px,-20px) scale(.4)} }
@keyframes sp-ul  { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(-70px,-70px) scale(.4)} }
@keyframes sp-uul { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(-40px,-90px) scale(.4)} }
@keyframes sp-uur { 0%{opacity:0;transform:scale(.3)} 15%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translate(40px,-90px) scale(.4)} }
.lamp-ring {
  position: absolute; border-radius: 50%; border: 2px solid rgba(255,215,0,0.6);
  animation: lamp-ring-expand 2s ease-out forwards;
  opacity: 0;
}
@keyframes lamp-ring-expand {
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 0.8; transform: scale(0.6); }
  60% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.coma-text {
  color: white; font-size: 16px; font-weight: bold; margin-top: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.coma-btn {
  margin-top: 16px; padding: 12px 36px;
  background: linear-gradient(135deg, #e05050, #c03030);
  color: white; border: none; border-radius: 16px;
  font-size: 15px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 12px rgba(200,0,0,0.3);
}
.doctor-letter {
  background: #FFFDF9; border-radius: 16px; padding: 20px;
  max-width: 320px; margin: 0 auto; white-space: pre-line;
  font-size: 13px; color: #6E5A4B; line-height: 1.8;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  text-align: left;
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.doctor-letter .fee { color: #e05050; font-weight: bold; font-size: 15px; }