/* 06 心潮：一片会动的海。天上是心情、梦、觉察、海鸥带来的最近一件事；海上每种驱力一只纸船，越想越近越大；海面漂着念头的漂流瓶。 */
.tide { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--c-paper-blue); }
.tide-sea { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tide-head {
  position: absolute; left: 24px; right: 18px; top: calc(env(safe-area-inset-top, 0px) + 44px);
  display: flex; align-items: flex-end; gap: 10px; z-index: 2;
}
.tide-head .script { font-size: 40px; line-height: 1; }
.tide-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 2px; }
.tide-head .web { margin-left: auto; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--tide-chip); font-size: 12px; display: flex; align-items: center; }

/* 此刻的心情：太阳贴纸 + 一张半透明小纸 */
.tide-mood { position: absolute; left: 22px; top: calc(env(safe-area-inset-top, 0px) + 102px); display: flex; align-items: center; gap: 12px; text-align: left; z-index: 2; }
.tide-sun {
  width: 72px; height: 72px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--sun); box-shadow: 0 0 0 6px var(--sun-halo-1), 0 0 0 13px var(--sun-halo-2);
  transition: background .6s ease;
}
.tide-sun svg { stroke: var(--sun-ink); }
.tide-mood .card { background: var(--tide-chip); padding: 6px 10px; border-radius: 8px; }
.tide-mood small { display: block; font-size: 11px; color: var(--c-ink-2); letter-spacing: 2px; }
.tide-mood b { display: block; font-size: 21px; font-weight: 600; }
.tide-mood span.sub { display: block; font-size: 12px; color: var(--c-ink-2); }

/* 梦：云朵贴纸 + 小纸片 */
.tide-dream { position: absolute; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 92px); width: 160px; text-align: center; z-index: 2; }
.tide-dream img { width: 128px; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(120, 100, 160, .18)); animation: drift 9s ease-in-out infinite; }
.tide-dream .note { display: inline-block; margin-top: -6px; transform: rotate(-2deg); }

/* 觉察：发光的小星星 */
.tide-aware { position: absolute; left: 18px; top: calc(env(safe-area-inset-top, 0px) + 216px); width: 180px; display: flex; align-items: center; gap: 4px; text-align: left; z-index: 2; }
.tide-aware img { width: 52px; flex: none; filter: drop-shadow(0 0 10px rgba(255, 226, 150, .85)); animation: twinkle 3.2s ease-in-out infinite; }

/* 海鸥衔着的飘带：最近一件有起因的事 */
.tide-gull { position: absolute; left: 22%; top: calc(env(safe-area-inset-top, 0px) + 300px); display: flex; align-items: center; z-index: 2; animation: drift 7s ease-in-out infinite; }
.tide-gull svg.bird { stroke: var(--gull); }
.tide-gull svg.string { stroke: var(--c-pink-ink); }
.tide-gull span {
  background: var(--c-paper-pink); color: var(--diary-today-ink); font-size: 12px; padding: 4px 14px 4px 10px; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%); transform: rotate(-3deg);
}

/* 共用的小纸片 */
.tide .note { background: var(--tide-note); border-radius: 8px; padding: 5px 9px; font-size: 12px; line-height: 1.5; text-align: left; box-shadow: 0 3px 8px rgba(var(--c-shadow), .12); max-width: 170px; }
.tide .note em { font-style: normal; font-size: 11px; color: var(--c-ink-2); }
.tide .note .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 纸船：位置和大小由 js 按驱力算，这里只管晃 */
.boat { position: absolute; width: 100px; margin-left: -50px; text-align: center; z-index: 1; }
.boat img { margin: 0 auto; filter: drop-shadow(0 3px 3px rgba(var(--c-shadow), .18)); animation: bob var(--bob, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.boat span { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 8px; background: var(--tide-chip); line-height: 16px; white-space: nowrap; }
.boat[aria-expanded="true"] span { background: var(--c-paper); box-shadow: 0 0 0 2px var(--c-pink); }
.boat { transition: top 1.6s ease, transform 1.6s ease; }

/* 漂流瓶 */
.tide-bottle { position: absolute; left: 33%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); display: flex; align-items: center; gap: 4px; text-align: left; z-index: 2; }
.tide-bottle img { width: 74px; flex: none; transform: rotate(-18deg); filter: drop-shadow(0 4px 4px rgba(var(--c-shadow), .18)); animation: bob 4.4s ease-in-out infinite; }
.tide-bottle .note { background: var(--c-paper); border-radius: 3px; transform: rotate(2deg); max-width: 160px; }

/* 点船 / 点心情冒出来的小卡 */
.tide-pop {
  position: absolute; z-index: 5; width: 220px; margin-left: -110px; padding: 12px 14px;
  background: var(--c-paper); border-radius: 10px; box-shadow: 0 8px 18px rgba(20, 30, 60, .22); font-size: 13px; line-height: 1.6;
  animation: pop-in .2s ease;
}
.tide-pop::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 40px; height: 14px; margin-left: -20px; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, var(--tape-blue-a) 0 6px, var(--tape-blue-b) 6px 12px);
}
.tide-pop b { font-size: 16px; }
.tide-pop .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tide-pop .mono { font-size: 12px; color: var(--c-ink-2); }
.tide-pop .bar { height: 6px; border-radius: 3px; background: var(--c-paper-blue); margin: 6px 0; overflow: hidden; }
.tide-pop .bar i { display: block; height: 100%; background: var(--c-blue); border-radius: 3px; }
.tide-pop p { margin: 0; color: var(--c-ink-2); font-size: 12px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } }

.tide-off { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); z-index: 3; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .boat img, .tide-bottle img, .tide-dream img, .tide-aware img, .tide-gull { animation: none; }
  .boat { transition: none; }
}