/* REQUIEM — стиль перенесён из макета claude.ai/design (REQUIEM.dc.html) один в один */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #2b2b2a; }
a { color: #17181a; }
a:hover { color: #000; }
::selection { background: rgba(0,0,0,.4); color: #d9d6cf; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }

.wall {
  position: relative; min-height: 100vh; overflow-x: hidden;
  background: #4a4a48;
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.14), rgba(0,0,0,0) 60%),
    radial-gradient(90% 60% at 80% 110%, rgba(0,0,0,.10), rgba(0,0,0,0) 60%),
    linear-gradient(178deg,#6e6e6b 0%,#7a7a76 30%,#807f7b 65%,#84837f 100%);
  font-family: 'Oswald', sans-serif; color: #1b1c1d;
}

/* Зерно, виньетка, швы бетонных плит */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 41;
  background: radial-gradient(110% 80% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%);
}
.seam {
  position: fixed; top: 0; bottom: 0; width: 2px; pointer-events: none; z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
  box-shadow: 1px 0 0 rgba(255,255,255,.05);
}
.seam-1 { left: 33.3%; }
.seam-2 { left: 66.6%; }
#scratch { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 37; opacity: .95; }

/* Граффити — позиции и прозрачности как в макете */
.g { position: absolute; pointer-events: none; z-index: -1; }
.g-crown   { left: 2%;  top: 4%;     width: min(160px, 14vw); opacity: .8; }
.g-arrow   { left: 44%; top: 2%;     width: min(110px, 10vw); opacity: .55; }
.g-max1    { right: 5%; top: 5%;     width: min(170px, 15vw); opacity: .5; }
.g-skull   { right: 1%; bottom: 3%;  width: min(190px, 16vw); opacity: .4; }
.g-splat   { right: 27%; top: 11%;   width: min(90px, 8vw);   opacity: .5; }
.g-tally   { left: 5%;  bottom: 5%;  width: min(130px, 12vw); opacity: .6; }
.g-xmarks  { left: 24%; bottom: 2%;  width: min(130px, 11vw); opacity: .45; }
.g-max2    { right: 16%; bottom: 5%; width: min(160px, 14vw); opacity: .55; }
.g-anarchy { left: 44%; bottom: 1%;  width: min(90px, 8vw);   opacity: .4; }

.g-who-xmarks { left: -2%; top: 6%;    width: min(300px, 26vw); opacity: .35; }
.g-who-x      { right: -1%; bottom: 4%; width: min(180px, 16vw); opacity: .3; }
.g-wars-tally  { right: 2%; top: 2%;    width: min(170px, 15vw); opacity: .4; }
.g-wars-xmarks { left: -3%; bottom: 6%; width: min(180px, 16vw); opacity: .3; }
.g-media-max   { right: 0; top: 0;      width: min(220px, 20vw); opacity: .32; }
.g-join-skull   { left: 50%; top: 8%;    width: min(360px, 42vw); transform: translateX(-50%); opacity: .22; }
.g-join-anarchy { right: 2%; bottom: 10%; width: min(130px, 12vw); opacity: .35; }

/* Плашка входа — оформлена как служебная панель макета */
.topbar {
  position: fixed; top: 18px; right: 18px; z-index: 60;
  display: flex; gap: 14px; align-items: center; padding: 8px 12px;
  background: rgba(20,20,19,.35); border: 1px solid rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.topbar-link {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px;
  color: rgba(230,226,218,.6); text-transform: uppercase; text-decoration: none;
}
.topbar-link:hover { color: #e8e4dc; }
.auth-slot { display: flex; align-items: center; gap: 10px; }
.btn-login, .btn-cabinet {
  cursor: pointer; font-family: 'Caveat', cursive; font-size: 19px; line-height: 1;
  padding: 7px 12px; background: rgba(200,196,188,.22); color: #e8e4dc;
  border: 1px solid rgba(0,0,0,.6); text-decoration: none; white-space: nowrap;
}
.btn-login:hover, .btn-cabinet:hover { background: rgba(200,196,188,.34); color: #fff; }
.who { display: flex; align-items: center; gap: 8px; color: rgba(232,228,220,.9); font-size: 12px; letter-spacing: 1px; }
.who img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.5); }

/* Сообщение о неудачном входе */
.auth-note {
  position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 59;
  max-width: min(92vw, 620px); padding: 12px 22px; text-align: center;
  font-weight: 300; font-size: 15px; color: #f0ece3;
  background: rgba(122,20,20,.88); border: 1px solid rgba(0,0,0,.5);
}

/* HERO */
.hero {
  position: relative; z-index: 10; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 96px 24px 72px; text-align: center;
}
.side-tag {
  position: absolute; left: 2%; top: 38%;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(18px, 2vw, 28px);
  line-height: 1.05; color: #191a1b; opacity: .85; text-align: left;
  transform: rotate(-6deg); filter: url(#rq-rough-s);
}
.wordmark-img {
  width: min(780px, 76vw); height: auto; margin-top: -6px;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,.35));
}
/* Запасной вариант, пока нет оригинальной надписи.
   Маска из фрактального шума выедает штрих — так печатный шрифт становится
   похож на надпись углём по бетону, как в макете. */
.wordmark-fallback { filter: drop-shadow(2px 3px 4px rgba(0,0,0,.35)); }
.wordmark-text {
  font-family: 'Metal Mania', cursive; font-size: clamp(64px, 13vw, 190px);
  line-height: .9; letter-spacing: .02em; color: #141516; filter: url(#rq-rough-xl);
  -webkit-mask-image: var(--chalk); mask-image: var(--chalk);
  -webkit-mask-size: 260px 260px; mask-size: 260px 260px;
}
.wordmark-sub {
  margin-top: 2px; font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(20px, 3.4vw, 46px); line-height: 1; color: #191a1b; filter: url(#rq-rough-s);
  -webkit-mask-image: var(--chalk); mask-image: var(--chalk);
  -webkit-mask-size: 190px 190px; mask-size: 190px 190px;
}
:root {
  --chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='12'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -1.9 0 0 0 1.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* Кнопки-теги */
.cta-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 26px; }
.cta {
  position: relative; display: inline-flex; align-items: center;
  font-family: 'Caveat', cursive; font-weight: 700; text-transform: uppercase;
  text-decoration: none; color: #0b0c0d; filter: url(#rq-rough);
  transition: background .16s, transform .16s, letter-spacing .16s, box-shadow .16s;
  letter-spacing: .08em;
}
.cta-main {
  padding: 22px 52px; font-size: clamp(26px, 2.6vw, 38px); border: 3px solid #101112;
}
.cta-main:hover {
  background: rgba(10,10,10,.42); color: #f0ece3;
  transform: rotate(-1.2deg) scale(1.05); letter-spacing: .18em;
  box-shadow: inset 0 0 0 3px rgba(10,10,10,.55);
}
.cta-b, .cta-c {
  padding: 22px 46px; font-size: clamp(24px, 2.4vw, 34px); border: 3px solid rgba(14,14,14,.75);
}
.cta-b:hover {
  background: rgba(10,10,10,.32); color: #f0ece3;
  transform: rotate(1deg) scale(1.05); letter-spacing: .18em;
}
.cta-c:hover {
  background: rgba(10,10,10,.32); color: #f0ece3;
  transform: rotate(-.8deg) scale(1.05); letter-spacing: .18em;
}
.scroll-hint {
  margin-top: 52px; font-family: 'Caveat', cursive; font-size: 20px;
  color: rgba(20,21,22,.7); animation: flick 3.2s ease-in-out infinite;
}
@keyframes flick { 0%,100% { opacity: .85 } 50% { opacity: .6 } }

/* Секции */
.section { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto; }
.section-who {
  padding: 100px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 60px; align-items: start;
}
.section-wars, .section-media { padding: 60px 24px 100px; }
.section-join { max-width: 820px; padding: 60px 24px 140px; }

.h-scratch {
  margin: 0; font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(40px, 5vw, 78px); line-height: .95; color: #141516;
  text-shadow: 0 1px 0 rgba(255,255,255,.08); filter: url(#rq-rough);
}
.h-wars { margin-bottom: 40px; }
.h-tight { margin-bottom: 12px; }
.lead {
  margin: 18px 0 0; font-family: 'Oswald', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 1.7; letter-spacing: .04em; color: #16171a; max-width: 44ch;
}
.muted {
  font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px;
  letter-spacing: .18em; text-transform: uppercase; color: #0e0f10;
}

/* Статистика */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: rgba(0,0,0,.25); }
.stat { padding: 30px 22px; background: rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.stat-value { font-family: 'Metal Mania', cursive; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; color: #141516; filter: url(#rq-rough); }
.stat-label { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #0e0f10; }

/* Войны */
.wars { display: flex; flex-direction: column; }
.war-row {
  display: grid; grid-template-columns: minmax(90px, 120px) 1fr auto; gap: 18px;
  align-items: baseline; padding: 22px 4px; border-top: 1px solid rgba(0,0,0,.35);
}
.war-date { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .16em; color: #0e0f10; }
.war-title { font-family: 'Caveat', cursive; font-size: 30px; line-height: 1.05; color: #141516; filter: url(#rq-rough-s); }
.war-res { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; }
.res-win { color: #141516; }
.res-loss { color: #7a1414; }

/* Медиа */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.media-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; background: rgba(0,0,0,.16); border: 2px solid rgba(15,15,15,.5);
  transition: transform .2s, background .2s;
}
.media-card:hover { background: rgba(0,0,0,.28); }
.mc-1:hover { transform: rotate(-.4deg) translateY(-3px); }
.mc-2:hover { transform: rotate(.4deg) translateY(-3px); }
.mc-3:hover { transform: rotate(-.3deg) translateY(-3px); }
.media-thumb {
  height: 170px; display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: rgba(240,236,227,.5); background: rgba(0,0,0,.28);
}
.media-label { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: #0e0f10; }

/* Заявка */
.join-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.cta-join { padding: 26px 60px; font-size: clamp(28px, 3vw, 44px); border: 4px solid #0f1011; }
.cta-join:hover {
  background: rgba(10,10,10,.45); color: #f0ece3;
  transform: rotate(-1.2deg) scale(1.05); letter-spacing: .18em;
  box-shadow: inset 0 0 0 3px rgba(10,10,10,.55);
}
.steps { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: rgba(0,0,0,.25); }
.step { padding: 24px 20px; background: rgba(255,255,255,.12); }
.step-title { font-family: 'Caveat', cursive; font-size: 30px; line-height: 1; color: #141516; filter: url(#rq-rough-s); }
.step-text { margin-top: 8px; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.65; letter-spacing: .04em; color: #0e0f10; }

/* Подвал */
.footer { position: relative; z-index: 10; padding: 40px 24px 60px; text-align: center; border-top: 1px solid rgba(0,0,0,.3); }
.footer-mark { width: min(280px, 60vw); height: auto; opacity: .85; }
.footer-mark-text { font-family: 'Metal Mania', cursive; font-size: 42px; color: #141516; opacity: .85; filter: url(#rq-rough); }
.footer-links { margin-top: 10px; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #0e0f10; }

@media (max-width: 760px) {
  .topbar { top: 10px; right: 10px; left: 10px; gap: 10px; justify-content: space-between; }
  .topbar-link { display: none; }
  .side-tag { display: none; }
  .hero { padding-top: 120px; }
  .war-row { grid-template-columns: 1fr; gap: 4px; }
}