/* rustgrade offline interactive layer — modal styling
   reuses the site's own CSS custom properties so it matches 1:1 */

.rg-modal-root { position: fixed; inset: 0; z-index: 2000; }
.rg-modal-root[data-state="closed"] { display: none; }

.rg-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--color-effect-backdrop, rgba(0, 0, 0, .6));
}
.rg-modal-root[data-state="open"]    .rg-overlay { animation: rg-overlay-show .3s both; }
.rg-modal-root[data-state="closing"] .rg-overlay { animation: rg-overlay-hide .3s both; }

.rg-content {
  position: fixed; top: 50%; left: 50%; z-index: 2001;
  translate: -50% -50%;
  width: min(480px, 100vw - var(--space-8, 32px));
  max-height: calc(100dvh - var(--space-8, 32px) * 2);
}
.rg-modal-root[data-state="open"]    .rg-content { animation: rg-modal-show .3s cubic-bezier(.22,1,.36,1) both; }
.rg-modal-root[data-state="closing"] .rg-content { animation: rg-modal-hide .3s cubic-bezier(.55,0,1,.45) both; }

.rg-box {
  border: 1px solid var(--color-border-block-enable, #2a2a2a);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.5));
  background: #161616;
  overflow: hidden;
}
.rg-layout { display: flex; flex-direction: column; max-height: calc(100dvh - 64px); }

.rg-header {
  display: flex; flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--color-border-block-enable, #2a2a2a);
  flex-shrink: 0;
}
.rg-header-top { display: flex; align-items: center; gap: var(--space-3, 12px); }
.rg-title {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--space-2, 8px);
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-title-active, #f2f3f2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rg-close {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-background-secondary-enable, #242424);
  color: var(--color-element-accent-enable, #cd412b);
  transition: background .15s, color .15s;
}
.rg-close:hover  { background: var(--color-background-secondary-hover, #2e2e2e); color: #f2f3f2; }
.rg-close:active { background: var(--color-background-secondary-pressed, #1c1c1c); }

.rg-body {
  display: flex; flex-direction: column;
  gap: var(--space-4, 16px);
  padding: var(--space-6, 24px);
}
.rg-desc {
  margin: 0; text-align: left;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 14px; line-height: 20px;
  color: var(--color-text-subtitle, #a6a6a6);
}
.rg-checks { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.rg-check {
  display: flex; align-items: flex-start; gap: var(--space-3, 12px);
  cursor: pointer;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 14px; line-height: 20px;
  color: var(--color-text-title-active, #f2f3f2);
}
.rg-check-box { flex-shrink: 0; color: var(--color-border-block-enable, #4a4a4a); transition: color .15s; }
.rg-check-tick { opacity: 0; transition: opacity .15s; }
.rg-check.is-checked .rg-check-box { color: var(--color-button-accent-primary-active, #cd412b); }
.rg-check.is-checked .rg-check-box rect { fill: var(--color-button-accent-primary-active, #cd412b); }
.rg-check.is-checked .rg-check-tick { opacity: 1; }
.rg-check-label { padding-top: 1px; }
.rg-rules-link { color: var(--color-text-title-accent-active, #cd412b); text-decoration: underline; }

.rg-login-btn {
  width: 100%; height: var(--space-width-and-height-large, 48px);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-gap-small, 8px);
  border: none; cursor: pointer;
  border-radius: var(--space-radius-small, 8px);
  background: var(--color-button-accent-primary-active, #cd412b);
  color: var(--color-text-title-active, #f2f3f2);
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(205, 65, 43, .6);
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.rg-login-btn:hover:not(:disabled)  { background: var(--color-button-accent-primary-hover, #b8382410); }
.rg-login-btn:active:not(:disabled) { background: var(--color-button-accent-primary-pressed, #a5301e); }
.rg-login-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.rg-steam-ic { flex-shrink: 0; width: 24px; height: 24px; }

@keyframes rg-overlay-show { from { opacity: 0 } to { opacity: 1 } }
@keyframes rg-overlay-hide { from { opacity: 1 } to { opacity: 0 } }
@keyframes rg-modal-show {
  from { opacity: 0; translate: -50% -46%; scale: .96 }
  to   { opacity: 1; translate: -50% -50%; scale: 1 }
}
@keyframes rg-modal-hide {
  from { opacity: 1; translate: -50% -50%; scale: 1 }
  to   { opacity: 0; translate: -50% -48%; scale: .97 }
}


/* ====================================================================== *
 *  MOBILE REFLOW — restores the responsive behaviour the React bundle    *
 *  used to apply by swapping the DOM. Pure CSS equivalents below.        *
 * ====================================================================== */

/* Tablet / mobile: sidebar (live drops) becomes a horizontal strip on top */
@media (width<=1023px) {
  ._body_ktpzw_8 { flex-direction: column; }
  ._sidebar_zkwd4_2._sidebar_ktpzw_14 { align-self: stretch; width: 100%; }
  ._inner_zkwd4_11 {
    position: static;
    max-height: none;
    padding: var(--space-gap-small);
    flex-direction: row;
  }
  /* horizontal drop list: cards sit in a scrolling row */
  ._list_zkwd4_21 {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-gap-small);
    scrollbar-width: none;
  }
  ._list_zkwd4_21::-webkit-scrollbar { display: none; }
  ._item_zkwd4_26,
  ._link_1m1p3_6 { flex: 0 0 auto; margin-bottom: 0; }
}

/* Phone: the two-column upgrade/inventory row stacks into one column */
@media (width<=768px) {
  ._inventoryRow_zbdcb_17 {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* Small phones: tighten the header so logo + steam button fit */
@media (width<=480px) {
  ._stats_1osjh_40 { display: none; }              /* mirror original: stats hide on tiny screens */
  ._header_1osjh_2 { padding: 0 var(--space-gap-small); }
}

/* ====================================================================== *
 *  DROP ANIMATION SPEED — 5x faster than the original timing            *
 *  original: --_open .26s / --_fall .42s (.12s delay)                    *
 * ====================================================================== */
._sidebar_zkwd4_2 {
  --_open: .052s cubic-bezier(.22, 1, .36, 1) both;
  --_fall: .084s cubic-bezier(.22, 1, .36, 1) .024s backwards;
}

/* ====================================================================== *
 *  STAT COUNTER CHANGE ANIMATION — "Онлайн" / "Апгрейдов"                *
 * ====================================================================== */
._statContent_1osjh_57 span { display: inline-block; }
.rg-stat-bump { animation: rg-stat-bump .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes rg-stat-bump {
  0%   { transform: translateY(-70%); opacity: 0; color: var(--color-text-title-accent-active, #cd412b); }
  55%  { color: var(--color-text-title-accent-active, #cd412b); }
  100% { transform: translateY(0); opacity: 1; }
}