/* Телефон (html.phone — ставит site-ui.js по тому же правилу, что gk-frame.js isPhone: портрет уже
   900 px). Интерфейс — свой макет 390×844: --k = 1 px мобильного макета, кадр — колонка 390 по центру.
   Сцены ставят себя сами (VIEW.mobile в модулях экранов); здесь — только интерфейс. */
html.phone .frm{left:calc(50% - 195*var(--k));right:auto;width:calc(390*var(--k));height:calc(844*var(--k))}

/* шапка: логотип и «Подключить»; разделы — переключатель справа */
html.phone .hdr{left:calc(14*var(--k));right:calc(14*var(--k));height:calc(56*var(--k));border-bottom-width:calc(1.2*var(--k))}
html.phone .logo{width:calc(50*var(--k));height:calc(32*var(--k));border-width:calc(1.6*var(--k))}
html.phone .nav{display:none}
.cta-top .sm{display:none}
html.phone .cta-top .lg{display:none}
html.phone .cta-top .sm{display:inline}
html.phone .cta-top{height:calc(32*var(--k));padding:0 calc(10*var(--k));font-size:calc(10.5*var(--k));gap:calc(8*var(--k));
                    box-shadow:calc(3*var(--k)) 0 0 0 rgba(224,212,198,.55)}
.pager{display:none;position:fixed;right:calc(7*var(--k));top:50%;transform:translateY(-50%);flex-direction:column;
       gap:calc(11*var(--k));z-index:5}
html.phone .pager{display:flex}

/* телефон боком — просьба повернуть (site-ui.js isTurned) */
.rot{display:none;position:fixed;inset:0;z-index:20;background:var(--paper);color:var(--ink);flex-direction:column;
     align-items:center;justify-content:center;gap:22px;font:13px/1.4 'IBM Plex Mono',ui-monospace,Consolas,monospace;
     letter-spacing:.04em;text-align:center}
html.turned .rot{display:flex}
html.turned #ui,html.turned #warp{visibility:hidden}
.rot span{color:var(--dim)}
.rot .ph{display:block;animation:gk-turn 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes gk-turn{0%,22%{transform:rotate(-90deg)}48%,100%{transform:rotate(0)}}
/* тёмная окантовка — чтобы точки читались и поверх светлых планет */
.pager a{display:block;width:calc(7*var(--k));height:calc(7*var(--k));box-sizing:border-box;border:calc(1.4*var(--k)) solid var(--ink);pointer-events:auto;
         background:var(--paper);box-shadow:0 0 0 calc(2*var(--k)) var(--paper);position:relative}
.pager a::after{content:'';position:absolute;inset:calc(-7*var(--k)) calc(-9*var(--k))}   /* под палец */
.pager a.on{background:var(--ink)}

/* ── первый экран ── */
html.phone .sec[data-sec="hero"] .tag{left:calc(20*var(--k));top:calc(72*var(--k));height:calc(26*var(--k));width:calc(176*var(--k));font-size:calc(11*var(--k))}
html.phone .sec[data-sec="hero"] .tag b{padding:0 calc(2*var(--k));margin-left:calc(6*var(--k))}
html.phone .sec[data-sec="hero"] .brk{width:calc(6*var(--k));height:calc(6*var(--k))}
html.phone .sec[data-sec="hero"] .h1{left:calc(20*var(--k));top:calc(100*var(--k))}
html.phone .sec[data-sec="hero"] .h1 .ln{margin-bottom:calc(var(--gapm,0)*var(--k))}
html.phone .sec[data-sec="hero"] .sub{left:calc(20*var(--k));top:calc(262*var(--k));font-size:calc(13.5*var(--k));line-height:calc(20*var(--k))}
html.phone .sec[data-sec="hero"] .feat{left:calc(20*var(--k));right:auto;top:calc(676*var(--k));font-size:calc(11.5*var(--k));line-height:calc(20*var(--k))}
html.phone .sec[data-sec="hero"] .feat li{gap:calc(10*var(--k))}
html.phone .sec[data-sec="hero"] .feat .pl{width:calc(10*var(--k));height:calc(10*var(--k))}
html.phone .sec[data-sec="hero"] .more{left:calc(20*var(--k));top:calc(766*var(--k))}
html.phone .sec[data-sec="hero"] .more .btn{height:calc(40*var(--k));padding:0 calc(12*var(--k));font-size:calc(12.5*var(--k));gap:calc(24*var(--k))}
html.phone .sec[data-sec="hero"] .card{display:none}

/* ── заголовки, подзаголовки, плашки «GAMEKIOSK ///» (преимущества, как работает) ── */
html.phone .sec .tagk{left:calc(20*var(--k));top:calc(72*var(--k));font-size:calc(11*var(--k));gap:calc(8*var(--k))}
html.phone .sec .tagk b{padding:calc(2*var(--k)) calc(6*var(--k))}
html.phone .sec .tagk .sl{font-size:calc(13*var(--k))}
html.phone .sec .ttl{left:calc(20*var(--k));top:calc(100*var(--k))}
html.phone .sec .lede{left:calc(20*var(--k));top:calc(202*var(--k));font-size:calc(13*var(--k));line-height:calc(19*var(--k));letter-spacing:.02em}

/* ── преимущества ── */
html.phone .sec[data-sec="why"] .go{display:none}
html.phone .sec[data-sec="why"] .cards{left:calc(20*var(--k));right:auto;width:calc(350*var(--k));top:calc(524*var(--k));height:calc(276*var(--k));
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(10*var(--k))}
html.phone .sec[data-sec="why"] .card{padding:calc(12*var(--k)) calc(10*var(--k)) 0 calc(12*var(--k))}
html.phone .sec[data-sec="why"] .card .ic{left:calc(11*var(--k));top:calc(11*var(--k))}
html.phone .sec[data-sec="why"] .card h3{margin:0 0 calc(8*var(--k)) calc(32*var(--k));min-height:calc(24*var(--k));display:flex;align-items:center;
  font-size:calc(10.5*var(--k));line-height:calc(14*var(--k));letter-spacing:.06em}
html.phone .sec[data-sec="why"] .card p{font-size:calc(10.5*var(--k));line-height:calc(15*var(--k));letter-spacing:0}
html.phone .sec[data-sec="why"] .card .brk{width:calc(5*var(--k));height:calc(5*var(--k));margin:calc(5*var(--k))}

/* ── как работает ── */
html.phone .sec[data-sec="how"] .step{left:calc(20*var(--k));width:calc(350*var(--k));height:calc(66*var(--k));padding:calc(10*var(--k)) calc(10*var(--k)) 0 calc(44*var(--k))}
html.phone .sec[data-sec="how"] .s1{top:calc(414*var(--k))}
html.phone .sec[data-sec="how"] .s2{top:calc(486*var(--k))}
html.phone .sec[data-sec="how"] .s3{top:calc(558*var(--k))}
html.phone .sec[data-sec="how"] .step .n{left:calc(12*var(--k));top:calc(11*var(--k));padding-bottom:calc(4*var(--k));border-bottom-width:calc(1.6*var(--k))}
html.phone .sec[data-sec="how"] .step h4{font-size:calc(13*var(--k));line-height:calc(18*var(--k))}
html.phone .sec[data-sec="how"] .step p{margin-top:calc(3*var(--k));font-size:calc(11*var(--k));line-height:calc(15*var(--k))}
html.phone .sec[data-sec="how"] .step br{display:none}
html.phone .sec[data-sec="how"] .adv{left:calc(20*var(--k));width:calc(350*var(--k));top:calc(636*var(--k));height:calc(118*var(--k))}
html.phone .sec[data-sec="how"] .adv h3{height:calc(26*var(--k));font-size:calc(10.5*var(--k));padding-left:calc(10*var(--k))}
html.phone .sec[data-sec="how"] .adv .cols{height:calc(90*var(--k))}
html.phone .sec[data-sec="how"] .adv .c{font-size:calc(10*var(--k));line-height:calc(13*var(--k));gap:calc(6*var(--k))}
html.phone .sec[data-sec="how"] .adv .c+.c::before{top:calc(10*var(--k));bottom:calc(10*var(--k))}
html.phone .sec[data-sec="how"] .rule,
html.phone .sec[data-sec="how"] .info{display:none}
html.phone .sec[data-sec="how"] .go{left:0;right:0;margin:0 auto;width:max-content;top:calc(768*var(--k));height:calc(44*var(--k));padding:0 calc(16*var(--k));font-size:calc(13*var(--k));gap:calc(16*var(--k))}

/* ── бета ── */
html.phone .sec[data-sec="beta"] .btag{left:calc(20*var(--k));top:calc(70*var(--k));gap:calc(10*var(--k))}
html.phone .sec[data-sec="beta"] .btag .box{height:calc(26*var(--k));padding:0 calc(5*var(--k))}
html.phone .sec[data-sec="beta"] .btag b{font-size:calc(12*var(--k));padding:calc(1*var(--k)) calc(5*var(--k))}
html.phone .sec[data-sec="beta"] .btag .sl{font-size:calc(13*var(--k))}
html.phone .sec[data-sec="beta"] .bh1{left:calc(20*var(--k));top:calc(98*var(--k))}
html.phone .sec[data-sec="beta"] .bh1 .ln{margin-bottom:calc(var(--gapm,0)*var(--k))}
html.phone .sec[data-sec="beta"] .bsub{left:calc(20*var(--k));top:calc(180*var(--k));width:calc(350*var(--k));font-size:calc(12.5*var(--k));line-height:calc(18*var(--k))}
html.phone .sec[data-sec="beta"] .gg{left:calc(20*var(--k));top:calc(552*var(--k));width:calc(350*var(--k));grid-template-columns:1fr calc(24*var(--k)) 1fr}
html.phone .sec[data-sec="beta"] .bx h3{height:calc(24*var(--k));font-size:calc(10*var(--k));padding-left:calc(8*var(--k))}
html.phone .sec[data-sec="beta"] .gg ul{padding:calc(7*var(--k)) calc(6*var(--k)) calc(7*var(--k)) calc(18*var(--k));font-size:calc(9.5*var(--k));line-height:calc(12.5*var(--k))}
html.phone .sec[data-sec="beta"] .bx li::before{left:calc(-11*var(--k));top:calc(4*var(--k));width:calc(5*var(--k));height:calc(5*var(--k))}
html.phone .sec[data-sec="beta"] .give li,
html.phone .sec[data-sec="beta"] .get li{margin-bottom:calc(5*var(--k))}
html.phone .sec[data-sec="beta"] .gg br{display:none}
/* на телефоне — три пункта «вы получаете»: четвёртый (пожелания в продукт) близок к третьему, а на SE не влезал */
html.phone .sec[data-sec="beta"] .get li:nth-child(4){display:none}
html.phone .sec[data-sec="beta"] .trust,
html.phone .sec[data-sec="beta"] .bcta,
html.phone .sec[data-sec="beta"] .binfo,
html.phone .sec[data-sec="beta"] .c3{display:none}
html.phone .sec[data-sec="beta"] .pop{left:calc(20*var(--k));top:calc(728*var(--k));width:calc(350*var(--k));height:calc(104*var(--k))}
html.phone .sec[data-sec="beta"] .pop .brk{width:calc(8*var(--k));height:calc(8*var(--k));margin:calc(6*var(--k))}
html.phone .sec[data-sec="beta"] .pop .env{left:calc(16*var(--k));top:calc(18*var(--k))}
html.phone .sec[data-sec="beta"] .pop h3{left:calc(66*var(--k));top:calc(12*var(--k));font-size:calc(13*var(--k))}
html.phone .sec[data-sec="beta"] .pop p{left:calc(66*var(--k));top:calc(32*var(--k));width:calc(270*var(--k));font-size:calc(10*var(--k));line-height:calc(14*var(--k))}
html.phone .sec[data-sec="beta"] .pop p br{display:none}
html.phone .sec[data-sec="beta"] .pop .soc{left:calc(66*var(--k));top:calc(64*var(--k));gap:calc(10*var(--k))}
html.phone .sec[data-sec="beta"] .pop .soc a{width:calc(70*var(--k));height:calc(30*var(--k))}
html.phone .sec[data-sec="beta"] .pop .soc .nm{font-size:calc(10*var(--k));gap:calc(6*var(--k))}
/* выноски к клубам — по сцене на телефоне (beta-scene.js VIEW.mobile) */
html.phone .sec[data-sec="beta"] .callout{letter-spacing:.03em}
html.phone .sec[data-sec="beta"] .c1{left:calc(22*var(--k));top:calc(424*var(--k));width:calc(132*var(--k));height:calc(22*var(--k));padding-left:calc(7*var(--k));
  font-size:calc(8.5*var(--k));--px:calc(62*var(--k));--ph:calc(16*var(--k))}
html.phone .sec[data-sec="beta"] .c1 .dot{width:calc(5*var(--k));height:calc(5*var(--k));margin-right:calc(5*var(--k))}
html.phone .sec[data-sec="beta"] .c2{left:calc(190*var(--k));top:calc(440*var(--k));width:calc(112*var(--k));height:calc(30*var(--k));padding-left:calc(7*var(--k));
  font-size:calc(8*var(--k));line-height:calc(11*var(--k));--px:calc(39*var(--k));--ph:calc(14*var(--k))}