/* BurgasMedia · Игри — стиль игровой зоны ВНУТРИ шаблона сайта (25.09.2026 v2, «единая экосистема»): шапка, меню, нижняя панель,
   футер, фавикон — общие с сайтом. Все правила ограничены .bmg / .g-* — стили сайта не трогаем. Тема — html.dark (как на сайте).
   Высоту игровой сцены считает core.js: окно − шапка сайта − нижняя app-панель (--g-avail). */
:root{--g-bg:#F3F5FA;--g-bg2:#E8ECF5;--g-card:#FFFFFF;--g-ink:#0F1E3D;--g-mute:#5B6780;--g-line:#DCE2EE;--g-acc:#2563EB;--g-acc2:#0F1E3D;--g-ok:#16A34A;--g-bad:#DC2626;--g-shadow:0 10px 30px rgba(15,30,61,.12);--g-font:'Manrope','Helvetica Neue',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--g-bot:env(safe-area-inset-bottom,0px)}
html.dark{--g-bg:#0A1022;--g-bg2:#111A33;--g-card:#151F3B;--g-ink:#EEF2FB;--g-mute:#95A3C2;--g-line:#26325A;--g-shadow:0 12px 34px rgba(0,0,0,.45)}
.bmg,.g-veil,.g-toast{font-family:var(--g-font);font-feature-settings:"locl" 0;-webkit-font-smoothing:antialiased;color:var(--g-ink)}
:where(.bmg,.g-veil) *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* :where — нулевая специфичность: сброс кнопок сайта не перебивает стили самих игр */
:where(.bmg,.g-veil) button{font-family:inherit;font-feature-settings:inherit;cursor:pointer;border:0;background:none;color:inherit;margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0;line-height:normal}
.g-stage>*{flex:none}
.bmg{background:var(--g-bg);width:100%}
/* панель игры под шапкой сайта */
.g-top{display:flex;align-items:center;gap:6px;max-width:560px;margin:0 auto;padding:8px 10px 6px}
.g-ibtn{width:40px;height:40px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;color:var(--g-ink)!important;transition:transform .15s,background .2s;flex:none;text-decoration:none!important}
.g-ibtn:active{transform:scale(.9);background:var(--g-bg2)}
.g-ibtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-back{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 10px 0 4px;border-radius:12px;background:var(--g-bg2);color:var(--g-ink)!important;font-weight:800;font-size:13px;text-decoration:none!important;flex:none}
.g-back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1;padding-left:4px}
.g-title h1,.g-title b{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--g-ink);font-family:inherit;line-height:1.15}
.g-title small{font-size:11.5px;color:var(--g-mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hud{display:flex;gap:5px;align-items:center}
.g-pill{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:46px;padding:3px 7px;border-radius:11px;background:var(--g-card);box-shadow:0 0 0 1px var(--g-line);line-height:1.05}
.g-pill i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--g-mute)}
.g-pill b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.g-top:has(.g-pill + .g-pill) .g-title small{display:none}
.g-snd.off svg .w{display:none}.g-snd:not(.off) svg .x{display:none}
/* сцена: высота = свободное место на экране (core.js) */
.g-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:560px;margin:0 auto;padding:4px 12px 10px;position:relative;height:var(--g-avail,calc(100svh - 190px));min-height:300px;overflow:hidden}
/* текст об игре под сценой */
.g-about{max-width:680px;margin:0 auto;padding:22px 18px 30px;border-top:1px solid var(--g-line)}
.g-about h2{margin:0 0 10px;font-size:21px;font-weight:800;color:var(--g-ink)}
.g-about p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--g-mute)}
.g-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.g-more a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--g-card);box-shadow:0 0 0 1px var(--g-line);color:var(--g-ink)!important;text-decoration:none!important;font-weight:800;font-size:14px}
.g-more a span{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.g-more a span svg{width:21px;height:21px}
/* окна */
.g-veil{position:fixed;inset:0;z-index:9600;background:rgba(6,12,28,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .22s}
.g-veil.on{opacity:1}
.g-sheet{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--g-card);color:var(--g-ink);border-radius:26px 26px 0 0;padding:10px 20px calc(20px + var(--g-bot));box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(40px);transition:transform .28s cubic-bezier(.2,.9,.25,1.1)}
.g-veil.on .g-sheet{transform:none}
.g-sheet .grab{width:42px;height:5px;border-radius:3px;background:var(--g-line);margin:0 auto 12px}
.g-sheet h3{margin:4px 0 10px;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--g-ink)}
.g-sheet p,.g-sheet li{font-size:15.5px;line-height:1.55;color:var(--g-ink);margin:0 0 10px}
.g-sheet .mute{color:var(--g-mute)}
.g-sheet .btns{display:flex;gap:10px;margin-top:16px}
.g-btn{flex:1;height:50px;border-radius:16px;font-size:16px;font-weight:800;background:var(--g-bg2)!important;color:var(--g-ink)!important;transition:transform .12s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.g-btn.pri{background:linear-gradient(135deg,var(--g-acc),var(--g-acc2))!important;color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--g-acc) 35%,transparent)}
.g-btn:active{transform:scale(.97)}
.g-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}
.g-stats div{background:var(--g-bg);border-radius:14px;padding:10px 4px;text-align:center}
.g-stats b{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.g-stats i{font-style:normal;font-size:11px;color:var(--g-mute);font-weight:700}
.g-toast{position:fixed;left:50%;top:22%;z-index:9700;transform:translate(-50%,-12px);opacity:0;background:var(--g-ink);color:var(--g-bg);font-weight:800;font-size:14px;line-height:1.35;padding:9px 14px;border-radius:13px;box-shadow:var(--g-shadow);transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(320px,86vw);text-align:center}
.g-toast.on{opacity:1;transform:translate(-50%,0)}
.g-confetti{position:fixed;inset:0;z-index:9650;pointer-events:none}
.g-seg{display:inline-flex;background:var(--g-bg2);border-radius:14px;padding:4px;gap:4px;flex:none}
.g-seg button{height:34px;padding:0 13px;border-radius:11px;font-weight:800;font-size:13.5px;color:var(--g-mute)}
.g-seg button.on{background:var(--g-card);color:var(--g-ink);box-shadow:0 2px 8px rgba(15,30,61,.12)}
.g-shake{animation:g-shake .42s}
@keyframes g-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.bmg *,.g-veil *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.g-frame{width:100%;height:100%;border:0;background:var(--g-bg);display:block;border-radius:14px}
@media (max-width:370px){.g-ibtn{width:34px}.g-pill{min-width:40px;padding:3px 5px}.g-back span{display:none}}

.g-top:has(.g-pill + .g-pill) .g-back span{display:none}
.g-top:has(.g-pill + .g-pill) .g-back{padding:0 6px 0 4px}

/* правило одной строкой */
.g-rule{display:flex;align-items:center;gap:6px;max-width:100%;margin:0 auto 8px;padding:5px 10px 5px 7px;border-radius:999px;background:color-mix(in srgb,var(--g-acc) 10%,var(--g-card));color:var(--g-ink)!important;font-size:12.5px!important;font-weight:700;line-height:1.25;text-align:left;box-shadow:0 0 0 1px color-mix(in srgb,var(--g-acc) 25%,transparent)}
.g-rule svg{flex:none;width:17px;height:17px;stroke:var(--g-acc);fill:none;stroke-width:2.2;stroke-linecap:round}
.g-rule span{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.g-sheet .demo{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 14px;padding:12px;border-radius:16px;background:var(--g-bg)}
.g-sheet .demo .arrow{font-size:22px;font-weight:800;color:var(--g-mute)}
.g-sheet ol{padding-left:20px;margin:0 0 10px}.g-sheet ol li{margin-bottom:6px}