:root{
  --bg:#522c44;
  --text:#f3f3f3;
  --card:#39212e;
  --accent:#4f46e5;
  --border:#e0e0e0;
  --radius:12px;

  --sidebar-w:235px;
  --header-h:64px;
}

/* =========================
   Base
========================= */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
}

h2{ font-weight:600; }

.app-main,
.card-ui,
main.app-main{
  min-width:0;
}

.card-ui{
  background:var(--card);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.small-muted{
  font-size:.85rem;
  opacity:.8;
}

.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* =========================
   Layout
========================= */
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--header-h) 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

header.app-header{
  grid-area:header;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
}

aside.app-sidebar{
  grid-area:sidebar;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:1rem .75rem;
  background:rgba(0,0,0,.22);
  border-right:1px solid rgba(255,255,255,.10);
}

main.app-main{
  grid-area:main;
  padding:1rem;
}

footer.app-footer{
  grid-area:footer;
  padding:.75rem 1rem;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

@media (max-width:992px){
  .app{
    grid-template-columns:1fr;
    grid-template-rows:var(--header-h) auto 1fr auto;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }

  aside.app-sidebar{
    position:relative;
    height:auto;
  }
}

/* =========================
   Sidebar
========================= */
.nav-title{
  margin:.75rem .75rem .25rem;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.75;
}

.nav-link{
  padding:.55rem .75rem;
  border-radius:.6rem;
  color:rgba(255,255,255,.85);
}

.nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.nav-link.active{
  color:#fff;
  background:rgba(255,255,255,.14);
}

/* =========================
   Buttons / pagination / dropdown
========================= */
.btn.button,
.btn.button:hover{
  color:#fff;
  background-color:#522c44;
  border:1px solid #fff;
}

.pagination .page-link{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
}

.pagination .page-link:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}

.pagination .page-item.active .page-link{
  background:#522c44;
  border-color:rgba(255,255,255,.22);
  color:#fff;
}

.pagination .page-item.disabled .page-link{
  background:rgba(0,0,0,.10);
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.35);
}

.dropdown-menu{
  border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}

/* =========================
   Generic tables
========================= */
table{
  border:1px solid var(--border);
}

th,
td{
  vertical-align:middle !important;
}

.table-sm td,
.table-sm th{
  padding:.35rem .5rem;
}

th.notsortable,
th.sortable{
  background:#522c44;
  color:#fff;
  user-select:none;
  white-space:nowrap;
}

th.sortable{
  cursor:pointer;
}

th.sortable:hover{
  background:rgba(255,255,255,.08);
}

tr:hover{
  background-color:rgba(255,255,255,.06);
}

.sort-icon{
  margin-left:.35rem;
  font-size:.85em;
  opacity:.8;
}

/* =========================
   Sliders / charts
========================= */
#tierSlider{
  margin-top:5px;
  margin-right:15px;
}

#tierSlider .noUi-target{ height:6px; }
#tierSlider .noUi-handle{
  width:25px;
  height:25px;
  top:-4px;
}

.noUi-tooltip{ display:none; }

.chart-container{
  position:relative;
  width:100%;
  height:350px;
}

.chart-container canvas{
  width:100%;
  height:100%;
}

/* =========================
   Misc utilities
========================= */
.item-row{ cursor:pointer; }

.flag{
  width:18px;
  height:12px;
  margin-left:.35rem;
  object-fit:cover;
  border-radius:2px;
  opacity:.9;
}

.inactive-warning{
  margin-left:4px;
  font-size:.85rem;
  color:#b34220;
  text-shadow:0 0 4px rgba(255,184,77,.5);
}

.badge-soft{
  display:inline-block;
  padding:.3rem .6rem;
  font-size:.75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
}

/* =========================
   Generic details blocks
========================= */
.details-block{
  overflow:hidden;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
}

.details-block + .details-block{
  margin-top:1.5rem;
}

.details-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1rem;
  color:#fff;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.details-block-title{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
}

.details-block-body{
  padding:.7rem;
}

/* =========================
   Key-value / overview grids
========================= */
.kv-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:.75rem 1rem;
}

.kv{
  grid-column:span 6;
}

@media (min-width:992px){
  .kv{ grid-column:span 4; }
}

.kv .k{
  font-size:.85rem;
  opacity:.75;
}

.kv .v{
  margin-top:.15rem;
  font-weight:600;
}

.kv-grid.kv-grid-wide{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
  gap:.4rem;
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
  gap:.35rem .4rem;
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.overview-label{
  margin-bottom:.2rem;
  font-size:.75rem;
  opacity:.65;
}

.overview-value{
  font-size:1.2rem;
  font-weight:600;
}

.overview-player-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:1.2rem;
  text-align:center;
}

.overview-player-grid > div{
  padding:.4rem .6rem;
}

.overview-player-label{
  margin-bottom:.35rem;
  font-size:.75rem;
  opacity:.65;
}

.overview-player-value{
  font-size:1.25rem;
  font-weight:600;
}

/* =========================
   Clean tables
========================= */
.table.clean-table{
  margin:0;
  border-collapse:separate;
  border-spacing:0;
}

.table.clean-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
  border-bottom:1px solid rgba(255,255,255,.20);
}

.table.clean-table td,
.table.clean-table th{
  padding:.55rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.table.clean-table tbody tr:hover{
  background:rgba(79,70,229,.18);
}

.condensed-table th,
.condensed-table td{
  padding:.35rem .55rem !important;
  font-size:.88rem;
}

.condensed-table thead th{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.85;
}

.condensed-table tbody tr{
  transition:background .12s ease;
}

.condensed-table .small-muted{
  font-size:.75rem;
}

/* =========================
   Cards: rank / profile
========================= */
.rank-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.4rem;
}

.profil-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
  gap:.4rem;
}

.profil-grid-small{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(105px, 1fr));
  gap:.4rem;
}

.rank-card,
.profil-card{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
  padding:.6rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.15);
  text-decoration:none;
  color:inherit;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.rank-card:hover,
.profil-card:hover{
  color:inherit;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-2px);
}

.rank-icon-wrap,
.profil-icon-wrap{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.rank-icon,
.profil-icon{
  width:45px;
  height:45px;
  object-fit:contain;
  display:block;
}

.rank-text,
.profil-text{
  min-width:0;
}

.rank-title,
.profil-title{
  margin:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  color:#fff;
}

.rank-sub{
  margin-top:.18rem;
  font-size:.78rem;
  line-height:1.1;
  opacity:.68;
}

.rank-empty,
.profil-empty{
  opacity:.75;
}

/* =========================
   Buildings / upgrades
========================= */
.building-card,
.upgrade-card{
  text-align:center;
  padding:.6rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.8rem;
  background:rgba(0,0,0,.15);
  transition:transform .15s ease, background .15s ease;
}

.building-card:hover,
.upgrade-card:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}

.building-img,
.upgrade-img{
  width:60px;
  height:60px;
  margin:0 auto .4rem;
  object-fit:contain;
  display:block;
}

.building-name,
.upgrade-name{
  font-size:.85rem;
  line-height:1.2;
  opacity:.8;
}

.building-level,
.upgrade-level{
  margin-top:.2rem;
  font-size:1.1rem;
  font-weight:600;
}

.building-level.is-max,
.upgrade-level.is-max{
  color:#22c55e;
  font-weight:700;
}

/* =========================
   Guild rank / accordions
========================= */
.guild-rank-0{ opacity:.95; }
.guild-rank-1{ color:#f5c542; font-weight:600; }
.guild-rank-2{ color:#ff5c5c; font-weight:600; }

.collapse-arrow{
  font-size:.9rem;
  opacity:.9;
  transition:transform .2s ease;
}

.details-block-header[aria-expanded="true"] .collapse-arrow{
  transform:rotate(180deg);
}

/* =========================
   Shared hero styles (player + city)
========================= */
.player-hero,
.city-hero{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:1.15rem 1.15rem 1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.player-hero-main,
.city-hero-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1rem;
}

.player-hero-left,
.city-hero-left{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}

.player-hero-title-wrap,
.city-hero-title-wrap{
  min-width:0;
}

.player-hero-name,
.city-hero-name{
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-wrap:wrap;
  font-size:1.6rem;
  font-weight:700;
  line-height:1.1;
  color:#fff;
}

.player-hero-sub,
.city-hero-sub{
  margin-top:.35rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  font-size:.92rem;
  opacity:.78;
}

.player-hero-sep,
.city-hero-sep{
  opacity:.45;
}

.player-hero-city{
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

.player-hero-city:hover{
  text-decoration:underline;
}

.player-hero-right,
.city-hero-right{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.player-mini-stat,
.city-mini-stat{
  padding:.55rem .8rem;
  border-radius:.8rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-align:right;
}

.player-mini-stat-label,
.city-mini-stat-label{
  font-size:.72rem;
  line-height:1.1;
  opacity:.65;
}

.player-mini-stat-value,
.city-mini-stat-value{
  margin-top:.15rem;
  font-size:.92rem;
  font-weight:600;
}

.player-hero-stats,
.city-hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.4rem;
}

/* =========================
   Hero stat cards
========================= */
.player-hero-stat-card,
.city-hero-stat-card{
  padding:.75rem .85rem;
  border-radius:14px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
  transition:background .15s ease, transform .15s ease;
}

.player-hero-stat-card:hover,
.city-hero-stat-card:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.city-hero-stat-card{
  text-align:center;
}

.player-hero-stat-card{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.player-hero-stat-icon img{
  width:40px;
  height:40px;
  object-fit:contain;
  opacity:.9;
}

.player-hero-stat-text{
  display:flex;
  flex-direction:column;
}

.player-hero-stat-label,
.city-hero-stat-label{
  font-size:.75rem;
  line-height:1.1;
  opacity:.68;
}

.city-hero-stat-label{
  margin-bottom:.3rem;
  line-height:1.15;
}

.player-hero-stat-value,
.city-hero-stat-value{
  color:#fff;
  font-weight:700;
}

.player-hero-stat-value{
  font-size:1.1rem;
  line-height:1.2;
}

.city-hero-stat-value{
  font-size:1.2rem;
  line-height:1.15;
}

/* =========================
   Player-specific
========================= */
.player-banner{
  position:relative;
  height:60px;
  min-width:35px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.player-banner-img{
  height:60px;
  width:auto;
  display:block;
}

.player-banner-level{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  font-weight:700;
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 4px rgba(0,0,0,.7);
  pointer-events:none;
  transform:translateY(-7px);
}

.player-flag-inline{
  margin-left:.35rem;
  border-radius:2px;
  vertical-align:middle;
}

.player-banned-icon{
  margin-left:.25rem;
  font-size:1.8rem;
  line-height:1;
  vertical-align:middle;
  color:#ff6b6b;
}

.player-core-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.85rem 1rem;
}

.player-core-item{
  padding:.7rem .85rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  text-align:center;
}

.player-core-label{
  margin-bottom:.25rem;
  font-size:.76rem;
  opacity:.68;
}

.player-core-value{
  font-size:1.1rem;
  font-weight:700;
}

/* =========================
   City-specific
========================= */
.city-banner{
  position:relative;
  height:60px;
  min-width:35px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.city-banner-img{
  height:60px;
  width:auto;
  display:block;
}

.city-banner-level{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  font-weight:700;
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 4px rgba(0,0,0,.7);
  pointer-events:none;
  transform:translateY(-5px);
}

.member-link{
  color:inherit;
  text-decoration:none;
}

.member-link:hover{
  text-decoration:underline;
}

/* =========================
   Events block
========================= */
.event-score-area{
  height:100%;
  color:#fff;
}

.event-score-title{
  margin:0 0 .75rem;
  font-size:1rem;
  font-weight:600;
  color:#fff;
}

.event-score-list{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

a.event-score-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 92px;
  align-items:center;
  gap:.8rem;
  padding:.65rem .8rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.7rem;
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

a.best-score{
  border:2px solid rgba(210, 174, 35, 0.79);
}

a.event-score-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

a.best-score:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(242, 202, 45, 0.97);
  transform:translateY(-1px);
}

.event-score-item-active{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 14px rgba(255,255,255,.06);
}

.event-score-item-active:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

.event-score-left{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}

.event-score-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 auto;
  opacity:.9;
  margin-top:-6px;
  margin-bottom:-6px;
}

.event-score-icon-tiny{
  width:23px;
  height:23x;
  object-fit:contain;
  flex:0 0 auto;
  
}

.event-score-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.event-score-name{
  font-weight:500;
  line-height:1.1;
  color:#fff;
}

.event-score-dates{
  margin-top:1px;
  font-size:.72rem;
  opacity:.65;
  color:#fff;
}

.event-score-value{
  text-align:right;
  font-weight:700;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.event-live-badge{
  display:inline-block;
  margin-left:.45rem;
  padding:.08rem .38rem;
  border-radius:999px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(79,70,229,.85);
  vertical-align:middle;
}

/* =========================
   Events page
========================= */
.events-grids{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:start;
}

@media (max-width:1200px){
  .events-grids{
    grid-template-columns:1fr;
  }
}

/* =========================
   Mobile hero tweaks
========================= */
@media (max-width:767px){
  .player-hero-main,
  .city-hero-main{
    flex-direction:column;
    align-items:stretch;
  }

  .player-mini-stat,
  .city-mini-stat{
    text-align:left;
  }

  .city-hero-right{
    align-items:stretch;
  }
}

.event-list-item{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.65rem .8rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.7rem;
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.event-list-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.event-list-item-active{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 14px rgba(255,255,255,.06);
}

.event-list-left{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  width:100%;
}

.event-list-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 auto;
  opacity:.9;
  margin-top:-6px;
  margin-bottom:-6px;
}

.event-list-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.event-list-name{
  font-weight:500;
  line-height:1.1;
  color:#fff;
}

.event-list-dates{
  margin-top:1px;
  font-size:.72rem;
  opacity:.65;
}

.events-grids > .details-block + .details-block{
  margin-top:0;
}

.city-hero.city-hero-compact{
  padding:.55rem .8rem;
}

.city-hero-compact .city-banner{
  height:45px;
}

.city-hero-compact .city-banner-img{
  height:45px;
}

.city-hero-compact .city-mini-stat{
  padding:.35rem .55rem;
}

.city-hero-compact .city-mini-stat-label{
  font-size:.65rem;
}

.city-hero-compact .city-mini-stat-value{
  font-size:.82rem;
}

.city-hero-compact .city-hero-name{
  font-size:1.25rem;
}

.city-hero-compact .city-hero-main{
  margin-bottom: .1rem;
}

.nav-sm-gap{
  gap:.35rem;
}

#playerProgressTabs .btn.button{
  padding:.2rem .55rem;
  font-size:.8rem;
}

#playerProgressTabs .btn.button:not(.active){
  opacity:.75;
}

#playerProgressTabs .btn.button.active{
  opacity:1;
}

#cityProgressTabs .btn.button{
  padding:.2rem .55rem;
  font-size:.8rem;
}

#cityProgressTabs .btn.button:not(.active){
  opacity:.75;
}

#cityProgressTabs .btn.button.active{
  opacity:1;
}

.header-player-link{
  color:inherit;
  display:block;
}

.header-player-link:hover{
  color:inherit;
  text-decoration:none;
}

.app-header .player-hero-left{
  gap:.5rem;
}

.app-header .player-banner{
  height:44px;
  min-width:28px;
}

.app-header .player-banner-img{
  height:44px;
  width:auto;
}

.app-header .player-banner-level{
  font-size:.95rem;
  transform: translateY(-5px);
}

.app-header .player-hero-name{
  font-size:1rem;
  line-height:1.05;
  gap:.25rem;
}

.app-header .player-hero-sub{
  margin-top:.1rem;
  font-size:.72rem;
  gap:.25rem;
  opacity:.78;
}

.app-header .player-flag-inline{
  width:18px;
  height:12px;
}

.app-header .player-banned-icon{
  font-size:1rem;
  margin-left:.1rem;
}

@media (max-width: 992px){
  .app-header .header-player-link .player-hero-sub{
    display:none;
  }

  .app-header .header-player-link .player-hero-name{
    font-size:.9rem;
  }

  .app-header .player-banner{
    height:38px;
  }

  .app-header .player-banner-img{
    height:38px;
  }
}

.player-hero-city {
  text-decoration: none;
}

.player-hero-city:hover {
  text-decoration: underline;
}

.sidebar-logo {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 5px rgba(255, 200, 50, 0.25));
  object-fit: cover;
}

.home-landing{
  max-width: 100%;
  margin: 0 auto;
}

.home-hero{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(79,70,229,.18), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(168,85,247,.16), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  padding: 1.5rem;
}

.home-hero-inner{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items:center;
}

.home-hero-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.home-hero-logo{
  width:100%;
  max-width:280px;
  height:auto;
  filter: drop-shadow(0 0 20px rgba(255, 200, 50, 0.25));
}

.home-kicker{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
  margin-bottom:.35rem;
}

.home-title{
  font-size:2.4rem;
  font-weight:800;
  line-height:1.05;
  margin:0 0 .6rem 0;
  color:#fff;
}

.home-subtitle{
  max-width:720px;
  font-size:1rem;
  line-height:1.55;
  opacity:.86;
  margin:0;
}

.home-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1rem;
}

.home-stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:.75rem;
}

.home-stat-card{
  min-width:0;
  padding:1rem;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}

.home-stat-label{
  font-size:.8rem;
  opacity:.68;
  margin-bottom:.3rem;
  line-height:1.2;
}

.home-stat-value{
  min-width:0;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  overflow-wrap:anywhere;
}

.home-feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.75rem;
}

.home-feature-card{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1rem;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
  color:inherit;
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.home-feature-card:hover{
  color:inherit;
  text-decoration:none;
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.home-feature-icon-wrap{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.home-feature-icon{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}

.home-feature-text{
  min-width:0;
}

.home-feature-title{
  font-size:1rem;
  font-weight:700;
  color:#fff;
  line-height:1.2;
  margin-bottom:.2rem;
}

.home-feature-desc{
  font-size:.88rem;
  opacity:.76;
  line-height:1.35;
}

.home-info-card{
  height:100%;
  padding:1rem;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
}

.home-info-title{
  font-size:1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.35rem;
}

.home-info-text{
  font-size:.9rem;
  line-height:1.45;
  opacity:.8;
}

.home-search-wrap{
  max-width:760px;
  margin:0 auto;
}

@media (max-width: 992px){
  .home-hero-inner{
    grid-template-columns: 1fr;
    text-align:center;
  }

  .home-subtitle{
    margin:0 auto;
  }

  .home-hero-actions{
    justify-content:center;
  }

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

  .home-feature-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px){
  .home-title{
    font-size:1.9rem;
  }

  .home-stats-grid{
    grid-template-columns: 1fr;
  }
}

.home-roadmap-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.home-roadmap-item{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  line-height:1.35;
}

.prev-names-popover {
  max-width: 1200px;
}

.prev-names-columns {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.prev-names-col {
  min-width: 220px;
}

.prev-name-row {
  white-space: nowrap;
  line-height: 1.45;
  margin-bottom: 2px;
}

.prev-name-text {
  font-weight: 500;
}

.prev-name-date {
  opacity: 0.7;
  font-size: 0.9em;
}

.popover {
  max-width: 1200px;
}

.guild-ticks-block{
  max-width: 100%;
}

.guild-ticks-wrap{
  max-width: 100%;
  overflow-x: auto;
}

.guild-ticks-table{
  width: auto;
  min-width: 100%;
  table-layout: fixed;
}

.guild-ticks-table th,
.guild-ticks-table td{
  white-space: nowrap;
  font-size: .9rem;
  padding: .12rem .35rem;
}

.guild-ticks-table .building-col{
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  background: var(--bs-body-bg, #111);
}

.guild-ticks-table .member-col{
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  vertical-align: bottom;
  padding: .2rem .1rem;
}

.guild-ticks-table .member-col-name{
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(-135deg);
  line-height: 1;
  font-size: .9rem;
}

.guild-ticks-table .tick-cell{
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
}

.guild-ticks-table .sticky-col-left{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bs-body-bg, #111);
}

.guild-ticks-table thead .sticky-col-left{
  z-index: 3;
}

.ticks-category-row td{
  color: #fff;
  font-size: .9rem;
  padding-top: .30rem;
  padding-bottom: .30rem;
  border: 0 !important;
  box-shadow:
    inset 0 2px 0 #2b2b2b,
    inset 0 -2px 0 #2b2b2b;
}

.ticks-category-workers td,
.ticks-category-workers .building-col{
  background: #ee3131;
}

.ticks-category-resources td,
.ticks-category-resources .building-col{
  background: #4285f4;
}

.ticks-category-city td,
.ticks-category-city .building-col{
  background: #ff6d01;
}

.ticks-worker-row-a > td,
.ticks-worker-row-a > td.building-col{
  background: #f4cccc !important;
}

.ticks-worker-row-b > td,
.ticks-worker-row-b > td.building-col{
  background: #ea9999 !important;
}

.ticks-resource-row-a > td,
.ticks-resource-row-a > td.building-col{
  background: #c9daf8 !important;
}

.ticks-resource-row-b > td,
.ticks-resource-row-b > td.building-col{
  background: #a4c2f4 !important;
}

.ticks-city-row-a > td,
.ticks-city-row-a > td.building-col{
  background: #fce5cd !important;
}

.ticks-city-row-b > td,
.ticks-city-row-b > td.building-col{
  background: #f9cb9c !important;
}

.guild-ticks-corner{
  text-align: center;
  vertical-align: middle;
}

.guild-ticks-corner-text{
  display: inline-block;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 140px;
  text-align: center;
}

.ticks-thresholds{
  flex-wrap: wrap;
}

.ticks-threshold-btn.active-threshold{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}

.guild-ticks-table .tick-cell.tick-under-threshold{
  background: #dd7e6b !important;
  color: #111 !important;
  font-weight: 700;
}

.guild-ticks-table .member-col.tick-player-under-threshold{
  background: #dd7e6b !important;
}

.guild-ticks-table .member-col.tick-player-under-threshold .member-col-name{
  color: #111 !important;
  font-weight: 700;
}

  .heroes-page-wrap{
    width:100%;
    max-width:none;
  }

  .heroes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 360px));
    gap:1rem;
    justify-content:center;
  }

  .hero-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:1rem;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    display:flex;
    flex-direction:column;
    gap:.9rem;
  }

  .hero-card-top{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
  }

  .hero-class-icon-wrap{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .hero-class-icon{
    width:52px;
    height:52px;
    object-fit:contain;
    display:block;
  }

  .hero-main{
    flex:1;
    min-width:0;
  }

  .hero-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap;
  }

  .hero-name{
    margin:0;
    font-size:1.25rem;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hero-level-wrap{
    display:flex;
    align-items:center;
    gap:.45rem;
    flex-wrap:nowrap;
  }

  .hero-element{
    width:22px;
    height:22px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  }

  .hero-level{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.28rem .55rem;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
  }

  .hero-meta{
    display:flex;
    gap:.45rem;
    flex-wrap:wrap;
    margin-top:.35rem;
    align-items:center;
  }

  .hero-class-name{
    font-weight:600;
    color:#e9ecef;
  }

  .hero-type-badge{
    display:inline-flex;
    align-items:center;
    padding:.24rem .5rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    border:1px solid transparent;
  }

  .hero-type-badge.fighter{
    background:rgba(220,53,69,.12);
    color:#ff98a5;
    border-color:rgba(220,53,69,.25);
  }

  .hero-type-badge.rogue{
    background:rgba(25,135,84,.12);
    color:#8ee4b7;
    border-color:rgba(25,135,84,.25);
  }

  .hero-type-badge.spellcaster{
    background:rgba(13,110,253,.12);
    color:#8fb8ff;
    border-color:rgba(13,110,253,.25);
  }

  .hero-type-badge.unknown{
    background:rgba(255,255,255,.08);
    color:#dfe3e8;
    border-color:rgba(255,255,255,.12);
  }

  .hero-skills{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
  }

  .hero-skill{
    position:relative;
    width:54px;
    height:54px;
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  }

  .hero-skill img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .hero-skill-empty{
    border-style:dashed;
    background:rgba(255,255,255,.025);
  }

  .hero-skill-empty-mark{
    color:rgba(255,255,255,.45);
    font-size:1.1rem;
    font-weight:700;
  }

  .heroes-empty{
    border:1px dashed rgba(255,255,255,.12);
    border-radius:16px;
    padding:1rem;
    background:rgba(255,255,255,.02);
    color:#c7ced6;
  }

  .heroes-toolbar-note{
    color:#9aa4af;
    font-size:.9rem;
  }

  .hero-filter-field label{
    display:block;
    margin-bottom:.45rem;
    font-size:.82rem;
    font-weight:600;
    color:#cfd6dd;
  }

  .hero-filters-wrap{
    display:grid;
    grid-template-columns:auto auto minmax(260px, 1fr);
    gap:1rem 1.25rem;
    align-items:end;
  }

  .hero-filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
  }

  .hero-filter-pills-types,
  .hero-filter-pills-elements{
    align-items:center;
  }

  .hero-filter-pills-elements{
    gap:.65rem;
  }

  .hero-filter-pill{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#dfe6ee;
    border-radius:14px;
    min-height:44px;
    padding:.5rem .9rem;
    font-size:.85rem;
    font-weight:600;
    line-height:1.2;
    transition:.15s ease;
  }

  .hero-filter-pill:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
  }

  .hero-filter-pill.is-active{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.24);
    color:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.04) inset;
  }

  .hero-filter-pill-type{
    height:44px;
    padding:0 .95rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:600;
    line-height:1;
  }

  .hero-filter-pill-element{
    width:44px;
    height:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
  }

  .hero-filter-pill-all{
    font-size:.8rem;
    font-weight:700;
    line-height:1;
  }

  .hero-filter-pill-element.is-active{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.26);
    box-shadow:0 0 0 2px rgba(255,255,255,.05) inset;
  }

  .hero-filter-pill.type-fighter{
    background:rgba(220,53,69,.08);
    color:#ff98a5;
    border-color:rgba(220,53,69,.20);
  }

  .hero-filter-pill.type-fighter:hover{
    background:rgba(220,53,69,.12);
    border-color:rgba(220,53,69,.28);
  }

  .hero-filter-pill.type-fighter.is-active{
    background:rgba(220,53,69,.18);
    color:#ffd2d8;
    border-color:rgba(220,53,69,.34);
    box-shadow:0 0 0 2px rgba(220,53,69,.10) inset;
  }

  .hero-filter-pill.type-rogue{
    background:rgba(25,135,84,.08);
    color:#8ee4b7;
    border-color:rgba(25,135,84,.20);
  }

  .hero-filter-pill.type-rogue:hover{
    background:rgba(25,135,84,.12);
    border-color:rgba(25,135,84,.28);
  }

  .hero-filter-pill.type-rogue.is-active{
    background:rgba(25,135,84,.18);
    color:#c7f6dd;
    border-color:rgba(25,135,84,.34);
    box-shadow:0 0 0 2px rgba(25,135,84,.10) inset;
  }

  .hero-filter-pill.type-spellcaster{
    background:rgba(13,110,253,.08);
    color:#8fb8ff;
    border-color:rgba(13,110,253,.20);
  }

  .hero-filter-pill.type-spellcaster:hover{
    background:rgba(13,110,253,.12);
    border-color:rgba(13,110,253,.28);
  }

  .hero-filter-pill.type-spellcaster.is-active{
    background:rgba(13,110,253,.18);
    color:#d4e3ff;
    border-color:rgba(13,110,253,.34);
    box-shadow:0 0 0 2px rgba(13,110,253,.10) inset;
  }

  .hero-filter-element-icon{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));
  }

  .hero-filter-name-wrap{
    min-width:260px;
  }

  .hero-filter-name-actions{
    display:flex;
    gap:.75rem;
    align-items:stretch;
  }

  .hero-filter-name-actions .hero-filter-name-wrap{
    flex:1 1 auto;
    margin-bottom:0;
  }

  .hero-filter-name-actions .hero-filters-actions{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
  }

  .hero-filter-name-actions .hero-filters-actions .btn{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }

  .hero-filter-input{
    width:100%;
    min-height:40px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:.55rem .8rem;
    outline:none;
  }

  .hero-filter-input:focus{
    border-color:rgba(255,255,255,.22);
    box-shadow:0 0 0 3px rgba(255,255,255,.05);
  }

  .hero-filters-actions{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
  }

  .hero-card.is-hidden{
    display:none !important;
  }

  @media (max-width: 1100px){
    .hero-filters-wrap{
      grid-template-columns:1fr;
    }

    .hero-filter-name-actions{
      flex-wrap:wrap;
    }

    .hero-filter-name-wrap{
      min-width:0;
    }
  }

  @media (max-width: 575.98px){
    .hero-card{
      padding:.9rem;
    }

    .hero-class-icon-wrap{
      width:58px;
      height:58px;
      min-width:58px;
    }

    .hero-class-icon{
      width:46px;
      height:46px;
    }

    .hero-skill{
      width:50px;
      height:50px;
    }
  }
  
  .heroes-share-render-host{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  z-index:-1;
}

.heroes-share-sheet{
  width:1240px;
  padding:28px;
  background:
    radial-gradient(circle at top right, rgba(13,110,253,.10), transparent 28%),
    radial-gradient(circle at top left, rgba(25,135,84,.10), transparent 24%),
    #301c27;
  color:#fff;
}

.heroes-share-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:22px;
}

.heroes-share-kicker{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#93a1b2;
  margin-bottom:.35rem;
}

.heroes-share-title{
  margin:0;
  font-size:2rem;
  line-height:1.1;
  font-weight:800;
  color:#fff;
}

.heroes-share-subtitle{
  margin-top:.45rem;
  color:#b8c2cf;
  font-size:1rem;
}

.heroes-share-logo-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.heroes-share-logo{
  display:block;
  max-width:280px;
  max-height:84px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.heroes-share-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.heroes-share-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.heroes-share-card-top{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.heroes-share-class-icon-wrap{
  width:64px;
  height:64px;
  min-width:64px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.heroes-share-class-icon{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

.heroes-share-main{
  flex:1;
  min-width:0;
}

.heroes-share-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
}

.heroes-share-name{
  margin:0;
  font-size:1.05rem;
  line-height:1.15;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.heroes-share-level-wrap{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:nowrap;
}

.heroes-share-element{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.heroes-share-level{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.28rem .55rem;
  border-radius:999px;
  font-size:.76rem;
  font-weight:700;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}

.heroes-share-meta{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin-top:.35rem;
  align-items:center;
}

.heroes-share-class-name{
  font-weight:600;
  color:#e9ecef;
}

.heroes-share-skills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.heroes-share-sheet .hero-skill{
  width:52px;
  height:52px;
}

.changelog-layout{
  display:flex;
  flex-direction:column;
}

.changelog-section-title{
  margin:0;
  font-size:1rem;
  font-weight:600;
}

.changelog-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.changelog-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:1rem;
}

.changelog-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.55rem;
}

.changelog-item-title-wrap{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}

.changelog-item-title{
  margin:0;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  line-height:1.35;
}

.changelog-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.changelog-date{
  font-size:.85rem;
  color:rgba(255,255,255,.68);
  white-space:nowrap;
}

.changelog-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.28rem .55rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  border:1px solid transparent;
}

.changelog-badge-new{
  background:rgba(25,135,84,.18);
  color:#7ee2a8;
  border-color:rgba(25,135,84,.35);
}

.changelog-badge-improvement{
  background:rgba(13,110,253,.18);
  color:#8eb9ff;
  border-color:rgba(13,110,253,.35);
}

.changelog-badge-fix{
  background:rgba(255,193,7,.16);
  color:#ffd86b;
  border-color:rgba(255,193,7,.35);
}

.changelog-content{
  margin:0;
  color:rgba(255,255,255,.88);
  line-height:1.55;
}

.changelog-empty{
  color:rgba(255,255,255,.68);
}

@media (max-width: 576px){
  .changelog-item{
    padding:.9rem;
  }

  .changelog-item-head{
    gap:.65rem;
  }
}

.digear-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:1rem;
		align-items:start;
	  }
	  .digear-grid > .details-block + .details-block{
		margin-top:0;
	  }

		.digear-controls{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 320px));
  gap:1.25rem;
  align-items:start;
}

@media (max-width: 1400px){
  .digear-controls{
    grid-template-columns:repeat(2, minmax(220px, 320px));
  }
}

@media (max-width: 900px){
  .digear-controls{
    grid-template-columns:1fr;
  }
}

.digear-table tbody td.uncommon{
  background-color: rgba(88,254,153) !important;
}

.digear-table tbody td.flawless{
  background-color: rgba(86,249,255) !important;
}

.digear-table tbody td.epic{
  background-color: rgba(216,109,254) !important;
}

.digear-table tbody td.legendary{
  background-color: rgb(255,229,130) !important;
}