/* Nebulo Play — the casino / lottery / rewards / leaderboard hub.
   Dark slate theme matching the casino; scoped to #cosmetics-page.is-play. */
#cosmetics-page.is-play {
  --p-bg: #0f212e; --p-page: #1a2c38; --p-panel: #213743; --p-line: #2f4553; --p-hover: #3d5a6c;
  --p-text: #fff; --p-muted: #b1bad3; --p-green: #00e701; --p-gold: #f5b400; --p-red: #ff3b5c;
  background: var(--p-page); color: var(--p-text);
}
#cosmetics-page.is-play .cosmetics-catalog { background: var(--p-page); padding: 18px 22px 60px; }
#cosmetics-page.is-play .cosmetics-page-body { grid-template-columns: 1fr; }
#cosmetics-page.is-play .shop-catalog-inner { max-width: 1180px; }

/* header */
#cosmetics-page.is-play .play-header { background: var(--p-bg); border-bottom: 0; min-height: 60px; padding: 0 18px; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.play-logo { font-size: 20px; font-weight: 800; letter-spacing: -.04em; color: #fff; text-transform: lowercase; margin-right: 10px; white-space: nowrap; }
.play-logo b { color: #00e701; font-weight: 800; }
.play-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.play-tabs::-webkit-scrollbar { display: none; }
.play-tabs button { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #b1bad3; font: 600 14px/1 inherit; padding: 10px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.play-tabs button .material-icons-round { font-size: 18px; }
.play-tabs button:hover { background: #213743; color: #fff; }
.play-tabs button.active { background: #2f4553; color: #fff; }
#cosmetics-page.is-play .play-balance { background: #0f212e; box-shadow: inset 0 0 0 2px #2f4553; border: 0; border-radius: 6px; color: #fff; font-weight: 700; padding: 8px 12px; gap: 7px; }
.play-coin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, #f5b400 0 45%, #b37f00 46% 56%, #f5b400 57%); }
.play-coin.is-big { width: .8em; height: .8em; }
#cosmetics-page.is-play .shop-back-chat { background: transparent; color: #b1bad3; border: 0; }
#cosmetics-page.is-play .shop-back-chat:hover { background: #213743; color: #fff; }

/* the strip of reasons to come back */
.play-strip { display: flex; gap: 10px; padding: 10px 18px; background: var(--p-page); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(0,0,0,.18); }
.play-strip::-webkit-scrollbar { display: none; }
.play-chip { flex: 1 0 auto; min-width: 210px; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; border-radius: 6px; padding: 9px 12px; background: #213743; color: #fff; cursor: pointer; transition: background .15s; font: inherit; }
.play-chip:hover { background: #2a4555; }
.play-chip > .material-icons-round { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: #0f212e; color: #b1bad3; font-size: 19px; }
.play-chip small { display: block; font-size: 11px; font-weight: 600; color: #b1bad3; margin-bottom: 2px; }
.play-chip b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.play-chip.is-ready { box-shadow: inset 0 0 0 2px #00e701; }
.play-chip.is-ready > .material-icons-round { background: #00e701; color: #05170a; }
.play-chip.is-ready b { color: #00e701; }
.play-chip.is-pot > .material-icons-round { color: #f5b400; }
.play-chip-time { margin-left: auto; font-size: 12px; font-weight: 600; color: #b1bad3; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* generic content on dark */
#cosmetics-page.is-play .cosmetics-catalog-head.is-hidden { display: none; }
#cosmetics-page.is-play .cosmetics-catalog-head h2 { color: #fff; }
#cosmetics-page.is-play .cosmetics-catalog-head p, #cosmetics-page.is-play .shop-muted, #cosmetics-page.is-play .shop-section-desc { color: #b1bad3; }
#cosmetics-page.is-play .shop-eyebrow { color: #00e701; }
#cosmetics-page.is-play .shop-rewards-section, #cosmetics-page.is-play .shop-rewards-hero, #cosmetics-page.is-play .shop-lb-list, #cosmetics-page.is-play .shop-leaderboard-header,
#cosmetics-page.is-play .shop-pending-notice, #cosmetics-page.is-play .shop-loading-state {
  background: #213743; border: 0; border-radius: 8px; color: #fff; box-shadow: none; }
#cosmetics-page.is-play .shop-section-head h3, #cosmetics-page.is-play .shop-leaderboard-header h3 { color: #fff; }
#cosmetics-page.is-play .shop-section-head .material-icons-round, #cosmetics-page.is-play .shop-leaderboard-header .material-icons-round { color: #f5b400; }
#cosmetics-page.is-play .shop-leaderboard-header p { color: #b1bad3; }
#cosmetics-page.is-play .shop-badge { background: #0f212e; color: #b1bad3; border: 0; }
#cosmetics-page.is-play .shop-badge.live { background: #00e701; color: #05170a; }
#cosmetics-page.is-play .shop-badge.done { background: #2f4553; color: #b1bad3; }
#cosmetics-page.is-play .shop-coins-big, #cosmetics-page.is-play .shop-coins-big strong, #cosmetics-page.is-play .shop-streak-stat strong { color: #fff; }
#cosmetics-page.is-play .shop-coins-big .material-icons-round { color: #f5b400; }
#cosmetics-page.is-play .shop-streak-stat small, #cosmetics-page.is-play .shop-coins-big small, #cosmetics-page.is-play .shop-streak-labels { color: #b1bad3; }
#cosmetics-page.is-play .shop-streak-divider { background: #2f4553; }
#cosmetics-page.is-play .shop-streak-bar { background: #0f212e; }
#cosmetics-page.is-play .shop-streak-fill { background: #00e701; }
#cosmetics-page.is-play .shop-week li { background: #0f212e; border: 0; color: #b1bad3; border-radius: 6px; }
#cosmetics-page.is-play .shop-week li b { color: #fff; }
#cosmetics-page.is-play .shop-week li.earned { background: rgba(0,231,1,.12); color: #00e701; }
#cosmetics-page.is-play .shop-week li.earned b { color: #00e701; }
#cosmetics-page.is-play .shop-week li.next { box-shadow: inset 0 0 0 2px #00e701; }
#cosmetics-page.is-play .shop-claim-btn, #cosmetics-page.is-play .shop-primary-btn { background: #00e701; color: #05170a; border: 0; border-radius: 6px; font-weight: 700; box-shadow: none; }
#cosmetics-page.is-play .shop-claim-btn:hover:not(:disabled), #cosmetics-page.is-play .shop-primary-btn:hover:not(:disabled) { background: #1fff20; }
#cosmetics-page.is-play .shop-claim-btn:disabled, #cosmetics-page.is-play .shop-claim-btn.disabled { background: #2f4553; color: #b1bad3; }
#cosmetics-page.is-play .shop-recent-item { border-color: #2f4553; color: #fff; }
#cosmetics-page.is-play .shop-positive { color: #00e701; }
#cosmetics-page.is-play .shop-text-button { color: #00e701; }

/* leaderboard */
#cosmetics-page.is-play .shop-lb-controls { background: #0f212e; padding: 4px; border-radius: 999px; display: inline-flex; gap: 4px; border: 0; }
#cosmetics-page.is-play .shop-lb-tab { background: transparent; border: 0; color: #b1bad3; border-radius: 999px; font-weight: 600; }
#cosmetics-page.is-play .shop-lb-tab.active { background: #2f4553; color: #fff; }
#cosmetics-page.is-play .shop-lb-list { padding: 6px; }
#cosmetics-page.is-play .shop-lb-entry { border: 0; border-radius: 6px; color: #fff; background: transparent; }
#cosmetics-page.is-play .shop-lb-entry:nth-child(odd) { background: #1a2c38; }
#cosmetics-page.is-play .shop-lb-rank { background: #0f212e; color: #b1bad3; border-radius: 6px; font-weight: 700; }
#cosmetics-page.is-play .shop-lb-entry:nth-child(1) .shop-lb-rank { background: #f5b400; color: #3a2a00; }
#cosmetics-page.is-play .shop-lb-entry:nth-child(2) .shop-lb-rank { background: #c9d3e0; color: #1a2c38; }
#cosmetics-page.is-play .shop-lb-entry:nth-child(3) .shop-lb-rank { background: #cd7f32; color: #2b1600; }
#cosmetics-page.is-play .shop-lb-user small { color: #b1bad3; }
#cosmetics-page.is-play .shop-lb-score { color: #fff; font-weight: 700; }
#cosmetics-page.is-play .shop-lb-status { color: #b1bad3; }

/* lottery */
#cosmetics-page.is-play .shop-lottery { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 12px; color: #fff; }
.lotto-jackpot { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 18px 24px; border-radius: 8px;
  background: #0f212e; box-shadow: inset 0 0 0 1px #2f4553; }
.lotto-jackpot::before { content: ''; position: absolute; inset: 0; background:
  repeating-linear-gradient(115deg, transparent 0 22px, rgba(245,180,0,.035) 22px 44px); pointer-events: none; }
.lotto-live { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #00e701; }
.lotto-live i { width: 8px; height: 8px; border-radius: 50%; background: #00e701; animation: lotto-pulse 1.6s ease-in-out infinite; }
@keyframes lotto-pulse { 50% { opacity: .35; } }
.lotto-label { font-size: 13px; font-weight: 700; color: #b1bad3; text-transform: uppercase; letter-spacing: .08em; }
.lotto-pot { display: flex; align-items: center; gap: 10px; font-size: clamp(38px, 7vw, 68px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #f5b400; font-variant-numeric: tabular-nums; }
.lotto-sub { font-size: 13px; color: #b1bad3; font-weight: 500; }
.lotto-clock { display: flex; gap: 8px; margin-top: 12px; }
.lotto-clock div { min-width: 64px; padding: 10px 8px 8px; border-radius: 6px; background: #213743; }
.lotto-clock b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lotto-clock small { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b1bad3; }
.lotto-skel { display: inline-block; width: 6ch; height: .9em; border-radius: 6px; background: linear-gradient(90deg, #213743, #2f4553, #213743); background-size: 200% 100%; animation: lotto-skel 1.2s linear infinite; }
@keyframes lotto-skel { to { background-position: -200% 0; } }
#cosmetics-page.is-play .shop-lottery-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: none; border: 0; padding: 0; }
#cosmetics-page.is-play .shop-lottery-stats > div { background: #213743; border-radius: 6px; padding: 12px 14px; border: 0; }
#cosmetics-page.is-play .shop-lottery-stats span { color: #b1bad3; font-size: 12px; font-weight: 600; }
#cosmetics-page.is-play .shop-lottery-stats strong { color: #fff; font-size: 16px; font-weight: 700; }
#cosmetics-page.is-play .shop-lottery-entry, #cosmetics-page.is-play .shop-lottery-ticket, #cosmetics-page.is-play .shop-lottery-last {
  background: #213743; border: 0; border-radius: 8px; color: #fff; box-shadow: none; }
#cosmetics-page.is-play .shop-lottery-entry label > span { color: #b1bad3; font-weight: 600; }
#cosmetics-page.is-play .shop-lottery-input { background: #0f212e; border: 2px solid #2f4553; border-radius: 6px; }
#cosmetics-page.is-play .shop-lottery-input input { background: transparent; color: #fff; font-weight: 700; }
#cosmetics-page.is-play .shop-lottery-input .material-icons-round { color: #f5b400; }
#cosmetics-page.is-play .shop-lottery-input button { background: #2f4553; color: #fff; border: 0; border-radius: 4px; font-weight: 600; }
#cosmetics-page.is-play .shop-lottery-ticket { box-shadow: inset 3px 0 0 #00e701; }
#cosmetics-page.is-play .shop-lottery-ticket .material-icons-round { color: #00e701; }
#cosmetics-page.is-play .shop-lottery-ticket p, #cosmetics-page.is-play .shop-lottery-last small, #cosmetics-page.is-play .shop-lottery-last > span:not(.material-icons-round) { color: #b1bad3; }
#cosmetics-page.is-play .shop-lottery-last .material-icons-round { color: #f5b400; }
#cosmetics-page.is-play .shop-lottery-heading, #cosmetics-page.is-play .shop-lottery-pot { display: none; }

/* casino surface fills the page */
#cosmetics-page.is-play .shop-casino-surface { background: transparent; }
#cosmetics-page.is-play .cx { border-radius: 8px; }

@media (max-width: 760px) {
  #cosmetics-page.is-play .play-header { padding: 0 10px; gap: 8px; }
  .play-logo { display: none; }
  .play-tabs button { padding: 9px 10px; font-size: 13px; }
  .play-tabs button .material-icons-round { display: none; }
  .play-strip { padding: 8px 10px; }
  .play-chip { min-width: 180px; }
  #cosmetics-page.is-play .cosmetics-catalog { padding: 12px 10px 40px; }
  .lotto-clock div { min-width: 54px; }
  #cosmetics-page.is-play .shop-lottery-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lotto-live i, .lotto-skel { animation: none; } }
#cosmetics-page.is-play[data-category="casino"] .play-balance { display: none; }
#cosmetics-page.is-play .cx-brand { visibility: hidden; }

/* level chip in the strip */
.play-chip.is-level { min-width: 240px; }
.play-chip-lvl { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(160deg, #7f47fd, #4b2a8c); font-weight: 800; font-size: 15px; color: #fff; }
.play-chip-grow { flex: 1; min-width: 0; }
.play-chip-grow em { font-style: normal; color: #00e701; }
.play-chip-xp { display: block; height: 6px; border-radius: 999px; background: #0f212e; overflow: hidden; margin-top: 5px; }
.play-chip-xp i { display: block; height: 100%; background: #7f47fd; border-radius: inherit; }
.play-chip.is-level.is-ready { box-shadow: inset 0 0 0 2px #00e701; }

/* level card */
.play-level { display: flex; gap: 14px; align-items: center; background: #213743; border-radius: 8px; padding: 16px; margin-bottom: 14px; color: #fff; }
.play-level-badge { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #7f47fd, #4b2a8c); }
.play-level-badge small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.play-level-badge b { font-size: 26px; font-weight: 800; line-height: 1; }
.play-level-body { flex: 1; min-width: 0; }
.play-level-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.play-level-top strong { font-size: 17px; font-weight: 700; }
.play-level-top span { font-size: 13px; color: #b1bad3; font-weight: 600; font-variant-numeric: tabular-nums; }
.play-level-bar { height: 10px; border-radius: 999px; background: #0f212e; overflow: hidden; margin: 8px 0 6px; }
.play-level-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7f47fd, #b388ff); transition: width .6s ease; }
.play-level-body > small { color: #b1bad3; font-size: 12px; }

/* achievements */
.play-ach { margin-bottom: 16px; }
.play-ach-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.play-ach-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.play-ach-head h3 .material-icons-round { color: #f5b400; font-size: 20px; }
.play-ach-head > span { color: #b1bad3; font-size: 13px; font-weight: 600; }
.play-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.play-ach-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 8px; background: #213743; color: #fff; }
.play-ach-card strong { font-size: 14px; font-weight: 700; }
.play-ach-card p { margin: 0; font-size: 12px; color: #b1bad3; line-height: 1.45; min-height: 2.9em; }
.play-ach-top { display: flex; justify-content: space-between; align-items: center; }
.play-ach-cat { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8193a7; }
.play-ach-reward { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #f5b400; }
.play-ach-reward .play-coin { width: 12px; height: 12px; }
.play-ach-bar { height: 6px; border-radius: 999px; background: #0f212e; overflow: hidden; }
.play-ach-bar i { display: block; height: 100%; background: #2f86ff; border-radius: inherit; }
.play-ach-foot { display: flex; justify-content: space-between; align-items: center; min-height: 28px; font-size: 12px; color: #b1bad3; font-variant-numeric: tabular-nums; }
.play-ach-foot button { border: 0; border-radius: 4px; background: #00e701; color: #05170a; font-weight: 700; font-size: 12px; padding: 6px 14px; cursor: pointer; }
.play-ach-foot button:hover { background: #1fff20; }
.play-ach-foot em { font-style: normal; color: #00e701; font-weight: 600; }
.play-ach-card.is-ready { box-shadow: inset 0 0 0 2px #00e701; }
.play-ach-card.is-ready .play-ach-bar i { background: #00e701; }
.play-ach-card.is-done { opacity: .6; }
.play-ach-card.is-done .play-ach-bar i { background: #00e701; }
.play-ach-loading { color: #b1bad3; padding: 12px 0; }