/* ═══════════════════════════════════════════════════════════════
   «Полёт за бонусами» — блок главной 5lb.pro.
   Перенос с mda-medusa.ru: структура и классы те же (.pg*), палитра —
   5LB: тёмный уголь + оранжевый акцент, шрифт темы (Golos Text).
   Переменные объявлены на .pg-wrap: на :root их класть нельзя —
   перебьём тему Aspro.
   ═══════════════════════════════════════════════════════════════ */
.pg-wrap{
    --acc:#ff6b00; --acc2:#ff9500; --gold:#ffd36e;
    --ink:#fff7f0; --muted:rgba(255,247,240,.66); --faint:rgba(255,247,240,.38);
    --hair:rgba(255,255,255,.08);
    --font:var(--theme-font-family,"Golos Text"),system-ui,sans-serif;
    --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 var(--font);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(255,107,0,.32),transparent 70%),
 radial-gradient(45% 60% at 82% 55%,rgba(255,149,0,.26),transparent 70%);
filter:blur(70px);opacity:.45;animation:pg-breathe 9s var(--soft) infinite alternate}
@keyframes pg-breathe{to{opacity:.75;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,.22),rgba(255,255,255,.04) 38%,rgba(255,107,0,.35));
box-shadow:0 40px 110px -60px rgba(255,107,0,.55)}
.pg{position:relative;overflow:hidden;border-radius:35px;padding:40px 44px;
background:
 radial-gradient(70% 100% at 92% -15%,rgba(255,107,0,.22),transparent 62%),
 radial-gradient(60% 90% at 2% 108%,rgba(255,149,0,.16),transparent 60%),
 linear-gradient(180deg,#1c130d,#0f0b09 70%);
box-shadow:0 1px 0 0 rgba(255,255,255,.08) 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(255,107,0,.14),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 var(--font);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,247,240,.82)}
.pg__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc);
box-shadow:0 0 14px 3px rgba(255,107,0,.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,58px)/1.02 var(--font);letter-spacing:-.04em;color:var(--ink)}
.pg__h em{font-style:normal;display:block;margin-top:.1em;
background:linear-gradient(96deg,#ffb26b,#ff6b00 45%,#ffd36e 70%,#ffb26b);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:pg-flow 7s linear infinite}
.pg__h sup{font-size:.4em;vertical-align:top;-webkit-text-fill-color:var(--acc2)}
@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(255,107,0,.22),rgba(255,149,0,.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,.16) inset}
.pg__prize:before{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),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 var(--font);letter-spacing:-.04em;
background:linear-gradient(100deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.pg__prize span{font-size:13.5px;color:rgba(255,247,240,.74);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 var(--font);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 var(--font);color:var(--ink);background:rgba(255,255,255,.09);
transition:background .5s var(--spring),transform .5s var(--spring)}
.pg__copy:hover{background:rgba(255,107,0,.35)}
.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 var(--font);color:#1a0d04;
background:linear-gradient(96deg,#ffb26b,#ff8a1f 45%,#ff6b00);
transition:transform .6s var(--spring),box-shadow .6s var(--spring),filter .4s var(--soft);
box-shadow:0 14px 34px -18px rgba(255,107,0,.9)}
.pg-btn:hover,.pg-btn:focus{color:#1a0d04;text-decoration:none;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 22px 46px -20px rgba(255,107,0,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(26,13,4,.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,.pg-btn--ghost:focus{color:var(--ink);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(255,247,240,.3);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(255,107,0,.3))}
/* Движок монтируется сюда и растягивается по 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__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,6,3,.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(255,107,0,.45)}
.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}
/* Полный экран: панель на это время переезжает прямо в <body> (см. entry.js).
   Переменные объявляем здесь заново: вне .pg-wrap их больше неоткуда взять. */
.pg-panel--full{
    --acc:#ff6b00; --acc2:#ff9500; --gold:#ffd36e;
    --ink:#fff7f0; --muted:rgba(255,247,240,.66); --faint:rgba(255,247,240,.38);
    --hair:rgba(255,255,255,.08);
    --font:var(--theme-font-family,"Golos Text"),system-ui,sans-serif;
    --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:#0a0604;
    font:15px/1.6 var(--font);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 var(--font);color:rgba(255,247,240,.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:var(--gold);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)}}

/* итог вылета: поверх сцены движка. Кнопки колонкой во всю ширину —
   в ряд с переносом вторая вылезала за нижний край панели. */
.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%,#3a1d08,#0a0604 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 var(--font);letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.pg__win-n{margin:6px 0 0;font:800 clamp(38px,6cqi,54px)/1 var(--font);letter-spacing:-.04em;
background:linear-gradient(100deg,#fff,var(--gold) 55%,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pg__win-u{font:700 11.5px/1 var(--font);color:rgba(255,247,240,.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 var(--font);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 var(--font);color:var(--ink);background:rgba(255,255,255,.1)}
.pg__win-code button:hover{background:rgba(255,107,0,.4)}
.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 var(--font);color:rgba(255,247,240,.75);
opacity:0;transition:opacity .5s var(--soft)}
.pg__msg.on{opacity:1}
.pg__msg.bad{color:#ff9a8a}
