/* ═══════════════════════════════════════════════════════════════
   «Полёт за бонусами» — блок главной mda-medusa.ru.
   Все классы с префиксом .pg, переменные объявлены на .pg-wrap:
   на :root их класть нельзя — перебьём тему Aspro.
   ═══════════════════════════════════════════════════════════════ */
.pg-wrap{
    --acc:#a855f7; --acc2:#e845da; --gold:#ffd36e;
    --ink:#f7f3ff; --muted:rgba(247,243,255,.62); --faint:rgba(247,243,255,.34);
    --hair:rgba(255,255,255,.08);
    --spring:cubic-bezier(.32,.72,0,1);
    --soft:cubic-bezier(.22,1,.36,1);
    container-type:inline-size;position:relative;padding:0 0 8px;
    font:15px/1.6 "Montserrat",system-ui,sans-serif;color:var(--ink)
}
.pg-wrap *{box-sizing:border-box}

/* У Aspro на .drag-block стоит overflow:hidden — сияние обрезалось ровно по
   нижней границе блока и давало резкую линию на переходе к историям. */
.drag-block.container.PLANE_GAME{overflow:visible}

.pg-aura{position:absolute;inset:0 4% auto;height:70%;pointer-events:none;z-index:0;
background:
 radial-gradient(45% 60% at 20% 40%,rgba(168,85,247,.4),transparent 70%),
 radial-gradient(45% 60% at 82% 55%,rgba(232,69,218,.36),transparent 70%);
filter:blur(70px);opacity:.5;animation:pg-breathe 9s var(--soft) infinite alternate}
@keyframes pg-breathe{to{opacity:.82;transform:translateY(-14px) scale(1.05)}}

.pg-shell{position:relative;z-index:1;padding:1px;border-radius:36px;
background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.04) 38%,rgba(232,69,218,.3));
box-shadow:0 40px 110px -60px rgba(168,85,247,.6)}
.pg{position:relative;overflow:hidden;border-radius:35px;padding:40px 44px;
background:
 radial-gradient(70% 100% at 92% -15%,rgba(232,69,218,.24),transparent 62%),
 radial-gradient(60% 90% at 2% 108%,rgba(120,60,255,.26),transparent 60%),
 linear-gradient(180deg,rgba(46,28,84,.92),rgba(28,15,55,.95) 70%);
box-shadow:0 1px 0 0 rgba(255,255,255,.1) inset}
.pg__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--spring);
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(232,69,218,.13),transparent 70%)}
.pg:hover .pg__spot{opacity:1}

.pg__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
gap:52px;align-items:center}

/* ── появление ── */
.pg-rise{opacity:0;transform:translateY(18px);
animation:pg-rise .9s var(--soft) forwards;animation-delay:var(--d,0ms)}
@keyframes pg-rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
    .pg-rise{animation:none;opacity:1;transform:none}
    .pg-aura{animation:none}
}

/* ── левая колонка ── */
.pg__eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
background:rgba(255,255,255,.05);border:1px solid var(--hair);
font:600 10px/1 "Montserrat",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,255,.82)}
.pg__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc2);
box-shadow:0 0 14px 3px rgba(232,69,218,.9);animation:pg-blink 2.6s var(--soft) infinite}
@keyframes pg-blink{0%,100%{opacity:1}50%{opacity:.3}}

.pg__h{margin:22px 0 0;font:800 clamp(31px,5cqi,60px)/1 "Unbounded","Montserrat",sans-serif;letter-spacing:-.05em;color:var(--ink)}
.pg__h em{font-style:normal;display:block;margin-top:.14em;
background:linear-gradient(96deg,#d7a2ff,#ff7ae8 45%,#ffd6f7 70%,#d7a2ff);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:pg-flow 7s linear infinite}
@keyframes pg-flow{to{background-position:220% 0}}
.pg__sub{margin:20px 0 0;color:var(--muted);font-size:15.5px;max-width:44ch}

.pg__prize{position:relative;overflow:hidden;margin:30px 0 0;padding:24px 28px;border-radius:22px;
display:flex;align-items:center;gap:22px;
background:linear-gradient(120deg,rgba(168,85,247,.2),rgba(232,69,218,.1) 60%,rgba(255,255,255,.03));
box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 0 rgba(255,255,255,.18) inset}
.pg__prize:before{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
animation:pg-shimmer 4.5s var(--soft) infinite}
@keyframes pg-shimmer{0%{left:-60%}55%,100%{left:130%}}
.pg__prize b{flex:none;font:800 clamp(34px,4.8cqi,52px)/1 "Unbounded","Montserrat",sans-serif;letter-spacing:-.05em;
background:linear-gradient(100deg,#fff,#ffd0f8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg__prize span{font-size:13.5px;color:rgba(247,243,255,.72);line-height:1.45}
.pg__prize span u{display:block;text-decoration:none;color:var(--faint);font-size:12px;margin-top:3px}

/* код выигрыша */
.pg__code{display:none;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:16px;
background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.pg__code.on{display:flex;flex-wrap:wrap;animation:pg-pop .6s var(--spring) both}
@keyframes pg-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.pg__code b{font:700 21px/1 "Unbounded","Montserrat",sans-serif;letter-spacing:.08em;color:var(--ink)}
.pg__code span{font-size:12px;color:var(--faint);line-height:1.4}
.pg__copy{margin-left:auto;flex:none;padding:9px 15px;border:0;border-radius:999px;cursor:pointer;
font:600 12px/1 "Montserrat",sans-serif;color:var(--ink);background:rgba(255,255,255,.09);
transition:background .5s var(--spring),transform .5s var(--spring)}
.pg__copy:hover{background:rgba(168,85,247,.3)}
.pg__copy:active{transform:scale(.95)}

.pg__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pg-btn{position:relative;display:inline-flex;align-items:center;gap:16px;padding:15px 16px 15px 24px;
border:0;border-radius:999px;cursor:pointer;text-decoration:none;
font:700 14px/1 "Montserrat",sans-serif;color:#1b0c33;
background:linear-gradient(96deg,#ffd6f7,#f0a8ff 45%,#c48cff);
transition:transform .6s var(--spring),box-shadow .6s var(--spring),filter .4s var(--soft);
box-shadow:0 14px 34px -18px rgba(232,69,218,.9)}
.pg-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 22px 46px -20px rgba(232,69,218,1)}
.pg-btn:active{transform:translateY(0) scale(.98)}
.pg-btn[disabled]{opacity:.5;pointer-events:none}
.pg-btn__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(27,12,51,.14)}
.pg-btn__ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-btn--ghost{color:var(--ink);background:rgba(255,255,255,.07);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.pg-btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset}
.pg-btn--ghost .pg-btn__ic{background:rgba(255,255,255,.09)}

.pg__note{margin:20px 0 0;font-size:12.5px;color:var(--faint);line-height:1.5}
.pg__legal{margin:8px 0 0;font-size:11.5px;color:rgba(247,243,255,.26);line-height:1.5;max-width:52ch}

/* ── правая колонка: сцена движка ── */
.pg__stage{position:relative}
.pg__panel{position:relative;padding:1px;border-radius:28px;
background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 45%,rgba(232,69,218,.24))}
/* Движок монтируется сюда и растягивается по inset:0, поэтому высоту задаём мы */
.pg__panel-in{position:relative;overflow:hidden;border-radius:27px;background:#070c22;aspect-ratio:16/11}

@container (max-width:900px){
    .pg{padding:30px 22px}
    .pg__grid{grid-template-columns:minmax(0,1fr);gap:30px}
    .pg__panel-in{aspect-ratio:4/3}
    /* В одну колонку игра обязана идти первой: иначе на телефоне человек
       листает весь текст и только потом видит, во что тут играют. */
    .pg__stage{order:-1}
}
@container (max-width:520px){
    .pg{padding:26px 16px;border-radius:27px}
    .pg-shell{border-radius:28px}
    .pg__prize{padding:18px 18px;gap:14px}
    .pg__panel-in{aspect-ratio:3/4}
}

/* ── обвязка движка, которой на анонимном сайте не на чем работать ──
   Баланс, выбор ставки, автоигра, общий банк, топливо и выход из игры
   имеют смысл только внутри мини-аппа с аккаунтом. Прячем их здесь, а не
   правкой markup.js: движок копируется дословно, чтобы обновление в
   мини-аппе доезжало сюда простой пересборкой. */
.pg__panel-in #avmExitBtn,
.pg__panel-in #avmAutoBtn,
.pg__panel-in #avmJackBtn,
.pg__panel-in #avmFuel,
.pg__panel-in #avmRisk,
.pg__panel-in .avm-bet,
.pg__panel-in .avm-money>div:first-child,
/* «Игра пока закрыта… Вернуться к играм» — экран мини-аппа, на сайте
   возвращаться некуда: повторному гостю показываем его промокод. */
.pg__panel-in #avmLocked{display:none!important}
/* Осталась одна ставка — ряд денег схлопывается в строку выигрыша */
.pg__panel-in .avm-money{padding:6px 12px}

/* ── во весь экран ──
   На компьютере — обычный полный экран. На телефоне сцена шире, чем выше,
   поэтому вдобавок просим повернуть экран: сначала через Screen Orientation
   API, а где он запрещён (iOS) — подсказкой поверх сцены.
   Класс на .pg-wrap, а не только :fullscreen, потому что элементный полный
   экран в Safari на iPhone не работает вовсе, и там режим держится вёрсткой. */
/* z-index выше окна итога (6): иначе в полном экране кнопка выхода окажется
   под карточкой приза, и с телефона, где нет Escape, свернуть будет нечем. */
.pg__full{position:absolute;right:12px;bottom:12px;z-index:7;
display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:11px;cursor:pointer;
background:rgba(10,5,26,.55);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
transition:background .4s var(--soft),transform .4s var(--spring)}
.pg__full:hover{background:rgba(168,85,247,.4)}
.pg__full:active{transform:scale(.93)}
.pg__full-i{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg__full-i--out{display:none}
/* container-type:inline-size на .pg-wrap делает его containing block для
   position:fixed — панель разворачивалась «во весь экран» внутрь самой себя
   и схлопывалась в полоску. На время полного экрана контейнер снимаем:
   контейнерные запросы там всё равно не нужны, раскладка одна. */
/* Полный экран: панель на это время переезжает прямо в <body>.
   Оставлять её на месте нельзя — у блока на главной сразу три причины
   удержать position:fixed внутри себя: container-type:inline-size у .pg-wrap,
   вычисленный transform от анимации появления и z-index у .pg-shell, плюс
   собственные слои шаблона Aspro поверх. Переезд убирает все разом.
   Переменные объявляем здесь заново: вне .pg-wrap их больше неоткуда взять. */
.pg-panel--full{
    --acc:#a855f7; --acc2:#e845da; --gold:#ffd36e;
    --ink:#f7f3ff; --muted:rgba(247,243,255,.62); --faint:rgba(247,243,255,.34);
    --hair:rgba(255,255,255,.08);
    --spring:cubic-bezier(.32,.72,0,1);
    --soft:cubic-bezier(.22,1,.36,1);
    position:fixed;inset:0;width:100%;height:100%;z-index:2147483000;
    padding:0;border-radius:0;background:#07041a;
    font:15px/1.6 "Montserrat",system-ui,sans-serif;color:var(--ink)
}
.pg-panel--full *{box-sizing:border-box}
.pg-panel--full .pg__panel-in{aspect-ratio:auto;height:100%;border-radius:0}
.pg-panel--full .pg__win{border-radius:0}
.pg-panel--full .pg__full{right:16px;bottom:16px;width:40px;height:40px}
.pg-panel--full .pg__full-i--in{display:none}
.pg-panel--full .pg__full-i--out{display:block}
body.pg-full-lock{overflow:hidden}

/* Подсказка про поворот — только в полном экране, только на сенсорном
   устройстве и только пока телефон вертикально. */
.pg__rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){
    .pg-panel--full .pg__rotate{position:absolute;left:0;right:0;bottom:64px;z-index:6;
    display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 24px;text-align:center;
    font:600 12.5px/1.4 "Montserrat",sans-serif;color:rgba(247,243,255,.8);pointer-events:none;
    text-shadow:0 2px 12px rgba(0,0,0,.9)}
    .pg-panel--full .pg__rotate svg{width:26px;height:26px;fill:none;stroke:#ffd36e;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;animation:pg-tilt 2.4s var(--soft) infinite}
}
@keyframes pg-tilt{0%,45%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}

/* итог вылета: поверх сцены движка.
   Панель у сцены фиксированной высоты (aspect-ratio), поэтому карточка итога
   считается под неё: кнопки идут колонкой во всю ширину, а не в ряд с
   переносом — переносом вторая кнопка вылезала за нижний край блока. */
.pg__win{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
padding:18px;border-radius:28px;overflow-y:auto;
background:radial-gradient(70% 70% at 50% 45%,#2a1152,#07041a 78%);
opacity:0;visibility:hidden;transition:opacity .7s var(--soft),visibility .7s}
.pg__win.on{opacity:1;visibility:visible}
.pg__win-in{width:100%;max-width:330px;text-align:center;
transform:translateY(14px) scale(.96);transition:transform .8s var(--spring)}
.pg__win.on .pg__win-in{transform:none}
.pg__win-t{font:600 9.5px/1 "Montserrat",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.pg__win-n{margin:6px 0 0;font:800 clamp(38px,6cqi,54px)/1 "Unbounded","Montserrat",sans-serif;letter-spacing:-.05em;
background:linear-gradient(100deg,#fff,#ffd36e 55%,#ff9ae8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg__win-u{font:700 11.5px/1 "Montserrat",sans-serif;color:rgba(247,243,255,.8);letter-spacing:.08em;text-transform:uppercase}
.pg__win-p{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.pg__win-code{margin:12px 0 0;padding:11px 14px;border-radius:14px;display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.pg__win-code b{font:700 18px/1 "Unbounded","Montserrat",sans-serif;letter-spacing:.1em}
.pg__win-code button{margin-left:auto;flex:none;padding:7px 13px;border:0;border-radius:999px;cursor:pointer;
font:600 11.5px/1 "Montserrat",sans-serif;color:var(--ink);background:rgba(255,255,255,.1)}
.pg__win-code button:hover{background:rgba(168,85,247,.35)}
.pg__win-cta{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pg__win-cta .pg-btn{width:100%;justify-content:space-between;padding:11px 12px 11px 18px;font-size:12.5px;gap:10px}
.pg__win-cta .pg-btn__ic{width:26px;height:26px}

.pg__msg{margin-top:12px;text-align:center;min-height:18px;
font:600 12.5px/1.4 "Montserrat",sans-serif;color:rgba(247,243,255,.75);
opacity:0;transition:opacity .5s var(--soft)}
.pg__msg.on{opacity:1}
.pg__msg.bad{color:#ff9ab5}