/* ============================================
   夏日海岸 · 手绘绘本风
   ============================================ */

:root {
  --ink: #4A3128;
  --line: #6A4030;
  --coral: #FF7A6B;
  --coral-deep: #E8584B;
  --teal: #2FB8C6;
  --teal-deep: #1F8FAE;
  --sun: #FFD66B;
  --paper: #FFFBF1;

  --hz: 44%;      /* 地平线位置 */
  --shore: 68%;   /* 海岸线位置 */

  --font-display: 'Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: #9BDDF4;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; overflow: visible; }

/* --- 场景容器 --- */
.scene {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.6s ease, visibility 0s 1.6s;
  overflow: hidden;
  overflow: clip;            /* 比 hidden 更彻底：连脚本/焦点触发的滚动也不允许，场景不会被"挤歪" */
}
.scene.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.6s ease, visibility 0s 0s;
}
/* 看不见的场景暂停所有动画：省电，并让入场动画在切换时才开始 */
.scene.idle *,
.scene.idle *::before,
.scene.idle *::after {
  animation-play-state: paused !important;
}

/* ============================================
   场景一：夏日海岸
   ============================================ */

/* ----- 天空 ----- */
.sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--hz) + 2%);
  background: linear-gradient(180deg, #62C7F0 0%, #8AD8F3 40%, #C6EEF8 80%, #FFF3DA 100%);
  z-index: 1;
}

.sun {
  position: absolute;
  right: 12%;
  top: 7%;
  width: clamp(64px, 8vw, 120px);
  aspect-ratio: 1;
}
.sun-rays { position: absolute; inset: -48%; width: 196%; height: 196%; animation: spin 80s linear infinite; }
.sun-halo { position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,176,.75) 0%, rgba(255,244,176,0) 66%); }
.sun-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #FFF6BF 0%, #FFE27A 55%, #FFCB4F 100%); box-shadow: 0 0 0 6px rgba(255,236,150,.45); }
@keyframes spin { to { transform: rotate(360deg); } }

.cloud {
  position: absolute;
  filter: drop-shadow(0 8px 10px rgba(70,150,200,.16));
  animation: cloud-drift linear infinite;
  left: -30vw;
}
.cl-1 { top: 6%;  width: clamp(110px, 17vw, 250px); animation-duration: 150s; animation-delay: -40s; }
.cl-2 { top: 19%; width: clamp(80px, 12vw, 180px);  animation-duration: 110s; animation-delay: -88s; opacity: .95; }
.cl-3 { top: 11%; width: clamp(90px, 13vw, 200px);  animation-duration: 190s; animation-delay: -130s; }
.cl-4 { top: 27%; width: clamp(70px, 9vw, 140px);   animation-duration: 130s; animation-delay: -12s; opacity: .9; }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(160vw); } }

.gull { position: absolute; width: clamp(22px, 2.6vw, 38px); animation: gull-glide linear infinite; left: -6vw; }
.gull path { transform-box: fill-box; transform-origin: 50% 100%; animation: gull-flap .7s ease-in-out infinite alternate; }
.gl-1 { top: 22%; animation-duration: 38s; animation-delay: -6s; }
.gl-2 { top: 28%; animation-duration: 46s; animation-delay: -20s; width: clamp(16px, 1.9vw, 28px); }
.gl-3 { top: 16%; animation-duration: 52s; animation-delay: -33s; width: clamp(14px, 1.6vw, 24px); }
@keyframes gull-glide {
  0% { transform: translate(0, 0); }
  50% { transform: translate(60vw, -14px); }
  100% { transform: translate(112vw, 6px); }
}
@keyframes gull-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* ----- 远景 ----- */
.horizon {
  position: absolute;
  left: 0; right: 0;
  top: var(--hz);
  height: 0;
  z-index: 3;
}
.horizon > * { position: absolute; bottom: 0; }
.hills { height: clamp(34px, 8vh, 80px); }
.hills-l { left: 0; width: 36vw; }
.hills-r { right: 0; width: 30vw; height: clamp(28px, 6vh, 64px); }

.lighthouse { left: 9%; width: clamp(44px, 6.2vw, 90px); bottom: -3px; }
.beam { transform-box: fill-box; animation: beam 4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

.boat { animation: bob 4.2s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.boat-1 { left: 60%; width: clamp(34px, 4.8vw, 70px); bottom: -2.2vh; }
.boat-2 { left: 76%; width: clamp(24px, 3.2vw, 46px); bottom: -.6vh; animation-delay: -2s; animation-duration: 5.2s; }
@keyframes bob { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(3px) rotate(2.5deg); } }

/* ----- 海 ----- */
.sea {
  position: absolute;
  left: 0; right: 0;
  top: var(--hz);
  height: calc(var(--shore) - var(--hz) + 3%);
  background: linear-gradient(180deg, #2AA6C6 0%, #3DBFD6 38%, #6ED8E2 78%, #9BE8EA 100%);
  overflow: hidden;
  z-index: 2;
}
.swell { position: absolute; left: 0; height: 3vh; animation: swell linear infinite; }
.swell svg { width: 100%; height: 100%; }
.swell path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.swell-1 { top: 10%; width: 180%; animation-duration: 38s; opacity: .55; }
.swell-2 { top: 34%; width: 220%; animation-duration: 30s; animation-direction: reverse; opacity: .7; }
.swell-3 { top: 58%; width: 260%; animation-duration: 24s; opacity: .85; }
.swell-4 { top: 80%; width: 300%; animation-duration: 20s; animation-direction: reverse; }
@keyframes swell { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.glint { position: absolute; width: 14px; height: 14px; fill: #fff; opacity: 0; animation: twinkle 3s ease-in-out infinite; }
.g1 { left: 14%; top: 18%; animation-delay: 0s; }
.g2 { left: 26%; top: 52%; animation-delay: .7s; width: 10px; height: 10px; }
.g3 { left: 41%; top: 30%; animation-delay: 1.4s; }
.g4 { left: 55%; top: 66%; animation-delay: 2.1s; width: 18px; height: 18px; }
.g5 { left: 68%; top: 22%; animation-delay: 1s; width: 10px; height: 10px; }
.g6 { left: 79%; top: 56%; animation-delay: 1.8s; }
.g7 { left: 90%; top: 34%; animation-delay: .4s; width: 12px; height: 12px; }
.g8 { left: 6%; top: 70%; animation-delay: 2.5s; width: 12px; height: 12px; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.buoy { position: absolute; left: 33%; top: 38%; width: clamp(18px, 2.2vw, 30px); animation: bob 3.4s ease-in-out infinite alternate; }

/* ----- 海浪泡沫 ----- */
.foam {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--shore) - 1.6vh);
  height: 4.6vh;
  z-index: 4;
  pointer-events: none;
}
.foam-line { position: absolute; left: 0; top: 0; height: 100%; }
.foam-line svg { width: 100%; height: 100%; }
.foam-line path { fill: #fff; }
.foam-a { width: 200%; animation: swell 26s linear infinite, wash 6s ease-in-out infinite; opacity: .96; }
.foam-b { width: 240%; animation: swell 34s linear infinite reverse, wash 6s ease-in-out -3s infinite; opacity: .6; top: -1.2vh; }
@keyframes wash { 0%, 100% { margin-top: 0; } 50% { margin-top: 1.6vh; } }

/* ----- 沙滩 ----- */
.beach {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--shore) + 1vh);
  bottom: 0;
  z-index: 5;
  background:
    radial-gradient(rgba(176,126,60,.20) 1.3px, transparent 1.8px) 0 0 / 23px 23px,
    radial-gradient(rgba(255,255,255,.55) 1.1px, transparent 1.6px) 11px 14px / 31px 31px,
    linear-gradient(180deg, #F3D597 0%, #F9E2B0 26%, #FBE8BE 100%);
}
.wet {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 9vh;
  background: linear-gradient(180deg, #E2BA7E 0%, rgba(226,186,126,.55) 55%, rgba(226,186,126,0) 100%);
}

.spot { position: absolute; }
.spot > * { position: absolute; }

/* 爪印 */
.prints .pw { position: absolute; width: clamp(14px, 1.7vw, 24px); fill: rgba(150,100,50,.26); }
.pw1 { left: 17%; bottom: 36%; transform: rotate(72deg); }
.pw2 { left: 21%; bottom: 29%; transform: rotate(84deg); }
.pw3 { left: 26%; bottom: 33%; transform: rotate(70deg); }
.pw4 { left: 31%; bottom: 26%; transform: rotate(86deg); }
.pw5 { left: 62%; bottom: 40%; transform: rotate(98deg); }
.pw6 { left: 67%; bottom: 32%; transform: rotate(84deg); }
.pw7 { left: 72%; bottom: 38%; transform: rotate(100deg); }
.pw8 { left: 77%; bottom: 30%; transform: rotate(88deg); }

/* 左：沙滩伞 */
.spot-umbrella { left: 8%; bottom: 8%; width: clamp(150px, 19vw, 270px); aspect-ratio: 1.08; }
.spot-umbrella .umbrella { left: -4%; bottom: 8%; width: 100%; transform: rotate(-6deg); transform-origin: 50% 100%; }
.spot-umbrella .towel { left: 12%; bottom: 0; width: 88%; }
.spot-umbrella .dog-slot { left: 34%; bottom: 7%; width: 42%; }
.spot-umbrella .flipflops { left: -6%; bottom: -3%; width: 26%; }

/* 中：沙堡 */
.spot-castle { left: 45%; bottom: 13%; width: clamp(84px, 10.5vw, 150px); aspect-ratio: 170 / 160; }
.spot-castle .castle { left: 0; bottom: 0; width: 100%; }
.spot-castle .bucket { left: -50%; bottom: 0; width: 38%; transform: rotate(-8deg); }
.spot-castle .shell-1 { left: 104%; bottom: -2%; width: 22%; transform: rotate(14deg); }
.flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag 1.4s ease-in-out infinite alternate; }
@keyframes flag { from { transform: skewY(-6deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.88); } }

/* 螃蟹 */
.crab-track { position: absolute; left: 24%; right: 22%; bottom: 5%; height: 0; }
.crab { position: absolute; left: 0; bottom: 0; width: clamp(40px, 5vw, 70px); animation: crab-walk 22s ease-in-out infinite; }
.crab .legs { animation: legs .28s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 20%; }
.crab .claw-l { transform-box: fill-box; transform-origin: 90% 90%; animation: claw-l 2.4s ease-in-out infinite; }
.crab .claw-r { transform-box: fill-box; transform-origin: 10% 90%; animation: claw-r 2.4s ease-in-out infinite; }
@keyframes crab-walk {
  0%, 6% { left: 0; }
  38% { left: 62%; }
  50%, 56% { left: 62%; }
  88% { left: 14%; }
  100% { left: 0; }
}
@keyframes legs { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
@keyframes claw-l { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-16deg); } 90% { transform: rotate(4deg); } }
@keyframes claw-r { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(16deg); } 90% { transform: rotate(-4deg); } }

.starfish { position: absolute; left: 34%; bottom: 22%; width: clamp(26px, 3vw, 44px); transform: rotate(-14deg); }
.shell-2 { position: absolute; left: 60%; bottom: 16%; width: clamp(20px, 2.2vw, 32px); transform: rotate(-12deg); }

/* 右：冲浪板 + 沙滩球 + 戴花小狗 */
.spot-right { right: 16%; bottom: 8%; width: clamp(150px, 19vw, 260px); aspect-ratio: 1.15; }
.spot-right .surfboard { left: -2%; bottom: 0; width: 22%; transform: rotate(12deg); transform-origin: 50% 100%; }
.spot-right .dog-slot { left: 24%; bottom: 3%; width: 46%; }
.spot-right .ball { right: 0; bottom: 0; width: 26%; animation: ball 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ball { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(12deg); } }

/* 椰子树 */
.palm { position: absolute; right: 1%; bottom: 14%; width: clamp(150px, 19vw, 290px); }
.palm-sway { transform-box: view-box; transform-origin: 120px 440px; animation: sway 6s ease-in-out infinite alternate; }
.fronds { transform-box: fill-box; transform-origin: 50% 70%; animation: fronds 4.4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes fronds { from { transform: rotate(-2deg); } to { transform: rotate(2.4deg); } }

/* 沙滩上的小狗：轻轻晃 */
.dog-slot .dog { width: 100%; height: auto; }
.dog-cool .dog, .dog-flower .dog { animation: dog-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.dog-flower .dog { animation-delay: -1.4s; }
@keyframes dog-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }

/* ----- 近景草丛 ----- */
.fg { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.grass { position: absolute; bottom: -1.5%; width: clamp(90px, 11vw, 170px); transform-origin: 50% 100%; animation: grass 5s ease-in-out infinite alternate; }
.grass-l { left: -1%; }
.grass-r { right: -1%; animation-delay: -2s; }
@keyframes grass { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }

/* ----- 问题明信片 ----- */
.card-wrap {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: min(450px, 90vw);
  z-index: 20;
}

.peek-slot {
  position: absolute;
  left: 30%;
  bottom: calc(100% - 14px);
  width: clamp(120px, 40%, 180px);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.peek-slot .dog { width: 100%; height: auto; }

.question-card {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 7px 0 var(--line), 0 22px 34px rgba(30,80,110,.28);
  transform: rotate(-1.2deg);
  z-index: 2;
}
.card-wrap.shake .question-card { animation: card-shake .5s ease-in-out; }
@keyframes card-shake {
  0%, 100% { transform: rotate(-1.2deg) translateX(0); }
  20% { transform: rotate(-1.2deg) translateX(-10px); }
  40% { transform: rotate(-1.2deg) translateX(10px); }
  60% { transform: rotate(-1.2deg) translateX(-6px); }
  80% { transform: rotate(-1.2deg) translateX(6px); }
}

.tape { position: absolute; top: -13px; width: 74px; height: 26px; opacity: .92; z-index: 4;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), #FFD66B;
  box-shadow: 0 2px 3px rgba(0,0,0,.12); }
.tape-l { left: 7%; transform: rotate(-9deg); }
.tape-r { right: 7%; transform: rotate(8deg); background-color: #8FDCE6; }

.card-inner {
  margin: 10px;
  padding: 26px 24px 24px;
  border: 2.5px dashed #F4B9AC;
  border-radius: 15px;
  text-align: center;
}

.question-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--coral-deep);
  margin-bottom: 12px;
}
.question-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.45rem, 5.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 22px;
}

.input-group { display: flex; gap: 12px; align-items: center; justify-content: center; }
.answer-input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  font: 700 1.1rem var(--font-body);
  text-align: center;
  letter-spacing: .12em;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 999px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.answer-input::placeholder { color: #B79A8B; font-weight: 500; letter-spacing: .06em; }
.answer-input:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 4px rgba(47,184,198,.28); }

.submit-btn {
  flex: none;
  padding: 12px 22px;
  font: 900 1.05rem var(--font-display);
  letter-spacing: .1em;
  color: #fff;
  background: var(--coral);
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--line);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.submit-btn:hover { background: #FF8B7D; }
.submit-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.submit-btn:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 4px; }
.submit-btn:disabled, .answer-input:disabled { opacity: .7; cursor: default; }

/* 小狗说话的气泡（提示语） */
.hint-text {
  position: absolute;
  right: 0;
  bottom: calc(100% + 38px);
  max-width: min(250px, 54%);
  padding: 9px 15px;
  font: 700 .95rem/1.4 var(--font-body);
  letter-spacing: .02em;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 4px 0 rgba(106,64,48,.25);
  z-index: 5;
  animation: bubble-pop .35s cubic-bezier(.3, 1.6, .5, 1);
  transform-origin: 0 100%;
}
.hint-text::after {
  content: '';
  position: absolute;
  left: 16px; bottom: -13px;
  width: 14px; height: 14px;
  background: #fff;
  border-right: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  transform: rotate(45deg) skew(12deg, 12deg);
  border-bottom-right-radius: 4px;
}
.hint-text:empty { display: none; }
@keyframes bubble-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }

/* ============================================
   场景二：黄昏单车骑行
   ============================================ */

#scene-sunset { background: #2A1A3E; }

.photo {
  position: absolute;
  inset: 0;
  background: #2A1A3E url('../images/sunset-bg.jpg') center 40% / cover no-repeat;
  background-image: image-set(url('../images/sunset-bg.webp') type('image/webp'), url('../images/sunset-bg.jpg') type('image/jpeg'));
  filter: saturate(1.1) brightness(.95);
  transform-origin: 45% 65%;
  animation: photo-in 2.4s ease-out both, push-in 36s ease-in-out 2.4s infinite alternate;
}
@keyframes photo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes push-in { from { transform: scale(1.03); } to { transform: scale(1.14) translate(-1.2%, -.8%); } }

/* 暖色黄昏滤镜 */
.glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 52% at 28% 92%, rgba(255,198,120,.62) 0%, rgba(255,170,110,.30) 46%, rgba(255,170,110,0) 76%),
    linear-gradient(180deg, rgba(86,56,150,.42) 0%, rgba(214,118,170,.22) 40%, rgba(255,140,100,.38) 76%, rgba(255,108,70,.52) 100%);
  pointer-events: none;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(30,10,40,.42) 100%);
  pointer-events: none;
}

.drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.mote {
  position: absolute;
  bottom: -20px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF7C8 0%, #FFD66B 55%, rgba(255,214,107,0) 72%);
  opacity: 0;
  animation: mote linear infinite;
}
@keyframes mote {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translate(var(--sway, 30px), -105vh) scale(1.1); opacity: 0; }
}

/* ----- 贴纸小狗 ----- */
.sticker {
  position: absolute;
  z-index: 8;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 10px rgba(40,10,40,.35));
  opacity: 0;
  transform: translateY(24px) scale(.7);
}
.scene.active .sticker { animation: sticker-in .9s cubic-bezier(.3, 1.5, .5, 1) forwards, float 5s ease-in-out infinite; }
.scene.active .st-1 { animation-delay: 2.6s, 3.5s; }
.scene.active .st-2 { animation-delay: 3.1s, 4s; }
.scene.active .st-3 { animation-delay: 3.6s, 4.5s; }
.scene.active .st-4 { animation-delay: 4.1s, 5s; }
@keyframes sticker-in { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

.sticker .dog { width: 100%; height: auto; position: relative; z-index: 1; }
.sticker .cloud-seat {
  position: absolute; left: -12%; right: -12%; bottom: -8%; height: 38%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100'%3E%3Cpath fill='%23fff' d='M34,90 C8,90 4,60 30,56 C26,30 58,20 76,36 C86,10 130,8 142,34 C160,22 190,36 182,62 C210,62 214,90 186,90 Z'/%3E%3Cpath fill='%23FFD9DC' d='M34,90 C16,90 8,74 18,66 C22,80 40,82 60,82 L160,82 C176,82 192,80 202,72 C210,84 200,90 186,90 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: 0;
}
.st-1 { left: 5%;  top: 15%; width: clamp(74px, 10vw, 150px); }
.st-2 { right: 6%; top: 24%; width: clamp(74px, 10vw, 150px); }
.st-3 { left: 4%;  bottom: 30%; width: clamp(66px, 8.6vw, 126px); }
.st-4 { right: 5%; bottom: 29%; width: clamp(66px, 8.6vw, 126px); }

.balloon { position: absolute; left: 62%; bottom: 66%; width: 52%; z-index: 2; transform-origin: 20% 100%; animation: balloon 3.4s ease-in-out infinite alternate; }
@keyframes balloon { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.zzz { position: absolute; left: 70%; top: -6%; z-index: 2; font: 900 1.1rem var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(106,64,48,.6); animation: zzz 2.6s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 8px) scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px) scale(1.2); } }

/* ----- 骑车 ----- */
.ride { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 7; pointer-events: none; }

.ground {
  position: absolute;
  left: -10%; right: -10%; bottom: -3vh;
  height: 11vh;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: linear-gradient(180deg, #6DBB6E 0%, #3F8E58 55%, #2C6E49 100%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.28), 0 -6px 18px rgba(30,60,30,.3);
  overflow: hidden;
}
.ground-scroll { position: absolute; left: 0; top: 0; height: 100%; width: 200%; animation: ride-scroll 7s linear infinite; }
.tuft { position: absolute; width: clamp(26px, 3.2vw, 44px); }
@keyframes ride-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bike-rig {
  position: absolute;
  left: 22%;
  bottom: 4.2vh;
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 320 / 200;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 10px rgba(40,10,40,.35));
  animation: bike-ride 1s ease-in-out infinite alternate;
  opacity: 0;
}
.scene.active .bike-rig { opacity: 1; transition: opacity 1.2s ease 1.8s; }
@keyframes bike-ride { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-4px) rotate(.6deg); } }
.bike { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.1s linear infinite; }
.bike-dog { position: absolute; left: 62%; top: -2%; width: 32%; }
.bike-dog .dog { width: 100%; height: auto; }
.scarf-tail { transform-box: fill-box; transform-origin: 100% 50%; animation: scarf .5s ease-in-out infinite alternate; }
@keyframes scarf { from { transform: rotate(-8deg) scaleX(1); } to { transform: rotate(6deg) scaleX(.86); } }

/* ----- 我爱你 ----- */
.love-container {
  position: absolute;
  left: 0; right: 0;
  top: 25%;
  display: flex;
  justify-content: center;
  z-index: 9;
  pointer-events: none;
}
.love-text {
  display: flex;
  gap: clamp(8px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 14vw, 180px);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: clamp(8px, 1.2vw, 16px) var(--coral);
  paint-order: stroke fill;
  text-shadow: 0 clamp(5px, .8vw, 10px) 0 rgba(106,64,48,.9), 0 20px 30px rgba(60,10,40,.4);
}
.char { opacity: 0; transform: translateY(60px) scale(.5) rotate(-10deg); display: inline-block; }
.char.visible { animation: char-pop 1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.char-2.visible { animation-name: char-pop-2; }
@keyframes char-pop { to { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); } }
@keyframes char-pop-2 { to { opacity: 1; transform: translateY(0) scale(1) rotate(2deg); } }
.love-text.breathing { animation: love-breathe 3.2s ease-in-out infinite; }
@keyframes love-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ----- 飘起的爱心 ----- */
.hearts-area { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.heart-particle { position: absolute; width: 28px; height: auto; animation: heart-float 5s ease-out forwards; filter: drop-shadow(0 2px 0 rgba(106,64,48,.35)); }
@keyframes heart-float {
  0% { opacity: 0; transform: translateY(0) scale(.3) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-62vh) translateX(var(--sway, 20px)) scale(1) rotate(var(--rot, 14deg)); }
}

/* ----- 音乐按钮 ----- */
.music-info {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  font: 700 .86rem var(--font-body);
  letter-spacing: .04em;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--line);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1.4s, transform 1s ease 1.4s, box-shadow .12s ease;
}
.music-info.visible { opacity: 1; transform: translateY(0); }
.music-info:active { box-shadow: 0 1px 0 var(--line); }
.music-info:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 4px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--coral); transform-origin: 50% 100%; animation: eq .8s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; background: var(--teal); }
.eq i:nth-child(3) { animation-delay: -.6s; background: var(--sun); }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.music-info.paused .eq i { animation-play-state: paused !important; transform: scaleY(.3); }

/* ----- 登录入口（黄昏场景下部） ----- */
.login {
  --kb: 0px;                       /* 手机软键盘高度，由 login.js 写入 */
  position: absolute;
  left: 50%;
  bottom: max(6.5vh, calc(env(safe-area-inset-bottom) + 20px));
  z-index: 12;
  width: min(450px, calc(100vw - 32px));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.login.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, calc(var(--kb) * -1));
}
.login.visible.kb-open { transition: transform .25s ease; }

.login-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
  font: 500 .82rem/1 var(--font-body);
  letter-spacing: .5em;
  text-indent: .5em;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 12px rgba(60, 20, 50, .6);
}
.login-title::before, .login-title::after {
  content: '';
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8));
}
.login-title::after { transform: scaleX(-1); }

.login-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .13));
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(40, 10, 50, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-form { background: rgba(70, 36, 74, .55); }
}

.login-field { position: relative; flex: 1 1 0; min-width: 0; }
.login-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 18px;
  font: 500 1rem var(--font-body);     /* 16px：避免 iPhone 聚焦时自动放大页面 */
  letter-spacing: .06em;
  color: #fff;
  background: rgba(46, 18, 54, .34);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-input.has-eye { padding-right: 46px; }
.login-input::placeholder { color: rgba(255, 255, 255, .72); letter-spacing: .3em; }
.login-input:focus {
  background: rgba(46, 18, 54, .46);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 3px rgba(255, 214, 107, .38);
}
.login-input:focus::placeholder { color: rgba(255, 255, 255, .45); }
.login-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease 0s;
  box-shadow: inset 0 0 0 50px rgba(70, 36, 74, .85);
}

.login-eye {
  position: absolute;
  top: 50%; right: 5px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-top: -18px;
  padding: 0;
  color: rgba(255, 255, 255, .78);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.login-eye:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.login-eye:focus-visible { outline: 2px solid #FFD66B; outline-offset: 1px; }
.login-eye .eye-off { display: none; }
.login-eye[aria-pressed="true"] .eye-on { display: none; }
.login-eye[aria-pressed="true"] .eye-off { display: block; }

.login-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px 0 24px;
  font: 700 .98rem var(--font-body);
  letter-spacing: .22em;
  color: #fff;
  background: linear-gradient(180deg, #FF8E7F 0%, var(--coral-deep) 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(232, 88, 75, .45), inset 0 1px 0 rgba(255, 255, 255, .42);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.login-btn svg { transition: transform .2s ease; }
.login-btn:hover { filter: brightness(1.06); }
.login-btn:hover svg { transform: translateX(3px); }
.login-btn:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(232, 88, 75, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.login-btn:disabled { opacity: .7; cursor: default; }

.login-msg {
  min-height: 1.5em;
  margin-top: 12px;
  font: 500 .86rem/1.5 var(--font-body);
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(60, 20, 50, .75);
}

.login-msg.is-error { color: #FFE6DF; }
.login-msg.is-ok { color: #fff; font-weight: 700; letter-spacing: .14em; }

/* 登录框下面那两个小链接：注册 / 忘记密码 */
.login-alt {
  margin: 6px 0 0;
  font: 500 .78rem/1.6 var(--font-body);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 10px rgba(60, 20, 50, .75);
}
.login-alt a {
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 1px;
}
.login-alt a:hover { color: #fff; border-bottom-color: #fff; }
.login-alt span { margin: 0 .5em; opacity: .55; }

/* 输错时整条左右抖一下 */
.login-form.shake { animation: login-shake .5s ease-in-out; }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

/* 验证中：按钮里的箭头换成转圈 */
.login-btn { min-width: 108px; }
.login-btn.busy { opacity: .85; cursor: progress; }
.login-btn.busy svg { display: none; }
.login-btn.busy::after {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* 登录成功：整页淡成日记页的纸色，再跳转 */
.login-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #F6F0E6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.login-veil.on { opacity: 1; pointer-events: auto; }

/* 宽屏：单车往左让出中间位置给登录入口 */
@media (min-width: 761px) {
  .bike-rig { left: 6%; }
}
/* 平板等中等宽度：左右放不下，登录入口整体抬到单车上方 */
@media (min-width: 761px) and (max-width: 1180px) {
  .login { bottom: calc(4.2vh + clamp(125px, 16.25vw, 225px) + 20px); }
}

/* ============================================
   小屏幕
   ============================================ */

@media (max-width: 760px) {
  :root { --hz: 38%; --shore: 63%; }

  .card-wrap { top: max(37%, 270px); }   /* 矮屏手机：给卡片上沿的小狗和气泡留出位置，别被顶出屏幕 */
  .card-inner { padding: 22px 16px 20px; }
  .question-text { margin-bottom: 18px; }
  .lighthouse { left: 5%; }
  .boat-1 { left: 52%; }
  .boat-2 { left: 74%; }
  .buoy { display: none; }

  .spot-umbrella { left: 0; bottom: 7%; width: 52vw; }
  .spot-castle { left: 42%; width: 19vw; bottom: 14%; }
  .spot-right { right: 3%; bottom: 7%; width: 40vw; }
  .spot-right .ball { width: 22%; }
  .palm { width: 34vw; right: -6%; bottom: 20%; }
  .shell-2, .starfish { display: none; }
  .crab { width: 46px; }
  .crab-track { left: 30%; right: 30%; bottom: 3%; }
  .grass { width: 20vw; }
  .prints .pw5, .prints .pw6, .prints .pw7, .prints .pw8 { display: none; }

  .st-3, .st-4 { display: none; }
  .st-1 { top: 10%; left: 3%; width: 22vw; }
  .st-2 { top: 9%; right: 3%; width: 22vw; }
  .bike-rig { left: 3%; width: 58vw; bottom: 3vh; }
  .love-container { top: 21%; }
  .love-text { font-size: 24vw; gap: 2.4vw; }
  .login { bottom: calc(3vh + 36.25vw + 18px); }   /* 停在单车上方 */
}

@media (max-width: 480px) {
  .input-group { flex-direction: column; align-items: stretch; }
  .answer-input, .submit-btn { width: 100%; }
  .question-title { letter-spacing: .24em; }

  /* 手机竖屏：账号、密码、按钮上下排开，方便单手点按 */
  .login-form { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 28px; }
  .login-field { flex: none; }
  .login-btn { width: 100%; }
}

/* 手机竖屏且屏幕偏矮（如 iPhone SE）：把登录框压紧一点，别顶到「我爱你」 */
@media (max-width: 480px) and (max-height: 700px) {
  .login-title { margin-bottom: 8px; }
  .login-form { gap: 8px; padding: 10px; }
  .login-input, .login-btn { height: 42px; }
  .login-msg { margin-top: 8px; min-height: 1.4em; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .card-wrap { top: 52%; }
  .peek-slot { width: 100px; }
  .question-text { font-size: 1.25rem; margin-bottom: 12px; }
  .card-inner { padding: 14px 18px 14px; }

  /* 黄昏场景：「我爱你」在上，单车在左下，登录入口放右下 */
  .love-container { top: 7%; }
  .love-text { font-size: clamp(54px, 24vh, 110px); gap: 2vw; }
  .bike-rig { left: 3%; width: clamp(150px, 42vh, 230px); bottom: 4vh; }
  .st-3, .st-4 { display: none; }
  /* 音乐按钮缩成只剩图标，给登录入口让位 */
  .music-info { padding: 9px 12px; }
  #music-label { display: none; }
  .login {
    left: auto;
    right: calc(max(16px, env(safe-area-inset-right)) + 62px);
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(400px, 56vw);
    transform: translate(0, 18px);
  }
  .login.visible { transform: translate(0, calc(var(--kb) * -1)); }
  .login-title { margin-bottom: 8px; font-size: .76rem; }
  .login-form { padding: 6px; }
  .login-input, .login-btn { height: 40px; }
  .login-msg { margin-top: 6px; min-height: 1.3em; font-size: .8rem; }
}

/* ============================================
   减少动态效果
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .cloud, .gull, .gull path, .swell, .foam-line, .glint, .boat, .buoy, .beam, .sun-rays,
  .palm-sway, .fronds, .grass, .crab, .crab *, .ball, .flag, .dog-slot .dog,
  .photo, .ground-scroll, .wheel, .bike-rig, .scarf-tail, .balloon, .zzz, .mote, .eq i {
    animation: none !important;
  }
  .scene, .scene.active { transition-duration: .3s; transition-delay: 0s; }
  .login { transition-duration: .3s; }
  .login-form.shake, .login-btn.busy::after { animation-duration: .01s; }
  .login-veil { transition-duration: .2s; }
  .glint { opacity: .8; }
  .crab { left: 30%; }
}