@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), url("./../fonts/Lato-Regular.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  src: local("Lato Italic"), url("./../fonts/Lato-Italic.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  src: local("Lato Hairline"), url("./../fonts/Lato-Hairline.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 100;
  src: local("Lato Hairline Italic"), url("./../fonts/Lato-HairlineItalic.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), url("./../fonts/Lato-Light.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  src: local("Lato Light Italic"), url("./../fonts/Lato-LightItalic.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), url("./../fonts/Lato-Bold.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  src: local("Lato Bold Italic"), url("./../fonts/Lato-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  src: local("Lato Black"), url("./../fonts/Lato-Black.woff") format("woff");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 900;
  src: local("Lato Black Italic"), url("./../fonts/Lato-BlackItalic.woff") format("woff");
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
  grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
  gap: var(--bs-gap, 1.5rem);
}

/* 网格列类 */
.grid [class*="g-col"] {
  grid-column: auto/span var(--span, 1);
}

.grid .g-col-1 {
  --span: 1;
}
.grid .g-col-2 {
  --span: 2;
}
.grid .g-col-3 {
  --span: 3;
}
.grid .g-col-4 {
  --span: 4;
}
.grid .g-col-5 {
  --span: 5;
}
.grid .g-col-6 {
  --span: 6;
}
.grid .g-col-7 {
  --span: 7;
}
.grid .g-col-8 {
  --span: 8;
}
.grid .g-col-9 {
  --span: 9;
}
.grid .g-col-10 {
  --span: 10;
}
.grid .g-col-11 {
  --span: 11;
}
.grid .g-col-12 {
  --span: 12;
}

/* 网格起始位置类 */
.grid [class*="g-start"] {
  grid-column-start: var(--start, 1);
}

.grid .g-start-1 {
  --start: 1;
}
.grid .g-start-2 {
  --start: 2;
}
.grid .g-start-3 {
  --start: 3;
}
.grid .g-start-4 {
  --start: 4;
}
.grid .g-start-5 {
  --start: 5;
}
.grid .g-start-6 {
  --start: 6;
}
.grid .g-start-7 {
  --start: 7;
}
.grid .g-start-8 {
  --start: 8;
}
.grid .g-start-9 {
  --start: 9;
}
.grid .g-start-10 {
  --start: 10;
}
.grid .g-start-11 {
  --start: 11;
}

@media (min-width: 576px) {
  .grid .g-col-sm-1 {
    grid-column: auto/span 1;
  }

  .grid .g-col-sm-2 {
    grid-column: auto/span 2;
  }

  .grid .g-col-sm-3 {
    grid-column: auto/span 3;
  }

  .grid .g-col-sm-4 {
    grid-column: auto/span 4;
  }

  .grid .g-col-sm-5 {
    grid-column: auto/span 5;
  }

  .grid .g-col-sm-6 {
    grid-column: auto/span 6;
  }

  .grid .g-col-sm-7 {
    grid-column: auto/span 7;
  }

  .grid .g-col-sm-8 {
    grid-column: auto/span 8;
  }

  .grid .g-col-sm-9 {
    grid-column: auto/span 9;
  }

  .grid .g-col-sm-10 {
    grid-column: auto/span 10;
  }

  .grid .g-col-sm-11 {
    grid-column: auto/span 11;
  }

  .grid .g-col-sm-12 {
    grid-column: auto/span 12;
  }

  .grid .g-start-sm-1 {
    grid-column-start: 1;
  }

  .grid .g-start-sm-2 {
    grid-column-start: 2;
  }

  .grid .g-start-sm-3 {
    grid-column-start: 3;
  }

  .grid .g-start-sm-4 {
    grid-column-start: 4;
  }

  .grid .g-start-sm-5 {
    grid-column-start: 5;
  }

  .grid .g-start-sm-6 {
    grid-column-start: 6;
  }

  .grid .g-start-sm-7 {
    grid-column-start: 7;
  }

  .grid .g-start-sm-8 {
    grid-column-start: 8;
  }

  .grid .g-start-sm-9 {
    grid-column-start: 9;
  }

  .grid .g-start-sm-10 {
    grid-column-start: 10;
  }

  .grid .g-start-sm-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 768px) {
  .grid .g-col-md-1 {
    grid-column: auto/span 1;
  }

  .grid .g-col-md-2 {
    grid-column: auto/span 2;
  }

  .grid .g-col-md-3 {
    grid-column: auto/span 3;
  }

  .grid .g-col-md-4 {
    grid-column: auto/span 4;
  }

  .grid .g-col-md-5 {
    grid-column: auto/span 5;
  }

  .grid .g-col-md-6 {
    grid-column: auto/span 6;
  }

  .grid .g-col-md-7 {
    grid-column: auto/span 7;
  }

  .grid .g-col-md-8 {
    grid-column: auto/span 8;
  }

  .grid .g-col-md-9 {
    grid-column: auto/span 9;
  }

  .grid .g-col-md-10 {
    grid-column: auto/span 10;
  }

  .grid .g-col-md-11 {
    grid-column: auto/span 11;
  }

  .grid .g-col-md-12 {
    grid-column: auto/span 12;
  }

  .grid .g-start-md-1 {
    grid-column-start: 1;
  }

  .grid .g-start-md-2 {
    grid-column-start: 2;
  }

  .grid .g-start-md-3 {
    grid-column-start: 3;
  }

  .grid .g-start-md-4 {
    grid-column-start: 4;
  }

  .grid .g-start-md-5 {
    grid-column-start: 5;
  }

  .grid .g-start-md-6 {
    grid-column-start: 6;
  }

  .grid .g-start-md-7 {
    grid-column-start: 7;
  }

  .grid .g-start-md-8 {
    grid-column-start: 8;
  }

  .grid .g-start-md-9 {
    grid-column-start: 9;
  }

  .grid .g-start-md-10 {
    grid-column-start: 10;
  }

  .grid .g-start-md-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 992px) {
  .grid .g-col-lg-1 {
    grid-column: auto/span 1;
  }

  .grid .g-col-lg-2 {
    grid-column: auto/span 2;
  }

  .grid .g-col-lg-3 {
    grid-column: auto/span 3;
  }

  .grid .g-col-lg-4 {
    grid-column: auto/span 4;
  }

  .grid .g-col-lg-5 {
    grid-column: auto/span 5;
  }

  .grid .g-col-lg-6 {
    grid-column: auto/span 6;
  }

  .grid .g-col-lg-7 {
    grid-column: auto/span 7;
  }

  .grid .g-col-lg-8 {
    grid-column: auto/span 8;
  }

  .grid .g-col-lg-9 {
    grid-column: auto/span 9;
  }

  .grid .g-col-lg-10 {
    grid-column: auto/span 10;
  }

  .grid .g-col-lg-11 {
    grid-column: auto/span 11;
  }

  .grid .g-col-lg-12 {
    grid-column: auto/span 12;
  }

  .grid .g-start-lg-1 {
    grid-column-start: 1;
  }

  .grid .g-start-lg-2 {
    grid-column-start: 2;
  }

  .grid .g-start-lg-3 {
    grid-column-start: 3;
  }

  .grid .g-start-lg-4 {
    grid-column-start: 4;
  }

  .grid .g-start-lg-5 {
    grid-column-start: 5;
  }

  .grid .g-start-lg-6 {
    grid-column-start: 6;
  }

  .grid .g-start-lg-7 {
    grid-column-start: 7;
  }

  .grid .g-start-lg-8 {
    grid-column-start: 8;
  }

  .grid .g-start-lg-9 {
    grid-column-start: 9;
  }

  .grid .g-start-lg-10 {
    grid-column-start: 10;
  }

  .grid .g-start-lg-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1200px) {
  .grid .g-col-xl-1 {
    grid-column: auto/span 1;
  }

  .grid .g-col-xl-2 {
    grid-column: auto/span 2;
  }

  .grid .g-col-xl-3 {
    grid-column: auto/span 3;
  }

  .grid .g-col-xl-4 {
    grid-column: auto/span 4;
  }

  .grid .g-col-xl-5 {
    grid-column: auto/span 5;
  }

  .grid .g-col-xl-6 {
    grid-column: auto/span 6;
  }

  .grid .g-col-xl-7 {
    grid-column: auto/span 7;
  }

  .grid .g-col-xl-8 {
    grid-column: auto/span 8;
  }

  .grid .g-col-xl-9 {
    grid-column: auto/span 9;
  }

  .grid .g-col-xl-10 {
    grid-column: auto/span 10;
  }

  .grid .g-col-xl-11 {
    grid-column: auto/span 11;
  }

  .grid .g-col-xl-12 {
    grid-column: auto/span 12;
  }

  .grid .g-start-xl-1 {
    grid-column-start: 1;
  }

  .grid .g-start-xl-2 {
    grid-column-start: 2;
  }

  .grid .g-start-xl-3 {
    grid-column-start: 3;
  }

  .grid .g-start-xl-4 {
    grid-column-start: 4;
  }

  .grid .g-start-xl-5 {
    grid-column-start: 5;
  }

  .grid .g-start-xl-6 {
    grid-column-start: 6;
  }

  .grid .g-start-xl-7 {
    grid-column-start: 7;
  }

  .grid .g-start-xl-8 {
    grid-column-start: 8;
  }

  .grid .g-start-xl-9 {
    grid-column-start: 9;
  }

  .grid .g-start-xl-10 {
    grid-column-start: 10;
  }

  .grid .g-start-xl-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1400px) {
  .grid .g-col-xxl-1 {
    grid-column: auto/span 1;
  }

  .grid .g-col-xxl-2 {
    grid-column: auto/span 2;
  }

  .grid .g-col-xxl-3 {
    grid-column: auto/span 3;
  }

  .grid .g-col-xxl-4 {
    grid-column: auto/span 4;
  }

  .grid .g-col-xxl-5 {
    grid-column: auto/span 5;
  }

  .grid .g-col-xxl-6 {
    grid-column: auto/span 6;
  }

  .grid .g-col-xxl-7 {
    grid-column: auto/span 7;
  }

  .grid .g-col-xxl-8 {
    grid-column: auto/span 8;
  }

  .grid .g-col-xxl-9 {
    grid-column: auto/span 9;
  }

  .grid .g-col-xxl-10 {
    grid-column: auto/span 10;
  }

  .grid .g-col-xxl-11 {
    grid-column: auto/span 11;
  }

  .grid .g-col-xxl-12 {
    grid-column: auto/span 12;
  }

  .grid .g-start-xxl-1 {
    grid-column-start: 1;
  }

  .grid .g-start-xxl-2 {
    grid-column-start: 2;
  }

  .grid .g-start-xxl-3 {
    grid-column-start: 3;
  }

  .grid .g-start-xxl-4 {
    grid-column-start: 4;
  }

  .grid .g-start-xxl-5 {
    grid-column-start: 5;
  }

  .grid .g-start-xxl-6 {
    grid-column-start: 6;
  }

  .grid .g-start-xxl-7 {
    grid-column-start: 7;
  }

  .grid .g-start-xxl-8 {
    grid-column-start: 8;
  }

  .grid .g-start-xxl-9 {
    grid-column-start: 9;
  }

  .grid .g-start-xxl-10 {
    grid-column-start: 10;
  }

  .grid .g-start-xxl-11 {
    grid-column-start: 11;
  }
}

body {
  background: linear-gradient(to right bottom, rgb(15, 23, 42), rgb(30, 41, 59), rgb(15, 23, 42));
  font-family: "Lato", sans-serif;
  color: #d1d5db;
}

#body main {
  min-height: calc(100vh - 12em);
}

.py-6 {
  padding-top: 6em !important;
  padding-bottom: 6em !important;
}

.header {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 0.0625em solid rgba(51, 65, 85, 0.5);
}

.icon-logo {
  height: 5em;
}

.header .nav .nav-link {
  --bs-nav-link-color: #d1d5db;
  --bs-nav-link-hover-color: #ffffff;
}

.header .dropdown-toggle {
  color: #d1d5db;
}

.header .dropdown-toggle:hover {
  color: #ffffff;
}

.header .dropdown-menu {
  --bs-body-bg: rgba(0, 0, 0, 0.7);
  --bs-body-color: #d1d5db;
  --bs-dropdown-link-hover-bg: rgba(51, 65, 85, 0.5);
}

.merge-box {
  background: linear-gradient(to right bottom, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
  border: 0.0625em solid rgba(51, 65, 85, 0.5);
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.25) 0 1.5625em 3.125em -0.75em;
}

.deck-main .reset-btn {
  /* 基础样式 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* 文字样式 */
  white-space: nowrap;
  font-size: 0.875em;
  font-weight: 500;

  /* 尺寸和边框 */
  height: 2.5em;
  border: 0.0625em solid #ef4444;
  border-radius: 0.75em;
  padding: 0 1.5em;

  /* 颜色 */
  color: #f87171;
  background-color: transparent;

  /* 过渡效果 */
  transition: all 300ms;
}

/* 悬停状态 */
.deck-main .reset-btn:hover {
  background-color: #ef4444;
  color: white;
  transform: scale(1.05);
}

/* 聚焦状态 */
.deck-main .reset-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em white, 0 0 0 0.25em #2563eb;
}

/* 禁用状态 */
.deck-main .reset-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* SVG图标样式 */
.deck-main .reset-btn svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.deck-main .share-btn {
  /* Focus ring styles */
  outline: 0.125em solid transparent;
  outline-offset: 0.125em;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* Typography */
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 1.25em;
  font-weight: 500;
  color: #ffffff;

  /* Sizing and spacing */
  height: 2.5em;
  padding: 0.75em 1em;

  /* Background gradient */
  background: linear-gradient(to right, #16a34a, #059669);

  /* Border radius */
  border-radius: 0.75em;
  border: none;

  /* Shadow */
  box-shadow: 0 0.625em 0.9375em -0.1875em rgba(34, 197, 94, 0.25), 0 0.25em 0.375em -0.125em rgba(34, 197, 94, 0.25);

  /* Transition */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Cursor */
  cursor: pointer;
}

.deck-main .share-btn:hover {
  background: linear-gradient(to right, #15803d, #047857);
  transform: scale(1.05);
}

.deck-main .share-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em #ffffff, 0 0 0 0.25em #3b82f6;
}

.deck-main .share-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.deck-main .share-btn svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.deck-list {
  --bs-columns: 7;
  --bs-gap: 0rem;
}

.deck-list .remove-btn {
  /* Layout and display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* Typography */
  white-space: nowrap;
  line-height: 1em;
  font-weight: 500;
  color: #ffffff;
  font-size: 0.875em;

  /* Sizing and spacing */
  padding: 0.75em 1rem;

  /* Background and colors */
  background-color: #dc2626;

  /* Border radius */
  border-radius: 0.5em;
  border: none;

  /* Transition */
  transition: all 200ms ease-in-out;

  /* Cursor */
  cursor: pointer;

  /* Focus styles */
  outline: none;
}

.deck-list .remove-btn:hover {
  background-color: #b91c1c;
}

.deck-list .remove-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em transparent, 0 0 0 0.25em hsl(var(--ring));
  ring-offset-color: hsl(var(--background));
}

.deck-list .remove-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.deck-list .remove-btn svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.troops-list {
  --bs-columns: 8;
  --bs-gap: 0rem;
}

.troop-place {
  width: 85%;
  aspect-ratio: 5/6;
  border-radius: 0.75em;
  background: rgba(51, 65, 85, 0.5);
  border: 0.125em dashed rgb(71, 85, 105);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(100, 116, 139);
}

.troop-place svg {
  width: 2em;
  height: 2em;
}

.rounded-num {
  height: 3em;
  width: 3em;
  line-height: 3em;
  text-align: center;
  font-size: 1.25em;
  color: #3ab1e8;
}

.troop-card-container {
  position: relative;
  width: 100%;
  aspect-ratio: 5/6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75em;
}

.troop-card-container.active {
  background: rgba(255, 255, 255, 0.1);
}

.elixir-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 24%;
  z-index: 30;
}

.elixir-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.25em 0.5em rgba(0, 0, 0, 0.5));
}

.card-main {
  position: relative;
  width: 85%;
  aspect-ratio: 5/6;
  border-radius: 0.75em;
  overflow: hidden;
  border: 0.375em solid rgba(255, 255, 255, 0.2);
}

.card-inner-border {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: 0.375em;
  border: 0.375em solid rgba(255, 255, 255, 0.3);
}

.elixir-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  z-index: 10;
  pointer-events: none;
}

.elixir-2 {
  background: linear-gradient(to top, rgba(34, 197, 94, 0.9), transparent);
}
.elixir-3 {
  background: linear-gradient(to top, rgba(59, 130, 246, 0.9), transparent);
}
.elixir-4 {
  background: linear-gradient(to top, rgba(168, 85, 247, 0.9), transparent);
}
.elixir-5 {
  background: linear-gradient(to top, rgba(250, 204, 21, 0.9), transparent);
}
.elixir-default {
  background: linear-gradient(to top, rgba(156, 163, 175, 0.9), transparent);
}

.troop-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.traits-container {
  position: absolute;
  bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8%;
  z-index: 20;
}

.trait-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(0.5em);
  border: 0.0625em solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
}

.trait-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trait-nav {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.25em;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  z-index: 25;
  opacity: 0;

  transition: opacity 200ms ease-in-out;
}

.trait-nav .btn::after {
  content: attr(data-title);
}

.trait-nav .info-btn {
  /* Layout and display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* Typography */
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 1em;
  font-weight: 500;
  color: #ffffff;

  /* Sizing and spacing */
  padding: 0.5rem 0;
  min-height: 2rem; /* 添加最小高度确保按钮有足够空间 */

  /* Background and colors */
  background-color: #475569;

  /* Border radius */
  border-radius: 0.5em;
  border: none;

  /* Transition */
  transition: all 200ms ease-in-out;

  /* Cursor */
  cursor: pointer;

  /* Focus styles */
  outline: none;
  width: 100%;
}

.trait-nav .info-btn:hover {
  background-color: #64748b;
}

.trait-nav .info-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em transparent, 0 0 0 0.25em hsl(var(--ring));
  ring-offset-color: hsl(var(--background));
}

.trait-nav .info-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.trait-nav .info-btn svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.trait-nav .use-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
  font-weight: 500;
  width: 100%;
  font-size: 0.875em;
  line-height: 1em;
  padding: 0.5rem 0;
  min-height: 2rem; /* 添加最小高度确保按钮有足够空间 */
  background-image: linear-gradient(to right, #16a34a, #059669);
  color: white;
  border-radius: 0.5em;
  border: 0;
  transition: all 0.2s;
}

.trait-nav .use-btn:hover {
  background-image: linear-gradient(to right, #15803d, #047857);
}

.trait-nav .use-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125em white, 0 0 0 0.25em #16a34a;
}

.trait-nav .use-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.trait-nav .use-btn svg {
  pointer-events: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.card-main:hover .trait-nav {
  opacity: 1;
}

.home-feahure h3 span {
  margin-right: 0.25em;
}

.home-feahure h3 span svg {
  width: 1rem;
  height: 1rem;
}

.home-feahure .icon-1 {
  color: #60a5fa;
}

.home-feahure .icon-2 {
  color: #f87171;
}

.home-feahure .icon-3 {
  color: #c084fc;
}

.home-feahure .icon-4 {
  color: #4ade80;
}

.footer {
  font-size: 0.875rem;
}

.tier-nav .btn {
  --bs-btn-bg: #242e38;
  --bs-btn-color: #10b77f;
  --bs-btn-border-color: #10b77f;
  --bs-btn-hover-bg: #10b77f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: #10b77f;
}

.tier-nav .btn svg {
  width: 1rem;
  height: 1rem;
  vertical-align: top;
  position: relative;
  top: 0.15rem;
}

.tier-list {
  background: #242e38;
  border: 1px solid #2f3b46;
}

.tier-list .tier-label {
  width: 100px;
  text-align: center;
  color: #06080a;
  font-size: 1.25rem;
  font-weight: 700;
}

.tier-list .tier-content {
  min-height: 7rem;
  flex: 1;
}

.tier-list .tier-content .tier-rank-item {
  width: 6rem;
  height: 6rem;
}

.tier-rank-content {
  --bs-gap: 0;
  --bs-columns: 8;
}

.tier-list-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #2f3b46;
}

.tier-list-item:last-child {
  border-bottom: none;
}

.tier-list-item .settings {
  width: 2rem;
  height: 100%;
  background: #3f4d5a url(/img/setting.svg) no-repeat center;
  background-size: 1.25rem;
  cursor: pointer;
}

.tier-list-item .move-buttons {
  width: 2rem;
  height: 100%;
  background: #2f3b46;
}

.tier-list-item .move-buttons .move-up {
  width: 100%;
  height: 1.5rem;
  background: url(/img/angle-up.svg) no-repeat center;
  background-size: 1.25rem;
  cursor: pointer;
}

.tier-list-item .move-buttons .move-down {
  width: 100%;
  height: 1.5rem;
  background: url(/img/angle-down.svg) no-repeat center;
  background-size: 1.25rem;
  cursor: pointer;
}

.tier-list-item:nth-child(1) .tier-label {
  border-top-left-radius: 0.375rem;
}

.tier-list-item:nth-child(1) .move-buttons {
  border-top-right-radius: 0.375rem;
}

.tier-list-item:nth-last-child(1) .tier-label {
  border-bottom-left-radius: 0.375rem;
}

.tier-list-item:nth-last-child(1) .move-buttons {
  border-bottom-right-radius: 0.375rem;
}

.tier-modal {
  --bs-modal-bg: #242e38;
  --bs-modal-border-color: #2f3b46;
  --bs-modal-header-border-color: #2f3b46;
  --bs-modal-footer-border-color: #2f3b46;
}

.tier-modal .modal-footer {
  justify-content: space-between;
}

.tier-modal .modal-footer .btn {
  --bs-btn-bg: #242e38;
  --bs-btn-color: #10b77f;
  --bs-btn-border-color: #10b77f;
  --bs-btn-hover-bg: #10b77f;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: #10b77f;
}

.troop-icon {
  width: 2rem;
}

.troop-icon img {
  width: 100%;
  height: 100%;
}

.features-item {
  --bs-border-color: rgba(51, 65, 85, 0.5);
}