/* Harbor's press/release springs and droplet controls. */
:root {
  --sp-snappy: cubic-bezier(.2,.8,.2,1); --sp-snappy-ms: 180ms;
  --sp-bouncy: cubic-bezier(.2,.8,.2,1); --sp-bouncy-ms: 300ms;
  --sp-push: cubic-bezier(.2,.8,.2,1); --sp-push-ms: 240ms;
  --sp-gentle: cubic-bezier(.2,.8,.2,1); --sp-gentle-ms: 260ms;
}
.games-panel { transform-origin: 50% 0; }
#appearanceMenu { transform-origin: 100% 0; }
.top-link, #appearanceBtn, .btn-spring, .menu-game, .menu-resource, .game-card {
  transition: scale var(--sp-bouncy-ms) var(--sp-bouncy), background-color 180ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}
.btn-spring:active { transform: none; scale: .97; transition-duration: var(--sp-snappy-ms); transition-timing-function: var(--sp-snappy); }
.top-link:active, #appearanceBtn:active { scale: 1.06; transition-duration: var(--sp-snappy-ms); transition-timing-function: var(--sp-snappy); }
.menu-game:active, .menu-resource:active, .game-card:active { scale: .985; transition-duration: var(--sp-snappy-ms); transition-timing-function: var(--sp-snappy); }
.top-link svg { transition: transform var(--sp-bouncy-ms) var(--sp-bouncy); }
#glassToggleKnob { transition: transform var(--sp-bouncy-ms) var(--sp-bouncy), scale var(--sp-bouncy-ms) var(--sp-bouncy); }
#glassToggleBtn:active #glassToggleKnob { scale: 1.35 1.1; transition-duration: var(--sp-snappy-ms); }
.theme-segment { position: relative; isolation: isolate; }
.theme-segment::before {
  content: ''; position: absolute; inset: 4px auto 4px 0; width: var(--segment-width, 0);
  translate: var(--segment-x, 0) 0; border-radius: 999px;
  background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .12); z-index: -1;
}
.theme-segment button[aria-pressed="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}