/* blot365.com — вид как в игре: ночь над Араратом, тёплое золото, стекло.
   Цвета — одно место (ниже :root), значения из палитры игры: design/newmain-design/tools/logo_palette.py (BASES)
   → admin-web/src/app/tokens.css, design/screens/common.css. Поменяли цвет в игре — поменяйте здесь же. */

@font-face{font-family:"Google Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gs-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+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gs-400-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gs-400-armenian.woff2) format("woff2");unicode-range:U+0530-058F,U+FB13-FB17}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/gs-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+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212,U+2215}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/gs-700-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Google Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/gs-700-armenian.woff2) format("woff2");unicode-range:U+0530-058F,U+FB13-FB17}
@font-face{font-family:"Noto Serif Armenian";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/noto-serif-armenian-700.woff2) format("woff2")}
/* знак «Блот» / «Blot» на русской и английской страницах (владелец 15.11: «текст блот, меняя языки… тоже должен меняться») — Noto Serif Bold, в файле только буквы знака */
@font-face{font-family:"Blot Mark";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/noto-serif-700-mark-latin.woff2) format("woff2");unicode-range:U+0042,U+006C,U+006F,U+0074}
@font-face{font-family:"Blot Mark";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/noto-serif-700-mark-cyrillic.woff2) format("woff2");unicode-range:U+0411,U+043B,U+043E,U+0442}

:root{
  /* ночь (BASES: bg, bgLight, glass, glow, stars) */
  --bg:#040E24;
  --bg-2:#0B1C38;
  --bg-light:#1E4468;
  --glow:#527FA0;
  --stars:#EAF1FF;
  --glass:rgba(7,20,44,.8);
  --glass-2:rgba(143,166,204,.1);
  --glass-hi:rgba(255,255,255,.055);
  --line:rgba(143,166,204,.28);
  --line-soft:rgba(143,166,204,.16);
  /* текст (BASES: text, text2) */
  --text:#EEF0F6;
  --text-2:#9DABC4;
  /* тёплый свет — акцент и главная кнопка (BASES: accent, accentHi, accentDeep, onAccent) */
  --accent:#EBC894;
  --accent-hi:#FFF1D6;
  --accent-deep:#C09763;
  --on-accent:#0A1630;
  --main:linear-gradient(180deg,#FFF1D6,#EBC894 55%,#C09763);
  --heading:linear-gradient(120deg,#FFF1D6 15%,#EBC894 70%,#C09763);
  --accent-soft:rgba(235,200,148,.08);
  /* масти: червы и бубны — чистый красный, как в игре (владелец, 02.11.2026: «прямо F00») */
  --suit-red:#F00;
  /* шрифты: как в игре — Google Sans, знак «Բլոտ» — Noto Serif Armenian */
  --font:"Google Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Armenian",Arial,sans-serif;
  --font-mark:"Noto Serif Armenian","Blot Mark","Google Sans",Georgia,serif;
  --r:20px;
  --pad:16px;
  --max:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;min-height:100vh;background:
  radial-gradient(1100px 620px at 78% -8%,rgba(82,127,160,.26),transparent 62%),
  radial-gradient(900px 560px at 8% 0%,rgba(30,68,104,.34),transparent 60%),
  linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 46%,var(--bg) 100%);
  background-color:var(--bg);color:var(--text);font:400 17px/1.62 var(--font);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hi)}
:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.18;margin:0;font-weight:700;text-wrap:balance}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}
strong{color:var(--accent-hi);font-weight:700}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
@media (min-width:720px){:root{--pad:28px}}

.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:10px 16px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* фон — армянские вещи одной тонкой золотой линией (tools/art.py; владелец 15.11: «профессионально и эстетически красиво» —
   мало рисунков, много воздуха). Слой стоит позади всего; рисунки медленно плывут, чуть смещаются от прокрутки и мыши на
   разной глубине (site.js), изредка по золоту проходит блик. Прозрачность малая — текст читается как прежде. */
.art{--ao:.13;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.art-doc{--ao:.1}
.art-defs{position:absolute;width:0;height:0;overflow:hidden}
.art-i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;overflow:visible;fill:none;stroke:url(#a-gold);stroke-width:1.15;stroke-linecap:round;
  stroke-linejoin:round;opacity:var(--ao);transform:rotate(var(--r));
  translate:calc(var(--mx, 0) * var(--z) * -22px) calc(var(--sy, 0) * var(--z) * 46px + var(--my, 0) * var(--z) * -16px);
  transition:translate 1.2s cubic-bezier(.2,.8,.2,1);
  animation:artdrift var(--d) ease-in-out var(--dl) infinite alternate,artglint var(--g) ease-in-out var(--gl) infinite}
.art-i *{vector-effect:non-scaling-stroke}
@keyframes artdrift{to{transform:rotate(calc(var(--r) + 3deg)) translate(12px,-16px)}}
@keyframes artglint{0%,84%,100%{opacity:var(--ao)}92%{opacity:calc(var(--ao) * 2.6)}}
@media (max-width:640px){.art-i{left:var(--xm);top:var(--ym);width:var(--wm)}.art-d{display:none}}

/* звёзды — тонкое мерцание (без движения, если система просит меньше анимации) */
.stars{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.stars::before,.stars::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.stars::before{background-image:
  radial-gradient(1.2px 1.2px at 24px 38px,var(--stars) 60%,transparent 62%),
  radial-gradient(1px 1px at 132px 84px,var(--stars) 60%,transparent 62%),
  radial-gradient(1.4px 1.4px at 210px 22px,var(--stars) 60%,transparent 62%),
  radial-gradient(1px 1px at 78px 168px,var(--stars) 60%,transparent 62%),
  radial-gradient(1.2px 1.2px at 250px 190px,var(--stars) 60%,transparent 62%);
  background-size:280px 240px;opacity:.55;animation:twinkle 7s ease-in-out infinite}
.stars::after{background-image:
  radial-gradient(1px 1px at 60px 110px,var(--stars) 60%,transparent 62%),
  radial-gradient(1.6px 1.6px at 300px 60px,var(--stars) 60%,transparent 62%),
  radial-gradient(1px 1px at 190px 230px,var(--stars) 60%,transparent 62%),
  radial-gradient(1.2px 1.2px at 350px 170px,var(--stars) 60%,transparent 62%);
  background-size:380px 300px;opacity:.35;animation:twinkle 9s ease-in-out -3s infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.7}}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--accent);min-height:44px}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px var(--line-soft),0 6px 18px -6px rgba(235,200,148,.45)}
.brand-mark{font:700 26px/1 var(--font-mark);color:var(--accent);letter-spacing:.01em}
/* языки в подвале */
.langs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line-soft)}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:36px;padding:0 10px;border-radius:999px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:700}
.langs a:hover{color:var(--text)}
.langs a[aria-current="page"]{background:var(--main);color:var(--on-accent)}
/* ─── шапка: одна стеклянная «пилюля» по центру (владелец 15.11: «максимум дорогое состояние»; PRODUCT.md, «Шапка сайта —
   дорого»). Один компонент на всех страницах — build.py, header(); движение — site.js. Без JS группы открываются наведением
   и фокусом, на телефоне меню открывается фокусом кнопки. ─── */
@property --pb{syntax:'<color>';inherits:false;initial-value:rgba(7,18,40,.6)}
.hdr{position:sticky;top:0;z-index:50;display:flex;justify-content:center;padding:12px 12px 0;pointer-events:none}
.pill{--pb:rgba(7,18,40,.6);position:relative;pointer-events:auto;display:flex;align-items:center;gap:4px;width:100%;max-width:1040px;
  min-height:60px;padding:7px 7px 7px 16px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(var(--pb),var(--pb)) padding-box,
    linear-gradient(115deg,rgba(255,241,214,.62),rgba(192,151,99,.14) 30%,rgba(143,166,204,.12) 62%,rgba(235,200,148,.55)) border-box;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  transition:--pb .4s ease,min-height .45s cubic-bezier(.2,.8,.2,1),max-width .55s cubic-bezier(.2,.8,.2,1),padding .45s ease,box-shadow .4s ease}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.pill::after{content:"";position:absolute;left:18%;right:18%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,241,214,.85),transparent);opacity:.7}
.hdr.scrolled .pill{--pb:rgba(3,10,26,.86);min-height:54px;max-width:980px;padding-block:4px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.pill .brand{flex:none;gap:9px;padding-right:10px;min-height:44px}
.pill .brand img{width:34px;height:34px;border-radius:10px}
.pill .brand-mark{font-size:23px}
.drawer{display:contents}
/* меню: группы, золотая подсветка скользит от пункта к пункту */
.menu{margin:0 auto}
.menu-list{position:relative;display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mi{position:relative}
.mi-top{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 17px;border:0;border-radius:999px;
  background:none;font:500 15px/1 var(--font);letter-spacing:.01em;color:var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:color .3s ease}
.mi-top:hover,.mi.open>.mi-top,.mi-top[aria-current="page"]{color:var(--accent-hi)}
.mi-top .chev{width:11px;height:11px;opacity:.65;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mi.open>.mi-top .chev{transform:rotate(180deg);opacity:1}
.mi.is-current>.mi-top::after{content:"";position:absolute;left:17px;right:17px;bottom:8px;height:1.5px;border-radius:2px;background:var(--main)}
.js .mi.is-current>.mi-top::after{display:none}
.glider{position:absolute;top:0;bottom:0;left:0;width:var(--gw,0px);transform:translateX(var(--gx,0px));border-radius:999px;
  pointer-events:none;opacity:0;list-style:none;
  background:linear-gradient(180deg,rgba(255,241,214,.15),rgba(235,200,148,.05));
  box-shadow:inset 0 0 0 1px rgba(235,200,148,.34),0 8px 24px -12px rgba(235,200,148,.6);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
/* выпадающие стеклянные панели: появляются плавно, пункты — по одному */
.sub{position:absolute;top:calc(100% + 16px);left:50%;width:max-content;min-width:300px;max-width:360px;padding:8px;border-radius:24px;
  background:rgba(6,16,36,.9);border:1px solid rgba(235,200,148,.22);
  box-shadow:0 34px 80px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.97);transform-origin:50% 0;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mi.open .sub,html:not(.js) .mi:hover .sub,html:not(.js) .mi:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.sub ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sub a{display:grid;gap:4px;padding:12px 16px;border-radius:16px;text-decoration:none;color:var(--text);opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .3s ease,background .25s ease}
.mi.open .sub a,html:not(.js) .mi:hover .sub a,html:not(.js) .mi:focus-within .sub a{opacity:1;transform:none;
  transition:opacity .4s ease calc(var(--k) * 50ms + 80ms),transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--k) * 50ms + 80ms),background .25s ease}
.sub a:hover,.sub a:focus-visible{background:rgba(235,200,148,.09)}
.sub b{font-size:15px;font-weight:700;color:var(--accent-hi)}
.sub small{font-size:13px;line-height:1.4;color:var(--text-2)}
.sub a[aria-current="page"] b{color:var(--accent)}
/* языки — сегменты с бегущим золотым «пальцем» */
.seg{--i:0;position:relative;flex:none;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:999px;
  background:rgba(143,166,204,.08);border:1px solid rgba(143,166,204,.16)}
.seg a{position:relative;z-index:1;display:grid;place-items:center;min-width:44px;min-height:36px;padding:0 9px;border-radius:999px;
  font:700 13px/1 var(--font);color:var(--text-2);text-decoration:none;transition:color .35s ease}
.seg a[aria-current="page"]{color:var(--on-accent)}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:var(--main);
  box-shadow:0 5px 16px -6px rgba(235,200,148,.85),inset 0 1px 0 rgba(255,255,255,.55);
  transform:translateX(calc(var(--i) * 100%));transition:transform .55s cubic-bezier(.3,1.25,.5,1)}
.seg:has(a:nth-of-type(1):hover) .seg-thumb{transform:translateX(0)}
.seg:has(a:nth-of-type(2):hover) .seg-thumb{transform:translateX(100%)}
.seg:has(a:nth-of-type(3):hover) .seg-thumb{transform:translateX(200%)}
.seg:has(a:hover) a{color:var(--text-2)}
.seg a:hover,.seg:not(:has(a:hover)) a[aria-current="page"]{color:var(--on-accent)}
/* «Скачать» — золото с бликом и лёгким «притяжением» к курсору (site.js) */
.btn-dl{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:8px;
  padding:0 19px 0 15px;border-radius:999px;font:700 15px/1 var(--font);color:var(--on-accent);text-decoration:none;background:var(--main);
  box-shadow:0 10px 26px -12px rgba(235,200,148,.9),inset 0 1px 0 rgba(255,255,255,.55);
  translate:var(--tx,0px) var(--ty,0px);transition:translate .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.btn-dl svg{width:15px;height:15px}
.btn-dl::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s ease}
.btn-dl:hover{color:var(--on-accent);box-shadow:0 14px 34px -12px rgba(235,200,148,1),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-dl:hover::after{transform:translateX(120%)}
.btn{translate:var(--tx,0px) var(--ty,0px);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,translate .4s cubic-bezier(.2,.8,.2,1)}
/* кнопка меню (телефон): две линии становятся крестиком */
.burger{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:4px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(143,166,204,.2);background:rgba(143,166,204,.08)}
.burger span{position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;background:var(--text);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),top .35s ease}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.hdr.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.hdr.menu-open .burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
.no-scroll{overflow:hidden}

/* телефон и узкое окно: компактная пилюля (знак, «Скачать», меню); меню на весь экран, тёмное стекло, пункты — по очереди */
@media (max-width:979px){
  .pill{min-height:56px;padding:5px 5px 5px 13px;gap:2px}
  .hdr.scrolled .pill{min-height:52px}
  .pill .brand-mark{font-size:21px}
  .burger{display:inline-block}
  .btn-dl{margin-left:auto;padding:0 15px 0 12px;min-height:42px;font-size:14px}
  .drawer{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;gap:26px;overflow-y:auto;
    padding:96px 26px calc(30px + env(safe-area-inset-bottom));
    background:radial-gradient(120% 60% at 50% 0%,rgba(235,200,148,.12),transparent 60%),rgba(2,8,22,.93);
    -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
    opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
  .hdr.menu-open .drawer,html:not(.js) .hdr:focus-within .drawer{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
  .menu{margin:0}
  .menu-list{flex-direction:column;align-items:stretch;gap:18px}
  .glider{display:none}
  .mi-top{padding:0 2px;min-height:44px;font-size:27px;font-weight:700;color:var(--accent-hi);cursor:default}
  a.mi-top{cursor:pointer}
  .mi-top .chev,.mi.is-current>.mi-top::after{display:none}
  .sub{position:static;width:auto;min-width:0;max-width:none;padding:2px 0 0;border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none;transition:none}
  .sub::before{display:none}
  .sub a{opacity:1;transform:none;padding:10px 2px;border-radius:12px}
  .sub b{font-size:18px;font-weight:500;color:var(--text)}
  .sub small{display:none}
  .seg{align-self:flex-start;margin-top:auto}
  .seg a{min-width:64px;min-height:44px;font-size:15px}
  .drawer .mi,.drawer .seg{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
  .hdr.menu-open .drawer .mi,.hdr.menu-open .drawer .seg,html:not(.js) .hdr:focus-within .drawer .mi,
  html:not(.js) .hdr:focus-within .drawer .seg{opacity:1;transform:none}
  .hdr.menu-open .mi:nth-child(1){transition-delay:.06s}.hdr.menu-open .mi:nth-child(2){transition-delay:.12s}
  .hdr.menu-open .mi:nth-child(3){transition-delay:.18s}.hdr.menu-open .mi:nth-child(4){transition-delay:.24s}
  .hdr.menu-open .drawer .seg{transition-delay:.3s}
}
@media (max-width:380px){.pill .brand-mark{display:none}}

/* главная: небо → Арарат внизу (Масис справа, Сис слева — картинка из игры, не зеркалим) */
.hero{--ar:.5581;--cut:.2;--sky:.26;position:relative;isolation:isolate;overflow:hidden;padding:18px 0 calc((1 - var(--cut) - var(--sky)) * var(--ar) * 100vw)}
/* картинка прижата к низу: нижняя доля --cut (тёмная долина) уходит за край, верхняя доля --sky (небо) может лечь под текст */
.hero-img{position:absolute;inset:0;z-index:-1}
.hero-img img{position:absolute;left:0;width:100%;top:calc(100% - (1 - var(--cut)) * var(--ar) * 100vw);
  --fade:linear-gradient(180deg,transparent 0,#000 24%,#000 calc((1 - var(--cut)) * 100% - 16%),transparent calc((1 - var(--cut)) * 100%));
  -webkit-mask-image:var(--fade);mask-image:var(--fade)}
.hero::before{content:"";position:absolute;left:50%;top:-10%;width:min(900px,120vw);height:520px;transform:translateX(-50%);z-index:-2;
  background:radial-gradient(closest-side,rgba(235,200,148,.12),transparent 70%);animation:breathe 9s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media (max-width:640px){.hero{--ar:1.7917;--cut:.46;--sky:.25}}
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.mark{font:700 clamp(64px,15vw,124px)/1 var(--font-mark);margin:6px 0 10px;color:var(--accent);
  background:var(--heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(235,200,148,.32));padding:.04em .08em .26em;margin-bottom:-.12em}
.hero h1{font-size:clamp(28px,4.4vw,48px);color:var(--accent-hi);max-width:24ch;letter-spacing:-.01em}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--text);max-width:40em;margin:14px auto 0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:24px}
.play-note{width:100%;margin:2px 0 0;font-size:14px;color:var(--text-2)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:16px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;translate:var(--tx,0px) var(--ty,0px);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,translate .4s cubic-bezier(.2,.8,.2,1)}
.btn svg{width:20px;height:20px;flex:none}
.btn-main{background:var(--main);color:var(--on-accent);box-shadow:0 12px 32px -12px rgba(235,200,148,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-main:hover{color:var(--on-accent);transform:translateY(-1px);box-shadow:0 16px 38px -12px rgba(235,200,148,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-ghost{background:var(--glass-2);border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{color:var(--accent-hi);border-color:rgba(235,200,148,.5)}

/* разделы */
.sec{padding:36px 0;overflow-x:clip}
@media (min-width:720px){.sec{padding:48px 0}}
.sec>.wrap>h2,.h2{font-size:clamp(25px,3.5vw,34px);color:var(--accent-hi);margin-bottom:18px}
.glass{background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:inset 0 1px 0 var(--glass-hi),0 26px 50px -30px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.prose{max-width:46em}
.prose p{color:var(--text)}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;padding:22px 20px;gap:8px;transition:border-color .25s ease,transform .25s ease}
.card h3{font-size:21px;color:var(--accent-hi)}
.card p{color:var(--text-2);margin:0}
.card .tag{align-self:flex-start;font-size:13px;font-weight:700;color:var(--accent);padding:3px 10px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(235,200,148,.32)}
.card .go{margin-top:auto;padding-top:10px;font-weight:700}
.card a.stretch{color:inherit;text-decoration:none}
.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card:hover{border-color:rgba(235,200,148,.42)}
.card:focus-within{border-color:rgba(235,200,148,.7)}
.card .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid rgba(235,200,148,.28);color:var(--accent)}
.card .ico svg{width:24px;height:24px}
.panel{padding:26px 22px}
@media (min-width:720px){.panel{padding:34px 36px}}
.rating{border-left:3px solid var(--accent-deep);font-size:clamp(17px,2vw,19px)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px}
.checks li::before{content:"";position:absolute;left:2px;top:.32em;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(235,200,148,.45)}
.checks li::after{content:"";position:absolute;left:9px;top:calc(.32em + 5px);width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cta-box{display:grid;gap:22px;align-items:center;text-align:center;justify-items:center}
.cta-box img{width:148px;height:148px;border-radius:34px;box-shadow:0 0 0 1px var(--line-soft),0 18px 50px -14px rgba(235,200,148,.45)}
@media (min-width:760px){.cta-box{grid-template-columns:auto 1fr;text-align:left;justify-items:start}.cta-box .cta-row{justify-content:flex-start}}
.cta-box h2{font-size:clamp(25px,3.4vw,32px);color:var(--accent-hi)}
.cta-box p{color:var(--text-2);margin-top:8px}

/* страницы правил */
.page-head{position:relative;isolation:isolate;padding:22px var(--pad) 8px;text-align:left}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;font-size:14px;color:var(--text-2)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--text-2)}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--accent-hi)}
.page-head h1{font-size:clamp(30px,5vw,50px);color:var(--accent-hi);max-width:22ch;letter-spacing:-.01em}
.page-head .lead{margin:14px 0 0}
.page-head .cta-row{justify-content:flex-start;margin-top:20px}
.page-head .play-note{text-align:left}
.page-body{padding-top:20px;padding-bottom:20px}
.toc{display:flex;gap:8px;margin:6px 0 20px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line-soft);color:var(--text);text-decoration:none;font-size:15px;white-space:nowrap}
.toc a:hover{border-color:rgba(235,200,148,.5);color:var(--accent-hi)}
.toc a:last-child{margin-right:24px}
@media (min-width:900px){.toc{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}.toc a:last-child{margin-right:0}}
.toc-label{font-size:14px;color:var(--text-2);margin:0 0 6px}
/* компьютер: оглавление справа и едет вместе с текстом */
@media (min-width:1120px){
  .page-body{display:grid;grid-template-columns:minmax(0,860px) minmax(220px,1fr);column-gap:36px;align-items:start}
  .page-body>.doc{grid-column:1;grid-row:1}
  .toc-box{grid-column:2;grid-row:1;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;padding:18px 16px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line-soft)}
  .toc{flex-direction:column;gap:2px;margin:0}
  .toc a{background:none;border:0;min-height:34px;padding:0 10px;border-radius:10px;white-space:normal;font-size:15px;color:var(--text-2)}
  .toc a:hover{background:var(--glass-2);color:var(--accent-hi)}
}
.chap{padding:22px 20px;margin-bottom:16px;scroll-margin-top:16px}
@media (min-width:720px){.chap{padding:28px 32px}}
.chap h2{font-size:clamp(22px,2.8vw,27px);color:var(--accent);margin-bottom:14px}
.chap h2 a.anchor{color:inherit;text-decoration:none}
.chap h2 a.anchor:hover::after{content:" #";color:var(--text-2)}
.doc{max-width:860px}
.dots{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
.dots li{position:relative;padding-left:20px}
.dots li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent-deep);box-shadow:0 0 8px rgba(235,200,148,.5)}
.steps{margin:0 0 12px;padding-left:24px;display:grid;gap:8px}
.steps li::marker{color:var(--accent);font-weight:700}
.ex{margin:12px 0;padding:12px 16px;border-radius:0 14px 14px 0;background:var(--accent-soft);border-left:3px solid var(--accent-deep);color:var(--text)}
.ex b{color:var(--accent);font-weight:700}
.chap .more{color:var(--text-2);margin-top:12px}
.tbl-wrap{overflow-x:auto;margin:0 0 14px}
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl th{font-size:14px;color:var(--text-2);font-weight:700}
.tbl td:first-child{font-weight:700;color:var(--accent-hi)}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--accent)}
.tbl td:nth-child(2){white-space:nowrap}
.qa{padding:20px;margin-bottom:14px}
@media (min-width:720px){.qa{padding:24px 30px}}
.qa h2{font-size:20px;color:var(--accent-hi);margin-bottom:8px}
.qa p{color:var(--text)}

/* масти — значками, как в игре (design/screens/common.css, .su) */
.su{display:inline-block;width:.8em;height:.8em;vertical-align:-.05em;margin:0 .04em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.su.he,.su.di{color:var(--suit-red)}
.su.sp,.su.cl{color:var(--text)}
.su.he{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2C11.5 20.8 2 14.2 2 8.3 2 5.4 4.3 3 7.2 3c2 0 3.8 1.1 4.8 2.9C13 4.1 14.8 3 16.8 3 19.7 3 22 5.4 22 8.3c0 5.9-9.5 12.5-10 12.9Z'/%3E%3C/svg%3E")}
.su.di{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c2.3 3.7 5 7.1 8.6 10.2-3.6 3.1-6.3 6.5-8.6 10.2-2.3-3.7-5-7.1-8.6-10.2C7 8.9 9.7 5.5 12 1.8Z'/%3E%3C/svg%3E")}
.su.sp{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C10 5.3 3 9.4 3 14.2 3 16.8 5 18.7 7.4 18.7c1.5 0 2.9-.7 3.7-1.9-.2 2.2-1 3.8-2.6 5.2h7c-1.6-1.4-2.4-3-2.6-5.2.8 1.2 2.2 1.9 3.7 1.9 2.4 0 4.4-1.9 4.4-4.5C21 9.4 14 5.3 12 2Z'/%3E%3C/svg%3E")}
.su.cl{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='3.9'/%3E%3Ccircle cx='5.2' cy='13.2' r='3.9'/%3E%3Ccircle cx='18.8' cy='13.2' r='3.9'/%3E%3Cpath d='M12 12.6V8.5M12 12.6L8.6 13.1M12 12.6L15.4 13.1' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M11.3 12.6c-.1 3.6-1.1 6.2-3 8.6h7.4c-1.9-2.4-2.9-5-3-8.6Z'/%3E%3C/svg%3E")}
.nb{white-space:nowrap}

/* подвал: полоса Арарата и ссылки */
.foot{position:relative;margin-top:28px}
.foot-img{display:block;width:100%;height:clamp(150px,22vw,300px);object-fit:cover;object-position:28% 42%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%)}
.foot-in{display:grid;gap:26px;grid-template-columns:1fr;padding-top:10px;padding-bottom:22px}
@media (min-width:640px){.foot-in{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.foot-in{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}
.foot h2{font-size:15px;color:var(--text-2);margin:0 0 10px;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot ul a{display:inline-flex;align-items:center;min-height:36px;color:var(--text);text-decoration:none}
.foot ul a:hover{color:var(--accent-hi);text-decoration:underline}
.foot-brand p{color:var(--text-2);font-size:15px;margin:12px 0 16px;max-width:30em}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;border-top:1px solid var(--line-soft);padding-top:18px;padding-bottom:28px;font-size:14px;color:var(--text-2)}
.foot-bottom .langs{background:none;border:0;padding:0}

/* корень: выбор языка */
.pick{display:grid;gap:14px;grid-template-columns:1fr;width:100%;max-width:980px;margin:28px auto 0;text-align:left}
@media (min-width:760px){.pick{grid-template-columns:repeat(3,1fr)}}
.pick .card.is-suggested{border-color:rgba(235,200,148,.7);box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(235,200,148,.35),0 24px 60px -24px rgba(235,200,148,.35)}
.pick .card h2{font-size:22px;color:var(--accent-hi)}
.pick .card .lang{font-size:14px;font-weight:700;color:var(--accent)}

/* ─── движение (владелец 15.11: «много анимации, чтобы красиво было»). Только transform и opacity — быстро. ─── */

/* яркие звёзды мерцают, иногда падает звезда (site/tools/build.py, sky()) */
.stars .tw{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--stars);
  box-shadow:0 0 6px 1px rgba(234,241,255,.55);animation:tw var(--d) ease-in-out var(--dl) infinite}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
.stars .shoot{position:absolute;width:130px;height:1.5px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,241,214,.95),rgba(234,241,255,0));transform-origin:left center;
  animation:shoot 14s linear var(--dl) infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(155deg)}1%{opacity:1}7%{opacity:0;transform:translate(-260px,120px) rotate(155deg)}100%{opacity:0;transform:translate(-260px,120px) rotate(155deg)}}

@keyframes glow{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.hero h1,.hero .lead,.hero .cta-row{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.hero .lead{animation-delay:.08s}.hero .cta-row{animation-delay:.16s}
@keyframes up{from{transform:translateY(14px)}}

/* стол первого экрана (владелец 15.11: «большой горизонтальный стол — только стол, — и на нём эти карты с этой анимацией появились»):
   настоящий стол игры «9 частей» (site/tools/build.py, table9 — как frame9() в design/gen/parts.py). Все места — в единицах картинки
   стола (--s, от меньшей стороны стола), поэтому стол один и тот же на любой ширине. Стол проявляется, 8 карт колоды «Армянская» по
   одной прилетают от сдающего и раскрываются двумя веерами по бокам знака; под столом — выбор колоды (карты переворачиваются) и
   стола (новое сукно мягко проявляется поверх, site.js). На телефоне стол тоже горизонтальный: во всю ширину, ниже, карты мельче. */
.stage{width:min(100%,880px);margin:6px auto 22px}
.desk{position:relative;container-type:size;width:100%;aspect-ratio:2.2/1}
@media (max-width:640px){.desk{aspect-ratio:1.65/1}}
.desk::before{content:"";position:absolute;inset:-22% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(235,200,148,.15),transparent 72%)}
.desk-in{position:absolute;inset:0;overflow:hidden;border-radius:calc(min(100cqw,100cqh) * .025);background:#120A0D;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2cqh 5cqh -1cqh rgba(0,0,0,.7),0 10cqh 18cqh -8cqh rgba(0,0,0,.95);
  animation:tin 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes tin{from{opacity:0;transform:translateY(1.5cqh) scale(.985)}}
.t9{position:absolute;inset:0;overflow:hidden}
.t9 img,.t9 i{position:absolute;display:block;max-width:none;pointer-events:none}
.t-felt{inset:0;background-repeat:repeat}
.t-sd.t-t,.t-sd.t-b{background-repeat:round no-repeat}
.t-sd.t-l,.t-sd.t-r{background-repeat:no-repeat round}
.t-fr{position:absolute}
.t-vg{inset:0}
.t9.in{animation:tfade 1s ease both}
@keyframes tfade{from{opacity:0}}
/* «Зелёный» — как в игре: сукно кодом без рамки (лампа, затемнение от углов, зерно — design/screens/common.css, .l .felt, оттенок 1)
   и бледный оттиск «тузы и Բլոտ» (размеры — боком, u = меньшая сторона / 360) */
.t-green{display:grid;place-items:center;--imp:rgba(232,244,234,.1);--imp-shade:rgba(0,0,0,.22);--imp-cut:rgba(6,28,10,.22);
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .13 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background:radial-gradient(farthest-corner at 50% 46%,transparent 30%,rgba(4,14,6,.18) 62%,rgba(4,14,6,.62) 100%),
    var(--grain-l),var(--grain-d),var(--grain-d),
    radial-gradient(22% 40% at 50% 46%,rgba(255,224,170,.06),transparent 80%),
    radial-gradient(36% 74% at 50% 46%,#5EA94F,transparent 78%),
    radial-gradient(76% 128% at 50% 46%,#3F8A39 34%,#1E4E20 100%)}
.t-green .imprint{display:flex;flex-direction:column;align-items:center;gap:calc(100cqh * 2 / 360);transform:translateY(calc(100cqh * -26 / 360))}
.t-green .imprint svg{display:block;width:calc(100cqh * 118 / 360);height:calc(100cqh * 56 / 360)}
.t-green .imp-name{font:700 calc(100cqh * 22 / 360)/1.05 var(--font-mark);color:var(--imp);text-shadow:0 calc(100cqh / 360) 0 var(--imp-shade)}
.t-green .imp-card{fill:var(--imp)}
.t-green .imp-ink,.t-green .imp-ix{fill:var(--imp-cut)}
.t-green .imp-ix{font:700 10px var(--font)}
/* карты на сукне — два веера по бокам знака (владелец 15.11: «чтобы и средняя часть стола была видна. С туза до валета показывай
   в левой части стола, под углом, как будто открываются карты, а с правой части — с семёрки до десятки»). Знак посередине открыт:
   веер стоит в полосе между сукном у рамки (10 единиц от края) и знаком (33 от середины — шире всех знаков, Арарат ~31), поэтому
   карты на месте при любом столе. Ширина полосы --z: на компьютере 67, на телефоне (стол 1,65 : 1) ~40 — там веер мельче.
   Единица — сотая высоты стола (cqh). Веер — 1,47 высоты карты в ширину; наклон 8° наружу, между картами 12°, ось — под картами.
   Раздача: карты по одной прилетают от сдающего (сверху посередине) и ложатся стопкой, потом веер раскрывается — сначала левый,
   потом правый. Меньше движения — всё сразу на месте (правило prefers-reduced-motion в конце файла). */
.hand{--z:calc(50cqw - 43cqh);--ch:min(42cqh,var(--z) / 1.5);--cw:calc(var(--ch) / 1.4023);--cy:calc(50cqh - var(--ch) * .07);
  position:absolute;inset:0;pointer-events:none}
.fan{position:absolute;inset:0}
.fan-l{--t:-8deg;--fx:calc(10cqh + var(--z) / 2 + var(--ch) * .157);--o:1.42s}
.fan-r{--t:8deg;--fx:calc(100cqw - 10cqh - var(--z) / 2 - var(--ch) * .157);--o:1.95s}
.fc{position:absolute;left:calc(var(--fx) - var(--cw) / 2);top:calc(var(--cy) - var(--ch) / 2);
  width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .0734);pointer-events:auto;
  box-shadow:0 calc(var(--ch) * .045) calc(var(--ch) * .1) rgba(0,0,0,.5),0 calc(var(--ch) * .01) calc(var(--ch) * .02) rgba(0,0,0,.35);
  transform-origin:50% 130%;rotate:calc(var(--t) + var(--a));
  transition:rotate .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);
  animation:deal .9s cubic-bezier(.22,.8,.24,1) var(--d) backwards,open 1.1s cubic-bezier(.3,.6,.2,1) var(--o) backwards}
.fc:nth-child(1){--a:-18deg}.fc:nth-child(2){--a:-6deg}.fc:nth-child(3){--a:6deg}.fc:nth-child(4){--a:18deg}
.fan-l .fc:nth-child(1){--d:.45s}.fan-l .fc:nth-child(2){--d:.57s}.fan-l .fc:nth-child(3){--d:.69s}.fan-l .fc:nth-child(4){--d:.81s}
.fan-r .fc:nth-child(1){--d:.93s}.fan-r .fc:nth-child(2){--d:1.05s}.fan-r .fc:nth-child(3){--d:1.17s}.fan-r .fc:nth-child(4){--d:1.29s}
@keyframes deal{from{opacity:0;translate:calc(50cqw - var(--fx)) -72cqh;scale:.92}30%{opacity:1}}
@keyframes open{from{rotate:var(--t)}}
@media (hover:hover){
  .fan:hover .fc{rotate:calc(var(--t) + var(--a) * 1.15)}
  .fan .fc:hover{transform:translateY(-4cqh)}
}
.fc.flip{animation:flip .5s cubic-bezier(.4,0,.2,1)}
@keyframes flip{50%{transform:rotateY(90deg) scale(.97)}}
/* выбор под столом: колода — названиями, стол — кружками его сукна; без JS выбор спрятан (стол «Гранат», колода «Армянская») */
.st-pick{visibility:hidden;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin-top:18px}
.js .st-pick{visibility:visible}
@media (min-width:1000px){.st-pick{margin-inline:-80px}}
.decks,.tsw{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.st-l{font-size:14px;color:var(--text-2);margin-right:4px}
.decks button{font:700 14px/1 var(--font);min-height:36px;padding:0 12px;border-radius:999px;cursor:pointer;color:var(--text-2);
  background:var(--glass);border:1px solid var(--line-soft);transition:color .25s,background .25s,border-color .25s,transform .25s}
.decks button:hover{color:var(--accent-hi);border-color:rgba(235,200,148,.5);transform:translateY(-1px)}
.decks button[aria-pressed="true"]{background:var(--main);color:var(--on-accent);border-color:transparent}
.sw{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.sw i{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 3px 8px -2px rgba(0,0,0,.7);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sw-green i{background:radial-gradient(circle at 42% 38%,#5EA94F,#3F8A39 55%,#1E4E20)}
.sw::after{content:"";position:absolute;inset:1px;border-radius:50%;border:1.5px solid transparent;transition:border-color .3s}
.sw:hover i{transform:scale(1.1)}
.sw[aria-pressed="true"]::after{border-color:var(--accent)}
.tsw-name{display:grid;margin-left:4px;font-size:14px;font-weight:700;color:var(--accent-hi);text-align:left}
.tsw-name b{grid-area:1/1;opacity:0;transition:opacity .4s ease}
.tsw-name b.on{opacity:1}
@media (max-width:640px){.st-pick{gap:8px 18px;margin-top:14px}.decks button{font-size:13px;padding:0 11px;min-height:34px}}

/* телефон с настоящим экраном игры (рамка — кодом) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.phone{position:relative;width:100%;max-width:300px;margin:0 auto;padding:9px;border-radius:40px;
  background:linear-gradient(155deg,#2A3A57,#0B1529 55%,#1B2B47);
  box-shadow:0 0 0 1px rgba(143,166,204,.28),inset 0 1px 0 rgba(255,255,255,.12),0 34px 70px -30px rgba(0,0,0,.9)}
.phone::before{content:"";position:absolute;inset:-14% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(235,200,148,.2),transparent 72%);animation:glow 7s ease-in-out infinite}
.phone .scr{position:relative;overflow:hidden;border-radius:31px;aspect-ratio:9/16;background:#1A0D12}
.phone .scr img{display:block;width:100%;height:100%;object-fit:cover}
.sec-lead{color:var(--text-2);margin:-6px 0 22px;max-width:44em}
/* три игры: на телефоне листаются пальцем, на компьютере — три в ряд */
.games{display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,300px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--pad) 18px;margin:0 calc(var(--pad) * -1);scrollbar-width:none}
.games::-webkit-scrollbar{display:none}
.game{scroll-snap-align:center;display:flex;flex-direction:column;gap:16px}
.game-txt{display:flex;flex-direction:column;gap:6px}
.game-txt .tag{align-self:flex-start;font-size:13px;font-weight:700;color:var(--accent);padding:3px 10px;border-radius:999px;
  background:var(--accent-soft);border:1px solid rgba(235,200,148,.32)}
.game-txt h3{font-size:22px}
.game-txt h3 a{color:var(--accent-hi);text-decoration:none}
.game-txt h3 a:hover{text-decoration:underline}
.game-txt p{color:var(--text-2);margin:0}
.game .phone{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.game:hover .phone{transform:translateY(-8px) rotate(-1.2deg)}}
@media (min-width:900px){.games{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:6px 0 0}}
/* кнопки: приподнимаются, по золоту пробегает свет; App Store «скоро» — спокойная, без ссылки */
.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(0) scale(.98)}
.btn-main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s ease}
.btn-main:hover::after{transform:translateX(120%)}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 10px 26px -14px rgba(235,200,148,.6)}
.btn-store{min-width:200px;justify-content:flex-start;padding:9px 18px 9px 16px;text-align:left}
.btn-store svg{width:24px;height:24px}
.btn-store .st{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.btn-store small{font-size:12px;font-weight:400;opacity:.85}
.btn-store b{font-size:18px;font-weight:700}
.btn-store.is-soon{cursor:default;color:var(--text-2);border-style:dashed;background:rgba(143,166,204,.06)}
.btn-store.is-soon:hover{transform:none;box-shadow:none;color:var(--text-2);border-color:var(--line)}
@media (max-width:460px){.btn-store{flex:1 1 auto;min-width:auto;padding-inline:12px;gap:8px}.btn-store b{font-size:16px}}

/* разделы появляются при прокрутке: прячет site.js только то, что ниже первого экрана (без JS всё видно) */
.reveal{transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),border-color .25s ease}
.reveal.pre{opacity:0;transform:translateY(34px) scale(.985)}
.sec>.wrap>h2.reveal.pre{transform:translateY(18px)}

/* стекло под курсором: мягкий свет идёт за мышью, карточка чуть поднимается */
.card::before,.chap::before,.term::before,.qa::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(235,200,148,.1),transparent 60%);transition:opacity .35s ease}
.chap,.term,.qa{position:relative}
@media (hover:hover){
  .card:hover::before,.chap:hover::before,.term:hover::before,.qa:hover::before{opacity:1}
  .card:hover{transform:translateY(-4px)}
}
.card .ico{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.toc a.on{color:var(--accent-hi);background:var(--accent-soft)}
.after-grid{margin-top:18px}

/* словарь */
.terms{display:grid;gap:14px;margin:0;grid-template-columns:1fr}
@media (min-width:760px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.term{padding:18px 20px;scroll-margin-top:16px}
.term dt{font-size:21px;font-weight:700;color:var(--accent);margin-bottom:6px}
.term dt a{color:inherit;text-decoration:none}
.term dd{margin:0}
.term dd.also{margin-top:10px;font-size:14px;color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}