:root {
  --bg: #101010;
  --bg-subtle: #151515;
  --panel: #202020;
  --panel-hover: #272727;
  --border: rgba(255, 255, 255, 0.13);
  --border-focus: rgba(255, 255, 255, 0.24);
  --text: #ffffff;
  --text-muted: #c8c8c8;
  --text-dark: #8b8b8b;
}

[hidden] {
  display: none !important;
}

html {
  background: #101010;
}

body {
  background:
    radial-gradient(900px circle at 78% 8%, rgba(var(--site-accent-rgb), 0.12), transparent 62%),
    linear-gradient(180deg, #121212 0%, #0f0f0f 44%, #151515 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
}

body::before,
.status-dot,
.sale-icon {
  animation: none !important;
}

.noise {
  display: none !important;
}

.header,
.filter-panel,
.product-card,
.modal-backdrop,
.page-loader,
.bento-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.product-card::before,
.bento-card::before,
body::after {
  display: none !important;
}

.product-card,
.bento-card,
.filter-panel,
.modal-card,
.variants-card {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
  transition: border-color 0.16s ease, background-color 0.16s ease !important;
}

.product-card:hover,
.bento-card:hover,
.filter-panel:hover {
  transform: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

.product-card:hover .product-image,
.product-card:hover .product-icon,
.skin-container:hover .skin-render-img,
.wallet-card:hover .wallet-balance-amount {
  transform: none !important;
}

.reveal,
.reveal.revealed,
.hero-copy > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.section,
.perks,
.faq,
.footer,
#dashboard-page,
.product-card,
.bento-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}

.product-image,
.skin-render-img {
  will-change: auto !important;
}

.staff-admin-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px);
  gap: 14px;
  align-items: end;
}

.staff-admin-grid label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.staff-admin-grid input,
.staff-admin-grid select {
  width: 100%;
  height: 42px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #151515;
  color: var(--text);
}

.staff-user-summary {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
}

.compact-buy {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.sale-banner small { display: block; margin-top: 4px; color: var(--text-muted); }

.payment-methods-grid.card-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payment-method-card {
  min-height: 82px !important;
  padding: 14px 16px !important;
  text-align: left !important;
}

.payment-method-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.payment-brand-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
}

.payment-brand-icon img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.payment-brand-cards {
  position: relative;
  display: block;
}

.payment-brand-cards img {
  position: absolute;
  width: 34px;
  height: 24px;
  padding: 3px;
  border-radius: 5px;
  background: #233876;
}

.payment-brand-cards img:first-child { left: 0; top: 2px; z-index: 2; }
.payment-brand-cards img:last-child { right: 0; bottom: 2px; background: #fff; }

.payment-method-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.payment-method-copy small {
  overflow: hidden;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-method-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}

.dashboard-topline {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 16px;
}

.dashboard-topline .dashboard-welcome { margin: 0; }
.dashboard-topline .dashboard-welcome h2 { margin: 0 0 8px; }
.dashboard-topline .dashboard-welcome p { max-width: 560px; margin: 0; line-height: 1.55; }

.dashboard-support {
  min-height: 96px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 20px;
}

.support-copy { display: flex; align-items: center; gap: 14px; }
.support-copy .bento-card__title { margin-bottom: 5px; color: var(--text); font-size: 14px; letter-spacing: 0; text-transform: none; }
.support-copy .support-mini-body { margin: 0; }
.support-pixel-icon { color: #b4d7ff; font-size: 24px; text-shadow: 0 0 14px rgba(80, 160, 255, .55); }
.dashboard-support .support-mini-btn { width: 210px; min-width: 210px; margin: 0; color: #0d0d0d; border-color: var(--site-accent); background: var(--site-accent); }

.dashboard-grid > .bento-card { border-radius: var(--radius-md); background: #202020; }
.dashboard-grid > .bento-card .bento-card__title { color: var(--text); font-size: 15px; letter-spacing: 0; text-transform: none; }
.dashboard-wallet-rub { grid-column: 1 / 4; grid-row: 1; }
.dashboard-wallet-bonus { grid-column: 4 / 7; grid-row: 1; }
.dashboard-referral { grid-column: 7 / 13; grid-row: 1; }
.dashboard-profile { grid-column: 1 / 13; grid-row: 2; min-height: 430px; }
.dashboard-levels { grid-column: 1 / 13; grid-row: 3; }

.wallet-title { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.wallet-round-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 900; }
.ruble-icon { color: #0e8f4e; background: #a6ffd0; }
.bonus-icon { color: #177aa7; background: #b7ebff; }
.dashboard-grid .wallet-balance-row { margin-top: 15px; }
.dashboard-grid .wallet-description { min-height: 48px; }
.dashboard-referral .referral-input-row { margin-top: 18px; }
.dashboard-referral .referral-desc { max-width: 680px; font-size: 12px; line-height: 1.65; }

.dashboard-profile .skin-card-body { grid-template-columns: minmax(190px, .8fr) minmax(230px, 1fr); align-items: stretch; gap: 16px; }
.dashboard-profile .skin-container { height: 345px; background: #1a1a1a; }
.dashboard-profile .skin-render-img { height: 88%; }
.dashboard-profile .profile-info-list { justify-content: center; }
.dashboard-profile .profile-info-item { min-height: 58px; padding: 12px 15px; justify-content: center; border: 1px solid #303030; border-radius: 6px; background: #242424; }
.dashboard-profile .profile-info-label { color: #9b9b9b; }

@media (max-width: 860px) {
  .payment-methods-grid.card-methods { grid-template-columns: 1fr; }
  .dashboard-topline { grid-template-columns: 1fr; }
  .dashboard-wallet-rub { grid-column: 1 / 7; grid-row: 1; }
  .dashboard-wallet-bonus { grid-column: 7 / 13; grid-row: 1; }
  .dashboard-referral { grid-column: 1 / 13; grid-row: 2; }
  .dashboard-profile { grid-column: 1 / 13; grid-row: 3; }
  .dashboard-levels { grid-column: 1 / 13; grid-row: 4; }
}

@media (max-width: 720px) {
  .staff-admin-grid { grid-template-columns: 1fr; }
  .dashboard-grid > .bento-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .dashboard-support { align-items: stretch; flex-direction: column; }
  .dashboard-support .support-mini-btn { width: 100%; min-width: 0; }
  .dashboard-profile .skin-card-body { grid-template-columns: 1fr; }
  .dashboard-profile .skin-container { height: 310px; }
}

/* Minecraft dashboard art direction */
.dashboard-character,
.dashboard-npc-icon,
.wallet-npc,
.referral-npc {
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.dashboard-topline {
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}

.dashboard-welcome {
  min-height: 142px;
  position: relative;
  overflow: hidden;
  padding: 25px 180px 25px 28px;
  border: 1px solid #343434;
  border-left: 4px solid var(--site-accent);
  border-radius: var(--radius-md);
  background-color: #1b1b1b;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 24px 24px;
}

.dashboard-welcome::after {
  content: "";
  width: 190px;
  height: 190px;
  position: absolute;
  right: -32px;
  bottom: -72px;
  border: 18px solid rgba(var(--site-accent-rgb), .12);
  transform: rotate(45deg);
}

.dashboard-welcome-copy { position: relative; z-index: 2; }
.dashboard-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--site-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dashboard-topline .dashboard-welcome h2 { font-size: clamp(27px, 3vw, 42px); line-height: 1; }
.dashboard-topline .dashboard-welcome p { max-width: 460px; color: #aaa; font-size: 13px; }
.dashboard-character-wizard {
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: -16px;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.38));
}

.dashboard-support {
  min-height: 142px;
  position: relative;
  overflow: hidden;
  border-color: #3b3b3b !important;
  border-bottom: 3px solid #536b49 !important;
  background: #232323 !important;
}
.dashboard-support::after {
  content: "ONLINE";
  position: absolute;
  right: 12px;
  top: 10px;
  color: #6f8f62;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}
.dashboard-npc-icon { width: 74px; height: 74px; flex: 0 0 74px; filter: drop-shadow(0 8px 7px #080808); }
.dashboard-support .support-mini-btn { width: 170px; min-width: 170px; }

.dashboard-grid { gap: 16px; }
.dashboard-grid > .bento-card {
  border-color: #373737;
  box-shadow: 0 9px 18px rgba(0,0,0,.22) !important;
}
.dashboard-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dashboard-section-title small {
  color: #777;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dashboard-wallet-rub,
.dashboard-wallet-bonus {
  min-height: 228px;
  position: relative;
  overflow: hidden;
  padding-right: 96px !important;
}
.dashboard-wallet-rub { border-top: 3px solid #43b875 !important; background: #1d2420 !important; }
.dashboard-wallet-bonus { border-top: 3px solid #4ca5ca !important; background: #1c2225 !important; }
.wallet-npc {
  width: 108px;
  height: 108px;
  position: absolute;
  right: -15px;
  bottom: -6px;
  opacity: .92;
  filter: drop-shadow(0 9px 7px rgba(0,0,0,.45));
}
.wallet-title { border-bottom: 0; padding-bottom: 3px; }
.wallet-round-icon { width: 32px; height: 32px; border-radius: 5px; font-size: 15px; }
.dashboard-grid .wallet-balance-row {
  width: max-content;
  min-width: 112px;
  margin-top: 18px;
  padding: 8px 12px;
  border: 2px solid #111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  background: #151515;
}
.dashboard-grid .wallet-balance-amount { font-size: 28px; }
.dashboard-grid .wallet-description { max-width: 260px; min-height: 42px; margin-bottom: 10px; font-size: 10px; }
.dashboard-wallet-rub .wallet-action-btn,
.dashboard-wallet-bonus .wallet-action-btn { width: 132px; position: relative; z-index: 2; }

.dashboard-referral {
  position: relative;
  overflow: hidden;
  padding-right: 142px !important;
  border-top: 3px solid #a9783a !important;
  background-color: #24211d !important;
  background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.025) 30px);
}
.referral-npc {
  width: 150px;
  height: 150px;
  position: absolute;
  right: -12px;
  bottom: -12px;
  opacity: .9;
  filter: drop-shadow(0 12px 8px rgba(0,0,0,.45));
}
.dashboard-referral .referral-input-row,
.dashboard-referral #db-ref-stats-btn { position: relative; z-index: 2; }
.dashboard-referral .referral-input-row { padding: 5px; border: 1px solid #443a2c; background: #171512; }
.dashboard-referral .referral-input-row input { border: 0; background: transparent; }
.dashboard-referral .referral-btn { border-radius: 4px; }

.dashboard-profile {
  border-top: 3px solid var(--site-accent) !important;
  background: #1d1d1d !important;
}
.dashboard-profile .skin-card-body { grid-template-columns: minmax(210px, .95fr) minmax(220px, 1.05fr); }
.dashboard-profile .skin-container {
  position: relative;
  border: 2px solid #101010;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #3b3b3b;
  background-color: #171717;
  background-image:
    linear-gradient(45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(-45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1d1d1d 75%),
    linear-gradient(-45deg, transparent 75%, #1d1d1d 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}
.dashboard-profile .skin-container::after {
  content: "PLAYER";
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #5e5e5e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}
.dashboard-profile .skin-card-controls { z-index: 3; }
.dashboard-profile .profile-info-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid #343434;
  border-radius: 10px;
  background: #191919;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.dashboard-profile .profile-info-item {
  min-height: 68px;
  padding: 12px 15px 12px 73px;
  position: relative;
  justify-content: center;
  border: 0;
  border-bottom: 1px solid #303030;
  border-radius: 0;
  background: transparent;
}
.dashboard-profile .profile-info-item:hover { background: rgba(255,255,255,.025); }
.dashboard-profile .profile-info-item:last-child { border-bottom: 0; }
.dashboard-profile .profile-info-item::before {
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  left: 11px;
  top: 50%;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #111, 0 4px 10px rgba(0,0,0,.2);
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 40%, #2c2925, #202020 72%);
}
.dashboard-profile .profile-info-item:nth-child(3)::before { background: radial-gradient(circle at 50% 40%, #20312d, #1c2220 72%); }
.dashboard-profile .profile-info-item:nth-child(4)::before { background: radial-gradient(circle at 50% 40%, #24273a, #1c1d27 72%); }
.profile-info-icon {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 50%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translateY(-50%);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.38));
}
.dashboard-profile .profile-info-label { color: #8d8d8d; font-size: 8px; letter-spacing: .8px; }
.dashboard-profile .profile-info-value { font-size: 13px; }

.dashboard-levels {
  padding-top: 20px !important;
  border-top: 3px solid #5fa74d !important;
  background: #1d211c !important;
}
.levels-progress-container { border-color: #33402f; background: #151815; }
.levels-progress-bar-outer {
  height: 16px !important;
  overflow: hidden;
  border: 2px solid #090909;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px #3d4938;
  background: #20251e !important;
}
.levels-progress-bar-inner {
  border-radius: 0 !important;
  background-color: #66b946 !important;
  background-image: repeating-linear-gradient(90deg, transparent 0 17px, rgba(0,0,0,.2) 18px 20px) !important;
  box-shadow: inset 0 3px rgba(255,255,255,.14), inset 0 -3px rgba(0,0,0,.18);
}
.level-node-icon { border-radius: 3px !important; box-shadow: inset 0 0 0 2px #0c0c0c !important; }
.level-details-box { border-color: #384334 !important; border-radius: 4px !important; background: #171a16 !important; }

.dashboard-security-card,
.dashboard-email-card,
.dashboard-tickets-card {
  background: #1c1c1c !important;
}
.dashboard-security-card { border-left: 3px solid #8f70b5 !important; }
.dashboard-email-card { border-left: 3px solid #4b8baf !important; }
.dashboard-tickets-card { border-left: 3px solid #bc7b38 !important; }
.dashboard-security-card .wallet-action-btn,
.dashboard-email-card .wallet-action-btn { width: auto; align-self: flex-start; padding-inline: 24px; }
.security-empty-state,
.email-status { border-radius: 3px !important; background: #151515 !important; }

@media (max-width: 1000px) {
  .dashboard-support { align-items: flex-start; flex-direction: column; }
  .dashboard-support .support-mini-btn { width: 100%; min-width: 0; }
  .dashboard-npc-icon { width: 54px; height: 54px; flex-basis: 54px; }
}

@media (max-width: 860px) {
  .dashboard-topline { grid-template-columns: 1fr; }
  .dashboard-support { min-height: 112px; align-items: center; flex-direction: row; }
  .dashboard-support .support-mini-btn { width: 180px; }
}

@media (max-width: 720px) {
  .dashboard-welcome { min-height: 154px; padding: 23px 118px 23px 20px; }
  .dashboard-character-wizard { width: 126px; height: 126px; right: -2px; }
  .dashboard-topline .dashboard-welcome h2 { font-size: 28px; }
  .dashboard-support { align-items: stretch; flex-direction: column; }
  .dashboard-support .support-mini-btn { width: 100%; }
  .dashboard-wallet-rub,
  .dashboard-wallet-bonus { padding-right: 88px !important; }
  .dashboard-referral { padding-right: 24px !important; padding-bottom: 118px !important; }
  .referral-npc { width: 118px; height: 118px; right: 0; bottom: -8px; opacity: .65; }
  .dashboard-profile .skin-card-body { grid-template-columns: 1fr; }
  .dashboard-profile .profile-info-list { margin-top: 4px; }
  .dashboard-section-title small { display: none; }
}
