/* Restrained three-accent brand theme derived from the current profile picture. */
:root {
  --abyss: #0b1b2e;
  --deep: #10263d;
  --deep-2: #163a59;
  --ocean: #157da8;
  --panel: #163a59;
  --panel-soft: rgba(16, 38, 61, 0.9);
  --ink: #f4f7fb;
  --muted: #c4ceda;
  --foam: #55b9e8;
  --kelp: #88c98d;
  --lime: #88c98d;
  --sun: #f28a3f;
  --coral: #f28a3f;
  --violet: #55b9e8;
  --line: rgba(85, 185, 232, 0.2);
  --line-strong: rgba(85, 185, 232, 0.46);
  --shadow: 8px 8px 0 rgba(4, 17, 30, 0.72), 0 26px 60px rgba(2, 10, 20, 0.3);
  color-scheme: dark;
}

body {
  background:
    linear-gradient(rgba(214, 233, 245, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 233, 245, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 82% 0%, rgba(85, 185, 232, 0.14), transparent 30rem),
    linear-gradient(180deg, #102b46 0%, #0d2238 44%, #081726 100%);
  background-attachment: fixed;
  background-size: 40px 40px, 40px 40px, auto, auto;
}

body::after {
  opacity: 0.07;
  mix-blend-mode: overlay;
}

.sea-sky::before { display: none; }

.sea-sky i {
  border-color: rgba(85, 185, 232, 0.3);
  box-shadow: none;
}

a { color: #73c7ee; }
a:hover { color: var(--ink); }
:focus-visible { outline-color: var(--foam); }

.scroll-meter span { background: var(--foam); }

.site-header {
  min-height: 80px;
  border: 1px solid rgba(85, 185, 232, 0.24);
  background: rgba(9, 26, 43, 0.9);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.78), 0 18px 44px rgba(2, 10, 20, 0.25);
  backdrop-filter: blur(18px) saturate(1.08);
}

.has-scrolled .site-header {
  border-color: rgba(85, 185, 232, 0.34);
  background: rgba(9, 26, 43, 0.97);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.86), 0 18px 44px rgba(2, 10, 20, 0.38);
}

.brand {
  gap: 13px;
  line-height: 0.88;
  letter-spacing: 0.015em;
}

.brand-mark {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 2px solid rgba(85, 185, 232, 0.55);
  color: transparent;
  background: url("/static/profile-picture.png?v=1") center / cover no-repeat;
  box-shadow: none;
  font-size: 0;
  image-rendering: pixelated;
  text-indent: -999px;
}

.footer-brand .brand-mark {
  width: 38px;
  height: 38px;
  box-shadow: none;
}

.site-header nav a {
  color: #c6d0dc;
  border-bottom: 3px solid transparent;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--foam);
  background: rgba(85, 185, 232, 0.09);
}

.site-footer { border-top-color: rgba(85, 185, 232, 0.18); }
.footer-base { border-top-color: rgba(85, 185, 232, 0.12); }
.site-footer a:hover { color: var(--ink); }

h1 em,
h2 em { color: var(--foam); }

.eyebrow,
.section-kicker { color: #73c7ee; }

.section-kicker {
  color: var(--ink);
  border: 1px solid rgba(85, 185, 232, 0.45);
  background: rgba(85, 185, 232, 0.12);
  box-shadow: none;
}

code {
  color: #8dd3f2;
  border-color: rgba(85, 185, 232, 0.28);
  background: rgba(7, 24, 39, 0.78);
}

.live-dot {
  background: var(--foam);
  box-shadow: 0 0 0 5px rgba(85, 185, 232, 0.1);
}

.button {
  border-color: #c76627;
  color: #101820;
  background: var(--coral);
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.86);
}

.button:hover {
  color: #101820;
  background: #f5a166;
  box-shadow: 2px 2px 0 rgba(4, 17, 30, 0.86);
}

.button.ghost {
  color: #85cff1;
  border-color: rgba(85, 185, 232, 0.72);
  background: rgba(9, 26, 43, 0.35);
}

.button.ghost:hover {
  color: #071826;
  background: var(--foam);
}

.button.ink {
  color: var(--ink);
  border-color: #071826;
  background: #071826;
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.56);
}

.hero-search > div {
  border: 1px solid rgba(85, 185, 232, 0.42);
  background: rgba(7, 24, 39, 0.76);
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.62);
}

.hero-search button {
  color: #101820;
  background: var(--coral);
}

.pixel-window {
  border: 2px solid rgba(85, 185, 232, 0.72);
  background: #0a2035;
  box-shadow: 10px 10px 0 rgba(4, 17, 30, 0.8), 0 36px 80px rgba(2, 10, 20, 0.4);
}

.window-bar,
.window-status { color: #b8c7d5; }
.window-status { color: #78c9ee; }
.window-bar span,
.window-bar span:nth-child(2),
.window-bar span:nth-child(3) { background: #557388; }
.window-bar span:nth-child(3) { background: var(--foam); }

.aquarium {
  background: linear-gradient(#4db8eb 0%, #199ed7 24%, #147fad 57%, #105b83 82%, #103650 100%);
}

.aquarium::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, 0.035) 8px),
    linear-gradient(115deg, rgba(232, 246, 252, 0.17), transparent 25% 72%, rgba(85, 185, 232, 0.08));
}

.depth-tag {
  color: #0b1b2e;
  background: #d9eef7;
  box-shadow: 3px 3px 0 rgba(4, 17, 30, 0.7);
}

.sand { background: #bda98f; }
.plant { background: #4d8f72; box-shadow: 18px 22px 0 #315e52, -16px 38px 0 #6da983; }
.bubble { border-color: rgba(232, 246, 252, 0.62); }

.live-stats {
  border-color: rgba(85, 185, 232, 0.2);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.6);
}

.live-stats article {
  border-color: rgba(85, 185, 232, 0.16);
  background: linear-gradient(160deg, rgba(22, 58, 89, 0.9), rgba(14, 34, 55, 0.96));
}

.live-stats strong { color: #81ccef; }

.feature,
.feature-profile,
.feature-wiki,
.feature-rank {
  --feature-accent: var(--foam);
  --feature-tint: rgba(85, 185, 232, 0.12);
  border-color: color-mix(in srgb, var(--feature-accent) 26%, transparent);
  background: linear-gradient(145deg, var(--feature-tint), rgba(14, 34, 55, 0.98) 72%);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.58);
}

.feature-wiki {
  --feature-accent: var(--kelp);
  --feature-tint: rgba(136, 201, 141, 0.12);
}

.feature-rank {
  --feature-accent: var(--coral);
  --feature-tint: rgba(242, 138, 63, 0.11);
}

.feature .eyebrow,
.feature b { color: var(--feature-accent); }

.feature:hover {
  border-color: color-mix(in srgb, var(--feature-accent) 68%, transparent);
  box-shadow: 9px 9px 0 rgba(4, 17, 30, 0.68);
}

.feature-no { color: rgba(196, 206, 218, 0.28); }

.pixel-stack span,
.pixel-stack span:nth-child(2),
.pixel-stack span:nth-child(3) {
  color: var(--ink);
  background: #35694f;
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.72);
}

.pixel-stack span:nth-child(2) { background: #477b5e; }
.pixel-stack span:nth-child(3) { background: #5b906e; }

.mini-podium span,
.mini-podium span:nth-child(1),
.mini-podium span:nth-child(2),
.mini-podium span:nth-child(3) {
  color: #0b1b2e;
  background: #f0a56f;
}

.mini-podium span:nth-child(1),
.mini-podium span:nth-child(3) { background: #b76d3e; }

.final-cta {
  color: var(--ink);
  background: linear-gradient(135deg, #18597e, #123e5d);
  box-shadow: 11px 11px 0 rgba(4, 17, 30, 0.78);
}

.final-cta h2 { color: var(--ink); }
.final-cta .eyebrow { color: #9ed8f2; }

:is(.cards article, .stats article, .loadout, .board, .empty) {
  border-color: rgba(85, 185, 232, 0.2);
  background: linear-gradient(145deg, rgba(22, 58, 89, 0.9), rgba(14, 34, 55, 0.98));
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.58);
}

.wiki-card {
  --card-accent: var(--foam);
  --card-glow: rgba(85, 185, 232, 0.1);
  background: linear-gradient(145deg, var(--card-glow), rgba(14, 34, 55, 0.98) 68%);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.58);
}

.wiki-card-start { --card-accent: #8af1d2; --card-glow: rgba(138, 241, 210, 0.18); }
.wiki-card-commands { --card-accent: #ffd166; --card-glow: rgba(255, 209, 102, 0.16); }
.wiki-card-fishing { --card-accent: #76c9ff; --card-glow: rgba(67, 144, 190, 0.2); }
.wiki-card-gear { --card-accent: #ff796c; --card-glow: rgba(255, 121, 108, 0.17); }
.wiki-card-economy { --card-accent: #c9f46b; --card-glow: rgba(201, 244, 107, 0.15); }
.wiki-card-collection { --card-accent: #b897ff; --card-glow: rgba(184, 151, 255, 0.19); }
.wiki-card-achievements { --card-accent: #ff9dc9; --card-glow: rgba(255, 111, 174, 0.16); }
.wiki-card-strategy { --card-accent: #7ee7cb; --card-glow: rgba(75, 194, 161, 0.17); }

.wiki-card-art { background: rgba(7, 24, 39, 0.82); }

.callout,
.legal-verdict {
  border-color: rgba(85, 185, 232, 0.42);
  background: rgba(85, 185, 232, 0.07);
  box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.58);
}

.legal-verdict > span {
  color: #0b1b2e;
  background: var(--foam);
}

:is(.wiki-layout aside, .leaderboard-layout aside, .legal-nav) {
  border-color: rgba(85, 185, 232, 0.18);
  background: rgba(7, 24, 39, 0.88);
  box-shadow: 6px 6px 0 rgba(4, 17, 30, 0.52);
}

:is(.wiki-grid article, .starter-kit article, .gear-card, .command-groups section, .strategy-grid article, .catalog-card, .catalog-loadouts article, .equipment-chip, .legal-details, .data-grid article, .privacy-tech > div, .source-note) {
  border-color: rgba(85, 185, 232, 0.18);
  background: rgba(22, 58, 89, 0.58);
}

:is(.wiki-grid, .starter-kit, .command-groups, .strategy-grid, .data-grid) > :nth-child(3n + 2) {
  border-color: rgba(136, 201, 141, 0.2);
  background: rgba(49, 89, 71, 0.36);
}

:is(.wiki-grid, .starter-kit, .command-groups, .strategy-grid, .data-grid) > :nth-child(3n) {
  border-color: rgba(242, 138, 63, 0.19);
  background: rgba(91, 55, 39, 0.3);
}

.achievement-card {
  border-color: rgba(85, 185, 232, 0.18);
  background: linear-gradient(145deg, rgba(22, 58, 89, 0.78), rgba(14, 34, 55, 0.97));
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.54);
}

.achievement-personal,
.loadout-items article { background: rgba(7, 24, 39, 0.58); }

.achievement-card.is-unlocked {
  border-color: rgba(85, 185, 232, 0.48);
  background: linear-gradient(145deg, rgba(24, 71, 101, 0.9), rgba(14, 34, 55, 0.98));
}

.achievement-profile-banner {
  border-color: rgba(85, 185, 232, 0.42);
  background: rgba(85, 185, 232, 0.07);
  box-shadow: 5px 5px 0 rgba(4, 17, 30, 0.5);
}

.gear-card-meta span,
.gear-card-meta .gear-price {
  color: var(--ink);
  border-color: rgba(85, 185, 232, 0.24);
  background: #24445d;
}

.catalog-tools {
  border-color: rgba(85, 185, 232, 0.24);
  background: rgba(7, 24, 39, 0.96);
  box-shadow: 6px 6px 0 rgba(4, 17, 30, 0.62);
}

.catalog-card:hover,
.catalog-card:focus-visible { background: rgba(85, 185, 232, 0.12); }

.catalog-loadouts article[data-role="high_volume"] {
  border-top-color: var(--foam);
  background: rgba(34, 78, 105, 0.48);
}

.catalog-loadouts article[data-role="high_quality"] {
  border-top-color: var(--kelp);
  background: rgba(49, 89, 71, 0.42);
}

.catalog-loadouts article[data-role="big_size"] {
  border-top-color: var(--coral);
  background: rgba(91, 55, 39, 0.38);
}

.catalog-dialog {
  border-color: rgba(85, 185, 232, 0.62);
  background: linear-gradient(145deg, #163a59, #10263d);
  box-shadow: 11px 11px 0 rgba(4, 17, 30, 0.78);
}

.catalog-dialog::backdrop { background: rgba(3, 13, 23, 0.88); }

input,
select {
  color: var(--ink);
  border-color: rgba(85, 185, 232, 0.34);
  background-color: rgba(7, 24, 39, 0.9);
}

select {
  color-scheme: dark;
  background-color: #10263d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2355b9e8' d='M2 4h2v2h2v2h4V6h2V4h2v4h-2v2h-2v2H6v-2H4V8H2z'/%3E%3C/svg%3E"), linear-gradient(to left, rgba(85, 185, 232, 0.08) 42px, transparent 42px);
  box-shadow: inset 0 -3px 0 rgba(4, 17, 30, 0.48), 3px 3px 0 rgba(4, 17, 30, 0.68);
}

select:hover,
select:focus-visible { background-color: #163a59; }
select:disabled { color: #8797a7; background-color: #10263d; }
select option { background-color: #10263d; }

.my-profile-badge,
.board-my-profile {
  color: #0b1b2e;
  background: var(--foam);
  box-shadow: 3px 3px 0 rgba(4, 17, 30, 0.68);
}

.profile-collection-count strong { color: #81ccef; }

.tab:hover,
.tab.active,
.wiki-tab:hover,
.wiki-tab.active,
.leaderboard-layout aside a:hover,
.leaderboard-layout aside a.active {
  color: var(--ink);
  background: #17688f;
}

.board-nav-section h3 { color: #8dcfea; }

.trading-card-surface,
.catch-card .trading-card-surface {
  background: linear-gradient(145deg, rgba(22, 58, 89, 0.98), rgba(7, 24, 39, 0.99));
  box-shadow: var(--card-shadow-x) var(--card-shadow-y) 0 rgba(4, 17, 30, 0.66), 0 24px 52px rgba(2, 10, 20, 0.3);
}

.catch-card-art,
.spotlight-art,
.catch-detail-art,
.board-catch-preview img { background: #163a59; }

.catch-card-metrics > span,
.board-catch-preview { background: rgba(244, 247, 251, 0.055); }

.board tbody tr:hover { background: rgba(85, 185, 232, 0.07); }
.board tbody tr.is-my-profile td { background: rgba(85, 185, 232, 0.11); }

.board-chance {
  color: #101820;
  background: var(--coral);
  box-shadow: 3px 3px 0 rgba(4, 17, 30, 0.68);
}

.catch-card-close { background: rgba(7, 24, 39, 0.9); }

@media (max-width: 760px) {
  .site-header nav {
    border-color: rgba(85, 185, 232, 0.22);
    background: rgba(7, 24, 39, 0.99);
    box-shadow: 7px 7px 0 rgba(4, 17, 30, 0.72);
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}