/* Shared liquid-glass controls: translucent body, light rim and soft refraction. */
:root {
  --control-ink: #103e32;
  --control-fill: rgba(40, 151, 112, .23);
  --control-neutral: rgba(255,255,255,.5);
  --control-edge: rgba(255,255,255,.88);
  --control-reflection: rgba(255,255,255,.68);
}
[data-theme="dark"] {
  --control-ink: #ecfff7;
  --control-fill: rgba(66, 182, 139, .24);
  --control-neutral: rgba(204,255,235,.12);
  --control-edge: rgba(221,255,242,.48);
  --control-reflection: rgba(255,255,255,.27);
}
.btn, .header-link, .controls button, .legend button, .house-zoom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--control-ink);
  background: linear-gradient(160deg, var(--control-reflection), rgba(255,255,255,.03) 48%, rgba(255,255,255,.16)), var(--control-fill);
  border: 1px solid var(--control-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 1px 0 1px rgba(255,255,255,.35), inset 0 -2px 3px rgba(13,72,54,.15), 0 7px 18px rgba(26,72,56,.13);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  text-shadow: 0 1px 0 rgba(255,255,255,.16);
  text-decoration: none;
}
.btn::before, .header-link::before, .controls button::before, .house-zoom::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 1px 8% 49%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
}
.btn-secondary, .controls #previous, .house-zoom, .legend button {
  background: linear-gradient(155deg, var(--control-reflection), transparent 65%), var(--control-neutral);
}
.btn:hover, .btn-secondary:hover, .header-link:hover, .controls button:hover, .legend button:hover, .house-zoom:hover {
  color: var(--control-ink);
  background: linear-gradient(155deg, var(--control-reflection), rgba(255,255,255,.08) 60%), var(--control-fill);
  border-color: var(--control-edge);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 4px rgba(13,72,54,.12), 0 12px 26px rgba(26,72,56,.19);
  transform: translateY(-2px);
}
.btn:active, .header-link:active, .controls button:active, .house-zoom:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible, .header-link:focus-visible, .controls button:focus-visible, .legend button:focus-visible, .house-zoom:focus-visible { outline: 3px solid #148f78; outline-offset: 4px; }
.legend button { border-radius: 19px; }
.legend button[aria-current="true"] { background: rgba(59,164,123,.25); border-color: #258167; color: #133d30; box-shadow: inset 0 1px 1px #fff, 0 4px 14px #1a48381c; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn, .header-link, .controls button, .legend button, .house-zoom { background: #d0e9de; color: #103e32; }
}
@media (prefers-reduced-transparency: reduce) {
  .btn, .header-link, .controls button, .legend button, .house-zoom { background: #d0e9de !important; color: #103e32; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .header-link, .controls button, .legend button, .house-zoom { transition: none; transform: none !important; }
}