/* 炉石卡组图片批量生成器 Web 版 — 暗色主题 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #0b1120;
  color: #e8ecf4;
  min-height: 100vh;
  padding: 24px 16px;
}

.container { max-width: 900px; margin: 0 auto; }

/* ---------- 头部 ---------- */
.header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #14203a, #182848);
  border: 1px solid #26304a;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.header-icon {
  width: 56px; height: 56px;
  border-radius: 10px;
  object-fit: cover;
}
.header h1 { font-size: 22px; color: #fff; letter-spacing: 1px; }
.subtitle { color: #9aa7c2; font-size: 13px; margin-top: 4px; }

/* ---------- 右上角：更新最新卡牌数据 ---------- */
.header-update {
  margin-left: auto;
  max-width: 340px;
  min-width: 240px;
  text-align: right;
}
.upd-info {
  font-size: 12px;
  color: #9aa7c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.upd-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.upd-btn { padding: 6px 14px; font-size: 13px; }
.header-update .bar { height: 10px; margin-top: 6px; }
.upd-text {
  font-size: 11px;
  color: #b9c4d9;
  margin-top: 4px;
  min-height: 16px;
  text-align: right;
  word-break: break-all;
}

/* ---------- 面板 ---------- */
.panel {
  background: #141c2c;
  border: 1px solid #26304a;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 16px;
  color: #ffc83c;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.panel-title .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #ffc83c; color: #241c00;
  border-radius: 50%;
  font-size: 13px; font-weight: bold;
}

/* ---------- 拖拽区 ---------- */
.dropzone {
  border: 2px dashed #3a4870;
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 14px;
  background: #0f1728;
}
.dropzone:hover, .dropzone.drag { border-color: #ffc83c; background: #16203a; }
.dz-icon { font-size: 34px; }
.dz-text { font-size: 15px; color: #e8ecf4; margin-top: 6px; }
.dz-sub { font-size: 12px; color: #7d8bab; margin-top: 6px; }
.dropzone.has-file { border-style: solid; border-color: #4ade80; }
.dropzone.has-file .dz-text { color: #4ade80; }

/* ---------- 行 / 按钮 ---------- */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hint { color: #7d8bab; font-size: 12px; }
.hint.ok { color: #4ade80; font-weight: bold; }
.hint.err { color: #f87171; font-weight: bold; }

.check { display: flex; align-items: center; gap: 8px; color: #c9d3e6; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: #ffc83c; }

.btn {
  background: #22304c;
  border: 1px solid #33436a;
  color: #e8ecf4;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover:not(:disabled) { background: #2c3d61; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: #ffc83c; color: #241c00; font-weight: bold; border: none; }
.btn.primary:hover:not(:disabled) { background: #ffd75e; }
.btn.danger { background: #7c2d2d; border-color: #a03a3a; font-weight: bold; }
.btn.danger:hover:not(:disabled) { background: #964141; }
.btn.ghost { background: transparent; }

/* ---------- 进度条 ---------- */
.progress-wrap { margin-bottom: 4px; }
.bar {
  height: 20px;
  background: #0c1220;
  border: 1px solid #2a3552;
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb62e, #ffc83c);
  border-radius: 6px;
  transition: width .3s;
}
.bar-fill.busy {
  width: 100%;
  background: repeating-linear-gradient(45deg, #ffb62e 0 10px, #ffc83c 10px 20px);
  animation: slide 1s linear infinite;
}
@keyframes slide { from { background-position: 0 0; } to { background-position: 28px 0; } }
.bar-text { color: #b9c4d9; font-size: 12px; margin-top: 6px; word-break: break-all; }

/* ---------- 预览 ---------- */
.preview { margin-top: 16px; }
.preview-title { color: #7d8bab; font-size: 12px; margin-bottom: 10px; }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.preview-card {
  background: #0f1728;
  border: 1px solid #2a3552;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: border-color .15s;
}
.preview-card:hover { border-color: #ffc83c; }
.preview-card img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  max-height: 240px;
  object-fit: cover;
  object-position: top;
}
.preview-card .name {
  padding: 6px 8px;
  font-size: 12px;
  color: #c9d3e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-card .name a { color: #ffc83c; text-decoration: none; }
.preview-card .name a:hover { text-decoration: underline; }

/* ---------- 接口 2 ---------- */
.cards-info {
  background: #0f1728;
  border: 1px solid #2a3552;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: #9aa7c2;
  line-height: 1.7;
  margin-bottom: 14px;
  white-space: pre-line;
}

/* ---------- 接口 3：粘贴卡组代码解析 ---------- */
.code-input {
  width: 100%;
  min-height: 130px;
  background: #0f1728;
  border: 1px solid #2a3552;
  border-radius: 8px;
  color: #e8ecf4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
  margin-bottom: 14px;
  resize: vertical;
}
.code-input:focus { outline: none; border-color: #ffc83c; }
.code-input::placeholder { color: #5a6884; }

.text-input {
  width: 100%;
  background: #0f1728;
  border: 1px solid #2a3552;
  border-radius: 8px;
  color: #e8ecf4;
  font-size: 13px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.text-input:focus { outline: none; border-color: #ffc83c; }
.text-input::placeholder { color: #5a6884; }

.code-box { margin-bottom: 12px; }
.code-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.code-box-label { font-size: 12px; color: #9aa7c2; font-weight: bold; }
.box-remove { padding: 2px 8px; font-size: 12px; }
.code-box .code-input { margin-bottom: 0; }

.manual-decks {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  align-items: flex-start;
  margin-top: 6px;
  padding-bottom: 8px;
}
.deck-block {
  flex: 0 0 auto;
  width: fit-content;
  min-width: 200px;
  max-width: 92vw;
  background: #0f1728;
  border: 1px solid #2a3552;
  border-radius: 10px;
  padding: 12px 14px;
}
.deck-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.deck-index { font-size: 13px; font-weight: bold; color: #ffc83c; }
.deck-class { font-size: 13px; color: #e8ecf4; }
.deck-count { font-size: 12px; color: #7d8bab; margin-left: auto; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
/* ===== 卡牌 tile（与锦标赛主站一致，宽度适配卡图比例） ===== */
.card-tile {
  position: relative;
  display: flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  height: 34px;
  line-height: 34px;
  margin: 2px 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: #0d111c;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.card-tile:hover { transform: translateX(2px); filter: brightness(1.12); }
.card-tile-sub { height: 30px; line-height: 30px; margin: 1px 0; }

.card-tile .card-gem {
  flex: 0 0 34px;
  width: 34px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7);
  z-index: 3;
  /* 法力水晶统一官方筛选页水晶图（icon_crystal.png），不随稀有度变化 */
  background: url('/static/gem/icon_crystal.png') center / contain no-repeat;
}
.card-tile .card-frame {
  position: relative;
  flex: 0 0 147px;
  width: 147px;
  height: 100%;
  overflow: hidden;
  /* 让卡图向左伸进水晶宝石的斜边区域，消除宝石与图片之间的缝隙 */
  margin-left: -10px;
}
.card-tile .card-asset {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
/* 卡图左侧深色遮罩：前 35% 实色盖住白条，35%~90% 平滑渐隐 */
.card-tile .card-frame::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  min-width: 46px;
  background: linear-gradient(90deg,
    rgba(10,14,39,1) 0%,
    rgba(10,14,39,1) 38.9%,
    rgba(10,14,39,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.card-tile .card-name {
  position: absolute;
  left: 6px;
  top: 0;
  height: 100%;
  line-height: inherit;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 48px);
  z-index: 2;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
  padding-left: 4px;
  padding-right: 20px;
}
/* 卡名颜色 = 卡牌稀有度颜色 */
.card-tile .card-gem.rarity-free + .card-frame .card-name { color: #9d9d9d; }
.card-tile .card-gem.rarity-common + .card-frame .card-name { color: #c8c8c8; }
.card-tile .card-gem.rarity-rare + .card-frame .card-name { color: #0070dd; }
.card-tile .card-gem.rarity-epic + .card-frame .card-name { color: #a335ee; }
.card-tile .card-gem.rarity-legendary + .card-frame .card-name { color: #ff8000; }
.card-tile .card-countbox {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  background: rgba(0,0,0,0.45);
  z-index: 2;
}
.card-tile .card-fade-countbox {
  position: absolute;
  right: 24px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
}
.card-tile-sub .card-gem { flex-basis: 30px; width: 30px; font-size: 12px; }
.card-tile-sub .card-frame { flex-basis: 130px; width: 130px; margin-left: -9px; }
.card-tile-sub .card-name { font-size: 11px; width: calc(100% - 40px); }
.card-tile-sub .card-countbox { width: 22px; font-size: 12px; }
.card-tile-sub .card-fade-countbox { right: 22px; width: 16px; }

/* 携带卡牌子卡 */
.card-with-sb { break-inside: avoid; }
.sideboard {
  border-top: 1px dashed #2a3552;
  margin-top: 6px;
  padding: 6px 6px 2px;
}
.sideboard-label { font-size: 10px; color: #7d8bab; margin-bottom: 5px; }

/* ---------- 底部 ---------- */
.footer {
  text-align: center;
  color: #5a6884;
  font-size: 12px;
  padding: 8px 0 20px;
}
.footer a { color: #7d8bab; }