/* Doggy Longer — сайт. Цвета и шрифты — из дизайн-системы «Long Paw»
   (DogGame/UI/DesignSystem/Tokens.swift), числа один в один. */

@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap;
  src: url("fonts/Unbounded-Black.ttf") format("truetype"); }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap;
  src: url("fonts/Onest-Medium.ttf") format("truetype"); }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap;
  src: url("fonts/Onest-Bold.ttf") format("truetype"); }

:root {
  --chocolate: #24140C;
  --cream: #FFF4E0;
  --paper: #FFFBF2;
  --biscuit: #F5E3C4;
  --tongue: #FF7BAC;
  --tennis: #D8F24A;
  --fur: #A9561F;
  --fur-dark: #6E3413;
  --collar: #1E6F6A;
  --coin: #FFC23A;
  --lawn: #2F7D32;
  --lawn-grid: #3E8640;
  --text: #3A281D;
  --muted: #6E3413;
  --divider: #E3CDA6;
  --stroke: 3px solid var(--chocolate);
  --shadow: 0 6px 0 var(--chocolate);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font: 500 17px/1.55 "Onest", -apple-system, system-ui, sans-serif;
  color: var(--text);
  /* газон с сеткой, как поле игры */
  background-color: var(--lawn);
  background-image:
    linear-gradient(var(--lawn-grid) 2px, transparent 2px),
    linear-gradient(90deg, var(--lawn-grid) 2px, transparent 2px);
  background-size: 44px 44px;
  background-position: -1px -1px;
}

a { color: var(--collar); font-weight: 700; text-underline-offset: 3px; }

.wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }

.logo {
  font: 900 clamp(30px, 8vw, 50px)/1 "Unbounded", sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--chocolate);
  -webkit-text-stroke: 2px var(--chocolate);
  paint-order: stroke fill;
  margin: 0;
}
.logo a { color: inherit; text-decoration: none; }

.card {
  background: var(--cream);
  border: var(--stroke);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.sticker {
  display: inline-block;
  font: 900 15px/1 "Unbounded", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--chocolate);
  background: var(--tennis);
  border: var(--stroke);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--chocolate);
  padding: 14px 22px;
  text-decoration: none;
  white-space: nowrap;
}
.sticker.pink { background: var(--tongue); }
.tilt { transform: rotate(-3deg); }

/* главная */
.hero { text-align: center; padding-top: 12px; }
.hero .icon {
  width: 128px; height: 128px;
  border-radius: 29px;
  border: var(--stroke);
  box-shadow: var(--shadow);
  display: block; margin: 0 auto 22px;
}
.tagline {
  color: var(--cream);
  font-weight: 700;
  font-size: 19px;
  margin: 18px auto 26px;
  max-width: 30ch;
}
/* кадр игры под заголовком */
.shot {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  margin: 40px auto 0;
  border: var(--stroke);
  border-radius: 26px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}

/* документы: политика, поддержка */
.doc h1 {
  font: 900 26px/1.15 "Unbounded", sans-serif;
  text-transform: uppercase;
  color: var(--chocolate);
  margin: 0 0 6px;
}
.doc h2 {
  font: 900 16px/1.3 "Unbounded", sans-serif;
  text-transform: uppercase;
  color: var(--chocolate);
  margin: 28px 0 8px;
}
.doc .date { color: var(--muted); margin: 0 0 20px; }
.doc p, .doc li { margin: 0 0 10px; }
.doc ul { padding-left: 22px; margin: 0 0 10px; }
.doc .mail { margin: 18px 0 8px; }

header.top { display: flex; justify-content: center; margin-bottom: 26px; }

footer {
  text-align: center;
  color: var(--cream);
  margin-top: 36px;
  font-size: 15px;
}
footer a { color: var(--cream); margin: 0 10px; }
footer p { margin: 10px 0 0; opacity: 0.8; }