/* v4.6.20.2 — progressive Hub locks, dual currency header, and interaction protection. */

/* Prevent the iOS Copy/Translate callout on the active gameplay surface while
   preserving text selection inside Player Hub forms, support fields, and chat. */
.arcade-canvas-wrap,
.arcade-canvas-wrap *,
.arcade-controls-hint,
.arcade-controls-hint *,
.mobile-controls,
.mobile-controls *,
.arcade-stage-toolbar,
.arcade-stage-toolbar *,
.arcade-shell-header,
.arcade-shell-header *,
.arcade-quick-nav,
.arcade-quick-nav *,
.hud-evolution,
.hud-evolution *,
.boss-encounter-hud,
.boss-encounter-hud *,
.runway-hud,
.runway-hud * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

img[data-arcade-protected-art="true"],
.character-avatar-preview img,
.character-stage img,
.wearable-character-preview img,
.wearable-fit-stage img,
.hud-portrait-wrap img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.player-hub-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.player-hub-currency-wallets {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 7px;
}

.player-hub-shard-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(190px, 24vw);
  padding: 6px 9px;
  border: 1px solid rgba(0,255,157,.38);
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(0,255,157,.12),rgba(34,211,238,.07));
  color: #eafff5;
  box-shadow: inset 0 0 18px rgba(0,255,157,.04),0 0 16px rgba(0,255,157,.05);
}

.player-hub-shard-wallet .shard-gem {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: radial-gradient(circle at 34% 28%,#fff 0 7%,#baffdd 16%,#00ff9d 45%,#027b65 100%);
  color: #fff;
  text-shadow: 0 0 9px #fff;
  box-shadow: 0 0 16px rgba(0,255,157,.34);
}

.player-hub-shard-wallet small {
  display: block;
  color: #8fffc6;
  font-size: .42rem;
  letter-spacing: .12em;
  line-height: 1.1;
}

.player-hub-shard-wallet strong {
  display: block;
  margin-top: 2px;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .61rem;
  letter-spacing: .08em;
}

.player-hub-tab.hub-tab-locked,
.arcade-quick-nav [data-open-hub-tab].hub-tab-locked {
  position: relative;
  padding-right: 37px !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(5,8,12,.72) !important;
  color: rgba(255,255,255,.46) !important;
  filter: saturate(.45);
}

.player-hub-tab.hub-tab-locked::after,
.arcade-quick-nav [data-open-hub-tab].hub-tab-locked::after {
  content: attr(data-unlock-badge);
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.72);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
}

.player-hub-tab.hub-tab-maintenance-locked,
.arcade-quick-nav [data-open-hub-tab].hub-tab-maintenance-locked {
  border-color: rgba(255,176,74,.38) !important;
  color: rgba(255,208,139,.62) !important;
}

.player-hub-tab.hub-tab-locked:hover,
.player-hub-tab.hub-tab-locked:focus-visible,
.arcade-quick-nav [data-open-hub-tab].hub-tab-locked:hover,
.arcade-quick-nav [data-open-hub-tab].hub-tab-locked:focus-visible {
  color: #fff !important;
  border-color: rgba(0,255,157,.5) !important;
  filter: none;
}

.wearable-shop-lock-notice {
  display: none;
  min-height: 260px;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(255,176,74,.34);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 20%,rgba(255,176,74,.12),transparent 44%),rgba(2,7,11,.82);
  text-align: center;
}

.wearable-shop-lock-notice > div { max-width: 500px; }
.wearable-shop-lock-notice b { display:block; margin-bottom:10px; color:#ffc66f; font-size:1.55rem; }
.wearable-shop-lock-notice h4 { margin:0 0 8px; font-size:.9rem; letter-spacing:.13em; text-transform:uppercase; }
.wearable-shop-lock-notice p { margin:0; color:rgba(255,255,255,.7); font-size:.62rem; line-height:1.65; }

body[data-wearable-shop-locked="true"] [data-hub-panel="wearables"] > :not(.hub-section-heading):not(.wearable-shop-lock-notice) {
  display: none !important;
}
body[data-wearable-shop-locked="true"] [data-hub-panel="wearables"] .hub-section-heading { display:none !important; }
body[data-wearable-shop-locked="true"] [data-hub-panel="wearables"] .wearable-shop-lock-notice { display:grid; }

.hub-progression-dialog {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 20%,rgba(0,255,157,.16),transparent 38%),rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hub-progression-dialog.show { display:flex; }

.hub-progression-dialog-card {
  position: relative;
  width: min(520px,96vw);
  max-height: min(760px,90dvh);
  overflow-y: auto;
  padding: 24px 20px 20px;
  border: 1px solid rgba(0,255,157,.48);
  border-radius: 20px;
  background: linear-gradient(160deg,rgba(12,22,28,.98),rgba(1,5,9,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.82),0 0 34px rgba(0,255,157,.12);
}

.hub-progression-dialog-close {
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:1px solid rgba(0,255,157,.3);
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
}

.hub-progression-dialog-kicker { margin:0 40px 6px 0; color:#00ff9d; font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; }
.hub-progression-dialog h2 { margin:0 40px 8px 0; font-size:1rem; letter-spacing:.12em; line-height:1.25; text-transform:uppercase; }
.hub-progression-dialog-copy { margin:0 0 14px; color:rgba(255,255,255,.72); font-size:.62rem; line-height:1.6; }
.hub-progression-dialog-list { display:grid; gap:8px; }
.hub-progression-dialog-list article { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.035); }
.hub-progression-dialog-list article > span { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:rgba(0,255,157,.1); color:#65ffbd; }
.hub-progression-dialog-list strong { display:block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.hub-progression-dialog-list small { display:block; margin-top:3px; color:rgba(255,255,255,.62); font-size:.54rem; line-height:1.45; }
.hub-progression-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hub-progression-dialog-actions .btn { flex:1 1 180px; }

@media (max-width: 720px) {
  .player-hub-header-actions { max-width: 64% !important; }
  .player-hub-currency-wallets { gap:5px; }
  .player-hub-diamond-wallet,
  .player-hub-shard-wallet { max-width: 128px !important; padding:5px 6px; gap:5px; }
  .player-hub-diamond-wallet small,
  .player-hub-shard-wallet small { display:none; }
  .player-hub-shard-wallet .shard-gem { flex-basis:24px; width:24px; height:24px; }
  .player-hub-shard-wallet strong { max-width:76px; font-size:.5rem; }
}

@media (max-width: 460px) {
  .player-hub-header { align-items:flex-start !important; }
  .player-hub-header-actions { max-width: 68% !important; gap:5px; }
  .player-hub-currency-wallets { flex-direction:column; align-items:stretch; }
  .player-hub-diamond-wallet,
  .player-hub-shard-wallet { width:116px; max-width:116px !important; min-height:31px; }
  .player-hub-diamond-wallet .diamond-gem,
  .player-hub-shard-wallet .shard-gem { width:22px !important; height:22px !important; flex-basis:22px; }
  .player-hub-diamond-wallet strong,
  .player-hub-shard-wallet strong { max-width:76px; font-size:.46rem !important; }
  .hub-progression-dialog-card { padding:21px 14px 15px; }
}