:root{--bg:#0f1219;--fg:#e8f0ff;--sub:#97aac4;--line:rgba(255,255,255,.1);--acc:#7C5CFF}
html,body{height:100%} body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 Inter,system-ui}
.container{padding:16px 16px 84px}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:12px}

/* Section container ("Раздел") */
.sec{padding:12px}
.sec__hd{font-weight:800;font-size:18px;margin:2px 2px 10px;opacity:.95}
.sec__bd{display:flex;flex-direction:column;gap:10px}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:64px;background:rgba(12,13,18,.86);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:10}
.tab{display:grid;gap:3px;place-items:center;color:var(--sub);font-size:12px;cursor:pointer}
.tab.active{color:#fff}
.sys{border:1px dashed var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.sys h4{margin:0 0 8px}


/* ===== FLAPPY LITE+ Шмель  (overlay) ===== */
.flappy{ position:fixed; inset:0; z-index:10060; background:#000; color:#fff; display:none; }
.flappy.is-open{ display:block; }
body.flappy-open{ overflow:hidden; }

.flappy__wrap{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding: calc(env(safe-area-inset-top,0px)+8px) 14px calc(env(safe-area-inset-bottom,0px)+14px);
}



/* HUD */
.fl-hud{ width:100%; max-width:520px; margin:0 auto 8px; position:relative; z-index:30; } /* ↑ поверх сцены */
.fl-hud__row{ display:grid; justify-items:center; gap:6px; }
.fl-score{ font:900 clamp(28px,8vw,48px)/1 Inter,system-ui; text-shadow:0 2px 10px rgba(0,0,0,.25) }
.fl-bar{ width:100%; height:4px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden }
.fl-bar>i{ display:block; height:100%; width:100%; background:#fff; transform-origin:left center; }

/* HUD: coins + shield */
.fl-stats{ display:flex; justify-content:center; gap:14px; margin-top:6px; }
.fl-stat{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); font:800 13px/1 Inter;
}
.fl-ico{ width:18px; height:18px; background:center/contain no-repeat; opacity:.95 }
#fl-coin-count{ font:800 14px/1 Inter }
.fl-shield-wrap{ display:flex; align-items:center; gap:8px; }
.fl-shield-bar{ width:88px; height:4px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden }
.fl-shield-bar>i{ display:block; height:100%; width:100%; background:#6be3ff; transform-origin:left center; }

/* Stage */
.fl-stage{
  flex:1; position:relative; overflow:hidden; border-radius:16px;
  background: linear-gradient(180deg,#0a0c14 0%, #0f1626 100%);
  z-index:1; /* базовый слой сцены */
}
.fl-hint{
  position:absolute; left:0; right:0; top:18%;
  text-align:center; font:800 16px/1.2 Inter; opacity:.75; pointer-events:none; z-index:15;
}

/* Sprites sizes (override via JS) */
:root{ --bird-w: 48px; --bird-h: 36px; --pipe-w: 76px; --coin-w: 32px; --coin-h: 32px; --pow-w: 34px; --pow-h: 34px; }

/* Bird */
.fl-bird{
  position:absolute; width:var(--bird-w); height:var(--bird-h); transform:translate(-50%,-50%) rotate(0deg);
  background: radial-gradient(circle at 35% 35%, #ffdd66, #ff9a00);
  border-radius:14px; box-shadow:0 8px 18px rgba(255,154,0,.35), inset 0 0 10px rgba(255,255,255,.25);
  will-change: transform, top, left;
  z-index:20; /* птица над трубами/монетами */
}
.fl-bird--sprite{ background:center/contain no-repeat; border-radius:0; box-shadow:none; }
.fl-bird--shield{ box-shadow:0 0 0 3px rgba(107,227,255,.8), 0 0 30px rgba(107,227,255,.55); }

/* Pipes */
.fl-pipe-part{
  position:absolute; width:var(--pipe-w);
  background: linear-gradient(180deg,#6BFF7A,#1ED760);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 22px rgba(30,215,96,.25), inset 0 0 10px rgba(255,255,255,.15);
  z-index:10; /* ниже птицы и результата */
}
.fl-pipe--sprite{ background: center / 100% 100% no-repeat; border:none; box-shadow:none; }

/* Items: coin & shield power-up */
.fl-coin,.fl-power{
  position:absolute; transform:translate(-50%,-50%); will-change: left, top;
  width:var(--coin-w); height:var(--coin-h); background:center/contain no-repeat;
  z-index:12; /* над трубами, но ниже птицы и результата */
}
.fl-power{ width:var(--pow-w); height:var(--pow-h); }

/* Result (поверх всего) */
.fl-result{
  position:absolute; inset:0; display:none; place-items:center; padding:16px;
  z-index:9999;            /* <-- ключ: над монетами/трубами/птицей */
  pointer-events:auto;
}
.fl-result.show{ display:grid; }
.fl-card{
  width:min(100%,520px); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:12px 16px; display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:center;
}
.fl-cell{ display:grid; gap:4px; justify-items:center }
.fl-val{ font:800 20px/1 Inter } .fl-sub{ font:600 12px/1.1 Inter; opacity:.8 } .fl-chev{ font:20px/1 Inter; opacity:.6 }

/* CTA bottom (safe-area) */
:root{ --ctaGap: 44px; }
.fl-cta{
  position:absolute; left:14px; right:14px;
  bottom: calc(env(safe-area-inset-bottom,0px) + var(--ctaGap));
  display:none; z-index:50; /* над сценой, но под результатом */
}
.fl-cta.show{ display:block; }
.fl-cta .btn{ width:100%; height:52px; border-radius:16px; font:800 16px/1 Inter; background:#fff; color:#000; border:1px solid #fff; }

@media (min-width:900px){ .flappy__wrap{ max-width:var(--appW,428px); margin:0 auto } }

/* === ТЮНИНГ ЩИТА И РАДИУСОВ === */
:root{
  --bird-radius: 50px;
  --shield-ring: 0px;
  --shield-ring-color: rgba(107,227,255,.95);
  --shield-glow-color: rgba(107,227,255,.55);
  --shield-glow-blur: 28px;
  --shield-pulse: 1.6s;
}

/* птичка всегда со скруглением через переменную */
.fl-bird{ border-radius: var(--bird-radius); }
/* если используешь спрайт — оставляем скругление */
.fl-bird--sprite{ border-radius: var(--bird-radius); }

/* активный щит: кольцо + подсветка + пульс */
.fl-bird--shield{
  box-shadow: 0 0 var(--shield-glow-blur) var(--shield-glow-color);
  position: relative;
}
.fl-bird--shield::after{
  content:"";
  position:absolute; inset: calc(-1*var(--shield-ring));
  border-radius: inherit;
  border: var(--shield-ring) solid var(--shield-ring-color);
  box-shadow: 0 0 var(--shield-glow-blur) var(--shield-glow-color);
  animation: shieldPulse var(--shield-pulse) ease-in-out infinite;
  pointer-events: none;
}

@keyframes shieldPulse{
  0%  { box-shadow: 0 0 var(--shield-glow-blur) var(--shield-glow-color), 0 0 0 0 rgba(107,227,255,.35); }
  60% { box-shadow: 0 0 calc(var(--shield-glow-blur)*1.2) var(--shield-glow-color), 0 0 0 10px rgba(107,227,255,0); }
  100%{ box-shadow: 0 0 var(--shield-glow-blur) var(--shield-glow-color), 0 0 0 0 rgba(107,227,255,0); }
}

/* Пусть Flappy целиком берёт тот же шрифт, что и весь мини-апп */
.flappy, .flappy * { font-family: inherit !important; }


/* --- Constructor flappy extras (pipes/coin/shield elements) --- */
.fl-stage{ position:relative; overflow:hidden; }
.fl-pipe-part{ position:absolute; background-repeat:no-repeat; background-size:cover; }
.fl-pipe-part.top{ transform:scaleY(-1); transform-origin:top; }
.fl-coin,.fl-shield{ position:absolute; background-repeat:no-repeat; background-size:contain; }
.is-gone{ opacity:0; transform:scale(.5); transition:opacity .2s ease, transform .2s ease; }


/* Ensure games remain interactive inside preview */
.game-host, .game-host *{ pointer-events:auto; }



/* --- Flappy: сделать кнопку "Ещё раз" кликабельной всегда --- */
.fl-stage{
  position: relative;
  z-index: 1;
}

.fl-result{
  z-index: 40;
  pointer-events: none;          /* результат не перехватывает клики */
}

.fl-cta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 50;
  pointer-events: auto !important;
}

.fl-cta .btn{
  pointer-events: auto !important;
}

/* Sheet (bottom modal) */
.sheet{
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
}
.sheet.is-open{
  pointer-events:auto;
}
.sheet__overlay{
  position:absolute;
  inset:0;
  bottom: var(--tabH,0px);
  background:rgba(0,0,0,.48);
  opacity:0;
  transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.sheet.is-open .sheet__overlay{
  opacity:1;
}
.sheet__panel{
  position:absolute;
  left:0; right:0;
  margin:0 auto;
  width:min(820px,100%);
  max-height:88vh;
  overflow:auto;
  background:linear-gradient(180deg,rgba(18,20,24,.98),rgba(18,20,24,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  transform:translateY(100%);
  transition:transform .24s ease;
  border-radius:18px 18px 0 0;
  padding:10px 14px 16px;
}
.sheet.sheet-bottom .sheet__panel{
  bottom:calc(var(--tabH,0px) + 8px);
}
.sheet.is-open .sheet__panel{
  transform:translateY(0);
}
.sheet__handle{
  width:42px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.26);
  margin:4px auto 10px;
}
.sheet__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.sheet__title{
  font-weight:600;
  font-size:16px;
}
.sheet__close{
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.sheet__body{
  font-size:14px;
  line-height:1.5;
}
body.sheet-open{
  overflow:hidden;
  touch-action:none;
}

/* === Intro slider + start cards === */
/* ===== Слайдер Slider ===== */
:root{ --introBottomPad: 28px; } /* насколько выше кнопки от нижней перекладины */

.intro{
  position:fixed; inset:0; z-index:10050;
  background:#000; color:#fff;
  display:none; pointer-events:auto;
}
.intro.is-open{ display:block; }
body.intro-open{ overflow:hidden; }

.intro__wrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:
    calc(env(safe-area-inset-top,0px) + 6px)
    14px
    calc(env(safe-area-inset-bottom,0px) + var(--introBottomPad));
}

.intro__progress{
  display:flex; gap:8px; justify-content:center;
  padding:8px 0 12px;
}
.intro__seg{ width:44px; height:4px; border-radius:999px; background:rgba(255,255,255,.28) }
.intro__seg.active{ background:#fff }

.intro__stage{
  flex:1; display:grid; place-items:center; padding:12px; text-align:center;
}
.intro__slides{ width:100% }
.intro__slide{ display:none }
.intro__slide.active{ display:block }

.intro__h1{ font-weight:900; font-size:28px; margin:0 0 10px }
.intro__p{ opacity:.85; font-size:15px; margin:0 auto; max-width:26ch }

/* низ экрана — динамически рендерим набор кнопок */
.intro__actions{
  margin-top:auto; display:grid; gap:10px;
  padding-top:8px;
}
.intro__actions--one{ grid-template-columns:1fr }
.intro__actions--two{ grid-template-columns:1fr 1fr }

.intro__btn{
  height:52px; padding:0 16px; border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff; font-weight:800; cursor:pointer;
}
.intro__btn--primary{ background:#fff; color:#000; border-color:#fff }
.intro__btn--ghost{ background:transparent }
.intro__btn:active{ transform:translateY(1px) }

@media (min-width:900px){
  .intro__wrap{ max-width: var(--appW,428px); margin:0 auto }
}



  /* ===== GAMES CARD Карточки на главной игры ===== */
.list-card.games .list__item{ background:transparent; border:0; box-shadow:none }
.list__btn{
  height:36px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff; font-weight:800; cursor:pointer;
}
.list__btn--primary{ background:#fff; color:#000; border-color:#fff }
.list__btn:active{ transform:translateY(1px) }

/* чуть плотнее сетка под кнопку справа */
.list-card.games.tight .list__item{
  grid-template-columns:36px 1fr auto;
}
:root{ --gap-block: 16px; }           /* подправь число при желании */
.card.list-card.games{ margin-top: var(--gap-block); }


/* === Invite friends card === */
.invite-card{
  margin-top:var(--gap-block,16px);
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line,rgba(255,255,255,.12));
  display:flex;
  flex-direction:column;
  gap:12px;
}
.invite-card__title{
  font-weight:800;
  font-size:20px;
  letter-spacing:0.02em;
}
.invite-card__text{
  font-size:14px;
  line-height:1.5;
  opacity:.9;
}
.invite-card__link{
  margin-top:4px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.invite-card__btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.invite-card__btn{
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
}
.invite-card__btn:active{ transform:translateY(1px); }
.invite-card__btn--primary{
  background:#FFB52D;
  border-color:#FFB52D;
  color:#000;
}



/* === Booking calendar + slots + contacts === */
.booking-card{
  padding:18px 18px 20px;
  border-radius:18px;
  background:rgba(9,11,19,1);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.booking-card + .booking-card{ margin-top:12px; }

.booking-card__title{
  font-weight:800;
  font-size:18px;
  letter-spacing:.02em;
  margin-bottom:14px;
}

.booking-calendar{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.booking-calendar__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  font-weight:700;
}
.booking-calendar__month{
  display:flex;
  align-items:center;
  gap:6px;
}
.booking-calendar__nav{
  display:flex;
  gap:6px;
}
.booking-calendar__nav button{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  cursor:pointer;
}

.booking-calendar__grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:6px;
}
.booking-calendar__dow{
  font-size:11px;
  opacity:.6;
  text-align:center;
}
.booking-calendar__day{
  height:32px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  cursor:pointer;
  border:1px solid transparent;
}
.booking-calendar__day--muted{
  opacity:.45;
}
.booking-calendar__day--active{
  background:linear-gradient(135deg,#3B82F6,#34D399);
  border-color:transparent;
  font-weight:700;
}

/* slots */
.booking-slots{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.booking-slot{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  font-size:14px;
}

/* contacts */
.booking-contact-input{
  margin-top:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:15px;
}
.booking-contact-input::placeholder{
  color:rgba(255,255,255,.6);
}
.booking-contact-btn{
  margin-top:12px;
  padding:12px 16px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#3B82F6,#34D399);
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
}
.booking-contact-btn:active{
  transform:translateY(1px);
}



.booking-slot--active{
  background:linear-gradient(135deg,#3B82F6,#34D399);
  border-color:transparent;
  font-weight:700;
}