/* ============================================================
   海克斯科技 · 形状语言层
   斜切面板 / 金铜描边 / 符文辉光 / 衬线标题
   仅覆盖形状与质感，不改布局与类名
   ============================================================ */

:root {
  --gx-gold: linear-gradient(180deg, #E7CD94 0%, #C89B3C 55%, #9A7327 100%);
  --gx-gold-line: linear-gradient(180deg, rgba(240, 230, 210, .55), rgba(120, 90, 40, .55));
  --gx-panel-grad: linear-gradient(160deg, rgba(21, 48, 63, .5) 0%, rgba(8, 22, 32, .92) 100%);
  --gx-bevel: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --gx-bevel-sm: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* ---------- 按钮 ---------- */
.btn {
  letter-spacing: .08em;
  font-weight: 600;
  clip-path: var(--gx-bevel-sm);
  border-radius: 0;
}
.btn-primary {
  background: var(--gx-gold) padding-box;
  color: #0A1218;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 16px rgba(200, 155, 60, .22);
}
.btn-primary:hover { background: linear-gradient(180deg, #F3DDA6, #D2A649 55%, #A9802E); filter: brightness(1.06); }
.btn-primary:active { background: linear-gradient(180deg, #B78C33, #C89B3C); }

.btn-secondary {
  background: linear-gradient(180deg, rgba(200, 170, 110, .06), rgba(200, 170, 110, .02)) padding-box,
              var(--gx-gold-line) border-box;
  border: 1px solid transparent;
  color: var(--accent-hover);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, rgba(200, 170, 110, .14), rgba(200, 170, 110, .05)) padding-box,
              var(--gx-gold-line) border-box;
  border-color: transparent;
}
.btn-secondary:active { background: rgba(200, 155, 60, .18) padding-box; }

.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: rgba(200, 170, 110, .09); color: var(--gold-bright); }

.btn-soft {
  background: rgba(200, 155, 60, .12) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent;
  color: var(--accent-hover);
}
.btn-soft:hover { background: rgba(200, 155, 60, .2) padding-box; }

.btn-danger {
  background: linear-gradient(180deg, #F0586C, #BE1E37 60%, #8E1528);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 16px rgba(190, 30, 55, .28);
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-gold { background: var(--gx-gold); color: #0A1218; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.2); }

/* ---------- 面板 / 卡片 ---------- */
.card,
.side-card,
.filter-bar {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: var(--gx-panel-grad) padding-box,
              linear-gradient(180deg, rgba(200, 155, 60, .3), rgba(44, 82, 102, .28)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(240, 230, 210, .05);
}
.side-card { padding: 16px; }
.filter-bar { box-shadow: var(--shadow-xs); }

.card.clickable:hover {
  background: linear-gradient(160deg, rgba(26, 58, 74, .65) 0%, rgba(10, 28, 40, .95) 100%) padding-box,
              linear-gradient(180deg, rgba(200, 155, 60, .65), rgba(200, 155, 60, .25)) border-box;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(200, 155, 60, .18));
  transform: translateY(-2px);
}

/* 卡片顶部受光 */
.card::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 230, 210, .35), transparent);
  pointer-events: none;
}
.card { position: relative; }

/* ---------- 表单 ---------- */
.input, .select, .textarea {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  background: linear-gradient(180deg, #051019, #081824) padding-box,
              linear-gradient(180deg, rgba(44, 82, 102, .9), rgba(24, 50, 63, .9)) border-box;
  border: 1px solid transparent;
  color: var(--text);
}
.input:focus, .select:focus, .textarea:focus {
  background: linear-gradient(180deg, #071620, #0A1E2C) padding-box,
              var(--gx-gold-line) border-box;
  box-shadow: 0 0 0 1px rgba(200, 155, 60, .25), 0 0 16px rgba(200, 155, 60, .14);
}
.select-wrap::after { border-right-color: var(--accent); border-bottom-color: var(--accent); }

.choice {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  background: rgba(6, 18, 27, .6);
  border: 1px solid var(--border);
}
.choice:hover { border-color: rgba(200, 155, 60, .5); color: var(--gold-bright); }
.choice.on {
  background: rgba(200, 155, 60, .13);
  border-color: var(--gold-line);
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(200, 155, 60, .4);
}
.choice.on.gold { border-color: var(--gold-line); color: var(--gold-bright); }

/* ---------- 侧栏 ---------- */
.sidebar {
  background:
    linear-gradient(180deg, rgba(13, 34, 48, .92), rgba(4, 14, 21, .96));
  border-right: 1px solid rgba(200, 155, 60, .22);
  box-shadow: inset -1px 0 0 rgba(10, 150, 170, .12), 6px 0 24px rgba(0, 0, 0, .35);
}
.brand-mark {
  border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: linear-gradient(145deg, #163848, #07141D) padding-box,
              linear-gradient(145deg, #F0E6D2, #785A28) border-box;
  border: 1.5px solid transparent;
  color: #E3C47E;
  box-shadow: 0 0 14px rgba(200, 155, 60, .3), inset 0 0 10px rgba(10, 150, 170, .25);
}
.brand-mark .icon { filter: drop-shadow(0 0 4px rgba(227, 196, 126, .6)); }
.brand-name { font-family: var(--font-display); letter-spacing: .12em; color: var(--gold-bright); }
.brand-sub { color: var(--hex); letter-spacing: .28em; font-size: 9.5px; }

.nav-caption { color: var(--accent); opacity: .65; letter-spacing: 2px; text-transform: uppercase; }
.nav-item {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  letter-spacing: .06em;
}
.nav-item:hover { background: rgba(200, 170, 110, .07); color: var(--gold-bright); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(200, 155, 60, .2), rgba(200, 155, 60, .03));
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(200, 155, 60, .45);
}
.nav-item.active::before {
  background: linear-gradient(180deg, #F0E6D2, #C89B3C);
  box-shadow: 0 0 10px rgba(200, 155, 60, .7);
  width: 3px; top: 7px; bottom: 7px;
}
.nav-badge, .dot-badge {
  background: linear-gradient(180deg, #F0586C, #BE1E37);
  box-shadow: 0 0 10px rgba(232, 70, 90, .5);
}

.side-user {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: linear-gradient(180deg, rgba(200, 170, 110, .05), rgba(200, 170, 110, .01)) padding-box,
              linear-gradient(180deg, rgba(200, 155, 60, .35), rgba(44, 82, 102, .3)) border-box;
  border: 1px solid transparent;
}
.side-user:hover { border-color: transparent; filter: brightness(1.15); }
.icon-btn { border-radius: 0; clip-path: var(--gx-bevel-sm); color: var(--muted); }
.icon-btn:hover { background: rgba(200, 170, 110, .1); color: var(--gold-bright); }

/* ---------- 顶栏 ---------- */
.topbar {
  border-bottom: 1px solid rgba(200, 155, 60, .2);
  background: rgba(4, 14, 21, .78);
  box-shadow: 0 1px 0 rgba(10, 150, 170, .1), 0 8px 24px rgba(0, 0, 0, .3);
}
.tb-title h1 { font-size: 19px; letter-spacing: .1em; }
.tb-search {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  background: linear-gradient(180deg, #051019, #081824) padding-box,
              linear-gradient(180deg, rgba(44, 82, 102, .8), rgba(24, 50, 63, .8)) border-box;
  border: 1px solid transparent;
}
.tb-search:focus-within {
  background: linear-gradient(180deg, #071620, #0A1E2C) padding-box, var(--gx-gold-line) border-box;
  box-shadow: 0 0 14px rgba(200, 155, 60, .16);
}
.wallet-chip {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  background: linear-gradient(180deg, rgba(200, 155, 60, .12), rgba(200, 155, 60, .04)) padding-box,
              var(--gx-gold-line) border-box;
  border: 1px solid transparent;
  color: var(--gold-bright);
}
.wallet-chip .dot.rp { background: var(--gold); box-shadow: 0 0 6px rgba(200, 155, 60, .8); }
.wallet-chip .dot.be { background: var(--hex); box-shadow: 0 0 6px rgba(10, 200, 185, .7); }

.search-pop, .pop-panel {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: linear-gradient(180deg, #0E2532, #081722) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent;
}
.search-row:hover { background: rgba(200, 170, 110, .09); }

/* ---------- 页面标题 ---------- */
.page-head h2 {
  font-size: 26px; letter-spacing: .14em;
  text-shadow: 0 0 24px rgba(200, 155, 60, .35);
}
.page-head h2::before {
  content: ""; display: inline-block;
  width: 4px; height: 18px; margin: 0 12px 0 0;
  background: var(--gx-gold); vertical-align: -2px;
  box-shadow: 0 0 10px rgba(200, 155, 60, .7);
}
.section-title { letter-spacing: .08em; }
.section-title .icon, .side-card h4 .icon { color: var(--gold); filter: drop-shadow(0 0 5px rgba(200, 155, 60, .5)); }

/* 大厅英雄横幅 */
.hall-hero {
  position: relative; overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  min-height: 178px; margin-bottom: 22px;
  padding: 26px 30px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    linear-gradient(90deg, rgba(4, 14, 21, .96) 0%, rgba(6, 20, 30, .78) 38%, rgba(6, 20, 30, .25) 70%, rgba(10, 150, 170, .14) 100%),
    url("../img/hall-vista.jpg") right center / cover no-repeat,
    #06121B;
  border: 1px solid rgba(200, 155, 60, .35);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .5));
}
.hall-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 200px at 12% 110%, rgba(10, 150, 170, .22), transparent 70%);
}
.hall-hero .hh-kicker {
  font-size: 11px; letter-spacing: .42em; color: var(--hex);
  text-transform: uppercase; margin-bottom: 8px; position: relative;
}
.hall-hero h2 {
  font-size: 30px; letter-spacing: .16em; color: var(--gold-bright);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 0 30px rgba(200, 155, 60, .3);
  position: relative;
}
.hall-hero p {
  margin-top: 8px; font-size: 13px; color: rgba(240, 230, 210, .72);
  letter-spacing: .06em; position: relative;
}
.hall-hero .hh-actions { display: flex; gap: 10px; margin-top: 18px; position: relative; }
.hall-hero .hh-rule {
  position: absolute; left: 30px; bottom: 0; width: 72px; height: 2px;
  background: var(--gx-gold); box-shadow: 0 0 12px rgba(200, 155, 60, .7);
}

/* 我的房间横幅 → 海克斯蓝金战报条 */
.my-room-banner {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background:
    linear-gradient(90deg, rgba(10, 50, 60, .94), rgba(0, 90, 130, .55)),
    linear-gradient(135deg, #143F4C, #0A2A38);
  border: 1px solid rgba(10, 200, 185, .4);
  box-shadow: 0 8px 28px rgba(0, 90, 130, .3), inset 0 1px 0 rgba(240, 230, 210, .1);
}
.my-room-banner h5 { font-family: var(--font-display); letter-spacing: .12em; color: var(--gold-bright); }
.my-room-banner .btn {
  background: var(--gx-gold); color: #0A1218; font-weight: 700;
  clip-path: var(--gx-bevel-sm);
}
.my-room-banner .btn:hover { filter: brightness(1.08); }

.quick-mini {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: var(--gx-panel-grad) padding-box,
              linear-gradient(180deg, rgba(200, 155, 60, .25), rgba(44, 82, 102, .25)) border-box;
  border: 1px solid transparent;
}
.quick-mini:hover {
  border-color: transparent;
  background: linear-gradient(160deg, rgba(200, 155, 60, .16), rgba(8, 22, 32, .9)) padding-box,
              var(--gx-gold-line) border-box;
  color: var(--gold-bright);
}
.quick-mini .icon { color: var(--gold); filter: drop-shadow(0 0 6px rgba(200, 155, 60, .45)); }

/* ---------- Tabs / 分段 ---------- */
.tabs { border-bottom: 1px solid rgba(200, 155, 60, .22); }
.tab { letter-spacing: .1em; }
.tab.active { color: var(--gold-bright); }
.tab.active::after {
  background: var(--gx-gold);
  box-shadow: 0 0 10px rgba(200, 155, 60, .75);
}
.tab.active .count { color: var(--gold); }

.segmented {
  border-radius: 0;
  clip-path: var(--gx-bevel-sm);
  background: #051019;
  border: 1px solid var(--border);
}
.segmented button.active {
  background: linear-gradient(180deg, rgba(200, 155, 60, .22), rgba(200, 155, 60, .08));
  color: var(--gold-bright);
  box-shadow: none;
  clip-path: var(--gx-bevel-sm);
  text-shadow: 0 0 10px rgba(200, 155, 60, .4);
}

/* ---------- 标签 chip ---------- */
.tag {
  border-radius: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: rgba(21, 48, 63, .8);
  border: 1px solid rgba(44, 82, 102, .6);
}
.tag.accent {
  background: rgba(200, 155, 60, .14);
  border-color: rgba(200, 155, 60, .45);
  color: var(--gold-bright);
}
.tag.gold { color: var(--gold); }
.tag.info { border-color: rgba(47, 185, 206, .4); }
.tag.success { border-color: rgba(59, 201, 139, .4); }
.tag.danger { border-color: rgba(232, 70, 90, .4); }

/* ---------- 弹窗 ---------- */
.modal {
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background: linear-gradient(170deg, #122C3A, #081722 60%, #06121B) padding-box,
              linear-gradient(180deg, rgba(240, 230, 210, .6), rgba(120, 90, 40, .65)) border-box;
  border: 1px solid transparent;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(200, 155, 60, .1));
}
.modal-head {
  border-bottom: 1px solid rgba(200, 155, 60, .22);
  background: linear-gradient(180deg, rgba(200, 155, 60, .08), transparent);
}
.modal-head h3 { font-size: 17px; letter-spacing: .14em; }
.modal-head h3::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 10px;
  background: var(--gx-gold); transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(200, 155, 60, .8); vertical-align: 2px;
}
.modal-foot {
  border-top: 1px solid rgba(200, 155, 60, .18);
  background: rgba(4, 14, 21, .5);
}

/* ---------- 菜单 / Toast ---------- */
.menu {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: linear-gradient(180deg, #0F2531, #081722) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent;
}
.menu-item { border-radius: 0; clip-path: var(--gx-bevel-sm); letter-spacing: .04em; }
.menu-item:hover { background: rgba(200, 170, 110, .12); color: var(--gold-bright); }
.menu-item:hover .icon { color: var(--gold); }
.menu-sep { background: rgba(200, 155, 60, .18); }

.toast {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: linear-gradient(180deg, #122C3A, #0A1E2A) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent;
  color: var(--text);
}

/* ---------- 开关 / 进度 / 其他 ---------- */
.switch input:checked + .sl {
  background: linear-gradient(90deg, #9A7327, #E3C47E);
  box-shadow: 0 0 10px rgba(200, 155, 60, .5);
}
.progress { background: #051019; border: 1px solid rgba(44, 82, 102, .4); }
.progress > i {
  background: linear-gradient(90deg, #785A28, #C89B3C, #F0E6D2);
  box-shadow: 0 0 10px rgba(200, 155, 60, .55);
}
.progress.gold > i { background: linear-gradient(90deg, #785A28, #C89B3C, #F0E6D2); }

.noble-step.reached .noble-badge { color: #0A1218; }

.empty-state .es-icon {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: linear-gradient(160deg, rgba(200, 155, 60, .1), rgba(10, 50, 60, .3));
  border: 1px solid rgba(200, 155, 60, .25);
  color: var(--gold);
}

hr.hr { border-top-color: rgba(200, 155, 60, .16); }
.hot-rank.top3 { color: var(--gold); text-shadow: 0 0 10px rgba(200, 155, 60, .5); }
.rc-seats b { color: var(--gold); }
.rc-dots i.on { background: var(--hex); box-shadow: 0 0 6px rgba(10, 200, 185, .7); }
.rc-lock { filter: drop-shadow(0 0 5px rgba(200, 155, 60, .5)); }
.comp-price .cp-num, .pkg .pk-price { color: var(--gold); }
.pkg.on { border-color: var(--gold-line); background: rgba(200, 155, 60, .1); }

/* 语音波形/雷达 → 符文青 */
.voice-wave i { background: var(--hex); }
.comp-voice:hover { background: rgba(10, 200, 185, .12); color: var(--hex); }

/* 主题切换圆形层底色跟随 */
.theme-fx { background: #06121B !important; }

/* ---------- 钱包 / 公会：修正旧版白底与酒红渐变 ---------- */
.wallet-hero {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  border: 1px solid rgba(200, 155, 60, .32);
  background:
    radial-gradient(520px 200px at 100% -40%, rgba(10, 150, 170, .18), transparent 70%),
    linear-gradient(120deg, #0D2A38 0%, #07161F 62%, #113340 100%) !important;
  box-shadow: inset 0 1px 0 rgba(240, 230, 210, .08);
}
.wallet-hero .wh-bal:first-of-type .wb-num { color: #E3C47E; text-shadow: 0 0 18px rgba(200, 155, 60, .4); }
.wallet-hero .wb-num[style] { color: #7FDCE8 !important; text-shadow: 0 0 18px rgba(47, 185, 206, .35); }
.wh-sep { background: linear-gradient(180deg, transparent, rgba(200, 155, 60, .4), transparent) !important; }
.wh-actions .btn {
  background: rgba(200, 170, 110, .08) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent; color: var(--gold-bright);
}
.wh-actions .btn:hover { filter: brightness(1.15); }
.wh-actions .btn.light, .btn.light { background: var(--gx-gold) !important; color: #0A1218 !important; text-shadow: 0 1px 0 rgba(255,255,255,.2); }
.recharge-pkg .rp-amount { color: var(--gold-bright); }
.recharge-pkg:hover, .recharge-pkg.on { border-color: var(--gold-line); }

.guild-hero { border-radius: 0; clip-path: var(--gx-bevel); }
.guild-hero .btn-gh {
  background: rgba(200, 170, 110, .1) padding-box, var(--gx-gold-line) border-box;
  border: 1px solid transparent; color: var(--gold-bright);
}
.guild-hero .btn-gh:hover { filter: brightness(1.15); }
.guild-hero .btn-gh-light { background: var(--gx-gold) !important; color: #0A1218 !important; }
.guild-hero .btn-gh-light:hover { filter: brightness(1.08); }
.team-card {
  border-radius: 0;
  clip-path: var(--gx-bevel);
  background: var(--gx-panel-grad) padding-box,
              linear-gradient(180deg, rgba(200, 155, 60, .28), rgba(44, 82, 102, .25)) border-box;
  border: 1px solid transparent;
}

/* 金底气泡 / 语音按钮：金底配深字 */
.bubble-row.me .bubble {
  background: linear-gradient(180deg, #D9BC7E, #C09044) !important;
  color: #0A1218 !important;
}
.voice-card .vc-btn {
  background: linear-gradient(180deg, #D9BC7E, #C89B3C) !important;
  color: #0A1218 !important;
  box-shadow: 0 0 12px rgba(200, 155, 60, .35);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .hall-hero h2 { font-size: 24px; }
}
@media (max-width: 860px) {
  .hall-hero { min-height: 150px; padding: 20px; }
  .hall-hero .hh-rule { left: 20px; }
}