/* ============================================================
   进攻1002！ — 样式（移动端优先 · 深夜校园像素风 · 商务定制配色）
   纯 CSS，无框架。所有可点击元素高度 >= 48px。
   配色：藏青夜色 + 香槟金点缀 + 钢蓝主线，克制、高级、无廉价感。
   ============================================================ */

:root {
  --bg: #0f1320;
  --bg-deep: #0a0d16;
  --panel: #1a2036;
  --panel-2: #232a3d;
  --panel-3: #2c3550;
  --text: #e8e4d8;
  --muted: #8b93a7;
  --accent: #5b7ea6;      /* 钢蓝 */
  --accent-2: #c9a86a;    /* 香槟金 */
  --gold: #c9a86a;
  --hp: #c75b5b;
  --xp: #5b8fb9;

  --r-common: #7fa88f;
  --r-rare: #5b8fb9;
  --r-epic: #8f7ab8;
  --r-legend: #c9a86a;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  /* 禁止长按弹出系统菜单、禁止文字选中影响操作 */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game-root { position: fixed; inset: 0; overflow: hidden; }

/* 画布：内部分辨率低，由 image-rendering:pixelated 最近邻放大，呈现像素颗粒感 */
#game-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hidden { display: none !important; }

/* ============ 通用按钮（>=48px，适配手指） ============ */
.big-btn {
  display: block;
  min-height: 52px;
  min-width: 200px;
  padding: 12px 34px;
  border: none;
  border-radius: 4px;               /* 像素风：小圆角 */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f5efe0;
  background: linear-gradient(180deg, #5b7ea6 0%, #46648a 100%);
  box-shadow: 0 4px 0 #2c3c52, 0 8px 18px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c3c52, 0 3px 8px rgba(0,0,0,.4); filter: brightness(1.08); }
.btn-secondary {
  background: linear-gradient(180deg, #3a4560 0%, #2c3550 100%);
  box-shadow: 0 4px 0 #1c2336, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-secondary:active { box-shadow: 0 1px 0 #1c2336; }

.text-btn {
  display: block;
  min-height: 48px;
  padding: 10px 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
}
.text-btn:active { color: var(--text); }

.icon-btn {
  width: 48px; height: 48px;
  border: none; border-radius: 4px;
  background: rgba(26, 32, 54, .88);
  border: 1px solid rgba(201, 168, 106, .25);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.icon-btn:active { background: var(--panel-3); }

/* ============ 全屏界面（标题 / 选角 / 结算） ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 20px 16px calc(20px + var(--safe-b));
  background:
    radial-gradient(120% 90% at 50% 10%, #1c2440 0%, var(--bg) 55%, var(--bg-deep) 100%);
  z-index: 40;
}
/* 顶部/底部细金线，增加定制感 */
.screen::before, .screen::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,106,.5), transparent);
}
.screen::before { top: 0; }
.screen::after { bottom: 0; }

.screen-title { font-size: 22px; font-weight: 800; letter-spacing: 4px; color: var(--text); }

/* ---- 标题界面 ---- */
.title-logo { text-align: center; margin-bottom: 8px; }
.title-main {
  font-size: clamp(44px, 15vw, 72px);
  font-weight: 900; letter-spacing: 5px;
  color: #f5efe0;
  text-shadow: 0 0 26px rgba(91, 126, 166, .5), 0 4px 0 rgba(0, 0, 0, .4);
}
.title-num {
  background: linear-gradient(180deg, #e6cf9a, #c9a86a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 12px rgba(201, 168, 106, .45));
}
.title-sub { margin-top: 12px; color: var(--muted); font-size: 14px; letter-spacing: 3px; }
.title-tips { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.9; }
.title-ctrl { margin-top: 8px; color: #a8b0c4; font-size: 12.5px; letter-spacing: 1px; }

/* ---- 角色选择 ---- */
#char-list {
  width: 100%; max-width: 480px;
  max-height: 62vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px;
}
.char-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 112px;
  padding: 10px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px solid rgba(201, 168, 106, .12);
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
}
.char-card:active { transform: scale(.98); }
.char-card.selected { border-color: var(--accent-2); }
/* 立绘：低分辨率 canvas 放大，保持像素颗粒 */
.char-card canvas {
  flex: 0 0 auto;
  width: 96px; height: 104px;
  border-radius: 4px;
  background: rgba(10, 13, 22, .45);
  border: 1px solid rgba(201, 168, 106, .18);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.char-info { flex: 1; min-width: 0; text-align: left; }
.char-name { font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.char-role { font-size: 12px; color: var(--gold); margin: 2px 0 4px; letter-spacing: 1px; }
.char-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.char-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: #a8b0c4; }
.char-stats b { color: var(--text); font-weight: 600; }

/* ============ HUD ============ */
#hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 20;
}
#hud-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0 12px;
}
#hud-left { display: flex; align-items: center; gap: 8px; }
#hud-level-badge {
  width: 44px; height: 44px; border-radius: 4px;
  background: linear-gradient(180deg, #5b7ea6, #46648a);
  border: 1px solid rgba(201, 168, 106, .4);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
#hud-bars { display: flex; flex-direction: column; gap: 4px; }
#hp-bar-wrap {
  position: relative;
  width: 148px; height: 16px;
  background: rgba(10, 13, 22, .72);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(232, 228, 216, .16);
}
#hp-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #d98a5c, var(--hp));
  border-radius: 2px;
  transition: width .12s linear;
}
#hp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
#xp-bar-wrap {
  width: 148px; height: 8px;
  background: rgba(10, 13, 22, .72);
  border-radius: 2px; overflow: hidden;
  border: 1px solid rgba(232, 228, 216, .12);
}
#xp-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5b8fb9, #8f7ab8);
  border-radius: 2px;
  transition: width .12s linear;
}
#hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#hud-timer { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); letter-spacing: 1px; }
#hud-kills { font-size: 12px; color: var(--muted); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
#btn-pause { pointer-events: auto; }

/* Boss 血条 */
#boss-bar-wrap {
  position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 320px);
  text-align: center;
}
#boss-name { font-size: 12px; font-weight: 700; color: #e8dcc0; text-shadow: 0 1px 3px #000; letter-spacing: 2px; }
#boss-bar {
  margin-top: 3px; height: 10px;
  background: rgba(10, 13, 22, .75);
  border: 1px solid rgba(201, 168, 106, .45);
  border-radius: 3px; overflow: hidden;
}
#boss-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #5b4a8f, #c9a86a);
}

/* 已获得技能图标 */
#skill-icons {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
}
.skill-icon {
  width: 40px; height: 40px;
  border-radius: 4px;
  background: rgba(26, 32, 54, .9);
  border: 1px solid rgba(232, 228, 216, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  position: relative;
}
.skill-icon .lv {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 3px;
  background: var(--accent);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.skill-icon.evolved { border-color: var(--gold); box-shadow: 0 0 8px rgba(201, 168, 106, .45); }
.skill-icon.evolved .lv { background: var(--gold); color: #2a2416; }

/* 顶部提示横幅（精英/Boss 出场） */
#banner {
  position: absolute; top: 26%; left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 4px;
  background: rgba(15, 19, 32, .9);
  border: 1px solid var(--accent-2);
  color: #e8dcc0;
  font-size: 16px; font-weight: 800; letter-spacing: 2px;
  white-space: nowrap;
  animation: banner-pop .3s ease;
}
@keyframes banner-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ============ 虚拟摇杆（固定屏幕正下方中央） ============ */
#joystick-zone {
  position: absolute; bottom: 0; left: 15%;
  width: 70%; height: 42%;
  z-index: 25;
  touch-action: none;
}
#game-root.modal-open #joystick-zone { pointer-events: none; }
#joystick-base {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  bottom: calc(28px + var(--safe-b));
  width: 124px; height: 124px;
  border-radius: 50%;
  background: rgba(232, 228, 216, .06);
  border: 2px solid rgba(232, 228, 216, .2);
  pointer-events: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7d94b8, #46648a);
  border: 2px solid rgba(232, 228, 216, .4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

/* ============ 弹窗（升级 / 暂停） ============ */
.modal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 20px 14px calc(20px + var(--safe-b));
  background: rgba(10, 13, 22, .86);
  backdrop-filter: blur(3px);
  z-index: 50;
}
.modal-title { font-size: 24px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 0 16px rgba(91, 126, 166, .45); }
.modal-sub { font-size: 13px; color: var(--muted); margin-top: -8px; }
#levelup-cards {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 6px;
}

/* 升级卡片 */
.lv-card {
  position: relative;
  min-height: 104px;
  padding: 12px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-left: 5px solid var(--r-common);
  cursor: pointer;
  overflow: hidden;
  transition: transform .08s ease;
  animation: card-in .25s ease backwards;
}
.lv-card:active { transform: scale(.97); }
.lv-card:nth-child(2) { animation-delay: .05s; }
.lv-card:nth-child(3) { animation-delay: .1s; }
@keyframes card-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-card.rarity-common  { border-left-color: var(--r-common); }
.lv-card.rarity-rare    { border-left-color: var(--r-rare); }
.lv-card.rarity-epic    { border-left-color: var(--r-epic); }
.lv-card.rarity-legend  { border-left-color: var(--r-legend); box-shadow: 0 0 18px rgba(201, 168, 106, .2); }

.lv-card-head { display: flex; align-items: center; gap: 8px; }
.lv-icon {
  width: 38px; height: 38px; border-radius: 4px;
  background: rgba(10, 13, 22, .5);
  border: 1px solid rgba(232, 228, 216, .1);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex: 0 0 auto;
}
.lv-name { font-size: 16.5px; font-weight: 800; flex: 1; letter-spacing: 1px; }
.lv-rarity {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
  color: #14102a;
  letter-spacing: 1px;
}
.rarity-common .lv-rarity { background: var(--r-common); }
.rarity-rare .lv-rarity { background: var(--r-rare); }
.rarity-epic .lv-rarity { background: var(--r-epic); }
.rarity-legend .lv-rarity { background: var(--r-legend); }
.lv-stars { font-size: 12.5px; letter-spacing: 2px; color: var(--gold); margin-top: 4px; }
.lv-stars .dim { color: rgba(232, 228, 216, .22); }
.lv-meta { display: flex; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.lv-tag { padding: 1px 7px; border-radius: 3px; background: rgba(91, 126, 166, .25); color: #c4d2e4; }
.lv-tag.evo { background: rgba(201, 168, 106, .22); color: #e8dcc0; }
.lv-tag.new { background: rgba(91, 143, 185, .25); color: #c4d2e4; }
.lv-desc { margin-top: 5px; font-size: 12.5px; color: #b6bdcf; line-height: 1.55; }
.lv-evolve-hint { color: var(--gold); font-size: 11.5px; margin-top: 3px; }

/* ============ 结算界面 ============ */
#result-screen { justify-content: flex-start; padding-top: calc(18px + env(safe-area-inset-top, 0px)); gap: 12px; }
#result-body {
  width: 100%; max-width: 460px;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(201, 168, 106, .18);
  padding: 14px;
}
.result-eval {
  text-align: center;
  padding: 12px 10px 14px;
  border-bottom: 1px dashed rgba(232, 228, 216, .14);
  margin-bottom: 10px;
}
.result-eval .eval-title {
  font-size: 24px; font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #e6cf9a, #c9a86a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.result-eval .eval-desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.result-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.result-cell {
  background: rgba(10, 13, 22, .35);
  border: 1px solid rgba(232, 228, 216, .06);
  border-radius: 4px;
  padding: 8px 10px;
}
.result-cell .k { font-size: 11px; color: var(--muted); }
.result-cell .v { font-size: 17px; font-weight: 800; margin-top: 2px; }
.result-cell .v small { font-size: 11px; color: var(--muted); font-weight: 400; }
.result-section-title { font-size: 13px; font-weight: 700; color: #c4d2e4; margin: 10px 0 7px; letter-spacing: 1px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(91, 126, 166, .18);
  border: 1px solid rgba(91, 126, 166, .45);
  font-size: 12.5px; font-weight: 600;
}
.chip .stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.chip.evo-chip {
  background: rgba(201, 168, 106, .14);
  border-color: rgba(201, 168, 106, .5);
  color: #e8dcc0;
}
.result-empty { font-size: 12px; color: var(--muted); }
.result-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

/* 小屏微调（360×640 等） */
@media (max-height: 660px) {
  .title-main { font-size: clamp(38px, 13vw, 58px); }
  .char-card { min-height: 96px; }
  .lv-card { min-height: 88px; padding: 10px 12px; }
  .lv-desc { font-size: 12px; }
  #joystick-base { width: 108px; height: 108px; }
  #joystick-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
}