/* Игры онлайн (10.10): плеер, сетка игр, блок оборудования. Поверх ng.css (общие токены --ds-*). */
.io-top{padding:clamp(20px,2.4vw,36px) 0 20px}
.io-top--hub{padding-bottom:var(--ds-sec-s,72px);max-width:1000px}
.io-top .ng-h1{max-width:1100px}
.io-ctrl{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.io-ctrl li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#F7F6F2;font-size:16px;font-weight:500;line-height:1.2}
.io-lead{max-width:980px;margin:32px 0 40px}
/* плеер */
.io-player{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);margin:0 auto;border-radius:var(--ng-r,24px);overflow:hidden;background:#0b0b10;isolation:isolate}
.io-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.io-start{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px;padding:20px;background:linear-gradient(180deg,rgba(11,11,16,.1),rgba(11,11,16,.55))}
.io-play{appearance:none;border:0;border-radius:999px;padding:18px 30px;min-height:56px;font:700 clamp(17px,1.6vw,22px)/1 Geologica,sans-serif;cursor:pointer;background:var(--ds-c-red,#FF3B3B);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.io-play--cam{background:#fff;color:var(--ds-ink,#15172A)}
.io-play:hover{transform:translateY(-2px)}
.io-play:active{transform:scale(.97)}
.io-play:focus-visible,.io-fs:focus-visible,.io-close:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px #1571E1}
.io-t{display:none}
@media (pointer:coarse){.io-m{display:none}.io-t{display:inline}}
.io-note{flex-basis:100%;margin:4px 0 0;text-align:center;color:#fff;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.io-fs,.io-close{position:absolute;z-index:3;appearance:none;border:0;border-radius:999px;background:rgba(15,15,22,.72);color:#fff;font:600 15px/1 Geologica,sans-serif;padding:11px 15px;cursor:pointer}
.io-fs{right:12px;top:12px}
.io-close{display:none;left:12px;top:12px;width:44px;height:44px;padding:0}
.io-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#0b0b10}
.io-on .io-start,.io-on .io-poster{display:none}
.io-on .io-fs{top:auto;bottom:12px;right:auto;left:12px}
html body #ng .io-cam .ng-h3{margin:40px 0 0!important}
.io-player:fullscreen{max-height:none;border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.io-player:-webkit-full-screen{max-height:none;border-radius:0;width:100vw;height:100vh}
/* iPhone: окно поверх страницы */
.io-max{position:fixed!important;inset:0;z-index:2147483000;width:100vw;height:100vh;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0;margin:0}
.io-max .io-close{display:block}
.io-max .io-fs{display:none}
html.io-lock,html.io-lock body{overflow:hidden!important}
/* блоки */
.io-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.io-privacy{margin:20px 0 0;padding:16px 20px;border-radius:16px;background:#EFF8F2;border-left:6px solid var(--ds-c-green,#1FC96B);max-width:920px}
.io-privacy a{color:var(--ds-link,#1571E1)}
.io-cam .ng-h3{margin:36px 0 0;font:600 clamp(20px,1.8vw,26px)/1.3 Unbounded,sans-serif}
.io-grid{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-gut,24px)}
.io-card{display:flex;flex-direction:column;height:100%;border-radius:var(--ng-r,24px);overflow:hidden;background:#F7F6F2;color:inherit!important;text-decoration:none!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.io-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,23,42,.12)}
.io-card:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px #1571E1}
.io-card .ng-ph{aspect-ratio:16/9;overflow:hidden}
.io-card .ng-ph img{width:100%;height:100%;object-fit:cover}
.io-card-t{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.io-card-t b{font:600 clamp(19px,1.5vw,22px)/1.25 Unbounded,sans-serif}
.io-card-t>span:not(.ng-btn){color:var(--ds-ink2,#4A4E5E);font-size:16px}
.io-card .io-ctrl{margin:4px 0 8px}
.io-card .io-ctrl li{background:#fff;font-size:14px;padding:6px 11px}
.io-card .ng-btn{margin-top:auto;align-self:flex-start}
.io-eq-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.4vw,48px);border-radius:var(--ng-r,24px);background:#FFF8E1;border-top:6px solid var(--ds-c-yellow,#FFC21A)}
.io-eq .ng-media{margin:0;border-radius:18px;overflow:hidden}
.io-eq video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0b10}
@media (max-width:1024px){.io-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.io-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.io-eq-in{grid-template-columns:1fr}}
@media (max-width:640px){
  .io-grid,.io-steps{grid-template-columns:1fr}
  .io-player{border-radius:16px;max-height:none}
  /* до старта: кнопки под постером, а не поверх маленькой картинки */
  .io-player:not(.io-on){aspect-ratio:auto;background:transparent;overflow:visible;border-radius:0}
  .io-player:not(.io-on) .io-poster{position:relative;aspect-ratio:16/9;height:auto;border-radius:16px}
  .io-player:not(.io-on) .io-start{position:static;background:none;padding:14px 0 0;gap:10px}
  .io-player:not(.io-on) .io-play{flex:1 1 100%}
  .io-player:not(.io-on) .io-note{color:var(--ds-ink2,#4A4E5E);text-shadow:none}
  .io-play{padding:14px 20px;min-height:48px;font-size:16px}
  .io-start{gap:10px}
  .io-note{font-size:13px}
  .io-fs span{display:none}
  .io-lead{margin:24px 0 28px}
}
@media (prefers-reduced-motion:reduce){.io-play,.io-card{transition:none}}
/* онлайн-дискотека (11.10): кнопка «Попробовать бесплатно онлайн», блок требований */
.io-try{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px;padding:18px 22px;border-radius:18px;background:#F7F6F2;border-left:6px solid var(--ds-c-green,#1FC96B)}
.io-try p{margin:0;flex:1 1 320px;font-size:18px;line-height:1.45}
.ng-btn.io-try-b{background:var(--ds-c-green,#1FC96B);color:#fff!important;box-shadow:none}
.io-req-l li{grid-column:auto}.io-req-l b{font:700 20px/1.3 Unbounded,sans-serif;letter-spacing:-.01em}
@media (max-width:900px){.io-req-l{grid-template-columns:1fr 1fr}}@media (max-width:560px){.io-req-l{grid-template-columns:1fr}}
