/* v205 — 모바일/모바일 미리보기 전투필드·핸드 밀착 + 본진 상태 상단 이미지 UI */

/* 실제 모바일: 핸드는 문서 흐름에 두고, 과거 고정 도크용 예약 여백을 제거한다. */
@media (max-width:850px){
  body.ui-mode-mobile,
  body.ui-mode-mobile .app{
    margin-bottom:0!important;
    padding-bottom:calc(var(--mobile-action-height,58px) + 4px + env(safe-area-inset-bottom,0px))!important;
  }
  body.ui-mode-mobile .battle-panel,
  body.ui-mode-mobile .boardwrap,
  body.ui-mode-mobile .battlefield-layout,
  body.ui-mode-mobile .battlefield-layout>.board,
  body.ui-mode-mobile .mobile-ally-hq-mount,
  body.ui-mode-mobile .mobile-hand-mount{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  body.ui-mode-mobile .battle-panel{
    gap:0!important;
    row-gap:0!important;
  }
  body.ui-mode-mobile .boardwrap{
    padding-bottom:2px!important;
  }
  body.ui-mode-mobile .mobile-ally-hq-mount{
    margin:0!important;
  }
  body.ui-mode-mobile .mobile-hand-mount{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    margin:0!important;
    scroll-margin-top:0!important;
  }
}

/* PC에서 보는 모바일 미리보기는 viewport가 850px보다 크므로 별도 규칙이 필요하다.
   핸드를 fixed에서 일반 흐름으로 되돌려 전투필드 바로 아래에 붙인다. */
body.ui-mode-mobile-preview,
body.ui-mode-mobile-preview .app{
  margin-bottom:0!important;
  padding-bottom:calc(var(--mobile-action-height,58px) + 4px)!important;
}
body.ui-mode-mobile-preview .battle-panel,
body.ui-mode-mobile-preview .boardwrap,
body.ui-mode-mobile-preview .battlefield-layout,
body.ui-mode-mobile-preview .battlefield-layout>.board,
body.ui-mode-mobile-preview .mobile-ally-hq-mount,
body.ui-mode-mobile-preview .mobile-hand-mount{
  margin-top:0!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}
body.ui-mode-mobile-preview .battle-panel{
  gap:0!important;
  row-gap:0!important;
}
body.ui-mode-mobile-preview .boardwrap{
  padding-bottom:2px!important;
}
body.ui-mode-mobile-preview .mobile-ally-hq-mount{
  margin:0 auto!important;
}
body.ui-mode-mobile-preview .mobile-hand-mount{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:var(--mobile-play-width,418px)!important;
  min-width:var(--mobile-play-width,418px)!important;
  max-width:var(--mobile-play-width,418px)!important;
  margin:0 auto!important;
  z-index:20!important;
  box-shadow:none!important;
  scroll-margin-top:0!important;
}
body.ui-mode-mobile-preview .bottom-hud{
  bottom:0!important;
}

.status-top-art-section{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:18px;
}
.status-top-art-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin-top:12px;
}
.status-top-art-preview-box{
  background:#081523;
  border:1px solid rgba(255,210,120,.28);
  border-radius:14px;
  padding:10px;
}
.status-top-art-preview-title{font-weight:800;margin-bottom:8px;color:#f6d08a}
.status-top-art-preview{
  position:relative;
  min-height:112px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#451114,#0d1a2b 72%);
}
.status-top-art-preview.mobile{min-height:78px;background:linear-gradient(180deg,#182433,#0f1624 72%)}
.status-top-art-preview .mock-title,
.status-top-art-preview .mock-stats,
.status-top-art-preview .mock-mini-label,
.status-top-art-preview .mock-mini-stats{position:relative;z-index:2}
.status-top-art-preview .mock-title{padding:56px 12px 4px;font-size:15px;font-weight:800}
.status-top-art-preview .mock-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0 12px 12px;font-size:12px;color:#fff}
.status-top-art-preview.mobile .mock-mini-label{padding:28px 8px 2px;font-size:11px;font-weight:800}
.status-top-art-preview.mobile .mock-mini-stats{display:flex;gap:7px;padding:0 8px 8px;font-size:9px}
.status-top-art-preview .status-top-art-layer,
.hq-quickbar .status-top-art-layer,
.mini-quickbar .status-top-art-layer{
  position:absolute;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:1;
}
.status-top-art-preview .status-top-art-layer{left:10px;right:10px;top:8px;height:44px;opacity:.98;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));}
.status-top-art-preview.mobile .status-top-art-layer{left:6px;right:6px;top:4px;height:22px}
.hq-quickbar{position:relative;overflow:hidden}
.hq-quickbar.has-status-top-art{padding-top:54px!important}
.hq-quickbar .status-top-art-layer{left:8px;right:8px;top:6px;height:42px;opacity:.98;filter:drop-shadow(0 3px 7px rgba(0,0,0,.32));}
.mini-quickbar{position:relative;overflow:hidden}
.mini-quickbar.has-status-top-art{padding-top:11px!important}
.mini-quickbar .status-top-art-layer{left:3px;right:3px;top:2px;height:10px;opacity:.95;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));}
.status-top-art-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.status-top-art-controls .other-image-adjust-panel{height:100%}
.status-top-art-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.status-top-art-help{font-size:12px;opacity:.8;margin-top:6px}