.idle-screensaver {
  --idle-water-height: 27px;
  --idle-bottom-occlusion: 0px;
  position: fixed;
  inset: 0;
  z-index: 3000;
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}

.idle-screensaver::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: max(var(--idle-bottom-occlusion, 0px), env(safe-area-inset-bottom));
  background: #000;
  z-index: 0;
  pointer-events: none;
}

.idle-screensaver,
.idle-screensaver * {
  pointer-events: none !important;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.idle-screensaver.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 0s linear 0s;
}

.idle-screensaver.is-preparing {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.idle-birds {
  position: absolute;
  inset: 28px 0 86px;
  overflow: hidden;
  z-index: 4;
}

.idle-tow-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.idle-tow-flight {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  will-change: transform;
}

.idle-tow-flight.reverse {
  flex-direction: row-reverse;
}

.idle-tow-bridle {
  position: relative;
  width: var(--idle-tow-bridle-w, clamp(26px, 2.4vw, 36px));
  height: var(--idle-tow-bridle-h, clamp(22px, 1.9vw, 30px));
  margin-left: var(--idle-tow-lead-gap, 1.5px);
  margin-right: 0;
  overflow: visible;
}

.idle-tow-flight.reverse .idle-tow-bridle {
  margin-left: 0;
  margin-right: var(--idle-tow-lead-gap, 1.5px);
}

.idle-tow-rope {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: linear-gradient(90deg, #5e4329, #3f2b18);
  border-radius: 99px;
  transform-origin: 0 50%;
}

.idle-tow-rope.top {
  transform: translateY(var(--idle-tow-top-anchor-y, -1px)) rotate(calc(-1 * var(--idle-tow-rope-angle, 24deg)));
}

.idle-tow-rope.bottom {
  transform: translateY(-1px) rotate(var(--idle-tow-rope-angle, 24deg));
}

.idle-tow-flight:not(.reverse) .idle-tow-rope {
  left: auto;
  right: 0;
  transform-origin: 100% 50%;
}

.idle-tow-flight:not(.reverse) .idle-tow-rope.top {
  transform: translateY(var(--idle-tow-top-anchor-y, -1px)) rotate(var(--idle-tow-rope-angle, 24deg));
}

.idle-tow-flight:not(.reverse) .idle-tow-rope.bottom {
  transform: translateY(-1px) rotate(calc(-1 * var(--idle-tow-rope-angle, 24deg)));
}

.idle-tow-flight.reverse .idle-tow-rope.top {
  transform: translateY(var(--idle-tow-top-anchor-y, -1px)) rotate(calc(-1 * var(--idle-tow-rope-angle, 24deg)));
}

.idle-tow-flight.reverse .idle-tow-rope.bottom {
  transform: translateY(-1px) rotate(var(--idle-tow-rope-angle, 24deg));
}

.idle-tow-clock {
  display: inline-block;
  min-width: 0;
  padding: 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(22px, 2.35vw, 30px);
  letter-spacing: 0.01em;
  color: rgba(243, 248, 255, 0.96);
  text-shadow: 0 0 10px rgba(170, 224, 255, 0.22), 0 0 2px rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  opacity: 0.98;
}

.idle-tow-plane {
  width: clamp(41px, 3.5vw, 61px);
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(16, 7, 8, 0.32));
}

.idle-tow-plane-art {
  transform: scaleX(var(--idle-plane-flip, 1));
  transform-origin: 50% 50%;
}

.idle-tow-plane svg {
  width: 100%;
  height: auto;
  display: block;
}

.idle-tow-propeller {
  transform-origin: 24px 92px;
  animation: idle-tow-prop-spin 260ms linear infinite;
}

.idle-sunrise {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.idle-stars-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity 320ms ease;
}

.idle-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.idle-clouds-back {
  z-index: 1;
}

.idle-clouds-front {
  z-index: 3;
}

.idle-clouds .cloud {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  width: 54px;
  height: 5px;
  background: #f7e7eb;
  opacity: 0;
  filter: blur(0.9px) saturate(0.98);
  transform-origin: left bottom;
  will-change: transform, opacity, filter;
}

.idle-clouds .cloud.is-cloud-visible {
  opacity: var(--idle-cloud-opacity, 0.96);
  filter: blur(0);
  transition: opacity 340ms cubic-bezier(0.2, 0.7, 0.28, 1), filter 340ms ease-out;
}

.idle-clouds .cloud.drift-right {
  animation: idle-cloud-drift-right var(--idle-cloud-duration, 140s) linear infinite;
  animation-delay: var(--idle-cloud-delay, 0s);
}

.idle-clouds .cloud.drift-left {
  animation: idle-cloud-drift-left var(--idle-cloud-duration, 140s) linear infinite;
  animation-delay: var(--idle-cloud-delay, 0s);
}

.idle-clouds .cloud.tiny {
  --idle-cloud-scale: 0.44;
}

.idle-clouds .cloud.small {
  --idle-cloud-scale: 0.84;
}

.idle-clouds .cloud.normal {
  --idle-cloud-scale: 1.64;
}

.idle-clouds .cloud.large {
  --idle-cloud-scale: 3.1;
}

.idle-clouds .cloud > div {
  box-shadow: inset -2px -3px 0 0 #f7e7eb;
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: -3px;
  bottom: 0;
  background: #fafbf0;
  z-index: 10;
}

.idle-clouds .cloud > div:nth-child(2) {
  transform: scale(1.6);
  margin: 0 0 4px 13px;
  z-index: 9;
}

.idle-clouds .cloud > div:nth-child(3) {
  transform: scale(2.4);
  margin: 0 0 9px 32px;
  z-index: 8;
}

.idle-clouds .cloud > div:nth-child(4) {
  transform: scale(1.3);
  margin: 0 0 2px 50px;
  z-index: 7;
}

.idle-sun,
.idle-moon {
  position: absolute;
  left: var(--idle-sky-x, var(--idle-sun-x, 50%));
  bottom: calc(var(--idle-water-height) + var(--idle-sky-rise-px, var(--idle-sun-rise-px, 0px)));
  width: clamp(36px, 6vw, 66px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 62%);
  z-index: 1;
  transition: none;
}

.idle-sun {
  opacity: var(--idle-sun-opacity, 1);
  filter: saturate(1.08);
}

.idle-sun::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 180%;
  height: 92%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(255, 209, 102, 0.22) 0%,
      rgba(255, 182, 82, 0.13) 34%,
      rgba(255, 125, 42, 0.05) 58%,
      rgba(255, 125, 42, 0) 100%
    );
  opacity: 0.54;
  pointer-events: none;
}

.idle-sun-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  isolation: isolate;
  transform-origin: 50% 50%;
  animation: idle-sun-pulse 4.8s ease-in-out infinite;
}

.idle-moon {
  opacity: var(--idle-moon-opacity, 0);
  filter: saturate(0.94);
  transition: opacity 320ms ease;
}

.idle-moon-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  isolation: isolate;
  animation: idle-moon-pulse 8.8s ease-in-out infinite;
}

.idle-moon-phase-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.idle-moon-shadow {
  fill: #7a7366;
}

.idle-moon-lit {
  fill: #f1dfae;
  filter: drop-shadow(0 0 4px rgba(236, 223, 184, 0.2));
}

.idle-moon-crater {
  fill: rgba(122, 114, 97, 0.28);
  stroke: rgba(245, 236, 212, 0.16);
  stroke-width: 0.75;
}

.idle-moon-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(253, 247, 230, 0.26) 0%, rgba(253, 247, 230, 0) 58%),
    radial-gradient(circle at 62% 66%, rgba(95, 90, 79, 0.22) 0%, rgba(95, 90, 79, 0) 64%);
  box-shadow:
    0 0 9px rgba(236, 224, 194, 0.22),
    0 0 20px rgba(210, 196, 165, 0.12),
    inset -1px -1px 4px rgba(78, 72, 61, 0.22);
  pointer-events: none;
}

.idle-sunrise.is-night .idle-sun {
  opacity: 0 !important;
}

.idle-sunrise.is-night .idle-sun-disc,
.idle-sunrise.is-night .idle-sun-rays,
.idle-sunrise.is-night .idle-sun-rays::before {
  animation-play-state: paused;
}

.idle-sunrise.is-day .idle-moon {
  opacity: 0 !important;
}

.idle-sunrise.is-day .idle-moon-disc {
  animation-play-state: paused;
}

.idle-sunrise.is-night .idle-moon {
  opacity: var(--idle-moon-opacity, 0.9);
}

.idle-sunrise.is-night .idle-stars-canvas {
  opacity: 1;
}

.idle-sun-rays {
  position: absolute;
  inset: -52%;
  border-radius: 50%;
  opacity: 0.74;
  background: repeating-conic-gradient(
    from 8deg,
    rgba(255, 226, 124, 0.92) 0deg 6deg,
    rgba(255, 209, 102, 0.52) 6deg 10deg,
    rgba(255, 209, 102, 0) 10deg 24deg
  );
  filter: blur(0.24px) drop-shadow(0 0 5px rgba(255, 209, 102, 0.56));
  animation: idle-sun-rays-spin 80s linear infinite;
}

.idle-sun-rays::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 236, 158, 0.45) 0%, rgba(255, 209, 102, 0.3) 46%, rgba(255, 148, 54, 0) 76%);
  animation: idle-sun-glow-breathe 6.6s ease-in-out infinite;
}

.idle-sun-core,
.idle-sun-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.idle-sun-core {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 252, 210, 0.92) 0%, rgba(255, 209, 102, 0.95) 28%, rgba(255, 186, 64, 0.94) 62%, rgba(255, 136, 35, 0.96) 100%);
  box-shadow:
    0 0 10px rgba(255, 220, 118, 0.65),
    0 0 22px rgba(255, 181, 65, 0.54),
    0 0 42px rgba(255, 129, 45, 0.26),
    inset -1px -1px 5px rgba(186, 77, 24, 0.26);
}

.idle-sun-core::before,
.idle-sun-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.idle-sun-core::before {
  inset: 16% 14% 22% 18%;
  background: radial-gradient(circle at 40% 34%, rgba(255, 255, 245, 0.48) 0%, rgba(255, 255, 245, 0) 72%);
  mix-blend-mode: screen;
  animation: idle-sun-glimmer 5.2s ease-in-out infinite;
}

.idle-sun-core::after {
  inset: 0;
  background: radial-gradient(circle at 58% 62%, rgba(255, 174, 94, 0.2) 0%, rgba(255, 174, 94, 0) 66%);
  mix-blend-mode: screen;
}

.idle-sun-overlay {
  background: radial-gradient(circle at 48% 50%, rgba(255, 155, 56, 0.5) 0%, rgba(255, 103, 20, 0.66) 75%, rgba(213, 67, 18, 0.6) 100%);
  transform: translateX(4px) scale(0.98);
  mix-blend-mode: normal;
  opacity: 0.5;
}

.idle-bird {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 16px;
  opacity: 0.72;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 3px rgba(3, 8, 15, 0.4));
}

.idle-bird svg {
  display: block;
  width: 100%;
  height: 100%;
}

.idle-water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--idle-water-height);
  z-index: 5;
  overflow: hidden;
  border-top: 0;
  box-shadow: none;
  background:
    linear-gradient(
      180deg,
      #4ea7cf 0%,
      #328dba 64%,
      #2d84ad 72%,
      #bfa266 82%,
      #dfc08d 100%
    );
}

.idle-water::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(94, 179, 214, 0.2) 0%,
      rgba(64, 152, 190, 0.14) 36%,
      rgba(42, 124, 155, 0.1) 72%,
      rgba(34, 104, 129, 0.14) 100%
    );
}

.idle-water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.96;
  z-index: 3;
}

.idle-palm-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 182px;
  padding: 0 max(8px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  overflow: visible;
  z-index: 6;
  mask-image: none;
}

.idle-flag-host {
  --idle-flag-x: 50%;
  --idle-flag-base-y: 38px;
  --idle-flag-pole-h: 112px;
  --idle-flag-pole-w: 2px;
  --idle-flag-midline-dot-size: 1px;
  --idle-flag-hoist-y: 70px;
  --idle-flag-grow-rise: 34px;
  --idle-flag-grow-scale-x: 0.82;
  --idle-flag-grow-scale-y: 0.18;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 196px;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

.idle-flag-rig {
  position: absolute;
  left: var(--idle-flag-x);
  bottom: var(--idle-flag-base-y);
  transform: translateX(-50%) translateY(var(--idle-flag-grow-rise)) scale(var(--idle-flag-grow-scale-x), var(--idle-flag-grow-scale-y));
  transform-origin: 50% 100%;
  width: 82px;
  height: calc(var(--idle-flag-pole-h) + 36px);
  opacity: 0;
  filter: blur(0.8px);
  transition: opacity 220ms ease, filter 220ms ease;
  will-change: transform, opacity, filter;
  overflow: visible;
}

.idle-flag-rig.is-visible {
  opacity: 1;
  filter: blur(0);
  animation: idle-flag-grow 880ms cubic-bezier(0.2, 0.82, 0.3, 1) forwards;
}

.idle-flag-pole {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--idle-flag-pole-w);
  height: var(--idle-flag-pole-h);
  margin-left: calc(var(--idle-flag-pole-w) * -0.5);
  border-radius: 1px;
  background: linear-gradient(180deg, #1c1c1d 0%, #0e0f10 100%);
  box-shadow: inset 0 0 0 0.35px rgba(255, 255, 255, 0.06), 0 0 1px rgba(0, 0, 0, 0.24);
}

.idle-flag-midline {
  position: absolute;
  left: 50%;
  bottom: var(--idle-flag-rsi-mid-y, 14px);
  width: var(--idle-flag-midline-dot-size);
  height: var(--idle-flag-midline-dot-size);
  margin-left: calc(var(--idle-flag-midline-dot-size) * -0.5);
  border-radius: 50%;
  background: rgba(172, 177, 186, 0.9);
  pointer-events: none;
  z-index: 2;
}

.idle-flag-finial {
  position: absolute;
  left: 50%;
  bottom: calc(var(--idle-flag-pole-h) - 1px);
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 31% 30%,
      rgba(255, 250, 215, 0.98) 0%,
      rgba(255, 229, 138, 0.94) 28%,
      rgba(244, 191, 71, 0.93) 58%,
      rgba(173, 123, 31, 0.96) 82%,
      rgba(107, 73, 18, 0.98) 100%
    );
  box-shadow:
    inset -0.55px -0.8px 1px rgba(92, 62, 16, 0.62),
    inset 0.45px 0.65px 0.85px rgba(255, 248, 197, 0.52),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.idle-flag-finial::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 16%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 248, 0.96) 0%,
      rgba(255, 246, 194, 0.78) 58%,
      rgba(255, 246, 194, 0) 100%
    );
  pointer-events: none;
}

.idle-flag-label {
  position: absolute;
  left: calc(50% - 8px);
  bottom: 2px;
  transform: translateX(-100%);
  padding: 1px 3px;
  font-family: 'Bungee Shade', ui-cursive;
  font-size: clamp(8px, 0.82vw, 9px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.idle-vix-label {
  position: absolute;
  bottom: var(--idle-vix-label-y, 2px);
  font-family: 'Bungee Shade', ui-cursive;
  font-size: clamp(8px, 0.82vw, 9px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(103, 77, 49, 0.62);
  text-shadow: 0 1px 0 rgba(245, 219, 178, 0.16);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  opacity: 0.74;
  transition: opacity 220ms ease;
}

.idle-vix-label.is-left {
  left: var(--idle-vix-label-inset, 18px);
  text-align: left;
}

.idle-vix-label.is-right {
  right: var(--idle-vix-label-inset, 18px);
  text-align: right;
}

.idle-vix-label.is-live {
  opacity: 0.88;
}

.idle-flag-hoist {
  position: absolute;
  left: calc(50% + 2px);
  bottom: var(--idle-flag-hoist-y);
  transform-origin: 0 50%;
  will-change: bottom;
  transition: bottom 220ms ease;
}

.idle-hi-flag {
  --idle-hi-flag-segments: 22;
  --idle-hi-flag-last-segment: 21;
  --idle-hi-flag-image: url("/src/assets/hawaii-kingdom-flag.png");
  --idle-hi-flag-pace: 1;
  --idle-hi-flag-body-duration: 6s;
  --idle-hi-flag-bit-duration: 4.5s;
  --idle-hi-flag-fabric-duration: 4.83s;
  position: relative;
  display: block;
  width: clamp(28px, 3.92vw, 42px);
  aspect-ratio: 3 / 2;
  border-radius: 1px 2px 2px 1px;
  overflow: hidden;
  background-color: #1d3b8b;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.16);
  transform-origin: 0 52%;
  transform-style: preserve-3d;
  will-change: transform, filter;
  animation: idle-hi-flag-body-wave calc(var(--idle-hi-flag-body-duration) * var(--idle-hi-flag-pace)) ease-in-out infinite;
}

.idle-hi-flag-bit {
  position: absolute;
  left: calc(var(--idle-hi-flag-bit-index, 0) * 100% / var(--idle-hi-flag-segments));
  top: 0;
  width: calc((100% / var(--idle-hi-flag-segments)) + 0.9px);
  height: 100%;
  transform: translateX(-0.45px);
  background-image: var(--idle-hi-flag-image);
  background-repeat: no-repeat;
  background-size: calc((var(--idle-hi-flag-segments) * 100%) + 2px) 100%;
  background-position: calc(var(--idle-hi-flag-bit-index, 0) * 100% / var(--idle-hi-flag-last-segment)) 50%;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: idle-hi-flag-bit-wave calc(var(--idle-hi-flag-bit-duration) * var(--idle-hi-flag-pace)) ease-in-out infinite;
  animation-delay: calc(var(--idle-hi-flag-bit-index, 0) * 39ms * var(--idle-hi-flag-pace));
}

.idle-hi-flag::before,
.idle-hi-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.idle-hi-flag::before {
  background:
    linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, 0.08) 64%,
      rgba(0, 0, 0, 0.16) 100%
    );
  mix-blend-mode: soft-light;
  animation: idle-hi-flag-fabric-wave calc(var(--idle-hi-flag-fabric-duration) * var(--idle-hi-flag-pace)) ease-in-out infinite;
}

.idle-hi-flag::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08));
  opacity: 0.42;
}

.idle-flag-crate {
  position: absolute;
  left: calc(50% + 12px);
  bottom: 0;
  width: 9px;
  height: 7px;
  border-radius: 1px;
  background: linear-gradient(180deg, #8f5e33 0%, #734723 100%);
  border: 1px solid rgba(56, 29, 11, 0.56);
  box-shadow: inset 0 0 0 1px rgba(222, 173, 116, 0.18);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease;
}

.idle-flag-crate::before,
.idle-flag-crate::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  height: 1px;
  background: rgba(47, 26, 9, 0.45);
}

.idle-flag-crate::before {
  top: 2px;
}

.idle-flag-crate::after {
  bottom: 2px;
}

.idle-flag-rig.is-empty .idle-hi-flag {
  opacity: 0;
  visibility: hidden;
}

.idle-flag-rig.is-flag .idle-hi-flag {
  opacity: 1;
  visibility: visible;
}

.idle-flag-rig.is-empty .idle-flag-crate {
  opacity: 1;
}

.idle-flag-rig.is-flag .idle-flag-crate {
  opacity: 0;
}

.idle-palm-cluster {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.55vw, 8px);
}

.idle-palm-cluster.left {
  left: max(4px, env(safe-area-inset-left));
}

.idle-palm-cluster.right {
  right: max(4px, env(safe-area-inset-right));
  flex-direction: row-reverse;
}

.idle-palm {
  flex: 0 0 auto;
  width: min(84px, 6.4vw);
  transform-origin: 50% 100%;
  animation: idle-palm-sway var(--sway-duration, 6.4s) var(--sway-ease, ease-in-out) var(--sway-delay, 0s) infinite alternate;
  will-change: transform;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  overflow: visible;
}

.idle-palm-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 228 / 360;
  opacity: 0;
  transform: translateY(44px) scale(0.72);
  transform-origin: 50% 100%;
  animation: idle-palm-grow 880ms cubic-bezier(0.2, 0.82, 0.3, 1) forwards;
  animation-delay: var(--grow-delay, 0ms);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
  overflow: visible;
}

.idle-vix-coconut-indicator {
  position: absolute;
  top: 16%;
  width: var(--idle-vix-coconut-width, 22px);
  height: 12px;
  pointer-events: none;
  opacity: 0.96;
  filter: drop-shadow(0 0.6px 1.2px rgba(0, 0, 0, 0.2));
}

.idle-vix-coconut-indicator.is-left {
  left: 26%;
}

.idle-vix-coconut-indicator.is-right {
  right: 28%;
}

.idle-vix-coconut-indicator.is-stale {
  opacity: 0.94;
}

.idle-vix-coconut-indicator.is-live {
  opacity: 0.98;
}

.idle-vix-coconut-indicator svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.idle-palm svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

@keyframes idle-palm-grow {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(var(--palm-scale, 1));
  }
}

@keyframes idle-flag-grow {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--idle-flag-grow-rise)) scale(var(--idle-flag-grow-scale-x), var(--idle-flag-grow-scale-y));
    filter: blur(0.8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1, 1);
    filter: blur(0);
  }
}

@keyframes idle-palm-sway {
  from { transform: rotate(calc(var(--sway-bias, 0deg) - var(--sway-angle, 2.25deg))); }
  to { transform: rotate(calc(var(--sway-bias, 0deg) + var(--sway-angle, 2.25deg))); }
}

@keyframes idle-hi-flag-body-wave {
  from {
    transform: perspective(320px) rotateY(7.2deg) skewY(0.6deg) scaleY(1.01);
  }
  to {
    transform: perspective(320px) rotateY(-11.5deg) skewY(-1.2deg) scaleY(0.992);
  }
}

@keyframes idle-hi-flag-bit-wave {
  from {
    transform: translateX(-0.45px) translateY(0.45px) skewY(2deg) rotateY(5deg) scaleY(1.01);
    opacity: 0.99;
  }
  to {
    transform: translateX(-0.45px) translateY(-0.7px) skewY(-6.8deg) rotateY(-8deg) scaleY(0.986);
    opacity: 0.9;
  }
}

@keyframes idle-hi-flag-fabric-wave {
  from {
    transform: translateX(-6%) scaleX(1.06);
    opacity: 0.85;
  }
  to {
    transform: translateX(7%) scaleX(0.94);
    opacity: 0.44;
  }
}

@keyframes idle-sun-rays-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes idle-sun-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  18% {
    transform: scale(1.018);
    filter: brightness(1.03);
  }
  34% {
    transform: scale(0.996);
    filter: brightness(0.99);
  }
  50% {
    transform: scale(1.032);
    filter: brightness(1.05);
  }
  72% {
    transform: scale(1.008);
    filter: brightness(1.01);
  }
}

@keyframes idle-moon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.012);
    filter: brightness(1.03);
  }
  64% {
    transform: scale(0.996);
    filter: brightness(0.99);
  }
}

@keyframes idle-sun-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.06); }
}

@keyframes idle-sun-glimmer {
  0%, 100% { opacity: 0.38; transform: translateX(0); }
  50% { opacity: 0.62; transform: translateX(1px); }
}

@keyframes idle-cloud-drift-right {
  from {
    transform: translate3d(var(--idle-cloud-start-x, -160px), var(--idle-cloud-y, 220px), 0) scale(var(--idle-cloud-scale, 0.82));
  }
  to {
    transform: translate3d(calc(var(--idle-cloud-start-x, -160px) + var(--idle-cloud-travel-x, 640px)), var(--idle-cloud-y, 220px), 0) scale(var(--idle-cloud-scale, 0.82));
  }
}

@keyframes idle-cloud-drift-left {
  from {
    transform: translate3d(var(--idle-cloud-start-x, 640px), var(--idle-cloud-y, 220px), 0) scale(var(--idle-cloud-scale, 0.82));
  }
  to {
    transform: translate3d(calc(var(--idle-cloud-start-x, 640px) - var(--idle-cloud-travel-x, 640px)), var(--idle-cloud-y, 220px), 0) scale(var(--idle-cloud-scale, 0.82));
  }
}

@keyframes idle-tow-prop-spin {
  0% {
    transform: scaleX(1);
    opacity: 0.92;
    filter: blur(0);
  }
  50% {
    transform: scaleX(0.24);
    opacity: 0.48;
    filter: blur(0.35px);
  }
  100% {
    transform: scaleX(1);
    opacity: 0.92;
    filter: blur(0);
  }
}

@media (max-width: 900px) {
  .idle-screensaver {
    --idle-water-height: 22px;
  }
  .idle-birds {
    inset: 24px 0 72px;
  }
  .idle-palm-row {
    height: 148px;
  }
  .idle-sun,
  .idle-moon {
    width: clamp(34px, 11vw, 60px);
  }
  .idle-tow-clock {
    font-size: clamp(18px, 5.5vw, 24px);
  }
  .idle-tow-plane {
    width: clamp(37px, 10vw, 56px);
  }
  .idle-tow-bridle {
    width: var(--idle-tow-bridle-w, clamp(18px, 5.2vw, 24px));
    height: var(--idle-tow-bridle-h, clamp(18px, 4.9vw, 24px));
  }
  .idle-palm {
    width: min(74px, 22vw);
  }
  .idle-flag-host {
    height: 164px;
    --idle-flag-pole-h: 92px;
    --idle-flag-grow-rise: 28px;
    --idle-flag-grow-scale-x: 0.84;
    --idle-flag-grow-scale-y: 0.2;
  }
  .idle-flag-rig {
    width: 70px;
  }
  .idle-flag-label {
    left: calc(50% - 7px);
    font-size: 8px;
  }
  .idle-flag-crate {
    width: 8px;
    height: 6px;
    left: calc(50% + 10px);
  }
}