/* =====================================================================
   v225 — 핸드/전투필드 카드 UI 요청 반영
   1) 공격·방어·체력 문구 제거, 숫자 확대
   2) 사용 가능 초록 박스 제거, 카드 전체 밝은 외곽선으로 표시
   3) 핸드 카드 사이 1px 간격
   4) 핸드/필드 상단 카드명·종류 표기 통일
   5) 이미지 위 종류 표시 띠 제거
   6) PC 좌측창 5% 확대, 핸드/필드 카드 15% 확대
   ===================================================================== */

/* ---------- 공통: 이미지 위 종류 표시 띠 제거 ---------- */
#hand.hand .card .card-kind-strip,
.mobile-hand-mount #hand.hand .card .card-kind-strip,
.battlefield-layout .unit .card-kind-strip{
  display:none!important;
  content:none!important;
}

/* ---------- 공통: 공격/방어/체력 글자 제거 ---------- */
body #hand.hand .card .card-stat-cell::before,
body .mobile-hand-mount #hand.hand .card .card-stat-cell::before,
body .battlefield-layout .unit .stats span::before{
  display:none!important;
  content:none!important;
}
body #hand.hand .card .card-stat-cell,
body .mobile-hand-mount #hand.hand .card .card-stat-cell,
body .battlefield-layout .unit .stats span{
  grid-template-rows:1fr!important;
}

/* ---------- 공통: 사용 가능 문구/초록 박스 완전 제거 ---------- */
#hand.hand .card .card-ready-badge,
#hand.hand .card .card-ready-label,
.mobile-hand-mount #hand.hand .card .card-ready-badge,
.mobile-hand-mount #hand.hand .card .card-ready-label{
  display:none!important;
  content:none!important;
}
#hand.hand .card.actionable-card:not(.opening-hand-card)::before,
.mobile-hand-mount #hand.hand .card.actionable-card:not(.opening-hand-card)::before{
  display:none!important;
  content:none!important;
}

/* 사용 가능 상태는 상단 색상 변경 없이 카드 전체 외곽선으로만 표시 */
#hand.hand .card.affordable .card-title-area,
#hand.hand .card.actionable-card .card-title-area,
.mobile-hand-mount #hand.hand .card.affordable .card-title-area,
.mobile-hand-mount #hand.hand .card.actionable-card .card-title-area{
  background:linear-gradient(180deg,var(--v218-main,#394552),var(--v218-deep,#131921))!important;
  border-bottom-color:var(--v224-gold,#d8bb72)!important;
  box-shadow:none!important;
}
#hand.hand .card.affordable .card-name-text,
#hand.hand .card.actionable-card .card-name-text,
.mobile-hand-mount #hand.hand .card.affordable .card-name-text,
.mobile-hand-mount #hand.hand .card.actionable-card .card-name-text{
  color:#fff!important;
  text-shadow:0 1px 2px #000!important;
}
#hand.hand .card.affordable,
#hand.hand .card.actionable-card,
.mobile-hand-mount #hand.hand .card.affordable,
.mobile-hand-mount #hand.hand .card.actionable-card{
  border-color:#fff2a0!important;
  box-shadow:0 0 0 2px #fff8cf,0 0 16px 5px #ffe36fad,inset 0 0 12px #fff4b83d!important;
  filter:brightness(1.12) saturate(1.08)!important;
}

/* ---------- 상단 카드명/종류: 핸드와 전투필드 완전 통일 ---------- */
#hand.hand .card .card-title-area,
.mobile-hand-mount #hand.hand .card .card-title-area,
.battlefield-layout .unit .card-title-area{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0 4px 0 0!important;
  overflow:hidden!important;
}
#hand.hand .card .card-kind-ribbon,
.mobile-hand-mount #hand.hand .card .card-kind-ribbon,
.battlefield-layout .unit .card-kind-ribbon{
  align-self:stretch!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:34px!important;
  padding:0 3px!important;
  font-size:8px!important;
  font-weight:950!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#hand.hand .card .card-name-text,
.mobile-hand-mount #hand.hand .card .card-name-text,
.battlefield-layout .unit .field-unit-name{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0 2px!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ---------- PC: 좌측창 +5%, 카드 +15% ---------- */
@media (min-width:851px){
  body.unified-left-layout:not(.ui-mode-mobile-preview){
    /* v224 실제 표시값(112.86 × 175.56)의 115% */
    --v216-card-w:129.789px;
    --v216-card-h:201.894px;
    --v216-card-gap:6px;
    --v216-hand-w:391.367px;       /* 3장 + 1px 간격 2개 */
    --v216-hand-h:404.788px;       /* 2줄 + 1px 간격 */
    --v216-hand-section-h:444px;
    --v216-formation-w:811.509px;
    --v216-five-card-w:672.945px;
    --v216-four-card-w:537.156px;
    --v216-three-card-w:401.367px;
    --v216-two-card-w:265.578px;
    --v216-lane-h:216.315px;
    --hand-card-width:var(--v216-card-w);
    --hand-card-height:var(--v216-card-h);
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .app,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .app[style]{
    /* 기존 382px의 약 105% */
    grid-template-columns:401px minmax(822px,1fr)!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host .right-hand-section{
    height:var(--v216-hand-section-h)!important;
    min-height:var(--v216-hand-section-h)!important;
    max-height:var(--v216-hand-section-h)!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host .handbox{
    padding:0!important;
    overflow:hidden!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand{
    grid-template-columns:repeat(3,var(--v216-card-w))!important;
    grid-template-rows:repeat(2,var(--v216-card-h))!important;
    grid-auto-rows:var(--v216-card-h)!important;
    width:var(--v216-hand-w)!important;
    min-width:var(--v216-hand-w)!important;
    max-width:var(--v216-hand-w)!important;
    height:var(--v216-hand-h)!important;
    min-height:var(--v216-hand-h)!important;
    max-height:var(--v216-hand-h)!important;
    gap:1px!important;
    padding:0!important;
    margin:0!important;
    justify-content:start!important;
    align-content:start!important;
    overflow:hidden!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand .card,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slot,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot{
    width:var(--v216-card-w)!important;
    min-width:var(--v216-card-w)!important;
    max-width:var(--v216-card-w)!important;
    height:var(--v216-card-h)!important;
    min-height:var(--v216-card-h)!important;
    max-height:var(--v216-card-h)!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand .card,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .slot>.unit,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battle-panel .battlefield-layout .hq-field-slot>.unit{
    grid-template-rows:24px minmax(0,1fr) 31px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) .left-hand-host #hand.hand .card.utility-card{
    grid-template-rows:24px minmax(0,1fr) 42px!important;
  }

  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .cstats,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .stats{
    height:31px!important;
    min-height:31px!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-stat-cell,
  body.unified-left-layout:not(.ui-mode-mobile-preview) .battlefield-layout .unit .stats span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 2px!important;
    font-size:19px!important;
    font-weight:1000!important;
    line-height:1!important;
  }
  body.unified-left-layout:not(.ui-mode-mobile-preview) #hand.hand .card .card-stat-cell b{
    font-size:19px!important;
    font-weight:1000!important;
    line-height:1!important;
  }
}

/* ---------- 모바일/미리보기: 숫자만 더 선명하게, 카드 간 얇은 간격 ---------- */
@media (max-width:850px){
  .mobile-hand-mount #hand.hand{gap:1px!important}
  .mobile-hand-mount #hand.hand .card-stat-cell b,
  .battlefield-layout .unit .stats span{
    font-size:12px!important;
    font-weight:1000!important;
  }
}
body.ui-mode-mobile-preview .mobile-hand-mount #hand.hand{gap:1px!important}
body.ui-mode-mobile-preview .mobile-hand-mount #hand.hand .card-stat-cell b,
body.ui-mode-mobile-preview .battlefield-layout .unit .stats span{
  font-size:12px!important;
  font-weight:1000!important;
}