:root {
  --bg: #1b1d22;
  --bg-alt: #22252b;
  --card: #2a2e35;
  --line: #3a3f48;
  --text: #e9e6dc;
  --muted: #a9a596;
  --grass: #5f9e3a;
  --grass-dark: #477a2a;
  --dirt: #7a5434;
  --dirt-dark: #5e3f26;
  --gold: #f2c84b;
  --accent: #7bd35a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: Consolas, "Courier New", monospace;
  background: #00000040;
  padding: 1px 6px;
  border-radius: 3px;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* шапка */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #15171bee;
  border-bottom: 2px solid #000;
}
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 20px; letter-spacing: .5px; }
.logo:hover { text-decoration: none; }
.logo__block {
  width: 26px; height: 26px;
  background:
    linear-gradient(var(--grass) 0 35%, var(--dirt) 35% 100%);
  box-shadow: inset -3px -3px 0 #0005, inset 3px 3px 0 #fff2;
}
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--muted); font-size: 15px; }
.nav a:hover { color: var(--text); text-decoration: none; }

/* первый экран */
.hero {
  position: relative;
  padding: 72px 0 120px;
  background:
    radial-gradient(1200px 400px at 70% -10%, #3c5f8a55, transparent),
    linear-gradient(#26364a, #1b1d22 85%);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; }
.hero__season { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; margin: 0 0 12px; }
.hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.15; margin: 0 0 16px; text-shadow: 3px 3px 0 #000; }
.hero__lead { max-width: 560px; color: var(--muted); font-size: 18px; margin: 0 0 28px; }
.hero__meta { color: var(--muted); margin: 14px 0 0; font-size: 15px; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.ip { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ip__addr {
  font-size: 18px;
  padding: 12px 16px;
  background: #0008;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #ffffff14;
  border-radius: 0;
}

.btn {
  font: inherit;
  font-weight: 700;
  color: #10210a;
  background: var(--accent);
  border: 2px solid #000;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 #0004, inset 3px 3px 0 #fff5;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { box-shadow: inset 3px 3px 0 #0004; }

/* полоска земли внизу первого экрана */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background:
    linear-gradient(var(--grass) 0 14px, var(--grass-dark) 14px 18px, transparent 18px),
    repeating-linear-gradient(90deg, var(--dirt) 0 32px, var(--dirt-dark) 32px 34px, var(--dirt) 34px 64px),
    var(--dirt);
  border-top: 2px solid #000;
}

/* секции */
.block { padding: 64px 0; }
.block--alt { background: var(--bg-alt); border-top: 2px solid #000; border-bottom: 2px solid #000; }
.block h2 { font-size: 30px; margin: 0 0 28px; text-shadow: 2px 2px 0 #000; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--card);
  border: 2px solid #000;
  padding: 20px;
  box-shadow: inset 2px 2px 0 #ffffff10, inset -2px -2px 0 #00000040;
}
.card h3 { margin: 12px 0 6px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); }

/* пиксельные иконки на градиентах */
.card__icon { width: 36px; height: 36px; border: 2px solid #000; }
.card__icon--pick    { background: linear-gradient(135deg, transparent 42%, #8a6a3f 42% 58%, transparent 58%), linear-gradient(45deg, #9fd8e8 0 30%, transparent 30%), #3a3f48; }
.card__icon--chest   { background: linear-gradient(#9a6b34 0 45%, #2b1d10 45% 52%, #b07a3c 52%); box-shadow: inset 0 0 0 4px #6b4520; }
.card__icon--emerald { background: radial-gradient(circle at 40% 35%, #b6ffcf 0 12%, transparent 13%), linear-gradient(135deg, #1f9c4f, #0e6a33); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.card__icon--map     { background: repeating-linear-gradient(90deg, #d9c48e 0 9px, #c7b077 9px 18px); box-shadow: inset 0 0 0 3px #8c7a4b; }
.card__icon--cake    { background: linear-gradient(#f4f0e6 0 40%, #e04646 40% 52%, #c98d4f 52%); }
.card__icon--shield  { background: linear-gradient(90deg, #4a6fa8 0 50%, #3a5a8c 50%); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }

.steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; max-width: 760px; }
.steps li { padding-left: 6px; }
.note { color: var(--muted); margin: 20px 0 0; font-size: 15px; }

.news { display: grid; gap: 16px; }
.post { background: var(--card); border: 2px solid #000; padding: 20px 22px; }
.post time { color: var(--gold); font-size: 14px; font-weight: 700; }
.post h3 { margin: 4px 0 8px; }
.post p { margin: 0; color: var(--muted); }

.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 760px; }
.rules li { padding: 10px 14px 10px 40px; background: var(--card); border: 2px solid #000; position: relative; }
.rules li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--grass); box-shadow: inset -2px -2px 0 #0005; }

details { background: var(--card); border: 2px solid #000; margin-bottom: 10px; max-width: 760px; }
summary { cursor: pointer; padding: 14px 18px; font-weight: 700; }
details p { margin: 0; padding: 0 18px 16px; color: var(--muted); }

.foot { border-top: 2px solid #000; background: #15171b; padding: 26px 0; color: var(--muted); font-size: 14px; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot p { margin: 0; }

@media (max-width: 640px) {
  .nav { display: none; }
  .hero { padding: 48px 0 100px; }
  .block { padding: 48px 0; }
}