@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../font/unb-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}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../font/unb-700-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:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../font/unb-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../font/unb-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("../font/itight-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:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("../font/itight-400-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:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("../font/itight-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("../font/itight-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("../font/itight-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:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("../font/itight-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:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("../font/itight-600-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("../font/itight-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../font/spmono-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}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../font/spmono-700-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}
:root{
  --bg:#0d0a17; --bg-2:#141029; --pane:#1c1636; --pane-2:#271e49;
  --rule:rgba(174,158,235,.16); --rule-2:rgba(174,158,235,.34); --fg:#f4f1fb; --fg-2:#a79ec6;
  --amber:#ffb43d; --coral:#ff5f7e; --mint:#46e3b0; --violet:#9d7bff;
  --disp:"Unbounded","Segoe UI",system-ui,sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --num:"Space Mono",ui-monospace,Consolas,monospace;
  --w:1180px; --r1:6px; --r2:14px; --r3:26px;
  --glow:0 14px 34px -14px rgba(255,95,126,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.66 var(--body);
  /* миллиметровка и два далёких пятна света: фон не плоский, но и не шумит */
  background-image:
    radial-gradient(900px 520px at 82% -8%, rgba(157,123,255,.20), transparent 60%),
    radial-gradient(760px 460px at 4% 12%, rgba(70,227,176,.10), transparent 62%),
    linear-gradient(rgba(174,158,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,158,235,.045) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  background-attachment:fixed,fixed,fixed,fixed;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--amber)}
a:hover{color:var(--coral)}
/* ссылка внутри текста подчёркнута: по цвету её на тёмном фоне видно
   плохо, а задание требует видимых ссылок */
.zone__b p a,.zone__b li a,.say a,.tscpane a{text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--disp); font-weight:700; line-height:1.16;
  letter-spacing:-.015em; margin:0 0 14px; overflow-wrap:break-word}
h1{font-size:clamp(30px,4.6vw,55px); line-height:1.08}
h2{font-size:clamp(23px,2.7vw,34px)}
h3{font-size:clamp(18px,1.6vw,21px); margin-top:28px}
p{margin:0 0 15px; max-width:74ch}
ul,ol{margin:0 0 16px; padding-left:22px; max-width:74ch}
li{margin:0 0 9px}
strong{color:#fff}

.lane{width:min(100% - 34px,var(--w)); margin-inline:auto}

.skipto{position:absolute; left:-9999px; top:0; background:var(--amber);
  color:#1a1206; padding:10px 16px; border-radius:0 0 var(--r2) 0; z-index:60}
.skipto:focus{left:0}

/* ── шапка ───────────────────────────────────────────────────────────── */
.crest{position:relative; z-index:30; padding:16px 0;
  background:linear-gradient(180deg,rgba(13,10,23,.94),rgba(13,10,23,.62));
  box-shadow:inset 0 -1px 0 var(--rule)}
.crest__r{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  color:var(--fg)}
.logo__t{display:grid; line-height:1.12}
.logo__t b{font:700 19px/1.1 var(--disp); letter-spacing:-.02em}
.logo__t span{font-size:11.5px; color:var(--fg-2); letter-spacing:.11em;
  text-transform:uppercase}
/* max-width:74ch с общего правила для списков резал меню и заставлял его
   переноситься на вторую строку задолго до края экрана */
.routes{display:flex; gap:4px; list-style:none; margin:0; padding:0;
  flex-wrap:wrap; margin-inline-start:auto; max-width:none}
.routes a{display:inline-block; padding:8px 14px; border-radius:999px;
  font-size:14.5px; color:var(--fg-2); text-decoration:none}
.routes a:hover{color:var(--fg); background:var(--pane)}
.routes a[aria-current]{color:#1a1206; background:var(--amber); font-weight:600}

/* липкая лента разделов: оглавление вынесено из героя наружу */
/* фон почти непрозрачный и без размытия: в старых браузерах оно
   всё равно не поддерживается, а разницы на глаз здесь нет */
.strap{position:sticky; top:0; z-index:25; background:#141029f2;
  box-shadow:inset 0 -1px 0 var(--rule)}
/* лента переносится, а не едет вбок: горизонтальная прокрутка в шапке
   читается как поломка вёрстки */
.strap ul{display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0;
  padding:9px 0; max-width:none}
.strap li{margin:0; flex:0 0 auto}
.strap a{display:block; padding:6px 13px; border-radius:var(--r1);
  font-size:13.5px; color:var(--fg-2); text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--rule)}
.strap a:hover{color:var(--fg); box-shadow:inset 0 0 0 1px var(--rule-2)}
.strap a::before{content:attr(data-n); font:700 11px/1 var(--num);
  color:var(--violet); margin-inline-end:8px}

.road{padding:16px 0 0; font-size:13.5px; color:var(--fg-2)}
.road a{color:var(--fg-2)}

/* ── герой ───────────────────────────────────────────────────────────── */
/* подложка обложки наклонена и вылезает за свой столбец; на 1024 px
   это давало 3 px горизонтальной прокрутки в WebKit. Обрезаем по секции —
   липкая лента разделов лежит снаружи, на неё это не влияет. */
.hood{padding:34px 0 8px; overflow:hidden}
.hood__g{display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:38px; align-items:center}
.flare{display:inline-flex; align-items:center; gap:9px; font:700 11.5px/1 var(--num);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mint);
  padding:8px 13px; border-radius:999px; background:rgba(70,227,176,.10);
  box-shadow:inset 0 0 0 1px rgba(70,227,176,.28); margin-bottom:18px}
.flare::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--mint); box-shadow:0 0 12px var(--mint)}
.sub{font-size:19px; color:var(--fg-2); max-width:56ch; margin-bottom:22px}
.launch{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.hint{font-size:13px; color:var(--fg-2); margin:0}

.hit{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:14px 26px; border-radius:var(--r2); font-weight:600; font-size:16px;
  color:#22120a; background:linear-gradient(135deg,var(--amber),var(--coral));
  box-shadow:var(--glow); transition:transform .15s, box-shadow .15s}
.hit:hover{transform:translateY(-2px); color:#22120a;
  box-shadow:0 20px 40px -14px rgba(255,95,126,.72)}
.hit::after{content:"→"; font-family:var(--num); font-size:15px}
.hit--ghost{background:none; color:var(--fg); box-shadow:inset 0 0 0 1px var(--rule-2)}
.hit--ghost:hover{color:var(--fg); box-shadow:inset 0 0 0 1px var(--amber)}
.hit--sm{padding:10px 18px; font-size:14.5px; border-radius:var(--r1)}

/* обложка игры в наклонной рамке со свечением */
.art{position:relative; margin:0}
.art::before{content:""; position:absolute; inset:-14px -12px -10px 8px;
  border-radius:var(--r3); background:linear-gradient(150deg,var(--violet),transparent 62%);
  opacity:.42; transform:rotate(-3.2deg)}
.art img{position:relative; width:100%; border-radius:var(--r3);
  box-shadow:0 26px 58px -22px #000, inset 0 0 0 1px var(--rule-2);
  transform:rotate(1.4deg)}
.art figcaption{position:relative; margin-top:16px; font-size:13px;
  color:var(--fg-2); text-align:center}
/* герой без официального кадра: вместо картинки — карточка игры.
   Своей рисованной плитки вместо кадра студии здесь быть не может. */
.hood__g--solo{grid-template-columns:1fr}
.hood__g--solo .sub{max-width:68ch}
.tote{display:grid; gap:1px; margin:0; border-radius:var(--r3); overflow:hidden;
  background:var(--rule); box-shadow:inset 0 0 0 1px var(--rule-2)}
.tote div{display:grid; gap:4px; padding:16px 20px;
  background:linear-gradient(160deg,var(--pane-2),var(--pane))}
.tote dt{font:700 11.5px/1.5 var(--num); letter-spacing:.13em;
  text-transform:uppercase; color:var(--mint)}
.tote dd{margin:0; font-size:15.5px; color:var(--fg)}

/* ── лента фактов ────────────────────────────────────────────────────── */
.gauge{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin:30px 0 4px; border-radius:var(--r2); overflow:hidden;
  background:var(--rule); box-shadow:inset 0 0 0 1px var(--rule)}
.gauge div{display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:18px 20px; background:var(--pane)}
.gauge dt{font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-2)}
.gauge dd{margin:0; font:700 17px/1.3 var(--disp); color:var(--fg)}

/* ── разделы ─────────────────────────────────────────────────────────── */
main{display:block; padding-bottom:20px}
.zone{position:relative; padding:34px 0 6px}
.zone+.zone{box-shadow:inset 0 1px 0 var(--rule)}
.zone__n{position:absolute; left:-76px; top:40px; font:700 15px/1 var(--num);
  color:var(--violet); letter-spacing:.05em}
.zone__b{min-width:0}
.zone__b>h2{position:relative; padding-bottom:12px}
.zone__b>h2::after{content:""; position:absolute; left:0; bottom:0; width:58px;
  height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--coral))}

/* ── карточки ────────────────────────────────────────────────────────── */
.pack{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  align-content:stretch; margin:20px 0 24px}
.pack__i{display:flex; flex-direction:column; gap:9px; padding:20px;
  border-radius:var(--r2); background:var(--pane);
  box-shadow:inset 0 0 0 1px var(--rule)}
.pack__i b{font:700 16px/1.3 var(--disp)}
.pack__i span{font-size:14.5px; color:var(--fg-2)}
.pack__i:first-child{background:linear-gradient(160deg,var(--pane-2),var(--pane));
  box-shadow:inset 0 0 0 1px var(--rule-2)}
.pack--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pack--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.badge{width:40px; height:40px; border-radius:11px; display:grid;
  place-items:center; background:rgba(157,123,255,.14);
  box-shadow:inset 0 0 0 1px rgba(157,123,255,.3)}
.badge svg{width:21px; height:21px; stroke:var(--violet); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ── витрина игр ─────────────────────────────────────────────────────── */
.shelf{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  align-content:stretch; list-style:none; margin:22px 0 26px; padding:0;
  max-width:none}
.shelf li{margin:0}
.shelf__i{display:flex; flex-direction:column; height:100%; border-radius:var(--r2);
  overflow:hidden; text-decoration:none; color:var(--fg); background:var(--pane);
  box-shadow:inset 0 0 0 1px var(--rule); transition:transform .15s}
.shelf__i:hover{transform:translateY(-3px); color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--rule-2), 0 18px 34px -20px #000}
/* пропорция приходит из width/height самой картинки (640x360):
   отдельное правило не нужно, и старый Safari не спотыкается */
.shelf__i img{width:100%; object-fit:cover}
.shelf__i div{display:flex; flex-direction:column; gap:3px; padding:13px 15px 15px}
.shelf__i b{font:700 15px/1.25 var(--disp)}
.shelf__i span{font-size:13px; color:var(--fg-2)}
.shelf__i em{font:700 12px/1 var(--num); font-style:normal; color:var(--mint);
  letter-spacing:.06em; margin-top:5px}

/* кадры игрового экрана: три в ряд, ровный ряд по правилу витрины */
.gal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  align-content:stretch; margin:20px 0 26px}
.gal figure{margin:0; display:flex; flex-direction:column; gap:9px}
.gal img{width:100%; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.gal figcaption{font-size:13px; color:var(--fg-2); line-height:1.4}

/* ── полосы, схемы, шаги ─────────────────────────────────────────────── */
.strip{margin:26px 0; border-radius:var(--r2); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--rule)}
.strip img{width:100%}
.plot{margin:22px 0 26px}
.plot img{width:100%; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.plot figcaption{display:flex; gap:10px; flex-wrap:wrap; margin-top:11px;
  font-size:13.5px; color:var(--fg-2)}
.plot figcaption b{font:700 11.5px/1.5 var(--num); letter-spacing:.11em;
  text-transform:uppercase; color:var(--violet)}
.pair{margin:22px 0 26px}
.pair img{width:100%; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.pair h3{margin:20px 0 12px}
.pair ul{margin:0; padding:0; list-style:none; max-width:none;
  columns:2; column-gap:36px}
.pair li{break-inside:avoid; padding-left:20px; position:relative}
.pair li::before{content:""; position:absolute; left:0; top:11px; width:9px;
  height:2px; border-radius:2px; background:var(--amber)}

.roll{counter-reset:r; list-style:none; margin:20px 0 26px; padding:0;
  max-width:none; display:grid; gap:11px}
.roll li{counter-increment:r; display:grid;
  grid-template-columns:38px minmax(0,1fr); gap:15px; align-items:start;
  padding:15px 18px; border-radius:var(--r2); background:var(--pane-2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.roll li::before{content:counter(r,decimal-leading-zero);
  font:700 15px/38px var(--num); color:var(--amber); text-align:center;
  background:rgba(255,180,61,.11); border-radius:10px}
.roll b{display:block; font:700 15.5px/1.35 var(--disp); margin-bottom:3px}
.roll span{color:var(--fg-2); font-size:15px}

/* ── таблица ─────────────────────────────────────────────────────────── */
.tscpane{overflow-x:auto; margin:20px 0 26px; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--rule)}
table{width:100%; border-collapse:collapse; font-size:15px}
caption{caption-side:top; text-align:left; padding:15px 18px 11px;
  font:700 12px/1.4 var(--num); letter-spacing:.11em; text-transform:uppercase;
  color:var(--violet)}
th,td{padding:12px 18px; text-align:left; vertical-align:top;
  box-shadow:inset 0 -1px 0 var(--rule)}
th{font:600 13px/1.4 var(--body); letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg-2); white-space:nowrap}
tbody tr:last-child td{box-shadow:none}
tbody tr:nth-child(2n) td{background:rgba(157,123,255,.05)}

/* ── врезки ──────────────────────────────────────────────────────────── */
.say{position:relative; margin:22px 0 26px; padding:18px 22px 18px 26px;
  border-radius:var(--r2); background:var(--pane); font-size:17px;
  box-shadow:inset 0 0 0 1px var(--rule)}
.say::before{content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--mint),var(--violet))}

.slab{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:24px 0 26px; padding:17px 20px; border-radius:var(--r2);
  background:linear-gradient(120deg,rgba(255,180,61,.13),rgba(255,95,126,.09));
  box-shadow:inset 0 0 0 1px rgba(255,180,61,.26)}
.slab>span{display:grid; gap:2px; min-width:min(100%,240px); flex:1 1 240px}
.slab b{font:700 16px/1.3 var(--disp)}
.slab span span{font-size:14.5px; color:var(--fg-2)}

.qa{display:grid; gap:9px; margin:20px 0 26px}
.qa details{border-radius:var(--r2); background:var(--pane);
  box-shadow:inset 0 0 0 1px var(--rule)}
.qa summary{cursor:pointer; padding:15px 19px; font-weight:600; font-size:16px;
  list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; float:right; font-family:var(--num);
  color:var(--amber)}
.qa details[open] summary::after{content:"–"}
.qa p{margin:0; padding:0 19px 17px; color:var(--fg-2)}

.nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  align-content:stretch; margin:20px 0 26px}
.nums div{display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:17px 19px; border-radius:var(--r2); background:var(--pane-2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.nums b{font:700 26px/1.1 var(--num); color:var(--amber)}
.nums span{font-size:13.5px; color:var(--fg-2)}

/* ── дальше и финал ──────────────────────────────────────────────────── */
.more{padding:28px 0 8px}
.more h2{font-size:clamp(19px,2vw,24px)}
.more ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  align-content:stretch; list-style:none; margin:0; padding:0; max-width:none}
.more li{margin:0}
.more a{display:flex; height:100%; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 19px; border-radius:var(--r2); text-decoration:none;
  color:var(--fg); background:var(--pane); box-shadow:inset 0 0 0 1px var(--rule)}
.more a:hover{color:var(--fg); box-shadow:inset 0 0 0 1px var(--amber)}
.more b{display:block; font:700 15.5px/1.3 var(--disp)}
.more span{font-size:13.5px; color:var(--fg-2)}
.more em{font-style:normal; font-family:var(--num); color:var(--amber)}

.fin{margin:30px 0 40px; padding:34px 30px; border-radius:var(--r3);
  text-align:center;
  background:
    radial-gradient(520px 260px at 50% -30%, rgba(255,180,61,.22), transparent 70%),
    linear-gradient(160deg,var(--pane-2),var(--pane));
  box-shadow:inset 0 0 0 1px var(--rule-2)}
.fin p{margin:0 auto 20px; max-width:56ch; color:var(--fg-2)}

/* ── подвал ──────────────────────────────────────────────────────────── */
.cellar{margin-top:18px; padding:34px 0 30px; background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--rule)}
.cellar__g{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:26px; align-content:stretch}
.cellar h3{font-size:14px; letter-spacing:.09em; text-transform:uppercase;
  font-family:var(--body); font-weight:600; color:var(--fg-2); margin-bottom:11px}
.cellar ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.cellar a{color:var(--fg); text-decoration:none; font-size:14.5px}
.cellar a:hover{color:var(--amber)}
.cellar p{font-size:14px; color:var(--fg-2)}
.ageline{display:inline-block; margin-top:6px; padding:5px 11px; border-radius:999px;
  font:700 12px/1 var(--num); color:var(--coral);
  box-shadow:inset 0 0 0 1px rgba(255,95,126,.4)}
.cellar__l{margin-top:24px; padding-top:18px; box-shadow:inset 0 1px 0 var(--rule)}
.cellar__l p{margin:0 0 7px; font-size:13px; max-width:none}

.dead{list-style:none; margin:18px 0 0; padding:0; display:flex; gap:10px;
  flex-wrap:wrap; max-width:none}
.dead a{display:inline-block; padding:9px 16px; border-radius:var(--r1);
  text-decoration:none; color:var(--fg); background:var(--pane);
  box-shadow:inset 0 0 0 1px var(--rule)}
.dead a:hover{box-shadow:inset 0 0 0 1px var(--amber)}

/* ── узкие экраны ────────────────────────────────────────────────────── */
@media (max-width:1340px){
  .zone__n{position:static; display:block; margin-bottom:8px}
}
@media (max-width:980px){
  .hood__g{grid-template-columns:1fr; gap:26px}
  .art{order:-1; max-width:440px}
  /* наклон и вылет подложки на узком экране дают горизонтальную прокрутку:
     свободного поля по бокам там нет */
  .art::before{inset:-10px 0 -8px 6px; transform:none}
  .art img{transform:none}
  .gauge{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf,.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* тройка карточек остаётся тройкой: на двух колонках она даёт ряд 2+1,
     а одинокая плитка в ряду не принимается */
  .pack--4,.more ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cellar__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* первый блок подвала занимает всю строку: иначе три колонки на двух
     дают ряд 2+1 */
  .cellar__g>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  /* в три строки липкая лента съела бы полэкрана — отпускаем её */
  .strap{position:static}
  .pair ul{columns:1}
  .gal{grid-template-columns:1fr}
  .pack,.pack--2,.pack--4,.nums,.more ul,.gauge{grid-template-columns:1fr}
  .cellar__g{grid-template-columns:1fr}
  .routes{margin-inline-start:0; width:100%}
  .fin{padding:26px 20px}
  /* таблица на телефоне разворачивается в карточки */
  .tscpane table,.tscpane thead,.tscpane tbody,.tscpane tr,.tscpane td{display:block; width:100%}
  .tscpane thead{display:none}
  .tscpane tr{padding:6px 0; box-shadow:inset 0 -1px 0 var(--rule)}
  .tscpane td{box-shadow:none; padding:6px 18px}
  .tscpane td::before{content:attr(data-label); display:block; font:600 11.5px/1.5 var(--body);
    letter-spacing:.07em; text-transform:uppercase; color:var(--fg-2)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}