/* Shared Deep Sea palette for every server-rendered Fishdle surface. */

html.deep-sea-site {
  --ink: #fff8e9;
  --ink-soft: #b8cccf;
  --deep: #79e2dc;
  --deep-2: #43cdc9;
  --sea: #67d8d4;
  --aqua: #43cdc9;
  --foam: #0a3045;
  --mist: #061d36;
  --paper: #020d1e;
  --white: #06192d;
  --sand: #7c6844;
  --gold: #ffc34f;
  --coral: #ff8c79;
  --match: #60dbad;
  --close: #ffd166;
  --wrong: #9caebd;
  --unknown: #243e50;
  --line: #1d5263;
  --shadow-sm: 0 3px 14px #0004;
  --shadow-md: 0 18px 48px #0006;
  --shadow-lg: 0 32px 90px #0008;
  color-scheme: dark;
  background: #020d1e;
}

html.deep-sea-site body {
  background:
    radial-gradient(circle at 50% -10%, rgb(16 111 145 / 48%), transparent 44rem),
    radial-gradient(circle at 5% 55%, rgb(6 72 101 / 44%), transparent 34rem),
    linear-gradient(160deg, #020d1e, #04152b 50%, #021222);
  background-attachment: fixed;
}

html.deep-sea-site .site-header,
html.deep-sea-site .discord-header {
  border-bottom-color: rgb(121 226 220 / 22%);
  background: rgb(3 16 31 / 90%);
}

html.deep-sea-site .site-header .brand-mark,
html.deep-sea-site .discord-header .brand-mark {
  border: 1px solid rgb(121 226 220 / 24%);
  background: #061d36;
}

html.deep-sea-site .site-header .brand-mark circle,
html.deep-sea-site .discord-header .brand-mark circle {
  fill: #061d36;
}

html.deep-sea-site .mobile-nav {
  border-color: rgb(121 226 220 / 22%);
  background: rgb(3 16 31 / 95%);
}

html.deep-sea-site .surface,
html.deep-sea-site .mode-card,
html.deep-sea-site .archive-card,
html.deep-sea-site .game-card,
html.deep-sea-site .results-panel {
  border-color: rgb(121 226 220 / 20%);
  box-shadow: 0 18px 48px rgb(0 6 18 / 34%);
}

@media (prefers-reduced-motion: reduce) {
  html.deep-sea-site body {
    background-attachment: scroll;
  }
}