/* feature-v21.css — 复古巴洛克统一外观与主菜单专属画板 */

.menu-col .btn {
  width: 350px !important;
  min-height: 62px !important;
  padding: 0 42px 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box;
}

.menu-altar,
.menu-board {
  width: 248px !important;
  height: 302px !important;
  box-sizing: border-box;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: 8px 10px 18px rgba(0,0,0,.65) !important;
  image-rendering: pixelated;
}
.menu-version { left: 0 !important; bottom: 0 !important; z-index: 5; padding: 4px 7px; }
.menu-altar {
  padding: 54px 42px 42px !important;
  background: url('../assets/art-v4/sprites/ui/holy_altar_panel.png') center / 100% 100% no-repeat !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
.menu-board {
  padding: 60px 45px 55px !important;
  background: url('../assets/art-v4/sprites/ui/battle_report_panel.png') center / 100% 100% no-repeat !important;
  gap: 5px !important;
}
.menu-altar::before, .menu-altar::after,
.menu-board::before, .menu-board::after { content: none !important; display: none !important; }
.menu-altar-title, .menu-board-title {
  color: #4a2612 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 5px !important;
  text-shadow: 0 1px rgba(255,238,184,.65) !important;
  font-weight: 900;
  white-space: nowrap;
}
.menu-board-body { gap: 4px !important; }
.board-row { font-size: 12px !important; }
.board-label { color: #5e2d1d !important; }
.board-val { color: #8d1717 !important; text-shadow: none !important; }
.menu-altar-gold { color: #7b4d12 !important; text-shadow: none !important; }
.menu-altar-icon.menu-altar-flame {
  position: relative;
  width: 72px !important;
  height: 76px !important;
  border: 0 !important;
  background: url('../assets/art-v4/sprites/ui/altar_cross_states.png') 0 0 / 400% 100% no-repeat !important;
  box-shadow: none !important;
  margin-bottom: -5px;
}
.menu-altar-flame::before {
  content: none;
}
.menu-altar-flame.altar-cross-state-0 { background-position: 0 0 !important; }
.menu-altar-flame.altar-cross-state-1 { background-position: 33.333% 0 !important; }
.menu-altar-flame.altar-cross-state-2 { background-position: 66.666% 0 !important; }
.menu-altar-flame.altar-cross-state-3 { background-position: 100% 0 !important; }

/* Generated baroque frame used as a true nine-slice: detailed corners remain
   intact while the straight edge pieces stretch to any notification or bar. */
.boss-wrap, .hud-warn, .modal-box, .pause-box {
  border: 18px solid transparent !important;
  border-image: url('../assets/art-v4/sprites/ui/baroque_menu_frame.png') 116 104 fill / 18px / 0 stretch !important;
  box-sizing: border-box;
}
.boss-wrap { width: min(780px, calc(100vw - 22px)) !important; min-height: 72px; padding: 13px 30px 15px !important; }
.boss-bar { height: 30px !important; }
.hud-warn { min-width: min(680px, calc(100vw - 22px)) !important; min-height: 62px; padding: 17px 42px !important; text-align: center; }
.pause-box { min-width: min(560px, calc(100vw - 30px)); padding: 38px !important; }
.asset-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.asset-cell { min-height:86px; padding:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:2px solid #614622; background:rgba(9,7,8,.78); }
.asset-cell canvas { width:46px; height:46px; image-rendering:pixelated; }
.asset-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#e7ca88; }
.test-panel { position:absolute; right:12px; bottom:74px; width:250px; max-height:calc(100% - 102px); overflow:auto; display:flex; flex-direction:column; gap:7px; padding:11px; z-index:12; box-sizing:border-box; background:rgba(18,10,16,.96); border:14px solid transparent; border-image:url('../assets/art-v4/sprites/ui/baroque_menu_frame.png') 116 104 fill / 14px / 0 stretch; box-shadow:0 0 0 2px #1a1110 inset, 0 5px 16px rgba(0,0,0,.5); }
.test-panel-title { color:#f0d899; text-align:center; font-weight:900; font-size:14px; letter-spacing:2px; text-shadow:2px 2px #1b0c0b; }
.test-panel-note { color:#c9a86b; text-align:center; font-size:9px; margin-top:-4px; }
.test-picker { display:grid; grid-template-columns:42px 1fr; gap:4px 6px; align-items:center; }
.test-picker label { color:#dfc687; font-size:10px; font-weight:700; text-align:right; }
.test-select { width:100%; min-width:0; height:23px; color:#f4dfaa; background:#150e10; border:1px solid #936e39; font:10px var(--font-cn, monospace); }
.test-picker-actions { grid-column:2; display:flex; gap:4px; }
.test-panel .btn { min-width:0; flex:1; padding:5px 4px; font-size:10px; white-space:nowrap; }
.test-batch-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding-top:3px; border-top:1px solid rgba(198,151,74,.45); }
.hud-exitgate { position:absolute; left:50%; bottom:96px; transform:translateX(-50%); z-index:13; min-width:154px; min-height:38px; padding:7px 18px; color:#ffe1a0; font-size:13px; letter-spacing:1px; background:linear-gradient(180deg,#6a1c34,#260b1c 62%,#12060d); border:3px solid transparent; border-image:url('../assets/art-v4/sprites/ui/baroque_menu_frame.png') 116 104 fill / 8px / 0 stretch; box-shadow:0 0 18px rgba(194,47,86,.6), 0 4px 0 rgba(0,0,0,.6); touch-action:manipulation; }
.hud-exitgate:active { filter:brightness(1.22); transform:translateX(-50%) translateY(1px); }
.enc-section-title { margin:16px 0 8px; color:#f0d899; font-weight:900; letter-spacing:1px; }

/* 全部次级界面统一为深色金纹巴洛克框；不改变各页面原有布局。 */
.modal-box, .info-box, .shop-item, .achv-row, .codex-cell, .enc-card,
.lu-card, .chest-item, .settings-body, .coop-code, .coop-char, .coop-member,
.map-card, .card, .toast, .result-box, .story-box, .pause-box {
  border: 3px solid #17100c !important;
  outline: 1px solid #ad8448 !important;
  outline-offset: -6px !important;
  border-radius: 0 !important;
  background-color: rgba(10,9,10,.94) !important;
  box-shadow: inset 0 0 0 2px #4b3927, inset 0 0 22px rgba(147,91,31,.16), 5px 6px 0 rgba(0,0,0,.52) !important;
}
.page-title, .modal-title, .info-title {
  color: #e6c986;
  text-shadow: 2px 2px #140907;
}

@media (max-width: 760px), (max-height: 520px) {
  .menu-altar, .menu-board { width: 190px !important; height: 244px !important; }
  .menu-altar { padding: 42px 32px 30px !important; }
  .menu-board { padding: 48px 34px 42px !important; }
  .menu-col .btn { width: 270px !important; }
  .board-row { font-size: 10px !important; }
  .test-panel { right:6px; bottom:52px; width:min(232px, calc(100vw - 12px)); max-height:calc(100% - 62px); padding:8px; gap:4px; }
  .test-picker { grid-template-columns:36px 1fr; gap:3px 4px; }
  .test-panel .btn { padding:4px 2px; font-size:9px; }
  .hud-exitgate { bottom:82px; min-width:136px; min-height:34px; padding:5px 12px; font-size:11px; }
}