/**
 * l2-outer-sframe.css
 * Глобальна рамка з розрізаних PNG.
 */

.l2-outer-sframe-host {
  --l2-frame-corner-w: clamp(54px, 12.4vw, 86px);
  --l2-frame-corner-top-h: clamp(54px, 12.4vw, 86px);
  --l2-frame-top-h: clamp(54px, 12.4vw, 86px);
  --l2-frame-bottom-h: clamp(34px, 8.6vw, 59px);

  --l2-frame-pad-top: clamp(88px, 18vw, 132px);
  --l2-frame-pad-x: clamp(34px, 9vw, 72px);
  --l2-frame-pad-bottom: clamp(42px, 9vw, 76px);

  --l2s-story-pad-l: var(--l2-frame-pad-x);
  --l2s-story-pad-r: var(--l2-frame-pad-x);
  --l2s-story-pad-below-cap: var(--l2-frame-pad-top);

  max-width: 420px;
  margin: 0 auto;
  min-height: auto;
  position: relative;
  overflow: visible !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #1d1c1a !important;
}

html body.l2-body.l2-app-l2-chrome {
  background: #000 !important;
  scrollbar-gutter: stable both-edges;
}

html body.l2-app-l2-chrome .l2-shell {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

html body.l2-app-l2-chrome .l2-screen.l2-outer-sframe-host {
  width: min(100vw - 8px, 420px) !important;
  max-width: min(100vw - 8px, 420px) !important;
  margin: 0 auto !important;
  min-height: auto !important;
  background: #1d1c1a !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Чистий фон під контентом. */
html body.l2-app-l2-chrome .l2-screen.l2-outer-sframe-host::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #1d1c1a !important;
  background-image: none !important;
}

/* Основна зовнішня рамка (legacy), як у референсі. */
html body.l2-app-l2-chrome .l2-screen.l2-outer-sframe-host::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background-image:
    url("/assets/assets/top-left.png?v=20260705cleanSides"),
    url("/assets/assets/top-right.png?v=20260705cleanSides"),
    url("/assets/assets/bottom-left.png?v=20260705cleanSides"),
    url("/assets/assets/bottom-right.png?v=20260705cleanSides"),
    url("/assets/assets/top.png?v=20260705cleanSides"),
    url("/assets/assets/bottom.png?v=20260705cleanSides");

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-x;

  background-position:
    top left,
    top right,
    bottom left,
    bottom right,
    top center,
    bottom center;

  background-size:
    var(--l2-frame-corner-w) var(--l2-frame-corner-top-h),
    var(--l2-frame-corner-w) var(--l2-frame-corner-top-h),
    var(--l2-frame-corner-w) var(--l2-frame-bottom-h),
    var(--l2-frame-corner-w) var(--l2-frame-bottom-h),
    calc(100% - (var(--l2-frame-corner-w) * 2)) var(--l2-frame-top-h),
    calc(100% - (var(--l2-frame-corner-w) * 2)) var(--l2-frame-bottom-h);
}

html body.l2-app-l2-chrome .l2-screen.l2-outer-sframe-host > .l2-screen-inner {
  position: relative !important;
  z-index: 6 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding:
    var(--l2-frame-pad-top)
    var(--l2-frame-pad-x)
    calc(var(--l2-frame-pad-bottom) + env(safe-area-inset-bottom, 0px))
    var(--l2-frame-pad-x) !important;
  background: transparent !important;
  background-image: none !important;
}

/* CLS guard на ранньому етапі (до повного apply app-chrome-skin). */
html body.l2-app-l2-chrome #l2-hud-panel-mount {
  display: block;
  min-height: 124px;
  margin: 0 0 6px;
}

html body.l2-app-l2-chrome #l2-nav-top {
  display: none;
  min-height: 0;
}

html body.l2-app-l2-chrome #l2-nav-bottom {
  display: block;
  min-height: 56px;
  flex-shrink: 0;
}

html body.l2-app-l2-chrome .l2-screen-inner::before,
html body.l2-app-l2-chrome .l2-screen-inner::after {
  content: none !important;
  display: none !important;
}

html body.l2-app-l2-chrome.l2-page-has-fixed-nav #l2-nav-bottom {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 8 !important;
  margin-top: 8px !important;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 430px) {
  .l2-outer-sframe-host {
    --l2-frame-corner-w: clamp(46px, 13vw, 58px);
    --l2-frame-corner-top-h: clamp(48px, 14vw, 62px);
    --l2-frame-top-h: clamp(50px, 15vw, 66px);
    --l2-frame-bottom-h: clamp(30px, 8vw, 42px);

    --l2-frame-pad-top: clamp(78px, 21vw, 104px);
    --l2-frame-pad-x: clamp(22px, 7vw, 34px);
    --l2-frame-pad-bottom: clamp(34px, 8vw, 52px);
  }
}