/* 海岸骑行 V5：日夜独立绘制，所有位移共用 ride.js 的时间轴。 */
.coast-scene {
  --island-far: #a9bdb0;
  --island-near: #7f9f8d;
  --sand: #e7d9b9;
  --road: #f5ecd7;
  --road-edge: #d8c7a7;
  --grass: #78987b;
  --pebble: #bcae8b;
  --fence: #96a58b;
  --house: #e9e7cb;
  --roof: #b18d72;
  --window: #879d87;
  --tower: #f3efd8;
  --tower-band: #b48e71;
  --wave: #edf3df;
  --wake: #e4edd9;
  --hull: #718c79;
  --gull: #648779;
  background: #dcece5;
  padding-top: 0;
  border-radius: 46% 46% 7px 7px;
}
.coast-scene .scene {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-top: 0;
  filter: none;
}
.coast-scene .scene-label {
  top: 33px;
  letter-spacing: 2px;
  color: #527868;
  font-size: 8px;
  pointer-events: none;
}
.coast-scene .scene-label span { color: #718b71; font-size: 10px; }
.coast-scene .scene-foot {
  background: #eeeddf;
  padding: 12px 15px;
  min-height: 55px;
  gap: 8px;
  font-size: 10px;
  color: #536b58;
}
.coast-scene .scene-foot #ride-caption { font-size: 10px; white-space: nowrap; }
.ride-controls { display: flex; gap: 6px; align-items: center; }
.coast-scene .scene-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  font-size: 10px;
  border: 1px solid #b7c3aa;
  background: #f8f5e8a6;
  color: #536b58;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.coast-scene .scene-foot button:hover { background: #dae4d0; }
.coast-scene .scene-foot #ride-speed[aria-pressed=true] { background: #dce5d2; border-color: #7b957a; }
.coast-scene .scene-foot button:focus-visible { outline-offset: 2px; }
.coast-scene .wheel { animation: none; transform-box: fill-box; transform-origin: center; }
.coast-scene .bird { animation: none; }
.coast-scene .scene-day-sun[hidden], .coast-scene .scene-night-moon[hidden] { display: none !important; }
.coast-scene .scene-day-sun:not([hidden]), .coast-scene .scene-night-moon:not([hidden]) { display: inline; }
.coast-clouds { opacity: .8; }
.island-far { fill: var(--island-far); }
.island-near { fill: var(--island-near); }
.tower-wall { fill: var(--tower); }
.tower-band { fill: var(--tower-band); }
.tower-roof { fill: var(--roof); }
.tower-window { fill: var(--window); }
.tower-door { fill: #789582; }
.cottage-wall { fill: var(--house); }
.cottage-roof { fill: var(--roof); }
.cottage-window { fill: var(--window); }
.cottage-door { fill: #8ca28c; }
.sea-ripples { stroke: var(--wave); stroke-width: 2; opacity: .65; }
.water-reflection { stroke: #ffe8b4; opacity: .42; }
.boat-hull { fill: var(--hull); }
.boat-wake { stroke: var(--wake); stroke-width: 2; }
.sand { fill: var(--sand); }
.shore-foam { stroke: var(--wave); stroke-width: 3; opacity: .9; }
.coast-road { fill: var(--road); }
.road-border { stroke: var(--road-edge); }
#ride-road-marks { stroke: #bfac83; opacity: .48; }
.coast-fence { stroke: var(--fence); }
.wayfinding { fill: #d0dbc0; stroke: #9ba98c; stroke-width: 1; }
.sign-type { fill: #55715e; font: 12px "Microsoft YaHei", sans-serif; letter-spacing: 1px; }
.foreground-grass { fill: var(--grass); }
.pebbles { fill: var(--pebble); }
.coast-gulls { stroke: var(--gull); }
.lighthouse-beam { opacity: 0; }
.street-lantern { fill: #e2e4bc; stroke: #718978; stroke-width: 2; }
.riding-breeze { opacity: .45; }
.coast-scene[data-time=night] {
  --island-far: #3b6668;
  --island-near: #365755;
  --sand: #8c9986;
  --road: #b1b4a0;
  --road-edge: #7a8c7e;
  --grass: #476f62;
  --pebble: #708878;
  --fence: #6b8c7b;
  --house: #aab69e;
  --roof: #73867a;
  --window: #f4d597;
  --tower: #c1c9af;
  --tower-band: #7f9588;
  --wave: #a2c8b5;
  --wake: #a9c5ad;
  --hull: #436c60;
  --gull: #9fbeb0;
  background: #1d3849;
  border-color: #57766f;
}
.coast-scene[data-time=night] .sky-top { stop-color: #1d3849; }
.coast-scene[data-time=night] .sky-bottom { stop-color: #517a7b; }
.coast-scene[data-time=night] .water-top { stop-color: #3e7b7d; }
.coast-scene[data-time=night] .water-bottom { stop-color: #70998c; }
.coast-scene[data-time=night] .coast-clouds { opacity: .2; }
.coast-scene[data-time=night] .scene-label { color: #c4d5c2; }
.coast-scene[data-time=night] .scene-label span { color: #a6c2b0; }
.coast-scene[data-time=night] .scene { filter: none; }
.coast-scene[data-time=night] .scene-foot { background: #304b49; color: #c9d8c6; }
.coast-scene[data-time=night] .scene-foot button { border-color: #6d8a7a; background: #3b5850; color: #dae3cd; }
.coast-scene[data-time=night] .scene-foot button:hover,
.coast-scene[data-time=night] .scene-foot #ride-speed[aria-pressed=true] { background: #536d58; }
.coast-scene[data-time=night] .water-reflection { stroke: #efe5b9; opacity: .45; }
.coast-scene[data-time=night] .lighthouse-beam { opacity: .16; }
.coast-scene[data-time=day] .lighthouse-beam { display: none; }
.coast-scene[data-time=night] .street-lantern { fill: #f4d694; }
.coast-scene[data-time=night] .wayfinding { fill: #6b8875; stroke: #8fa48a; }
.coast-scene[data-time=night] .sign-type { fill: #e2e4c8; }
.coast-scene[data-time=night] #ride-road-marks { stroke: #d5d7b6; }
.coast-scene[data-time=night] .scene-night-moon { filter: drop-shadow(0 0 9px #eee0a52b); }
.coast-scene.ride-paused .scene * { animation-play-state: paused !important; }
#pelican { outline: none; }
#pelican:focus-visible { filter: drop-shadow(0 0 4px #b9785999); }
@media(max-width:800px) and (min-width:581px) {
  .coast-scene .scene-foot { flex-wrap: wrap; justify-content: center; padding: 9px 10px; }
  .coast-scene .scene-foot #ride-caption { width: 100%; text-align: center; font-size: 9px; }
}
@media(max-width:580px) {
  .coast-scene .scene-label { top: 24px; font-size: 7px; letter-spacing: 1.6px; }
  .coast-scene .scene-label span { font-size: 9px; }
  .coast-scene .scene-foot { padding: 10px 11px; }
  .coast-scene .scene-foot #ride-caption { font-size: 9px; }
  .coast-scene .scene-foot button { min-height: 34px; padding: 4px 8px; }
}
@media(max-width:360px) {
  .coast-scene .scene-foot { flex-wrap: wrap; justify-content: center; }
  .coast-scene .scene-foot #ride-caption { width: 100%; text-align: center; }
}
.coast-scene .scene-label { width: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; background: #e4eee248; border-radius: 8px; }
.coast-scene[data-time=night] .scene-label { background: #25455565; }
.coast-scene[data-time=night] [data-ride-layer=clouds] { opacity: .4; }
.theme-controls { display: flex; align-items: center; gap: 12px; }
.theme-controls .text-button { font-size: 10px; min-height: 28px; }
@media(max-width:580px) {
  .theme-controls { margin-left: auto; gap: 10px; }
  header .theme-controls .round { margin-left: 0; }
  .coast-scene .scene-label { padding: 3px 10px; }
}
.windmill-wall { fill: var(--tower); }
.coast-fireflies { display: none; }
.coast-scene[data-time=night] .coast-fireflies { display: inline; }
.coast-scene[data-time=night] #coast-windmill-sails { fill: #9fb09a; stroke: #748e7b; }
.coast-scene .scene-foot #ride-caption { max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
@media(max-width:800px) and (min-width:581px) {
  .coast-scene .scene-foot #ride-caption { max-width: 100%; }
}
@media(max-width:360px) {
  .coast-scene .scene-foot #ride-caption { max-width: 100%; }
}
.lighthouse-beam { fill: url(#coast-beam); }