/* V3 corrective pass: readable scale, unified HUD/menu metalwork and exact DarkEscaper branding. */

/* The old XP bitmap contained two unrelated frame fragments.  A code-native
   iron/brass rail stays crisp at every viewport width and matches the HUD. */
.xp-wrap {
  height: 16px;
  padding: 4px 12px;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, #090a0d, #272b2f 7%, #111419 50%, #272b2f 93%, #090a0d);
  border: 1px solid #98733b;
  outline: 1px solid #050405;
  box-shadow: inset 0 0 0 2px rgba(66, 71, 74, .74), 0 2px 0 rgba(0, 0, 0, .78);
}
.xp-fill {
  height: 6px;
  margin: 0;
  border: 1px solid #9dd8e6;
  box-sizing: border-box;
  background: linear-gradient(90deg, #23527c, #51a9ce 62%, #c8edf1);
  box-shadow: 0 0 7px rgba(82, 181, 216, .48);
}
.lv-text { top: 1px; right: 16px; }

.hud-timer {
  top: 17px;
  min-width: 176px;
  height: 54px;
  padding: 16px 28px 15px;
  box-sizing: border-box;
  background: url('../assets/art-v3/ui/hud_timer_frame.png') center / 100% 100% no-repeat;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #f4e3bd;
  text-shadow: 2px 2px 0 #080507, 0 0 7px rgba(181, 37, 43, .45);
}

/* 主菜单与游戏内 HUD 共用黑铁、旧黄铜、暗红三色,侧栏严格等宽对称。 */
.menu-screen {
  border: 18px solid transparent;
  border-image: url('../assets/ui/gothic-frame.png') 24 fill stretch;
  background: rgba(5, 5, 9, .18);
  box-shadow: inset 0 0 0 2px #17100e, inset 0 0 58px rgba(0, 0, 0, .72);
}
.menu-screen::before {
  inset: 8px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 20%, transparent 80%, rgba(0,0,0,.32)),
    radial-gradient(ellipse at 50% 34%, rgba(156, 111, 44, .10), transparent 47%);
}

.screen .menu-logo {
  top: 8px;
  height: 94px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}
.menu-big.gothic-title,
.logo:not(.menu-logo) .gothic-title {
  position: relative;
  display: inline-block;
  overflow: visible;
  font-family: "Darktide Gothic", Georgia, serif;
  font-size: 92px;
  line-height: .94;
  font-weight: 700;
  letter-spacing: 1px;
  color: #efc75c;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-stroke: 2px #120405;
  text-shadow:
    0 -2px 0 #fff0a1,
    2px 2px 0 #8e4d12,
    4px 4px 0 #5f1118,
    7px 8px 0 #100305,
    0 0 16px rgba(150, 18, 28, .38);
  filter: drop-shadow(0 3px 0 #68151c) drop-shadow(0 8px 8px rgba(0,0,0,.88));
  animation: darkEscaperFloat 4.6s ease-in-out infinite;
}
.menu-big.gothic-title::before,
.logo:not(.menu-logo) .gothic-title::before { content: none; }
.menu-big.gothic-title::after,
.logo:not(.menu-logo) .gothic-title::after {
  content: '';
  position: absolute;
  left: 27%; top: 14%;
  width: 48%; height: 38%;
  transform: none;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 18%, rgba(117, 9, 16, .88) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 8%, rgba(96, 7, 13, .75) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 26%, rgba(126, 11, 17, .72) 0 2px, transparent 3px),
    radial-gradient(ellipse at 86% 14%, rgba(91, 5, 11, .70) 0 4px, transparent 5px);
  opacity: .72;
}
@keyframes darkEscaperFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.menu-body {
  top: 188px;
  bottom: 76px;
  padding: 0 46px;
  gap: 38px;
  align-items: center;
}
.menu-altar,
.menu-board {
  position: relative;
  width: 220px;
  height: 252px;
  padding: 17px 18px;
  box-sizing: border-box;
  border: 2px solid #95743d;
  outline: 3px solid #090708;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(28,31,34,.96), rgba(8,9,12,.97));
  box-shadow:
    inset 0 0 0 2px #343a3d,
    inset 0 -10px 24px rgba(0,0,0,.48),
    6px 7px 0 rgba(0,0,0,.52);
  color: #ded3bc;
}
.menu-altar::before,
.menu-board::before {
  content: '◆';
  color: #9c7538;
  text-shadow: 0 0 7px rgba(181, 120, 43, .45);
  position: absolute;
  margin-top: -13px;
}
.menu-altar-title,
.menu-board-title {
  color: #d9bd7a;
  border-bottom: 1px solid #70542e;
  padding-bottom: 8px;
  text-shadow: 2px 2px 0 #000;
  font-family: var(--font-cn);
}
.menu-altar-icon {
  width: 54px; height: 54px;
  background: #111419;
  border: 2px solid #816332;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #30353a, 0 3px 0 #000;
}
.menu-altar-gold { color: #e0bd66; text-shadow: 2px 2px 0 #000; }
.board-label { color: #c8c0b0; }
.board-val { color: #d0a754; }
.menu-mid { gap: 11px; }
.menu-col { gap: 10px; }
.menu-col .btn {
  width: 280px;
  height: 44px;
  border: 2px solid #765b34;
  outline: 2px solid #080709;
  background: linear-gradient(180deg, #30353a, #171a1e 55%, #0b0c0f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -4px 0 #050507, 0 4px 0 rgba(0,0,0,.6);
  color: #e5ddcf;
}
.menu-col .btn:hover,
.menu-subrow .btn:hover { border-color: #c29a50; color: #fff1cc; }
.menu-col .btn.primary {
  background: linear-gradient(180deg, #792836, #48141d 55%, #1d080c);
  border-color: #ba8b43;
  color: #ffe8b1;
}
.menu-subrow { width: 280px; gap: 10px; }
.menu-subrow .btn.sub {
  width: 135px;
  background: linear-gradient(180deg, #262a2f, #101216);
  border: 2px solid #68502f;
  outline: 2px solid #080709;
  color: #d8cdbb;
}
.menu-altar .btn.ruby {
  width: 134px;
  background: linear-gradient(180deg, #772a34, #3f1018);
  border-color: #a77a3b;
}
.menu-version { left: 24px; bottom: 62px; color: rgba(222,205,175,.72); }

@media (max-width: 700px), (max-height: 430px) {
  .menu-big.gothic-title { font-size: 72px; }
  .screen .menu-logo { top: 5px; }
  .menu-body { top: 145px; bottom: 56px; transform: scale(.88); }
  .hud-timer { min-width: 150px; height: 46px; padding: 13px 23px 12px; }
}