/* Shared cyan/navy theme for public Funcase pages.
   Admin, Collector and Tango templates do not load this file. */
:root {
  --green: #25ddd4;
  --green-2: #59e780;
  --accent: #25ddd4;
  --bg: #020a12;
  --panel: #071724;
  --panel-2: #0a2030;
  --soft: #0c2231;
  --hover: #103142;
  --line: rgba(56, 221, 215, .22);
  --text: #f2fbff;
  --muted: #8fa8b4;
  --red: #25ddd4;
  --red-dark: #138f91;
}

html { background: #020a12; }

body:not(.home-reference) {
  color: var(--text) !important;
  background-color: #020a12 !important;
  background-image:
    radial-gradient(circle at 76% 7%, rgba(15, 139, 147, .14), transparent 34rem),
    radial-gradient(circle at 14% 68%, rgba(37, 93, 130, .1), transparent 30rem),
    linear-gradient(180deg, rgba(2, 10, 18, .95), rgba(2, 9, 16, .985)),
    var(--site-bg-image, none) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

body:not(.home-reference)::before {
  background: linear-gradient(180deg, rgba(2, 10, 18, .66), rgba(2, 9, 16, .9)) !important;
}

body.site-custom-background:not(.home-reference) {
  background-image:
    radial-gradient(circle at 76% 7%, rgba(15, 139, 147, .1), transparent 34rem),
    linear-gradient(180deg, rgba(2, 10, 18, .4), rgba(2, 9, 16, .6)),
    var(--site-bg-image) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: cover, cover, cover !important;
  background-attachment: fixed, fixed, fixed !important;
}

body.site-custom-background:not(.home-reference)::before {
  background: linear-gradient(180deg, rgba(2, 10, 18, .08), rgba(2, 9, 16, .24)) !important;
}

@media (max-width: 760px) {
  body.site-custom-background:not(.home-reference) {
    /* Mobile browsers handle a fixed body background inconsistently. Keep the
       page itself solid and render the uploaded image on the already fixed
       viewport overlay instead, so long pages neither stretch nor lose it. */
    background-color: #020a12 !important;
    background-image: none !important;
  }

  body.site-custom-background:not(.home-reference)::before {
    background-image:
      linear-gradient(180deg, rgba(2, 10, 18, .16), rgba(2, 9, 16, .38)),
      var(--site-bg-image) !important;
    background-position: center, center top !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: cover, cover !important;
  }
}

body:not(.home-reference) .live-strip-viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: linear-gradient(180deg, #020a12, #04111d) !important;
  border-color: rgba(55, 221, 215, .16) !important;
}
body:not(.home-reference) .live-strip {
  width: max-content !important;
  flex-wrap: nowrap !important;
}
body:not(.home-reference) .live-strip .live-card {
  background: linear-gradient(145deg, rgba(8, 28, 42, .97), rgba(4, 14, 25, .98)) !important;
  border-color: rgba(55, 221, 215, .14) !important;
}

/* The card stays fixed. Only the case artwork lifts on hover/touch. */
.case-card {
  position: relative;
  z-index: 1;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .28s ease !important;
}
.case-card .case-art img {
  filter: none !important;
  transform: translateY(0) scale(1);
  transform-origin: center bottom;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease !important;
}
.case-open[data-paid-case] > em {
  font-size: 17.55px !important;
  line-height: 1.05 !important;
}
@media (hover: hover) and (pointer: fine) {
  .case-card:hover {
    z-index: 12;
    transform: none !important;
    box-shadow: none !important;
  }
  .case-card:hover .case-art img {
    transform: translateY(-10px) scale(1.045);
    filter: drop-shadow(0 18px 12px rgba(0,0,0,.5)) !important;
  }
}
@media (hover: none) {
  .case-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .case-card:active .case-art img {
    transform: translateY(-6px) scale(1.03);
    filter: drop-shadow(0 13px 9px rgba(0,0,0,.45)) !important;
  }
}

/* Final override: the rectangular card is fixed; only its picture rises. */
.case-card,
.case-card:hover,
.case-card:focus-within,
.case-card .case-open,
.case-card:hover .case-open,
.case-card:focus-within .case-open {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  box-shadow: none !important;
}
body:not(.home-reference) .live-strip .live-card:nth-child(3n + 2) {
  background: linear-gradient(145deg, rgba(18, 23, 51, .96), rgba(5, 16, 28, .98)) !important;
}

body:not(.home-reference) .account-top,
body:not(.home-reference) .case-play-header,
body:not(.home-reference) .market-page-header,
body:not(.home-reference) > .site-header {
  border-color: rgba(55, 221, 215, .16) !important;
  background: rgba(2, 11, 19, .93) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(16px);
}

body:not(.home-reference) .brand img,
body:not(.home-reference) .account-logo img {
  filter: drop-shadow(0 0 12px rgba(37, 221, 212, .18));
}

body:not(.home-reference) a:hover,
body:not(.home-reference) nav a.active,
body:not(.home-reference) .account-reference-title a,
body:not(.home-reference) .market-title span,
body:not(.home-reference) .upgrades-kicker,
body:not(.home-reference) .blog-kicker {
  color: #61f4ea !important;
}

body:not(.home-reference) .account-profile-panel,
body:not(.home-reference) .account-trade-card,
body:not(.home-reference) .account-overview-card,
body:not(.home-reference) .account-section,
body:not(.home-reference) .account-hero,
body:not(.home-reference) .case-stage,
body:not(.home-reference) .case-contents-section,
body:not(.home-reference) .case-contents-grid article,
body:not(.home-reference) .market-filters,
body:not(.home-reference) .skin-card,
body:not(.home-reference) .promotion-card,
body:not(.home-reference) .blog-card,
body:not(.home-reference) .blog-post,
body:not(.home-reference) .static-page-content,
body:not(.home-reference) .upgrades-coming,
body:not(.home-reference) .legal-consent-card,
body:not(.home-reference) .card {
  border-color: rgba(56, 221, 215, .21) !important;
  background-color: rgba(6, 22, 34, .92) !important;
  background-image: linear-gradient(145deg, rgba(9, 31, 46, .88), rgba(4, 14, 25, .95)) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(106, 255, 247, .045) !important;
}

body:not(.home-reference) input,
body:not(.home-reference) select,
body:not(.home-reference) textarea,
body:not(.home-reference) .selected-payment,
body:not(.home-reference) .balance {
  color: #f3fcff !important;
  border-color: rgba(56, 221, 215, .2) !important;
  background: rgba(2, 12, 21, .88) !important;
}
body:not(.home-reference) input:focus,
body:not(.home-reference) select:focus,
body:not(.home-reference) textarea:focus {
  border-color: rgba(37, 221, 212, .72) !important;
  box-shadow: 0 0 0 3px rgba(37, 221, 212, .1) !important;
  outline: none;
}

body:not(.home-reference) .primary,
body:not(.home-reference) .auth-button,
body:not(.home-reference) .pay-button,
body:not(.home-reference) .account-deposit-link,
body:not(.home-reference) .account-trade-form button,
body:not(.home-reference) .market-filters button,
body:not(.home-reference) .skin-card button,
body:not(.home-reference) .case-play-open,
body:not(.home-reference) button[type="submit"] {
  color: #03201f !important;
  border-color: rgba(102, 255, 246, .32) !important;
  background: linear-gradient(135deg, #24ddd4, #59e780) !important;
  box-shadow: 0 12px 28px rgba(28, 210, 201, .16) !important;
}
body:not(.home-reference) .primary:hover,
body:not(.home-reference) .auth-button:hover,
body:not(.home-reference) .pay-button:hover,
body:not(.home-reference) button[type="submit"]:hover { filter: brightness(1.08); }

body:not(.home-reference) .method {
  border-color: rgba(56, 221, 215, .16) !important;
  background: linear-gradient(145deg, rgba(10, 31, 45, .96), rgba(4, 15, 26, .98)) !important;
}
body:not(.home-reference) .method.active {
  border-color: rgba(37, 221, 212, .76) !important;
  background: radial-gradient(circle at 50% 35%, rgba(37, 221, 212, .13), transparent 48%), linear-gradient(145deg, #0a2936, #061620) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 221, 212, .15), 0 18px 45px rgba(0, 0, 0, .28) !important;
}
body:not(.home-reference) .crypto-symbol {
  color: #03201f !important;
  background: linear-gradient(145deg, #62f0c2, #22c7b5) !important;
}
body:not(.home-reference) .notice,
body:not(.home-reference) .status {
  border-color: rgba(37, 221, 212, .18) !important;
  background: rgba(9, 44, 50, .48) !important;
  color: #bde8e7 !important;
}
body:not(.home-reference) .qr-panel {
  border-color: rgba(37, 221, 212, .35) !important;
  background: radial-gradient(circle at 50% 35%, rgba(37, 221, 212, .11), transparent 48%), linear-gradient(145deg, #071c25, #031018 70%) !important;
}
body:not(.home-reference) .qr-panel img {
  border-color: #25ddd4 !important;
  outline-color: rgba(37, 221, 212, .08) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 34px rgba(37,221,212,.2) !important;
}

body:not(.home-reference) .account-header-bonus,
body:not(.home-reference) .account-steam-id span,
body:not(.home-reference) .account-reference-title span,
body:not(.home-reference) .account-overview-card > span,
body:not(.home-reference) .case-play-balance strong,
body:not(.home-reference) .case-contents-grid strong,
body:not(.home-reference) .skin-card strong,
body:not(.home-reference) .promotion-card strong,
body:not(.home-reference) .upgrades-countdown strong {
  color: #52eee5 !important;
}

body:not(.home-reference) .upgrades-countdown > div {
  border-color: rgba(56, 221, 215, .2) !important;
  background: rgba(5, 22, 34, .78) !important;
}

/* Opening result: one customer-facing price only (inside the sell button),
   with the current cyan/navy palette instead of the legacy lime success UI. */
body:not(.home-reference) .opening-overlay.done .opening-result {
  border: 1px solid rgba(56, 221, 215, .2) !important;
  background: linear-gradient(145deg, rgba(7, 28, 41, .97), rgba(3, 15, 26, .98)) !important;
  box-shadow: inset 0 1px rgba(108, 255, 247, .045), 0 18px 44px rgba(0, 0, 0, .28) !important;
}
body:not(.home-reference) .opening-result > span {
  color: #52eee5 !important;
}
body:not(.home-reference) .opening-result-grid article {
  border-color: rgba(56, 221, 215, .18) !important;
  background: linear-gradient(160deg, rgba(8, 31, 45, .96), rgba(4, 16, 27, .98)) !important;
}
body:not(.home-reference) .opening-result-grid article > strong {
  display: none !important;
}
body:not(.home-reference) .opening-result-grid article button,
body:not(.home-reference) .opening-sell-all,
body:not(.home-reference) .opening-again {
  color: #03201f !important;
  border: 1px solid rgba(102, 255, 246, .28) !important;
  background: linear-gradient(135deg, #24ddd4, #59e780) !important;
  box-shadow: 0 10px 24px rgba(28, 210, 201, .14) !important;
}

/* Inventory uses the same rules.  The hidden strong also removes a legacy
   nominal-price node for clients that still have an older account.js cached. */
body:not(.home-reference) .account-inventory-card {
  border-color: rgba(56, 221, 215, .2) !important;
  background: linear-gradient(160deg, rgba(8, 31, 45, .96), rgba(4, 16, 27, .98)) !important;
  box-shadow: inset 0 1px rgba(108, 255, 247, .04), 0 16px 36px rgba(0, 0, 0, .24) !important;
}
body:not(.home-reference) .account-card-bottom > strong {
  display: none !important;
}
body:not(.home-reference) .inventory-actions button[data-sell] {
  color: #03201f !important;
  border: 1px solid rgba(102, 255, 246, .28) !important;
  background: linear-gradient(135deg, #24ddd4, #59e780) !important;
  box-shadow: 0 10px 24px rgba(28, 210, 201, .14) !important;
}

/* Keep an available Steam withdrawal visually active.  app.css contains a
   later generic account-card button rule, so this final theme rule must be
   authoritative instead of allowing an enabled withdrawal to look disabled. */
body:not(.home-reference) .inventory-actions button[data-withdraw]:not(:disabled) {
  color: #03201f !important;
  border: 1px solid rgba(102, 255, 246, .34) !important;
  background: linear-gradient(135deg, #24ddd4, #59e780) !important;
  box-shadow: 0 10px 24px rgba(28, 210, 201, .16) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
}

body:not(.home-reference) .inventory-actions button[data-withdraw]:disabled {
  color: rgba(205, 218, 224, .5) !important;
  border: 1px solid rgba(255, 255, 255, .04) !important;
  background: #202c35 !important;
  box-shadow: none !important;
  cursor: progress !important;
  opacity: .62 !important;
}

@media (max-width: 760px) {
  body:not(.home-reference) .account-top,
  body:not(.home-reference) .case-play-header,
  body:not(.home-reference) .market-page-header { background: rgba(2, 11, 19, .96) !important; }
}

/* One Steam avatar treatment in every authenticated public header. */
.user-avatar-link {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 2px !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 38px;
  overflow: hidden;
  border: 1px solid rgba(37, 221, 212, .28) !important;
  border-radius: 10px !important;
  background: rgba(7, 24, 34, .86) !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .22) !important;
  text-decoration: none;
}

.user-avatar-link img,
.user-avatar-link > span {
  width: 32px !important;
  height: 32px !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 8px !important;
  object-fit: cover;
  color: #05201f;
  background: linear-gradient(135deg, #25ddd4, #59e780);
  font-size: 13px;
  font-weight: 950;
}

.case-play-header nav,
.market-page-header nav,
.header-actions {
  align-items: center;
}

@media (max-width: 760px) {
  .account-body .account-top nav .user-avatar-link,
  .case-play-header nav .user-avatar-link,
  .market-page-header nav .user-avatar-link,
  .header-actions .user-avatar-link {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-grid !important;
    flex-basis: 36px;
  }

  .user-avatar-link img,
  .user-avatar-link > span {
    width: 30px !important;
    height: 30px !important;
  }
}