:root {
  --wz-ink: #07090a;
  --wz-panel: rgba(12, 17, 18, 0.94);
  --wz-panel-2: rgba(20, 26, 27, 0.94);
  --wz-line: rgba(179, 133, 63, 0.54);
  --wz-gold: #f0aa2a;
  --wz-gold-hot: #ffd36b;
  --wz-orange: #d95c10;
  --wz-blue: #26a9f2;
  --wz-cyan: #60e7ff;
  --wz-green: #52c750;
  --wz-red: #e5402b;
  --wz-text: #f4ead7;
  --wz-muted: #a9afa7;
  --wz-shadow: 0 20px 56px rgba(0, 0, 0, 0.68);
  --wz-glass: rgba(7, 11, 12, 0.72);
  --wz-hairline: rgba(255, 217, 128, 0.24);
}

html,
body {
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 134, 34, 0.2), transparent 27%),
    radial-gradient(circle at 82% 22%, rgba(44, 144, 190, 0.12), transparent 24%),
    linear-gradient(135deg, #020303, #101414 58%, #170c06);
  font-family: "Microsoft YaHei", "DIN Condensed", "Arial Narrow", sans-serif;
}

button {
  border-radius: 3px;
  letter-spacing: 0;
}

.phone {
  background:
    linear-gradient(180deg, #161b1d, #050607),
    #080b0c;
  border: 1px solid #394242;
  box-shadow:
    0 0 0 2px #050607,
    0 0 0 4px #252d2f,
    var(--wz-shadow),
    0 0 42px rgba(255, 101, 18, 0.16);
}

.phone::before,
.phone::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 80;
}

.phone::before {
  inset: 0;
  border: 1px solid rgba(255, 196, 99, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18% 82%, rgba(255, 120, 24, 0.04)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.72;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 38px rgba(0, 0, 0, 0.62),
    inset 0 0 86px rgba(0, 0, 0, 0.46);
}

.phone::after {
  inset: 7px;
  background:
    linear-gradient(90deg, var(--wz-gold) 0 22px, transparent 22px calc(100% - 22px), var(--wz-gold) calc(100% - 22px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--wz-gold) 0 22px, transparent 22px calc(100% - 22px), var(--wz-gold) calc(100% - 22px)) bottom / 100% 1px no-repeat,
    linear-gradient(var(--wz-gold) 0 22px, transparent 22px calc(100% - 22px), var(--wz-gold) calc(100% - 22px)) left / 1px 100% no-repeat,
    linear-gradient(var(--wz-gold) 0 22px, transparent 22px calc(100% - 22px), var(--wz-gold) calc(100% - 22px)) right / 1px 100% no-repeat;
  opacity: 0.55;
}

.hub-screen,
.panel-screen,
.level-screen {
  background:
    linear-gradient(115deg, rgba(255, 165, 42, 0.05), transparent 36%),
    radial-gradient(circle at 50% 16%, rgba(255, 127, 30, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(5, 8, 8, 0.3), rgba(4, 5, 6, 0.92) 64%, #040505),
    #090d0e;
}

.hub-screen::before,
.panel-screen::before,
.level-screen::before {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 177, 55, 0.055) 49%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px),
    radial-gradient(circle at 24% 40%, rgba(255, 126, 28, 0.1), transparent 26%);
  opacity: 0.86;
}

.hub-screen::after,
.panel-screen::after,
.level-screen::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 8%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 18% 82%, rgba(0, 0, 0, 0.52)),
    linear-gradient(180deg, transparent 0 54%, rgba(0, 0, 0, 0.48) 88%);
}

.profile-block,
.hub-resources span,
.panel-resource-mini span,
.pass-card,
.side-actions button,
.bottom-nav button,
.panel-back,
.shop-tabs button,
.shop-feature,
.shop-grid article,
.weapon-card,
.character-card,
.character-growth,
.equipment-loadout article,
.equipment-materials,
.equipment-pack,
.icon-board,
.mission-card,
.mission-list article,
.mail-list article,
.rank-podium article,
.rank-list article,
.friend-tools button,
.friend-list article,
.base-status,
.base-grid article,
.bag-detail,
.test-panel,
.fake-pay-panel,
.feedback-panel {
  border: 1px solid var(--wz-line);
  background:
    linear-gradient(135deg, rgba(255, 189, 70, 0.12), transparent 21%),
    linear-gradient(180deg, rgba(35, 43, 43, 0.94), rgba(7, 10, 11, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 205, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 -2px 0 rgba(0, 0, 0, 0.74),
    0 7px 18px rgba(0, 0, 0, 0.5);
}

.shop-grid article::before,
.weapon-card::before,
.character-card::before,
.equipment-pack::before,
.mission-card::before,
.bag-detail::before,
.fake-pay-panel::before,
.feedback-panel::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 219, 126, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 10px);
  opacity: 0.82;
}

.profile-block,
.pass-card,
.shop-feature,
.shop-grid article,
.weapon-card,
.equipment-pack,
.character-hero-board,
.bag-detail,
.mission-card,
.mail-list article,
.friend-list article,
.base-status,
.base-grid article {
  position: relative;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.hub-top,
.panel-header {
  left: 8px;
  right: 8px;
  top: 8px;
}

.profile-block {
  min-height: 54px;
  padding: 5px 8px;
  border-color: rgba(137, 158, 154, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 119, 20, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(19, 25, 25, 0.96), rgba(8, 10, 11, 0.96));
}

.portrait-mini {
  border-color: rgba(255, 174, 50, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(255, 133, 28, 0.28);
}

.profile-block b,
.profile-block span,
.hub-resources b,
.panel-resource-mini b,
.pass-card,
.side-actions button,
.bottom-nav button,
.panel-header h2,
.shop-grid article,
.weapon-card,
.stat-stack {
  font-weight: 900;
}

.profile-block b {
  color: #fff4dc;
  text-shadow: 0 2px 2px #000;
}

.profile-block span {
  color: #f3b13a;
}

.profile-block i,
.character-titlebar i,
.stage-title i,
.character-growth i,
.equipment-materials i {
  border-color: rgba(255, 193, 79, 0.38);
  background: #050707;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.profile-block i {
  background:
    linear-gradient(90deg, #ffe26e 0 8%, #e47d14 8% 69%, #1b2423 69%);
}

.hub-resources span,
.panel-resource-mini span,
.character-currency-strip span {
  border-color: rgba(142, 128, 93, 0.55);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255, 171, 42, 0.08), transparent 48%),
    linear-gradient(180deg, #151b1c, #070909);
}

.coin-icon,
.gem-icon,
.energy-icon,
.meat-icon {
  filter: drop-shadow(0 0 5px rgba(255, 191, 63, 0.42));
}

.gem-icon {
  filter: drop-shadow(0 0 6px rgba(176, 83, 255, 0.72));
}

.energy-icon {
  filter: drop-shadow(0 0 6px rgba(78, 199, 255, 0.72));
}

.pass-card {
  top: 78px;
  width: 126px;
  min-height: 74px;
  padding: 9px 9px 8px;
  border-color: rgba(255, 180, 58, 0.68);
  background:
    linear-gradient(135deg, rgba(255, 172, 38, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(18, 23, 24, 0.92), rgba(6, 8, 8, 0.94));
}

.pass-card strong {
  color: #fff0c9;
  font-size: 18px;
}

.pass-card span {
  color: #ffbb36;
}

.pass-card i {
  border-color: #ffbd43;
  background:
    radial-gradient(circle at 38% 34%, #fff5ba 0 15%, transparent 16%),
    radial-gradient(circle, #f59b17 0 56%, #4f2508 58%);
  color: transparent;
}

.side-actions {
  right: 10px;
  top: 86px;
  gap: 7px;
}

.side-actions button {
  position: relative;
  width: 52px;
  min-height: 52px;
  padding-top: 25px;
  border-color: rgba(139, 146, 142, 0.52);
  color: #e6e1d4;
  font-size: 11px;
}

.side-actions button::before,
.bottom-nav button span::before {
  content: "";
  display: block;
  margin: 0 auto;
  background: var(--wz-icon-bg, linear-gradient(180deg, #e6dfc9, #817b6f));
  filter: drop-shadow(0 1px 1px #000);
}

.side-actions button::before {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 21px;
  height: 21px;
  transform: translateX(-50%);
}

.side-actions button[data-panel-target="missions"]::before {
  clip-path: polygon(18% 0, 82% 0, 82% 100%, 18% 100%, 18% 0, 28% 10%, 72% 10%, 72% 90%, 28% 90%, 28% 10%);
}

.side-actions button[data-panel-target="mail"]::before {
  clip-path: polygon(0 12%, 100% 12%, 100% 88%, 0 88%, 0 12%, 50% 55%, 100% 12%, 100% 22%, 50% 64%, 0 22%);
}

.side-actions button[data-panel-target="rank"]::before {
  clip-path: polygon(5% 100%, 5% 48%, 28% 48%, 28% 100%, 38% 100%, 38% 22%, 62% 22%, 62% 100%, 72% 100%, 72% 6%, 95% 6%, 95% 100%);
}

.side-actions button[data-panel-target="friends"]::before {
  clip-path: polygon(34% 0, 50% 14%, 66% 0, 82% 16%, 70% 38%, 91% 57%, 82% 100%, 18% 100%, 9% 57%, 30% 38%, 18% 16%);
}

.side-actions button::after,
.bottom-nav button::after,
.character-forge-button i,
.character-merge-button i,
.bag-tabs button::after,
.bag-item::after,
.panel-character .equip-slots button::after {
  background:
    radial-gradient(circle at 38% 35%, #ffd56b 0 16%, transparent 17%),
    radial-gradient(circle, #ff361c 0 58%, #7b0a05 59%);
  border-color: #f3a62c;
}

.hero-stage {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), transparent 20% 74%, rgba(0, 0, 0, 0.68)),
    radial-gradient(circle at 48% 49%, rgba(255, 179, 62, 0.16), transparent 23%),
    radial-gradient(circle at 52% 70%, rgba(255, 102, 18, 0.16), transparent 34%),
    url("./assets/characters/armor-hunter.png") center top / cover no-repeat;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 185, 73, 0.08) 43%, transparent 45%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 16% 80%, rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 35% 32%, rgba(255, 99, 25, 0.12), transparent 14%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px);
  opacity: 0.92;
}

.hero-stage::after {
  background:
    linear-gradient(180deg, rgba(111, 255, 71, 0.08), transparent 18%),
    linear-gradient(180deg, transparent 0 62%, rgba(0, 0, 0, 0.86) 98%),
    radial-gradient(circle at 50% 18%, transparent 0 32%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.78) 100%);
}

.battle-button {
  bottom: 84px;
  min-width: 268px;
  height: 68px;
  border: 1px solid #ffcf6f;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 14% 86%, rgba(255, 255, 255, 0.1)),
    linear-gradient(90deg, transparent 0 8%, rgba(255, 123, 16, 0.88) 8% 13%, transparent 13% 87%, rgba(255, 123, 16, 0.88) 87% 92%, transparent 92%),
    linear-gradient(180deg, #ffd15e 0, #d06d10 50%, #7a2b05 51%, #3a1505 100%);
  color: #fff7d8;
  box-shadow:
    0 0 0 2px rgba(71, 31, 8, 0.9),
    0 0 28px rgba(255, 113, 15, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -5px 0 rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.battle-button:hover {
  filter: brightness(1.12) saturate(1.08);
  box-shadow:
    0 0 0 2px rgba(71, 31, 8, 0.9),
    0 0 34px rgba(255, 142, 35, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -5px 0 rgba(0, 0, 0, 0.32);
}

.battle-button::before,
.battle-button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 26px;
  border-top: 2px solid #ff8f23;
  border-bottom: 2px solid #ff8f23;
  transform: translateY(-50%);
}

.battle-button::before {
  left: 18px;
}

.battle-button::after {
  right: 18px;
}

.battle-button span {
  font-size: 29px;
  text-shadow: 0 3px 0 #7a2500;
}

.bottom-nav {
  min-height: 72px;
  border-top: 1px solid rgba(255, 185, 69, 0.52);
  background:
    linear-gradient(180deg, rgba(33, 39, 40, 0.96), rgba(6, 7, 8, 0.98));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.48);
}

.bottom-nav button {
  min-height: 72px;
  border-color: rgba(103, 91, 71, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(180deg, rgba(28, 34, 35, 0.94), rgba(7, 9, 9, 0.96));
  color: #bdb7a9;
  font-size: 13px;
}

.bottom-nav button.active {
  background:
    linear-gradient(180deg, rgba(255, 183, 52, 0.18), rgba(255, 112, 20, 0.07) 44%, rgba(7, 9, 9, 0.96)),
    linear-gradient(180deg, rgba(36, 42, 41, 0.98), rgba(8, 9, 9, 0.98));
}

.bottom-nav button span {
  height: 27px;
  margin: 0 auto 3px;
  color: transparent;
  font-size: 0;
}

.bottom-nav button span::before {
  width: 28px;
  height: 27px;
}

.bottom-nav button[data-screen="shop"] span::before {
  clip-path: polygon(8% 36%, 84% 36%, 72% 76%, 20% 76%, 8% 36%, 18% 36%, 25% 18%, 72% 18%, 82% 36%, 68% 36%, 62% 28%, 34% 28%, 28% 36%);
}

.bottom-nav button[data-screen="character"] span::before {
  clip-path: polygon(50% 0, 72% 16%, 78% 42%, 66% 62%, 84% 100%, 16% 100%, 34% 62%, 22% 42%, 28% 16%);
}

.bottom-nav button[data-screen="equipment"] span::before {
  clip-path: polygon(50% 0, 70% 18%, 100% 20%, 78% 44%, 86% 76%, 56% 66%, 28% 100%, 16% 88%, 44% 56%, 28% 42%, 0 46%, 18% 22%);
}

.bottom-nav button[data-screen="hub"] span::before {
  --wz-icon-bg: linear-gradient(180deg, #ffe69b, #d67012 70%, #813006);
  clip-path: polygon(45% 0, 55% 0, 60% 38%, 100% 30%, 100% 43%, 64% 56%, 72% 100%, 55% 100%, 50% 65%, 45% 100%, 28% 100%, 36% 56%, 0 43%, 0 30%, 40% 38%);
}

.bottom-nav button[data-screen="base"] span::before {
  clip-path: polygon(18% 100%, 18% 38%, 10% 38%, 50% 4%, 90% 38%, 82% 38%, 82% 100%, 62% 100%, 62% 62%, 38% 62%, 38% 100%);
}

.bottom-nav button.active {
  color: #ffe8a8;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 190, 64, 0.34), transparent 47%),
    linear-gradient(180deg, rgba(83, 55, 14, 0.96), rgba(12, 10, 7, 0.98));
}

.bottom-nav button.active::before {
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffc34c, transparent);
}

.panel-header {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 177, 55, 0.24);
  background: linear-gradient(180deg, rgba(9, 12, 13, 0.92), rgba(9, 12, 13, 0.28));
}

.panel-back {
  border-color: rgba(255, 183, 58, 0.6);
  background:
    linear-gradient(180deg, rgba(42, 48, 48, 0.94), rgba(6, 8, 8, 0.98));
  color: #ffcf73;
}

.panel-header h2 {
  color: #ffe8bd;
  font-size: 21px;
  letter-spacing: 1px;
}

.panel-content {
  left: 8px;
  right: 8px;
}

.panel-character {
  bottom: 72px;
  padding: 0 8px 10px;
  background:
    radial-gradient(circle at 42% 17%, rgba(78, 170, 190, 0.12), transparent 23%),
    radial-gradient(circle at 62% 39%, rgba(255, 128, 29, 0.12), transparent 22%),
    linear-gradient(180deg, #111616 0, #0c0f0f 45%, #160d08 46%, #100804 100%);
}

.character-hero-board {
  grid-template-columns: 56px minmax(0, 1fr) 142px;
  grid-template-rows: 78px 292px 48px;
  min-height: 428px;
  padding: 12px 9px 8px;
  border: 1px solid rgba(166, 126, 73, 0.44);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), transparent 28%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(ellipse at 46% 77%, rgba(255, 187, 78, 0.34) 0 10%, transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 38px),
    linear-gradient(120deg, #2d332f, #171c1d 52%, #21150d);
}

.character-hero-board::before {
  inset: 82px 14px 55px 70px;
  border-color: rgba(112, 124, 119, 0.18);
  background:
    radial-gradient(circle at 50% 12%, rgba(98, 185, 204, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.28));
}

.character-profile-chip .portrait-mini {
  border-color: #f6a82a;
  box-shadow: 0 0 16px rgba(255, 119, 16, 0.34), 0 4px 12px rgba(0, 0, 0, 0.6);
}

.profile-level {
  background: linear-gradient(180deg, #ffe35d, #e87711);
  border-color: #fff0a6;
}

.character-titlebar b {
  color: #fff0d7;
}

.character-titlebar em {
  background:
    linear-gradient(90deg, #18a9e8, #74ecff);
  box-shadow: 0 0 12px rgba(75, 215, 255, 0.42);
}

.character-side-tools button {
  border: 1px solid rgba(165, 119, 64, 0.55);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 218, 132, 0.24), transparent 38%),
    linear-gradient(180deg, #4a3824, #140d08);
  color: #ffe5ba;
}

.panel-character .portrait-list {
  border: 1px solid rgba(143, 102, 51, 0.4);
  border-radius: 5px;
  background: rgba(8, 10, 9, 0.68);
}

.panel-character .portrait-list button {
  border-color: rgba(130, 138, 134, 0.62);
  border-radius: 4px;
  box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.38);
}

.panel-character .portrait-list button.active {
  border-color: #ffbd43;
  box-shadow:
    0 0 0 1px #7b3b05,
    0 0 14px rgba(255, 144, 27, 0.6);
}

.panel-character-art {
  width: min(255px, 122%);
  height: 306px;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 12px rgba(255, 115, 24, 0.12));
}

.panel-character-art::before,
.panel-character-art::after {
  height: 13px;
  background: linear-gradient(90deg, transparent, #57e7ff 42% 58%, transparent);
}

.character-rank-badge {
  color: #fff2d2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(108, 118, 121, 0.9));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.58));
}

.character-gem-shortcut {
  border: 1px solid rgba(255, 202, 100, 0.24);
  background:
    linear-gradient(180deg, rgba(72, 72, 63, 0.82), rgba(18, 19, 15, 0.86));
}

.panel-character .stat-stack {
  background:
    radial-gradient(circle at 25px 19px, #fff26f 0 10px, #ff7b00 11px 22px, transparent 23px),
    linear-gradient(90deg, #ee7f18, #c74207 62%, #7a1f05);
  box-shadow:
    0 0 0 1px rgba(255, 201, 89, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.46);
}

.panel-character .stat-stack strong {
  color: #fff2ce;
  font-size: 22px;
}

.panel-character .equip-slots {
  grid-auto-rows: 90px;
}

.panel-character .equip-slots button,
.equipment-pack i,
.bag-item {
  border-color: rgba(163, 106, 43, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 237, 173, 0.11), transparent 28%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #3b3d37, #141714 65%, #070808);
  box-shadow:
    inset 0 0 0 1px rgba(255, 203, 99, 0.16),
    inset 0 -10px 16px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.45);
}

.panel-character .equip-slots button.equipped,
.bag-item.equipped {
  border-color: rgba(70, 220, 255, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(70, 220, 255, 0.32),
    0 0 18px rgba(56, 187, 255, 0.3);
}

.gear-icon,
.bag-item img,
.equipment-pack i {
  filter:
    drop-shadow(0 4px 2px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 7px rgba(255, 147, 39, 0.22));
}

.character-plan-tabs {
  border: 1px solid rgba(132, 85, 37, 0.52);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(72, 46, 23, 0.88), rgba(20, 12, 7, 0.92));
}

.character-plan-tabs button,
.character-plan-tabs strong {
  border-radius: 5px;
  background: linear-gradient(180deg, #554635, #1b1713);
  color: #d8c5a5;
}

.character-plan-tabs button.active,
.character-forge-button,
.character-merge-button,
.shop-feature button,
.shop-grid article button,
.bag-detail button:not(:disabled),
.gold-action {
  border: 1px solid #ffd16b;
  background:
    linear-gradient(180deg, #ffe072 0, #dc7d13 51%, #9b4307 52%, #5c2205 100%) !important;
  color: #fff2c8 !important;
  text-shadow: 0 2px 1px #6a2600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 0 rgba(0, 0, 0, 0.24),
    0 4px 10px rgba(0, 0, 0, 0.42);
}

.green-action {
  border-color: #9af477;
  background: linear-gradient(180deg, #6bd44b, #2b7f20 52%, #123d10) !important;
}

.blue-action {
  border-color: #7bd8ff;
  background: linear-gradient(180deg, #3ab7e2, #146082 52%, #0b3145) !important;
}

.panel-character .character-growth,
.character-backpack {
  border: 1px solid rgba(132, 85, 37, 0.34);
  background:
    linear-gradient(180deg, rgba(23, 17, 12, 0.96), rgba(13, 8, 5, 0.98));
}

.character-backpack-head {
  grid-template-columns: minmax(0, 1fr) 106px 126px;
  padding: 7px 2px 2px;
}

.character-backpack-head b {
  color: #dca465;
  font-size: 19px;
}

.character-backpack-head b::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background: #795126;
  box-shadow: inset 0 0 0 3px #2a1909;
}

.character-backpack-head button {
  border: 1px solid rgba(149, 124, 92, 0.42);
  background: linear-gradient(180deg, #5b5141, #211a12);
}

.backpack-grid {
  gap: 6px;
}

.bag-item {
  border-width: 1px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(135deg, rgba(255, 206, 91, 0.12), transparent 24%),
    linear-gradient(180deg, #551a13, #160807);
}

.bag-item.prism {
  border-color: rgba(92, 213, 255, 0.8);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(180deg, #1a4554, #071017);
}

.bag-item.amber {
  border-color: rgba(248, 174, 46, 0.86);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 235, 174, 0.2), transparent 21%),
    linear-gradient(180deg, #70430e, #180b04);
}

.bag-item b {
  color: #ffdc55;
  text-shadow: 0 1px 1px #000;
}

.bag-item i {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(2, 3, 3, 0.72);
}

.bag-detail {
  border-color: rgba(198, 132, 48, 0.54);
  background:
    linear-gradient(90deg, rgba(255, 112, 24, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(31, 22, 15, 0.97), rgba(9, 7, 5, 0.98));
}

.bag-detail-icon {
  border-radius: 3px;
  background:
    var(--item-image) center / 82% 82% no-repeat,
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.24), transparent 22%),
    linear-gradient(180deg, #722116, #150606);
}

.bag-tabs {
  border-top-color: rgba(223, 132, 27, 0.44);
  background: #090605;
}

.bag-tabs button {
  background: linear-gradient(180deg, #c7bda8, #95856c);
}

.bag-tabs button.active {
  background: linear-gradient(180deg, #ffc64b, #e56d13);
}

.panel-equipment {
  grid-template-columns: 1fr 64px;
  grid-template-rows: minmax(252px, 1fr) auto auto 60px;
}

.weapon-card {
  grid-template-rows: 60% 1fr;
  padding: 12px;
  border-color: rgba(255, 174, 50, 0.6);
  background:
    radial-gradient(circle at 47% 34%, rgba(255, 119, 20, 0.22), transparent 29%),
    linear-gradient(180deg, rgba(20, 27, 28, 0.96), rgba(6, 8, 8, 0.98));
}

.weapon-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 177, 54, 0.16);
  pointer-events: none;
}

.weapon-art {
  position: relative;
  border-bottom: 1px solid rgba(255, 174, 50, 0.28);
  background:
    url("./assets/battle/weapon-gatling.png") center 54% / 92% auto no-repeat,
    radial-gradient(circle at 50% 54%, rgba(255, 138, 30, 0.42), transparent 28%),
    linear-gradient(180deg, rgba(36, 46, 45, 0.82), rgba(4, 6, 6, 0.96));
}

.weapon-art::before,
.weapon-art::after {
  content: "";
  position: absolute;
  left: 16%;
  top: 40%;
  height: 24%;
  transform: skewX(-18deg);
}

.weapon-art::before {
  width: 68%;
  background: linear-gradient(90deg, transparent, rgba(255, 130, 24, 0.48), transparent);
  box-shadow: 0 0 22px rgba(255, 109, 19, 0.28);
  opacity: 0.5;
}

.weapon-art::after {
  left: 7%;
  top: 45%;
  width: 22%;
  height: 12%;
  background: rgba(255, 170, 50, 0.32);
  box-shadow: 80px -10px 0 -4px rgba(240, 170, 42, 0.36);
  opacity: 0.65;
}

.weapon-card b {
  color: #ffb132;
}

.weapon-list button {
  border-color: rgba(255, 174, 50, 0.6);
  background:
    var(--weapon-thumb, url("./assets/battle/weapon-gatling.png")) center 5px / 92% 68% no-repeat,
    linear-gradient(180deg, #272f30, #080a0a);
  color: #ffd27a;
  padding-top: 34px;
}

.weapon-list button[data-weapon="flame-cannon"] { --weapon-thumb: url("./assets/battle/weapon-gatling.png"); }
.weapon-list button[data-weapon="frost-rail"] { --weapon-thumb: url("./assets/battle/weapon-rail.png"); }
.weapon-list button[data-weapon="thunder-array"] { --weapon-thumb: url("./assets/battle/weapon-laser.png"); }
.weapon-list button[data-weapon="void-saw"] { --weapon-thumb: url("./assets/battle/weapon-tesla.png"); }
.weapon-list button[data-weapon="drone-core"] { --weapon-thumb: url("./assets/battle/weapon-drone.png"); }

.weapon-list button.active {
  border-color: #ffbd43;
}

.equipment-loadout article,
.equipment-materials,
.equipment-pack {
  border-color: rgba(166, 126, 73, 0.48);
}

.equipment-pack {
  background:
    linear-gradient(180deg, rgba(20, 26, 27, 0.94), rgba(7, 9, 9, 0.96));
}

.equipment-pack i {
  border-width: 1px;
}

.equipment-pack i::after {
  content: "Lv.1";
}

.equipment-pack i[data-tier="purple"] {
  border-color: rgba(174, 95, 255, 0.72);
  background:
    var(--pack-image, url("./assets/items/chip-core.svg")) center / 74% 74% no-repeat,
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(180deg, #52247d, #160d22);
}

.equipment-pack i[data-tier="orange"] {
  border-color: rgba(255, 174, 50, 0.88);
  background:
    var(--pack-image, url("./assets/items/gear-armor.svg")) center / 74% 74% no-repeat,
    radial-gradient(circle at 50% 38%, rgba(255, 230, 146, 0.24), transparent 21%),
    linear-gradient(180deg, #854215, #180904);
}

.equipment-pack i[data-tier="blue"] {
  border-color: rgba(76, 190, 255, 0.75);
  background:
    var(--pack-image, url("./assets/items/mat-coolant.svg")) center / 74% 74% no-repeat,
    radial-gradient(circle at 50% 38%, rgba(140, 226, 255, 0.22), transparent 20%),
    linear-gradient(180deg, #134d7a, #071321);
}

.panel-shop {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.shop-tabs {
  grid-column: 1;
  grid-row: 1 / 3;
  grid-template-columns: 1fr;
  gap: 6px;
}

.shop-tabs button {
  min-height: 52px;
  border-color: rgba(128, 111, 82, 0.5);
  background: linear-gradient(180deg, rgba(34, 41, 41, 0.95), rgba(7, 9, 9, 0.98));
  color: #cfc4ad;
}

.shop-tabs button.active {
  color: #ffe6a0;
  background:
    linear-gradient(90deg, #c87712 0 7px, transparent 7px),
    linear-gradient(180deg, #6b4715, #130d07);
}

.shop-feature {
  grid-column: 2;
  min-height: 154px;
  border-color: rgba(255, 174, 50, 0.68);
  background:
    radial-gradient(circle at 25% 52%, rgba(255, 190, 82, 0.32), transparent 21%),
    linear-gradient(112deg, #6a370d 0 38%, #1b2020 39% 72%, #090b0b 73%);
}

.shop-feature::before {
  background:
    url("./assets/items/shop-pack.svg") center / 80% 80% no-repeat,
    radial-gradient(circle at 50% 42%, rgba(70, 183, 255, 0.34), transparent 27%),
    linear-gradient(180deg, #333d40, #0c1214);
  border: 1px solid rgba(255, 186, 70, 0.62);
  transform: rotate(-5deg);
}

.shop-feature em {
  color: #ffd46f;
}

.shop-feature b {
  color: #fff0c6;
}

.shop-grid {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-grid article {
  min-height: 160px;
  border-color: rgba(214, 139, 39, 0.68);
  background:
    linear-gradient(180deg, rgba(96, 56, 15, 0.95), rgba(38, 23, 10, 0.98) 58%, rgba(9, 9, 8, 0.98));
  color: var(--wz-text);
}

.shop-grid article i {
  width: 82px;
  height: 58px;
  border: 1px solid rgba(255, 186, 70, 0.72);
  background:
    var(--shop-image, url("./assets/items/shop-pack.svg")) center / contain no-repeat,
    radial-gradient(circle at 50% 42%, rgba(64, 178, 255, 0.42), transparent 32%),
    linear-gradient(180deg, #334046, #101719);
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.28),
    0 8px 14px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(255, 149, 38, 0.18);
}

.shop-grid article b {
  color: #ffe0a0;
}

.shop-grid article span {
  color: #e8c47e;
}

.level-summary,
.level-grid button,
.result-panel,
.skill-card {
  border-color: rgba(174, 120, 50, 0.54);
  background:
    linear-gradient(135deg, rgba(255, 174, 42, 0.13), transparent 24%),
    linear-gradient(180deg, rgba(24, 31, 32, 0.96), rgba(7, 9, 9, 0.98));
}

.top-hud {
  background:
    linear-gradient(90deg, rgba(255, 171, 42, 0.09), transparent 26% 74%, rgba(38, 169, 242, 0.06)),
    linear-gradient(180deg, rgba(3, 5, 6, 0.92), rgba(3, 5, 6, 0.1));
  border-bottom: 1px solid rgba(255, 189, 70, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stage-title strong {
  white-space: normal;
  word-break: keep-all;
}

.stage-title strong,
.skill-panel h2,
.result-panel strong {
  color: #ffe6b5;
}

.skill-panel {
  border-color: rgba(174, 120, 50, 0.54);
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.92), rgba(5, 6, 7, 0.96));
}

.skill-card {
  align-items: start;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  justify-items: stretch;
  min-height: 160px;
  padding: 0 10px 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.skill-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 18% 62%, rgba(255, 149, 31, 0.06)),
    linear-gradient(180deg, rgba(255, 187, 62, 0.08), transparent 42%);
  opacity: 0.72;
}

.skill-card .skill-icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 145, 31, 0.74);
  border-radius: 50%;
  background:
    var(--skill-art) center / cover no-repeat,
    radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.24), transparent 20%),
    linear-gradient(180deg, #20292c, #070909);
  color: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255, 156, 31, 0.25),
    0 0 16px rgba(255, 124, 25, 0.28);
}

.skill-card .skill-copy {
  align-self: stretch;
  display: grid;
  gap: 5px;
  margin-top: 12px;
  min-width: 0;
}

.skill-card .skill-copy strong {
  align-items: center;
  color: #ffe6b5;
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  line-height: 1.15;
  margin: 0;
}

.skill-card .skill-copy strong em {
  background: linear-gradient(180deg, #3d2b12, #090909);
  border: 1px solid rgba(255, 190, 72, 0.58);
  border-radius: 3px;
  color: #ffd46c;
  flex: none;
  font-size: 10px;
  font-style: normal;
  padding: 2px 4px;
  white-space: nowrap;
}

.skill-card .skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.skill-card .skill-tags i {
  background: rgba(20, 32, 35, 0.88);
  border: 1px solid rgba(72, 182, 221, 0.4);
  border-radius: 3px;
  color: #bdefff;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
  padding: 3px 4px;
}

.skill-card .skill-effect {
  color: #f3ead8;
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.skill-card .skill-copy small {
  color: #aeb8b0;
  display: block;
  font-size: 10px;
  line-height: 1.3;
  margin: 0;
}

.skill-panel {
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.72), rgba(5, 6, 7, 0.84));
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.skill-card {
  align-items: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 161, 40, 0.15), transparent 34%),
    linear-gradient(180deg, rgba(21, 27, 28, 0.94), rgba(7, 9, 10, 0.98));
  border-color: rgba(255, 190, 74, 0.38);
  gap: 8px;
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 122px;
  padding: 12px 8px 10px;
  text-align: center;
}

.skill-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(135deg, rgba(255, 183, 67, 0.1), transparent 34%);
  opacity: 0.52;
}

.skill-card .skill-icon {
  height: 60px;
  margin-top: 0;
  width: 60px;
  z-index: 1;
}

.skill-card .skill-copy {
  gap: 0;
  margin-top: 0;
  text-align: center;
  z-index: 1;
}

.skill-card .skill-copy strong {
  align-items: center;
  color: #fff0c8;
  display: grid;
  font-size: 13px;
  gap: 5px;
  justify-items: center;
  line-height: 1.12;
  text-shadow: 0 2px 0 #000;
}

.skill-card .skill-copy strong em {
  font-size: 9px;
  padding: 1px 3px;
}

.skill-card .skill-tags {
  display: none;
}

.skill-card .skill-tags i {
  font-size: 9px;
  padding: 2px 4px;
}

.skill-card .skill-effect {
  display: none;
}

.skill-card .skill-copy small {
  display: none;
}

.skill-card .skill-icon,
.round-slot {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.72),
    0 0 15px rgba(255, 124, 25, 0.28);
}

.round-slot {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 145, 31, 0.72);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 134, 22, 0.24), transparent 42%),
    linear-gradient(180deg, #20292c, #070909);
  overflow: visible;
  backdrop-filter: blur(2px);
}

.round-slot .skill-art {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    var(--skill-art) center / cover no-repeat,
    radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(180deg, #1a2022, #050607);
  box-shadow:
    inset 0 0 0 2px rgba(255, 156, 31, 0.25),
    inset 0 -8px 14px rgba(0, 0, 0, 0.38);
  color: transparent;
}

.right-hud .hero-card,
.battle-supply,
.speed-btn,
.icon-btn,
.green-hp {
  border-color: rgba(255, 190, 76, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(21, 29, 30, 0.84), rgba(5, 7, 8, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.36);
}

.green-hp div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(90deg, #2bd33a, #9eff56);
  box-shadow: 0 0 12px rgba(85, 255, 78, 0.38);
}

.round-slot.ready {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(255, 124, 25, 0.5);
}

.round-slot.cooling .skill-art {
  filter: grayscale(0.48) brightness(0.72);
}

.round-slot .skill-level {
  right: -4px;
  bottom: -2px;
  border-color: rgba(255, 196, 87, 0.72);
  background: linear-gradient(180deg, #312519, #060606);
  color: #ffe1a2;
}

.round-slot .skill-cooldown {
  inset: 2px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.66);
}

@media (max-width: 430px) {
  .character-hero-board {
    grid-template-columns: 48px minmax(0, 1fr) 128px;
  }

  .panel-character .equip-slots {
    grid-auto-rows: 82px;
  }

  .character-backpack-head {
    grid-template-columns: minmax(0, 1fr) 86px 108px;
  }

  .character-backpack-head b {
    font-size: 16px;
  }

  .character-backpack-head button,
  .character-merge-button {
    font-size: 13px !important;
  }

  .shop-grid article {
    min-height: 148px;
  }
}

/* WEB017 aesthetic polish: armored dark-gold sci-fi UI layer */
:root {
  --wz-brass: #b66d17;
  --wz-brass-2: #ffbd4b;
  --wz-steel: #263033;
  --wz-steel-dark: #070a0b;
  --wz-toxic: #87ff3f;
  --wz-edge: rgba(255, 190, 76, 0.62);
}

.phone {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 150, 34, 0.1), transparent 32%),
    linear-gradient(180deg, #101719, #040506);
  border-color: rgba(145, 113, 70, 0.5);
}

.phone::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 15% 82%, rgba(255, 128, 28, 0.05)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 168, 49, 0.012) 0 1px, transparent 1px 22px);
}

.hub-screen,
.panel-screen,
.level-screen {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 17% 83%, rgba(0, 0, 0, 0.54)),
    radial-gradient(circle at 50% 11%, rgba(255, 150, 36, 0.14), transparent 27%),
    radial-gradient(circle at 82% 36%, rgba(87, 255, 63, 0.06), transparent 26%),
    linear-gradient(180deg, #0a1011 0, #070909 48%, #130b06 100%);
}

.panel-screen::before,
.hub-screen::before,
.level-screen::before {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 188, 72, 0.045) 49%, transparent 51%),
    linear-gradient(90deg, transparent 0 8%, rgba(255, 161, 41, 0.035) 8.5% 9%, transparent 9.5% 91%, rgba(255, 161, 41, 0.035) 91.5% 92%, transparent 92.5%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 6px);
}

.profile-block,
.hub-resources span,
.panel-resource-mini span,
.pass-card,
.side-actions button,
.bottom-nav button,
.panel-back,
.shop-tabs button,
.shop-feature,
.shop-grid article,
.weapon-card,
.character-card,
.character-growth,
.character-backpack,
.equipment-loadout article,
.equipment-materials,
.equipment-pack,
.bag-detail,
.level-summary,
.level-grid button,
.result-panel,
.skill-card,
.mission-card,
.mail-list article,
.rank-podium article,
.rank-list article,
.friend-list article,
.base-status,
.base-grid article {
  border-color: rgba(255, 183, 68, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 224, 143, 0.11), transparent 22%),
    linear-gradient(180deg, rgba(36, 45, 46, 0.88), rgba(8, 11, 12, 0.96) 64%, rgba(5, 6, 7, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 216, 0.14),
    inset 0 0 0 1px rgba(255, 196, 92, 0.055),
    inset 0 -10px 22px rgba(0, 0, 0, 0.35),
    0 9px 22px rgba(0, 0, 0, 0.46);
}

.shop-grid article,
.equipment-pack,
.bag-item,
.panel-character .equip-slots button,
.weapon-list button,
.level-grid button {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.shop-grid article:hover,
.bag-item:hover,
.panel-character .equip-slots button:hover,
.weapon-list button:hover,
.level-grid button:hover:not(:disabled) {
  border-color: rgba(255, 214, 112, 0.86);
  filter: brightness(1.08) saturate(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 216, 0.2),
    0 0 18px rgba(255, 143, 31, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.5);
}

.bottom-nav {
  background:
    linear-gradient(180deg, rgba(45, 48, 45, 0.94), rgba(5, 6, 7, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 190, 76, 0.06) 0 1px, transparent 1px 54px);
}

.bottom-nav button {
  border-left: 1px solid rgba(255, 190, 76, 0.12);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}

.bottom-nav button.active {
  background:
    linear-gradient(180deg, rgba(255, 206, 91, 0.28), rgba(181, 91, 10, 0.24) 42%, rgba(8, 8, 7, 0.98)),
    linear-gradient(180deg, rgba(44, 48, 46, 0.92), rgba(6, 7, 8, 0.96));
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 157, 0.26),
    inset 0 -2px 0 rgba(255, 115, 24, 0.22);
}

.phone:not(.screen-panel) .panel-bottom-nav {
  display: none;
  pointer-events: none;
}

.phone.screen-panel .panel-bottom-nav {
  display: grid;
  pointer-events: auto;
}

.battle-button {
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
  isolation: isolate;
}

.battle-button span {
  letter-spacing: 1px;
}

.battle-button b {
  color: #ffe59a;
  filter: drop-shadow(0 0 8px rgba(255, 177, 48, 0.72));
}

.hero-stage {
  box-shadow:
    inset 0 -90px 80px rgba(0, 0, 0, 0.86),
    inset 0 0 72px rgba(0, 0, 0, 0.46);
}

.hero-stage::before {
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 185, 73, 0.075) 43%, transparent 45%),
    radial-gradient(circle at 50% 64%, rgba(255, 128, 24, 0.2), transparent 18%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), transparent 17% 80%, rgba(0, 0, 0, 0.52)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px);
}

.panel-character {
  background:
    radial-gradient(circle at 50% 18%, rgba(68, 226, 255, 0.12), transparent 24%),
    radial-gradient(circle at 52% 47%, rgba(255, 132, 28, 0.14), transparent 25%),
    linear-gradient(180deg, #121818 0, #0a0d0d 48%, #140b06 100%);
}

.character-hero-board {
  border-color: rgba(255, 181, 66, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 194, 0.14),
    inset 0 0 36px rgba(0, 0, 0, 0.36),
    0 12px 28px rgba(0, 0, 0, 0.42);
}

.panel-character-art {
  filter:
    drop-shadow(0 24px 26px rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 18px rgba(255, 116, 22, 0.16))
    saturate(1.08)
    contrast(1.05);
}

.panel-character .stat-stack {
  clip-path: polygon(24px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 24px 100%, 0 50%);
  background:
    radial-gradient(circle at 30px 50%, #fff26f 0 9px, #ff7a00 10px 21px, transparent 22px),
    linear-gradient(90deg, #f39a23, #c44b08 62%, #641c05);
}

.panel-character .equip-slots button,
.bag-item,
.equipment-pack i {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

.bag-item.selected,
.bag-item.equipped,
.panel-character .equip-slots button.equipped,
.weapon-list button.active {
  border-color: rgba(102, 235, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(102, 235, 255, 0.3),
    0 0 18px rgba(79, 216, 255, 0.34),
    0 8px 16px rgba(0, 0, 0, 0.45);
}

.bag-detail {
  backdrop-filter: blur(8px);
}

.bag-detail-icon {
  border: 1px solid rgba(255, 196, 92, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 14px rgba(255, 138, 27, 0.2);
}

.weapon-card,
.shop-feature {
  overflow: hidden;
}

.weapon-card::after,
.shop-feature::after,
.character-hero-board::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 20%, rgba(255, 255, 255, 0.07) 24%, transparent 34%),
    linear-gradient(180deg, rgba(255, 190, 76, 0.06), transparent 36%);
  opacity: 0.78;
}

.weapon-art {
  background:
    url("./assets/battle/weapon-gatling.png") center 54% / 92% auto no-repeat,
    radial-gradient(circle at 50% 54%, rgba(255, 138, 30, 0.48), transparent 26%),
    radial-gradient(circle at 50% 75%, rgba(0, 0, 0, 0.56), transparent 31%),
    linear-gradient(180deg, rgba(43, 55, 55, 0.86), rgba(4, 6, 6, 0.98));
}

.shop-grid article {
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.shop-grid article i {
  border-radius: 2px;
  transform: perspective(220px) rotateX(3deg);
}

.top-hud {
  backdrop-filter: blur(4px);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 20% 80%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(5, 8, 10, 0.82), rgba(5, 8, 10, 0.08));
}

.stage-title strong {
  color: #fff1c7;
  text-shadow:
    0 2px 0 #000,
    0 0 10px rgba(255, 158, 36, 0.32);
}

.right-hud .hero-card,
.battle-supply,
.speed-btn,
.icon-btn {
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.round-slot {
  width: 34px;
  height: 34px;
}

.round-slot .skill-art {
  width: 30px;
  height: 30px;
}

.bottom-fort {
  background:
    linear-gradient(180deg, transparent, rgba(6, 8, 10, 0.18) 22%, rgba(3, 4, 5, 0.42));
}

.fence {
  opacity: 0.82;
}

.green-hp {
  border-color: rgba(202, 255, 186, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    0 0 14px rgba(87, 255, 78, 0.18);
}

.skill-modal {
  backdrop-filter: blur(4px);
}

.skill-panel {
  max-width: 420px;
}

.skill-kicker {
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  font-size: 18px;
  margin-bottom: 14px;
  padding: 7px 34px;
}

.skill-card {
  min-height: 106px;
  padding: 10px 6px 9px;
}

.skill-card .skill-icon {
  height: 54px;
  width: 54px;
}

@media (max-width: 430px) {
  .round-slot {
    width: 32px;
    height: 32px;
  }

  .round-slot .skill-art {
    width: 28px;
    height: 28px;
  }

  .skill-grid {
    gap: 8px;
  }
}

/* WEB017 aesthetic polish pass 2: tighter premium sci-fi finish */
.phone::after {
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(255, 184, 71, 0.14) 5.4%, transparent 5.8% 94.2%, rgba(255, 184, 71, 0.14) 94.6%, transparent 95%),
    radial-gradient(circle at 50% 8%, rgba(255, 191, 85, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 10% 88%, rgba(255, 140, 25, 0.06));
  mix-blend-mode: screen;
  opacity: 0.72;
}

.panel-header,
.level-header,
.character-shell,
.equipment-showcase,
.shop-shell,
.base-dashboard,
.mission-card,
.mail-card,
.friend-card {
  background-image:
    linear-gradient(135deg, rgba(255, 183, 63, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(16, 22, 22, 0.92), rgba(6, 8, 9, 0.96));
}

.panel-header::before,
.level-header::before,
.character-shell::before,
.equipment-showcase::before,
.shop-shell::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 184, 71, 0.42), transparent);
  content: "";
  height: 1px;
  left: 14px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 0;
}

.bottom-nav button,
.panel-bottom-nav button,
.shop-tab,
.equipment-action,
.character-plan button,
.level-start-button,
.fake-pay-actions button,
.skill-refresh {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -2px 0 rgba(0, 0, 0, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 2px #000;
}

.bottom-nav button.active,
.panel-bottom-nav button.active,
.shop-tab.active,
.character-plan button.active {
  background:
    linear-gradient(180deg, #ffc75a, #c56f13 62%, #5c2d08);
  color: #fff8d8;
  border-color: rgba(255, 217, 111, 0.92);
}

.resource-pill,
.panel-resource-mini span,
.hub-resources span {
  background:
    linear-gradient(180deg, rgba(37, 43, 43, 0.92), rgba(8, 10, 10, 0.96));
  border: 1px solid rgba(255, 185, 66, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(255, 132, 26, 0.1);
}

.weapon-card,
.shop-card,
.bag-item,
.equip-slot,
.base-building {
  transform: translateZ(0);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    filter 160ms ease;
}

.weapon-card:hover,
.shop-card:hover,
.bag-item:hover,
.equip-slot:hover,
.base-building:hover {
  border-color: rgba(255, 200, 91, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 168, 34, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(255, 137, 32, 0.15);
  filter: saturate(1.08) contrast(1.04);
  transform: translateY(-1px);
}

.weapon-art,
.shop-art,
.item-icon,
.equip-art,
.base-building-icon {
  background-blend-mode: screen, normal;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 10px rgba(255, 135, 30, 0.12));
}

.character-figure,
.equipment-hero-art,
.hero-figure {
  filter:
    drop-shadow(0 22px 28px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 18px rgba(255, 123, 24, 0.14));
}

.skill-panel {
  border: 1px solid rgba(255, 191, 77, 0.48);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 34px rgba(255, 133, 24, 0.06);
}

.skill-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skill-card {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(29, 34, 34, 0.96), rgba(8, 10, 11, 0.98));
  border-color: rgba(255, 187, 76, 0.42);
  min-height: 98px;
  padding: 9px 6px 8px;
}

.skill-card .skill-copy {
  text-align: center;
}

.skill-card .skill-copy strong {
  gap: 4px;
  justify-content: center;
}

/* Formal playtest polish: compact HUD, cleaner skill cards, and public mode hygiene. */
.phone.playtest-public .test-panel-toggle,
.phone.playtest-public .test-panel {
  display: none !important;
}

.top-hud {
  grid-template-columns: 28px 54px minmax(0, 1fr) !important;
  min-height: 48px !important;
  padding: 6px 8px 4px !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 22% 78%, rgba(0, 0, 0, 0.68)),
    linear-gradient(180deg, rgba(5, 8, 10, 0.82), rgba(5, 8, 10, 0.04)) !important;
  border-bottom: 1px solid rgba(255, 190, 76, 0.12) !important;
}

.top-hud .battle-supply {
  display: none !important;
}

.icon-btn {
  height: 28px !important;
  min-height: 28px !important;
  width: 28px !important;
}

.battle-clock {
  gap: 2px !important;
}

.battle-clock b {
  font-size: 10px !important;
}

.speed-btn {
  height: 27px !important;
  min-height: 27px !important;
  width: 27px !important;
  border-width: 1px !important;
  font-size: 11px !important;
  box-shadow: 0 0 12px rgba(176, 255, 99, 0.22);
}

.stage-title {
  align-content: center !important;
  min-height: 36px !important;
  justify-items: start !important;
  text-align: left !important;
}

.stage-title strong {
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 #000 !important;
}

.stage-title span,
.stage-title small {
  font-size: 9px !important;
  opacity: 0.9;
}

.stage-title i {
  width: min(130px, 92%) !important;
  height: 4px !important;
  margin: 2px 0 1px !important;
}

.right-hud {
  right: 6px !important;
  top: 58px !important;
  gap: 5px !important;
}

.right-hud .hero-card {
  width: 40px !important;
  grid-template-columns: 1fr !important;
  padding: 3px !important;
}

.right-hud .hero-card > div:not(.hero-avatar) {
  display: none !important;
}

.hero-avatar {
  height: 30px !important;
}

.round-slot {
  width: 34px !important;
  height: 34px !important;
  border-width: 1px !important;
}

.round-slot .skill-art {
  width: 31px !important;
  height: 31px !important;
}

.round-slot .skill-level {
  bottom: -3px !important;
  right: -5px !important;
  font-size: 7px !important;
}

.round-slot .skill-cooldown {
  inset: 1px !important;
  font-size: 9px !important;
  background: rgba(0, 0, 0, 0.76) !important;
}

.bottom-fort {
  transform: scale(0.9);
  transform-origin: center bottom;
  bottom: 8px !important;
}

.skill-modal {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 147, 29, 0.12), transparent 36%),
    rgba(0, 0, 0, 0.76) !important;
  padding: 20px !important;
}

.skill-panel {
  max-width: 360px !important;
  padding: 14px 12px 16px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(24, 30, 31, 0.94), rgba(5, 7, 8, 0.98)) !important;
}

.skill-kicker {
  margin-bottom: 8px !important;
  padding: 5px 22px !important;
  font-size: 15px !important;
  border-radius: 4px;
}

.skill-panel h2 {
  margin-bottom: 12px !important;
  font-size: 13px !important;
  color: #ffe7b2 !important;
}

.skill-grid {
  gap: 8px !important;
}

.skill-card {
  min-height: 96px !important;
  padding: 8px 5px 7px !important;
  border-radius: 7px !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 169, 42, 0.16), transparent 35%),
    linear-gradient(180deg, rgba(31, 37, 38, 0.96), rgba(7, 9, 10, 0.99)) !important;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease,
    filter 140ms ease;
}

.skill-card:hover,
.skill-card:focus-visible {
  border-color: rgba(255, 215, 112, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(255, 186, 60, 0.26),
    0 12px 24px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 137, 32, 0.18) !important;
  filter: saturate(1.08) contrast(1.04);
  transform: translateY(-1px);
}

.skill-card:active {
  transform: translateY(1px) scale(0.98);
}

.skill-card .skill-icon {
  width: 52px !important;
  height: 52px !important;
}

.skill-card .skill-copy strong {
  font-size: 12px !important;
}

.skill-refresh {
  min-height: 34px !important;
  min-width: 118px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  border-radius: 5px !important;
}

button,
[role="button"],
.shop-grid article,
.shop-feature,
.level-card,
.bag-item,
.weapon-list button,
.equip-slots button,
.round-slot {
  transition:
    transform 120ms ease,
    filter 120ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

button:active,
[role="button"]:active {
  transform: translateY(1px) scale(0.985);
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(114, 237, 255, 0.88);
  outline-offset: 2px;
}

.interaction-pulse {
  animation: formal-pulse 260ms ease-out;
}

@keyframes formal-pulse {
  0% {
    filter: brightness(1.2);
    transform: scale(0.985);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

.toast {
  top: 38% !important;
  border-color: rgba(255, 190, 76, 0.46) !important;
  color: #ffe7ad !important;
  background:
    linear-gradient(180deg, rgba(23, 30, 31, 0.96), rgba(5, 7, 8, 0.96)) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(255, 146, 36, 0.14);
}

/* Formal character/equipment/gem interaction pass. */
.panel-character .equip-slots button {
  overflow: hidden;
  padding: 5px 4px 23px !important;
}

.panel-character .equip-slots button.socket-selected {
  border-color: rgba(116, 232, 255, 0.95) !important;
  box-shadow:
    inset 0 0 0 1px rgba(116, 232, 255, 0.3),
    0 0 18px rgba(48, 207, 255, 0.24),
    0 12px 22px rgba(0, 0, 0, 0.42);
}

.panel-character .equip-slots button.socket-complete {
  border-color: rgba(255, 214, 104, 0.95) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 104, 0.28),
    0 0 18px rgba(255, 145, 32, 0.22);
}

.gear-slot-name {
  position: absolute;
  left: 5px;
  top: 4px;
  max-width: 44px;
  overflow: hidden;
  color: #ffd98a;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.gear-set-badge {
  align-items: center;
  background: linear-gradient(180deg, rgba(30, 36, 36, 0.9), rgba(4, 6, 7, 0.88)) !important;
  border: 1px solid rgba(255, 191, 76, 0.34) !important;
  border-radius: 2px;
  bottom: 19px !important;
  color: #ffe4a2 !important;
  display: flex;
  font-size: 7px !important;
  height: 12px !important;
  justify-content: center;
  left: 5px !important;
  max-width: calc(100% - 10px);
  min-width: 26px;
  overflow: hidden;
  padding: 0 3px;
  position: absolute;
  right: auto !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-gem-sockets {
  bottom: 5px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(5, 1fr);
  left: 5px;
  pointer-events: none;
  position: absolute;
  right: 5px;
}

.gear-gem-sockets i {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(11, 14, 14, 0.94), rgba(3, 4, 5, 0.98));
  border: 1px solid rgba(112, 102, 84, 0.62);
  border-radius: 50%;
  color: #ffd671;
  display: block;
  font-size: 7px;
  height: 9px;
  line-height: 8px;
  min-width: 0;
  pointer-events: auto;
  text-align: center;
}

.gear-gem-sockets i.filled {
  border-color: rgba(255, 194, 79, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 188, 0.12),
    0 0 7px rgba(255, 145, 32, 0.28);
}

.gear-gem-sockets i.active {
  border-color: rgba(108, 230, 255, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(121, 232, 255, 0.28),
    0 0 8px rgba(64, 218, 255, 0.52);
}

.bag-item {
  min-height: 56px;
}

.bag-item.selected {
  border-color: rgba(255, 221, 115, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 221, 115, 0.28),
    0 0 18px rgba(255, 148, 34, 0.26) !important;
}

.bag-item.disabled {
  filter: grayscale(0.35) brightness(0.72);
  opacity: 0.72;
}

.bag-item-action {
  background:
    linear-gradient(180deg, #ffd067, #c87612 62%, #5d2b06) !important;
  border: 1px solid rgba(255, 231, 139, 0.9) !important;
  border-radius: 3px;
  bottom: 3px;
  color: #fff8d0;
  font-size: 9px;
  font-weight: 900;
  left: 4px;
  min-height: 18px;
  padding: 1px 3px;
  position: absolute;
  right: 4px;
  text-shadow: 0 1px 2px #000;
  z-index: 4;
}

.bag-item-action:disabled {
  background: linear-gradient(180deg, #575b5d, #232628) !important;
  border-color: rgba(128, 139, 144, 0.56) !important;
  color: #aeb7b8;
}

.bag-detail {
  align-items: center;
  gap: 8px;
  grid-template-columns: 54px minmax(0, 1fr) 82px !important;
  min-height: 92px;
  padding: 8px !important;
}

.bag-detail > div:nth-child(2) {
  min-width: 0;
}

.bag-detail b {
  color: #fff0bd;
}

.bag-detail span {
  color: #b9d1d0;
}

.bag-detail p {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
}

.formal-detail-row {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 183, 63, 0.08), rgba(80, 225, 255, 0.04));
  border: 1px solid rgba(255, 186, 70, 0.14);
  border-radius: 3px;
  display: grid;
  gap: 5px;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 18px;
  padding: 2px 5px;
}

.formal-detail-row b {
  color: #ffd06b;
  font-size: 10px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formal-detail-row i {
  color: #e8f6f0;
  font-size: 10px;
  font-style: normal;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formal-set-progress {
  background:
    linear-gradient(180deg, rgba(15, 20, 20, 0.96), rgba(6, 8, 9, 0.98));
  border: 1px solid rgba(255, 186, 70, 0.22);
  border-radius: 4px;
  display: grid !important;
  gap: 3px;
  padding: 5px;
}

.formal-set-progress strong {
  color: #ffe0a2;
  font-size: 11px;
  line-height: 1.1;
}

.formal-set-line {
  align-items: center;
  display: grid !important;
  gap: 4px;
  grid-template-columns: 28px 38px minmax(0, 1fr);
}

.formal-set-line b,
.formal-set-line em {
  color: #8a9697;
  font-size: 9px;
  font-style: normal;
}

.formal-set-line i {
  color: #aebdbc;
  font-size: 9px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formal-set-line.active b,
.formal-set-line.active em,
.formal-set-line.active i {
  color: #ffe49b;
}

.bag-detail button {
  min-height: 38px;
  padding: 5px 6px !important;
}

.weapon-card {
  cursor: pointer;
}

.weapon-list button,
[data-equipment-action] {
  position: relative;
}

[data-equipment-action]:disabled {
  filter: grayscale(0.45) brightness(0.72);
  opacity: 0.72;
}

@media (max-width: 430px) {
  .bag-detail {
    grid-template-columns: 48px minmax(0, 1fr) 74px !important;
  }

  .formal-detail-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .formal-detail-row b,
  .formal-detail-row i {
    font-size: 9px;
  }
}

/* Formal economy, fashion, and weapon clarity pass. */
.fashion-closet {
  background:
    linear-gradient(180deg, rgba(15, 20, 21, 0.94), rgba(5, 7, 8, 0.98));
  border: 1px solid rgba(255, 190, 76, 0.32);
  bottom: 54px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  left: 66px;
  padding: 7px;
  position: absolute;
  right: 152px;
  z-index: 8;
}

.fashion-closet[hidden] {
  display: none !important;
}

.fashion-closet header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.fashion-closet header b {
  color: #ffe3a6;
  font-size: 12px;
}

.fashion-closet header span {
  color: #87dfff;
  font-size: 9px;
}

.fashion-options {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fashion-options button {
  background:
    linear-gradient(180deg, rgba(32, 38, 39, 0.96), rgba(8, 10, 11, 0.98));
  border: 1px solid rgba(155, 139, 105, 0.42);
  border-radius: 4px;
  color: #f6ecd0;
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 5px;
  text-align: left;
}

.fashion-options button.active {
  border-color: rgba(255, 214, 104, 0.92);
  box-shadow: 0 0 14px rgba(255, 145, 32, 0.22);
}

.fashion-options button b {
  color: #ffe09c;
  font-size: 10px;
  line-height: 1.1;
}

.fashion-options button span {
  color: #72e6ff;
  font-size: 9px;
}

.fashion-options button i {
  color: #cfd7d3;
  font-size: 8px;
  font-style: normal;
  line-height: 1.15;
  max-height: 19px;
  overflow: hidden;
}

.character-figure {
  background-color: var(--fashion-tint, transparent);
  background-blend-mode: screen, normal, normal;
}

.panel-actions button,
.character-forge-button,
.character-merge-button {
  display: grid !important;
  gap: 2px;
  place-items: center;
}

.panel-actions button span,
.character-forge-button > span {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.05;
}

.panel-actions button small,
.character-forge-button small,
.character-merge-button small {
  color: rgba(255, 245, 211, 0.86);
  display: block;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.12;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.weapon-art {
  background:
    var(--weapon-main-image, url("./assets/battle/weapon-gatling.png")) center 54% / 92% auto no-repeat,
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--weapon-accent, #ff9a2d) 46%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(36, 46, 45, 0.82), rgba(4, 6, 6, 0.96)) !important;
}

.weapon-card span {
  color: #9edfff;
}

.weapon-card p:nth-of-type(1) {
  color: #fff0bd;
  font-weight: 900;
}

.weapon-list button {
  align-content: end;
  display: grid;
  gap: 1px;
  min-height: 62px;
  padding: 31px 3px 5px !important;
}

.weapon-list button span {
  color: #aeefff;
  display: block;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.weapon-list button b {
  color: #ffe0a2;
  display: block;
  font-size: 10px;
  line-height: 1;
}

.equipment-materials span {
  color: #f3dbac;
  line-height: 1.25;
}

[data-equipment-action] small {
  max-width: 92px;
}

@media (max-width: 430px) {
  .fashion-closet {
    left: 58px;
    right: 124px;
  }

  .fashion-options {
    grid-template-columns: 1fr;
  }
}

/* Equipment detail modal: tap a gear slot to inspect sockets and forge. */
.equipment-detail-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.68);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 22px 18px 84px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 24;
}

.equipment-detail-modal[hidden] {
  display: none !important;
}

.equipment-detail-card {
  background:
    linear-gradient(180deg, rgba(255, 247, 225, 0.98), rgba(245, 232, 198, 0.99));
  border: 1px solid rgba(255, 245, 210, 0.86);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: #3b2e21;
  display: grid;
  max-height: min(680px, calc(100% - 18px));
  max-width: 330px;
  min-height: 430px;
  overflow: hidden;
  position: relative;
  width: min(330px, 100%);
}

.equipment-detail-close {
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(255, 229, 170, 0.4) !important;
  border-radius: 50%;
  color: #fff1c3;
  font-size: 18px;
  height: 28px;
  line-height: 1;
  min-height: 28px !important;
  padding: 0 !important;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  z-index: 3;
}

.equipment-detail-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 44%, rgba(255, 210, 82, 0.32), transparent 22%),
    linear-gradient(90deg, rgba(55, 45, 34, 0.86), rgba(108, 86, 55, 0.72)),
    linear-gradient(180deg, #4b4034, #6c5d4a);
  display: grid;
  gap: 12px;
  grid-template-columns: 74px minmax(0, 1fr) 68px;
  min-height: 118px;
  padding: 16px 16px 14px;
  position: relative;
}

.equipment-detail-icon {
  background:
    var(--gear-image) center / 78% 78% no-repeat,
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(180deg, #6b655a, #201a15);
  border: 2px solid rgba(29, 20, 13, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  height: 68px;
  position: relative;
  width: 68px;
}

.equipment-detail-icon b {
  background: linear-gradient(180deg, #ffc14c, #a85c10);
  color: #fff8d0;
  font-size: 13px;
  left: -6px;
  line-height: 1;
  padding: 3px 5px;
  position: absolute;
  text-shadow: 0 1px 2px #000;
  top: -6px;
}

.equipment-detail-hero strong {
  color: #fff4d8;
  display: block;
  font-size: 22px;
  line-height: 1.05;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.62);
}

.equipment-detail-hero span,
.equipment-detail-hero small {
  color: #fff1d5;
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);
}

.equipment-detail-ring {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 232, 142, 0.9) 0 12%, rgba(255, 204, 67, 0.34) 13% 29%, transparent 31%),
    conic-gradient(from 12deg, rgba(255, 207, 76, 0), rgba(255, 207, 76, 0.86), rgba(255, 207, 76, 0));
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(255, 199, 72, 0.64));
  height: 64px;
  width: 64px;
}

.equipment-detail-tabs {
  background: #fff4db;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, 1fr);
  padding: 14px 12px 8px;
}

.equipment-detail-tabs button {
  background: linear-gradient(180deg, #d9ceb8, #b9aa91) !important;
  border: 1px solid rgba(128, 98, 51, 0.22) !important;
  border-radius: 3px;
  color: #5e4a34;
  font-size: 18px;
  font-weight: 900;
  min-height: 42px;
  text-shadow: none;
}

.equipment-detail-tabs button.active {
  background: linear-gradient(180deg, #ffb32c, #e97512) !important;
  color: #fff8d8;
  text-shadow: 0 1px 2px rgba(65, 30, 0, 0.64);
}

.equipment-detail-body {
  background: #fff4db;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 8px 12px 12px;
}

.equipment-gem-row,
.equipment-attr-row {
  background:
    linear-gradient(180deg, rgba(228, 217, 191, 0.95), rgba(213, 199, 169, 0.95));
  border: 1px solid rgba(178, 159, 123, 0.38);
  color: #4d4336;
  min-height: 58px;
}

.equipment-gem-row {
  align-items: center;
  display: grid;
  gap: 2px 9px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 7px 10px;
  text-align: left;
}

.equipment-gem-row.active {
  border-color: rgba(255, 145, 24, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 145, 24, 0.18);
}

.equipment-gem-icon {
  align-items: center;
  background:
    var(--gem-image, none) center / 82% 82% no-repeat,
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #7a5b3f, #302117);
  border: 1px solid rgba(70, 47, 24, 0.42);
  color: #ffe0a3;
  display: flex;
  font-size: 16px;
  font-weight: 900;
  grid-row: 1 / 4;
  height: 38px;
  justify-content: center;
  text-shadow: 0 1px 2px #000;
  width: 38px;
}

.equipment-gem-row.empty .equipment-gem-icon {
  background:
    linear-gradient(180deg, rgba(239, 229, 204, 0.92), rgba(206, 192, 161, 0.92));
  color: #8d7758;
  text-shadow: none;
}

.equipment-gem-row b,
.equipment-gem-row i,
.equipment-gem-row em {
  display: block;
  font-style: normal;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-gem-row b {
  color: #4a3929;
  font-size: 14px;
  font-weight: 900;
}

.equipment-gem-row i {
  color: #7b6750;
  font-size: 11px;
}

.equipment-gem-row em {
  color: #6d5d49;
  font-size: 10px;
}

.equipment-attr-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 40px;
  padding: 8px 10px;
}

.equipment-attr-row b {
  color: #6a4b25;
  font-size: 13px;
}

.equipment-attr-row i {
  color: #4e4438;
  font-size: 12px;
  font-style: normal;
  line-height: 1.2;
}

.equipment-detail-actions {
  align-items: center;
  background: #fff4db;
  border-top: 1px solid rgba(180, 161, 126, 0.36);
  display: grid;
  justify-items: center;
  padding: 12px 14px 18px;
}

.equipment-detail-forge {
  background:
    linear-gradient(180deg, #ffd85f, #f0981d 58%, #c06210) !important;
  border: 2px solid rgba(113, 72, 16, 0.42) !important;
  border-radius: 8px;
  box-shadow:
    0 5px 0 rgba(110, 67, 12, 0.52),
    0 14px 22px rgba(0, 0, 0, 0.18);
  color: #3a2710;
  font-size: 22px;
  font-weight: 900;
  min-height: 48px;
  min-width: 144px;
  padding: 6px 22px !important;
  text-shadow: 0 1px 0 rgba(255, 244, 195, 0.7);
}

.equipment-detail-actions small {
  color: #7b684b;
  display: block;
  font-size: 10px;
  line-height: 1.2;
  margin-top: 9px;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fashion page: character preview plus skill-bonus outfits. */
.fashion-page {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 155, 42, 0.16), transparent 24%),
    linear-gradient(155deg, rgba(31, 42, 43, 0.94), rgba(5, 7, 8, 0.99) 58%),
    #070909;
  bottom: 0;
  color: var(--wz-text);
  display: grid;
  gap: 8px;
  grid-template-rows: auto minmax(236px, 1fr) auto auto auto;
  left: 0;
  overflow: hidden;
  padding: 12px 12px 82px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
}

.fashion-page[hidden] {
  display: none !important;
}

.fashion-page::before {
  background:
    linear-gradient(90deg, rgba(255, 174, 50, 0.32), transparent 28% 72%, rgba(255, 174, 50, 0.22)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.fashion-page-top,
.fashion-page-block,
.fashion-bonus-panel,
.fashion-page-actions {
  position: relative;
  z-index: 1;
}

.fashion-page-top {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 38px minmax(0, 1fr) 58px;
}

.fashion-page-back,
.fashion-page-done {
  background: linear-gradient(180deg, rgba(36, 45, 46, 0.96), rgba(10, 13, 14, 0.98)) !important;
  border: 1px solid rgba(255, 208, 113, 0.34) !important;
  color: #ffe5aa;
  min-height: 34px !important;
  padding: 0 !important;
}

.fashion-page-back {
  font-size: 28px;
  line-height: 1;
}

.fashion-page-done {
  font-size: 12px;
  font-weight: 900;
}

.fashion-page-top strong {
  color: #ffe4a8;
  display: block;
  font-size: 20px;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.fashion-page-top span {
  color: #7ee7ff;
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-top: 2px;
}

.fashion-preview {
  align-items: end;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 236px;
  position: relative;
  z-index: 1;
}

.fashion-preview::after {
  background:
    radial-gradient(ellipse at 50% 86%, rgba(255, 154, 45, 0.28), transparent 33%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.72));
  bottom: 0;
  content: "";
  height: 42%;
  left: -12px;
  pointer-events: none;
  position: absolute;
  right: -12px;
}

.fashion-preview-figure {
  align-self: stretch;
  background-position: center 44%;
  background-repeat: no-repeat;
  background-size: auto 104%;
  min-height: 218px;
  position: relative;
  z-index: 1;
}

.fashion-preview-copy {
  background: linear-gradient(90deg, rgba(9, 12, 13, 0.92), rgba(9, 12, 13, 0.52), transparent);
  border-left: 2px solid rgba(255, 176, 54, 0.72);
  display: grid;
  gap: 2px;
  max-width: 86%;
  padding: 8px 10px;
  position: absolute;
  z-index: 2;
}

.fashion-preview-copy b {
  color: #fff2c8;
  font-size: 18px;
  line-height: 1.05;
}

.fashion-preview-copy span {
  color: #9eeaff;
  font-size: 10px;
  font-weight: 800;
}

.fashion-preview-copy i {
  color: #ffd778;
  font-size: 10px;
  font-style: normal;
  line-height: 1.2;
}

.fashion-page-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fashion-page-block header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.fashion-page-block header b {
  color: #ffe0a0;
  font-size: 13px;
}

.fashion-page-block header span {
  color: rgba(174, 239, 255, 0.82);
  font-size: 9px;
  font-weight: 800;
}

.fashion-character-list {
  display: grid;
  gap: 6px;
  grid-auto-columns: 76px;
  grid-auto-flow: column;
  min-height: 78px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.fashion-character-list button {
  align-content: end;
  background:
    linear-gradient(180deg, rgba(35, 44, 45, 0.94), rgba(8, 10, 11, 0.98)) !important;
  border: 1px solid rgba(122, 142, 139, 0.38) !important;
  color: #f8ead0;
  display: grid;
  gap: 2px;
  min-height: 76px !important;
  overflow: hidden;
  padding: 5px !important;
  position: relative;
  text-align: left;
}

.fashion-character-list button.active,
.fashion-style-list button.active {
  border-color: rgba(255, 204, 88, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 204, 88, 0.2),
    0 0 18px rgba(255, 132, 31, 0.22);
}

.fashion-character-list span {
  background: var(--portrait-image) center 24% / cover no-repeat;
  border-bottom: 1px solid rgba(255, 200, 94, 0.28);
  inset: 0 0 26px;
  opacity: 0.9;
  position: absolute;
}

.fashion-character-list b,
.fashion-character-list i {
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
}

.fashion-character-list b {
  color: #ffe0a2;
  font-size: 10px;
}

.fashion-character-list i {
  color: rgba(205, 231, 226, 0.82);
  font-size: 8px;
  font-style: normal;
}

.fashion-style-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fashion-style-list button {
  background:
    linear-gradient(180deg, rgba(58, 38, 19, 0.82), rgba(12, 13, 13, 0.98)) !important;
  border: 1px solid rgba(201, 145, 57, 0.42) !important;
  color: #f8ead0;
  display: grid;
  gap: 2px;
  min-height: 64px !important;
  padding: 7px !important;
  text-align: left;
}

.fashion-style-list span {
  color: #7fe6ff;
  font-size: 9px;
  font-weight: 900;
}

.fashion-style-list b {
  color: #ffe1a2;
  font-size: 12px;
  line-height: 1.1;
}

.fashion-style-list i {
  color: rgba(244, 234, 215, 0.78);
  font-size: 9px;
  font-style: normal;
  line-height: 1.2;
  max-height: 22px;
  overflow: hidden;
}

.fashion-bonus-panel {
  background: linear-gradient(180deg, rgba(10, 17, 18, 0.92), rgba(4, 6, 7, 0.96));
  border: 1px solid rgba(255, 201, 93, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 6px;
  padding: 9px;
}

.fashion-bonus-panel header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.fashion-bonus-panel b {
  color: #ffe3a8;
  font-size: 14px;
}

.fashion-bonus-panel i {
  color: #7fe6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.fashion-bonus-panel p {
  color: rgba(246, 236, 208, 0.82);
  font-size: 10px;
  line-height: 1.35;
  margin: 0;
}

.fashion-bonus-panel div {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fashion-bonus-panel span {
  background: rgba(255, 166, 48, 0.12);
  border: 1px solid rgba(255, 204, 92, 0.24);
  color: #ffe0a0;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  min-height: 30px;
  padding: 5px;
  text-align: center;
}

.fashion-page-actions {
  align-items: center;
  display: grid;
  gap: 5px;
  justify-items: center;
}

.fashion-equip-button {
  background: linear-gradient(180deg, #ffd46a, #d77513 54%, #7d2d05) !important;
  border: 1px solid rgba(255, 235, 158, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 10px 20px rgba(0, 0, 0, 0.38);
  color: #2c1707;
  font-size: 16px;
  font-weight: 1000;
  min-height: 42px !important;
  width: min(210px, 82%);
}

.fashion-page-actions small {
  color: rgba(221, 228, 218, 0.76);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

@media (max-height: 780px) {
  .fashion-page {
    gap: 6px;
    grid-template-rows: auto minmax(190px, 0.8fr) auto auto auto;
    padding-top: 9px;
  }

  .fashion-preview,
  .fashion-preview-figure {
    min-height: 188px;
  }

  .fashion-character-list {
    grid-auto-columns: 68px;
    min-height: 68px;
  }

  .fashion-character-list button {
    min-height: 66px !important;
  }

  .fashion-style-list button {
    min-height: 56px !important;
  }
}

/* Compact audio toggle for procedural SFX. */
.audio-toggle {
  align-items: center;
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 236, 158, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(55, 44, 24, 0.94), rgba(12, 14, 14, 0.96)) !important;
  border: 1px solid rgba(255, 205, 92, 0.55) !important;
  border-radius: 50% !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffe5a8;
  display: flex;
  font-size: 17px;
  font-weight: 1000;
  height: 34px;
  justify-content: center;
  min-height: 34px !important;
  padding: 0 !important;
  position: absolute;
  right: 12px;
  top: 52px;
  width: 34px;
  z-index: 46;
}

.audio-toggle span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.audio-toggle.bgm-live::after {
  background: #64ffe4;
  border-radius: 50%;
  bottom: 4px;
  box-shadow: 0 0 10px rgba(100, 255, 228, 0.78);
  content: "";
  height: 6px;
  position: absolute;
  right: 4px;
  width: 6px;
}

.audio-toggle.muted {
  background:
    linear-gradient(180deg, rgba(34, 38, 39, 0.92), rgba(8, 10, 11, 0.96)) !important;
  border-color: rgba(141, 151, 148, 0.38) !important;
  color: rgba(224, 231, 225, 0.74);
}

.audio-toggle.muted::after {
  display: none;
}

.audio-toggle:active {
  transform: translateY(1px) scale(0.97);
}

@media (max-height: 780px) {
  .audio-toggle {
    height: 30px;
    min-height: 30px !important;
    right: 10px;
    top: 48px;
    width: 30px;
  }
}