/* Саблезубый Крыс — страница ссылок. Брейкпоинты: ≥1100 десктоп · 761–1099 планшеты и переходные · ≤760 телефоны.
   Если экран низкий или карточка не помещается — режим .flow (обычная прокрутка), его включает app.js. */
/* шрифты лежат на своём сервере (не Google Fonts): Exo 2 italic и Manrope, OFL; только кириллица и латиница */
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 800 900; font-display: swap; src: url(fonts/exo2-italic-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 800 900; font-display: swap; src: url(fonts/exo2-italic-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: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/manrope-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/manrope-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; }
:root {
  --ink: #1b1530;
  --paper: #fffaf3;
  --muted: #5b5370;
  --lime: #a6ff3d;
  --glass: rgba(255, 250, 243, .86);
  --glass-dark: rgba(22, 18, 34, .78);
  --shadow: 0 20px 60px rgba(10, 6, 30, .35);
  --vh: 100dvh;
  --spring: cubic-bezier(.3, 1.6, .5, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden; overscroll-behavior: none;
  background: #14111d; color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
/* без синих подсветок при нажатии и выделения картинок/надписей; рамка фокуса — только для клавиатуры */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
body { -webkit-user-select: none; user-select: none; }   /* решение автора 12.10: без синего выделения текста при кликах */
.hero, .tag, .logo, .nums, .sticker-first, .sticker-ws, .cstk { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- сцена и ярусы ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; }
.tier {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: translate3d(0, 100%, 0); will-change: transform;
}
.tier.is-current { transform: none; }
.tier { background-image: var(--own); }
.tier[data-level="180"] { --own: url(img/01-top.webp); }
.tier[data-level="117"] { --own: url(img/02-middle.webp); }
.tier[data-level="48"] { --own: url(img/03-lower.webp); }
.tier[data-level="12"] { --own: url(img/04-minus.webp); }
.tier.top { background-position: center top; }
.tier.bottom { background-position: center bottom; }
.tier::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(transparent, rgba(12, 8, 24, .45));
}
.tier[data-dark]::after { background: linear-gradient(transparent, rgba(8, 6, 14, .6)); }

/* ---------- герои ---------- */
.hero {
  position: absolute; bottom: 0; z-index: 2;
  height: min(78vh, 760px);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  transform: translate3d(0, 6%, 0); opacity: 0;
  transition: transform .7s cubic-bezier(.2, .9, .25, 1.15) .15s, opacity .5s ease .15s;
}
.tier.is-current .hero { transform: none; opacity: 1; }
.hero.right { right: 4vw; }
.hero.left { left: 4vw; }
.hero.miti { height: min(58vh, 560px); }
.hero > img {
  display: block; height: 100%; width: auto; transform-origin: 50% 100%;
  filter: brightness(1) drop-shadow(0 0 24px color-mix(in srgb, var(--tc) 0%, transparent));
  transition: scale .45s var(--spring), rotate .45s var(--spring), filter .3s ease;
  animation: breathe 4s ease-in-out infinite;
}
@media (hover: hover) { .hero:hover:not(:has(.bio:hover)) > img {
  scale: 1.05; rotate: -2deg; animation-play-state: paused;
  filter: brightness(1.08) drop-shadow(0 0 24px color-mix(in srgb, var(--tc) 70%, transparent));
} }
.hero.poke > img {
  scale: 1.05; rotate: -2deg; animation-play-state: paused;
  filter: brightness(1.08) drop-shadow(0 0 24px color-mix(in srgb, var(--tc) 70%, transparent));
}
@keyframes breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.tag {
  position: absolute; z-index: 3; bottom: 100%; left: var(--tx, 50%); translate: -50% 18%;
  font: italic 900 clamp(40px, 4.6vw, 68px)/1 "Exo 2", sans-serif;
  text-transform: uppercase; letter-spacing: .01em; color: var(--nc, var(--tc)); white-space: nowrap;
  -webkit-text-stroke: 10px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4));
  rotate: -6deg; transform-origin: 50% 100%; pointer-events: none;
  animation: swing 3.6s ease-in-out infinite; transition: scale .35s var(--spring);
}
@media (hover: hover) { .hero:hover:not(:has(.bio:hover)) .tag { scale: 1.15; animation-duration: .7s; } }
.hero.poke .tag { scale: 1.15; animation-duration: .7s; }
@media (hover: none) { .tag { pointer-events: auto; } }   /* касание имени — тоже касание героя (анимация .poke в app.js) */
@keyframes swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }

.bio {
  position: absolute; z-index: 4; top: 50%; right: 84%; width: 340px; margin: 0;
  padding: 14px 16px; border-radius: 18px; color: var(--ink);
  background: rgba(255, 250, 243, .62); backdrop-filter: blur(8px);
  border-top: 4px solid var(--nc, var(--tc)); box-shadow: 0 12px 30px rgba(10, 6, 30, .35);
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  rotate: -3deg; opacity: 0; translate: 0 12px;
  transition: opacity .5s ease .45s, translate .5s ease .45s, rotate .4s var(--spring), scale .4s var(--spring), background .3s ease;
}
.tier.is-current .bio { opacity: 1; translate: 0 0; }
.hero.left .bio { right: auto; left: 86%; rotate: 3deg; }
@media (hover: hover) { .hero .bio:hover { rotate: 0deg; scale: 1.05; background: rgba(255, 250, 243, .92); } }
.tier[data-dark] .bio { background: rgba(22, 18, 34, .6); color: #f4effc; }
@media (hover: hover) { .tier[data-dark] .bio:hover { background: rgba(22, 18, 34, .92); } }
.bio .weapon { display: block; margin-top: 10px; padding-top: 9px; font-weight: 700;
  border-top: 1px dashed color-mix(in srgb, var(--tc) 55%, transparent); }
.bio .weapon b { font-weight: 800; }

/* ---------- карточки ---------- */
.card {
  position: absolute; z-index: 3; max-width: 470px; padding: 26px 28px;
  background: var(--glass); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(10px);
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: transform .6s ease .25s, opacity .6s ease .25s;
}
.tier.is-current .card { opacity: 1; transform: none; }
.card.dark { background: var(--glass-dark); color: #f4effc; }
.card.left { left: 5vw; top: 50%; translate: 0 -50%; }
.card.right { right: 5vw; top: 50%; translate: 0 -50%; }
.card p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
h2 { font: italic 800 clamp(28px, 3.2vw, 40px)/.95 "Exo 2", sans-serif; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 12px; }

/* первая карточка */
.first-card { max-width: 520px; padding-right: 150px; }
.speech { font-size: 19px !important; font-weight: 700; line-height: 1.45 !important; margin-bottom: 14px !important; }
.meta { font-size: 15px !important; margin: 0 0 4px !important; color: var(--muted); }
.meta b { color: var(--ink); }

/* стикеры на карточках */
.sticker-first, .sticker-ws {
  position: absolute; z-index: 4; width: 150px; height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .42));
  transition: rotate .35s var(--spring), scale .35s var(--spring);
}
.sticker-first { right: -40px; top: -40px; rotate: 8deg; }
@media (hover: hover) { .sticker-first:hover { rotate: -4deg; scale: 1.05; } }
.sticker-first.poke { rotate: -4deg; scale: 1.05; }
.sticker-ws { right: -56px; top: -62px; rotate: 9deg; }
@media (hover: hover) { .sticker-ws:hover { rotate: -3deg; scale: 1.08; } }
.sticker-ws.poke { rotate: -3deg; scale: 1.08; }

/* надпись «Игра Саблезубый Крыс» */
.logo {
  position: absolute; top: 100%; left: 18px; margin: 22px 0 0; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; line-height: .86;
  rotate: -4deg; transform-origin: 50% 60%; user-select: none;
  filter: drop-shadow(0 8px 12px rgba(20, 10, 40, .4));
  animation: logo-sway 4.2s ease-in-out infinite; transition: scale .35s cubic-bezier(.3, 1.7, .5, 1);
}
.logo .w { display: block; position: relative; color: var(--lc);
  font: italic 900 1em/.86 "Exo 2", sans-serif; text-transform: uppercase;
  -webkit-text-stroke: 10px #fff; paint-order: stroke fill; }
.logo .w1 { font-size: clamp(30px, 3vw, 42px); z-index: 1; translate: -60% 0; -webkit-text-stroke-width: 8px; }
.logo .w2 { font-size: clamp(46px, 4.6vw, 68px); z-index: 2; margin-top: -.12em; }
.logo .w3 { font-size: clamp(46px, 4.6vw, 68px); z-index: 3; margin-top: -.12em; translate: 40% 0; }
@media (hover: hover) { .logo:hover { scale: 1.07; animation-duration: .8s; } }
.logo.poke { scale: 1.07; animation-duration: .8s; }
@keyframes logo-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-3px); } }

/* цифры фишек со стикерами на верхней границе */
.feat { max-width: 470px; }
.nums { display: grid; gap: 4px 10px; margin: 34px 0 14px; text-align: center; }
.nums.n4 { grid-template-columns: repeat(4, 1fr); }
.nums.n3 { grid-template-columns: repeat(3, 1fr); }
.nums > div { position: relative; display: flex; flex-direction: column; align-items: center; }
.nums b { font: italic 900 52px/1 "Exo 2", sans-serif; color: var(--ink); }
.card.dark .nums b { color: var(--lime); }
.nums span { margin-top: 4px; font-weight: 700; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.card.dark .nums span { color: #b9b0cc; }
.cstk {
  position: absolute; z-index: 5; height: 90px; width: auto; max-width: 118px; object-fit: contain;
  left: 50%; top: -104px; translate: calc(-50% + var(--dx)) var(--dy); rotate: var(--r);
  filter: drop-shadow(0 10px 16px rgba(10, 6, 30, .4));
  transition: rotate .35s var(--spring), scale .35s var(--spring);
}
@media (hover: hover) { .cstk:hover { rotate: 0deg; scale: 1.12; } }
.cstk.poke { rotate: 0deg; scale: 1.12; }
.feat .ask { font: italic 900 26px/1.2 "Exo 2", sans-serif; text-transform: uppercase; margin-top: 4px; }

/* ссылки Boosty / Steam */
.links { display: grid; gap: 10px; margin-top: 18px; margin-left: -6px; }   /* оптическое выравнивание: скругление кнопки визуально на линии текста */
.lnk {
  display: inline-flex; align-items: center; gap: 12px; width: max-content; max-width: 100%;
  height: 50px; padding: 0 20px 0 8px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 16px; box-shadow: 0 6px 16px rgba(20, 10, 40, .12);
  transition: transform .3s var(--spring);
}
.card.dark .lnk { background: rgba(255, 255, 255, .95); }
.lnk svg { display: block; width: 34px; height: 34px; fill: var(--b); flex: none; overflow: visible; }
.lnk.boosty svg { width: 27px; height: 27px; margin: 0 3px 0 4px; }
.lnk:hover, .lnk:focus-visible { transform: translateX(4px); }
button.lnk { border: 0; font-family: inherit; cursor: pointer; }   /* Steam — кнопка с окном «Скоро будет», пока нет страницы */

/* ссылка на политику в последней карточке и баннер cookies (metrika.js; показывается, только когда подключён счётчик) */
.legal { margin: 14px 0 0; font-size: 12px; opacity: .7; display: flex; gap: 14px; }
.legal a, .legal button { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover, .legal button:hover { opacity: 1; }
.consent {
  position: fixed; z-index: 30; left: 50%; bottom: 18px; translate: -50% 0; width: min(560px, calc(100vw - 24px));
  padding: 16px 18px; border-radius: 20px; background: rgba(22, 18, 34, .94); color: #f4effc;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
  font-size: 13.5px; line-height: 1.45;
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 12px; }
.consent a { color: var(--lime); }
.consent-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-btns button { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font: 800 14px "Manrope", sans-serif; }
.consent-yes { background: var(--lime); color: #10170a; }
.consent-no { background: rgba(255, 255, 255, .12); color: #f4effc; }

/* окно «Скоро будет» для Steam */
.soon-dlg {
  width: min(380px, calc(100vw - 32px)); padding: 26px 24px 22px; border: 0; border-radius: 24px;
  background: rgba(255, 250, 243, .97); color: var(--ink); box-shadow: 0 24px 60px rgba(10, 6, 30, .45);
  text-align: center; font-family: "Manrope", sans-serif;
}
.soon-dlg::backdrop { background: rgba(12, 8, 24, .55); backdrop-filter: blur(3px); }
.soon-dlg[open] { animation: soon-in .35s var(--spring); }
@keyframes soon-in { from { opacity: 0; scale: .9; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.soon-ico { display: block; width: 48px; height: 48px; margin: 0 auto 10px; fill: #1b75bb; }
.soon-dlg h2 { margin: 0 0 10px; font: italic 900 30px/1 "Exo 2", sans-serif; text-transform: uppercase; }
.soon-dlg p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.soon-ok {
  height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lime); color: #10170a; font: 800 15px "Manrope", sans-serif;
  transition: transform .3s var(--spring);
}
.soon-ok:hover, .soon-ok:focus-visible { transform: scale(1.05); }
/* на тёмных ярусах (плашки тёмные) окно тоже тёмное; data-dark ставит app.js при открытии */
.soon-dlg[data-dark] { background: rgba(22, 18, 34, .97); color: #f4effc; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .6); }
.soon-dlg[data-dark] .soon-ico { fill: #4da3ff; }
a:focus-visible, button:focus-visible, .lnk:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---------- верхние плашки, точки, подсказки ---------- */
.topbar { position: fixed; z-index: 10; top: 22px; left: 22px; pointer-events: none; }
.hud {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(20, 16, 32, .78); color: #fff; backdrop-filter: blur(8px); font-weight: 800; letter-spacing: .06em;
}
.hud b {
  font: italic 900 20px "Exo 2", sans-serif; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--lime); color: #10170a; border-radius: 999px; padding: 6px 0; white-space: nowrap; overflow: hidden;
  --d: 3; width: calc(var(--d) * .68em + 26px); transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.hud small { font-size: 12px; opacity: .9; text-transform: uppercase; letter-spacing: .1em; }
.era {
  position: fixed; z-index: 10; top: 22px; left: 50%; translate: -50% 0; pointer-events: none;
  padding: 12px 22px; border-radius: 999px; background: rgba(20, 16, 32, .78); color: #fff; backdrop-filter: blur(8px);
  font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.dots { position: fixed; z-index: 10; right: 18px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
.dots button {
  width: 14px; height: 14px; border-radius: 999px; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer;
  transition: height .3s ease, background .3s ease;
}
.dots button[aria-current="true"] { height: 34px; background: #fff; }
.hint {
  position: fixed; z-index: 10; left: 50%; bottom: 18px; translate: -50% 0; pointer-events: none;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  text-align: center; padding-left: .14em; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.hint i { display: block; font-style: normal; font-size: 20px; margin: 7px 0 0 -.14em; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.up {
  position: fixed; z-index: 11; left: 50%; bottom: 22px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; cursor: pointer;
  background: rgba(20, 16, 32, .72); color: rgba(255, 255, 255, .85); backdrop-filter: blur(8px);
  font: 700 13px "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, background .2s ease;
}
.up span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.up.show { opacity: 1; pointer-events: auto; }
.up:hover { background: rgba(20, 16, 32, .9); color: #fff; }

/* ---------- «экспресс-лифт» ---------- */
.rush { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; display: none; }
.rush .strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; will-change: transform; filter: url(#vblur) brightness(1.05); }
.rush .strip div { background-size: cover; background-position: center; }
.rush::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .25), transparent 20%, transparent 80%, rgba(0, 0, 0, .25)); }

/* ================= ПЕРЕХОДНЫЕ РАЗРЕШЕНИЯ: небольшие ноутбуки ================= */
@media (max-width: 1399px) {
  .bio { width: 290px; font-size: 13px; }
  .hero { height: min(74vh, 700px); }
}
@media (max-width: 1239px) {
  .card { max-width: 430px; padding: 22px 24px; }
  .first-card { max-width: 470px; padding-right: 130px; }
  .card p { font-size: 16px; }
  .speech { font-size: 17px !important; }
  .sticker-first, .sticker-ws { width: 128px; }
  .nums b { font-size: 44px; }
  .cstk { height: 78px; top: -94px; }
  .bio { width: 250px; font-size: 12.5px; }
  .hero.right { right: 2vw; }
  .hero.left { left: 2vw; }
}

/* ================= ПЛАНШЕТЫ и переходные (761–1099) ================= */
@media (max-width: 1099px) {
  .card.left { left: 4vw; }
  .card.right { right: 4vw; }
  .hero { height: min(66vh, 640px); }
  .hero.right { right: -2vw; }
  .hero.left { left: -2vw; }
  .hero.miti { height: min(50vh, 480px); }
  .tag { font-size: clamp(34px, 5vw, 52px); -webkit-text-stroke-width: 8px; }
  .logo .w1 { font-size: 30px; }
  .logo .w2, .logo .w3 { font-size: 46px; -webkit-text-stroke-width: 9px; }
  /* описание героя — по нажатию на героя */
  .hero { cursor: pointer; }
  .bio { top: 18%; right: 8%; left: auto; width: min(290px, 70vw); rotate: 0deg; opacity: 0 !important; pointer-events: none; translate: 0 10px; transition: opacity .25s ease, translate .25s ease; }
  .hero.left .bio { left: 8%; right: auto; rotate: 0deg; }
  .hero.show-bio .bio { opacity: 1 !important; pointer-events: auto; translate: 0 0; background: rgba(255, 250, 243, .94); }
  .tier[data-dark] .hero.show-bio .bio { background: rgba(22, 18, 34, .94); }
  /* имя героя у края экрана не должно уезжать за край */
  .hero.left .tag { left: calc(2vw + 14px); translate: 0 18%; }
  .tag::after { content: "ⓘ"; font-size: .4em; -webkit-text-stroke: 0; vertical-align: super; margin-left: .15em; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .6); }
}
/* портретный планшет: карточка сверху, герой снизу */
@media (max-width: 1099px) and (orientation: portrait) {
  .card.left, .card.right { top: 118px; translate: none; }
  .card.right { right: 4vw; }
  .hero { height: min(58vh, 640px); }
  .first-card .logo { top: auto; bottom: auto; position: relative; margin: 0 0 14px -6px; }
  .era { top: 66px; }   /* под счётчиком уровня, чтобы не наезжать на него */
}

/* ================= ТЕЛЕФОНЫ (≤760) ================= */
@media (max-width: 760px) {
  .topbar { top: 12px; left: 12px; }
  .hud { gap: 8px; padding: 6px 12px 6px 6px; }
  .hud b { font-size: 17px; }
  .hud small { font-size: 10px; letter-spacing: .05em; }
  .era { top: auto; bottom: 12px; font-size: 9.5px; padding: 7px 12px; letter-spacing: .06em; }
  .dots { right: 8px; gap: 8px; }
  .dots button { width: 11px; height: 11px; }
  .dots button[aria-current="true"] { height: 26px; }
  .hint { display: none; }
  .up { top: 12px; bottom: auto; left: auto; right: 12px; translate: none; }   /* сверху справа — не закрывает ссылки карточки */

  /* карточки — компактные, в пропорциях первого экрана (решение автора 12.10); у Гоблина (герой слева) — справа */
  .card, .card.left, .card.right {
    left: 12px; right: auto; bottom: auto; translate: none; width: 292px; max-width: calc(100vw - 84px);
    padding: 14px 14px 12px; border-radius: 20px;
  }
  .card p { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
  h2 { font-size: 22px; }
  .speech { font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 8px !important; padding-right: 40px; }
  .meta { font-size: 12px !important; }
  .sticker-first { width: 80px; right: -38px; top: -44px; rotate: 8deg; }   /* стикер Миши приклеен на правый верхний угол карточки */
  .sticker-ws { width: 100px; right: -14px; top: -40px; }
  .first-card .logo { position: absolute; top: auto; bottom: 100%; left: 2px; margin: 0 0 -14px; z-index: 5; }   /* чуть наезжает на карточку */
  .logo .w1 { font-size: 18px; -webkit-text-stroke-width: 5px; }
  .logo .w2, .logo .w3 { font-size: 28px; -webkit-text-stroke-width: 6px; }
  .links { gap: 6px; margin-top: 10px; margin-left: -5px; }
  .lnk { height: 38px; font-size: 13px; padding: 0 14px 0 6px; gap: 10px; white-space: nowrap; }
  .lnk svg { width: 26px; height: 26px; }
  .lnk.boosty svg { width: 20px; height: 20px; }
  .nums { margin-top: 32px; gap: 2px 4px; }
  .nums b { font-size: 26px; }
  .nums span { font-size: 9px; letter-spacing: .02em; }
  .cstk { height: 58px; top: -70px; max-width: 64px; translate: calc(-50% + var(--dx) * .4) var(--dy); rotate: calc(var(--r) * .6); }   /* крупнее — меньше разлёт, чтобы не наезжали друг на друга */
  .feat .ask { font-size: 18px; }

  /* ярус выше экрана: сначала обычная прокрутка внутри яруса, лифт — когда ярус долистан до края (app.js) */
  .tier { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  .tier::-webkit-scrollbar { display: none; }
  .tier::after { display: none; }
  /* разрез гигаполиса: стопка картинок встык, раскладку задаёт app.js (layoutStacks) */
  .tier { background-repeat: no-repeat; background-color: #34303c; }
  .tier[data-level="180"] { background-color: #f3ece2; }

  /* герой сверху, карточка под ним (кроме первого экрана — там наоборот, см. ниже) */
  .hero, .hero.miti { top: 64px; bottom: auto; height: 57vh; height: 57dvh; }
  .hero.miti { height: 48vh; height: 48dvh; }
  .card, .card.left, .card.right { top: calc(64px + 57vh + 24px); top: calc(64px + 57dvh + 24px); }
  .tier.bottom .card { top: calc(64px + 48vh + 24px); top: calc(64px + 48dvh + 24px); }
  .tier[data-level="117"] .card { top: calc(64px + 57vh); top: calc(64px + 57dvh); }   /* стикеры чуть заходят на стопы Гоблина */
  .card::after {   /* отступ под карточкой и подсказка, что дальше — следующий ярус */
    content: "тяни дальше ↓"; position: absolute; top: 100%; left: 0; right: 0; height: 84px; padding-top: 18px;
    text-align: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7); pointer-events: none;
  }
  .tier.bottom .card::after { content: ""; }
  .tag { font-size: 32px; -webkit-text-stroke-width: 6px; bottom: auto; top: 4%; translate: 0 0; }
  .tag::after { content: none; }
  .hero.right .tag { left: auto; right: min(84%, calc(100vw - 150px)); }
  .hero.left .tag { left: auto; right: calc(var(--hw, 300px) - 14vw - 100vw + 70px); top: 0; translate: 0 6px; }   /* Гоблин: имя чуть заходит на вайфай-пушку, но не закрывает её */
  .tier[data-level="48"] .hero.right .tag { right: min(74%, calc(100vw - 150px)); }   /* Крыс: имя чуть правее */
  /* описание героя видно сразу: плашка у противоположного края экрана (--hw — ширина героя, считает app.js);
     появляется и наклонена как на ПК, по касанию — выпрямляется и увеличивается (app.js, класс .poke) */
  .hero.right { right: -14vw; }
  .hero.left { left: -14vw; }
  .bio, .hero.left .bio, .hero.right .bio {
    top: calc(4% + 46px); width: 46vw; padding: 8px 10px; font-size: 10.5px; line-height: 1.4; rotate: -3deg;
    opacity: 0 !important; translate: 0 12px; pointer-events: auto; background: rgba(255, 250, 243, .6);
    backdrop-filter: none; will-change: rotate, scale;   /* размытие под плашкой на телефоне дёргает анимацию — фон и так плотный */
    transition: opacity .5s ease .45s, translate .5s ease .45s, rotate .45s var(--spring), scale .45s var(--spring), background .3s ease;
  }
  .hero.left .bio { rotate: 3deg; }
  .tier.is-current .bio { opacity: 1 !important; translate: 0 0; }
  .hero .bio.poke { rotate: 0deg; scale: 1.05; background: rgba(255, 250, 243, .9); }   /* в покое прозрачнее (как на ПК), по касанию — плотнее */
  .tier[data-dark] .bio { background: rgba(22, 18, 34, .6); }
  .tier[data-dark] .hero .bio.poke { background: rgba(22, 18, 34, .9); }
  .hero.right .bio { right: auto; left: calc(12px - (100vw - var(--hw, 300px)) - 14vw); }
  .hero.left .bio { left: auto; right: calc(12px - (100vw - var(--hw, 300px)) - 14vw); }
  .bio .weapon { margin-top: 7px; padding-top: 6px; }

  /* первый экран (решение автора 12.10): карточка Миши сверху, Зим — под ней (--cardh считает app.js) */
  .tier.top .first-card { top: 132px; }
  .tier.top .first-card::after { content: none; }
  .tier.top .hero { top: calc(132px + var(--cardh, 330px) + 40px); }
  .tier.top::after {   /* отступ под Зим и подсказка, что дальше — следующий ярус */
    display: block; content: "тяни дальше ↓"; position: absolute; left: 0; right: 0; bottom: auto; height: 84px; background: none;
    top: calc(132px + var(--cardh, 330px) + 40px + 57dvh); padding-top: 14px;
    text-align: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .8), 0 1px 14px rgba(0, 0, 0, .6);   /* фон верхнего яруса светлый — тень плотнее */
  }
}

/* ================= РЕЖИМ ПРОКРУТКИ (.flow): низкие экраны, ландшафт телефона, крупный шрифт ================= */
.flow body { overflow: auto; }
.flow .stage { position: static; overflow: visible; }
.flow .tier {
  position: relative; transform: none !important; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 120px 14px 28px; overflow: hidden;
}
.flow .tier .hero, .flow .tier .card { opacity: 1; transform: none; transition: none; }
.flow .hero { position: absolute; top: 70px; bottom: auto; height: 62vh; max-height: 560px; }
.flow .card, .flow .card.left, .flow .card.right {
  position: relative; inset: auto; translate: none; margin-top: 40vh; width: min(560px, 100%); max-width: none;
}
.flow .tier.top .card { margin-top: 46vh; }
.flow .rush, .flow .dots, .flow .hint, .flow .up { display: none; }
.flow .topbar { position: fixed; }
.flow .era { position: absolute; }
.flow .first-card .logo { position: relative; top: auto; bottom: auto; margin: 0 0 12px -6px; }
/* ландшафт (телефон боком, низкое окно): карточка и герой рядом, а не друг над другом */
@media (orientation: landscape) {
  .flow .tier { flex-direction: row; justify-content: flex-start; align-items: flex-end; padding: 76px 16px 20px; }
  .flow .card, .flow .card.left, .flow .card.right, .flow .tier.top .card { margin: 0; width: min(540px, 60%); }
  .flow .tier:has(.hero.left) .card { margin-left: auto; }   /* карточка — с противоположной от героя стороны */
  .flow .hero { top: auto; bottom: 0; height: calc(100vh - 70px); height: calc(100dvh - 70px); max-height: 640px; }
  .flow .hero.right { right: 2vw; }
  .flow .hero.left { left: 2vw; }
  .flow .tag { bottom: auto; top: 2%; }
  .flow .era { left: auto; right: 16px; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-dlg[open] { animation: none; }
  .hero, .card { transition: opacity .3s ease; }
  .hero > img, .tag, .logo, .hint i { animation: none; }
}