/* ============================================================
   Felt&Club — игровой интерфейс: тёмный HUD, неон, срезы углов
   Акцент один (кислотный лайм) + красный только для червей.
   ============================================================ */

:root{
  --bg:#070A0F;
  --bg-2:#0B0F16;
  --surf:#111722;
  --surf-2:#161D2A;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);

  /* акцент задаётся одним набором — этого хватает, чтобы перекрасить весь сайт */
  --key:#A9D636;
  --key-rgb:169 214 54;
  --key-hi:#BCE355;      /* подсветка на ховере */
  --key-dk:#87B024;      /* тёмный край градиента */
  --on-key:#0E1204;      /* текст на акцентной заливке */
  --key-dim:rgb(var(--key-rgb) / .14);
  --key-line:rgb(var(--key-rgb) / .4);
  --red:#FF4757;

  --tx:#E9EDF3;
  --tx-2:#98A1B0;
  --tx-3:#626C7C;

  --disp:'Unbounded',system-ui,sans-serif;
  --sans:'Manrope',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --cut:14px;
  --pad:40px;
  --max:1300px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* технический растр фона — очень слабый */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0,#000 20%,transparent 75%);
  opacity:.6;
}
main,.hud,.foot{position:relative;z-index:1}

::selection{background:var(--key);color:var(--on-key)}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.05}
:focus-visible{outline:2px solid var(--key);outline-offset:3px}

.skip{position:absolute;left:-9999px;background:var(--key);color:var(--on-key);padding:12px 20px;z-index:99}
.skip:focus{left:0;top:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:.86em}
.dim{color:var(--tx-3)}

/* срез углов — единый приём во всём макете */
.clip,.panel,.tile,.btn,.eqc,.row,.board-tbl,.quick button,
.shot__frame,.cnt,.union__facts li,.idcard,.club{
  clip-path:polygon(var(--c,10px) 0,100% 0,100% calc(100% - var(--c,10px)),calc(100% - var(--c,10px)) 100%,0 100%,0 var(--c,10px));
}

/* ── типографика секций ─────────────────────────────────── */
.kicker{
  margin:0;font:700 11px/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--key);
  display:inline-flex;align-items:center;gap:8px;
}
.kicker::before{content:'';width:16px;height:2px;background:var(--key)}
.kicker--key{color:var(--key)}
.h2{font-size:clamp(28px,3.8vw,48px);font-weight:800}
.sub{color:var(--tx-2);max-width:46ch;font-size:16px}
.fine{color:var(--tx-3);font-size:13px;margin-top:16px;line-height:1.5}

/* ── кнопки ─────────────────────────────────────────────── */
.btn{
  --c:8px;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding-inline:22px;
  font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);background:var(--surf-2);color:var(--tx);
  cursor:pointer;transition:.18s ease;
}
.btn:hover{border-color:var(--key-line);color:var(--key)}
.btn--key{background:var(--key);color:var(--on-key);border-color:var(--key)}
.btn--key:hover{background:var(--key-hi);border-color:var(--key-hi);color:var(--on-key);box-shadow:0 0 0 1px var(--key),0 10px 30px -12px rgb(var(--key-rgb) / .7)}
.btn--ghost{background:transparent}
.btn--dark{background:var(--on-key);color:var(--key);border-color:var(--on-key)}
.btn--dark:hover{background:#000;color:var(--key)}
.btn--lg{height:52px;padding-inline:30px;font-size:13px}

/* ── верхний HUD ────────────────────────────────────────── */
.hud{
  --hud-h:66px;
  position:sticky;top:0;z-index:50;
  background:rgba(7,10,15,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hud__in{display:flex;align-items:center;gap:26px;height:var(--hud-h)}
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font:800 19px/1 var(--disp);letter-spacing:.01em;
}
.logo i{
  display:grid;place-items:center;width:26px;height:26px;
  background:var(--key);color:var(--on-key);font-style:normal;font-size:15px;
  --c:6px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
}
.logo__t{display:inline-block}
.logo__t em{font-style:normal;color:var(--key)}

.hud__nav{display:flex;gap:24px;font-size:14px;font-weight:500}
.hud__nav a{color:var(--tx-2);padding:6px 0;position:relative;transition:color .18s}
.hud__nav a:hover{color:var(--tx)}
.hud__nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--key);transition:width .2s ease;
}
.hud__nav a:hover::after{width:100%}

.hud__end{display:flex;align-items:center;gap:16px;margin-left:auto}
.online{
  display:inline-flex;align-items:center;gap:8px;
  font:500 13px/1 var(--mono);color:var(--tx-2);
}
.online em{font-style:normal;color:var(--tx-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.online i,.live i,.chip i{
  width:7px;height:7px;border-radius:50%;background:var(--key);
  box-shadow:0 0 0 0 rgb(var(--key-rgb) / .6);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgb(var(--key-rgb) / .55)}
  70%{box-shadow:0 0 0 7px rgb(var(--key-rgb) / 0)}
  100%{box-shadow:0 0 0 0 rgb(var(--key-rgb) / 0)}
}

.lang{position:relative}
.lang__btn{
  border:1px solid var(--line);background:none;color:var(--tx-2);cursor:pointer;
  padding:8px 11px;font:700 11px/1 var(--mono);letter-spacing:.14em;
}
.lang__btn:hover{color:var(--key);border-color:var(--key-line)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:5;
  margin:0;padding:4px;list-style:none;min-width:74px;
  background:var(--surf);border:1px solid var(--line);display:none;
}
.lang__menu.open{display:block}
.lang__menu li{padding:8px 12px;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--tx-2)}
.lang__menu li:hover{background:var(--key);color:var(--on-key)}

.burger{display:none;flex-direction:column;gap:5px;border:0;background:none;padding:10px 0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--tx)}

/* ── герой ──────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;inset:auto -10% -40% 30%;height:520px;pointer-events:none;
  background:radial-gradient(45% 50% at 50% 50%,rgb(var(--key-rgb) / .09),transparent 70%);
}
.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:56px;align-items:center;
  padding-block:72px 84px;
}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--key-line);color:var(--key);
  padding:8px 14px;font:700 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}
.chip--dark{border-color:rgba(10,13,6,.35);color:var(--on-key)}
.chip--dark i{background:var(--on-key);animation:none}

.hero h1{
  font-size:clamp(42px,6vw,82px);font-weight:800;
  letter-spacing:-.035em;margin:26px 0 22px;
}
.neon{
  color:var(--key);
  text-shadow:0 0 28px rgb(var(--key-rgb) / .45);
}
.hero__lead{color:var(--tx-2);font-size:17px;max-width:44ch}
.hero__lead span{display:block}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 44px}
/* «Написать админу», Telegram и Instagram — один размер, одна строка */
.hero__cta{flex-wrap:nowrap}
.hero__cta > .btn{height:44px;min-width:152px;padding-inline:15px;font-size:11px;white-space:nowrap}
.hero__cta .btn--soc{font-size:12px;gap:8px}
.hero__cta .btn--soc svg{width:15px;height:15px}

.meters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  list-style:none;margin:0;padding:0;
  background:var(--line);border:1px solid var(--line);
}
.meters li{background:var(--bg);padding:16px 14px}
.meters b{
  display:block;font:700 22px/1 var(--mono);
  letter-spacing:-.02em;color:var(--key);
}
.meters span{
  display:block;margin-top:7px;
  font:600 10px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);
}

/* ── виджет: интерактивный расчёт шансов ────────────────── */
.eqc{
  --c:16px;
  margin:0;position:relative;
  background:var(--surf);border:1px solid var(--line);
  box-shadow:0 40px 90px -50px #000;
}
.eqc__bar{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--tx-2);
}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--key);font-weight:700;letter-spacing:.16em}
.eqc__bar .dim{margin-left:auto}

/* стол */
.felt{
  position:relative;margin:20px 18px;padding:18px 0 14px;
  min-height:250px;
  border-radius:50%/32%;
  background:radial-gradient(58% 62% at 50% 45%,#1c6a4e,#12503a 68%,#0d3a2a);
  border:2px solid rgb(var(--key-rgb) / .16);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.opps{position:absolute;inset:0;pointer-events:none}
.opp{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.opp__cards{display:flex;gap:3px}
.opp__cards b{
  width:21px;height:29px;border-radius:3px;display:block;
  /* рубашка белая, как карты стола; светлая насечка оставляет понятным,
     что карта не выбрана, а не просто пустая */
  background:repeating-linear-gradient(45deg,#F2F3F0 0 3px,#DCDFD8 3px 6px);
  border:1px solid rgba(0,0,0,.22);
}
.opp span{
  font:700 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,237,243,.55);white-space:nowrap;
}

.felt__mid,.felt__hero{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.felt__mid .kicker,.felt__hero .kicker{color:rgba(233,237,243,.6)}
.felt__mid .kicker::before,.felt__hero .kicker::before{background:rgba(233,237,243,.5)}
.slots{display:flex;gap:6px}

/* карта-слот */
.slot{
  width:40px;height:56px;padding:0;cursor:pointer;
  display:grid;place-items:center;gap:1px;
  border-radius:4px;font:700 17px/1 var(--sans);
  transition:.15s;
}
.slot em{font-style:normal;font-size:15px;line-height:1;display:block}
.slot span{font:400 20px/1 var(--mono);color:rgba(233,237,243,.5)}
.slot:not(.slot--set){
  background:rgba(0,0,0,.22);
  border:1px dashed rgba(233,237,243,.35);
}
.slot:not(.slot--set):hover{border-color:var(--key);background:rgba(0,0,0,.35)}
.slot--set{
  background:#F2F3F0;color:#12140F;border:1px solid rgba(0,0,0,.2);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7);
}
.slot--set.red{color:var(--red)}
.slot--set:hover{transform:translateY(-2px)}
.slot--hero{width:46px;height:64px;font-size:19px}
.slot--hero em{font-size:17px}

/* управление */
.eqc__ctrl{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 18px 14px;
}
.eqc__ctrl .kicker{margin-right:2px}
.oppb__row{display:flex;gap:4px}
.oppb{
  --c:5px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  width:30px;height:30px;border:1px solid var(--line);background:var(--surf-2);
  color:var(--tx-2);cursor:pointer;font:700 12px/1 var(--mono);transition:.15s;
}
.oppb:hover{color:var(--key);border-color:var(--key-line)}
.oppb.on{background:var(--key);color:var(--on-key);border-color:var(--key)}
.eqc__mini{
  --c:6px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  height:30px;padding:0 12px;margin-left:auto;
  border:1px solid var(--line);background:var(--surf-2);color:var(--tx-2);
  font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:.15s;
}
.eqc__mini + .eqc__mini{margin-left:0}
.eqc__mini:hover{color:var(--key);border-color:var(--key-line)}

/* результат */
.eqc__res{padding:0 18px 20px}
.eq__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.eq__top b{
  font:800 32px/1 var(--mono);letter-spacing:-.03em;color:var(--key);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgb(var(--key-rgb) / .35);
}
.eq__bar{height:10px;background:var(--surf-2);border:1px solid var(--line);position:relative;overflow:hidden}
.eq__bar i{
  position:absolute;inset:0 auto 0 0;width:var(--p);
  background:linear-gradient(90deg,var(--key-dk),var(--key));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.eq__legend{
  display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--tx-3);
}

/* выбор карты */
.picker{
  position:absolute;inset:0;z-index:5;
  background:rgba(7,10,15,.96);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;
}
/* авторский display перебивает встроенное скрытие — возвращаем его явно */
.picker[hidden]{display:none}
.picker__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
  font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--key);
}
.picker__head button{
  background:none;border:0;color:var(--tx-2);cursor:pointer;
  font-size:15px;padding:4px 6px;
}
.picker__head button:hover{color:var(--key)}
.picker__grid{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.pk__suit{display:flex;flex-direction:column;gap:5px}
.pk__label{
  font:700 13px/1 var(--mono);color:var(--tx-3);
}
.pk__label.red{color:var(--red)}
.pk__row{display:grid;grid-template-columns:repeat(13,1fr);gap:4px}
.pk{
  aspect-ratio:3/4;padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:#F2F3F0;color:#12140F;border:1px solid rgba(0,0,0,.2);border-radius:3px;
  font:700 13px/1 var(--sans);transition:.12s;
}
.pk em{font-style:normal;font-size:11px;display:block}
.pk.red{color:var(--red)}
.pk:hover{transform:translateY(-2px);box-shadow:0 6px 12px -4px #000}
.pk.on{outline:2px solid var(--key);outline-offset:1px}
.pk.off{opacity:.2;cursor:not-allowed;filter:grayscale(1)}

/* ── секции ─────────────────────────────────────────────── */
.sec{padding-block:88px}
.sec--dark{background:var(--bg-2);border-block:1px solid var(--line)}
.head{
  display:grid;grid-template-columns:1fr auto;
  gap:12px 32px;align-items:end;padding-bottom:38px;
}
.head .kicker{grid-column:1/-1}
.head .sub{grid-column:1/2;max-width:52ch}
.head .h2{grid-column:1/2}
.head .h2 + .sub{margin-top:4px}
.head .more{
  grid-row:2;grid-column:2;
  font:700 12px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--key);
}
.head .more:hover{text-decoration:underline;text-underline-offset:4px}

/* ── лобби: таблица столов ──────────────────────────────── */
.board-tbl{--c:14px;border:1px solid var(--line);background:var(--surf)}
.board-tbl__head,.row{
  display:grid;
  grid-template-columns:minmax(160px,1.5fr) 1fr 1fr 1fr 130px;
  gap:20px;align-items:center;
  padding:14px 22px;
}
.board-tbl__head{
  border-bottom:1px solid var(--line);
  font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);
}
.row{
  --c:0px;clip-path:none;
  border-bottom:1px solid var(--line-2);
  transition:background .16s,box-shadow .16s;
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surf-2);box-shadow:inset 3px 0 0 var(--key)}
.fmt{font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:3px}
.fmt em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.row .mono{color:var(--tx-2);font-size:13px}
.st{
  justify-self:start;padding:6px 11px;
  font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--tx-3);
}
.st--hot{color:var(--key);border-color:var(--key-line);background:var(--key-dim)}
.st--reg{color:var(--tx);border-color:var(--tx-3)}

/* ── плитки клуба ───────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tiles--4{grid-template-columns:repeat(4,1fr)}
.tile{
  background:var(--surf);border:1px solid var(--line);
  padding:26px 24px 28px;transition:.2s ease;
}
.tile:hover{border-color:var(--key-line);background:var(--surf-2);transform:translateY(-3px)}
.idx{
  display:inline-block;margin-bottom:16px;
  font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--key);
}
.tile h3{font-size:20px;margin-bottom:10px}
.tile p{color:var(--tx-2);font-size:15px;line-height:1.5}

/* ── панели (касса, калькулятор) ────────────────────────── */
.panel{--c:14px;background:var(--surf);border:1px solid var(--line);padding:30px 28px}
.panel--key{
  background:linear-gradient(150deg,var(--key),var(--key-dk));
  border-color:var(--key);color:var(--on-key);
}
.big{font:800 clamp(58px,8vw,96px)/.85 var(--disp);letter-spacing:-.05em;margin-top:20px}
.big em{font-style:normal;font-size:.4em;margin-left:.04em}
.big__sub{margin-top:12px;font-weight:600;font-size:16px;color:rgba(10,13,6,.7)}
.specs{list-style:none;margin:26px 0 0;padding:0}
.specs li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  border-top:1px solid rgba(10,13,6,.18);padding:11px 0;font-size:14px;
}
.specs span{color:rgba(10,13,6,.65)}
.specs b{color:var(--on-key);font-weight:700;font-size:13px}

/* ── калькулятор ────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:stretch}
.calc__io{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.cell .kicker{display:block;margin-bottom:14px}
.calc input[type=number]{
  -moz-appearance:textfield;width:100%;
  background:none;border:0;border-bottom:2px solid var(--line);
  color:var(--tx);padding:0 0 10px;
  font:700 clamp(30px,3.6vw,46px)/1 var(--mono);letter-spacing:-.03em;
}
.calc input[type=number]::-webkit-outer-spin-button,
.calc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input:focus{outline:none;border-bottom-color:var(--key)}
.cell--out output{
  display:block;border-bottom:2px solid var(--key-line);
  color:var(--key);padding-bottom:10px;
  font:700 clamp(30px,3.6vw,46px)/1 var(--mono);letter-spacing:-.03em;
  text-shadow:0 0 26px rgb(var(--key-rgb) / .3);
}
.calc__arrow{color:var(--tx-3);font-family:var(--mono);font-size:20px}
.cell--sm{margin-bottom:24px}
.cell--sm input{font-size:24px!important;max-width:150px}
.calc__side > .kicker{display:block;margin-bottom:12px}
.quick{display:flex;flex-wrap:wrap;gap:7px}
.quick button{
  --c:6px;
  border:1px solid var(--line);background:var(--surf-2);color:var(--tx-2);
  padding:9px 14px;cursor:pointer;
  font:500 13px/1 var(--mono);transition:.15s;
}
.quick button:hover{background:var(--key);color:var(--on-key);border-color:var(--key)}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding:22px 0;font-family:var(--disp);font-weight:600;
  font-size:clamp(17px,1.9vw,21px);transition:color .16s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--key)}
.faq summary::after{
  content:'';width:12px;height:12px;
  border-right:2px solid var(--key);border-bottom:2px solid var(--key);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.faq details[open] summary{color:var(--key)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq details div{padding-bottom:24px}
.faq p{color:var(--tx-2);font-size:15.5px;max-width:70ch}

/* ── финал ──────────────────────────────────────────────── */
.cta{
  background:radial-gradient(60% 130% at 50% 100%,rgb(var(--key-rgb) / .14),transparent 65%),var(--bg-2);
  border-top:1px solid var(--line);
}
.cta__in{padding-block:84px;text-align:center}
.cta h2{font-size:clamp(30px,5.2vw,64px);font-weight:800;letter-spacing:-.035em}
.cta p{color:var(--tx-2);margin:20px auto 30px;max-width:44ch}

/* ── подвал ─────────────────────────────────────────────── */
.foot{background:var(--bg);border-top:1px solid var(--line)}
.foot__in{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);
  gap:32px;padding-block:52px 44px;
}
.foot__brand p{margin-top:16px;color:var(--tx-3);font-size:14px;max-width:32ch}
.foot nav{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.foot nav .kicker{margin-bottom:6px}
.foot nav a{color:var(--tx-2)}
.foot nav a:hover{color:var(--key)}
.foot__end{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:20px 26px;
  font:400 12px/1.5 var(--mono);color:var(--tx-3);
}

/* ── адаптив ────────────────────────────────────────────── */
@media (max-width:1080px){
  :root{--pad:28px}
  /* шапка перестаёт помещаться: убираем вторичные элементы HUD */
  .hud__in{gap:16px}
  .hud__nav{gap:14px;font-size:13px}
  .online{display:none}
  .hero__in{grid-template-columns:1fr;gap:44px}
  .tiles,.tiles--4{grid-template-columns:repeat(2,1fr)}
  .calc{grid-template-columns:1fr}
  .board-tbl__head,.row{grid-template-columns:minmax(140px,1.4fr) 1fr 1fr 1fr 120px;gap:14px}
}

/* до бургера ещё далеко, но счётчик онлайна уже мешает меню */
@media (max-width:1160px){
  .hud__in{gap:16px}
  .hud__nav{gap:14px;font-size:13px}
  .online{display:none}
}

/* меню перестаёт помещаться в строку рядом с переключателем клубов */
@media (max-width:1000px){
  .burger{display:flex}
  .hud__nav{
    position:fixed;inset:66px 0 auto;z-index:40;
    flex-direction:column;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:6px 22px 18px;display:none;
  }
  .hud__nav.open{display:flex}
  .hud__nav a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16px;color:var(--tx)}
  .hud__nav a::after{display:none}
}

@media (max-width:820px){
  :root{--pad:18px}

  .hud{--hud-h:58px}
  .hud__in{gap:8px}

  /* пальцем нужно попадать: доводим зоны касания до ~36-44px */
  .lang__btn{padding:11px 12px}
  .burger{padding:11px 3px}
  .quick button{padding:13px 17px}
  .tbl__act button,.faq summary{min-height:44px}

  .burger{display:flex}
  .hud__end .btn{display:none}
  /* переключатель клубов важнее иконок: те же ссылки есть ниже
     крупными кнопками в первом экране и в блоке контактов */
  .hud__end .soc{display:none}
  .logo{font-size:17px;gap:7px}
  .logo i{width:23px;height:23px;font-size:13px}
  .hud__end{gap:8px}
  .hud__nav{
    position:fixed;inset:var(--hud-h) 0 auto;z-index:40;
    flex-direction:column;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:6px 18px 18px;display:none;
  }
  .hud__nav.open{display:flex}
  .hud__nav a{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16px;color:var(--tx)}

  .hero__in{padding-block:44px 56px}
  .hero h1{margin:20px 0 18px}
  .meters{grid-template-columns:1fr 1fr}

  .hand__body{padding:24px 18px 20px;gap:20px}
  .pc--big{width:72px;height:101px;font-size:27px}
  .pc--big em{font-size:29px}
  .brd__cards .pc{width:33px;height:46px;font-size:14px}
  .eq__top b{font-size:29px}
  .hand__stats div{padding:13px 14px}
  .hand__stats dd{font-size:16px}

  .sec{padding-block:56px}
  .head{grid-template-columns:1fr;padding-bottom:28px}
  .head .h2,.head .sub{grid-column:1}
  .head .more{grid-row:auto;grid-column:1;justify-self:start}

  /* лобби превращается в карточки */
  .board-tbl__head{display:none}
  .row{
    grid-template-columns:1fr auto;gap:8px 14px;
    padding:16px 18px;border-bottom:1px solid var(--line);
  }
  .row .fmt{grid-column:1;grid-row:1}
  .row .st{grid-column:2;grid-row:1;justify-self:end}
  .row .mono:nth-of-type(1){grid-column:1;grid-row:2}
  .row .mono:nth-of-type(2){grid-column:2;grid-row:2;text-align:right}
  .row .mono:nth-of-type(3){grid-column:1/3;grid-row:3;color:var(--key)}

  .tiles,.tiles--4{grid-template-columns:1fr}
  .panel{padding:24px 20px}
  .calc__io{grid-template-columns:1fr;gap:24px}
  .calc__arrow{display:none}
  .cta__in{padding-block:60px}
  .foot__in{grid-template-columns:1fr 1fr;gap:26px}
  .foot__brand{grid-column:1/-1}
}

/* число онлайна обновляется скриптом — фиксируем ширину, чтобы HUD не дёргался */
.online b{
  font-weight:700;color:var(--tx);
  font-variant-numeric:tabular-nums;
  min-width:4.6ch;text-align:right;
}

/* ── переключатель клубов в шапке ───────────────────────── */
.cswitch{
  --c:9px;
  display:inline-flex;align-items:stretch;gap:0;flex-shrink:0;
  padding:0;overflow:hidden;
  border:1px solid var(--key-line);background:var(--key-dim);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
}
/* полная подпись на широких экранах, короткая — на узких */
.cswitch__s{display:none}

/* рядом с развёрнутым меню три полных названия перестают помещаться */
@media (max-width:1280px){
  .cswitch__w{display:none}
  .cswitch__s{display:inline}
}
/* в бургер-режиме меню места не занимает — названия возвращаем */
@media (max-width:1000px){
  .cswitch__w{display:inline}
  .cswitch__s{display:none}
}
/* на телефоне в строку помещаются только цифры */
@media (max-width:560px){
  .cswitch__w{display:none}
  .cswitch__s{display:inline}
}
.cswitch__i{
  display:grid;place-items:center;
  min-height:30px;padding:0 12px;
  font:700 12px/1 var(--mono);color:var(--tx-2);
  border:0;border-right:1px solid var(--key-line);
  transition:.16s;
}
.cswitch__i:hover{color:var(--key);background:rgb(var(--key-rgb) / .12)}
.cswitch__i:last-child{border-right:0}
/* активный сегмент заливается целиком: срез делает сам контейнер */
.cswitch__i.is-now{background:var(--key);color:var(--on-key)}

/* ── шапка подстраивается под длину слов ─────────────────
   Брейкпоинты были подобраны под русский, а армянское меню шире
   на 120px — и содержимое вылезало за край. Классы ниже вешает
   script.js по факту переполнения, поэтому работает на любом
   языке и любой ширине, а не только там, где угадали заранее. */
.hud--short .cswitch__w{display:none}
.hud--short .cswitch__s{display:inline}

.hud--tight .burger{display:flex}
.hud--tight .hud__nav{
  position:fixed;inset:var(--hud-h) 0 auto;z-index:40;
  flex-direction:column;gap:0;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:6px var(--pad) 18px;display:none;
}
.hud--tight .hud__nav.open{display:flex}
.hud--tight .hud__nav a{
  padding:15px 0;border-bottom:1px solid var(--line-2);
  font-size:16px;color:var(--tx);
}

/* ── союз ───────────────────────────────────────────────── */
.union{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.union__text{display:grid;gap:16px;max-width:62ch}
.union__text p{color:var(--tx-2);font-size:16.5px;line-height:1.62}
.union__text b{color:var(--tx);font-weight:700}
.union__facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.union__facts li{
  --c:12px;background:var(--surf);border:1px solid var(--line);
  padding:20px 22px;display:grid;gap:6px;
}
.union__facts b{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--key)}
.union__facts span{color:var(--tx-2);font-size:14.5px;line-height:1.45}

/* ── виды покера ────────────────────────────────────────── */
.games{margin-top:52px}
.games__h{font-size:22px;margin-bottom:20px}
.games__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;
  border-top:1px solid var(--line);
}
.games__list li{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  border-bottom:1px solid var(--line-2);padding:14px 0;
}
.games__list b{font:700 14px/1.4 var(--mono);letter-spacing:.06em;color:var(--key)}
.games__list span{color:var(--tx-2);font-size:14.5px;line-height:1.45}

/* ── скриншоты ──────────────────────────────────────────── */
/* вертикальный формат телефона: лобби показываем целиком в рамке,
   столы кадрируем по центру, где идёт сама игра */
.shots{display:grid;grid-template-columns:296px 1fr;gap:34px;align-items:start}

.phone{margin:0}
.phone__frame{
  aspect-ratio:9/19.5;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);background:var(--surf);
  box-shadow:0 40px 80px -44px #000, inset 0 0 0 6px #0b0f16;
  padding:6px;
}
.phone__frame img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;
}

.shots__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* у клуба нет своего лобби — большого кадра нет, сетка занимает всю ширину */
.shots__grid--wide{grid-column:1/-1}
.shot{margin:0}
.shot__frame{
  --c:12px;
  aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--line);background:var(--surf);
  transition:border-color .2s;
}
.shot__frame img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 30%;
  transition:transform .3s ease;
}
.shot:hover .shot__frame{border-color:var(--key-line)}
.shot:hover .shot__frame img{transform:scale(1.03)}
figure figcaption{margin-top:12px;color:var(--tx-2);font-size:14px}

/* файл ещё не положен — показываем рамку с именем вместо битой картинки */
.is-missing{
  display:grid;place-items:center;text-align:center;padding:16px;
  border-style:dashed;border-color:rgb(var(--key-rgb) / .3);
  color:var(--tx-3);font:700 11px/1.5 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;
}
.is-missing img{display:none}
.is-missing::after{
  content:attr(data-file);
  font-size:10px;letter-spacing:.05em;text-transform:none;opacity:.75;
}

/* ── касса ──────────────────────────────────────────────── */
.cash{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.cash__col .idx{margin-bottom:18px}
.cash__steps{margin:0;padding:0;list-style:none;counter-reset:c}
.cash__steps li{
  counter-increment:c;position:relative;
  padding:0 0 16px 38px;color:var(--tx-2);font-size:15px;line-height:1.5;
}
.cash__steps li::before{
  content:counter(c);position:absolute;left:0;top:0;
  width:24px;height:24px;display:grid;place-items:center;
  border:1px solid var(--key-line);color:var(--key);
  font:700 11px/1 var(--mono);
}
.cash__steps li:last-child{padding-bottom:0}
.cash__note{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--tx-2);font-size:14.5px;
}
.cash__note b{color:var(--key);font-weight:700}
.cash__rb{display:flex;flex-direction:column}

/* ── контакты ───────────────────────────────────────────── */
.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* в соцсетях карточки две, а не четыре. Объявлено до медиазапросов
   намеренно: ниже .contacts ужимается до 1fr, и на телефоне
   должно побеждать именно оно, а не эта пара колонок. */
.contacts--soc{grid-template-columns:repeat(2,1fr)}
.cnt{
  background:var(--surf);border:1px solid var(--line);
  padding:24px 22px 26px;display:grid;gap:8px;align-content:start;
  transition:.2s ease;
}
.cnt:hover{border-color:var(--key-line);background:var(--surf-2);transform:translateY(-3px)}
.cnt__tag{
  font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--key);
}
.cnt b{font-family:var(--disp);font-size:19px;font-weight:600}
.cnt__sub{color:var(--tx-2);font-size:14px;line-height:1.45}
.cnt--key{background:var(--key);border-color:var(--key);color:var(--on-key)}
.cnt--key .cnt__tag{color:rgba(10,13,6,.65)}
.cnt--key .cnt__sub{color:rgba(10,13,6,.72)}
.cnt--key:hover{background:var(--key-hi);border-color:var(--key-hi)}
/* ссылка ещё не подставлена — помечаем, чтобы не потерять */
.cnt[href="#"]::after{
  content:'← ' attr(data-need);
  margin-top:6px;font:400 10px/1.4 var(--mono);color:var(--red);
}
.cnt--key[href="#"]::after{color:#7A1F16}

@media (max-width:1080px){
  .union{grid-template-columns:1fr;gap:26px}
  .cash{grid-template-columns:1fr 1fr}
  .cash__rb{grid-column:1/-1}
  .contacts{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){

  .games__list{grid-template-columns:1fr;gap:0}
  .games__list li{grid-template-columns:92px 1fr;gap:12px}
  .shots{grid-template-columns:1fr 1fr;gap:12px}
  .cash,.contacts{grid-template-columns:1fr}
  .union__text p{font-size:15.5px}
}

/* ── бонусы ─────────────────────────────────────────────── */
.bonuses{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.bcard{display:flex;flex-direction:column}
.bcard .idx{margin-bottom:0}
/* длинное слово вместо числа — кегль меньше, чтобы не ломать строку */
.big--word{
  font-size:clamp(38px,5.2vw,64px);
  color:var(--key);text-shadow:0 0 40px rgb(var(--key-rgb) / .28);
}
.bcard__sub{
  margin-top:12px;margin-bottom:24px;
  color:var(--tx-2);font-size:15.5px;font-weight:500;
}
.bcard .specs{margin-top:auto;padding-top:22px}
.bcard .cash__note{margin-top:auto}

@media (max-width:820px){
  .bonuses{grid-template-columns:1fr}
}

/* ── ID клуба ───────────────────────────────────────────── */
.idcard{
  --c:12px;
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:28px;padding:10px 11px 10px 18px;
  border:1px solid var(--key-line);
  background-color:var(--key-dim);
}
.idcard__label{
  font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-2);
}
.idcard__num{
  font:700 clamp(22px,2.4vw,27px)/1 var(--mono);
  letter-spacing:.05em;color:var(--key);
  font-variant-numeric:tabular-nums;
}
.idcard__copy{
  --c:7px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  border:0;background:var(--key);color:var(--on-key);
  padding:8px 13px;cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  transition:.16s;
}
.idcard__copy:hover{background:var(--key-hi)}
.idcard__copy.done{background:transparent;color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}

/* ── быстрые ссылки на соцсети ──────────────────────────── */
.soc{
  width:36px;height:36px;display:grid;place-items:center;position:relative;
  border:1px solid var(--line);color:var(--tx-2);transition:.18s;
}
.soc svg{width:17px;height:17px}
.soc:hover{border-color:var(--key);color:var(--key)}
.btn--soc{
  gap:9px;background:transparent;border-color:var(--line);
  position:relative;text-transform:none;letter-spacing:.04em;font-size:13px;
}
.btn--soc svg{width:17px;height:17px}
.btn--soc:hover{border-color:var(--key);color:var(--key)}
/* ссылка ещё не подставлена */
.soc[href="#"]::after,.btn--soc[href="#"]::after{
  content:'';position:absolute;top:-4px;right:-4px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg);
}

@media (max-width:1080px){
  .shots{grid-template-columns:246px 1fr;gap:24px}
  .shots__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .shots{grid-template-columns:1fr;gap:28px}
  .phone{max-width:270px;margin-inline:auto}
  .shots__grid{grid-template-columns:1fr 1fr;gap:12px}
  .idcard{width:100%;justify-content:space-between;gap:12px;padding-left:16px}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero__cta > .btn{width:100%;min-width:0}
  .hero__cta > .btn:first-child{grid-column:1/-1}
}

/* ── линия на срезанных гранях ───────────────────────────── */
/* clip-path срезает угол вместе с border, и по диагонали линия пропадает.
   Дорисовываем её отдельным слоем: он не зависит от фонов и ховеров блока. */
.panel:not(.panel--key),.tile,.btn:not(.btn--key):not(.btn--dark),
.eqc,.board-tbl,.quick button,.shot__frame,.cnt:not(.cnt--key),
.union__facts li,.idcard,.club,
.cswitch,.eqc__mini,.oppb{position:relative}

.panel:not(.panel--key)::before,.tile::before,
.btn:not(.btn--key):not(.btn--dark)::before,
.eqc::before,.board-tbl::before,.quick button::before,
.shot__frame::before,.cnt:not(.cnt--key)::before,
.union__facts li::before,.idcard::before,.club::before,
.cswitch::before,.eqc__mini::before,.oppb:not(.on)::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(135deg,transparent calc(50% - .5px),var(--edge,var(--line)) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(135deg,transparent calc(50% - .5px),var(--edge,var(--line)) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:var(--c,10px) var(--c,10px);
  background-position:top left,bottom right;
  background-repeat:no-repeat;
  transition:opacity .2s;
}
/* блоки с акцентной рамкой — линия того же цвета */
.idcard::before,.cswitch::before,.eqc__mini::before,.oppb:not(.on)::before{--edge:var(--key-line)}
.club--now::before{--edge:var(--key)}
.tile:hover::before,.cnt:not(.cnt--key):hover::before,.club:hover::before,
.shot:hover .shot__frame::before,.btn:not(.btn--key):not(.btn--dark):hover::before,
.union__facts li:hover::before,.eqc__mini:hover::before,
.oppb:not(.on):hover::before{--edge:var(--key-line)}
/* на сплошной заливке линия не нужна */
.quick button:hover::before{opacity:0}

/* ── карточки клубов ────────────────────────────────────── */
.clubs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.club{
  --c:12px;
  background-color:var(--surf);border:1px solid var(--line);
  padding:24px 22px 22px;
  display:flex;flex-direction:column;gap:10px;
  transition:.2s ease;
}
.club:hover{border-color:var(--key-line);background-color:var(--surf-2);transform:translateY(-3px)}
.club__tag{
  font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);
}
.club h3{font-size:26px;letter-spacing:-.01em}
.club__note{color:var(--tx-2);font-size:14.5px;line-height:1.45;flex:1}

/* текущий клуб — акцентом, чтобы было видно, где вы */
.club--now{
  background-color:var(--key-dim);border-color:var(--key);
  position:relative;
}
.club--now .club__tag{color:var(--key)}
.club--now .club__id{border-color:var(--key-line)}

.club__id{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line);
}
.club__id > span{
  font:700 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);
}
.club__id b{
  font:700 21px/1 var(--mono);letter-spacing:.05em;color:var(--key);
  font-variant-numeric:tabular-nums;margin-right:auto;
}
/* ID ещё не задан */
.club__id b[data-need]{color:var(--tx-3)}
.club__id b[data-need]::after{
  content:' ← ' attr(data-need);
  font-size:10px;letter-spacing:.04em;color:var(--red);
}
.club__copy{
  --c:6px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  border:0;background:var(--key);color:var(--on-key);
  padding:8px 12px;cursor:pointer;
  font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  transition:.16s;
}
.club__copy:hover{background:var(--key-hi)}
.club__copy.done{background:transparent;color:var(--key);box-shadow:inset 0 0 0 1px var(--key)}
.club__copy:disabled{background:var(--surf-2);color:var(--tx-3);cursor:not-allowed}

@media (max-width:1080px){
  .clubs{grid-template-columns:1fr 1fr}
  .club--now{grid-column:1/-1}
}
@media (max-width:820px){
  .clubs{grid-template-columns:1fr}
  .club--now{grid-column:auto}
  .club h3{font-size:23px}
}

/* ── переход на сайт соседнего клуба ────────────────────── */
.club__go{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font:700 11px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--key);
  transition:.16s;
}
.club__go:hover{letter-spacing:.14em}

/* ══════════ ТЕМЫ САЙТОВ СЕТИ ══════════
   Раскладка и компоненты общие, меняются акцент, подложка и фактура фона —
   сайты читаются как одна сеть, но не выглядят копиями друг друга. */

/* «Замазка 3» — холодный циан */
[data-theme="cyan"]{
  --key:#35BEDB;
  --key-rgb:53 190 219;
  --key-hi:#5FD2EA;
  --key-dk:#218FA8;
  --on-key:#04131B;
  --bg:#05090F;
  --bg-2:#080F19;
  --surf:#0E1825;
  --surf-2:#142031;
}
/* косая штриховка вместо клетки */
[data-theme="cyan"] body::before,
body[data-theme="cyan"]::before{
  background-image:repeating-linear-gradient(45deg,var(--line-2) 0 1px,transparent 1px 24px);
  background-size:auto;
}

/* «Замазка 1» — фиолетовый */
[data-theme="violet"]{
  --key:#9A6BE8;
  --key-rgb:154 107 232;
  --key-hi:#B389F2;
  --key-dk:#7A4CC4;
  --on-key:#120A1E;
  --bg:#08060F;
  --bg-2:#0C0918;
  --surf:#150F23;
  --surf-2:#1D1630;
}
/* точечная сетка вместо клетки */
[data-theme="violet"] body::before,
body[data-theme="violet"]::before{
  background-image:radial-gradient(var(--line-2) 1.2px,transparent 1.2px);
  background-size:26px 26px;
}

/* ── зоны касания на телефоне ─────────────────────────────
   Блок в конце файла намеренно: базовые стили переключателя и кнопок
   копирования объявлены ниже основного мобильного блока и перебивали его. */
@media (max-width:820px){
  .cswitch__i{min-height:36px;padding:0 10px;font-size:13px}
  .idcard__copy,.club__copy{padding:12px 15px;font-size:9.5px}
}

/* плитка с перечнем форматов — текст, а не число, поэтому кегль меньше */
.meters__txt b{font-size:15px;line-height:1.35;letter-spacing:0}
@media (max-width:820px){ .meters__txt b{font-size:14px} }

/* название и номер союза — первая строка блока */
.union__name{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.union__name span{
  font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);
}
.union__name b{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;color:var(--key);
}
.union__name em{
  font:500 12px/1 var(--mono);font-style:normal;
  letter-spacing:.08em;color:var(--tx-2);
  padding:5px 9px;border:1px solid var(--line);
}
@media (max-width:820px){
  .union__name{gap:8px}
  .union__name b{font-size:21px}
}

/* ── полоса доверия под первым экраном ──────────────────── */
.trust{background:var(--bg-2);border-block:1px solid var(--line)}
.trust__in{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border-inline:1px solid var(--line);
}
.trust__in > div{
  background:var(--bg-2);padding:18px 22px;
  display:flex;flex-direction:column;gap:5px;
}
.trust__in b{
  font-family:var(--disp);font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--key);
}
.trust__in span{
  font:500 12.5px/1.3 var(--sans);color:var(--tx-2);
}
@media (max-width:820px){
  .trust__in{grid-template-columns:1fr;border-inline:0}
  .trust__in > div{padding:14px 18px;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .trust__in b{font-size:15px}
}

/* ── линия на срезах у сплошных акцентных блоков ─────────
   Здесь заливка и рамка одного цвета, поэтому линия рисуется
   контрастной — тем же тоном, что и текст поверх заливки. */
.btn--key,.btn--dark,.cnt--key,.panel--key,
.idcard__copy,.club__copy,.logo i,.oppb.on{position:relative}

.btn--key::before,.btn--dark::before,.cnt--key::before,.panel--key::before,
.idcard__copy::before,.club__copy::before,.logo i::before,.oppb.on::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(135deg,transparent calc(50% - .5px),var(--edge) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(135deg,transparent calc(50% - .5px),var(--edge) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:var(--c,10px) var(--c,10px);
  background-position:top left,bottom right;
  background-repeat:no-repeat;
  --edge:rgb(var(--key-rgb) / .55);
}
/* на лаймовой заливке контраст даёт тёмный тон */
.btn--key::before,.cnt--key::before,.panel--key::before,
.idcard__copy::before,.club__copy::before,.logo i::before,
.oppb.on::before{--edge:var(--on-key)}
/* тёмная кнопка — наоборот, светлая линия */
.btn--dark::before{--edge:var(--key)}

/* парные значения в ячейке таблицы лимитов — в столбик */
.row .stack{display:flex;flex-direction:column;gap:3px;line-height:1.35}

/* подсказка вынесена из овала — внутри она наезжала на карты */
.eqc__hint{
  flex:1 0 100%;
  font:500 12px/1.3 var(--sans);color:var(--tx-3);
  margin-bottom:2px;
}

/* ── виджет на телефоне: карты мельче, овал выше ────────── */
@media (max-width:820px){
  /* поля срезаны до минимума: каждый пиксель ширины даёт место оппонентам */
  /* Карты прижаты к низу, верх отдан оппонентам. Высота подобрана
     впритык под содержимое: радиус дуги задаётся в % от высоты, поэтому
     лишние пиксели тут превращались в пустую полосу посреди сукна.
     max-width — чтобы на 500-820px овал не расплывался в пустой блин. */
  .felt{
    min-height:288px;margin:16px auto;max-width:440px;
    padding:14px 0 16px;gap:10px;justify-content:flex-end;
  }
  .slots{gap:5px}
  .slot{width:39px;height:55px;font-size:17px}
  .slot em{font-size:15px}
  .slot span{font-size:19px}
  .slot--hero{width:45px;height:63px;font-size:19px}
  .slot--hero em{font-size:17px}

  .eqc__ctrl{padding:0 14px 14px;gap:6px}
  .eqc__mini{margin-left:0}
  .eqc__res{padding:0 14px 18px}
  .eq__top b{font-size:27px}
  /* в строку два значения не помещаются и рвутся посередине слова */
  .eq__legend{flex-direction:column;gap:3px}
}

/* выбор карты на телефоне: по семь в ряд, чтобы попадать пальцем */
@media (max-width:820px){
  /* fixed здесь бесполезен: clip-path на .eqc обрезает фиксированных
     потомков. Держим absolute, а виджет подматываем под шапку (widget.js). */
  .picker{background:rgba(7,10,15,.985)}
  .picker__head{padding:13px 14px;position:sticky;top:0;z-index:1;background:inherit}
  .picker__head button{padding:8px 8px;font-size:17px}
  .picker__grid{padding:12px 14px 24px;gap:12px}
}

/* ── просмотр скриншота во весь экран ────────────────────── */
.lb{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:56px 16px 20px;
  background:rgba(5,7,11,.94);backdrop-filter:blur(8px);
}
/* авторский display перебивает встроенное скрытие — возвращаем явно */
.lb[hidden]{display:none}

.lb__body{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-height:100%;min-width:0;
}
.lb__body img{
  max-width:100%;max-height:calc(100vh - 132px);
  width:auto;height:auto;object-fit:contain;
  border-radius:10px;border:1px solid var(--line);
  background:var(--surf);
}
.lb__body figcaption{
  font:500 13px/1.4 var(--sans);color:var(--tx-2);text-align:center;
}

.lb__close,.lb__nav{
  flex-shrink:0;
  background:var(--surf);border:1px solid var(--line);color:var(--tx);
  cursor:pointer;transition:.16s;
}
.lb__close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;font-size:16px;border-radius:50%;
}
.lb__nav{width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1;padding:0}
.lb__close:hover,.lb__nav:hover{border-color:var(--key);color:var(--key)}

@media (max-width:820px){
  .lb{padding:52px 10px 16px;gap:8px}
  .lb__nav{width:38px;height:38px;font-size:21px}
  .lb__body img{max-height:calc(100vh - 150px)}
}

/* ── карты оппонентов: место за столом — одна кнопка ─────── */
.opp{
  border:0;background:none;padding:4px;cursor:pointer;
  border-radius:8px;transition:.16s;
  /* контейнер .opps закрыт от мыши (он лежит поверх карт стола),
     поэтому попадание включаем обратно точечно — на самих местах */
  pointer-events:auto;
}
.opp:hover,.opp:focus-visible{background:rgb(var(--key-rgb) / .16)}
.opp--set .opp__cards b{border-color:var(--key)}

/* открытая карта оппонента — мелкая, но читаемая */
.opp__c{
  display:grid;place-items:center;gap:0;
  background:#F2F3F0;color:#12140F;
  font:700 14px/1 var(--sans);
}
.opp__c em{font-style:normal;font-size:12px;line-height:1;display:block}
.opp__c.red{color:var(--red)}

/* кнопка возврата к случайной руке */
#pickerRandom{
  margin-left:auto;margin-right:10px;
  background:none;border:1px solid var(--line);color:var(--tx-2);
  padding:6px 10px;cursor:pointer;
  font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:.16s;
}
#pickerRandom:hover{border-color:var(--key);color:var(--key)}
#pickerRandom[hidden]{display:none}

@media (max-width:820px){
  .eqc__bar,.eqc__ctrl,.eqc__res{padding-left:12px;padding-right:12px}
  .opp{padding:4px}
  .opp__cards{gap:3px}
  /* карта 18px шириной — мимо пальца; растягиваем зону касания наружу,
     не трогая размер. Половина зазора каждому, чтобы цели не перекрылись. */
  .opp__cards b{position:relative}
  .opp__cards b::after{content:'';position:absolute;inset:-9px 1.5px -9px -9px}
  .opp__cards b+b::after{inset:-9px -9px -9px 1.5px}
  .opp__cards b,.opp__c{width:24px;height:33px}
  .opp__c{font-size:15px}
  .opp__c em{font-size:12px}
}