/* ============================================================
   v25 选人/选图界面重做层
   更厚重的双线雕花框(96px 源图,信息量远超 48px 单线)、
   立绘区/铭牌/武器行、地图预览+难度星、四角金饰、余烬粒子。
   ============================================================ */

/* ---------- 界面容器:透出菜单动态背景 + 角饰 ---------- */
.character-select-screen,
.map-select-screen {
  background: rgba(7, 3, 15, 0.5) !important;
}

/* 四角金饰:128x32 精灵(左上/右上/右下/左下 各 32x16 @2x) */
.corner-orn {
  position: absolute;
  width: 64px; height: 32px;
  background: url('../assets/ui/kenney/corners-gold.png') 0 0 / 256px 64px no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}
.corner-orn.tl { top: 10px; left: 10px; }
.corner-orn.tr { top: 10px; right: 10px; background-position: -64px 0; }
.corner-orn.br { bottom: 10px; right: 10px; background-position: -128px 0; }
.corner-orn.bl { bottom: 10px; left: 10px; background-position: -192px 0; }

/* 余烬粒子:暖金上浮 + 摇曳,零 JS 每帧成本 */
.ember-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.ember {
  position: absolute;
  bottom: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd98c 0%, #d89a4a 55%, transparent 72%);
  box-shadow: 0 0 6px rgba(255, 190, 100, 0.55);
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0) scale(1); }
  25% { transform: translateY(-25vh) translateX(8px) scale(0.9); }
  50% { transform: translateY(-50vh) translateX(-6px) scale(0.85); }
  75% { transform: translateY(-75vh) translateX(7px) scale(0.7); }
  100% { transform: translateY(-105vh) translateX(-4px) scale(0.4); }
}

/* 内容压在粒子之上 */
.character-select-screen > *:not(.ember-layer):not(.corner-orn),
.screen.panel-col > *:not(.ember-layer):not(.corner-orn) {
  position: relative;
  z-index: 2;
}

/* ---------- 页面标题:大字 + 金分隔线 ---------- */
.page-title {
  font-size: 26px !important;
  letter-spacing: 8px;
  text-indent: 8px;
  color: var(--dk-gold-bright) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(200, 156, 85, 0.35);
  padding-bottom: 2px;
}
.page-title::after {
  content: '';
  display: block;
  height: 10px;
  margin: 4px auto 0;
  width: min(420px, 70%);
  background: url('../assets/ui/kenney/divider-gold.png') center / auto 10px repeat-x;
  opacity: 0.9;
}

/* ---------- 选人卡片:立绘 + 铭牌 + 武器行 ---------- */
.char-card {
  width: 158px !important;
  min-height: 196px !important;
  padding: 0 0 8px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: luIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.char-card:nth-child(1) { animation-delay: 0.03s; }
.char-card:nth-child(2) { animation-delay: 0.09s; }
.char-card:nth-child(3) { animation-delay: 0.15s; }
.char-card:nth-child(4) { animation-delay: 0.21s; }
.char-card:nth-child(5) { animation-delay: 0.27s; }
.char-card:nth-child(6) { animation-delay: 0.33s; }

/* 更厚的双线框:默认暗金软框,选中换亮金重框 */
.char-card::before, .map-card::before {
  border: 14px solid transparent !important;
  border-image: url('../assets/ui/kenney/panel-double-soft.png') 24 fill / 14px / 0 stretch !important;
  opacity: 0.8;
}
.char-card.selected::before, .map-card.selected::before {
  border-image: url('../assets/ui/kenney/panel-double-gold.png') 24 fill / 14px / 0 stretch !important;
  opacity: 1;
}

.char-portrait {
  position: relative;
  width: 100%;
  height: 94px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 62% 70% at 50% 62%, rgba(120, 88, 180, 0.30), rgba(23, 16, 38, 0) 72%),
    linear-gradient(180deg, rgba(46, 32, 74, 0.42), rgba(14, 9, 24, 0.1));
}
.char-portrait canvas { image-rendering: pixelated; }
.char-card.selected .char-portrait {
  background:
    radial-gradient(ellipse 62% 70% at 50% 62%, rgba(232, 199, 122, 0.28), rgba(23, 16, 38, 0) 72%),
    linear-gradient(180deg, rgba(88, 62, 34, 0.38), rgba(20, 12, 6, 0.12));
}
/* 立绘底部渐隐,让精灵"站"在光里而不是浮着 */
.char-portrait::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(10, 6, 18, 0.8));
}

.char-plate {
  margin: 2px 8px 0;
  padding: 3px 14px 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 3px;
  text-indent: 3px;
  color: var(--dk-gold-bright);
  background: linear-gradient(180deg, rgba(58, 40, 20, 0.55), rgba(24, 15, 8, 0.72));
  border-top: 1px solid rgba(216, 182, 118, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.char-card.selected .char-plate {
  color: #ffe9b8;
  background: linear-gradient(180deg, rgba(96, 66, 28, 0.8), rgba(38, 23, 9, 0.85));
}
.char-card .card-sub {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--dk-text-dim);
  font-size: 12px;
}
.char-card .card-lock {
  margin-top: 6px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--dk-text-dim);
  text-align: center;
}
.info-weapon {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(200, 156, 85, 0.25);
  color: var(--dk-gold);
  font-size: 13px;
  letter-spacing: 1px;
}

/* ---------- 选图卡片:预览 + 描述 + 难度星 ---------- */
.map-card {
  min-height: 224px !important;
  padding: 0 0 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 236px !important;
}
.map-swatch {
  position: relative;
  width: calc(100% - 30px);
  height: 116px;
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55), inset 0 -14px 18px rgba(0, 0, 0, 0.35);
}
.map-swatch canvas { image-rendering: pixelated; position: relative; z-index: 1; }
.map-swatch-deco2 { position: absolute; right: 14px; bottom: 10px; opacity: 0.85; }
.map-card .card-sub {
  margin: 5px 10px 0;
  text-align: center;
  color: var(--dk-text-dim);
  font-size: 12px;
  line-height: 1.45;
}
.map-diff {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.map-diff span {
  font-size: 13px;
  color: rgba(140, 118, 82, 0.35);
  text-shadow: none;
}
.map-diff span.on {
  color: var(--dk-gold-bright);
  text-shadow: 0 0 8px rgba(232, 199, 122, 0.6), 0 1px 0 rgba(0, 0, 0, 0.7);
}

/* 信息框:双线重框 */
.info-box::before {
  border: 14px solid transparent !important;
  border-image: url('../assets/ui/kenney/panel-double-gold.png') 24 fill / 14px / 0 stretch !important;
  opacity: 1 !important;
}

/* ---------- 窄屏收敛 ---------- */
@media (max-width: 860px) {
  .char-card { width: 132px !important; min-height: 178px !important; }
  .char-portrait { height: 84px; }
  .char-plate { font-size: 13px; letter-spacing: 2px; }
  .map-card { width: 180px !important; min-height: 196px !important; }
  .map-swatch { height: 92px; }
  .corner-orn { width: 44px; height: 22px; background-size: 176px 44px; }
  .corner-orn.tr { background-position: -44px 0; }
  .corner-orn.br { background-position: -88px 0; }
  .corner-orn.bl { background-position: -132px 0; }
  .ember-layer { display: none; }   /* 窄屏减负,动画层不参与 */
}