/* 昆特牌 · 巫师3 桌面风格：深色木质桌面 + 金色描边 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Songti SC", "STSong", "SimSun", serif;
  color: #e8d9b0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 84, 45, 0.35), transparent 70%),
    repeating-linear-gradient(90deg, #2a1c10 0px, #241809 6px, #2e1f12 12px, #261a0c 18px),
    #241a0e;
  min-width: 1200px;
  min-height: 780px;
  overflow: auto;
  user-select: none;
}

.hidden { display: none !important; }

.screen { min-height: 100vh; }

/* ---------- 标题 / 结算 ---------- */
#screen-title, #screen-end, #screen-first {
  display: flex; align-items: center; justify-content: center;
}
.title-box { text-align: center; padding: 60px 90px; border: 3px double #c9a227; background: rgba(0,0,0,0.45); border-radius: 8px; }
.game-title { font-size: 72px; letter-spacing: 24px; color: #e9c86a; text-shadow: 0 0 24px rgba(201,162,39,0.5), 0 3px 0 #5a4410; margin-bottom: 12px; }
.game-subtitle { font-size: 20px; color: #b09b6d; margin-bottom: 40px; letter-spacing: 6px; }
.end-detail { font-size: 18px; line-height: 2; margin: 10px 0 30px; color: #d8c690; }

.btn {
  font-family: inherit; font-size: 18px; letter-spacing: 4px; cursor: pointer;
  color: #f0dfa8; background: linear-gradient(180deg, #4a3517, #33240e);
  border: 2px solid #c9a227; border-radius: 6px; padding: 10px 34px;
  transition: all .15s;
}
.btn:hover { background: linear-gradient(180deg, #5d431c, #3f2c11); box-shadow: 0 0 14px rgba(201,162,39,0.45); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn-big { font-size: 24px; padding: 14px 52px; }

.screen-title { text-align: center; font-size: 34px; color: #e9c86a; letter-spacing: 12px; padding: 36px 0 10px; }

/* ---------- 阵营选择 ---------- */
.faction-list { display: flex; justify-content: center; gap: 28px; padding: 40px; }
.faction-card {
  width: 220px; padding: 28px 18px; cursor: pointer; text-align: center;
  border: 2px solid #8a6d2f; border-radius: 10px;
  background: linear-gradient(180deg, rgba(60,42,18,0.9), rgba(30,20,8,0.9));
  transition: all .18s;
}
.faction-card:hover { transform: translateY(-8px); border-color: #e9c86a; box-shadow: 0 8px 30px rgba(201,162,39,0.35); }
.faction-card .f-icon { font-size: 52px; margin-bottom: 14px; }
.faction-card h3 { font-size: 24px; color: #e9c86a; letter-spacing: 6px; margin-bottom: 6px; }
.faction-card .f-leader { font-size: 14px; color: #a08c5c; margin-bottom: 12px; }
.faction-card .f-skill { font-size: 14px; line-height: 1.7; color: #d8c690; min-height: 48px; }

/* ---------- 换牌 ---------- */
.mulligan-tip { text-align: center; font-size: 17px; color: #cbb57f; margin: 8px 0 18px; }
.mulligan-hand { justify-content: center; margin-bottom: 26px; }
#btn-mulligan-ok { display: block; margin: 0 auto; }
#screen-first .btn { margin: 10px 14px 0; }

/* ---------- 对战桌面 ---------- */
#screen-game { padding: 8px 18px 12px; }

.player-bar {
  display: flex; align-items: center; gap: 22px;
  padding: 6px 16px; border: 1px solid #6b5326; border-radius: 8px;
  background: rgba(0,0,0,0.4); margin: 4px 0;
  font-size: 15px;
}
.player-bar .pb-name { font-size: 18px; color: #e9c86a; letter-spacing: 2px; }
.player-bar .pb-score { font-size: 26px; color: #fff; font-weight: bold; min-width: 48px; text-align: center;
  background: radial-gradient(circle, rgba(201,162,39,0.35), transparent 70%); border-radius: 50%; }
.player-bar .pb-gems { font-size: 18px; letter-spacing: 3px; }
.player-bar .pb-leader { color: #a08c5c; }
.player-bar .pb-leader.used { text-decoration: line-through; opacity: 0.5; }
.player-bar.active-turn { border-color: #e9c86a; box-shadow: 0 0 12px rgba(233,200,106,0.25); }

.row {
  display: flex; align-items: center; gap: 8px;
  min-height: 92px; padding: 4px 8px; margin: 3px 0;
  border: 1px solid rgba(107,83,38,0.55); border-radius: 8px;
  background: rgba(0,0,0,0.22);
  transition: all .15s;
}
.row.target { border-color: #ffd75e; background: rgba(201,162,39,0.14); box-shadow: inset 0 0 18px rgba(255,215,94,0.25); cursor: pointer; }
.row.weather-hit { background: rgba(90,120,160,0.14); }
.row-score {
  width: 52px; text-align: center; font-size: 26px; font-weight: bold; color: #f5e7bd;
  border-right: 1px solid #6b5326; padding-right: 6px;
}
.row-label { width: 44px; font-size: 13px; color: #8f7b4e; text-align: center; line-height: 1.3; }
.horn-slot {
  width: 46px; height: 78px; border: 1px dashed #6b5326; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #6b5326;
  flex-shrink: 0;
}
.horn-slot.filled { border-style: solid; border-color: #c9a227; color: #e9c86a; background: rgba(201,162,39,0.12); }
.row-cards { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 80px; }

/* 中间栏 */
.midbar {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 16px; margin: 6px 0;
  border-top: 2px solid #c9a227; border-bottom: 2px solid #c9a227;
  background: rgba(0,0,0,0.5); border-radius: 4px;
}
.weather-zone { min-width: 130px; font-size: 26px; letter-spacing: 4px; }
.weather-zone .wz-empty { font-size: 13px; color: #6f5e3a; letter-spacing: 2px; }
.turn-info { font-size: 20px; color: #ffd75e; letter-spacing: 3px; min-width: 190px; }
.piles { font-size: 14px; color: #a08c5c; line-height: 1.5; }
.logline { flex: 1; font-size: 14px; color: #9db3c9; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- 卡牌 ---------- */
.card {
  position: relative;
  width: 74px; height: 102px; flex-shrink: 0;
  border: 2px solid #8a6d2f; border-radius: 7px;
  background: linear-gradient(160deg, #3b2c16, #221607);
  cursor: pointer; padding: 4px;
  transition: transform .15s, box-shadow .15s;
  animation: cardIn .25s ease-out;
}
@keyframes cardIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.row-cards .card { width: 58px; height: 80px; cursor: default; }
.row-cards .card.selectable { cursor: pointer; border-color: #ffd75e; box-shadow: 0 0 10px rgba(255,215,94,0.6); }
.card.hero { background: linear-gradient(160deg, #6e5416, #3d2c08); border-color: #e9c86a; }
.card.f-northern { box-shadow: inset 0 -18px 24px rgba(60,110,200,0.28); }
.card.f-nilfgaard { box-shadow: inset 0 -18px 24px rgba(30,30,30,0.55); }
.card.f-scoiatael { box-shadow: inset 0 -18px 24px rgba(50,150,70,0.28); }
.card.f-monsters { box-shadow: inset 0 -18px 24px rgba(180,40,40,0.30); }
.card.weather-card { background: linear-gradient(160deg, #2c3a4a, #141d28); }
.card.special-card { background: linear-gradient(160deg, #4a2432, #26101a); }
.hand .card:hover { transform: translateY(-14px) scale(1.12); box-shadow: 0 10px 26px rgba(0,0,0,0.7); z-index: 5; }
.card.selected { border-color: #ffd75e; box-shadow: 0 0 16px rgba(255,215,94,0.75); transform: translateY(-10px); }

.card .str {
  position: absolute; top: -6px; left: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4e3ae, #b8933d);
  color: #241a06; font-size: 15px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #6b5326; z-index: 2;
}
.card .str.buffed { background: radial-gradient(circle at 35% 30%, #d2f0b0, #5a9e2e); }
.card .str.nerfed { background: radial-gradient(circle at 35% 30%, #f0b0b0, #9e2e2e); color: #fff; }
.card .cname {
  margin-top: 30px; font-size: 12px; line-height: 1.25; text-align: center;
  color: #efe2b8; overflow: hidden; height: 44px;
}
.row-cards .card .cname { margin-top: 22px; font-size: 10px; height: 34px; }
.card .icons { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 12px; }
.card .rowtag { position: absolute; top: 2px; right: 4px; font-size: 11px; color: #b09b6d; }

/* ---------- 手牌 ---------- */
.hand { display: flex; gap: 6px; padding: 10px 6px 4px; justify-content: flex-start; min-height: 118px; flex-wrap: nowrap; overflow-x: auto; }
.hand-title { font-size: 13px; color: #8f7b4e; padding: 4px 8px 0; letter-spacing: 2px; }

/* ---------- 预览面板 ---------- */
#preview {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
  width: 220px; padding: 18px; z-index: 60; pointer-events: none;
  border: 2px solid #e9c86a; border-radius: 10px;
  background: linear-gradient(165deg, rgba(50,36,15,0.97), rgba(24,16,6,0.97));
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
}
#preview .pv-str { font-size: 34px; color: #ffd75e; font-weight: bold; }
#preview h3 { font-size: 20px; color: #e9c86a; margin: 6px 0; }
#preview .pv-meta { font-size: 13px; color: #a08c5c; margin-bottom: 8px; }
#preview .pv-icons { font-size: 20px; margin-bottom: 8px; }
#preview .pv-desc { font-size: 14px; line-height: 1.7; color: #d8c690; }

/* ---------- 横幅 ---------- */
#banner {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 80; padding: 22px 60px; text-align: center;
  font-size: 30px; letter-spacing: 8px; color: #ffe9a8;
  background: rgba(10,6,2,0.92); border: 3px double #c9a227; border-radius: 10px;
  box-shadow: 0 0 60px rgba(0,0,0,0.9);
  animation: bannerIn .3s ease-out;
  white-space: pre-line; line-height: 1.8;
}
@keyframes bannerIn { from { transform: translate(-50%,-46%) scale(0.9); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }