/* 航行镜头：固定机位、可信接水线与分层海面；不使用扫光或镜头晃动。 */
.boat-sea.cruise-scene {
  --cruise-sky: #559ab0;
  --cruise-horizon: #d0e6d6;
  --cruise-sea-far: #77bcb7;
  --cruise-sea-mid: #258c9c;
  --cruise-sea-deep: #0b445b;
  --cruise-cloud: #edf4e9;
  --cruise-flag: #2dbb89;
  width: 100%;
  aspect-ratio: 12 / 7;
  min-height: 200px;
  max-height: 330px;
  flex-shrink: 0;
  position: relative;
  margin-top: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(28, 93, 105, .16);
  border-radius: 16px;
  background: var(--cruise-sea-deep);
  box-shadow: 0 12px 28px rgba(13, 71, 83, .13);
}
.cruise-scene.scene-dawn {
  --cruise-sky: #92b9c8;
  --cruise-horizon: #f2ddbb;
  --cruise-sea-far: #a5c9ba;
  --cruise-sea-mid: #489b9f;
}
.cruise-scene.scene-sunset {
  --cruise-sky: #8c9fbb;
  --cruise-horizon: #f5caa5;
  --cruise-sea-far: #bfc3ae;
  --cruise-sea-mid: #4e939e;
  --cruise-sea-deep: #17465c;
  --cruise-cloud: #f5d9c5;
}
.cruise-scene.scene-overcast, .cruise-scene.scene-showers {
  --cruise-sky: #778d9d;
  --cruise-horizon: #bdc9c6;
  --cruise-sea-far: #84aaaa;
  --cruise-sea-mid: #457e8f;
  --cruise-sea-deep: #1a4458;
  --cruise-cloud: #c8d2d1;
}
.cruise-scene.scene-night {
  --cruise-sky: #10243e;
  --cruise-horizon: #40596e;
  --cruise-sea-far: #2c5268;
  --cruise-sea-mid: #183e55;
  --cruise-sea-deep: #081d30;
  --cruise-cloud: #607489;
  --cruise-reflection-color: #c1deef;
}
.cruise-scene.scene-twilight { --cruise-sky: #414b72; --cruise-horizon: #b6a1a2; --cruise-sea-far: #657b88; --cruise-sea-mid: #315367; --cruise-sea-deep: #172f46; --cruise-cloud: #9598ae; }
.cruise-art stop { transition: stop-color .7s ease; }
.cruise-picture, .cruise-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cruise-art { display: block; }
.cruise-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 36, 53, .1), transparent 27% 70%, rgba(4, 30, 43, .58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.cruise-sun { opacity: var(--cruise-sun-opacity); transform: translate(var(--cruise-sun-x), var(--cruise-sun-y)); transition: opacity .5s ease, transform .65s ease; }
.cruise-moon { opacity: var(--cruise-moon-opacity); transition: opacity .5s ease; }
.cruise-sun-reflection { opacity: var(--cruise-reflection-opacity); transform: translateX(calc(var(--cruise-reflection-x) - 556px)); transition: opacity .5s ease, transform .65s ease; }
.cruise-clouds { opacity: var(--cruise-cloud-opacity); animation: cruiseClouds 32s ease-in-out infinite alternate; }
.cruise-night-stars { opacity: var(--cruise-stars-opacity); transition: opacity .5s ease; }
.cruise-distant-land, .cruise-vessel { transition: filter .7s ease; }
.scene-night .cruise-distant-land { filter: brightness(.35) saturate(.45); }
.scene-night .cruise-vessel { filter: brightness(.72) saturate(.65); }
.scene-twilight .cruise-distant-land { filter: brightness(.6) saturate(.65); }
.scene-twilight .cruise-vessel { filter: brightness(.82) saturate(.8); }
.scene-night .cruise-water-lines, .scene-night .cruise-wake { filter: brightness(.5); }
.cruise-night-lights { opacity: 0; transition: opacity .7s ease; }
.scene-night .cruise-night-lights, .scene-twilight .cruise-night-lights { opacity: 1; }
.cruise-vessel {
  --cruise-motion-heave: var(--cruise-heave);
  transform-box: view-box;
  transform-origin: 218px 116px;
  animation: cruiseHeave var(--cruise-period) cubic-bezier(.42, 0, .58, 1) infinite;
}
.cruise-condition-flag { transform-box: view-box; transform-origin: 174px -12px; animation: cruiseFlag var(--cruise-flag-period, 1.8s) ease-in-out infinite alternate; }
.cruise-flag-cloth { fill: var(--cruise-flag); stroke: rgba(21,65,65,.3); stroke-width: .7; }
.cruise-scene[data-sea-tone="watch"] { --cruise-flag: #efb94a; }
.cruise-scene[data-sea-tone="alert"] { --cruise-flag: #ec7168; }
.cruise-scene.is-unavailable { --cruise-flag: #91a2a6; }
.cruise-wave-edge { stroke: #c4ebe1; stroke-width: 2; stroke-opacity: var(--cruise-wave-contrast); }
.cruise-whitecaps { fill: #e8fff4; opacity: var(--cruise-whitecaps); transition: opacity .4s ease; }
.cruise-swell-far { --cruise-wave-travel: var(--cruise-far-travel); animation: cruiseWaveTravel calc(var(--cruise-period) * 2.2) linear infinite; }
.cruise-swell-mid { --cruise-wave-travel: var(--cruise-mid-travel); animation: cruiseWaveTravel calc(var(--cruise-period) * 1.7) linear infinite; animation-delay: -1.3s; }
.cruise-swell-near { --cruise-wave-travel: var(--cruise-near-travel); animation: cruiseWaveTravel calc(var(--cruise-period) * 1.5) linear infinite; animation-delay: -2.4s; }
.cruise-water-lines { animation: cruiseSurface 14s ease-in-out infinite alternate; }
.cruise-wake { opacity: var(--cruise-foam); }
.cruise-foam-lines { stroke-dasharray: 28 7 8 5; animation: cruiseFoam 4s linear infinite; }
.cruise-contact { --cruise-motion-heave: calc(var(--cruise-heave) * .88); transform-origin: 450px 295px; opacity: var(--cruise-foam); animation: cruiseHeave var(--cruise-period) cubic-bezier(.42, 0, .58, 1) infinite; }
.cruise-bow-spray { opacity: var(--cruise-spray); transform-origin: 354px 124px; animation: cruiseBowSpray var(--cruise-period) ease-out infinite; }
.scene-night .cruise-whitecaps, .scene-night .cruise-bow-spray { filter: brightness(.65); }
.cruise-rain { display: none; }
.scene-showers .cruise-rain { display: block; animation: cruiseRain 1.3s linear infinite; }
.cruise-caption {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 72px);
  color: #fffaf0;
  font: 650 10px/1.5 system-ui, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 1px 6px rgba(5, 37, 51, .75);
  pointer-events: none;
}
.cruise-toggle {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff8eb;
  cursor: pointer;
}
.cruise-toggle svg { width: 20px; height: 20px; padding: 5px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(8,46,60,.52); box-sizing: content-box; }
.cruise-toggle path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.cruise-toggle .cruise-play-icon { display: none; stroke-width: 1.3; fill: currentColor; }
.cruise-toggle[aria-pressed="true"] .cruise-play-icon { display: block; }
.cruise-toggle[aria-pressed="true"] .cruise-pause-icon { display: none; }
.cruise-toggle:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.cruise-toggle:focus-visible { outline: 2px solid #ffedb9; outline-offset: -2px; }
.cruise-toggle:disabled { opacity: .65; cursor: default; }
.cruise-scene-footer {
  position: absolute;
  inset-inline: 14px;
  bottom: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #f4faf5;
  pointer-events: none;
}
.cruise-scene-footer time { font: 650 12px/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px #163a49; }
.boat-sea-state { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(226,247,237,.34); border-radius: 999px; background: rgba(10,47,59,.8); }
.boat-sea-state b { font: 700 13px/1.25 system-ui, sans-serif; }
.boat-sea-state i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--cruise-flag); box-shadow: 0 0 7px rgba(146,228,196,.28); }
.cruise-scene.is-unavailable .cruise-picture { filter: saturate(.45); }
.cruise-scene.is-paused *, .cruise-scene.is-unavailable * { animation-play-state: paused !important; }
/* 选时信息与场景分层；保留清晰读数，不将评分写成安全概率。 */
.boat-card { --boat-state: #218b78; }
.boat-card[data-boat-tone="watch"] { --boat-state: #b88727; }
.boat-card[data-boat-tone="alert"] { --boat-state: #ba5752; }
.boat-card[data-boat-tone="unavailable"] { --boat-state: #7b9197; }
.boat-window-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; }
.boat-window-heading > div:first-child { min-width: 0; }
.boat-window-label { display: block; font-size: 11px; font-weight: 600; line-height: 1.6; color: #58757a; }
.boat-window-time { display: block; margin-top: 5px; font: 550 clamp(17px, 1.25vw, 23px)/1.4 "Iowan Old Style", Georgia, serif; color: #153c45; font-variant-numeric: tabular-nums; }
.boat-window-score { flex-shrink: 0; text-align: end; color: #236c76; }
.boat-window-score b { display: block; font: 500 34px/1 Georgia, serif; }
.boat-window-score small { display: block; max-width: 104px; margin-top: 6px; font: 500 10px/1.5 system-ui, sans-serif; color: #5b7880; }
.boat-window-time, .boat-window-facts dd, .cruise-scene-footer time { direction: ltr; unicode-bidi: isolate; text-align: match-parent; }
.boat-window-status { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--boat-state); font-size: 12px; font-weight: 650; line-height: 1.5; }
.boat-window-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.boat-window-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 19px 0 0; padding: 15px 0; border-block: 1px solid #dde9e5; }
.boat-window-facts > div { min-width: 0; padding-inline: 12px; border-inline-start: 1px solid #dde9e5; }
.boat-window-facts > div:first-child { padding-inline-start: 0; border: 0; }
.boat-window-facts dt { color: #607d84; font-size: 11px; line-height: 1.5; }
.boat-window-facts dd { margin: 6px 0 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: #245560; font-variant-numeric: tabular-nums; }
.boat-card .boat-window-reason { margin: 14px 0 0; min-height: 4.95em; font-size: 12px; line-height: 1.65; color: #57717a; }
.boat-timebar { margin: 12px 0 18px; }
.boat-timebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.boat-timebar-head label { font-size: 12px; font-weight: 650; color: #1d5460; }
.boat-best { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #d5e5df; background: rgba(255,255,255,.76); border-radius: 10px; color: #2f646b; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.boat-best.is-selected { background: #f8f0d9; border-color: #e9d9ae; color: #816a39; }
.boat-best:hover:not(:disabled) { background: #e6f2ee; }
.boat-best:disabled { opacity: .5; cursor: default; }
.boat-best:focus-visible { outline: 2px solid #247b82; outline-offset: 3px; }
.boat-timebar-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-top: 10px; color: #668289; font-size: 10px; line-height: 1.5; }
.boat-scrubber { position: relative; height: 61px; margin-top: 3px; }
.boat-scrubber svg { position: absolute; left: 13px; top: 0; width: calc(100% - 26px); height: 46px; overflow: visible; pointer-events: none; }
.boat-scrubber input { appearance: none; -webkit-appearance: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 44px; padding: 0; border: 0; box-shadow: none; margin: 0; background: transparent; cursor: ew-resize; touch-action: pan-y; accent-color: #147b83; }
.boat-scrubber input::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.boat-scrubber input::-moz-range-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.boat-scrubber input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border: 5px solid #fffef9; border-radius: 50%; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5, 0 3px 7px #164a522b; }
.boat-scrubber input::-moz-range-thumb { width: 16px; height: 16px; border: 5px solid #fffef9; border-radius: 50%; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5; }
.is-time-scrubbing .boat-scrubber input::-webkit-slider-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.is-time-scrubbing .boat-scrubber input::-moz-range-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.boat-scrubber input:focus-visible { outline: 2px solid #287f86; outline-offset: 3px; border-radius: 4px; }
.boat-scrubber input:disabled { opacity: .5; cursor: default; }
.boat-time-endpoints { display: flex; justify-content: space-between; gap: 8px; color: #668289; font-size: 10px; font-variant-numeric: tabular-nums; }
.boat-card .boat-recommendation-empty { font-size: 11px; line-height: 1.6; color: #6b8187; margin: 12px 0 0; }
.cruise-art stop { transition: stop-color .45s ease; }
.cruise-sun, .cruise-clouds, .cruise-sun-reflection { transition: opacity .45s ease; }
.is-time-scrubbing .cruise-art * { transition-duration: .12s; }
@media (max-width: 560px) {
  .boat-window-heading { gap: 10px; margin-top: 20px; }
  .boat-window-time { font-size: 17px; }
  .boat-window-score b { font-size: 30px; }
  .boat-window-score small { max-width: 78px; }
  .boat-window-facts > div { padding-inline: 8px; }
  .boat-window-facts dd { font-size: 14px; }
  .boat-card .boat-window-reason { min-height: 6.6em; }
}
@keyframes cruiseHeave {
  0%, 100% { transform: translateY(calc(var(--cruise-motion-heave) * .35)) rotate(calc(var(--cruise-pitch) * .25)); }
  18% { transform: translateY(calc(var(--cruise-motion-heave) * -.45)) rotate(calc(var(--cruise-pitch) * -.85)); }
  38% { transform: translateY(calc(var(--cruise-motion-heave) * -.95)) rotate(calc(var(--cruise-pitch) * -.45)); }
  58% { transform: translateY(calc(var(--cruise-motion-heave) * .2)) rotate(calc(var(--cruise-pitch) * .8)); }
  70% { transform: translateY(calc(var(--cruise-motion-heave) * .4)) rotate(calc(var(--cruise-pitch) * .4)); }
  82% { transform: translateY(0) rotate(calc(var(--cruise-pitch) * -.15)); }
}
@keyframes cruiseClouds { to { transform: translateX(20px); } }
@keyframes cruiseFlag { from { transform: skewY(-2deg) scaleX(.94); } to { transform: skewY(2deg) scaleX(1); } }
@keyframes cruiseWaveTravel { to { transform: translateX(calc(var(--cruise-wave-travel) * -1)); } }
@keyframes cruiseBowSpray {
  0%, 38%, 100% { opacity: 0; transform: scale(.65); }
  54% { opacity: var(--cruise-spray); transform: scale(1); }
  70% { opacity: calc(var(--cruise-spray) * .45); transform: translate(-7px, 3px) scale(1.12); }
  86% { opacity: 0; transform: translate(-14px, 8px) scale(1.18); }
}
@keyframes cruiseSurface { to { transform: translateX(-16px); } }
@keyframes cruiseFoam { to { stroke-dashoffset: 48; } }
@keyframes cruiseRain { to { transform: translate(-14px, 45px); } }
@media (prefers-reduced-motion: reduce) {
  .cruise-scene * { animation: none !important; transition: none !important; }
}