/* sea.css — тема страниц Ship War. Подключается ПОСЛЕ base.css и меняет
   только краски, шрифт заголовков и фон. Вся вёрстка шапки, кнопок и подвала
   остаётся общей. У новой игры может быть своя такая тема — витрина (index)
   при этом не меняется. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,400&display=swap');

:root {
  --bg: #04141f;
  --surface: #072536;
  --line: rgba(217, 164, 65, 0.22);
  --text: #e6f0f4;
  --muted: #9db4c0;
  --dim: #6d8794;
  --accent: #d9a441;
  --on-accent: #04141f;

  --display: 'Cormorant Garamond', Georgia, serif;
}

body {
  /* глубинное свечение + сетка морской карты */
  background-image:
    radial-gradient(120% 900px at 50% -80px, rgba(10, 74, 104, 0.6), rgba(4, 20, 31, 0) 75%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 1400px, 64px 64px, 64px 64px;
  background-repeat: no-repeat, repeat, repeat;
}

/* зернистость — чтобы фон не выглядел цифрово-плоским */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Антиква даёт минускульные цифры («1» похожа на «I») — держим капитальные */
h1, h2, .lining { font-variant-numeric: lining-nums; }

h1 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.02; }
h2 { font-weight: 600; letter-spacing: 0; }

.brand { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.03em; }
.top nav a { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.btn { border-radius: 0; }

/* латунная линейка с ромбом вместо простой черты */
hr.rule { display: none; }
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 74px 0 42px;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.rule i {
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}