/* 赛博宝宝样式（2026-10-21 从 index.html 的 <style> 原样搬出）：登录、主界面、房间、角色、章鱼、蛋、脏脏、家具、窗外光影、粒子。
   index.html 里按 base → yard → controls → panels 的顺序 <link>，层叠顺序跟原来一样，别调换。
   ⚠️ 放在 frontend/ 根目录、别挪进子目录：按钮背景走 --btn-bg: url(./assets/…) 这种 CSS 变量，url 是按引用它的样式表的位置解析的。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
input, button, textarea, select { font-family: inherit; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #fdf6ee 0%, #f5e6d3 50%, #EEDFCC 100%);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ===== 登录 ===== */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
  background: rgba(255,255,255,0.9); border-radius: 24px; padding: 40px 30px;
  box-shadow: 0 20px 60px rgba(180,150,100,0.15), 0 0 0 1px rgba(215,155,109,0.08);
  max-width: 360px; width: 100%; text-align: center;
  backdrop-filter: blur(20px);
}
.login-card h1 { font-size: 28px; color: #D79B6D; margin-bottom: 8px; }
.login-card p { color: #A08D7D; font-size: 14px; margin-bottom: 24px; }
.login-input {
  width: 100%; padding: 14px 16px; border: 2px solid #EEDFCC;
  border-radius: 12px; font-size: 15px; outline: none;
  transition: border-color 0.2s; margin-bottom: 12px;
}
.login-input:focus { border-color: #D79B6D; }
.login-submit {
  width: 100%; padding: 14px; background: linear-gradient(135deg, #D79B6D, #e0ac80);
  color: white; border: none; border-radius: 12px; font-size: 16px;
  font-weight: bold; cursor: pointer; transition: transform 0.1s;
}
.login-submit:hover { transform: scale(1.02); }
.login-submit:active { transform: scale(0.98); }

/* ===== 主界面 ===== */
.app-wrap {
  max-width: 420px; margin: 0 auto; height: 100vh; height: 100dvh;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
@media (min-width: 421px) {
  .app-wrap { box-shadow: 0 20px 60px rgba(180,150,100,0.15); }
}

/* 顶栏 */
.top-bar {
  position: relative; z-index: 10; padding: 10px 16px 6px;
  align-self: stretch; flex: none; height: var(--topbar-h, auto); box-sizing: border-box;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.top-left .baby-name { font-size: 22px; font-weight: bold; color: #6E5A4B; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.top-left .day-label {
  font-size: 12px; color: #D79B6D; margin-top: 2px;
  background: rgba(255,255,255,0.7); padding: 2px 10px; border-radius: 10px;
  display: inline-block; font-weight: 500;
}
.coin-badge {
  background: url('./assets/UI/horizontal_button.png') center / 100% 100% no-repeat;
  padding: 18px 48px 18px 56px; border-radius: 0;
  font-size: 14px; font-weight: bold; color: #6E5A4B;
  min-width: 220px; text-align: center;
}
.diary-btn {
  background: url('./assets/UI/square_button_3.png') center / contain no-repeat;
  border: none; border-radius: 0;
  padding: 10px 12px; font-size: 11px; font-weight: bold; color: #6E5A4B;
  cursor: pointer; transition: transform 0.15s;
}
.diary-btn:hover { transform: scale(1.05); }
.diary-btn:active { transform: scale(0.95); }

/* 房间 */
/* 顶栏放在 room-wrapper 里、跟房间一起贴底：屏幕比房间高时，多出来的空白落在顶栏上面，
   不夹在名字和房间中间（2026-11-12 小玉圈了那条空，说「名字 day 金币往下移」）。顶栏定高，房间按剩下的高算 */
.room-wrapper {
  --topbar-h: 64px;
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  overflow: hidden;
  container-type: size;
}
/* 电脑上：房间按整张的尺寸画（宽 420 封顶），room-wrapper 定死成「顶栏＋整个房间」那么高，
   整个 app 跟内容一样高、在页面里居中；窗口矮了页面出滚动条（2026-11-12 小玉：电脑浏览器改大小就旁边出滚动条）。
   不给 app-wrap 固定高：11/12 定 860 时，窗口一高房间上面就空出一条（她截图「还是好奇怪」）。
   ⚠️ room-wrapper 的高度必须是定值：它是容器查询的容器，高度不定时 cqh 第一遍算成 0，房间整个消失。
   只给鼠标设备：手机矮屏照旧裁顶＋等比缩，不出滚动条 */
@media (hover: hover) and (pointer: fine) {
  .app-wrap { height: auto; min-height: 0; }
  .room-wrapper { flex: none; height: calc(var(--topbar-h) + min(420px, 100vw) / 0.68); }
}
/* 框永远是同一个比例（家具按百分比摆，比例一变就错位：2026-11-12 小玉，摇摇马上天）。
   比例是 0.68，不是图本身的 571:1024：家具、皮皮、章鱼、院子花盆的坐标全是当年在她手机上那个约 0.68 的框里调的
   （背景 cover 居中裁）。11/12 先试过真比例框＋只把家具放进 0.68 层，结果皮皮落到地毯下面、院子前景花盆浮在地砖中间——
   ⛔ 再拆成两套参考系，整个框就按 0.68。
   满宽；屏幕矮就贴底、把顶上裁掉——她定的「上面去掉一点，反正天上也没东西」。
   最多裁四分之一；再矮：电脑上 app-wrap 最矮 860 撑着、页面滚动，手机上整张等比缩。
   --room-crop＝顶上被裁掉的高度，贴顶的东西（院子提示气泡）加上它才看得见。
   overflow: hidden：框变窄时积木（left -12%）、柜子会从两边伸出来，她看了说丑。 */
.room {
  --room-w: min(430px, 100cqw, (100cqh - var(--topbar-h)) * 4 / 3 * 0.68);
  --room-crop: max(0px, var(--room-w) / 0.68 - (100cqh - var(--topbar-h)));
  position: relative; width: var(--room-w); aspect-ratio: 0.68; flex: none;
  /* 裁顶：往上拉进顶栏底下，再把伸进去的那截剪掉，顶栏不会被挤出屏幕 */
  margin-top: calc(-1 * var(--room-crop)); clip-path: inset(var(--room-crop) 0 0 0);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.room-bg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 角色区 */
.character-area {
  position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%);
  width: 65%; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25)) drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.pet-zone {
  position: absolute; top: 18%; left: 25%; width: 50%; height: 30%;
  z-index: 7; cursor: pointer; pointer-events: auto; border-radius: 50%;
}
.pet-zone:active + .pupi-sprite { transform: scale(1.08) !important; }

/* 对话气泡 */
.speech-bubble {
  position: absolute; bottom: calc(100% + 28px); left: 50%; transform: translateX(-50%);
  background: rgba(255,252,245,0.95); padding: 10px 16px; border-radius: 16px;
  font-size: 13px; color: #6E5A4B; white-space: normal; width: max-content; max-width: min(300px, 82vw); /* 2026-10-16 她：台词一长泡泡好长一条，调宽 */
  word-break: break-all; line-height: 1.6; text-align: center;
  box-shadow: 0 2px 16px rgba(180,150,100,0.12), 0 0 0 1px rgba(215,155,109,0.1);
  animation: bubble-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.speech-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,255,255,0.95);
}
@keyframes bubble-pop {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* 摸摸对话框 */
.pet-dialog {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
}
.pet-dialog-box {
  background: white; border-radius: 20px; padding: 24px;
  max-width: 320px; width: 90%; text-align: center;
  animation: slide-up 0.2s ease;
}
.pet-dialog-box h3 { color: #D79B6D; margin-bottom: 12px; font-size: 16px; }
.pet-input {
  width: 100%; padding: 12px; border: 2px solid #EEDFCC;
  border-radius: 12px; font-size: 14px; outline: none;
  margin-bottom: 12px;
}
.pet-input:focus { border-color: #D79B6D; }
.pupi-sprite {
  width: 100%; padding-bottom: 100%;
  background-size: 200% auto; background-repeat: no-repeat;
  image-rendering: auto;
  animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.025) translateY(-3px); }
}
@keyframes tremble {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1.5px, 0.5px); }
  20% { transform: translate(1px, -0.5px); }
  30% { transform: translate(-0.5px, 1px); }
  40% { transform: translate(1.5px, 0.5px); }
  50% { transform: translate(-1px, -1px); }
  60% { transform: translate(0.5px, 1.5px); }
  70% { transform: translate(-1.5px, -0.5px); }
  80% { transform: translate(1px, 0); }
  90% { transform: translate(-0.5px, -1px); }
}
.pupi-tremble { animation: tremble 0.3s infinite linear; }
@keyframes pupi-poke {
  0% { transform: scale(1); }
  25% { transform: scale(1.12) translateY(-4px); }
  50% { transform: scale(0.96) translateY(1px); }
  75% { transform: scale(1.05) translateY(-2px); }
  100% { transform: scale(1); }
}
.pupi-poke-bounce { animation: pupi-poke 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* 章鱼宠物 */
.octopus-pet-wrap {
  position: absolute; bottom: 2%; left: 10%; width: 15%; z-index: 5;
  aspect-ratio: 360 / 342;
  animation: breathe 4s ease-in-out infinite;
}
.octopus-pet {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.octopus-dizzy-eye {
  position: absolute; width: 12%; height: auto;
  animation: dizzy-spin 1.2s linear infinite;
}
.octopus-dizzy-eye.left { top: 28%; left: 28%; }
.octopus-dizzy-eye.right { top: 28%; right: 28%; animation-direction: reverse; }
@keyframes dizzy-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes octoWobble {
  0%   { transform: rotate(0deg) translateX(0); }
  20%  { transform: rotate(-3deg) translateX(-2px); }
  50%  { transform: rotate(3deg) translateX(2px); }
  80%  { transform: rotate(-2deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0); }
}
.octopus-hungry {
  animation: octoWobble 0.48s ease-in-out infinite;
}

/* 神秘蛋 */
.egg-container {
  position: absolute; bottom: 2%; left: 10%; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  animation: egg-bob 3s ease-in-out infinite;
}
.egg-progress {
  font-size: 11px; color: #6E5A4B; font-weight: 600;
  background: rgba(255,255,255,0.75); border-radius: 8px; padding: 2px 8px;
  margin-bottom: 2px; pointer-events: none;
}
.room-egg {
  width: 96px; cursor: pointer; transition: transform 0.15s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.room-egg:hover { transform: scale(1.12); }
.room-egg:active { transform: scale(0.95); }
@keyframes egg-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes egg-hatch {
  0% { transform: rotate(0); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  50% { transform: rotate(-12deg) scale(1.1); }
  60% { transform: rotate(12deg) scale(1.15); }
  70% { transform: scale(1.3); opacity: 0.8; }
  85% { transform: scale(1.5); opacity: 0.4; }
  100% { transform: scale(2); opacity: 0; }
}

/* 脏脏效果 */
.dirty-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 8;
}
.smudge {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139,110,70,0.35) 0%, rgba(139,110,70,0.15) 40%, transparent 70%);
}
.smudge-dark {
  background: radial-gradient(ellipse, rgba(110,85,50,0.45) 0%, rgba(110,85,50,0.2) 40%, transparent 70%);
}
.stink-line {
  position: absolute;
  animation: stink-rise 2.5s infinite ease-out;
  opacity: 0;
}
@keyframes stink-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.6; }
  100% { transform: translateY(-24px); opacity: 0; }
}
.fly-buzz {
  position: absolute; font-size: 14px;
  animation: buzz 1.5s infinite ease-in-out;
}
@keyframes buzz {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5px, -3px); }
  50% { transform: translate(-3px, -6px); }
  75% { transform: translate(-5px, -2px); }
}

/* 家具层 */
/* 家具的默认坐标是在约 0.68 的框里调的（0.557/0.62/0.66/0.70/0.74 并排看过，0.66–0.70 台灯落在柜子上）。
   框本身就是 0.68（见上面 .room），家具层铺满框就行。 */
.furniture-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 4; overflow: visible;
}
.furniture-item {
  position: absolute; image-rendering: auto; pointer-events: auto; cursor: grab;
  touch-action: none; user-select: none;
}
.furniture-item.dragging { opacity: 0.7; cursor: grabbing; z-index: 99; }
.furniture-item.lamp-glow {
  filter: drop-shadow(0 0 12px rgba(255,230,180,0.8)) drop-shadow(0 0 24px rgba(255,210,140,0.4));
}
.qixi-lantern {
  position: absolute; left: 91.5%; bottom: 68%; width: 8.5%; z-index: 2;
  border: 0; padding: 0; background: none; cursor: pointer; pointer-events: auto;
  filter: saturate(.55) brightness(.72); transition: filter .25s ease, transform .2s ease;
}
.qixi-lantern img { display: block; width: 65%; height: auto; margin-left: auto; }
.qixi-lantern.lit {
  filter: drop-shadow(0 0 5px rgba(255,190,105,.9)) drop-shadow(0 0 12px rgba(255,157,78,.5));
  animation: lantern-breathe 3.2s ease-in-out infinite;
}
.qixi-lantern:hover, .qixi-lantern:focus-visible { transform: translateY(-2px) scale(1.04); outline: none; }
@keyframes lantern-breathe { 0%,100% { opacity: .94; } 50% { opacity: 1; } }

.lantern-story-card { max-width: 360px; }
.lantern-hero { position: relative; height: 168px; margin: -4px auto 8px; }
.lantern-baby {
  position: absolute; left: 50%; bottom: 0; width: 140px; height: 140px; transform: translateX(-64%);
  background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 center;
}
.lantern-held { position: absolute; left: 56%; top: 18px; width: 68px; filter: drop-shadow(0 0 9px rgba(255,180,90,.65)); }
.lantern-wish-input {
  width: 100%; min-height: 82px; box-sizing: border-box; resize: vertical; padding: 12px;
  border: 1.5px solid #E9CDBA; border-radius: 13px; background: #FFFDF9; color: #6E5A4B;
  font-size: 14px; line-height: 1.6; outline: none;
}
.lantern-wish-input:focus { border-color: #D79B6D; box-shadow: 0 0 0 3px rgba(215,155,109,.12); }
.lantern-wishes { display: grid; gap: 9px; margin: 14px 0; text-align: left; }
.lantern-wish { padding: 10px 12px; border-radius: 12px; background: #FFF7EE; color: #6E5A4B; line-height: 1.6; }
.lantern-wish b { display: block; color: #C77F61; font-size: 12px; margin-bottom: 2px; }

/* 窗外光影 */
.window-light {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.window-light-beam {
  position: absolute; top: -10%; left: -20%; width: 70%; height: 110%;
  transform: skewX(28deg); transform-origin: top left;
  opacity: 0; animation: light-shimmer 6s ease-in-out infinite;
}
.window-light-beam.day {
  background: linear-gradient(135deg,
    rgba(255,245,200,0.4) 0%,
    rgba(255,235,180,0.2) 25%,
    rgba(255,230,160,0.08) 50%,
    transparent 80%);
  opacity: 0.8;
}
.window-light-beam.evening {
  background: linear-gradient(135deg,
    rgba(255,180,100,0.35) 0%,
    rgba(255,150,80,0.18) 25%,
    rgba(255,130,60,0.06) 50%,
    transparent 80%);
  opacity: 0.7;
}
.window-light-beam.night {
  background: linear-gradient(135deg,
    rgba(140,170,230,0.15) 0%,
    rgba(120,150,210,0.08) 25%,
    transparent 55%);
  opacity: 0.5;
}
.window-light-motes {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,220,0.7);
  animation: light-mote-float 8s linear infinite;
}
@keyframes light-shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes light-mote-float {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  15% { opacity: 0.8; transform: scale(1); }
  85% { opacity: 0.3; }
  100% { transform: translate(30px, 80px) scale(0.5); opacity: 0; }
}

/* 粒子效果 */
.particles {
  position: absolute; top: 0; left: 0; width: 60.8%; height: 39.5%;
  pointer-events: none; z-index: 2; overflow: hidden; clip-path: inset(0);
}