/* Trinko — legal pages.
   Палітра й форми зняті з гри: фіолетово-синій градієнт екрана завантаження,
   кремові панелі з «товстою» тінню, як в ігровому UI, і круглий шрифт,
   що перегукується з бульбашковими літерами логотипа. */

:root {
  --violet:   #5B3FD4;
  --violet-d: #3B23A4;
  --blue:     #2A72DD;
  --deep:     #1E1350;

  --cream:    #FFF7E8;
  --cream-d:  #F3E4C9;
  --ink:      #2A1A57;
  --muted:    #6C5B9A;

  --pink:     #FF4FA3;
  --lime:     #8FD22F;
  --cyan:     #35C0F5;
  --amber:    #FFB43C;

  --radius:   24px;
  --display:  "Fredoka", "Avenir Next Rounded", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  --body:     "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font: 17px/1.72 var(--body);
  color: var(--ink);
  background: var(--violet-d);
  /* Ті самі м'які світлові плями, що на екрані завантаження. */
  background-image:
    radial-gradient(ellipse 70% 45% at 18% 8%,  rgba(255,255,255,.30), transparent 60%),
    radial-gradient(ellipse 60% 40% at 88% 26%, rgba(255, 79,163,.28), transparent 62%),
    radial-gradient(ellipse 80% 45% at 50% 96%, rgba(53,192,245,.32),  transparent 65%),
    linear-gradient(168deg, var(--violet) 0%, #3E56D8 46%, var(--blue) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 40px 18px 64px; }

/* --- ігрова панель: кремова, з жорстким нижнім краєм замість розмитої тіні --- */
.panel {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 34px 34px 40px;
  box-shadow: 0 10px 0 var(--cream-d), 0 22px 46px rgba(20,10,60,.42);
}

/* --- шапка --- */
.brand { display: block; margin: 0 auto 6px; width: min(320px, 74%); height: auto; }
.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pink);
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 5.2vw, 38px); line-height: 1.12;
  margin: 6px 0 8px; color: var(--ink); text-wrap: balance;
}
.updated { color: var(--muted); font-size: 14.5px; font-weight: 600; }

.topnav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.topnav a {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  text-decoration: none; color: var(--ink);
  background: #fff; border: 2px solid var(--cream-d);
  border-radius: 999px; padding: 7px 16px;
  box-shadow: 0 3px 0 var(--cream-d);
}
.topnav a:hover { border-color: var(--cyan); color: var(--violet-d); }

/* --- заголовки розділів: коротка товста риска замість волосяної лінії --- */
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; line-height: 1.25; margin: 38px 0 12px;
  color: var(--violet-d); text-wrap: balance;
}
h2::after {
  content: ""; display: block; width: 46px; height: 5px; border-radius: 99px;
  margin-top: 8px; background: var(--amber);
}
h2:nth-of-type(3n+2)::after { background: var(--cyan); }
h2:nth-of-type(3n+3)::after { background: var(--lime); }

h3 {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  margin: 24px 0 4px; color: var(--pink);
}

p, li { color: var(--ink); }
p { margin: 0 0 14px; max-width: 64ch; }
ul { padding-left: 22px; margin: 0 0 16px; }
li { margin: 7px 0; max-width: 62ch; }
strong { color: var(--violet-d); font-weight: 800; }
a { color: #1E6FD0; font-weight: 700; }
a:hover { color: var(--pink); }
code { background: #efe6f7; padding: 1px 7px; border-radius: 6px; font-size: 14px; }

footer {
  margin-top: 44px; padding-top: 20px;
  border-top: 3px dotted var(--cream-d);
  color: var(--muted); font-size: 14px; font-weight: 600;
}

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .panel { padding: 24px 20px 30px; border-radius: 20px; }
  .wrap { padding: 24px 12px 44px; }
}

/* Шапка документа: та сама пунктирна лінія, що й у підвалі — рамка документа,
   а не декоративний роздільник. */
header { padding-bottom: 20px; border-bottom: 3px dotted var(--cream-d); }
header h1 { margin-bottom: 6px; }
header + p, header + h2 { margin-top: 24px; }
h2:first-of-type { margin-top: 30px; }