/* =====================================================================
   v218 — 1/4 축소 대응 심플 국가별 카드 디자인
   위(청색) · 촉(녹색) · 오(적색) · 기타(보라색)
   핵심 정보 우선순위: 이름 > EN > 등급 > 이미지 > 공격/방어/체력
   ===================================================================== */

:root{
  --v218-gold:#d8b85d;
  --v218-gold-soft:#f1d98d;
  --v218-ink:#070a0e;
  --v218-stat-h:30px;
}

/* 국가 팔레트 */
#hand.hand .card.wei,.battlefield-layout .unit.wei,.faction-wei{
  --v218-main:#174f91;--v218-deep:#071d39;--v218-soft:#5f9bdd;--v218-glyph:'魏';
}
#hand.hand .card.shu,.battlefield-layout .unit.shu,.faction-shu{
  --v218-main:#216b3b;--v218-deep:#082715;--v218-soft:#6daf79;--v218-glyph:'蜀';
}
#hand.hand .card.wu,.battlefield-layout .unit.wu,.faction-wu{
  --v218-main:#8f241f;--v218-deep:#360806;--v218-soft:#d45a50;--v218-glyph:'吳';
}
#hand.hand .card.other,.battlefield-layout .unit.other,.faction-other,
#hand.hand .card.item,#hand.hand .card.tactic{
  --v218-main:#5c2d79;--v218-deep:#1d092c;--v218-soft:#9b67bb;--v218-glyph:'群';
}

/* 전투 핸드 + 필드 카드 공통 */
#hand.hand .card,
.battlefield-layout .unit{
  border:2px solid var(--v218-gold)!important;
  border-radius:9px!important;
  background:var(--v218-deep,#111)!important;
  box-shadow:0 3px 9px #000b,inset 0 0 0 1px rgba(255,255,255,.13)!important;
  isolation:isolate!important;
}

#hand.hand .card .card-title-area,
.battlefield-layout .unit .card-title-area{
  grid-template-columns:minmax(0,1fr) auto!important;
  padding:2px 5px 2px 7px!important;
  border-bottom:1px solid var(--v218-gold)!important;
  background:linear-gradient(180deg,var(--v218-main,#394552),var(--v218-deep,#131921))!important;
  box-shadow:inset 0 -1px rgba(0,0,0,.35)!important;
}

#hand.hand .card .card-name-text,
.battlefield-layout .unit .field-unit-name{
  color:#fff!important;
  font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif!important;
  font-size:12px!important;
  font-weight:1000!important;
  letter-spacing:-.055em!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
}

#hand.hand .card .card-title-grade,
.battlefield-layout .unit .field-grade{
  min-width:25px!important;
  height:17px!important;
  padding:0 4px!important;
  border:1px solid var(--v218-gold-soft)!important;
  border-radius:4px!important;
  background:#15100be8!important;
  color:#ffe992!important;
  font-size:9px!important;
  font-weight:1000!important;
  box-shadow:none!important;
  text-shadow:0 1px #000!important;
}

#hand.hand .card .cimg,
.battlefield-layout .unit .uimg{
  background:linear-gradient(180deg,var(--v218-deep,#0d1218),#05070a)!important;
}

/* 그림 가장자리만 어둡게 처리해 작은 카드에서도 얼굴·실루엣이 선명하게 보이도록 함 */
#hand.hand .card .cimg::after,
.battlefield-layout .unit .uimg::after,
.collection-card-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 52%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.20),transparent 18%,transparent 82%,rgba(0,0,0,.20));
}

/* 국가 문양: 장식 대신 한 글자만 크게 */
#hand.hand .card .cimg::before,
.battlefield-layout .unit .uimg::before,
.faction-wei .collection-card-art::before,
.faction-shu .collection-card-art::before,
.faction-wu .collection-card-art::before,
.faction-other .collection-card-art::before{
  content:var(--v218-glyph,'群');
  position:absolute;
  right:4px;
  top:4px;
  z-index:8;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:1px solid var(--v218-gold-soft);
  border-radius:50%;
  background:color-mix(in srgb,var(--v218-deep,#111) 88%,transparent);
  color:#fff4c3;
  font-family:"Malgun Myeongjo","Batang",serif;
  font-size:12px;
  font-weight:1000;
  line-height:1;
  text-shadow:0 1px 2px #000;
  box-shadow:0 1px 4px #000b;
  pointer-events:none;
}

/* 기존 우측 하단 아이콘 묶음을 이미지 전체 오버레이로 전환 */
#hand.hand .card .card-bottom-icons,
.battlefield-layout .unit .unit-bottom-icons{
  inset:0!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  z-index:10!important;
}

/* 카드 종류 아이콘 */
#hand.hand .card .card-bottom-icons>span:first-child,
.battlefield-layout .unit .unit-bottom-icons>span:first-child{
  position:absolute!important;
  left:4px!important;
  bottom:4px!important;
  display:grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  border:1px solid var(--v218-gold-soft)!important;
  border-radius:5px!important;
  background:rgba(5,7,10,.86)!important;
  color:#fff!important;
  font-size:12px!important;
  text-shadow:none!important;
}

/* EN 비용 */
#hand.hand .card .card-ap-icon,
.battlefield-layout .unit .unit-bottom-icons>span:last-child{
  position:absolute!important;
  left:4px!important;
  top:4px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:29px!important;
  height:24px!important;
  padding:0 4px!important;
  border:2px solid var(--v218-gold-soft)!important;
  border-radius:999px!important;
  background:var(--v218-deep,#111)!important;
  color:#fff!important;
  font-size:0!important;
  font-weight:1000!important;
  text-shadow:none!important;
  box-shadow:0 2px 5px #000b!important;
}
#hand.hand .card .card-ap-icon::before,
.battlefield-layout .unit .unit-bottom-icons>span:last-child::before{
  content:attr(data-en) ' EN';
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}

/* 작은 카드에서는 중복 부가 아이콘과 문구를 정리 */
#hand.hand .card .card-bottom-icons>span:not(:first-child):not(.card-ap-icon),
.battlefield-layout .unit .unit-bottom-icons>span:not(:first-child):not(:last-child),
#hand.hand .card .card-ability-label,
#hand.hand .card .hand-buff-provider-badge,
#hand.hand .card .general-class-hand-badge,
#hand.hand .card .soldier-class-hand-icon,
.battlefield-layout .unit .unit-ability-label,
.battlefield-layout .unit .unit-class-icon,
.battlefield-layout .unit .unit-buff-box,
.battlefield-layout .unit .unit-skill-box,
.battlefield-layout .unit .unit-scout-badge{
  display:none!important;
}

/* 공격/방어/체력: 숫자를 최대한 크게, 의미는 작은 아이콘으로만 표시 */
#hand.hand .card .cstats,
.battlefield-layout .unit .stats{
  border-top:1px solid var(--v218-gold)!important;
  background:var(--v218-deep,#10161d)!important;
}
#hand.hand .card .card-stat-cell,
.battlefield-layout .unit .stats span{
  position:relative!important;
  gap:2px!important;
  border-right:1px solid color-mix(in srgb,var(--v218-gold) 70%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--v218-main,#333) 82%,#000),var(--v218-deep,#111))!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  text-shadow:0 1px 2px #000!important;
}
#hand.hand .card .card-stat-cell b{font-size:14px!important;line-height:1!important}
#hand.hand .card .card-stat-cell::before,
.battlefield-layout .unit .stats span::before{
  color:#ffe48b;
  font-size:9px;
  font-weight:1000;
  line-height:1;
}
#hand.hand .card .card-stat-cell:nth-child(1)::before,
.battlefield-layout .unit .stats span:nth-child(1)::before{content:'⚔'}
#hand.hand .card .card-stat-cell:nth-child(2)::before,
.battlefield-layout .unit .stats span:nth-child(2)::before{content:'◆'}
#hand.hand .card .card-stat-cell:nth-child(3)::before,
.battlefield-layout .unit .stats span:nth-child(3)::before{content:'♥';color:#ff7777}

/* 사용 가능 상태는 글자 대신 녹색 점으로 축소 */
#hand.hand .card .card-ready-badge{
  position:absolute!important;
  left:4px!important;
  top:50%!important;
  width:7px!important;
  min-width:7px!important;
  height:7px!important;
  padding:0!important;
  border:1px solid #d7ffd7!important;
  border-radius:50%!important;
  background:#40d861!important;
  color:transparent!important;
  overflow:hidden!important;
  box-shadow:0 0 6px #4cff72!important;
}

/* 아이템/전술은 국가 공용(기타) 보라색으로 명확히 구분 */
#hand.hand .card.item,
#hand.hand .card.tactic{
  --v218-main:#5c2d79;--v218-deep:#1d092c;--v218-soft:#9b67bb;--v218-glyph:'策';
}
#hand.hand .card.utility-card .cimg::before{content:'策'}

/* 덱 편집기 / 상점 카드에도 동일 국가색 적용 */
.deck-builder-visual-card,
.card-shop-grid .shop-card{
  border:2px solid var(--v218-gold)!important;
  border-radius:8px!important;
  background:var(--v218-deep,#101216)!important;
  box-shadow:0 3px 8px #0009,inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
.deck-builder-visual-card>.collection-card-title,
.card-shop-grid .shop-card>.collection-card-title{
  background:linear-gradient(180deg,var(--v218-main,#3c2d25),var(--v218-deep,#17110e))!important;
  border-bottom:1px solid var(--v218-gold)!important;
}
.collection-card-title .collection-card-name,
.collection-card-title>b{
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:-.045em!important;
  text-shadow:0 1px 2px #000!important;
}
.collection-card-title>em{
  border:1px solid var(--v218-gold-soft)!important;
  background:#15100be8!important;
  color:#ffe992!important;
  border-radius:4px!important;
  font-size:8px!important;
}
.deck-builder-visual-card>.collection-card-art,
.card-shop-grid .shop-card>.collection-card-art{
  background:var(--v218-deep,#101216)!important;
}
.collection-card-icons{
  inset:0!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  z-index:10!important;
}
.collection-card-icons .collection-type-icon,
.collection-card-icons>span:first-child{
  position:absolute!important;
  left:4px!important;
  bottom:4px!important;
  display:grid!important;
  place-items:center!important;
  width:19px!important;
  height:19px!important;
  border:1px solid var(--v218-gold-soft)!important;
  border-radius:5px!important;
  background:rgba(5,7,10,.86)!important;
  color:#fff!important;
  font-size:11px!important;
}
.collection-card-icons .collection-en-icon,
.collection-card-icons>span:last-child{
  position:absolute!important;
  left:4px!important;
  top:4px!important;
  min-width:27px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 4px!important;
  border:2px solid var(--v218-gold-soft)!important;
  border-radius:999px!important;
  background:var(--v218-deep,#111)!important;
  color:#fff!important;
  font-size:0!important;
  text-shadow:none!important;
}
.collection-card-icons .collection-en-icon::before,
.collection-card-icons>span:last-child::before{content:attr(data-en) ' EN';font-size:9px;line-height:1;white-space:nowrap}
.collection-card-icons>span:not(:first-child):not(:last-child){display:none!important}
.deck-builder-visual-card>.collection-five-stats,
.card-shop-grid .shop-card>.collection-five-stats{
  border-top:1px solid var(--v218-gold)!important;
  border-bottom:0!important;
  background:linear-gradient(180deg,var(--v218-main,#303640),var(--v218-deep,#121820))!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 2px #000!important;
}
.collection-stat-core{font-size:12px!important;color:#fff!important}
.collection-stat-mind{font-size:8px!important;color:#ffeaa0!important}
.deck-builder-visual-card>.collection-extra,
.card-shop-grid .shop-card>.collection-extra{
  background:#090c10!important;
  color:#d9dee6!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}

/* 1/4급 소형 카드에서 다시 한 번 간결화 */
@media (max-width:850px){
  #hand.hand .card .card-name-text,
  .battlefield-layout .unit .field-unit-name{font-size:9px!important}
  #hand.hand .card .card-title-grade,
  .battlefield-layout .unit .field-grade{min-width:20px!important;height:14px!important;font-size:7px!important;padding:0 2px!important}
  #hand.hand .card .cimg::before,
  .battlefield-layout .unit .uimg::before{width:16px;height:16px;font-size:9px;right:3px;top:3px}
  #hand.hand .card .card-ap-icon,
  .battlefield-layout .unit .unit-bottom-icons>span:last-child{left:3px!important;top:3px!important;min-width:24px!important;height:19px!important;border-width:1px!important}
  #hand.hand .card .card-ap-icon::before,
  .battlefield-layout .unit .unit-bottom-icons>span:last-child::before{font-size:8px!important}
  #hand.hand .card .card-bottom-icons>span:first-child,
  .battlefield-layout .unit .unit-bottom-icons>span:first-child{left:3px!important;bottom:3px!important;width:16px!important;height:16px!important;font-size:9px!important}
  #hand.hand .card .card-stat-cell,
  .battlefield-layout .unit .stats span{font-size:9px!important;padding:0!important}
  #hand.hand .card .card-stat-cell b{font-size:10px!important}
  #hand.hand .card .card-stat-cell::before,
  .battlefield-layout .unit .stats span::before{font-size:7px!important}
}

/* color-mix 미지원 브라우저용 기본값 */
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  #hand.hand .card .cimg::before,.battlefield-layout .unit .uimg::before,
  .faction-wei .collection-card-art::before,.faction-shu .collection-card-art::before,
  .faction-wu .collection-card-art::before,.faction-other .collection-card-art::before{background:rgba(8,10,14,.88)}
  #hand.hand .card .card-stat-cell,.battlefield-layout .unit .stats span{background:var(--v218-deep,#111)!important}
}