/* 2.7.0 · 단일 상하 프레임 + 전체 화면 배경
   프레임은 안전영역까지 채우고 조작 콘텐츠만 안전영역 안에 둔다. */

.main-menu-screen {
  padding: 0 !important;
}

.lobby-artboard:not(.debug-layout) {
  --lobby-split-top-height: 59.024cqw;
  --lobby-split-bottom-height: 22.701cqw;
  --lobby-split-rail-offset: 0cqw;
  --lobby-split-rail-width: 5.675cqw;
  --lobby-split-felt-inset: 0cqw;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  aspect-ratio: auto !important;
  container-type: size;
  background-color: #064733;
  background-image: url("assets/lobby/responsive/surface_felt_tile.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.lobby-artboard:not(.debug-layout) > img { object-fit: contain !important; }

.lobby-artboard:not(.debug-layout) .lobby-frame-art,
.lobby-artboard:not(.debug-layout) .main-profile-frame { display: none !important; }

.lobby-modular-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 881px 너비의 원본에서 상단 520px, 하단 200px은 한 장 그대로 쓴다.
   사이의 가변 높이는 모포(380×380)와 레일(50×260) 반복만으로 채운다. */
.lobby-split-cap,
.lobby-split-middle,
.lobby-split-felt,
.lobby-split-rail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.lobby-split-cap {
  z-index: 2;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 .45cqw .35cqw rgba(13, 2, 0, .42));
}

.lobby-split-cap-top { top: 0; }
.lobby-split-cap-bottom { bottom: 0; }

.lobby-split-middle {
  z-index: 1;
  top: calc(var(--lobby-split-top-height) - 2px);
  right: 0;
  bottom: calc(var(--lobby-split-bottom-height) - 2px);
  left: 0;
  overflow: hidden;
}

.lobby-split-felt {
  z-index: 0;
  inset: 0 var(--lobby-split-felt-inset);
  background-color: #064733;
  background-image: url("assets/lobby/responsive/surface_felt_tile.png");
  background-position: center top;
  background-size: 43.133cqw auto;
  background-repeat: repeat;
}

.lobby-split-rail {
  z-index: 1;
  top: 0;
  bottom: 0;
  width: var(--lobby-split-rail-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  filter: drop-shadow(0 0 .22cqw rgba(12, 2, 0, .5));
}

.lobby-split-rail-left { left: var(--lobby-split-rail-offset); }
.lobby-split-rail-right { right: var(--lobby-split-rail-offset); }

.lobby-split-rail-segment {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin-top: calc(-1 * var(--lobby-rail-overlap, 18px));
  object-fit: contain;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, .2) calc(var(--lobby-rail-fade, 17px) * .24),
    rgba(0, 0, 0, .72) calc(var(--lobby-rail-fade, 17px) * .68),
    #000 var(--lobby-rail-fade, 17px),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, .2) calc(var(--lobby-rail-fade, 17px) * .24),
    rgba(0, 0, 0, .72) calc(var(--lobby-rail-fade, 17px) * .68),
    #000 var(--lobby-rail-fade, 17px),
    #000 100%
  );
}

.lobby-split-rail-segment:first-child {
  margin-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.lobby-surface,
.lobby-frame-fixed {
  position: absolute;
  display: block;
  pointer-events: none;
}

.lobby-surface {
  z-index: 0;
  left: 0;
  right: 0;
  background-color: #531307;
  background-image: url("assets/lobby/responsive/surface_wood_tile.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: repeat-y;
}
.lobby-surface-title { top: 0; height: min(30.7%, 59.024cqw); }
.lobby-surface-footer { bottom: 0; height: min(10.8%, 22.701cqw); }

/* 새 메인 프레임: 상·하 캡은 고정 비율, 좌·우는 고정 비율 조각을 중첩한다. */
.lobby-overlap-frame-cap,
.lobby-overlap-frame-corner {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 .45cqw .35cqw rgba(13, 2, 0, .56));
}

.lobby-overlap-frame-cap {
  left: calc(var(--lobby-frame-corner-size) * .54);
  width: calc(100% - var(--lobby-frame-corner-size) * 1.08);
}

.lobby-overlap-frame-cap-top { top: 0; }
.lobby-overlap-frame-cap-bottom { bottom: 0; }
.lobby-overlap-frame-corner { width: var(--lobby-frame-corner-size); }
.lobby-overlap-frame-corner-tl { top: 0; left: 0; }
.lobby-overlap-frame-corner-tr { top: 0; right: 0; }
.lobby-overlap-frame-corner-bl { bottom: 0; left: 0; }
.lobby-overlap-frame-corner-br { right: 0; bottom: 0; }

.lobby-overlap-frame-side {
  position: absolute;
  z-index: 2;
  top: calc(var(--lobby-frame-cap-depth) - 7px);
  bottom: calc(var(--lobby-frame-cap-depth) - 7px);
  width: var(--lobby-frame-side-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

.lobby-overlap-frame-side-left { left: 0; }
.lobby-overlap-frame-side-right { right: 0; }

.lobby-overlap-frame-side-segment {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin-top: calc(-1 * var(--lobby-frame-segment-overlap, 26px));
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--lobby-frame-segment-fade, 24px), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--lobby-frame-segment-fade, 24px), #000 100%);
}

.lobby-overlap-frame-side-segment:first-child {
  margin-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.lobby-overlap-frame-side-right .lobby-overlap-frame-side-segment { transform: scaleX(-1); }

.lobby-frame-fixed {
  z-index: 3;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  width: clamp(44px, 14cqw, 82px);
  height: clamp(44px, 14cqw, 82px);
}
.corner-tl { top: 0; left: 0; background-image: url("assets/lobby/responsive/frame_corner_tl.png"); }
.corner-tr { top: 0; right: 0; background-image: url("assets/lobby/responsive/frame_corner_tr.png"); }
.corner-bl { bottom: 0; left: 0; background-image: url("assets/lobby/responsive/frame_corner_bl.png"); }
.corner-br { right: 0; bottom: 0; background-image: url("assets/lobby/responsive/frame_corner_br.png"); }
.crest-top {
  top: 0;
  left: 38%;
  width: 24%;
  height: clamp(45px, 14cqw, 82px);
  background-image: url("assets/lobby/responsive/frame_crest_top.png");
}
.crest-bottom {
  left: 38%;
  bottom: 0;
  width: 24%;
  height: clamp(52px, 17cqw, 100px);
  background-image: url("assets/lobby/responsive/frame_crest_bottom.png");
}
.hinge-left, .hinge-right {
  top: 22.6%;
  width: clamp(48px, 16cqw, 94px);
  height: clamp(64px, 22cqw, 128px);
}
.hinge-left { left: 0; background-image: url("assets/lobby/responsive/frame_hinge_left.png"); }
.hinge-right { right: 0; background-image: url("assets/lobby/responsive/frame_hinge_right.png"); }

.lobby-stats-frame {
  position: absolute;
  z-index: 4;
  left: 4.46334%;
  top: 43.54067%;
  width: 91.07333%;
  height: 11.24402%;
  border: 0;
  border-radius: clamp(8px, 2.6cqw, 16px);
  background-color: #591507;
  background-image: url("assets/lobby/responsive/surface_wood_tile.png");
  background-position: center;
  background-size: clamp(190px, 58cqw, 360px);
  background-repeat: repeat;
  pointer-events: none;
}
.lobby-stats-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/lobby/stats_panel.png") center / contain no-repeat;
}

.lobby-artboard:not(.debug-layout) .lobby-menu-button {
  min-height: 48px;
  border: 0;
  border-radius: clamp(8px, 2.6cqw, 16px);
  background-position: center;
  background-size: clamp(180px, 56cqw, 340px);
  background-repeat: repeat;
}
.lobby-artboard:not(.debug-layout) .lobby-menu-solo {
  background-color: #064723;
  background-image: url("assets/lobby/responsive/surface_felt_tile.png");
}
.lobby-artboard:not(.debug-layout) .lobby-menu-online {
  background-color: #64120d;
  background-image: linear-gradient(rgba(103, 0, 0, .52), rgba(103, 0, 0, .52)), url("assets/lobby/responsive/surface_wood_tile.png");
}
.lobby-artboard:not(.debug-layout) .lobby-menu-rules {
  background-color: #4a1c0c;
  background-image: linear-gradient(rgba(43, 18, 4, .48), rgba(43, 18, 4, .48)), url("assets/lobby/responsive/surface_wood_tile.png");
}

.lobby-artboard:not(.debug-layout) .lobby-menu-board {
  display: block !important;
  object-fit: contain !important;
}

/* 기준 이미지 조정 모드에서는 941×1672 원본 좌표를 그대로 사용한다. */
.lobby-artboard.debug-layout {
  width: min(100%, calc(100dvh * 941 / 1672));
  height: auto;
  aspect-ratio: 941 / 1672 !important;
}
.lobby-artboard.debug-layout .lobby-modular-frame,
.lobby-artboard.debug-layout .lobby-stats-frame { display: none; }
.lobby-artboard.debug-layout .lobby-frame-art,
.lobby-artboard.debug-layout .main-profile-frame,
.lobby-artboard.debug-layout .lobby-menu-board { display: block; }

@media (max-height: 620px) and (orientation: portrait) {
  .lobby-frame-fixed.hinge-left,
  .lobby-frame-fixed.hinge-right { top: 21.7%; }
  .lobby-artboard:not(.debug-layout) .lobby-menu-button { border-radius: 8px; }
}