/* spinogambino-de.org — слой редизайна.
   Метод: замена стилей на неизменной разметке.
   Структурные оси: асимметричный сплит 62/38 с чередованием стороны +
   типографический блок (число вместо карточки). Подключается ПОСЛЕ /css/style.css. */

:root{
  /* было #d63384 — оттенок 330°, ровно тот кластер 327–338°, в который сеть
     уже сошлась тремя редизайнами подряд. Уходим на 259°. */
  --spino-primary:#7b6ce0;
  --spino-primary-light:#a79cf0;
  --spino-primary-dark:#4f42a8;
  --spino-primary-alpha-20:rgba(123,108,224,.20);
  --spino-accent:#c9b458;
  --spino-gradient-primary:linear-gradient(120deg,#7b6ce0,#4f42a8);

  --spino-bg-dark:#0d0d12;
  --spino-bg-light:#15151d;
  --spino-bg-card:#13131a;
  --spino-bg-card-hover:#1c1c26;

  --spino-text-primary:#eceaf2;
  --spino-text-secondary:rgba(236,234,242,.72);
  --spino-text-muted:rgba(236,234,242,.44);

  --spino-font-heading:'Outfit',-apple-system,Segoe UI,sans-serif;
  --spino-font-body:'Bitter',Georgia,serif;

  /* острые углы вместо pill — pill ушёл к соседнему проекту партии */
  --spino-radius-sm:2px;
  --spino-radius:2px;
  --spino-radius-lg:2px;

  /* шкала 1.333 perfect fourth */
  --rd-s0:1rem; --rd-s1:1.333rem; --rd-s2:1.777rem;
  --rd-s3:2.369rem; --rd-s4:3.157rem; --rd-s5:4.209rem;
  --rd-line:rgba(236,234,242,.11);
  --rd-rule:rgba(123,108,224,.45);
}

body{
  background-color:var(--spino-bg-dark);
  background-image:
    linear-gradient(115deg,rgba(123,108,224,.10) 0 38%,transparent 38.6%),
    radial-gradient(760px 460px at 12% 0%,rgba(201,180,88,.07),transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--spino-text-primary);
  font-family:var(--spino-font-body);
  font-size:1.0625rem;line-height:1.72;
}

/* типографика: гротеск в заголовках против серифа в тексте, контраст 4.2× */
h1,h2,h3,.spino-banner-title,.section-title{
  font-family:var(--spino-font-heading);
  font-weight:800;letter-spacing:-.03em;line-height:1.02;
  color:var(--spino-text-primary);
}
h1{font-size:clamp(2.2rem,5vw,var(--rd-s5));}
h2{font-size:var(--rd-s3);}
h3{font-size:var(--rd-s1);letter-spacing:0;text-transform:uppercase;
   font-size:.86rem;letter-spacing:.16em;color:var(--spino-primary-light);}
p{max-width:66ch;}
a{color:var(--spino-primary-light);}

/* signature: система «линейка + метка», взятая из печатных таблиц */
h2::before{
  content:"";display:block;width:100%;height:1px;
  background:var(--rd-rule);margin-bottom:.9rem;
}
.spino-intro{border-left:2px solid var(--rd-rule);padding-left:1.4rem;margin-inline:0;max-width:70ch;text-align:left;}
.spino-intro p{text-align:left;}

/* ── СТРУКТУРА 1: асимметричный сплит 62/38 с чередованием стороны ───────── */
@media (min-width:1020px){
  .spino-content-section>.spino-container{
    display:grid;
    grid-template-columns:62fr 38fr;
    column-gap:clamp(2rem,4vw,3.4rem);
    align-items:start;
    max-width:1220px;
  }
  .spino-content-section>.spino-container>h2{
    grid-column:2;grid-row:1;
    position:sticky;top:6rem;
    font-size:var(--rd-s2);
  }
  .spino-content-section>.spino-container>*:not(h2){grid-column:1;}
  /* чётные секции зеркалят сплит — ритм строится сменой стороны, а не фоном */
  .spino-content-section:nth-of-type(even)>.spino-container{grid-template-columns:38fr 62fr;}
  .spino-content-section:nth-of-type(even)>.spino-container>h2{grid-column:1;}
  .spino-content-section:nth-of-type(even)>.spino-container>*:not(h2){grid-column:2;}
}
.spino-content-section{padding-block:clamp(2.6rem,6vw,var(--rd-s5));}

/* ── СТРУКТУРА 2: число вместо карточки ─────────────────────────────────── */
.table-wrapper table{border-collapse:collapse;width:100%;}
.table-wrapper th{
  font-family:var(--spino-font-heading);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--spino-text-muted);
  border:0;border-bottom:1px solid var(--rd-rule);
  background:none;padding:.6rem .8rem;text-align:left;
}
.table-wrapper td{
  border:0;border-bottom:1px solid var(--rd-line);
  padding:.9rem .8rem;background:none;
  font-variant-numeric:tabular-nums;
}
/* первая колонка — метка, вторая — значение крупно, рамок нет */
.table-wrapper td:first-child{color:var(--spino-text-muted);font-size:.92rem;width:38%;}
.table-wrapper td:last-child{
  font-family:var(--spino-font-heading);font-weight:600;
  font-size:1.18rem;color:var(--spino-text-primary);
}

/* hero */
.spino-hero .spino-hero-gradient-banner{border-radius:0;border-block:1px solid var(--rd-rule);}
.spino-banner-title{font-size:clamp(2rem,5.4vw,var(--rd-s5));letter-spacing:-.035em;}

/* шапка */
.spino-header{background:rgba(13,13,18,.86);backdrop-filter:blur(9px);border-bottom:1px solid var(--rd-line);}
.header-nav a{font-family:var(--spino-font-heading);font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;}
.sidebar{border-right:1px solid var(--rd-line);background:var(--spino-bg-light);}

/* плитки каталога — равные ячейки остаются, bento ушёл к соседнему проекту партии */
.spino-games-section [class*="slot-tile"],.spino-games-section [class*="game-card"]{border-radius:2px;}

/* движение: один reveal на секцию, ничего сверх */
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* ══ ИТЕРАЦИЯ 2 по замечаниям владельца ═══════════════════════════════════ */

/* ── FAQ: заголовок уезжал ВПРАВО от списка.
   Секция #21 попадает в нечётные, и сплит 62/38 ставил её h2 во вторую колонку.
   Для FAQ это неверно: список и есть содержание, заголовок должен быть над ним.
   Секцию исключаем из сплита целиком, а не двигаем колонку. */
@media (min-width:1020px){
  .spino-faq-section>.spino-container,
  .spino-content-section.spino-faq-section:nth-of-type(even)>.spino-container{
    display:block;
    max-width:960px;
  }
  .spino-faq-section>.spino-container>h2{
    position:static;
    grid-column:auto;
    font-size:var(--rd-s3);
    margin-bottom:var(--rd-s1);
  }
}

/* ── липкая полоса: текст бонуса по центру ──────────────────────────────── */
#spino-sticky-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
#spino-sticky-bar .spino-sticky-bonus-text{
  flex:1 1 auto;
  text-align:center;
  font-family:var(--spino-font-heading);
  font-weight:600;
}

/* ── карточки игр крупнее ───────────────────────────────────────────────── */
.spino-games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
}
.spino-game-card{border-radius:2px;overflow:hidden;position:relative;display:block;}
.spino-game-card picture,.spino-game-card img{display:block;width:100%;height:auto;}
.spino-game-overlay{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:.45rem;
  padding:.8rem;
  background:linear-gradient(to top,rgba(13,13,18,.9) 14%,rgba(13,13,18,.5) 52%,transparent);
}
.spino-game-title{font-family:var(--spino-font-heading);font-weight:600;font-size:.95rem;}

/* ── подвал: сузить область действия меры набора ────────────────────────── */
p{max-width:none;}
main p,.spino-content-section p{max-width:66ch;}
footer p{max-width:none;}