/* V4 unified readability pass: Baroque menu, compact Chinese HUD and touch controls. */

.btn { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* The generated frame is used as a nine-slice border, so its thick relief never
   sits on top of buttons or steals pointer events. */
.menu-screen {
  box-sizing: border-box;
  border: 32px solid transparent;
  border-image: url('../assets/art-v4/sprites/ui/baroque_menu_frame.png') 116 104 fill / 32px / 0 stretch;
  background-color: rgba(4, 3, 7, .30);
  box-shadow: inset 0 0 64px rgba(0, 0, 0, .68);
}
.screen .menu-logo {
  top: 5px;
  height: 137px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.menu-big.gothic-title { font-size: 106px; line-height: .84; }
.menu-tagline {
  margin-top: 7px;
  padding: 3px 22px 4px;
  color: #ead59b;
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;
  text-shadow: 2px 2px 0 #12080a, 0 0 8px rgba(164, 100, 36, .55);
  border-top: 1px solid rgba(192, 147, 73, .72);
  border-bottom: 1px solid rgba(77, 35, 31, .82);
  background: linear-gradient(90deg, transparent, rgba(19, 11, 13, .72) 18%, rgba(19, 11, 13, .72) 82%, transparent);
}
.menu-body { top: 190px; }

.menu-altar, .menu-board, .menu-col .btn, .menu-subrow .btn.sub {
  border-color: #b18a49;
  outline: 3px double #12090a;
  box-shadow:
    inset 0 0 0 2px #493822,
    inset 0 0 0 4px rgba(5, 4, 6, .82),
    5px 6px 0 rgba(0, 0, 0, .58);
}
.menu-altar .btn.ruby {
  border-image: none;
  border: 2px solid #a98243;
  outline: 2px solid #090608;
  background: linear-gradient(180deg, #6f2530, #3d1119 58%, #170608);
  color: #f6dfaa;
  box-shadow: inset 0 0 0 2px #32171a, 0 4px 0 rgba(0,0,0,.65);
}
.menu-altar::after, .menu-board::after {
  content: '◆';
  position: absolute;
  left: 50%; bottom: 5px;
  transform: translateX(-50%);
  color: #a98243;
  font-size: 9px;
}

/* 左上角只保留文字、血条和装备格；外侧不再套一个含混的大框。 */
.hud-tl {
  top: 23px;
  left: 9px;
  padding: 0;
  gap: 5px;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.hud-tl::before { content: none; display: none; }
.hud-tl-title {
  width: max-content;
  padding: 2px 9px 3px;
  color: #dbc28c;
  background: linear-gradient(90deg, rgba(10, 8, 12, .90), rgba(10, 8, 12, .52), transparent);
  border-left: 2px solid #a67b3d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
}
.hp-wrap {
  width: 232px;
  height: 36px;
  padding: 11px 17px 12px;
  border: 1px solid #a17b43 !important;
  outline: 2px solid #080608 !important;
  box-shadow: inset 0 0 0 2px rgba(50, 43, 43, .76), 2px 3px 0 rgba(0,0,0,.62) !important;
}
.hud-tl-title { display: none !important; }
/* 全部百科页采用同一组古典纸纹与浮雕金框；图标加大到能在触屏上辨识。 */
.enc-layer, .enc-body, .enc-card {
  background-color: #171317;
  background-image: radial-gradient(ellipse at 20% 10%, rgba(122,93,48,.16), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,228,164,.025) 0 1px, transparent 1px 5px);
}
.enc-layer { border: 18px solid transparent; border-image: url('../assets/art-v4/sprites/ui/baroque_menu_frame.png') 116 104 fill / 18px / 0 stretch; }
.enc-card { border: 2px double #9b7844; box-shadow: inset 0 0 0 2px #251c19, 2px 3px 0 rgba(0,0,0,.35); }
.enc-head canvas { width: 48px !important; height: 48px !important; image-rendering: pixelated; }
.enc-card.boss .enc-head canvas { width: 62px !important; height: 62px !important; }
.enc-evohead canvas { width: 42px !important; height: 42px !important; image-rendering: pixelated; }
/* Boss 出场提示与名称始终留在容器内，短屏也不会压出描边。 */
.hud-warn { box-sizing: border-box; min-width: max-content; max-width: calc(100vw - 32px); padding: 10px 26px; border: 3px double #a77a40; background: linear-gradient(180deg,#371720,#160c10); box-shadow: inset 0 0 0 2px #130708, 0 4px 0 #050304; }
.boss-wrap { box-sizing: border-box; width: min(680px, calc(100vw - 34px)); padding: 5px 13px 8px; border: 2px double #a77a40; background: rgba(10,6,9,.80); }
.boss-bar { box-sizing: border-box; width: 100%; min-width: 0; }
.shield-fill { top: 11px; left: 17px; height: 13px; }
.hp-text { line-height: 34px; }

/* 两个触屏键紧贴 128px 小地图左侧，采用金币计数器同款黑铁/黄铜框。 */
.hud-pausebtn, .hud-targetbtn {
  right: 134px;
  width: 43px;
  height: 40px;
  min-width: 0;
  padding: 0;
  opacity: .98;
  pointer-events: auto;
  touch-action: manipulation;
  color: #f4dda3;
  font-size: 17px;
  background: url('../assets/art-v2/ui/hud_coin_frame.png') center / 100% 100% no-repeat;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.hud-pausebtn { top: 22px; }
.hud-targetbtn { top: 65px; }
.hud-pausebtn:active, .hud-targetbtn:active { filter: brightness(1.35); transform: translateY(1px); }

/* Pause is part of the in-game HUD family, so keep it black-iron/brass instead
   of the old saturated violet/pink menu skin. */
.modal-box {
  border-image: none;
  border: 3px double #a07a3f;
  outline: 4px solid rgba(4, 3, 5, .92);
  background: linear-gradient(180deg, rgba(26, 27, 29, .98), rgba(8, 8, 11, .98));
  box-shadow: inset 0 0 0 2px #444040, 0 9px 26px rgba(0,0,0,.72);
}
.pause-menu .btn {
  border-image: none;
  border: 2px solid #846637;
  outline: 2px solid #070608;
  background: linear-gradient(180deg, #303337, #15171a 58%, #090a0c);
  color: #eadfc8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 0 rgba(0,0,0,.62);
}
.pause-menu .btn.primary {
  background: linear-gradient(180deg, #6e2631, #3b1118 60%, #170609);
  border-color: #b28a47;
}
.pause-menu .btn.danger {
  background: linear-gradient(180deg, #4b171d, #21090d);
  border-color: #754234;
}

@media (max-width: 700px), (max-height: 430px) {
  .menu-screen { border-width: 22px; border-image-width: 22px; }
  .menu-big.gothic-title { font-size: 76px; }
  .menu-tagline { margin-top: 4px; font-size: 12px; letter-spacing: 5px; }
  .menu-body { top: 148px; }
  .hud-tl { left: 5px; }
  .hud-tl-title { display: block; font-size: 9px; }
  .hp-wrap { width: 174px; height: 31px; padding: 9px 14px 10px; }
  .shield-fill { top: 9px; left: 14px; height: 11px; }
  .hp-text { line-height: 29px; }
}