/* =====================================================
   BIG CARD — 카드 브라우저용 280×400px 디자인
   .card-big 클래스, color-red/blue/green/black/white
===================================================== */
.card-big {
  width: 280px; height: 400px; border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  position: relative; user-select: none; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card-big:hover { transform: translateY(-6px); }

/* ── 헤더 ── */
.card-big .cb-header {
  display: flex; align-items: center; height: 46px;
  padding: 0; flex-shrink: 0; position: relative;
  border-bottom-width: 2px; border-bottom-style: solid;
}
.card-big .cb-header::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent);
  pointer-events: none;
}
.card-big .cb-name {
  width: 60%; padding: 0 10px; font-size: 14px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.card-big .cb-mana {
  width: 40%; display: flex; justify-content: flex-end; align-items: center;
  padding-right: 10px; flex-direction: row;
  position: relative; z-index: 1; overflow: visible;
}
.cb-gem {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; flex-shrink: 0;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.6);
  border: 1.5px solid rgba(255,255,255,0.25);
  margin-left: -6px; transition: margin 0.1s;
}
.cb-gem:first-child { margin-left: 0; }
.cb-mana.compact .cb-gem { margin-left: -9px; width: 21px; height: 21px; font-size: 9px; }
.cb-mana.compact .cb-gem:first-child { margin-left: 0; }
.cb-gem-red   { background: radial-gradient(circle at 38% 32%, #ff7043, #a81010); color: #fff; }
.cb-gem-green { background: radial-gradient(circle at 38% 32%, #66bb6a, #1b5e20); color: #fff; }
.cb-gem-blue  { background: radial-gradient(circle at 38% 32%, #42a5f5, #0d47a1); color: #fff; }
.cb-gem-black { background: radial-gradient(circle at 38% 32%, #9575cd, #1a0030); color: #ccc; }
.cb-gem-white { background: radial-gradient(circle at 38% 32%, #fff9c4, #f9a825); color: #5d4037; }
.cb-gem-colorless {
  background: radial-gradient(circle at 38% 32%, #b0bec5, #455a64); color: #fff;
  font-size: 14px; line-height: 1;
}

/* ── 이미지 ── */
.card-big .cb-image {
  position: relative; width: 100%; height: 168px;
  overflow: hidden; flex-shrink: 0;
}
.card-big .cb-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.card-big .cb-image .cb-emoji-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 64px;
}
.card-big .cb-image::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
  pointer-events: none;
}

/* ── 종류 띠 ── */
.card-big .cb-type-band {
  display: flex; align-items: center; height: 30px; flex-shrink: 0;
  border-top-width: 1.5px; border-top-style: solid;
  border-bottom-width: 1.5px; border-bottom-style: solid;
}
.card-big .cb-type-label {
  width: 50%; padding: 0 10px; font-size: 11.5px; font-weight: bold;
  letter-spacing: 1px; display: flex; align-items: center; gap: 5px;
}
.card-big .cb-keywords {
  width: 50%; display: flex; justify-content: flex-end; align-items: center;
  padding-right: 8px; gap: 3px; flex-wrap: nowrap; overflow: hidden;
}
.cb-kw-badge {
  font-size: 10px; font-weight: bold; padding: 2px 7px;
  border-radius: 10px; border-width: 1px; border-style: solid;
  letter-spacing: 0.5px; white-space: nowrap;
}

/* ── 텍스트 영역 ── */
.card-big .cb-text-area {
  flex: 1; padding: 9px 11px 8px;
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
}
.card-big .cb-effect {
  font-size: 10.5px; font-weight: bold; line-height: 1.4;
  padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: dashed;
}
.card-big .cb-effect:empty { display: none; }
.card-big .cb-flavor {
  font-size: 10px; font-style: italic; line-height: 1.5; padding-top: 3px;
}

/* ── 스탯 바 ── */
.card-big .cb-stats {
  height: 36px; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 10px; flex-shrink: 0;
  border-top-width: 2px; border-top-style: solid;
}
.cb-stat-box {
  border-radius: 8px; padding: 3px 12px; font-size: 15px; font-weight: bold;
  letter-spacing: 2px; border-width: 1.5px; border-style: solid;
}

/* ── 색상 테마 ── */
.card-big.color-red {
  background: #1a0303;
  box-shadow: 0 0 0 2px #6b1a1a, 0 0 0 4px #c84040, 0 8px 32px rgba(180,0,0,0.45), 0 2px 8px rgba(0,0,0,0.8);
}
.card-big.color-red .cb-header { background: linear-gradient(135deg,#3a0808 0%,#6b1a1a 40%,#8b2020 60%,#3a0808 100%); border-bottom-color:#c84040; }
.card-big.color-red .cb-name { color:#ffe8d0; text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(255,80,30,0.4); }
.card-big.color-red .cb-image { background:#0a0000; }
.card-big.color-red .cb-image::after { background:linear-gradient(transparent,rgba(58,8,8,0.6)); }
.card-big.color-red .cb-type-band { background:linear-gradient(90deg,#2a0606,#5a1212,#6b1a1a,#5a1212,#2a0606); border-color:#c84040; }
.card-big.color-red .cb-type-label { color:#ffc0a0; }
.card-big.color-red .cb-kw-badge { background:linear-gradient(135deg,#8b0000,#c62828); color:#ffe0d0; border-color:#ff6b6b; }
.card-big.color-red .cb-text-area { background:linear-gradient(180deg,#1a0505,#120303); border-bottom:1px solid #5a1212; }
.card-big.color-red .cb-effect { color:#e8a890; border-bottom-color:#5a2010; }
.card-big.color-red .cb-flavor { color:#a06858; }
.card-big.color-red .cb-stats { background:linear-gradient(135deg,#2a0606,#5a1212,#2a0606); border-top-color:#c84040; }
.card-big.color-red .cb-stat-box { background:linear-gradient(135deg,#1a0303,#3a0808); border-color:#c84040; color:#ffe8d0; }

.card-big.color-blue {
  background: #03051a;
  box-shadow: 0 0 0 2px #1a2d6b, 0 0 0 4px #4060c8, 0 8px 32px rgba(0,40,180,0.45), 0 2px 8px rgba(0,0,0,0.8);
}
.card-big.color-blue .cb-header { background:linear-gradient(135deg,#08103a 0%,#1a2d6b 40%,#2040ab 60%,#08103a 100%); border-bottom-color:#4060c8; }
.card-big.color-blue .cb-name { color:#d0e8ff; text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(40,100,255,0.4); }
.card-big.color-blue .cb-image { background:#00010a; }
.card-big.color-blue .cb-image::after { background:linear-gradient(transparent,rgba(8,16,58,0.6)); }
.card-big.color-blue .cb-type-band { background:linear-gradient(90deg,#060a2a,#121a5a,#1a2d6b,#121a5a,#060a2a); border-color:#4060c8; }
.card-big.color-blue .cb-type-label { color:#a0c8ff; }
.card-big.color-blue .cb-kw-badge { background:linear-gradient(135deg,#0a1a6b,#2040a8); color:#d0e8ff; border-color:#6090ff; }
.card-big.color-blue .cb-text-area { background:linear-gradient(180deg,#050818,#030512); border-bottom:1px solid #121a5a; }
.card-big.color-blue .cb-effect { color:#90b8e8; border-bottom-color:#102050; }
.card-big.color-blue .cb-flavor { color:#6080a0; }
.card-big.color-blue .cb-stats { background:linear-gradient(135deg,#060a2a,#121a5a,#060a2a); border-top-color:#4060c8; }
.card-big.color-blue .cb-stat-box { background:linear-gradient(135deg,#03051a,#0a103a); border-color:#4060c8; color:#d0e8ff; }

.card-big.color-green {
  background: #031a06;
  box-shadow: 0 0 0 2px #1a4a1a, 0 0 0 4px #3fb950, 0 8px 32px rgba(0,120,30,0.45), 0 2px 8px rgba(0,0,0,0.8);
}
.card-big.color-green .cb-header { background:linear-gradient(135deg,#082808 0%,#1a4a1a 40%,#2a6a2a 60%,#082808 100%); border-bottom-color:#3fb950; }
.card-big.color-green .cb-name { color:#d0ffd8; text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(30,180,60,0.4); }
.card-big.color-green .cb-image { background:#000a00; }
.card-big.color-green .cb-image::after { background:linear-gradient(transparent,rgba(8,40,8,0.6)); }
.card-big.color-green .cb-type-band { background:linear-gradient(90deg,#062806,#125a12,#1a4a1a,#125a12,#062806); border-color:#3fb950; }
.card-big.color-green .cb-type-label { color:#a0e0a8; }
.card-big.color-green .cb-kw-badge { background:linear-gradient(135deg,#0a5a0a,#1a8a1a); color:#d0ffd8; border-color:#60e060; }
.card-big.color-green .cb-text-area { background:linear-gradient(180deg,#050f05,#030803); border-bottom:1px solid #125a12; }
.card-big.color-green .cb-effect { color:#90e098; border-bottom-color:#103a10; }
.card-big.color-green .cb-flavor { color:#608060; }
.card-big.color-green .cb-stats { background:linear-gradient(135deg,#062806,#125a12,#062806); border-top-color:#3fb950; }
.card-big.color-green .cb-stat-box { background:linear-gradient(135deg,#031a06,#0a3a0a); border-color:#3fb950; color:#d0ffd8; }

.card-big.color-black {
  background: #0a0a0f;
  box-shadow: 0 0 0 2px #2a2a3a, 0 0 0 4px #8878aa, 0 8px 32px rgba(30,20,50,0.8), 0 2px 8px rgba(0,0,0,0.9);
}
.card-big.color-black .cb-header { background:linear-gradient(135deg,#0a0a14 0%,#1a1a2a 40%,#2a2040 60%,#0a0a14 100%); border-bottom-color:#8878aa; }
.card-big.color-black .cb-name { color:#e8d8ff; text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(100,60,180,0.4); }
.card-big.color-black .cb-image { background:#050508; }
.card-big.color-black .cb-image::after { background:linear-gradient(transparent,rgba(10,10,20,0.8)); }
.card-big.color-black .cb-type-band { background:linear-gradient(90deg,#0a0a14,#181828,#22203a,#181828,#0a0a14); border-color:#8878aa; }
.card-big.color-black .cb-type-label { color:#c0b0e0; }
.card-big.color-black .cb-kw-badge { background:linear-gradient(135deg,#1a1030,#2a1848); color:#e0d0ff; border-color:#9070cc; }
.card-big.color-black .cb-text-area { background:linear-gradient(180deg,#090910,#060609); border-bottom:1px solid #181828; }
.card-big.color-black .cb-effect { color:#c0a8e8; border-bottom-color:#1a1030; }
.card-big.color-black .cb-flavor { color:#8060a8; }
.card-big.color-black .cb-stats { background:linear-gradient(135deg,#0a0a14,#181828,#0a0a14); border-top-color:#8878aa; }
.card-big.color-black .cb-stat-box { background:linear-gradient(135deg,#0a0a0f,#14122a); border-color:#8878aa; color:#e8d8ff; }

.card-big.color-white {
  background: #1a1a0a;
  box-shadow: 0 0 0 2px #4a4a1a, 0 0 0 4px #c8c040, 0 8px 32px rgba(180,160,0,0.4), 0 2px 8px rgba(0,0,0,0.8);
}
.card-big.color-white .cb-header { background:linear-gradient(135deg,#2a2808 0%,#4a4a1a 40%,#6a6030 60%,#2a2808 100%); border-bottom-color:#c8c040; }
.card-big.color-white .cb-name { color:#ffffd0; text-shadow:0 1px 4px rgba(0,0,0,0.9),0 0 8px rgba(200,180,0,0.4); }
.card-big.color-white .cb-image { background:#0a0a00; }
.card-big.color-white .cb-image::after { background:linear-gradient(transparent,rgba(40,40,8,0.6)); }
.card-big.color-white .cb-type-band { background:linear-gradient(90deg,#282808,#4a4a12,#5a5820,#4a4a12,#282808); border-color:#c8c040; }
.card-big.color-white .cb-type-label { color:#e8e890; }
.card-big.color-white .cb-kw-badge { background:linear-gradient(135deg,#5a5a10,#888830); color:#ffffd0; border-color:#d8d060; }
.card-big.color-white .cb-text-area { background:linear-gradient(180deg,#141408,#0e0e05); border-bottom:1px solid #4a4a12; }
.card-big.color-white .cb-effect { color:#e8e890; border-bottom-color:#3a3a08; }
.card-big.color-white .cb-flavor { color:#a0a060; }
.card-big.color-white .cb-stats { background:linear-gradient(135deg,#282808,#4a4a12,#282808); border-top-color:#c8c040; }
.card-big.color-white .cb-stat-box { background:linear-gradient(135deg,#1a1a0a,#323214); border-color:#c8c040; color:#ffffd0; }

.card-big.color-multi {
  background: #0e0e18;
  box-shadow: 0 0 0 2px #3a2a1a, 0 0 0 4px #c09040, 0 8px 32px rgba(120,80,0,0.5), 0 2px 8px rgba(0,0,0,0.8);
}
.card-big.color-multi .cb-header { background:linear-gradient(135deg,#1a1206 0%,#3a2a0e 40%,#5a3a10 60%,#1a1206 100%); border-bottom-color:#c09040; }
.card-big.color-multi .cb-name { color:#ffe8b0; text-shadow:0 1px 4px rgba(0,0,0,0.9); }
.card-big.color-multi .cb-image { background:#080600; }
.card-big.color-multi .cb-image::after { background:linear-gradient(transparent,rgba(26,18,6,0.6)); }
.card-big.color-multi .cb-type-band { background:linear-gradient(90deg,#1a1206,#3a2a0e,#5a3a10,#3a2a0e,#1a1206); border-color:#c09040; }
.card-big.color-multi .cb-type-label { color:#e8c880; }
.card-big.color-multi .cb-kw-badge { background:linear-gradient(135deg,#3a2a08,#6a4a10); color:#ffe8b0; border-color:#d0a040; }
.card-big.color-multi .cb-text-area { background:linear-gradient(180deg,#0e0c08,#0a0805); border-bottom:1px solid #3a2a0e; }
.card-big.color-multi .cb-effect { color:#e8c880; border-bottom-color:#2a1e08; }
.card-big.color-multi .cb-flavor { color:#a08840; }
.card-big.color-multi .cb-stats { background:linear-gradient(135deg,#1a1206,#3a2a0e,#1a1206); border-top-color:#c09040; }
.card-big.color-multi .cb-stat-box { background:linear-gradient(135deg,#0e0e18,#1e1a08); border-color:#c09040; color:#ffe8b0; }

/* ══════════════════════════════════════════
   카드 등급(Grade) 스타일
══════════════════════════════════════════ */
.grade-badge {
  display:inline-block; padding:1px 7px; border-radius:8px; font-size:10px; font-weight:bold;
  letter-spacing:0.5px; border:1px solid; margin-left:4px;
}
.grade-common   { color:#aaaaaa; border-color:#555; background:#1a1a1a; }
.grade-uncommon { color:#3fb950; border-color:#3fb950; background:#0d2010; }
.grade-rare     { color:#58a6ff; border-color:#58a6ff; background:#0d1a30; }
.grade-legacy   { color:#d29922; border-color:#d29922; background:#1a1200;
  box-shadow: 0 0 6px #d2992244; }

/* ══════════════════════════════════════════
   카드 도감 (Collection) 화면
══════════════════════════════════════════ */
#screen-collection { flex-direction:column; }

/* Row 1: 등급별/마나별 + 전체/보유만 */
.collection-mode-row {
  display:flex; gap:6px; flex-wrap:wrap; padding:6px 0 4px; align-items:center;
}
.coll-row-label  { font-size:11px; color:#8b949e; margin-right:4px; }
.coll-row-spacer { flex:1; }
.coll-mode-btn, .coll-own-btn {
  padding:4px 10px; border-radius:14px; border:1px solid #30363d;
  background:#21262d; color:#8b949e; font-size:11px; cursor:pointer; transition:.15s;
}
.coll-mode-btn.active { background:#2d333b; color:#ffd700; border-color:#ffd700; }
.coll-own-btn.active  { background:#2d333b; color:#3fb950; border-color:#3fb950; }

.collection-filter-row {
  display:flex; gap:6px; flex-wrap:wrap; padding:2px 0 10px; align-items:center;
}
/* 한 줄 강제용 — 등급/마나 필터 전용. 좁은 화면에서 가로 스크롤 허용 */
.collection-filter-row.coll-filter-row-compact {
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:5px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.collection-filter-row.coll-filter-row-compact .coll-filter-btn {
  padding:4px 8px; font-size:10.5px; flex-shrink:0; white-space:nowrap;
}
.coll-filter-btn {
  padding:4px 12px; border-radius:14px; border:1px solid #30363d;
  background:#21262d; color:#8b949e; font-size:11px; cursor:pointer; transition:.15s;
}
.coll-filter-btn.active { background:#2d333b; color:#e6edf3; border-color:#58a6ff; }
.collection-grid {
  display:grid;
  /* 가로 4칸 고정 — 모든 폭에서 동일 */
  grid-template-columns:repeat(4, 1fr);
  /* row 자동 = 카드 본래 높이(aspect-ratio) 유지 → 세로로 겹치지 않음 */
  grid-auto-rows:auto;
  gap:8px;
  /* 부모 flex 안에서 남은 영역만 차지 + 넘치면 세로 스크롤 */
  flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding-bottom:16px;
  align-content:start;
}
.coll-card-item {
  position:relative; border-radius:10px;
  /* card-tile 자체가 마나색 box-shadow를 가지므로 외곽 테두리는 투명 처리 */
  border:2px solid transparent;
  background:transparent; overflow:visible; cursor:pointer;
  transition:.2s;
  display:flex; flex-direction:column;
  width:100%; min-width:0; align-self:start;
}
.coll-card-item .card.card-tile { width: 100%; }
.coll-card-item:hover { transform:translateY(-3px); }
/* (구) 등급별 둘레 색 — 호환용. 새 코드에선 mana-*-border 사용 */
.coll-card-item.grade-common-border  { border-color:#555; }
.coll-card-item.grade-uncommon-border{ border-color:#3fb950; }
.coll-card-item.grade-rare-border    { border-color:#58a6ff; box-shadow:0 0 8px #58a6ff22; }
.coll-card-item.grade-legacy-border  { border-color:#d29922; box-shadow:0 0 10px #d2992244; }
/* (신) 마나별 둘레 색 */
.coll-card-item.mana-red-border   { border-color:#f85149; box-shadow:0 0 6px #f8514922; }
.coll-card-item.mana-green-border { border-color:#3fb950; box-shadow:0 0 6px #3fb95022; }
.coll-card-item.mana-blue-border  { border-color:#58a6ff; box-shadow:0 0 6px #58a6ff22; }
.coll-card-item.mana-white-border { border-color:#e6c84a; box-shadow:0 0 6px #e6c84a22; }
.coll-card-item.mana-black-border { border-color:#a5a5a5; box-shadow:0 0 6px #a5a5a522; }
.coll-card-item.mana-none-border  { border-color:#30363d; }
.coll-card-item.not-owned { opacity:0.35; filter:grayscale(1); }
.coll-card-item.not-owned .card.card-tile { box-shadow:0 0 0 1.5px #30363d, 0 0 0 3px #21262d, 0 4px 12px rgba(0,0,0,0.5) !important; }
.coll-card-img { width:100%; flex:1; object-fit:cover; }
.coll-card-name {
  font-size:9px; color:#c9d1d9; text-align:center; padding:2px 2px 0;
  line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.coll-card-count {
  position:absolute; top:4px; right:4px;
  background:#0d1117dd; border-radius:8px; padding:1px 6px;
  font-size:11px; font-weight:bold; color:#e6edf3; border:1px solid #30363d;
  z-index: 5; pointer-events: none;
}
.coll-card-grade-dot {
  position:absolute; bottom:18px; left:3px; font-size:8px;
}
.coll-stats-bar {
  display:flex; gap:12px; padding:8px 4px; flex-wrap:wrap; font-size:11px; color:#8b949e;
}
.coll-stat { display:flex; align-items:center; gap:4px; }

/* ══════════════════════════════════════════
   카드 뽑기 애니메이션 오버레이
══════════════════════════════════════════ */
#card-draw-overlay {
  position:fixed; inset:0; background:#000000ee;
  z-index:9000; display:none; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
}
#card-draw-overlay.active { display:flex; }
.card-draw-bg-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, #1a2a4a88 0%, transparent 70%);
}
.card-draw-title {
  font-size:22px; font-weight:bold; color:#e6edf3; margin-bottom:8px;
  text-shadow:0 0 20px #58a6ff88; letter-spacing:2px;
}
.card-draw-subtitle {
  font-size:13px; color:#8b949e; margin-bottom:24px;
}
.card-draw-progress {
  font-size:12px; color:#58a6ff; margin-bottom:20px; letter-spacing:1px;
}
/* 카드 뒤집기 씬 — card-big(280×400) 기준 0.6배 스케일 → 168×240 */
.card-flip-scene {
  width:168px; height:240px; perspective:900px; margin-bottom:20px; flex-shrink:0;
}
.card-flip-inner {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d;
  transition:transform 0.65s cubic-bezier(.4,0,.2,1);
}
.card-flip-inner.flipped { transform:rotateY(180deg); }
.card-flip-front, .card-flip-back {
  position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; overflow:hidden;
}
.card-flip-back {
  background:#0a0e1a;
  display:flex; align-items:center; justify-content:center;
}
.card-flip-back img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
/* 앞면: card-big 을 0.6배 축소하여 표시 */
.card-flip-front {
  transform:rotateY(180deg);
  overflow:hidden; border-radius:14px;
  display:flex; align-items:flex-start; justify-content:flex-start;
}
.card-flip-front .card-big {
  transform: scale(0.6);
  transform-origin: top left;
  width: 280px !important;
  height: 400px !important;
  flex-shrink: 0;
  cursor: default;
}
.card-flip-front .card-big:hover { transform: scale(0.6) !important; }
/* grade glow on flip scene */
.card-flip-scene.grade-uncommon-glow .card-flip-inner { filter: drop-shadow(0 0 10px #3fb95055); }
.card-flip-scene.grade-rare-glow    .card-flip-inner { filter: drop-shadow(0 0 14px #58a6ff66); }
.card-flip-scene.grade-legacy-glow  .card-flip-inner { filter: drop-shadow(0 0 20px #d2992288); }

.card-draw-btn {
  padding:10px 32px; border-radius:20px; border:none;
  font-size:15px; font-weight:bold; cursor:pointer;
  transition:.2s; letter-spacing:1px;
  background:linear-gradient(135deg,#1a3a6a,#2a5a9a);
  color:#e6edf3; border:1px solid #58a6ff88;
  box-shadow:0 0 16px #58a6ff33;
}
.card-draw-btn:hover { background:linear-gradient(135deg,#2a4a7a,#3a6aaa); transform:scale(1.04); }
.card-draw-btn:disabled { opacity:0.5; cursor:default; transform:none; }
.card-draw-btn.btn-finish {
  background:linear-gradient(135deg,#1a4a1a,#2a7a2a);
  border-color:#3fb95088; box-shadow:0 0 16px #3fb95033;
}
.card-draw-btn.btn-skip {
  font-size:13px; padding:8px 20px;
  background:linear-gradient(135deg,#2a1a3a,#4a2a6a);
  border-color:#9b59b688; box-shadow:0 0 16px #9b59b633;
}

/* ── 카드 30장 뽑기 — "한번에 뽑기" 결과 그리드 (손패 hand-card 75×122 기준) ── */
.card-draw-all-grid {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 480px;
  max-height: 60vh;
  margin: 12px auto;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  background: rgba(0,0,0,0.35);
  border: 1px solid #30363d;
  border-radius: 12px;
}
.card-draw-all-grid.visible {
  display: flex;
}
.card-draw-all-grid .hand-card,
.card-draw-all-grid .card-draw-mini {
  flex: 0 0 auto;
  cursor: default;
}
/* 30장 그리드가 보일 때 overlay 자체도 세로 스크롤 허용 (버튼이 가려지지 않도록) */
#card-draw-overlay:has(.card-draw-all-grid.visible) {
  justify-content: flex-start;
  padding: 20px 8px;
  overflow-y: auto;
}