/* Upgrader guest panel (owner 2026-10-12): text + «Войти» on top, a looping item showcase
   filling the rest of the panel. Animation lives in app.js guestShowcase(); this file owns
   the look. Geometry rule: the art always sits in .gs-cell inside .gs-win, at rest and while
   rolling, so the end of a spin never moves the item. */
@property --gs-rc { syntax: "<color>"; inherits: true; initial-value: #9ea7b8; }

html.is-guest #upgradeInventory .sp-head,
html.is-guest #upgradeInventory .sp-bar,
html.is-guest #upgradeInventory .sp-fbar { display: none !important; }
html.is-guest #upgradeInventory #invPick {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ---------- head: pill, Benzin headline, one big Crash-style button ---------- */
html #view-upgrade #invPick [data-guest-banner].ug {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 34px 0 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  text-align: center !important;
}
.ug-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}
/* the status line stays for screen readers and tests, not on screen (owner 2026-10-12) */
html #view-upgrade #invPick .ug .ug-pill {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.ug-title {
  display: grid;
  gap: 8px;
  margin: 0;
  font: 400 30px/1 Benzin, Rubik, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.ug-title em {
  color: #a99bff;
  font-size: 18px;
  font-style: normal;
}
html #view-upgrade #invPick .ug .ug-btn {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(calc(100% - 36px), 300px) !important;
  min-height: 64px !important;
  margin-top: 20px;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(115deg, #a34ef4, #7265fd) !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: filter .15s ease;
}
html #view-upgrade #invPick .ug .ug-btn:hover { filter: brightness(1.07); }
html #view-upgrade #invPick .ug .ug-btn:focus-visible { outline: 2px solid #aa96f4 !important; outline-offset: 3px !important; }
.ug-btn b { font: 400 19px/1 Benzin, Rubik, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
html #view-upgrade #invPick .ug .ug-btn small { font: 600 12px/1 Rubik, sans-serif; letter-spacing: 0; text-transform: none; opacity: .82; }

/* ---------- stage ---------- */
.gs {
  --gs-k: 1.2;
  --gs-pad: 12px;
  --gs-c: 124px;
  --gs-y: 0px;
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 170px;
  container-type: size;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@supports (width: 1cqw) {
  .gs { --gs-c: clamp(96px, min(46cqw, calc((100cqh - 44px) / 1.2)), 190px); }
}
.gs { --gs-f: calc(var(--gs-c) * var(--gs-k) + 2 * var(--gs-pad)); --gs-g: calc(var(--gs-c) * (var(--gs-k) - 1) / 2 + var(--gs-pad) + 14px); }

/* glow lives inside the stage and fades to nothing before its edges (no cut-off) */
.gs-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% calc(50% - var(--gs-y)), color-mix(in srgb, var(--gs-rc) 24%, transparent), transparent 100%);
  opacity: .5;
  transition: opacity .7s ease, --gs-rc .9s ease;
}
.gs.lit .gs-glow { opacity: .85; }

.gs-frame {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--gs-y));
  width: var(--gs-f);
  height: var(--gs-f);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--gs-c) * .2 + 6px);
  background: linear-gradient(180deg, #25253b, #1f1f33);
  transition: --gs-rc .9s ease;
}
.gs-track {
  position: absolute;
  top: calc(50% - var(--gs-y));
  left: 50%;
  display: flex;
  gap: var(--gs-g);
  margin-top: calc(var(--gs-c) / -2);
  margin-left: calc(-3 * (var(--gs-c) + var(--gs-g)) - var(--gs-c) / 2);
  will-change: transform;
}

/* ---------- card ---------- */
.gs-card {
  position: relative;
  flex: 0 0 var(--gs-c);
  height: var(--gs-c);
  border-radius: calc(var(--gs-c) * .16);
  overflow: hidden;
  background: #29293f;
  transition:
    transform .42s cubic-bezier(.65, 0, .25, 1),
    background-color .6s ease,
    box-shadow .6s ease,
    --gs-rc .9s ease;
}
.gs-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--gs-c) * .36);
  width: 56%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("ui/offgrader-mark-subtle.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity .6s ease;
}
.gs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--gs-rc) 70%, transparent), transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.gs-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--gs-rc) 22%, transparent), transparent 68%), #303050;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gs-rc) 40%, transparent);
  opacity: 0;
  transition: opacity .6s ease, box-shadow .6s ease, background-color .6s ease;
}
.gs-card.is-mid { transform: scale(var(--gs-k)); }
.gs-card.is-mid .gs-tint,
.gs-card.is-mid::before { opacity: 1; }
.gs.lit .gs-card.is-mid .gs-tint {
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--gs-rc) 42%, transparent), transparent 72%), #33335a;
  box-shadow: inset 0 0 0 1.5px var(--gs-rc);
}
.gs-card.is-landed::after { animation: gs-land 1.2s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes gs-land {
  0% { opacity: 0; }
  18% { opacity: .75; }
  100% { opacity: 0; }
}

/* the art window: a one-cell reel at rest, many cells while rolling */
.gs-win {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: opacity .25s ease;
}
/* one cell centred on the art spot (36% down); cells are taller than the art (owner: more space
   between rolling items), the art box inside stays .41 of the card */
.gs-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--gs-c) * .06);
  display: flex;
  flex-direction: column;
}
.gs-cell {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: calc(var(--gs-c) * .6);
  padding: calc(var(--gs-c) * .095) 8%;
  box-sizing: border-box;
}
.gs-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: filter .6s ease, opacity .6s ease;
}
.gs-card:not(.is-mid) .gs-cell img { filter: brightness(0); opacity: .6; }
.gs-card.is-swap .gs-win { opacity: 0; }

/* ---------- name + price ---------- */
.gs-name {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: calc(var(--gs-c) * .08);
  display: grid;
  gap: calc(var(--gs-c) * .015);
  text-align: center;
  line-height: 1.15;
}
.gs-name small, .gs-name b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.gs-name small {
  color: var(--refresh-muted, #b8b6d0);
  font-size: calc(var(--gs-c) * .072);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gs-name b {
  color: var(--refresh-text, #f5f3ff);
  font-size: calc(var(--gs-c) * .112);
  font-weight: 800;
}
.gs-name small, .gs-name b, .gs-price {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .28s ease, transform .28s ease;
}
.gs-card.has-name .gs-name small,
.gs-card.has-name .gs-name b,
.gs-card.has-name .gs-price {
  opacity: 1;
  transform: none;
  transition: opacity .38s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.gs-card.has-name .gs-name b { transition-delay: .06s; }
.gs-card.has-name .gs-price { transition-delay: .12s; }

.gs-price {
  position: absolute;
  top: calc(var(--gs-c) * .07);
  right: calc(var(--gs-c) * .08);
  color: #f6c453;
  font-size: calc(var(--gs-c) * .068);
  font-weight: 800;
}

.gs-card::before { z-index: 1; }
.gs-win { z-index: 2; }
.gs-card::after { z-index: 3; }
.gs-name, .gs-price { z-index: 4; }

@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  html #view-upgrade #invPick [data-guest-banner].ug { padding-top: 28px !important; }
  .ug-title { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-card, .gs-tint, .gs-cell img, .gs-name small, .gs-name b, .gs-price, .gs-glow { transition-duration: .01s !important; transition-delay: 0s !important; }
  .gs-card.is-landed::after { animation: none; }
}

/* ---------- signed-in, empty inventory: headline + button centred in the panel (owner 2026-10-12) ---------- */
html #view-upgrade #upgradeInventory:has(.ug-empty) .sp-bar { display: none !important; }
html #view-upgrade #invPick:has(.ug-empty) { flex: 1 1 auto !important; overflow: hidden !important; }
html #view-upgrade #invPick .inv-empty-state.ug-empty {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 0 24px !important;
  overflow: hidden !important;
  text-align: center !important;
}
html #view-upgrade #invPick .ug-empty .ug-title {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #fff !important;
  font: 400 28px/1 Benzin, Rubik, sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
}
html #view-upgrade #invPick .ug-empty .ug-title em { color: #a99bff; font-size: 16px; font-style: normal; }
html #view-upgrade #invPick .ug-empty .ug-btn {
  align-self: center !important;
  height: auto !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 24px 0 0 !important;
}
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  html #view-upgrade #invPick .ug-empty .ug-title { font-size: 25px !important; }
}