/* ===== 骑砍 2D · 中世纪羊皮纸风 UI ===== */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

:root {
  --ink: #191410;
  --ink-2: #241c15;
  --parchment: #e6d6ae;
  --parchment-2: #d8c491;
  --paper-edge: #b39a63;
  --gold: #c9a227;
  --gold-dim: #8a7222;
  --blood: #8c2f28;
  --iron: #7a7e85;
  --text-dim: #cdbd97;
  --good: #5f7d3a;
}

html, body { height: 100%; overflow: hidden; background: var(--ink); }
body {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  color: var(--parchment);
}
#app { position: fixed; inset: 0; }

.screen { position: absolute; inset: 0; }
.hidden { display: none !important; }
canvas { display: block; }

/* ===== 顶栏 ===== */
.hud-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; pointer-events: none; z-index: 5;
}
.hud-left, .hud-right { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.hud-chip {
  background: rgba(20, 15, 10, .82);
  border: 1px solid rgba(201, 162, 39, .35);
  color: var(--text-dim);
  padding: 5px 12px; border-radius: 3px; font-size: 15px; letter-spacing: 1px;
}
.hud-chip b { color: var(--parchment); font-size: 16px; margin-left: 2px; }
.gold-chip b { color: var(--gold); }
.icon-btn {
  background: rgba(20, 15, 10, .82); color: var(--gold);
  border: 1px solid rgba(201, 162, 39, .35); border-radius: 3px;
  width: 34px; height: 30px; font-size: 16px; cursor: pointer;
}
.icon-btn.off { color: #665; text-decoration: line-through; }

/* ===== 按钮 ===== */
button { font-family: inherit; }
.big-btn {
  background: linear-gradient(180deg, #d8b93f, #a8831c);
  color: #241a06; border: 1px solid #6d5410; border-radius: 4px;
  font-size: 22px; letter-spacing: 6px; padding: 14px 46px; cursor: pointer;
  box-shadow: 0 3px 0 #58430c, 0 6px 18px rgba(0,0,0,.5);
}
.big-btn:hover { filter: brightness(1.08); }
.big-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #58430c; }
.ghost-btn {
  background: transparent; color: var(--text-dim);
  border: 1px solid rgba(201,162,39,.4); border-radius: 4px;
  font-size: 16px; letter-spacing: 3px; padding: 9px 30px; cursor: pointer;
}
.ghost-btn:hover { color: var(--parchment); border-color: var(--gold); }

.nav-btn {
  background: rgba(20, 15, 10, .85); color: var(--parchment);
  border: 1px solid rgba(201, 162, 39, .45); border-radius: 4px;
  font-size: 17px; letter-spacing: 4px; padding: 10px 26px; cursor: pointer;
}
.nav-btn:hover { background: rgba(50, 38, 20, .9); border-color: var(--gold); }

/* ===== 开始页 ===== */
#screen-title { display: flex; align-items: center; justify-content: center; }
#titleCanvas { position: absolute; inset: 0; }
.title-box { position: relative; text-align: center; padding-bottom: 4vh; }
.title-sub { font-size: 20px; letter-spacing: 12px; color: var(--text-dim); margin-bottom: 8px; }
.title-main {
  font-size: 92px; letter-spacing: 18px; color: var(--parchment);
  text-shadow: 0 0 30px rgba(201,162,39,.35), 0 4px 0 rgba(0,0,0,.6);
  margin-bottom: 10px;
}
.title-desc { font-size: 17px; letter-spacing: 5px; color: var(--gold); margin-bottom: 42px; }
.title-box .big-btn { display: block; margin: 0 auto 16px; }
.title-box .ghost-btn { display: block; margin: 0 auto; }
.title-tip { margin-top: 34px; font-size: 13px; color: #7a6a4d; letter-spacing: 2px; }

/* ===== 大地图 ===== */
#mapCanvas { position: absolute; inset: 0; cursor: crosshair; }
.map-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 12px; background: linear-gradient(0deg, rgba(12,9,6,.9), transparent);
}
.map-hint { font-size: 13px; color: #8d7c58; letter-spacing: 2px; margin-left: 14px; }

/* ===== 战斗 ===== */
#battleCanvas { position: absolute; inset: 0; }
.battle-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 12px 16px;
}
.player-status { width: 300px; }
.hp-bar {
  position: relative; height: 20px; border: 1px solid rgba(201,162,39,.5);
  background: rgba(10,8,5,.8); border-radius: 3px; overflow: hidden;
}
#playerHpFill {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #7d9b46, #59712c);
  transition: width .15s;
}
#playerHpFill.low { background: linear-gradient(180deg, #b0492f, #7e2f1e); }
.hp-bar span {
  position: absolute; inset: 0; text-align: center; font-size: 13px;
  line-height: 20px; color: #f4ecd4; text-shadow: 0 1px 2px #000;
}
.status-row { display: flex; gap: 14px; margin-top: 6px; font-size: 14px; color: var(--text-dim); }
.status-row span { background: rgba(20,15,10,.8); padding: 3px 10px; border-radius: 3px; border: 1px solid rgba(201,162,39,.25); }
.order-group { display: flex; gap: 8px; }
.order-btn {
  background: rgba(20,15,10,.85); color: var(--text-dim);
  border: 1px solid rgba(201,162,39,.3); border-radius: 4px;
  font-size: 15px; letter-spacing: 2px; padding: 9px 18px; cursor: pointer;
}
.order-btn.active { color: #241a06; background: var(--gold); border-color: var(--gold); font-weight: bold; }
.banner {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%);
  font-size: 42px; letter-spacing: 14px; color: var(--parchment);
  text-shadow: 0 0 24px rgba(201,162,39,.5), 0 3px 0 rgba(0,0,0,.7);
  z-index: 6; pointer-events: none; text-align: center;
}
.banner small { display: block; font-size: 16px; letter-spacing: 5px; color: var(--gold); margin-top: 8px; }
.battle-help {
  position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: rgba(230,214,174,.45); letter-spacing: 2px; z-index: 4;
  pointer-events: none; transition: opacity 1s;
}
.battle-bottom.spectate { justify-content: center; gap: 22px; }
.ally-chip b { color: #8fb35a; }
.foe-chip b { color: #c96a5a; }
.lord-chip b { color: #c9a227; }
.morale-pair { display: flex; gap: 6px; align-items: center; pointer-events: auto; }
.morale {
  width: 130px; height: 10px; border: 1px solid rgba(201,162,39,.4);
  background: rgba(10,8,5,.8); border-radius: 5px; overflow: hidden;
}
.morale i { display: block; height: 100%; width: 100%; background: #7d9b46; transition: width .3s; }
.morale.foe i { background: #a84a3a; }
.speed-group { display: flex; gap: 8px; }

/* ===== 面板 ===== */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(8, 6, 4, .66);
  display: flex; align-items: center; justify-content: center;
}
.panel {
  width: min(860px, 92vw); max-height: 86vh; overflow-y: auto;
  background:
    linear-gradient(160deg, rgba(60,46,26,.25), transparent 40%),
    linear-gradient(180deg, var(--parchment), var(--parchment-2));
  color: var(--ink-2);
  border: 2px solid var(--paper-edge); border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(20,14,8,.9), 0 18px 60px rgba(0,0,0,.7);
  padding: 26px 30px 30px;
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: var(--paper-edge); border-radius: 4px; }
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid rgba(90, 70, 40, .35); padding-bottom: 10px; margin-bottom: 16px;
}
.panel-title { font-size: 27px; letter-spacing: 5px; color: #3a2c17; }
.panel-sub { font-size: 14px; color: #7d6840; letter-spacing: 1px; }
.panel-close {
  background: #4a3820; color: var(--parchment); border: none; border-radius: 3px;
  font-size: 14px; letter-spacing: 2px; padding: 7px 16px; cursor: pointer;
}
.panel-close:hover { background: #62492a; }
.panel-gold { color: #6d5410; font-weight: bold; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
  background: rgba(255, 250, 235, .5);
  border: 1px solid rgba(120, 95, 50, .4); border-radius: 4px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 6px;
}
.card h3 { font-size: 18px; color: #33270f; letter-spacing: 2px; }
.card .desc { font-size: 13px; color: #6a5732; line-height: 1.5; }
.card .row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #54431f; }
.card .owned { color: #4d6b2a; font-size: 13px; }
.buy-btn, .act-btn {
  margin-top: 4px; background: #4a3820; color: var(--parchment);
  border: 1px solid #2e2210; border-radius: 3px;
  font-size: 14px; letter-spacing: 2px; padding: 8px 10px; cursor: pointer;
}
.buy-btn:hover, .act-btn:hover { background: #62492a; }
.buy-btn:disabled, .act-btn:disabled { background: #9c8f6e; color: #d8cdb2; cursor: not-allowed; }
.act-btn.danger { background: #6e2a22; border-color: #4a1a14; }
.act-btn.danger:hover { background: #8c352a; }

.troop-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,250,235,.45); border: 1px solid rgba(120,95,50,.35);
  border-radius: 4px; padding: 10px 14px; margin-bottom: 8px; font-size: 15px;
}
.troop-row .t-name { width: 110px; font-size: 17px; color: #33270f; letter-spacing: 1px; }
.troop-row .t-count { width: 64px; color: #54431f; }
.troop-row .t-xp { flex: 1; height: 10px; background: rgba(60,45,20,.25); border-radius: 5px; overflow: hidden; }
.troop-row .t-xp i { display: block; height: 100%; background: var(--good); }
.troop-row .t-actions { display: flex; gap: 6px; }
.troop-row button {
  background: #4a3820; color: var(--parchment); border: none; border-radius: 3px;
  font-size: 13px; padding: 6px 12px; cursor: pointer; letter-spacing: 1px;
}
.troop-row button:hover { background: #62492a; }
.troop-row button:disabled { background: #9c8f6e; color: #d8cdb2; cursor: not-allowed; }

.skill-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 4px;
  border-bottom: 1px dashed rgba(120,95,50,.35); font-size: 15px;
}
.skill-row .s-name { width: 130px; font-size: 17px; color: #33270f; }
.skill-row .s-desc { flex: 1; color: #6a5732; font-size: 13px; }
.pips { display: flex; gap: 4px; }
.pips i { width: 16px; height: 16px; border-radius: 2px; background: rgba(60,45,20,.2); border: 1px solid rgba(120,95,50,.4); }
.pips i.on { background: var(--gold); border-color: var(--gold-dim); }

.equip-line { display: flex; justify-content: space-between; padding: 9px 4px; font-size: 15px; border-bottom: 1px dashed rgba(120,95,50,.3); }
.equip-line b { color: #4d3413; }

.panel-foot { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }
.note { font-size: 13px; color: #7d6840; margin-top: 12px; line-height: 1.6; }

/* ===== 结算面板 ===== */
.result-title { font-size: 34px; letter-spacing: 8px; text-align: center; margin-bottom: 6px; }
.result-title.win { color: #4d6b2a; }
.result-title.lose { color: var(--blood); }
.result-sub { text-align: center; color: #7d6840; font-size: 14px; letter-spacing: 2px; margin-bottom: 18px; }
.loot-row {
  display: flex; justify-content: space-between; font-size: 16px;
  padding: 8px 10px; border-bottom: 1px dashed rgba(120,95,50,.35); color: #453517;
}
.loot-row b { color: #6d5410; }

/* ===== Toast ===== */
#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: rgba(20, 15, 10, .92); color: var(--parchment);
  border: 1px solid rgba(201,162,39,.5); border-radius: 4px;
  padding: 10px 26px; font-size: 16px; letter-spacing: 3px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 99;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 开局捏人 ===== */
#screen-create {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(90,60,30,.25), transparent 70%),
    linear-gradient(160deg, #2a2118, #1a1410);
  display: flex; align-items: center; justify-content: center;
}
.create-wrap {
  width: min(860px, 92vw); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(170deg, #e8d9b0, #d9c491 60%, #cbb279);
  border: 2px solid #6d5626; border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 80px rgba(120,90,40,.18);
  padding: 34px 38px;
}
.create-title {
  margin: 0 0 6px; font-size: 34px; letter-spacing: 10px; color: #4a3512;
  font-family: "Kaiti SC","STKaiti",serif; text-align: center;
}
.create-sub { text-align: center; color: #6a5732; font-size: 15px; letter-spacing: 2px; margin-bottom: 22px; }
.create-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.create-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(255,250,235,.55); border: 1.5px solid rgba(109,86,38,.5); border-radius: 5px;
  padding: 14px 16px; transition: all .15s;
}
.create-card:hover { transform: translateY(-3px); border-color: #8a6f1c; box-shadow: 0 8px 18px rgba(60,40,10,.25); background: rgba(255,252,240,.8); }
.create-card h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: 3px; color: #4a3512; font-family: "Kaiti SC",serif; }
.c-desc { font-size: 13px; color: #5c4a26; line-height: 1.6; min-height: 42px; }
.c-bonus { margin-top: 8px; font-size: 13px; color: #8a6f1c; font-weight: bold; }
.c-flag { display: inline-block; width: 26px; height: 16px; border-radius: 2px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.name-input {
  display: block; margin: 6px auto 18px; width: 280px; text-align: center;
  font-size: 22px; font-family: "Kaiti SC",serif; letter-spacing: 4px;
  background: rgba(255,250,235,.7); border: 1.5px solid rgba(109,86,38,.6); border-radius: 4px;
  padding: 10px 14px; color: #3c2d10; outline: none;
}
.name-input:focus { border-color: #8a6f1c; box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.create-summary { text-align: center; color: #6a5732; font-size: 15px; letter-spacing: 2px; margin-bottom: 20px; }
#createStep3 { text-align: center; }

@media (max-width: 760px) {
  .title-main { font-size: 56px; letter-spacing: 10px; }
  .hud-chip { font-size: 12px; padding: 4px 8px; }
  .panel { padding: 18px; }
  .create-wrap { padding: 22px 18px; }
}