/* v0.9.86 · rebuilt Poker/Blackjack table frames and rounded shop controls */

:root {
  --np-table-ink: var(--wf-ink, #05070a);
  --np-table-violet: var(--wf-violet, #7a5cff);
  --np-table-violet-dark: var(--wf-violet-dark, #4b31c7);
  --np-table-lime: var(--wf-lime, #c8ff3d);
  --np-table-coral: var(--wf-coral, #ff7b68);
}

/* ---------------------------------------------------------------
   Blackjack: one outer frame + one felt layer, with matching radii.
   This replaces the stacked, non-concentric rim/shadow combination.
   --------------------------------------------------------------- */
#gameApp .solo-private-shell,
body.multiplayer-live #multiplayerApp .multi-table-shell {
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#gameApp .solo-private-rim,
body.multiplayer-live #multiplayerApp .multi-table-rim {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  border: 3px solid var(--np-table-ink) !important;
  border-radius: 32px !important;
  background: var(--np-table-ink) !important;
  box-shadow: 10px 10px 0 rgba(122, 92, 255, .52) !important;
  overflow: visible !important;
}

#gameApp .solo-private-felt,
body.multiplayer-live #multiplayerApp .multi-felt {
  position: relative !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(200,255,61,.12), transparent 34%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
    linear-gradient(145deg, var(--np-table-violet), var(--np-table-violet-dark)) !important;
  box-shadow:
    inset 0 0 0 3px var(--np-table-lime),
    inset 0 0 0 7px var(--np-table-ink),
    inset 0 0 58px rgba(18,18,18,.34) !important;
}

#gameApp .solo-private-felt::before,
body.multiplayer-live #multiplayerApp .multi-felt::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  z-index: 0 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 13px !important;
  background: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Remove the old extra arc/second table layer. */
#gameApp .solo-private-felt::after,
body.multiplayer-live #multiplayerApp .multi-felt::after {
  display: none !important;
  content: none !important;
}

/* Keep real table content above the decorative inner line. */
#gameApp .solo-private-felt > *,
body.multiplayer-live #multiplayerApp .multi-felt > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Poker: remove the old brown shell and rebuild a concentric frame.
   --------------------------------------------------------------- */
#pokerApp .poker-table-shell {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 46% / 15% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#pokerApp .poker-table-rim {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  border: 3px solid var(--np-table-ink) !important;
  border-radius: 46% / 15% !important;
  background: var(--np-table-ink) !important;
  box-shadow: 11px 11px 0 rgba(122, 92, 255, .52) !important;
  overflow: visible !important;
}

#pokerApp .poker-felt {
  position: relative !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 44% / 14% !important;
  background:
    radial-gradient(ellipse at center, rgba(200,255,61,.10), transparent 42%),
    repeating-radial-gradient(ellipse at center, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, var(--np-table-violet), var(--np-table-violet-dark)) !important;
  box-shadow:
    inset 0 0 0 3px var(--np-table-lime),
    inset 0 0 0 7px var(--np-table-ink),
    inset 0 0 58px rgba(18,18,18,.34) !important;
}

#pokerApp .poker-felt::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% !important;
  border: 2px dashed rgba(255,255,255,.52) !important;
  border-radius: 50% !important;
  background: none !important;
  pointer-events: none !important;
}

/* The second ellipse caused a visible extra layer. */
#pokerApp .poker-felt::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------------
   Shop navigation: rounded, stronger and consistent with the UI.
   --------------------------------------------------------------- */
#shopOverlay .shop-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 7px !important;
  border: 3px solid var(--np-table-ink) !important;
  border-radius: 18px !important;
  background: #101b2b !important;
  box-shadow: 4px 4px 0 var(--np-table-ink) !important;
}

#shopOverlay .shop-tab {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 9px !important;
  border: 2px solid var(--np-table-ink) !important;
  border-radius: 13px !important;
  color: #f4f7fb !important;
  background: #2a3950 !important;
  box-shadow: 2px 2px 0 var(--np-table-ink) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  transform: none !important;
}

#shopOverlay .shop-tab:hover:not(:disabled) {
  color: #fff !important;
  background: #354965 !important;
  box-shadow: 2px 2px 0 var(--np-table-ink) !important;
  transform: none !important;
}

#shopOverlay .shop-tab.active {
  color: #fff !important;
  background: var(--np-table-violet) !important;
  border-color: var(--np-table-ink) !important;
  box-shadow: 2px 2px 0 var(--np-table-ink) !important;
}

/* Assets: change shape only, keeping the existing colours/content. */
#shopOverlay .shop-asset-category-tabs {
  gap: 7px !important;
  padding: 6px !important;
  border: 2px solid var(--np-table-ink) !important;
  border-radius: 16px !important;
}

#shopOverlay .shop-asset-category-tabs button {
  border-radius: 12px !important;
  padding: 8px 13px !important;
  transform: none !important;
}

#shopOverlay .asset-items .shop-item-card {
  border-radius: 18px !important;
  overflow: hidden !important;
}

#shopOverlay .asset-items .shop-item-graphic {
  border-radius: 14px !important;
}

#shopOverlay .asset-items .shop-item-card > button {
  border-radius: 13px !important;
  transform: none !important;
}

@media (max-width: 900px) {
  #gameApp .solo-private-rim,
  body.multiplayer-live #multiplayerApp .multi-table-rim {
    padding: 7px !important;
    border-radius: 24px !important;
    box-shadow: 7px 7px 0 rgba(122, 92, 255, .52) !important;
  }

  #gameApp .solo-private-felt,
  body.multiplayer-live #multiplayerApp .multi-felt {
    border-radius: 17px !important;
  }

  #gameApp .solo-private-felt::before,
  body.multiplayer-live #multiplayerApp .multi-felt::before {
    inset: 9px !important;
    border-radius: 10px !important;
  }

  #pokerApp .poker-table-shell,
  #pokerApp .poker-table-rim {
    border-radius: 32px !important;
  }

  #pokerApp .poker-table-rim {
    padding: 8px !important;
    box-shadow: 7px 7px 0 rgba(122, 92, 255, .52) !important;
  }

  #pokerApp .poker-felt {
    border-radius: 24px !important;
  }

  #shopOverlay .shop-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}