@font-face{font-family:"Cairo";font-style:normal;font-weight:600;font-display:swap;src:url(../font/cairo-600-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:600;font-display:swap;src:url(../font/cairo-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:600;font-display:swap;src:url(../font/cairo-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cairo";font-style:normal;font-weight:800;font-display:swap;src:url(../font/cairo-800-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:800;font-display:swap;src:url(../font/cairo-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:800;font-display:swap;src:url(../font/cairo-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../font/tajawal-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../font/tajawal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../font/tajawal-500-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../font/tajawal-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../font/tajawal-700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../font/tajawal-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   tawaqqat-masr.com — «ليل المباراة»
   Ночь матча: синь, золото, нильская бирюза. Вёрстка RTL.
   ============================================================ */
:root{
  --night:#080d18;
  --night-2:#0b1220;
  --slab:#111c31;
  --slab-2:#16233c;
  --slab-3:#1c2c49;
  --sand:#eaf0fb;
  --sand-2:#a8b6d1;
  /* #7a88a4 проходил только на самом тёмном фоне: на карточках (--slab-2,
     --slab-3) контраст падал до 4.39 и 3.91. Осветлён до нормы везде. */
  --sand-3:#8c99b4;
  --gold:#f2b544;
  --gold-2:#ffd685;
  --nile:#2ad5b5;
  --nile-2:#7defd6;
  --flag:#e4474f;
  --ok:#3ecf8e;
  --line:rgba(234,240,251,.13);
  --line-2:rgba(234,240,251,.07);
  --r1:10px; --r2:18px; --r3:28px;
  --disp:"Cairo","Segoe UI",Tahoma,sans-serif;
  --text:"Tajawal","Segoe UI",Tahoma,sans-serif;
  --mono:"Cascadia Mono",Consolas,monospace;
  --shell:min(1240px,100% - 32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--night); color:var(--sand);
  font:400 clamp(16px,.35vw + 15px,17.5px)/1.9 var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22%3E%3Cg fill=%22none%22 stroke=%22%23f2b544%22 stroke-opacity=%22.16%22 stroke-width=%221%22%3E%3Cpolygon points=%2258.88,32.00 43.92,36.94 51.01,51.01 36.94,43.92 32.00,58.88 27.06,43.92 12.99,51.01 20.08,36.94 5.12,32.00 20.08,27.06 12.99,12.99 27.06,20.08 32.00,5.12 36.94,20.08 51.01,12.99 43.92,27.06%22/%3E%3Cpolygon points=%2256.83,42.29 41.12,41.12 42.29,56.83 32.00,44.90 21.71,56.83 22.88,41.12 7.17,42.29 19.10,32.00 7.17,21.71 22.88,22.88 21.71,7.17 32.00,19.10 42.29,7.17 41.12,22.88 56.83,21.71 44.90,32.00%22/%3E%3Cpath d=%22M0 32.0H64.0 M32.0 0V64.0%22/%3E%3C/g%3E%3C/svg%3E"); background-size:64px 64px; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--disp); line-height:1.24; font-weight:800; margin:0 0 .5em}
p{margin:0 0 1.1em}
a{color:var(--nile-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
a:hover{color:#fff; text-decoration-thickness:2px}
strong{color:#fff; font-weight:700}
/* Арабская вязь соединяет буквы внутри слова, и положительная разрядка
   растягивает эти соединения: слово рассыпается. Базово letter-spacing нет,
   и включать его можно только на латинской подписи (класс `.lat`).
   Отрицательная разрядка на крупных заголовках вязи не мешает. */
body{letter-spacing:normal}
.lat{letter-spacing:.08em}
.lb{text-transform:lowercase !important}
.shell{width:var(--shell); margin-inline:auto}
.skip{position:absolute; right:-9999px; top:0; background:var(--gold); color:#20160a;
  padding:10px 18px; border-radius:0 0 12px 12px; z-index:60}
.skip:focus{right:20px}

/* --- шапка ------------------------------------------------- */
.crown{position:sticky; top:0; z-index:50; background:rgba(8,13,24,.94);
  box-shadow:0 1px 0 var(--line)}
.crown__in{display:flex; align-items:center; gap:18px; padding:11px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
  flex:none}
.brand__m{width:38px; height:38px}
.brand b{display:block; font:800 20px/1 var(--disp); color:#fff}
.brand span{display:block; font-size:11.5px; color:var(--sand-3)}
/* Меню на телефоне прокручивается вбок, и край растушёван: без этого
   пункт обрезается посреди слова и выглядит обрубком, а не намёком. */
.nav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; max-width:100%;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,
    #000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,
    #000 calc(100% - 18px),transparent 100%)}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--sand-2); text-decoration:none; font-size:14.5px; padding:7px 9px;
  border-radius:9px; white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:#fff; background:rgba(242,181,68,.15)}
.crown .btn{margin-inline-start:auto}
.bar{height:2px; background:transparent}
.bar i{display:block; height:2px; width:0;
  background:linear-gradient(90deg,var(--nile),var(--gold))}

/* --- кнопки ------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:999px;
  font:700 16px/1 var(--disp); text-decoration:none; white-space:nowrap;
  background:var(--slab-2); color:#fff; box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px); color:#fff; text-decoration:none}
.btn--go{background:linear-gradient(135deg,var(--gold),#e08a2b); color:#241704;
  box-shadow:0 12px 26px -14px rgba(242,181,68,.9)}
.btn--go:hover{color:#241704; box-shadow:0 16px 30px -12px rgba(242,181,68,1)}
.btn--go span::after{content:"‹"; margin-inline-start:6px; font-weight:800}
.btn--line{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--sm{padding:9px 17px; font-size:14.5px}
.note{display:block; font-size:12.5px; color:var(--sand-3)}

/* --- крошки ------------------------------------------------- */
/* Разметка `.crumbs` была, а правил у неё не было вовсе: путь показывался
   обычной ссылкой в размер текста. Палец на телефоне требует своей площади,
   поэтому у ссылки свой padding, а полоса подтянута вверх на его величину. */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px;
  color:var(--sand-3); padding-top:6px}
.crumbs a{color:var(--sand-3); display:inline-block; padding:12px 8px;
  margin-inline-start:-8px; border-radius:10px}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.55}

/* --- герой -------------------------------------------------- */
.beam{position:relative; overflow:hidden; padding:34px 0 0;
  background:
    radial-gradient(120% 90% at 78% -10%, rgba(42,213,181,.16), transparent 60%),
    radial-gradient(90% 80% at 12% 0%, rgba(242,181,68,.16), transparent 62%),
    linear-gradient(180deg,var(--night-2),var(--night))}
.beam::before{content:""; position:absolute; top:-140px; right:8%; width:520px; height:620px;
  background:linear-gradient(200deg,rgba(242,181,68,.22),transparent 62%);
  transform:rotate(14deg); filter:blur(6px); pointer-events:none}
.beam::after{content:""; position:absolute; top:-120px; left:4%; width:420px; height:560px;
  background:linear-gradient(160deg,rgba(42,213,181,.2),transparent 60%);
  transform:rotate(-12deg); filter:blur(6px); pointer-events:none}
.beam__g{position:relative; display:grid; grid-template-columns:1fr 400px; gap:34px 40px;
  align-items:start; padding-bottom:26px}
.tag{display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
  font:600 12.5px/1 var(--mono); color:var(--gold-2);
  background:rgba(242,181,68,.12); padding:8px 14px; border-radius:999px}
.tag i{width:7px; height:7px; border-radius:50%; background:var(--nile);
  box-shadow:0 0 0 4px rgba(42,213,181,.2)}
.beam h1{font-size:clamp(30px,3.6vw,52px); margin-bottom:.3em; letter-spacing:-.01em}
.beam h1 em{font-style:normal; background:linear-gradient(120deg,var(--gold-2),var(--nile));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(17px,.6vw + 15px,19.5px); color:var(--sand-2); max-width:60ch}
.acts{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px}
.jump{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line)}
.jump b{font:600 11.5px/1 var(--mono); color:var(--sand-3);
  margin-inline-end:4px}
.jump a{font-size:14.5px; text-decoration:none; color:var(--sand-2); padding:8px 15px;
  border-radius:999px; background:rgba(234,240,251,.06);
  box-shadow:inset 0 0 0 1px var(--line-2); transition:background .18s ease, color .18s ease}
.jump a:hover{color:#fff; background:rgba(242,181,68,.2)}

/* --- карточка матча (герой главной) ------------------------- */
.mcard{margin:0; border-radius:var(--r3); overflow:hidden; background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line), 0 30px 60px -40px #000}
.mcard__tag{display:block; padding:12px 20px; font:600 11.5px/1.5 var(--mono);
  color:#241704;
  background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.mcard__hd{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:10px; padding:16px 20px 6px}
.mcard__hd b{display:block; font:700 17px/1.3 var(--disp); color:#fff}
.mcard__hd span{display:block; font-size:12.5px; color:var(--sand-3)}
.mcard__vs{width:36px; height:36px; border-radius:50%; background:var(--slab-3);
  box-shadow:inset 0 0 0 1px var(--line); display:flex; align-items:center;
  justify-content:center; font:700 12px/1 var(--mono); color:var(--sand-2)}
.mcard__vs::before{content:attr(data-v)}
.radar{padding:2px 10px 0}
.radar__svg{display:block; width:100%; max-width:320px; height:auto; margin:0 auto}
.radar__leg{display:flex; justify-content:center; gap:18px; padding:0 20px 10px;
  font-size:12.5px; color:var(--sand-2)}
.radar__leg i{display:inline-block; width:22px; height:3px; border-radius:2px;
  margin-inline-end:7px; vertical-align:middle}
.radar__leg .a i{background:var(--nile)}
.radar__leg .b i{background:var(--gold)}
.mcard__rows{padding:4px 20px 8px}
.mcard__rows div{display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-top:1px solid var(--line-2); font-size:14.5px}
.mcard__rows span{color:var(--sand-3)}
.mcard__rows b{color:#fff; font-weight:600}
.mcard__foot{padding:0 20px 18px; font-size:12.5px; color:var(--sand-3)}

/* колонка «коротко» на остальных страницах */
.qk{border-radius:var(--r3); padding:22px 24px; background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line)}
.qk h2{font-size:14px; color:var(--gold-2); font-family:var(--mono);
  font-weight:600; margin-bottom:14px}
.qk ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.qk li{position:relative; padding-inline-start:26px; font-size:15.5px; color:var(--sand-2)}
.qk li::before{content:""; position:absolute; right:0; top:.62em; width:10px; height:10px;
  border-radius:3px; background:linear-gradient(135deg,var(--gold),var(--nile));
  transform:rotate(45deg)}

/* --- полоса KPI и бегущая строка ---------------------------- */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.kpi{background:var(--night-2); padding:16px 20px}
.kpi b{display:block; font:800 17px/1.3 var(--disp); color:#fff}
.kpi span{display:block; font-size:12.5px; color:var(--sand-3)}
.strip{position:relative; overflow:hidden; margin:0; padding:11px 0;
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.strip__row{display:flex; gap:34px; width:max-content; animation:slide 44s linear infinite}
.strip__row span{font:600 12.5px/1 var(--mono); color:var(--sand-3);
  white-space:nowrap}
.strip__row span::before{content:attr(data-v)}
.strip__row span::after{content:"◆"; color:var(--gold); margin-inline-start:34px; opacity:.7}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.strip__row{animation:none}}

/* --- каркас страницы ---------------------------------------- */
/* без align-items:start: колонка-спутник должна тянуться во всю высоту,
   иначе sticky в ней отпускает карточку на середине страницы */
.page{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; padding:34px 0 10px}
.slab{background:var(--slab); border-radius:var(--r3); padding:8px clamp(18px,2.4vw,38px) 22px;
  box-shadow:inset 0 0 0 1px var(--line); margin-bottom:22px}
/* Чередование поверхностей: длинная страница не должна читаться простынёй.
   Вторая полоса — «газон»: тёмная зелень с полосами покоса. Текст остаётся
   светлым, поэтому контраст не падает нигде. */
/* третий уровень «газона» подтемнён: на #17402f приглушённый текст давал
   4.05 при норме 4.5 */
.slab--turf{--slab:#0d261f; --slab-2:#123328; --slab-3:#123222;
  --line:rgba(234,240,251,.15); --line-2:rgba(234,240,251,.07);
  background-color:var(--slab);
  background-image:repeating-linear-gradient(90deg,rgba(234,240,251,.03) 0 78px,
    rgba(234,240,251,0) 78px 156px)}
.sec{padding:14px 0 6px}
.h2{display:flex; align-items:center; gap:14px; font-size:clamp(22px,1.5vw,28px);
  margin:.6em 0 .7em}
.hx{flex:none; width:44px; height:44px; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 44%22%3E%3Cpolygon points=%2240.5,29.7 29.7,40.5 14.3,40.5 3.5,29.7 3.5,14.3 14.3,3.5 29.7,3.5 40.5,14.3%22 fill=%22%23f2b544%22 fill-opacity=%22.16%22 stroke=%22%23f2b544%22 stroke-opacity=%22.55%22/%3E%3C/svg%3E") center/contain no-repeat;
  display:flex; align-items:center; justify-content:center;
  font:700 15px/1 var(--mono); color:var(--gold-2)}
.hx::before{content:attr(data-n)}
h3{font-size:19.5px; color:#fff; margin:1.3em 0 .5em}
.read{max-width:72ch}
.dots{margin:14px 0 20px; padding:0; list-style:none; display:grid; gap:10px}
.dots li{position:relative; padding-inline-start:26px}
.dots li::before{content:""; position:absolute; right:4px; top:.7em; width:8px; height:8px;
  border-radius:50%; background:var(--nile)}

/* Оглавление на странице одно, и живёт оно в колонке-спутнике (`.trail`).
   Прежний верхний список `.toc` убран: две одинаковые навигации рядом. */

/* --- короткий ответ ----------------------------------------- */
.ans{position:relative; margin:6px 0 24px; padding:22px 26px 20px; border-radius:var(--r2);
  background:linear-gradient(135deg,rgba(42,213,181,.12),rgba(242,181,68,.09));
  box-shadow:inset 0 0 0 1px var(--line)}
.ans::before{content:""; position:absolute; top:0; bottom:0; right:0; width:4px;
  border-radius:4px 0 0 4px; background:linear-gradient(180deg,var(--gold),var(--nile))}
.ans__k{display:block; font:600 11.5px/1 var(--mono);
  color:var(--gold-2); margin-bottom:10px}
.ans p{margin:0; font-size:18.5px; line-height:1.7; color:#fff}
.ans p+p{margin-top:.6em; font-size:16.5px; color:var(--sand-2)}
.ans ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.ans li{position:relative; padding-inline-start:26px; font-size:15.5px; color:var(--sand-2)}
.ans li::before{content:"◆"; position:absolute; right:0; top:0; color:var(--nile);
  font-size:11px}

/* --- карточки ----------------------------------------------- */
/* Колонки задаются явно и выбираются в сборщике так, чтобы последний ряд
   не остался с одной сиротой: auto-fit давал ряды 4+1 и 2+2+2+1. */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0 22px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Последняя плитка закрывает ряд, если до полного не хватает одной ячейки.
   Только там, где колонок действительно четыре: на узком экране сетка
   схлопывается в одну колонку, и `span 2` создавал вторую колонку сам,
   раскладывая плитки рядами 2+2+2+1 внахлёст. */
@media (min-width:861px){
  .cards--wide-last>.card:last-child{grid-column:span 2}
}
.cards--1{grid-template-columns:minmax(0,1fr)}
.card{background:var(--slab-2); border-radius:var(--r2); padding:20px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.4), 0 18px 34px -24px #000}
.card__i{width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:19px; margin-bottom:12px; color:var(--gold-2);
  background:rgba(242,181,68,.14)}
.card:nth-child(3n+2) .card__i{color:var(--nile-2); background:rgba(42,213,181,.14)}
.card h3{margin:0 0 .35em; font-size:18.5px}
.card p{margin:0; font-size:15.5px; color:var(--sand-2)}

/* --- нумерованные карточки (приём из макетов коллег) -------- */
.rank{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin:18px 0 24px}
.rank--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rank--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rank--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rank--1{grid-template-columns:minmax(0,1fr)}
.rank__i{position:relative; overflow:hidden; padding:20px 20px 18px; border-radius:var(--r2);
  background:var(--slab-2); box-shadow:inset 0 0 0 1px var(--line)}
.rank__i::before{content:attr(data-n); position:absolute; top:-14px; left:10px;
  font:800 62px/1 var(--disp); color:rgba(234,240,251,.06)}
.rank__i:first-child{background:linear-gradient(150deg,rgba(242,181,68,.2),var(--slab-2) 62%);
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.45)}
.rank__i h3{margin:0 0 6px; font:700 17px/1.35 var(--disp); color:#fff}
.rank__i p{margin:0; font-size:15px; color:var(--sand-2)}

/* --- дуэль: две команды по факторам ------------------------- */
.duel{margin:18px 0 24px; padding:20px 22px; border-radius:var(--r2); background:var(--slab-2);
  box-shadow:inset 0 0 0 1px var(--line)}
/* подпись наглядного блока: теперь это h3, поэтому сбрасываем размер и поля */
.cap{display:block; margin:0 0 10px; font:600 11.5px/1.5 var(--mono);
  color:var(--sand-3); margin-bottom:14px}
.duel__names{display:flex; justify-content:space-between; font:700 15px/1 var(--disp);
  margin-bottom:12px}
.duel__names .a{color:var(--nile-2)}
.duel__names .b{color:var(--gold-2)}
.duel__row{margin-bottom:12px}
.duel__lab{display:block; text-align:center; font-size:13px; color:var(--sand-3);
  margin-bottom:5px}
.duel__bar{display:flex; height:12px; border-radius:999px; overflow:hidden;
  background:rgba(234,240,251,.07)}
.duel__bar i{display:block; height:12px}
.duel__bar .a{background:linear-gradient(90deg,var(--nile),rgba(42,213,181,.5))}
.duel__bar .b{background:linear-gradient(270deg,var(--gold),rgba(242,181,68,.5))}
.duel__note{margin:8px 0 0; font-size:14.5px; color:var(--sand-2)}

/* --- лента «когда смотреть» --------------------------------- */
.flow{position:relative; margin:18px 0 26px; padding:22px 22px 8px; border-radius:var(--r2);
  background:var(--slab-2); box-shadow:inset 0 0 0 1px var(--line)}
/* Колонки явно, по замеру ширины колонки текста, а не на глаз: с 1081 появляется
   боковая панель и колонка сужается до 620–800, поэтому auto-fit давал 3 + 1 на
   700–1100. Все шаги в ряд — только где лента шире 740: 861–1080 и от 1200.
   Остальное — 2 × 2 (нечётное число — столбиком), телефон — столбиком. */
.flow ol{margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.flow--odd ol{grid-template-columns:minmax(0,1fr)}
.flow li:nth-child(2n)::after, .flow--odd li::after{display:none}
@media (min-width:861px) and (max-width:1080px), (min-width:1200px){
  .flow ol, .flow--odd ol{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .flow li:nth-child(2n)::after, .flow--odd li::after{display:block}
}
@media (max-width:520px){
  .flow ol{grid-template-columns:minmax(0,1fr)}
  .flow li::after{display:none}
}
.flow li:last-child::after{display:none !important}
.flow li{position:relative; padding-top:26px}
.flow li::before{content:""; position:absolute; top:6px; right:0; width:14px; height:14px;
  border-radius:50%; background:var(--night); box-shadow:0 0 0 3px var(--gold)}
.flow li::after{content:""; position:absolute; top:12px; right:14px; left:-18px; height:2px;
  background:linear-gradient(90deg,var(--line),transparent)}

.flow b{display:block; font:700 12.5px/1 var(--mono); color:var(--gold-2); margin-bottom:6px;
}
.flow span{display:block; font-size:15px; color:var(--sand-2)}

/* --- перевод коэффициента ----------------------------------- */
.conv{margin:18px 0 24px; padding:20px 22px; border-radius:var(--r2); background:var(--slab-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.conv__row{display:grid; grid-template-columns:78px 1fr 84px; align-items:center; gap:14px;
  padding:9px 0; border-top:1px solid var(--line-2)}
.conv__row:first-of-type{border-top:0}
.conv__k{font:700 17px/1 var(--mono); color:#fff}
.conv__bar{height:10px; border-radius:999px; background:rgba(234,240,251,.07); overflow:hidden}
.conv__bar i{display:block; height:10px;
  background:linear-gradient(90deg,var(--nile),var(--gold))}
.conv__v{text-align:end; font:600 14.5px/1 var(--mono); color:var(--sand-2)}
.conv__note{margin:12px 0 0; font-size:14.5px; color:var(--sand-2)}

/* --- поле и схема ------------------------------------------- */
.grass{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px;
  margin:18px 0 24px; align-items:center}
.grass figure{margin:0}
.grass__svg{width:100%; height:auto; border-radius:var(--r2)}
.grass figcaption{margin-top:10px; font-size:13px; color:var(--sand-3)}
.grass ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.grass li{padding:14px 16px; border-radius:var(--r1); background:var(--slab-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.grass li b{display:block; color:#fff; font:700 16px/1.4 var(--disp)}
.grass li span{font-size:14.5px; color:var(--sand-2)}

/* --- чек-лист ----------------------------------------------- */
.check{margin:18px 0 24px}
.check ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.check li{position:relative; padding:14px 54px 14px 18px; border-radius:var(--r1);
  background:var(--slab-2); box-shadow:inset 0 0 0 1px var(--line)}
.check li::before{position:absolute; right:16px; top:14px; width:26px; height:26px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 14px/1 var(--mono)}
.check .ok::before{content:"✓"; background:rgba(62,207,142,.16); color:var(--ok)}
.check .no::before{content:"✕"; background:rgba(228,71,79,.16); color:var(--flag)}
.check .ok{box-shadow:inset 0 0 0 1px rgba(62,207,142,.3)}
.check .no{box-shadow:inset 0 0 0 1px rgba(228,71,79,.3)}
.check b{display:block; color:#fff; font:700 16px/1.4 var(--disp)}
.check span{font-size:14.5px; color:var(--sand-2)}

/* --- шаги, таблицы, факты, подсказка ------------------------ */
.steps{margin:16px 0 22px; padding:0; list-style:none; counter-reset:s; display:grid; gap:12px}
.steps li{counter-increment:s; position:relative; padding:16px 60px 16px 18px;
  border-radius:var(--r1); background:var(--slab-2); box-shadow:inset 0 0 0 1px var(--line)}
.steps li::before{content:counter(s,decimal); position:absolute; right:16px; top:14px;
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font:700 15px/1 var(--mono); color:#241704;
  background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.steps h3{margin:0 0 4px; color:#fff; font:700 16.5px/1.4 var(--disp)}
.steps p{margin:.2em 0 0; font-size:15px; color:var(--sand-2)}
/* имя с «tsc»: по нему приёмка зоны узнаёт прокручиваемую обёртку таблицы */
.tcap{margin:1.4em 0 .6em; font:700 17px/1.4 var(--disp); color:#fff}
.tsc{overflow-x:auto; margin:16px 0 22px; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
caption{caption-side:top; text-align:start; padding:14px 18px 10px;
  font:600 11.5px/1.5 var(--mono); color:var(--sand-3)}
th{background:var(--slab-3); color:#fff; text-align:start; padding:12px 18px; font-weight:700}
td{padding:12px 18px; border-top:1px solid var(--line-2); color:var(--sand-2);
  vertical-align:top}
td strong{color:#fff}
tr:nth-child(even) td{background:rgba(234,240,251,.03)}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:14px 0 22px}
.facts div{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--line)}
.facts dt{color:var(--sand-3); font-size:14.5px}
.facts dd{margin:0; color:#fff; font-weight:600; text-align:end}
.hint{margin:18px 0 22px; padding:16px 18px; border-radius:var(--r1);
  background:rgba(42,213,181,.1); box-shadow:inset 3px 0 0 var(--nile)}
.hint p:last-child{margin-bottom:0}

/* --- CTA, блок lilbet, FAQ ---------------------------------- */
.ribbon{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px 22px; margin:24px 0; padding:20px 24px; border-radius:var(--r2);
  background:linear-gradient(120deg,var(--slab-3),var(--slab-2));
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.3)}
.ribbon b{display:block; font:800 21px/1.3 var(--disp); color:#fff}
.ribbon p{margin:.25em 0 0; font-size:15.5px; color:var(--sand-2); max-width:52ch}
.lbx{margin:22px 0; border-radius:var(--r2); overflow:hidden; background:var(--night-2);
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.34)}
.lbx__b{padding:22px 24px 24px}
.lbx h3{margin:0 0 .4em; color:#fff; font-size:22px}
.lbx p{color:var(--sand-2); font-size:15.5px}
.lbx ul{margin:0 0 18px; padding:0; list-style:none; display:grid; gap:9px}
.lbx li{position:relative; padding-inline-start:26px; font-size:15px; color:var(--sand-2)}
.lbx li::before{content:"◆"; position:absolute; right:0; top:0; color:var(--gold);
  font-size:11px}
.faq details{border-radius:var(--r1); background:var(--slab-2); margin:10px 0;
  box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{cursor:pointer; list-style:none; position:relative; padding:15px 20px 15px 52px;
  font:700 16.5px/1.5 var(--disp); color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; left:20px; top:50%; width:10px; height:10px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(-45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-25%) rotate(135deg)}
.faq__a{padding:0 20px 16px}
.faq__a p{margin:0; color:var(--sand-2)}

/* --- боковая колонка ---------------------------------------- */
/* спутник живёт в пределах экрана: он необязательный и не должен
   вылезать за край на невысоких ноутбуках */
/* Колонка-спутник не перерастает экран. Прокручивается при этом только
   список оглавления: страницы по рабочему листу длиннее прежних, и при
   прокрутке всей колонки карточка с кнопкой уезжала за нижний край. */
.side__in{position:sticky; top:80px; display:flex; flex-direction:column; gap:14px;
  max-height:calc(100vh - 96px)}
.side__in>.trail{min-height:0; display:flex; flex-direction:column}
.side__in>.trail ol{min-height:0; overflow-y:auto; scrollbar-width:thin}
.side__in>.promo{flex:0 0 auto}
.trail{padding:14px 18px; border-radius:var(--r2); background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line)}
.trail b{display:block; font:600 11.5px/1 var(--mono);
  color:var(--sand-3); margin-bottom:12px}
.trail ol{margin:0; padding:0; list-style:none; display:grid; gap:2px}
.trail a{display:block; position:relative; padding:7px 18px 7px 8px; font-size:14.5px;
  color:var(--sand-2); text-decoration:none; border-radius:8px}
.trail a::before{content:""; position:absolute; right:4px; top:15px; width:6px; height:6px;
  border-radius:50%; background:var(--line)}
.trail a:hover{color:#fff; background:rgba(234,240,251,.05)}
.trail a.on{color:#fff; background:rgba(242,181,68,.14)}
.trail a.on::before{background:var(--gold)}
.promo{padding:16px 18px; border-radius:var(--r2); color:var(--sand);
  background:linear-gradient(160deg,var(--slab-3),var(--night-2));
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.3)}
.promo__t{display:block; font:600 11px/1 var(--mono);
  color:var(--gold-2); margin-bottom:10px}
.promo__n{display:block; font:800 22px/1 var(--disp); color:#fff; margin-bottom:6px}
.promo p{font-size:14.5px; color:var(--sand-2); margin-bottom:12px}
.promo ul{margin:0 0 14px; padding:0; list-style:none; display:grid; gap:7px;
  font-size:14px; color:var(--sand-2)}
.promo li{position:relative; padding-inline-start:20px}
.promo li::before{content:"◆"; position:absolute; right:0; top:0; color:var(--nile);
  font-size:10px}
.promo small{display:block; margin-top:10px; font-size:12px; color:var(--sand-3)}

/* --- рядом, финал, нижняя полоса ---------------------------- */
.band{margin:26px 0; border-radius:var(--r2); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line), 0 22px 40px -32px #000}
.band img{display:block; width:100%; height:auto}
.near{margin:26px 0 8px}
.near h2{font-size:19px; color:var(--sand-2)}
.near__g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.near a{display:block; padding:16px 18px; border-radius:var(--r2); text-decoration:none;
  background:var(--slab); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s ease, box-shadow .2s ease}
.near a:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(42,213,181,.4), 0 16px 30px -24px #000}
.near b{display:block; color:#fff; font:700 16px/1.35 var(--disp); margin-bottom:4px}
.near i{font-style:normal; font-size:14px; color:var(--sand-3)}
.endbox{margin:26px 0 10px; padding:30px clamp(20px,3vw,40px); border-radius:var(--r3);
  text-align:center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(242,181,68,.2), transparent 60%),
    linear-gradient(180deg,var(--slab),var(--night-2));
  box-shadow:inset 0 0 0 1px rgba(242,181,68,.3)}
.endbox h2{font-size:clamp(22px,2vw,30px); margin-bottom:.4em}
.endbox p{color:var(--sand-2); max-width:62ch; margin-inline:auto}
.endbox .note{margin-top:12px}
.mbar{position:fixed; right:0; left:0; bottom:0; z-index:45; display:none;
  align-items:center; justify-content:space-between; gap:12px; padding:10px 16px;
  background:rgba(8,13,24,.96); box-shadow:0 -1px 0 var(--line)}
/* только подпись полосы, а не текст внутри кнопки: раньше правило
   красило и надпись на золотой кнопке в бледно-синий */
.mbar>span{font-size:14px; color:var(--sand-2)}
.mbar .btn span{color:inherit}
body.has-bar .mbar{display:flex}

/* --- подвал ------------------------------------------------- */
.base{margin-top:34px; padding:32px 0 26px; background:var(--night-2);
  box-shadow:0 -1px 0 var(--line)}
.base__g{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
  padding-bottom:22px; border-bottom:1px solid var(--line)}
.base .fcap{display:block; font-size:13px; color:var(--gold-2);
  font-family:var(--mono); font-weight:600;
  font-weight:600; margin-bottom:12px}
.base ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.base a{color:var(--sand-2); text-decoration:none; font-size:14.5px}
.base a:hover{color:#fff; text-decoration:underline}
.base__n{padding-top:18px; font-size:13.5px; color:var(--sand-3)}
.base__n p{margin:0 0 .6em; max-width:88ch}
.age{display:inline-block; unicode-bidi:isolate; margin-inline-end:10px; padding:4px 11px; border-radius:999px;
  font:700 12px/1 var(--mono); color:var(--flag);
  box-shadow:inset 0 0 0 1px rgba(228,71,79,.5)}

/* --- 404 ---------------------------------------------------- */
.e404{padding:60px 0 40px; text-align:center}
.e404 .num{font:800 clamp(78px,12vw,150px)/1 var(--disp); color:transparent;
  background:linear-gradient(120deg,var(--gold),var(--nile));
  -webkit-background-clip:text; background-clip:text}
.e404 .num::before{content:attr(data-v)}
.e404 ul{margin:20px 0 26px; padding:0; list-style:none; display:flex; gap:10px;
  flex-wrap:wrap; justify-content:center}
.e404 li a{display:inline-block; padding:9px 16px; border-radius:999px; font-size:14.5px;
  text-decoration:none; color:var(--sand-2); background:var(--slab-2)}
.e404 li a:hover{color:#fff; background:rgba(242,181,68,.2)}

/* --- адаптив ------------------------------------------------ */
@media (max-width:1080px){
  .beam__g{grid-template-columns:1fr; gap:26px}
  .beam__side{max-width:520px}
  /* minmax(0,1fr), а не 1fr: иначе таблица с min-width растягивает колонку */
  .page{grid-template-columns:minmax(0,1fr)}
  /* оглавление одно на всю страницу: на узком экране колонка-спутник
     поднимается над текстом, а не прячется вместе с ним */
  .side{order:-1}
  .side__in{position:static}
  /* колонки по числу пунктов (класс ставит сборщик): auto-fit давал сироту */
  .trail--c2 ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trail--c3 ol{grid-template-columns:repeat(3,minmax(0,1fr))}

  .promo{display:none}
}
@media (max-width:860px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards,.cards--2,.cards--3,.cards--4,.rank,.rank--2,.rank--3,.rank--4,
  .grass,.near__g,.base__g{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:1fr}
  /* три карточки в две колонки давали ряд 2+1 — на этой ширине столбец один */
  .base__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* три колонки уже тесны для арабских пунктов: чётное число — две, иначе одна */
  .trail--c3 ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trail--c3.trail--odd ol{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* на 390 px колонка 160 px рвала «ماذا يوجد في الموقع أيضًا» на две строки */
  .trail ol{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:760px){
  .crown .btn{display:none}
  .crown__in{flex-wrap:wrap; gap:10px}
  .nav{order:3; width:100%}
  .ribbon{flex-direction:column; align-items:stretch; text-align:start}
  .slab{padding:6px 18px 18px}
}
@media (max-width:520px){
  .near__g{grid-template-columns:1fr}
  .duel__names{font-size:13.5px}
  .conv__row{grid-template-columns:62px 1fr 72px; gap:10px}
}