/* ============================================================
   7k1064.casino — 7K Casino / 7К Казино
   Концепт: «зерно» — антрацит и фисташка, справочник определений
   Шаблон J: dl/dt/dd, моноширинные метки секций
   Префикс классов: .grain-
   ============================================================ */

:root{
  --bg:#0f1210;
  --bg2:#12160f;
  --panel:#181c19;
  --panel2:#1e231f;
  --acc:#a8d17a;
  --acc-dim:#83a75d;
  --sec:#dfe4dd;
  --ink:#e8ede7;
  --mut:#9aa398;
  --line:rgba(168,209,122,.20);
  --line2:rgba(232,237,231,.08);
  --r:2px;
  --r2:14px;
  --mono:'Cousine',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Alegreya Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(180deg,rgba(168,209,122,.07),transparent 380px),
    radial-gradient(760px 420px at 12% 0%,rgba(168,209,122,.06),transparent 70%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.18;margin:0 0 14px;letter-spacing:-.005em}
h1{font-size:clamp(27px,3.4vw,42px)}
h2{font-size:clamp(22px,2.5vw,31px)}
h3{font-size:clamp(18px,1.5vw,21px);font-weight:600}
h4{font-size:16px;font-weight:600}
p{margin:0 0 15px}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--sec)}

.grain-skip{position:absolute;left:-9999px}
.grain-skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:#0f1210;padding:8px 14px;border-radius:var(--r2)}

/* ---------- ШАПКА ---------- */
.grain-bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:22px;
  padding:10px max(3vw,18px);
  background:rgba(15,18,16,.92);
  backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line);
}
.grain-logo{display:flex;align-items:center;gap:11px;color:var(--ink)}
.grain-logo svg{width:36px;height:36px;flex:none}
.grain-logo__n{display:block;font-weight:700;font-size:17px;letter-spacing:.01em}
.grain-logo__s{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.grain-nav{display:flex;gap:17px;margin-left:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em}
.grain-nav a{color:var(--mut)}
.grain-nav a:hover{color:var(--acc)}
.grain-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--acc);color:#0f1210;padding:10px 17px;border-radius:var(--r2) var(--r) var(--r2) var(--r);
  border:1px solid var(--acc);white-space:nowrap;
}
.grain-cta:hover{background:transparent;color:var(--acc)}

/* ---------- КАРКАС ---------- */
.grain-wrap{max-width:900px;margin:0 auto;padding:0 max(3vw,18px)}
main section{padding:54px 0;border-bottom:1px solid var(--line2)}
main section:last-child{border-bottom:0}

.grain-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-dim);margin:0 0 10px;display:block;
}
.grain-tag i{font-style:normal;color:var(--mut)}
.grain-lead{color:var(--sec);font-size:1.03em}
.grain-note{font-size:.9em;color:var(--mut);font-family:var(--mono);line-height:1.6}

/* ---------- HERO ---------- */
.grain-hero{padding:56px 0 46px;border-bottom:1px solid var(--line)}
.grain-hero h1{max-width:24ch}
.grain-hero__lead{max-width:64ch;color:var(--sec);font-size:1.07em}
.grain-btns{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 28px}
.grain-b1{
  background:var(--acc);color:#0f1210;padding:14px 26px;border-radius:var(--r2) var(--r) var(--r2) var(--r);
  font-weight:700;font-size:16px;border:1px solid var(--acc);
}
.grain-b1:hover{background:var(--acc-dim);color:#0f1210}
.grain-b2{
  border:1px solid var(--line);color:var(--sec);padding:14px 26px;
  border-radius:var(--r) var(--r2) var(--r) var(--r2);font-size:16px;
}
.grain-b2:hover{border-color:var(--acc);color:var(--acc)}

.grain-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin:0 0 24px}
.grain-quick a{
  display:block;padding:14px 15px;color:var(--ink);border-right:1px solid var(--line2);
  background:var(--panel);
}
.grain-quick a:last-child{border-right:0}
.grain-quick a:hover{background:var(--panel2)}
.grain-quick b,.grain-quick span{display:block}
.grain-quick .qk{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-dim)}
.grain-quick .qv{font-size:14.5px;margin-top:3px;color:var(--sec)}

.grain-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden}
.grain-kpi div{background:var(--bg2);padding:14px 12px;text-align:center}
.grain-kpi .n{font-family:var(--mono);font-size:19px;color:var(--acc);display:block}
.grain-kpi .l{font-size:12.5px;color:var(--mut);display:block;margin-top:2px}

/* ---------- СПИСКИ ОПРЕДЕЛЕНИЙ ---------- */
.grain-dl{
  display:grid;grid-template-columns:240px 1fr;
  margin:20px 0 0;border-top:1px solid var(--line2);
}
.grain-dl dt{
  padding:13px 16px 13px 0;border-bottom:1px solid var(--line2);
  font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--acc);
  letter-spacing:.01em;
}
.grain-dl dd{
  margin:0;padding:13px 0 13px 16px;border-bottom:1px solid var(--line2);
  border-left:1px solid var(--line2);color:var(--ink);font-size:.98em;
}
.grain-dl dd em{font-style:normal;color:var(--mut);font-family:var(--mono);font-size:.86em}
.grain-dl--tight dt{font-size:12.5px}
.grain-dl--acc dt{color:var(--sec)}
.grain-dl--acc dd{background:linear-gradient(90deg,rgba(168,209,122,.05),transparent 60%)}

.grain-chip{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--acc-dim);border:1px solid var(--line);padding:2px 8px;border-radius:var(--r2);
  margin:0 6px 6px 0;
}

/* ---------- SVG-ШКАЛА ---------- */
.grain-scale{margin:26px 0 6px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel);padding:20px 18px 12px}
.grain-scale svg{width:100%;height:auto;display:block}
.grain-scale figcaption{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:10px;letter-spacing:.03em}

/* ---------- ЦИТАТЫ ---------- */
.grain-quote{margin:0 0 26px;padding:0 0 0 20px;border-left:2px solid var(--acc)}
.grain-quote p{font-size:1.04em;color:var(--sec)}
.grain-quote cite{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.03em}
.grain-stars{color:var(--acc);font-family:var(--mono);font-size:12px;letter-spacing:.16em}

/* ---------- FAQ ---------- */
.grain-faq details{
  border-bottom:1px solid var(--line2);padding:4px 0;
}
.grain-faq summary{
  cursor:pointer;padding:14px 34px 14px 0;position:relative;color:var(--sec);
  font-size:1.01em;list-style:none;
}
.grain-faq summary::-webkit-details-marker{display:none}
.grain-faq summary::after{
  content:"+";position:absolute;right:6px;top:12px;font-family:var(--mono);
  color:var(--acc);font-size:19px;line-height:1;
}
.grain-faq details[open] summary::after{content:"–"}
.grain-faq details[open] summary{color:var(--acc)}
.grain-faq p{padding:0 0 14px;color:var(--ink);font-size:.97em}

/* ---------- CTA-ПОЛОСА ---------- */
.grain-strip{
  margin:34px 0 0;border:1px solid var(--line);border-radius:var(--r2);
  background:linear-gradient(120deg,rgba(168,209,122,.10),transparent 70%),var(--panel);
  padding:26px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.grain-strip p{margin:0;flex:1 1 320px;color:var(--sec)}

/* ---------- ПОДВАЛ ---------- */
.grain-foot{border-top:1px solid var(--line);background:var(--bg2);padding:40px 0 26px;margin-top:10px}
.grain-cols{display:grid;grid-template-columns:1.45fr 1fr 1.2fr;gap:28px}
.grain-foot h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-dim)}
.grain-foot p{font-size:.9em;color:var(--mut);line-height:1.65}
.grain-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line2);font-size:.87em;color:var(--mut)}
.grain-age{
  display:inline-block;border:1px solid var(--acc);color:var(--acc);font-family:var(--mono);
  font-size:11px;padding:1px 7px;border-radius:var(--r2);margin-right:8px;
}

/* ---------- АДАПТИВ ---------- */
@media(max-width:1000px){
  .grain-nav{display:none}
  .grain-quick{grid-template-columns:repeat(2,1fr)}
  .grain-quick a{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .grain-kpi{grid-template-columns:repeat(3,1fr)}
  .grain-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .grain-dl{grid-template-columns:1fr;border-top:0}
  .grain-dl dt{padding:14px 0 2px;border-bottom:0;border-top:1px solid var(--line2)}
  .grain-dl dd{padding:0 0 14px;border-left:0}
  .grain-quick{grid-template-columns:1fr}
  .grain-kpi{grid-template-columns:repeat(2,1fr)}
  .grain-cols{grid-template-columns:1fr}
  main section{padding:40px 0}
  .grain-strip{padding:20px 16px}
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ СОСТОЯНИЯ И МЕЛКАЯ ТИПОГРАФИКА
   ============================================================ */

::selection{background:rgba(168,209,122,.28);color:var(--ink)}
::-moz-selection{background:rgba(168,209,122,.28);color:var(--ink)}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r)}
a:focus-visible{outline-offset:4px}
summary:focus-visible{outline-offset:0}

/* Тонкая полоса-разделитель между смысловыми группами внутри секции */
.grain-rule{
  height:1px;border:0;margin:26px 0;
  background:linear-gradient(90deg,var(--line),transparent 70%);
}

/* Моноширинная сноска под списком определений */
.grain-src{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--mut);
  margin:12px 0 0;padding-left:14px;border-left:2px solid var(--line2);
}

/* Числовой выносной блок (используется в метках и KPI) */
.grain-num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--acc);letter-spacing:-.01em;
}
.grain-mut{color:var(--mut)}
.grain-sec{color:var(--sec)}

/* Инлайновый термин внутри абзаца — вместо жирного начертания */
.grain-term{
  font-family:var(--mono);font-size:.88em;color:var(--acc-dim);
  border-bottom:1px dotted var(--line);padding-bottom:1px;
}

/* Заголовок третьего уровня внутри секции получает моноширинный префикс */
main section h3{
  padding-top:6px;margin-top:26px;position:relative;
}
main section h3::before{
  content:"";display:block;width:34px;height:2px;background:var(--acc);
  margin-bottom:10px;opacity:.7;
}

/* Список определений: чередование фона строк для длинных таблиц каталога */
.grain-dl--tight dd:nth-of-type(odd){background:rgba(232,237,231,.018)}
.grain-dl dt:hover{color:var(--sec)}
.grain-dl dd a{border-bottom:1px solid var(--line)}

/* Быстрые действия: акцентная полоса при наведении */
.grain-quick a{position:relative;transition:background .15s ease}
.grain-quick a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.grain-quick a:hover::after{transform:scaleX(1)}

/* KPI: тонкая рамка вокруг активной ячейки */
.grain-kpi div{transition:background .15s ease}
.grain-kpi div:hover{background:var(--panel)}

/* Цитаты отзывов: кавычка-марка слева сверху */
.grain-quote{position:relative}
.grain-quote::before{
  content:"«";position:absolute;left:-2px;top:-14px;
  font-family:var(--mono);font-size:34px;line-height:1;color:var(--line);
}
.grain-quote p{position:relative;z-index:1}

/* FAQ: плавное появление ответа */
.grain-faq details p{margin:0 0 14px}
.grain-faq details[open]{background:linear-gradient(90deg,rgba(168,209,122,.045),transparent 55%)}
.grain-faq summary:hover{color:var(--acc)}

/* CTA-полоса: подсветка по границе */
.grain-strip{transition:border-color .2s ease}
.grain-strip:hover{border-color:var(--acc-dim)}
.grain-strip .grain-b1{white-space:nowrap}

/* Подвал: колонка ссылок разряжена */
.grain-foot p a{color:var(--sec)}
.grain-foot p a:hover{color:var(--acc)}
.grain-cols div:first-child p{max-width:46ch}

/* Шкала таймингов: подпись оси не переносится */
.grain-scale text{font-family:var(--mono)}
.grain-scale svg{min-width:520px}
.grain-scale{overflow-x:auto}

/* Секционные метки на узких экранах прижимаются к контенту */
@media(max-width:1000px){
  .grain-scale svg{min-width:480px}
  .grain-hero{padding:44px 0 38px}
  .grain-strip{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  .grain-logo__s{display:none}
  .grain-btns{flex-direction:column;align-items:stretch}
  .grain-b1,.grain-b2{text-align:center}
  .grain-tag{font-size:10.5px}
  .grain-quote::before{display:none}
  main section h3{margin-top:22px}
  .grain-scale{padding:14px 12px 10px}
}

/* Печать: убираем фоны и навигацию */
@media print{
  .grain-bar,.grain-quick,.grain-btns,.grain-strip,.grain-cta{display:none}
  body{background:#fff;color:#111}
  .grain-dl dt{color:#333}
  a{color:#111}
}

/* Уважение к системной настройке уменьшенного движения */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}