#screen-lobby{background:#7ec96a;overflow:hidden}
.lobby-body{overflow:hidden}
.lobby-scene{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.lobby-sky{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#aee6ff 0%,#d8f5c0 55%,#b8e88a 100%);
}
.lobby-layer{
  position:absolute;left:0;right:0;bottom:0;height:100%;
  background-repeat:repeat-x;background-position:center bottom;
  background-size:auto 100%;
  pointer-events:none;
}
.lobby-far{background-image:url("../assets/ui/lobby/far.png");z-index:1;opacity:.95}
.lobby-mid{background-image:url("../assets/ui/lobby/mid.png");z-index:2}
.lobby-ground{background-image:url("../assets/ui/lobby/ground.png");z-index:3}

/* 기지·캐릭터 공통 깊이 레이어 (같은 stacking context) */
.lobby-depth{
  position:absolute;inset:0;z-index:4;pointer-events:none;
}

/* 중앙 기지 — 그라운드에 발이 닿되 위로는 크게 뻗음 */
.lobby-base{
  position:absolute;left:50%;top:88%;
  transform:translate(-50%,-100%);
  z-index:50;pointer-events:none;
  width:clamp(280px,48cqh,460px);
  filter:drop-shadow(0 14px 12px rgba(30,60,20,.32));
}
.lobby-base img{
  width:100%;height:auto;max-width:none;
  object-fit:contain;object-position:center bottom;
  display:block;
}

.lobby-front{background-image:url("../assets/ui/lobby/front.png");z-index:70}

/* 하늘 쪽 대형 타이틀 로고 */
.lobby-sky-title{
  position:absolute;left:50%;top:clamp(6px, 1.5cqh, 16px);
  transform:translateX(-50%);
  z-index:80;pointer-events:none;
  width:min(96%, 1440px);
  height:auto;
  max-height:clamp(144px, 44cqh, 320px);
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(30,60,20,.28));
  animation:lobby-title-float 3.6s ease-in-out infinite;
}
@keyframes lobby-title-float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-8px)}
}
.lobby-actor{
  position:absolute;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transform:translate(-50%,-100%);
  pointer-events:auto;cursor:pointer;
  will-change:transform;
}
.lobby-actor img{
  height:calc(clamp(56px,12cqh,110px) * var(--lobby-scale, 1));width:auto;max-width:none;
  object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 8px 6px rgba(30,60,20,.28));
  pointer-events:none;user-select:none;
  transition:filter .15s,height .2s;
}
.lobby-actor.rep img{
  height:calc(clamp(72px,15cqh,132px) * var(--lobby-scale, 1));
  filter:drop-shadow(0 10px 8px rgba(30,60,20,.35)) drop-shadow(0 0 10px rgba(255,210,80,.55));
}
.lobby-actor.face-left img{transform:scaleX(-1)}
.lobby-actor.walking img{animation:lobby-bob .38s ease-in-out infinite}
.lobby-actor.bounce img{animation:lobby-bounce .28s ease-out}
@keyframes lobby-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.lobby-actor.face-left.walking img{animation:lobby-bob-flip .38s ease-in-out infinite}
@keyframes lobby-bob-flip{
  0%,100%{transform:scaleX(-1) translateY(0)}
  50%{transform:scaleX(-1) translateY(-5px)}
}
@keyframes lobby-bounce{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-18px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}
.lobby-actor.face-left.bounce img{animation:lobby-bounce-flip .28s ease-out}
@keyframes lobby-bounce-flip{
  0%{transform:scaleX(-1) translateY(0) scale(1)}
  40%{transform:scaleX(-1) translateY(-18px) scale(1.08)}
  100%{transform:scaleX(-1) translateY(0) scale(1)}
}
.lobby-actor .name-tag{
  font-family:var(--font-display);font-size:11px;color:var(--ink);
  background:linear-gradient(180deg,#fffef8,#ffe9c4);
  border:2px solid var(--brown);border-radius:999px;
  padding:2px 8px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 rgba(90,55,25,.2);
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;
  pointer-events:none;
}
.lobby-actor .speech-bubble{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  max-width:150px;min-width:max-content;
  padding:5px 9px;border:2px solid var(--brown);border-radius:12px;
  background:linear-gradient(180deg,#fffef8,#ffe9c4);
  color:var(--ink);font-family:var(--font-display);font-size:11px;line-height:1.2;
  text-align:center;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 rgba(90,55,25,.2);
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
}
.lobby-actor .speech-bubble::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;
  background:#ffe9c4;border-right:2px solid var(--brown);border-bottom:2px solid var(--brown);
  transform:translateX(-50%) rotate(45deg);
}
.lobby-actor.speaking .speech-bubble{
  opacity:1;transform:translateX(-50%) translateY(0);
}
.lobby-actor.rep .name-tag,
.lobby-actor:hover .name-tag,
.lobby-actor.show-name .name-tag{
  opacity:1;transform:translateY(0);
}
.lobby-actor.rep .name-tag{
  border-color:var(--orange);background:linear-gradient(180deg,#fff8e8,#ffd89a);
}

.lobby-body > .side-menu,
.lobby-body > .lobby-battle-btns{z-index:90}

/* 전투 진입 버튼 묶음: 무한 도전 + 일반 스테이지 */
.lobby-battle-btns{
  position:absolute;right:var(--gap-4);bottom:var(--gap-4);
  display:flex;align-items:stretch;gap:10px;
}
.lobby-battle-btns .main-battle-btn{position:relative;right:auto;bottom:auto;overflow:hidden}

.main-battle-btn{
  position:absolute;right:var(--gap-4);bottom:var(--gap-4);
  overflow:visible;min-width:200px;min-height:64px;flex-shrink:0;
  background:linear-gradient(180deg,var(--orange-hi) 0%,var(--orange) 48%,var(--orange-dark) 100%);
  border:4px solid #a85a12;border-radius:22px;padding:10px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 7px 0 #b85e10,
    0 12px 20px rgba(160,80,20,.28);
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.main-battle-btn::after{
  content:"";position:absolute;left:12%;right:12%;top:5px;height:36%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);pointer-events:none;
}
.main-battle-btn small{
  font-size:var(--fs-sm);color:#6b3a0c;font-family:var(--font-display);position:relative;z-index:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
}
.main-battle-btn b{
  font-size:var(--fs-2xl);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);position:relative;z-index:1;
  line-height:1.15;white-space:nowrap;
}
.main-battle-btn em{
  position:relative;z-index:1;font-style:normal;font-size:var(--fs-xs);
  font-family:var(--font-display);
  background:linear-gradient(180deg,var(--purple-hi),var(--purple));
  color:#fff;border-radius:999px;padding:3px 10px;margin-top:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 var(--purple-dark);
  white-space:nowrap;
}
.main-battle-btn:hover{filter:brightness(1.05)}
.main-battle-btn:active{
  transform:translateY(5px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 #b85e10,0 4px 10px rgba(160,80,20,.2);
}
.main-battle-btn:disabled{filter:grayscale(.7);opacity:.6;pointer-events:none}

/* 무한 도전: 보라 계열로 기능 구분 */
.infinite-battle-btn{
  background:linear-gradient(180deg,var(--purple-hi) 0%,var(--purple) 48%,var(--purple-dark) 100%);
  border-color:#5b2f8f;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(0,0,0,.14),
    0 7px 0 var(--purple-dark),
    0 12px 20px rgba(90,50,150,.3);
}
.infinite-battle-btn small{color:#efe2ff}
.infinite-battle-btn:active{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 var(--purple-dark),0 4px 10px rgba(90,50,150,.22);
}

.side-menu{
  position:absolute;left:var(--gap-3);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:var(--gap-3);
  width:min(140px,20cqw);
  z-index:90;
}
.side-menu button{
  position:relative;overflow:visible;
  min-height:56px;width:100%;
  flex-shrink:0;white-space:nowrap;
  background:linear-gradient(180deg,#fffef8 0%,#ffe9c4 50%,#efd09a 100%);
  border:3px solid var(--brown);border-radius:18px;
  font-size:var(--fs-xl);color:var(--ink);line-height:1.15;
  padding:10px 10px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(120,80,30,.1),
    0 5px 0 rgba(90,55,25,.28);
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.side-menu button::after{
  content:"";position:absolute;left:12%;right:12%;top:3px;height:34%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none;
}
.side-menu button:hover{filter:brightness(1.04)}
.side-menu button:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 rgba(90,55,25,.28);
}