:root {
  --color-primary: #00245e;
  --color-tertiary: #22c993;
  --color-text: #ffffff;
  --color-text-muted: rgb(255 255 255 / 0.55);
  --glass-bg: rgb(255 255 255 / 0.06);
  --glass-bg-active: rgb(255 255 255 / 0.16);
  --glass-border: rgb(255 255 255 / 0.12);
  --font-family-primary: "Inter", sans-serif;
  --gutter: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-primary);
  color: var(--color-text);
  font-family: var(--font-family-primary);
  -webkit-font-smoothing: antialiased;
}

.water {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: url("assets/cursor.svg") 16 16, auto;
}

.logo {
  position: fixed;
  top: calc(var(--gutter) + env(safe-area-inset-top));
  left: calc(var(--gutter) + env(safe-area-inset-left));
  display: block;
  width: 160px;
}

.logo__image {
  display: block;
  width: 100%;
  height: auto;
}

.bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 3px 4px 3px 3px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-text-muted);
  font: 400 11px/1 var(--font-family-primary);
  white-space: nowrap;
}

.bar__modes {
  display: flex;
  gap: 2px;
}

.bar__mode,
.bar__sound,
.bar__fullscreen {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.bar__mode:hover,
.bar__sound:hover,
.bar__fullscreen:hover {
  color: var(--color-text);
}

.bar__mode[aria-pressed="true"] {
  background: var(--glass-bg-active);
  color: var(--color-text);
}

.bar__stats {
  display: flex;
  gap: 10px;
  margin: 0;
}

.bar__stat {
  display: flex;
  gap: 4px;
}

.bar__stat dt,
.bar__stat dd {
  margin: 0;
}

.bar__stat dd {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.bar__sound {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bar__sound-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.35);
  transition: background-color 0.2s;
}

.bar__sound[aria-pressed="true"] .bar__sound-dot {
  background: var(--color-tertiary);
}

.bar__fullscreen {
  display: inline-flex;
  align-items: center;
  margin-left: -8px;
}

.bar__fullscreen[hidden],
.bar__fullscreen-exit,
.bar__fullscreen[aria-pressed="true"] .bar__fullscreen-enter {
  display: none;
}

.bar__fullscreen[aria-pressed="true"] .bar__fullscreen-exit {
  display: block;
}

.bar__mode:focus-visible,
.bar__sound:focus-visible,
.bar__fullscreen:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 1px;
}

.logo:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }

  .logo {
    width: 120px;
  }

  .bar {
    gap: 6px;
    font-size: 10px;
  }

  .bar__mode,
  .bar__sound,
  .bar__fullscreen {
    padding: 5px 7px;
  }

  .bar__fullscreen {
    margin-left: -4px;
  }

  .bar__stats {
    gap: 6px;
  }

  .bar__stat {
    gap: 3px;
  }
}

@media (max-width: 360px) {
  .bar {
    gap: 4px;
  }

  .bar__mode,
  .bar__sound,
  .bar__fullscreen {
    padding: 5px;
  }

  .bar__fullscreen {
    margin-left: -2px;
  }
}