/* ============================================================================
   Post-match "LEVEL COMPLETE" screen.
   Self-contained, namespaced lc- / lc* so nothing collides with the game.
   Hosted inside the existing #playWin (.play-overlay) full-screen overlay.
   ========================================================================== */

#playWin.lc-overlay{
  /* cozy royal-kitchen interlevel backdrop (vector/Disney), cover-centred
     for both orientations; warm dark gradient keeps the banner readable */
  background:
    linear-gradient(rgba(18,11,6,0.42), rgba(18,11,6,0.60)),
    url("backgrounds/castle_kitchen.webp") center center / cover no-repeat fixed;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

.lc-wrap{position:relative;width:100%;max-width:560px;z-index:6;}
.lc-svg{display:block;width:100%;height:auto;overflow:visible;
       transition:transform .55s cubic-bezier(.34,1.2,.5,1);}
/* when the combo line prints, nudge the plate+text+pile up to rebalance around
   the new bottom line (added/removed by postmatch.js) */
.lc-svg.lc-shift{transform:translateY(-6.5%);}

/* combo bonus — a plain text line UNDER the coin pile, revealed one letter at a
   time (typewriter, handled in postmatch.js). No plate/button: just the words. */
.lc-combo{position:absolute;left:50%;top:90%;transform:translate(-50%,-50%);
         z-index:7;pointer-events:none;white-space:nowrap;opacity:0;
         font-family:'Arial Black','Arial Narrow',sans-serif;font-weight:900;
         font-size:26px;letter-spacing:1px;color:#ffe27a;
         -webkit-text-stroke:1px #7a4a06;text-shadow:0 2px 3px rgba(0,0,0,.55);
         font-variant-numeric:tabular-nums;}
.lc-combo.lc-combo-on{opacity:1;}
.lc-combo .lc-amt{color:#ffe208;-webkit-text-stroke:1px #8a6a00;}
.lc-combo .lc-caret{ -webkit-text-stroke:0;color:#fff6d8;
         animation:lcCaretBlink .5s steps(1) infinite;}
@keyframes lcCaretBlink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* ЭКСПЕРИМЕНТ: тайм-бонус (CFG.TIME_BONUS в play.js) — вторая строчка под
   combo; пока она печатается, тарелка+куча приподнимаются ещё выше
   (lc-shift2 объявлен ПОСЛЕ lc-shift и перебивает его). */
.lc-svg.lc-shift2{transform:translateY(-9.5%);}
.lc-time{top:96.5%;}

/* flying coins */
.lc-coin-fly{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;}
.lc-coin-spr{width:100%;height:100%;
            background-image:url("icons/UI/coin sprites.webp");
            background-repeat:no-repeat;will-change:transform,opacity;}

/* action buttons */
.lc-actions{position:fixed;left:0;right:0;bottom:7%;z-index:7;opacity:0;
            display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;}
.lc-gbtn{border:none;border-radius:18px;cursor:pointer;
        font-family:'Arial Black','Arial Narrow',sans-serif;font-weight:900;letter-spacing:1px;
        font-size:22px;line-height:1;padding:17px 30px;
        display:inline-flex;align-items:center;gap:11px;
        transition:transform .08s, box-shadow .12s;}
.lc-gbtn:active{transform:translateY(3px);}
.lc-gbtn-continue{color:#efffc9;background:linear-gradient(180deg,#2fdd6d,#12aa4c);
        text-shadow:0 2px 0 #0f552d;
        box-shadow:0 6px 0 #0b7d35,0 0 0 2px #0f214e,0 6px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.45);}
.lc-gbtn-continue:active{box-shadow:0 2px 0 #0b7d35,0 0 0 2px #0f214e,0 2px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.4);}
.lc-gbtn-x2{color:#5a2e06;background:linear-gradient(180deg,#ffce33,#f5a208);
        text-shadow:0 1px 0 rgba(255,255,255,.4);
        box-shadow:0 6px 0 #b47008,0 0 0 2px #0f214e,0 6px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.55);}
.lc-gbtn-x2:active{box-shadow:0 2px 0 #b47008,0 0 0 2px #0f214e,0 2px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.5);}
.lc-gbtn[disabled]{filter:grayscale(.55) brightness(.85);cursor:default;}
.lc-vbadge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
          background:#0f214e;color:#fff;font-size:11px;margin-left:2px;}
.lc-vbadge svg{width:11px;height:11px;margin-left:1px;}

/* ---- Life-lost screen ---------------------------------------------------- */
/* ADD LIFE — rewarded-ad button (red, heart-themed) */
.lc-gbtn-addlife{color:#fff;background:linear-gradient(180deg,#ff6a6a,#e21f38);
        text-shadow:0 1px 0 #7a1120;
        box-shadow:0 6px 0 #a5122a,0 0 0 2px #0f214e,0 6px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.4);}
.lc-gbtn-addlife:active{box-shadow:0 2px 0 #a5122a,0 0 0 2px #0f214e,0 2px 0 2px #0f214e,inset 0 3px 0 rgba(255,255,255,.35);}
.lc-gbtn-addlife svg{width:24px;height:24px;}

/* NEXT LIFE IN … countdown pill (sits below the plate, like the combo label) */
.lc-nextlife{position:absolute;left:50%;top:66%;transform:translate(-50%,0);
        display:inline-flex;flex-direction:column;align-items:center;gap:2px;
        padding:9px 22px;border-radius:16px;z-index:6;white-space:nowrap;
        background:linear-gradient(180deg,rgba(20,36,94,.92),rgba(12,22,63,.92));
        box-shadow:0 4px 0 rgba(9,16,48,.85),inset 0 2px 0 rgba(255,255,255,.10);
        opacity:0;}
.lc-play .lc-nextlife{animation:lcTextIn .5s cubic-bezier(.34,1.56,.64,1) .55s both;}
.lc-nl-cap{font-family:'Arial Black','Arial Narrow',sans-serif;font-weight:900;
        letter-spacing:1.5px;font-size:13px;color:#9fb4e8;text-transform:uppercase;}
.lc-nl-time{font-family:'Arial Black','Arial Narrow',sans-serif;font-weight:900;
        letter-spacing:1px;font-size:26px;line-height:1;color:#ffd56b;
        font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(9,16,48,.6);}

/* close X (life-lost) */
.lc-close{position:fixed;top:16px;right:16px;z-index:8;width:44px;height:44px;
        border:none;border-radius:50%;cursor:pointer;padding:0;
        display:flex;align-items:center;justify-content:center;
        background:linear-gradient(180deg,#3a56a8,#26397e);
        box-shadow:0 4px 0 #16224e,0 0 0 2px #0f214e,inset 0 2px 0 rgba(255,255,255,.25);}
.lc-close:active{transform:translateY(2px);box-shadow:0 2px 0 #16224e,0 0 0 2px #0f214e;}
.lc-close svg{width:22px;height:22px;}

/* loss screen: drop the celebratory golden rays so it doesn't read as a reward */
.lc-lifelost #lcFlarePos,.lc-lifelost #lcFlareBPos{display:none;}

/* broken-heart reveal: same pop-in as coins/booster, then the two halves crack apart */
.lc-play #lcHeartBroken{animation:lcCoinsIn .42s cubic-bezier(.2,1.5,.45,1) .24s both;}
.lc-play #lcHeartL{animation:llCrackL .55s cubic-bezier(.3,1.3,.5,1) .5s both;}
.lc-play #lcHeartR{animation:llCrackR .55s cubic-bezier(.3,1.3,.5,1) .5s both;}
@keyframes llCrackL{0%{transform:translate(0,0) rotate(0);}60%{transform:translate(-2.4px,1.6px) rotate(-8.5deg);}100%{transform:translate(-2px,1.4px) rotate(-7deg);}}
@keyframes llCrackR{0%{transform:translate(0,0) rotate(0);}60%{transform:translate(2.4px,1.6px) rotate(8.5deg);}100%{transform:translate(2px,1.4px) rotate(7deg);}}

/* meta topbar (slides in from top) */
.lc-topbar-wrap{position:fixed;top:18px;left:0;right:0;display:flex;justify-content:center;
               z-index:5;pointer-events:none;}
.lc-topbar{position:relative;width:100%;max-width:440px;will-change:transform;}
.lc-topbar .lc-frame{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 5px rgba(0,0,0,0.5));}
.lc-topbar .lc-ov{position:absolute;transform:translate(-50%,-50%);top:50%;pointer-events:none;}
.lc-topbar .lc-avatar{left:12.60%;width:54px;height:54px;}
/* КК в шестиугольнике (MGM-выглядывание). Контейнер = bbox гнезда шестиугольника,
   вытянутый вверх (SVG x 5.77..114, y -6..122 в viewBox -6 -4 492 140 → проценты бара).
   clip-path: верх открыт (голова/лайк накрывают верхний обод и чуть-чуть плиту
   справа), ниже локтей контур повторяет гнездо — корпус режется по слантам.
   Поверх видео lc-kk-rim перерисовывает нижнюю часть обода (маска-градиент
   y60→78 в SVG-координатах): персонаж выглядывает из-за неё. Шов невидим:
   силуэт пересекает правый обод на y≈60, ниже — уже внутри грани. */
.lc-topbar .lc-kk{left:2.39%;top:-1.43%;width:22.0%;height:91.43%;transform:none;display:none;
  clip-path:polygon(0% 0%,100% 0%,100% 51.56%,92.82% 51.56%,92.82% 74.84%,88.67% 80.94%,
                    50.57% 99.53%,42.25% 99.53%,4.16% 80.94%,0% 74.84%);}
.lc-topbar .lc-kk video{position:absolute;left:-6.95%;top:1.41%;width:116.42%;height:auto;display:block;
  transform-origin:50% 100%;will-change:transform;}  /* origin снизу: scale при «нырке» = отступ назад */
.lc-topbar .lc-kk-rim{left:0;top:0;width:100%;height:100%;transform:none;display:none;}
.lc-topbar.lc-kk-on .lc-kk,.lc-topbar.lc-kk-on .lc-kk-rim{display:block;}
.lc-topbar.lc-kk-on .lc-avatar{display:none;}

.lc-topbar .lc-lives-num{left:30.89%;font-size:17px;font-weight:900;color:#fff;
           -webkit-text-stroke:0.7px #8f2438;text-shadow:0 1px 1px rgba(0,0,0,0.55);
           transform:translate(-50%,calc(-50% - 1.5px));font-variant-numeric:tabular-nums;}
.lc-topbar .lc-slot-val{font-size:16px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.4px;
          white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,0.55);font-family:system-ui,sans-serif;}
.lc-topbar .lc-lives-win{left:44.11%;color:#7ce39a;letter-spacing:1.2px;}
.lc-topbar .lc-lives-win.lc-regen{color:#ffd56b;letter-spacing:.4px;}
.lc-topbar .lc-coins-num{left:80.49%;color:#fff;}

/* intro motion */
#lcPlateG,#lcTextG,#lcCoinsImg,#lcBoosterImg,#lcHeartBroken,#lcFlareIntro,#lcFlareSpin,#lcFlareBIntro,#lcFlareBSpin{
  transform-box:fill-box;transform-origin:center;}
@keyframes lcFlareSpin{to{transform:rotate(360deg);}}
@keyframes lcFlareShock{0%{opacity:0;transform:scale(.3);}28%{opacity:.95;transform:scale(1);}100%{opacity:0;transform:scale(1.9);}}
@keyframes lcFlareBIn{0%{opacity:0;transform:scale(.6);}30%{opacity:1;transform:scale(1);}100%{opacity:1;transform:scale(1);}}
@keyframes lcPlateIn{0%{opacity:0;transform:translateY(38px) scale(.82);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes lcTextIn{0%{opacity:0;transform:translateY(-30px) scale(.86);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes lcCoinsIn{0%{opacity:0;transform:scale(.2);}100%{opacity:1;transform:scale(1);}}
/* hidden until the sequence starts */
#lcPlateG,#lcTextG,#lcCoinsImg,#lcBoosterImg,#lcHeartBroken,#lcFlareIntro,#lcFlareBIntro{opacity:0;}
#lcFlareBSpin{animation:lcFlareSpin 44s linear infinite;}
.lc-play #lcFlareIntro{animation:lcFlareShock .55s cubic-bezier(.2,.8,.3,1) both;}
.lc-play #lcFlareBIntro{animation:lcFlareBIn .55s cubic-bezier(.2,.8,.3,1) both;}
.lc-play #lcPlateG{animation:lcPlateIn .60s cubic-bezier(.34,1.56,.64,1) both;}
.lc-play #lcTextG {animation:lcTextIn  .58s cubic-bezier(.34,1.56,.64,1) .10s both;}
.lc-play #lcCoinsImg,.lc-play #lcBoosterImg{animation:lcCoinsIn .42s cubic-bezier(.2,1.5,.45,1) .24s both;}

/* ====================================================================
   МОБИЛЬНЫЙ LANDSCAPE (высота ≤ 540px). Баннер (SVG 680×470, h≈0.69w)
   ограничен высотой вьюпорта, чтобы не залезал под топбар и кнопки;
   топбар и кнопки ужаты и прижаты к краям.
   ==================================================================== */
@media (orientation: landscape) and (max-height: 540px) {
  .lc-wrap{max-width:min(560px, 92vh);}   /* высота баннера ≈ 63vh */
  .lc-wrap{max-width:min(560px, 92dvh);}  /* Safari: без учёта тулбара */

  .lc-combo{font-size:18px;}

  .lc-actions{bottom:3%;gap:12px;}
  .lc-gbtn{font-size:16px;padding:10px 20px;border-radius:14px;}

  /* топбар — компактно у ЛЕВОГО края, чтобы не накрывал верх баннера
     (баннер центрирован; сам топбар pointer-events:none, тапы не ловит) */
  .lc-topbar-wrap{top:4px;justify-content:flex-start;
    padding-left:8px;                                       /* фолбэк */
    padding-left:max(8px, env(safe-area-inset-left, 0px));  /* бровь слева */
  }
  .lc-topbar{max-width:230px;}
  .lc-topbar .lc-avatar{width:30px;height:30px;}
  .lc-topbar .lc-lives-num{font-size:11px;}
  .lc-topbar .lc-slot-val{font-size:10px;}
}