* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1b1410; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #e8e0d0;
  user-select: none;
  -webkit-user-select: none;
}
img { image-rendering: pixelated; }
#app { position: relative; width: 100vw; height: 100vh; }
#game { position: absolute; inset: 0; display: block; touch-action: none; }

/* ---------- 小屏适配（手机/窄窗口） ---------- */
@media (max-width: 720px) {
  .game-title { font-size: 34px; }
  .menu-box, .panel-box { padding: 14px 16px; max-width: 94vw; border-width: 10px; }
  .select-title { margin: 4px 0 10px; }
  #char-list { gap: 8px; }
  .char-card { width: 44%; min-width: 128px; padding: 10px 8px; }
  .char-img { width: 56px; height: 56px; }
  .card-list { gap: 8px; }
  .pick-card { width: 44%; min-width: 132px; padding: 10px 8px; }
  .cicon-img, .pick-card > img { width: 40px; height: 40px; }
  .shop-box { min-width: 0; }
  .shop-foot { flex-wrap: wrap; gap: 8px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 6px 14px; max-width: 100%; }
  #hud-timer { font-size: 24px; min-width: 56px; }
  .hud-chip { padding: 4px 10px; font-size: 13px; }
  .wslot, .sslot { width: 32px; height: 32px; }
  .wslot-img { width: 20px; height: 20px; }
  #hud-left { max-width: 200px; }
  #hud-level { font-size: 15px; }
  .btn { padding: 8px 14px; font-size: 14px; }
  .btn.big { font-size: 16px; padding: 10px 20px; }
  #banner { font-size: 26px; letter-spacing: 5px; }
}

.hidden { display: none !important; }

/* ---------- 通用 ---------- */
.btn {
  font: inherit; font-weight: 700; color: #ffe9c4;
  background: #7a4a1e;
  border: 3px solid #3d2410; border-radius: 8px;
  padding: 10px 22px; cursor: pointer;
  box-shadow: 0 4px 0 #3d2410, inset 0 2px 0 rgba(255,220,160,.25);
  transition: transform .06s, box-shadow .06s, filter .1s;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #3d2410; }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }
.btn.big { font-size: 20px; padding: 14px 34px; }
.btn.ghost {
  background: #2a251d; color: #e8e0d0; border-color: #55503f; box-shadow: 0 4px 0 #55503f;
}

.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,14,10,.82), rgba(10,7,5,.95));
}
/* 羊皮纸面板（Kenney ui-pack 边框图） */
.menu-box, .panel-box {
  color: #46331d;
  background: #2a2117;
  border: 14px solid transparent;
  border-image: url("../assets/ui/panel_inset.png") 14 fill stretch;
  border-image-outset: 2px;
  border-radius: 6px;
  padding: 24px 30px; text-align: center; max-width: 920px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.panel-title { font-size: 26px; margin-bottom: 16px; letter-spacing: 2px; text-shadow: 0 1px 0 rgba(255,240,210,.4); }

/* ---------- 主菜单 ---------- */
.game-title { font-size: 50px; letter-spacing: 4px; text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.subtitle { color: #6b5433; letter-spacing: 3px; margin: 6px 0 14px; font-size: 14px; }
.menu-tip { color: #66512f; font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
.select-title { font-size: 17px; color: #5d4a2a; margin: 8px 0 14px; }

#char-list { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.char-card {
  width: 172px; padding: 16px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(0,0,0,.28); border: 3px solid #55503f;
  transition: transform .1s, border-color .1s, background .1s;
}
.char-card:hover { transform: translateY(-4px); border-color: #ffd257; }
.char-card.selected { border-color: #ffd257; background: #3a3120; box-shadow: 0 0 22px rgba(255,210,87,.25); }
.char-card .face { font-size: 46px; }
.char-img { width: 84px; height: 84px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.char-card h3 { font-size: 18px; margin: 8px 0 4px; }
.char-card p { font-size: 12px; color: #b8a884; line-height: 1.6; min-height: 54px; }
.best-record { margin-top: 16px; color: #6b5a3a; font-size: 13px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud-top {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 18px;
}
#hud-timer {
  font-size: 34px; font-weight: 900; color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(0,0,0,.8);
  min-width: 80px; text-align: center;
}
#hud-timer.danger { color: #ff6b5e; animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.hud-chip {
  background: rgba(20,17,12,.75); border: 2px solid #55503f; border-radius: 999px;
  padding: 6px 16px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px;
}
#hud-bottom {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: flex-end; gap: 12px;
}
#hud-left { flex: 1; display: flex; flex-direction: column; gap: 5px; max-width: 340px; }
#hud-hpwrap {
  position: relative; height: 24px; border-radius: 8px; overflow: hidden;
  background: #241f16; border: 2px solid #55503f;
}
#hud-hpbar { height: 100%; width: 100%; background: linear-gradient(#8ee05a, #4f9e33); transition: width .12s; }
#hud-hptext {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000;
}
#hud-xpwrap { height: 9px; border-radius: 6px; background: #241f16; border: 2px solid #55503f; overflow: hidden; }
#hud-xpbar { height: 100%; width: 0%; background: linear-gradient(#63d8ff, #2b7fc9); transition: width .12s; }
#hud-level { font-weight: 900; font-size: 20px; color: #63d8ff; text-shadow: 0 2px 0 #000; }
#hud-weapons { display: flex; gap: 6px; }
#hud-bars { display: flex; gap: 14px; align-items: flex-end; }
#hud-skills { display: flex; gap: 6px; }
.wslot {
  width: 40px; height: 40px; border-radius: 8px; background: rgba(20,17,12,.78);
  border: 2px solid #55503f; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 17px; position: relative;
  overflow: hidden;
}
.wslot-img { width: 26px; height: 26px; }
.tstars { font-size: 8px; letter-spacing: -1px; line-height: 1; }
.sslot {
  width: 40px; height: 40px; border-radius: 8px; background: rgba(20,17,12,.78);
  border: 2px solid #7a6a9e; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.sslot .slv {
  position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: 900;
  color: #fff; text-shadow: 0 1px 2px #000; z-index: 2;
}
.sslot .scd {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(10,8,20,.72); z-index: 1;
}

/* ---------- 升级 / 商店卡片 ---------- */
.card-list { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pick-card {
  width: 196px; padding: 18px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(0,0,0,.3); border: 3px solid var(--rc, #55503f); text-align: center;
  transition: transform .1s, box-shadow .1s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pick-card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.pick-card .cicon { font-size: 40px; }
.cicon-img, .pick-card > img { width: 56px; height: 56px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.pick-card h3 { font-size: 17px; }
.pick-card .cdesc { font-size: 13px; color: #cbbfa4; line-height: 1.55; flex: 1; }
.pick-card .ctier { font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.pick-card .cprice { font-size: 15px; font-weight: 800; color: #ffd257; }
.pick-card.sold { opacity: .38; pointer-events: none; filter: grayscale(.8); }
.pick-card .ctag {
  font-size: 11px; padding: 2px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--rc, #55503f); color: var(--rc, #aaa);
}
.pick-card.disabled { opacity: .45; cursor: not-allowed; }

/* 货币图标（与游戏内掉落物同源） */
.coin { width: 18px; height: 18px; vertical-align: -3px; }
.coin.big { width: 24px; height: 24px; vertical-align: -5px; }
.cprice .coin { width: 15px; height: 15px; vertical-align: -2px; }

/* 属性行图标间距 */
.stat-grid .row > span { display: flex; align-items: center; gap: 6px; }

/* 锁定按钮：文字标签 */
.lock-btn {
  position: absolute; top: -11px; right: -8px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: #2a251d; border: 2px solid #55503f;
  font-size: 11px; font-weight: 800; color: #a89d84;
  cursor: pointer; line-height: 1.2; letter-spacing: 1px;
  transition: transform .08s, border-color .1s, color .1s;
}
.lock-btn:hover { transform: scale(1.08); border-color: #ffd257; color: #e8dcb8; }
.lock-btn.on { border-color: #ffd257; background: #4a3a15; color: #ffd257; }

/* 锁定态卡片 */
.pick-card.locked { box-shadow: 0 0 14px rgba(255,210,87,.25); }
/* 继续上局按钮 */
#btn-continue { margin-bottom: 10px; }

/* ---------- 商店 ---------- */
.shop-box { min-width: 860px; }
.shop-head { display: flex; justify-content: space-between; align-items: center; }
.shop-money { font-size: 22px; font-weight: 900; color: #ffd257; }
.shop-foot { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }

/* ---------- 暂停/结算属性 ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px 26px; margin: 6px auto 18px; text-align: left; max-width: 560px;
}
.stat-grid .row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 3px 0; border-bottom: 1px dashed #3d372b; }
.stat-grid .row b { color: #ffd257; }
.skill-title {
  grid-column: 1 / -1; margin-top: 8px; font-size: 15px; font-weight: 800;
  color: #c9b8ff; letter-spacing: 3px;
}
.skill-row span { display: flex; align-items: center; gap: 6px; color: #c9b8ff; }
.row-img { width: 20px; height: 20px; }

/* ---------- 波次横幅 ---------- */
#banner {
  position: absolute; top: 26%; left: 0; right: 0; z-index: 15; text-align: center;
  font-size: 42px; font-weight: 900; letter-spacing: 8px; color: #f2e3c3;
  text-shadow: 0 3px 0 rgba(0,0,0,.8);
  pointer-events: none; opacity: 0;
}
#banner.show { animation: bannerIn 2.2s ease forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1.05); }
  25% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1); }
}

#mute-tip {
  position: absolute; right: 14px; top: 14px; z-index: 11; pointer-events: none;
  color: #7d755f; font-size: 12px;
}

#loading {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #1b1410; color: #b8ad93; font-size: 18px; letter-spacing: 4px;
}

#toast {
  position: absolute; left: 50%; bottom: 18%; z-index: 30; pointer-events: none;
  transform: translateX(-50%);
  background: rgba(30,25,18,.92); border: 2px solid #ff6b5e; border-radius: 999px;
  padding: 8px 22px; font-weight: 700; color: #ffb3ab; opacity: 0;
}
#toast.show { animation: toastIn 1.8s ease forwards; }
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #55503f; border-radius: 5px; }