/* v365 — 연출창 실제 표시 복구 + 좌측창 5% 확대 + 핸드 여백 제거 + 전투열 5% 확대
 *
 * 1) 연출창(본진 상태 위 "일반카드 연출효과")이 안 나오던 진짜 원인
 *    .left-card-effect-card.action-view-mode 의 grid-template-rows 가 minmax(0,1fr) 한 줄인데
 *    실제 자식은 제목줄 + 스테이지 두 개라, 제목줄이 1fr(198px)을 전부 먹고
 *    스테이지는 암시적 auto 행으로 밀려 height 가 0px 이 되어 있었다.
 *    (v361~v364 가 손댄 레이어 display/animation 은 정상이었고, 담을 박스가 0px였던 것)
 * 2) 좌/전투 레이아웃은 v281 변수 체계가 단일 진실원본이므로 변수만 갱신한다.
 */

@media (min-width:851px){

  /* ---------- 공통 치수: v281 변수 갱신 (좌측창 +5%, 전투열 폭/높이 +5%) ---------- */
  body.unified-left-layout:not(.ui-mode-mobile-preview){
    /* 전투필드 카드: 107.485714 -> +5% */
    --v281-card-w:112.86px;
    --v281-card-h:158.004px;

    /* 전투열 가로 묶음 = 카드 n장 + 2px 간격 */
    --v281-five-w:572.3px;      /* 5 x 112.86 + 4 x 2 */
    --v281-four-w:457.44px;     /* 4 x 112.86 + 3 x 2 */
    --v281-three-w:342.58px;    /* 3 x 112.86 + 2 x 2 */
    --v281-two-w:227.72px;      /* 2 x 112.86 + 1 x 2 */

    /* 전투열 높이: 154.48 -> +5% */
    --v281-lane-h:162.204px;

    /* 좌측창: 334.09 -> +5% */
    --v281-left-col-w:350.7945px;
    /* 전투열(572.3) + 레인 좌우패딩 16 + 보드 좌우패딩 12 + 1 여유 */
    --v281-battle-col-w:601.3px;
    --v281-app-w:960.0945px;

    /* 핸드 전용 치수 (핸드박스를 여백 없이 꽉 채우는 값) */
    --v365-hand-row-h:161.84px;                                  /* 핸드카드 세로 = 가로 x 1.4 */
    --v365-hand-h:324.68px;                                      /* 2행 + 1px */
    --v365-hand-host-h:357.7px;                                  /* 설정줄 32 + 핸드 324.68 + 1 */
  }

  /* ---------- 2) 덱편집 줄 아래 여백 제거 (핸드가 아래로 밀리던 문제) ---------- */
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost .right-hand-section>.handbox{
    margin:0!important;
    padding-top:0!important;
  }

  /* ---------- 3) 핸드: 좌측창 폭에 맞춰 3열이 여백 없이 꽉 차게 ---------- */
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost.left-hand-host,
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost.left-hand-host .right-hand-section{
    height:var(--v365-hand-host-h)!important;
    min-height:var(--v365-hand-host-h)!important;
    max-height:var(--v365-hand-host-h)!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost.left-hand-host .handbox{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--v365-hand-h)!important;
    min-height:var(--v365-hand-h)!important;
    max-height:var(--v365-hand-h)!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost.left-hand-host #hand.hand{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,var(--v365-hand-row-h))!important;
    grid-auto-rows:var(--v365-hand-row-h)!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--v365-hand-h)!important;
    min-height:var(--v365-hand-h)!important;
    max-height:var(--v365-hand-h)!important;
    column-gap:1px!important;
    row-gap:1px!important;
    gap:1px!important;
    margin:0!important;
    padding:0!important;
    justify-content:stretch!important;
    align-content:start!important;
    box-sizing:border-box!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #leftHandHost.left-hand-host #hand.hand .card{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--v365-hand-row-h)!important;
    min-height:var(--v365-hand-row-h)!important;
    max-height:var(--v365-hand-row-h)!important;
    aspect-ratio:auto!important;   /* 폭은 열이, 높이는 행이 정한다 */
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* ---------- 4) 연출창: 제목줄 + 스테이지 2행 그리드로 교정 (핵심 수정) ---------- */
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-card.action-view-mode,
  .left-card-effect-card.action-view-mode{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-auto-rows:minmax(0,1fr)!important;
    align-content:stretch!important;
    justify-content:stretch!important;
    gap:2px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-card.action-view-mode .left-card-effect-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    padding:0 2px!important;
    margin:0!important;
    font-size:10px!important;
    line-height:18px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-card-effect-stage,
  .left-card-effect-stage{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#04080e!important;
  }
}

/* ---------- 5) 연출 장면 자체: 누적된 PC 잠금규칙(transform:none 등)을 피한 독립 네임스페이스 ----------
 * 기존 .left-effect-preview-scene 계열 규칙에는 transform/filter/clip-path 를 none !important 로
 * 못박은 것이 남아 있어서, 뒤에 어떤 animation 을 !important 로 걸어도 실제 움직임이 상쇄되었다.
 * (CSS 캐스케이드상 !important 선언이 애니메이션보다 우선한다.)
 * v365 는 그 클래스를 떼고 원본 .hq-card-scene 규칙(=카드관리 미리보기와 동일한 연출)을 그대로 태운다.
 */
.left-card-effect-stage .hq-card-scene.v365-live-scene{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
  z-index:2!important;
}
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-entry-motion{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  overflow:hidden!important;
  z-index:0!important;
  transform-origin:center;
}
.left-card-effect-stage .hq-card-scene.v365-live-scene img{
  object-position:var(--scene-x,50%) var(--scene-y,50%);
}
.left-card-effect-stage .hq-card-scene.v365-live-scene:not(.fx-none) .scene-shade,
.left-card-effect-stage .hq-card-scene.v365-live-scene:not(.fx-none) .scene-energy,
.left-card-effect-stage .hq-card-scene.v365-live-scene:not(.fx-none) .scene-particles{
  display:block!important;
  visibility:visible!important;
}
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-shade{z-index:2!important}
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-energy{z-index:3!important}
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-particles{z-index:4!important}
.left-card-effect-stage .hq-card-scene.v365-live-scene.fx-none .scene-shade,
.left-card-effect-stage .hq-card-scene.v365-live-scene.fx-none .scene-energy,
.left-card-effect-stage .hq-card-scene.v365-live-scene.fx-none .scene-particles{display:none!important}
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-label,
.left-card-effect-stage .hq-card-scene.v365-live-scene .scene-effect-caption{display:none!important}