/* ==========================================================================
   Desktop-only visual polish.

   This file is linked with <link ... media="(min-width: 1024px)"> so it
   never loads/applies below that width — phones (including landscape) are
   guaranteed to render exactly as before. Only real desktop/laptop screens
   and large tablets in landscape get these rules.
   ========================================================================== */

.wrap {
  max-width: none;
  padding: 0 40px;
}

.topbar {
  padding: 22px 28px 16px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.app-title {
  font-size: 20px;
}

#status.muted {
  font-size: 13px;
}

.content {
  padding: 26px 4px 40px;
}

.card-soft {
  border-radius: 24px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-soft:hover {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

#tabs.nav {
  flex-wrap: wrap;
  overflow-x: visible;
}

#tabs .nav-link {
  padding: 10px 18px;
  font-size: 13px;
}

.btn {
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-outline-light:hover,
.btn-outline-primary:hover {
  background: rgba(255, 255, 255, .08);
}

.item:hover {
  border-color: rgba(255, 255, 255, .22);
}

/* account badge reads as a small status pill instead of plain text */
.account-badge {
  background: rgba(110, 255, 154, .10);
  border: 1px solid rgba(110, 255, 154, .28);
  border-radius: 999px;
  padding: 3px 10px;
  width: fit-content;
  font-size: 12px;
}

/* a fixed floating pill has nowhere safe to sit once the page is a dense
   3-column dashboard (it ends up on top of form fields no matter which
   corner) — drop it on desktop and surface it as a normal menu item
   instead (#btnDonateMenu below) */
.donate-btn {
  display: none;
}

#btnDonateMenu.d-none {
  display: flex !important;
}

.fab {
  right: 32px;
  bottom: 32px;
}

.fab-menu {
  right: 32px;
  bottom: 100px;
}

/* ==========================================================================
   3-column dashboard layout.

   Left = "Основное" (identity, resources, XP, wallet — the priority column).
   Middle = Инвентарь / Заклинания / Способности / Пассивки (stacked).
   Right = Статы, pinned while scrolling.
   Everything else (Состояния/Экипировка/Призывы/Поля) stays tab-switchable
   below, full width, exactly like on mobile.
   ========================================================================== */

main.content {
  display: grid;
  grid-template-columns: minmax(340px, 480px) minmax(420px, 1fr) minmax(320px, 460px);
  grid-template-areas:
    "tabs   tabs   tabs"
    "main   inv    stats"
    "main   spells stats"
    "main   passive stats"
    "main   abilities stats"
    "extra  extra  extra";
  align-items: start;
  gap: 22px;
}

#tabs.nav {
  grid-area: tabs;
}

#tab-main {
  grid-area: main;
}

#tab-inv {
  grid-area: inv;
}

#tab-spells {
  grid-area: spells;
}

#tab-passive-abilities {
  grid-area: passive;
}

#tab-abilities {
  grid-area: abilities;
}

#tab-stats {
  grid-area: stats;
  position: sticky;
  top: 108px;
  align-self: start;
}

#tab-states,
#tab-summons,
#tab-equip,
#tab-custom {
  grid-area: extra;
}

/* these six panels are always visible as columns; ignore the mobile
   single-tab-at-a-time toggling that adds/removes this class via JS */
#tab-main.d-none,
#tab-stats.d-none,
#tab-inv.d-none,
#tab-spells.d-none,
#tab-passive-abilities.d-none,
#tab-abilities.d-none {
  display: block !important;
}

/* their nav pills are redundant once the column is permanently visible;
   keep pills only for the remaining tab-switched sections */
#tabs .nav-link[data-tab="main"],
#tabs .nav-link[data-tab="stats"],
#tabs .nav-link[data-tab="inv"],
#tabs .nav-link[data-tab="spells"],
#tabs .nav-link[data-tab="abilities"],
#tabs .nav-link[data-tab="passive-abilities"] {
  display: none;
}

/* right column is narrower: keep its stat grids single-column so labels
   and inputs stay readable instead of being squeezed */
#tab-stats .grid-2 {
  grid-template-columns: 1fr;
}

/* left column is narrower than a full page too: the combat HUD and XP
   grid were tuned for a wide viewport (5 HUD chips / 3 XP columns) and
   would be crammed into ~350px here, so cap them back down */
#tab-main .combat-hud-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tab-main .xp-grid {
  grid-template-columns: 1fr 1fr;
}

#tab-main .xp-add {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Login page hero (desktop only — mobile keeps the plain centered card).
   ========================================================================== */

.login-wrap {
  max-width: 1100px;
  gap: 72px;
}

.login-hero.d-none {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  flex-shrink: 0;
}

.login-hero-icon {
  font-size: 52px;
  line-height: 1;
}

.login-hero-title {
  font-size: 38px;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 20%, #9bb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-hero-tag {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  margin: 0;
  max-width: 400px;
}

.login-hero-features {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 12px;
}

.login-hero-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 14px 16px;
}

.login-hero-features i {
  font-size: 20px;
  color: #6ea8fe;
  flex-shrink: 0;
}

.login-card {
  flex-shrink: 0;
}