/* ==========================================================================
   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;
}

/* The scroll-triggered header shrink is a mobile space-saving trick; on a
   sticky 3-column dashboard it just resizes the header while the page
   scrolls, which visibly jittered. Neutralize it here — the header stays
   at its normal size regardless of the is-collapsed class. */
.topbar.is-collapsed {
  padding-top: 22px !important;
  padding-bottom: 16px !important;
}

.topbar.is-collapsed .app-title {
  font-size: 20px !important;
}

.topbar.is-collapsed #status.muted,
.topbar.is-collapsed .account-badge {
  opacity: 1 !important;
  height: auto !important;
  margin-top: 2px !important;
  transform: none !important;
  overflow: visible !important;
}

.topbar.is-collapsed #status {
  display: block !important;
}

.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;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 10px;
}

#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 — always visible,
   the priority column). Right = Статы, always visible, pinned while
   scrolling. Middle = everything else (Инвентарь / Заклинания /
   Способности / Пассивки / Состояния / Призывы / Экипировка / Поля) as
   one shared, tab-switched slot — only the active one shows there, driven
   by the same top nav pills and tabSwitch() as mobile. That keeps all the
   switchable content in one consistent place instead of some of it being
   permanently stacked and the rest appearing in a separate full-width
   block below, which read as broken.
   ========================================================================== */

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";
  align-items: start;
  gap: 22px;
}

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

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

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

#tab-inv,
#tab-spells,
#tab-passive-abilities,
#tab-abilities,
#tab-states,
#tab-summons,
#tab-equip,
#tab-custom {
  grid-area: inv;
}

/* only main/stats are permanent columns; everything else keeps the normal
   mobile tab-switching behaviour (one visible at a time) inside the
   shared middle-column slot */
#tab-main.d-none,
#tab-stats.d-none {
  display: block !important;
}

/* their nav pills are redundant once permanently visible; every other
   pill stays a real switch for the middle column */
#tabs .nav-link[data-tab="main"],
#tabs .nav-link[data-tab="stats"] {
  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;
}

/* Bootstrap's col-md-4 forces the HP/Mana/Energy resource fields into 3
   columns from 768px of VIEWPORT width, with no idea that its actual
   container here is a ~400px column — that squeezed the number inputs
   down to a sliver. Stack them full-width instead, like on mobile. */
#tab-main #baseResourcesBlock.resources-grid > div {
  flex: 0 0 100%;
  max-width: 100%;
}

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

/* Switch the outer wrap to a column so justify-content (now the vertical
   axis) centers the hero+card row as a whole block, instead of each
   child being centered independently against its own height (which threw
   the hero and card tops out of alignment with each other). */
.login-wrap {
  flex-direction: column;
  max-width: none;
}

.login-row {
  display: flex;
  /* Hero (icon+big title+tagline+feature list) and the card (icon+small
     title+short blurb+buttons) have very different content heights.
     Neither top- nor center-aligning them lines up both edges at once —
     one end always drifts. Stretching both columns to the same height
     (the tallest one's) and centering the card's own content inside that
     taller box is the only way both top and bottom line up. */
  align-items: stretch;
  justify-content: center;
  gap: 72px;
  max-width: 1100px;
  width: 100%;
}

.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;
  /* stretched to the hero column's height by .login-row; center our own
     (much shorter) content inside that taller box instead of leaving it
     pinned to the top with empty space below */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-card .card-body {
  flex: 0 1 auto;
}