/* PANJGOOSHEH · the site's chrome: the header, the full menu, the bottom
 * sheet and its banners, the radio controls and the admin sidebar's groups.
 *
 * The header is drawn once and never reacts to the scroll: a solid bar with
 * no blur and no morph, so nothing in it can flicker. Phones have no header
 * at all (it is an app there): the bottom bar and its sheet take its place,
 * and the sheet opens the full menu.
 *
 * Banners are flat colour fields with large display type and one still
 * drawing each. Labels are in the body face. Things that can be pressed
 * shrink a little while held. */

/* ---------- Header (computers) ------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px);
  height: var(--nav-h); padding: 0 max(var(--gut, 16px), 2.6vw); box-sizing: border-box;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text); text-decoration: none;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.brand:active { transform: scale(.96); }
.brand .logo { width: 26px; height: 26px; opacity: 1; }
.brand-word { font: 400 1rem/1 var(--font-display); letter-spacing: .08em; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0 auto; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  font: 600 .9rem/1 var(--font-body); color: var(--text-dim); text-decoration: none;
  transition: color .15s, background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-link:hover { color: var(--text); background: var(--wash-3); }
.nav-link:active { transform: scale(.96); }
.nav-link.active { color: var(--bg); background: var(--text); }
.nav-moon { display: block; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset -4px -1px 0 0 #ff2a1f; transform: rotate(-20deg); }

.nav-end { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.nav-links + .nav-end { margin-inline-start: 0; }
.nav-cart { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text); transition: background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-cart:hover { background: var(--wash-3); }
.nav-cart:active { transform: scale(.94); }
.nav-cart-n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: #ffc60b; color: #0b0b0b; font: 800 .62rem/1 var(--font-body); font-variant-numeric: tabular-nums; }

.nav-profile { display: inline-flex; align-items: center; gap: 9px; height: 40px; max-width: 220px; padding: 0 14px 0 5px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-profile:hover, .nav-profile.active { background: var(--wash-3); }
.nav-profile:active { transform: scale(.97); }
.nav-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ff2a1f; color: #fff; font: 400 .95rem/1 var(--font-display); }
.nav-profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .86rem/1.2 var(--font-body); }

.nav-burger { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--text); color: var(--bg); font: 700 .88rem/1 var(--font-body); transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-burger:active { transform: scale(.96); }
.nav-burger .burger-lines { display: grid; gap: 4px; width: 16px; }
.nav-burger .burger-lines span { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s; }
.nav-burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text); text-decoration: none; font: 700 .88rem/1 var(--font-body); transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-btn-in { border-color: transparent; background: #ff2a1f; color: #fff; }
.nav-btn:active { transform: scale(.96); }

@media (max-width: 1240px) { .nav-profile { padding-inline-end: 5px; } .nav-profile-name, .nav-profile .vip-badge { display: none; } }
@media (max-width: 1080px) { .nav-links { display: none; } }

/* Phones: no header. The page starts under the notch, and everything that
   kept clear of the header (sticky bars, heroes) keeps clear of the notch. */
@media (max-width: 900px) {
  :root { --nav-h: env(safe-area-inset-top, 0px); }
  body > .nav { display: none !important; }
  main.container { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.4vw, 32px)); }
  .wf { padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important; }
}

/* ---------- The radio: the header button and the menu row --------------- */
.rx-hd { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); background: none; color: var(--text); cursor: pointer; transition: background-color .2s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.rx-hd:hover { background: var(--wash-3); }
.rx-hd:active { transform: scale(.94); }
.rx-hd svg { display: block; }
.rx-hd .rx-eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.rx-hd .rx-eq i { width: 3px; height: 35%; border-radius: 2px; background: #fff; }
html.rx-playing .rx-hd { background: #ff2a1f; border-color: transparent; color: #fff; }
html.rx-playing .rx-hd .rx-hd-i { display: none; }
html.rx-playing .rx-hd .rx-eq { display: inline-flex; }
html.rx-playing .rx-hd .rx-eq i { animation: rx-hd-eq .9s ease-in-out infinite; }
.rx-hd .rx-eq i:nth-child(2) { animation-delay: -.3s; } .rx-hd .rx-eq i:nth-child(3) { animation-delay: -.6s; } .rx-hd .rx-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes rx-hd-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

.rx-menu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: #0b0b0b; color: #fff; }
.rx-menu-art { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; cursor: pointer; background: #ff2a1f; }
.rx-menu-art .rx-mark { width: 26px; height: 26px; }
.rx-menu-txt { min-width: 0; display: grid; gap: 2px; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; font: inherit; }
:root[dir="rtl"] .rx-menu-txt b { text-align: right; }
.rx-menu-txt small { display: flex; align-items: center; gap: 6px; font: 700 .74rem var(--font-body); color: #ff8a80; }
.rx-menu-txt b { unicode-bidi: plaintext; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 .98rem var(--font-body); }
.rx-menu-txt i { font-style: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .76rem; color: rgba(255, 255, 255, .6); }
.rx-menu .rx-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; } .rx-menu .rx-eq i { width: 2px; height: 30%; border-radius: 2px; background: #ff2a1f; }
.rx-menu-ctl { display: flex; align-items: center; gap: 6px; }
.rx-menu-ctl button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: inherit; transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.rx-menu-ctl button:active { transform: scale(.92); }
.rx-menu-ctl button.play { width: 44px; height: 44px; background: #ff2a1f; color: #fff; }
html:not(.rx-playing) .rx-menu .rx-i-pause, html.rx-playing .rx-menu .rx-i-play { display: none; }

/* ---------- The full menu ------------------------------------------------ */
.mobile-menu { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--text); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .22s; }
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s cubic-bezier(.22, 1, .36, 1); }
.mm-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  min-height: 64px; padding: env(safe-area-inset-top, 0px) max(var(--gut, 16px), 2.6vw) 0; box-sizing: border-box;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.mm-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.mm-brand .logo { width: 26px; height: 26px; opacity: 1; }
.menu-close { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: none; color: var(--text); font: 700 .88rem/1 var(--font-body); cursor: pointer; transition: background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.menu-close:hover { background: var(--wash-3); }
.menu-close:active { transform: scale(.96); }

.mm-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; box-sizing: border-box;
  padding: 22px max(var(--gut, 16px), 2.6vw) 8px; }
.mm-side, .mm-main { display: grid; align-content: start; gap: 14px; min-width: 0; }
.mm-main { gap: 34px; }
@media (min-width: 1000px) {
  .mm-body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 64px); padding-top: 28px; }
  .mm-side { position: sticky; top: 92px; align-self: start; }
}
/* One column: you, the radio, the banners and every page first; your record
   and the account after them. */
@media (max-width: 999px) {
  .mm-side, .mm-main { display: contents; }
  .mm-body { gap: 18px; }
  .mm-body .menu-id { order: 1; } .mm-radio { order: 2; } .mm-banners { order: 3; } .mm-cats { order: 4; margin-top: 10px; }
  .mm-body .menu-dc { order: 5; margin-top: 6px; } .mm-body .menu-chips { order: 6; margin-top: 10px; } .menu-stats-section { order: 7; } .menu-account { order: 8; }
}
.mobile-menu .menu-section { margin: 0; }
.mobile-menu .menu-section-title { margin: 0 0 12px; font: 700 .84rem var(--font-body); color: var(--muted); }

/* who you are, and what you are holding */
.menu-id-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--bg-raise); }
.menu-id-mark { width: 40px; height: 40px; background: var(--text); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.menu-id-card.is-vip .menu-id-mark { background: #ffc60b; }
.menu-id-body { min-width: 0; }
.menu-id-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 800 1.15rem/1.2 var(--font-body); }
.menu-id-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-id-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font: 500 .78rem var(--font-body); color: var(--muted); }
.menu-id-admin { color: var(--text); font-weight: 700; }
.vip-plate { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #ffc60b; color: #0b0b0b; font: 800 .66rem/1.2 var(--font-body); white-space: nowrap; }
.menu-id-bal { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px; min-width: 0;
  background: #ffc60b; color: #0b0b0b; text-decoration: none; transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.menu-id-bal:active { transform: scale(.98); }
.menu-id-bal em { flex: 1; font: 700 .8rem var(--font-body); font-style: normal; }
.menu-id-bal b { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 1.2rem/1.1 var(--font-body); font-variant-numeric: tabular-nums; }
.menu-id-bal > i { font: 600 .74rem var(--font-body); font-style: normal; opacity: .7; }
.menu-id-chips { background: #0f7a46; color: #ffd84a; }
.menu-id-games { background: #e0203f; color: #fff; }

/* your record */
.menu-stats-section { padding: 16px; border-radius: 18px; background: var(--bg-raise); }
.menu-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.m-stat { display: grid; gap: 4px; min-width: 0; }
.m-stat b { font: 400 1.7rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-stat i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .74rem var(--font-body); font-style: normal; color: var(--muted); }
.menu-tier { margin-top: 16px; }
.menu-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 700 .84rem var(--font-body); }
.menu-tier-goal { font-weight: 500; color: var(--muted); text-align: end; }
.menu-tier-bar { height: 6px; margin-top: 9px; border-radius: 3px; overflow: hidden; background: var(--line); }
.menu-tier-bar span { display: block; height: 100%; border-radius: 3px; background: #ffc60b; }

/* the account: settings and sign out */
.account-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; border-radius: 18px; background: var(--bg-raise); }
.account-info { flex: 1 1 100%; min-width: 0; padding: 0 2px 4px; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .94rem var(--font-body); }
.account-id { margin-top: 2px; font: 500 .76rem var(--font-body); color: var(--muted); }
.mm-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text); text-decoration: none; font: 700 .86rem var(--font-body); transition: background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.mm-mini:hover { background: var(--wash-3); }
.mm-mini:active { transform: scale(.97); }
.mm-out { border-color: transparent; background: #ff2a1f; color: #fff; }
.mm-out:hover { background: #e0201a; }

/* the banners */
.mm-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.mm-b { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; min-width: 0;
  min-height: clamp(168px, 14vw, 220px); padding: 18px; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
.mm-b:active { transform: scale(.98); }
.mm-b.active { outline: 2px solid var(--text); outline-offset: 3px; }
.mm-b-k { font: 700 .78rem/1.2 var(--font-body); opacity: .85; }
.mm-b-k .menu-next-in { font-variant-numeric: tabular-nums; }
.mm-b { container-type: inline-size; }
.mm-b > b { max-width: 100%; overflow-wrap: break-word; font: 400 clamp(1rem, 10.5cqi, 2.6rem)/.92 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.mm-b > small { max-width: 30ch; font: 500 .84rem/1.38 var(--font-body); opacity: .82; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mm-b-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: #0b0b0b; color: #fff; font: 800 .82rem/1 var(--font-body); }
.mm-b-art { position: absolute; z-index: -1; top: 18px; inset-inline-end: 18px; pointer-events: none; }
.mm-b-game { color: #fff; background: linear-gradient(0deg, rgba(5, 4, 10, .94) 10%, rgba(5, 4, 10, .3) 70%, rgba(5, 4, 10, .05)), var(--img) center / cover no-repeat #0b0b0b; }
.mm-b-game .mm-b-k { color: #ff8a9a; opacity: 1; }
.mm-b-game .mm-b-go { background: #fff; color: #0b0b0b; }
.mm-b-night { background: #ff2a1f; color: #0b0b0b; }
.mm-b-shop { background: #f3ead8; color: #0b0b0b; }
.mm-b-shop .mm-b-art { width: 58px; height: 58px; border-radius: 50%; background: #ffc60b; box-shadow: -30px 22px 0 -8px #ff2a1f, -4px 46px 0 -16px #0098ea; }
.mm-b-help { background: #ffc60b; color: #0b0b0b; }
.mm-b-help .mm-b-art { top: 14px; color: #0b0b0b; }
@media (max-width: 640px) {
  .mm-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mm-b { min-height: 150px; padding: 14px; border-radius: 18px; }
  .mm-b > small { display: none; }
  .mm-b-go { padding: 7px 12px; font-size: .78rem; }
  .mm-b-shop .mm-b-art { transform: scale(.7); transform-origin: 100% 0; }
  .mm-b-help .mm-b-art svg { width: 34px; height: 34px; }
}

/* every page, in four groups */
.mm-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 30px clamp(20px, 2.6vw, 44px); align-items: start; }
.mm-cat-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 .96rem var(--font-body); color: var(--text); }
.mm-cat-h i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--g, #ffc60b); color: #0b0b0b; }
.mm-cat-club { --g: #ffc60b; } .mm-cat-you { --g: #33d6c6; } .mm-cat-money { --g: #2ee59d; } .mm-cat-help { --g: #ff8fb1; }
.mm-links { display: grid; }
.mm-links a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none;
  transition: padding .2s cubic-bezier(.22, 1, .36, 1), color .15s; }
.mm-links .lbl { display: grid; gap: 4px; font: 400 1.28rem/1.08 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.mm-links .lbl small { font: 500 .78rem/1.35 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mm-links a:hover { padding-inline-start: 8px; }
.mm-links a.active { padding-inline-start: 12px; box-shadow: inset 3px 0 0 var(--g, #ffc60b); }
:root[dir="rtl"] .mm-links a.active { box-shadow: inset -3px 0 0 var(--g, #ffc60b); }
.mobile-menu .menu-dc { margin-top: -6px; border-radius: 20px; }

/* quick actions and the crew's shortcuts */
.mobile-menu .chip-row { gap: 8px; }
.mobile-menu .chip { padding: 10px 15px; border-radius: 999px; border-color: var(--line-strong); color: var(--text);
  font: 600 .84rem/1 var(--font-body); letter-spacing: 0; text-transform: none; transition: background-color .15s, transform .14s cubic-bezier(.22, 1, .36, 1); }
.mobile-menu .chip:hover { background: var(--wash-3); }
.mobile-menu .chip:active { transform: scale(.96); }
.mobile-menu .chip-admin { border-color: transparent; background: var(--bg-raise); }
.mobile-menu .chip-dj { border-color: transparent; background: #ff2bd6; color: #0b0b0b; }
.mm-crew-t { margin-top: 22px !important; }

.menu-colophon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: auto;
  padding: 22px max(var(--gut, 16px), 2.6vw) calc(22px + env(safe-area-inset-bottom, 0px)); font: 500 .78rem var(--font-body); color: var(--muted); }
.menu-colophon a { color: var(--muted); }
.menu-colophon a:hover { color: var(--text); }

/* ---------- The bottom sheet (the bar's middle button) ------------------- */
.bs { position: fixed; inset: 0; z-index: 3200; display: flex; flex-direction: column; justify-content: flex-end; }
.bs[hidden] { display: none; }
.bs-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .28s; }
.bs.open .bs-scrim { opacity: 1; }
.bs-panel { position: relative; display: grid; gap: 14px; grid-auto-rows: max-content; align-content: start; max-height: min(90vh, 820px); max-height: min(90dvh, 820px);
  overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0;
  background: var(--bg); transform: translateY(100%); transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.bs.open .bs-panel { transform: none; }
.bs-panel.dragging { transition: none; }
.bs-panel > * { min-height: max-content; }
.bs-grab { display: grid; place-items: center; height: 20px; cursor: grab; touch-action: none; }
.bs-grab i { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }

.bs-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; }
.bs-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ff2a1f; color: #fff; font: 400 1.25rem/1 var(--font-display); }
.bs-who { display: grid; min-width: 0; }
.bs-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1rem/1.25 var(--font-body); }
.bs-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .76rem var(--font-body); color: var(--muted); }
.chip-i { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.12em;
  background: radial-gradient(circle, #ffc60b 0 32%, #7a5a10 33% 42%, #ffc60b 43% 60%, #fff4c2 61% 69%, #ffc60b 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.bs-chips { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border-radius: 999px; background: #0f7a46; color: #ffd84a;
  text-decoration: none; font: 800 .82rem var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-menu { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--text); color: var(--bg); font: 700 .84rem/1 var(--font-body); transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.bs-x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--text); cursor: pointer;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.bs-menu:active, .bs-x:active, .bs-chips:active { transform: scale(.94); }

/* what you hold: a gold strip, four numbers */
.bs-bal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; overflow: hidden; background: #ffc60b; color: #0b0b0b; text-decoration: none;
  transition: transform .15s cubic-bezier(.22, 1, .36, 1); }
.bs-bal:active { transform: scale(.985); }
.bs-bal span { display: grid; gap: 2px; min-width: 0; padding: 12px 10px; }
.bs-bal span + span { border-inline-start: 1px solid rgba(0, 0, 0, .14); }
.bs-bal em, .bs-bal small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-bal em { font: 700 .7rem/1.2 var(--font-body); font-style: normal; }
/* body type, not the display face: that one draws "/" and "," as colons */
.bs-bal b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.1rem/1.1 var(--font-body); font-variant-numeric: tabular-nums; }
.bs-bal small { font-size: .68rem; opacity: .7; }

/* the banners: flat colour, big type, one still drawing each; the next one peeks in */
.bs-promo { display: grid; gap: 10px; }
.bs-promo-track { display: flex; gap: 10px; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bs-promo-track::-webkit-scrollbar { display: none; }
.bs-slide { position: relative; flex: 0 0 86%; scroll-snap-align: start; min-height: 178px; box-sizing: border-box; display: grid; align-content: end; justify-items: start; gap: 5px;
  padding: 16px 18px; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none; background: #ffc60b; color: #0b0b0b;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
.bs-slide:active { transform: scale(.985); }
button.bs-slide { border: 0; text-align: start; font: inherit; cursor: pointer; }
.bs-k { display: flex; align-items: center; gap: 6px; max-width: 100%; font: 700 .76rem/1.2 var(--font-body); opacity: .85; }
.bs-k i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bs-k b { font-weight: 800; }
.bs-h { max-width: 100%; overflow-wrap: anywhere; font: 400 clamp(1.9rem, 8.6vw, 2.5rem)/.92 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; }
.bs-h small { font: 700 .9rem var(--font-body); text-transform: none; }
.bs-s { max-width: min(32ch, calc(100% - 84px)); font: 500 .84rem/1.38 var(--font-body); opacity: .82; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bs-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: #0b0b0b; color: #fff; font: 800 .82rem/1 var(--font-body); }
button.bs-go { border: 0; cursor: pointer; }
button.bs-go:disabled { cursor: default; opacity: .7; }
.bs-go.is-done { background: rgba(0, 0, 0, .12); color: #0b0b0b; }
/* the drawing sits in the bottom corner, beside the button, clear of the words */
.bs-slide > [aria-hidden="true"] { position: absolute; z-index: -1; bottom: 16px; inset-inline-end: 16px; pointer-events: none; }
.bs-dark { color: #fff; }
.bs-dots { display: flex; justify-content: center; gap: 6px; }
.bs-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .25s cubic-bezier(.22, 1, .36, 1), background-color .25s; }
.bs-dots button[aria-current="true"] { width: 18px; background: var(--text); }

/* special games: gold, a vault wheel */
.bs-s-special { background: #ffc60b; }
.bs-vault { width: 66px; height: 66px; border-radius: 50%; border: 8px solid #0b0b0b; box-sizing: border-box; }
.bs-vault i { position: absolute; top: 50%; left: 50%; width: 6px; height: 21px; margin: -21px 0 0 -3px; border-radius: 3px; background: #0b0b0b; transform-origin: 50% 100%; }
.bs-vault i:nth-child(2) { transform: rotate(60deg); } .bs-vault i:nth-child(3) { transform: rotate(120deg); } .bs-vault i:nth-child(4) { transform: rotate(180deg); }
.bs-vault i:nth-child(5) { transform: rotate(240deg); } .bs-vault i:nth-child(6) { transform: rotate(300deg); }
/* the next night: red, four black bars */
.bs-s-night { background: #ff2a1f; }
.bs-beams { display: flex; align-items: flex-end; gap: 7px; }
.bs-beams i { width: 11px; height: 80px; border-radius: 2px; background: #0b0b0b; }
.bs-beams i:nth-child(2) { height: 54px; } .bs-beams i:nth-child(3) { height: 70px; } .bs-beams i:nth-child(4) { height: 38px; }
/* drawn from a banner image (NightForge, NightKing, the ranks) */
.bs-slide.bs-s-img { color: #fff; background: linear-gradient(0deg, rgba(5, 4, 10, .94) 8%, rgba(5, 4, 10, .35) 68%, rgba(5, 4, 10, .05)), var(--img) center / cover no-repeat #0b0b0b; }
.bs-slide.bs-s-img .bs-k { color: #8fdcff; opacity: 1; }
.bs-slide.bs-s-img .bs-go { background: #fff; color: #0b0b0b; }
/* green felt, two cards */
.bs-s-casino { background: #0f7a46; color: #fff; }
.bs-s-casino .bs-k { color: #ffd84a; opacity: 1; }
.bs-s-casino .bs-go { background: #ffc60b; color: #0b0b0b; }
.bs-felt { display: none; }
.bs-cards { width: 88px; height: 70px; }
.bs-cards i { position: absolute; top: 0; width: 48px; height: 68px; padding: 5px 6px; box-sizing: border-box; border-radius: 7px; background: #fffdf7; color: #15100a; font: 900 .95rem/1 var(--font-body); font-style: normal; }
.bs-cards i b { display: grid; place-items: center; margin-top: 6px; }
.bs-cards i:first-child { inset-inline-end: 34px; transform: rotate(-10deg); } .bs-cards i.r { inset-inline-end: 0; color: #c8102e; transform: rotate(10deg); }
/* the radio: black, a red equaliser */
.bs-s-radio { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bs-s-radio .bs-k { color: #ff8a80; opacity: 1; }
.bs-s-radio .bs-go { background: #ff2a1f; color: #fff; }
.bs-eq { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.bs-eq i { width: 5px; height: 40%; border-radius: 2px; background: #ff2a1f; }
.bs-eq i:nth-child(4n+2) { height: 90%; } .bs-eq i:nth-child(4n+3) { height: 62%; } .bs-eq i:nth-child(4n) { height: 76%; } .bs-eq i:nth-child(n+8) { display: none; }
/* the arcade: purple, the pad */
.bs-s-arcade { background: #6b2fff; color: #fff; }
.bs-s-arcade .bs-go { background: #fff; color: #0b0b0b; }
.bs-pix { display: none; }
.bs-inv { color: #fff; }
/* The History: cream, a strip of film */
.bs-s-history { background: #f3ead8; }
.bs-film { width: 150px; height: 60px; padding: 8px 6px; box-sizing: border-box; border-radius: 4px; background: #0b0b0b; transform: rotate(-8deg); bottom: 22px !important; inset-inline-end: -40px !important; }
.bs-film > span { display: flex; gap: 5px; height: 100%; overflow: hidden; }
.bs-film i { flex: none; width: 30px; border-radius: 2px; background: #ff2a1f; }
.bs-film i:nth-child(3n+2) { background: #ffc60b; } .bs-film i:nth-child(3n) { background: #0098ea; }
/* the exchange: mint, black candles */
.bs-s-crypto { background: #2ee59d; }
.bs-candles { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.bs-candles i { width: 6px; height: var(--h); border-radius: 2px; background: #0b0b0b; }
.bs-candles i:nth-child(3n) { background: none; box-shadow: inset 0 0 0 2px #0b0b0b; }
/* forex: blue, the signs */
.bs-s-forex { background: #0098ea; color: #fff; }
.bs-s-forex .bs-go { background: #fff; color: #0b0b0b; }
.bs-signs { display: flex; gap: 6px; font: 700 2rem/1 var(--font-body); }
.bs-signs i { font-style: normal; } .bs-signs i:nth-child(n+4) { display: none; }
/* stocks: navy, a line that climbs */
.bs-s-stocks { background: #10204a; color: #fff; }
.bs-s-stocks .bs-go { background: #2ee59d; color: #0b0b0b; }
.bs-chart { width: 80px; height: 50px; fill: none; stroke: #2ee59d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* USDT: tether green, the sign */
.bs-s-usdt { background: #26a17b; color: #fff; }
.bs-s-usdt .bs-go { background: #fff; color: #0b0b0b; }
.bs-tether { bottom: 4px !important; font: 800 4.6rem/1 var(--font-body); }
/* the shop: white, three stickers */
.bs-s-shop { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.bs-tee { width: 80px; height: 70px; }
.bs-tee i { position: absolute; border-radius: 50%; }
.bs-tee .s1 { top: 0; inset-inline-end: 0; width: 48px; height: 48px; background: #ffc60b; }
.bs-tee .s2 { top: 28px; inset-inline-end: 38px; width: 36px; height: 36px; background: #ff2a1f; }
.bs-tee .s3 { top: 44px; inset-inline-end: 10px; width: 26px; height: 26px; background: #0098ea; }
/* podcasts: magenta, a waveform */
.bs-s-pod { background: #ff2bd6; }
.bs-wave { display: flex; align-items: center; gap: 3px; height: 56px; }
.bs-wave i { width: 3px; height: 40%; border-radius: 2px; background: #0b0b0b; }
.bs-wave i:nth-child(5n+1) { height: 28%; } .bs-wave i:nth-child(5n+2) { height: 70%; } .bs-wave i:nth-child(5n+3) { height: 100%; } .bs-wave i:nth-child(5n+4) { height: 55%; }
.bs-wave i:nth-child(n+15) { display: none; }
/* artists: orange, a record */
.bs-s-artists { background: #ff7a3d; }
.bs-vinyl { width: 68px; height: 68px; border-radius: 50%; background: repeating-radial-gradient(circle, #0b0b0b 0 3px, #262626 3px 4px); }
.bs-vinyl i { position: absolute; inset: 23px; border-radius: 50%; background: #ffc60b; }
/* badges: lilac, a star */
.bs-s-badges { background: #b9a7ff; }
.bs-medal { color: #0b0b0b; }
/* rides: teal, the car */
.bs-s-rides { background: #33d6c6; }
.bs-road { color: #0b0b0b; }
.bs-road .car { display: block; font-style: normal; }
.bs-road .car svg { width: 50px; height: 50px; }
/* invite: rose, two of you and a plus */
.bs-s-invite { background: #ff8fb1; }
.bs-pair { width: 80px; height: 46px; }
.bs-pair i { position: absolute; top: 0; width: 46px; height: 46px; border-radius: 50%; background: #0b0b0b; }
.bs-pair i:first-child { inset-inline-end: 34px; } .bs-pair i:nth-child(2) { inset-inline-end: 0; background: #fff; }
.bs-pair b { position: absolute; top: 11px; inset-inline-end: 28px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffc60b; color: #0b0b0b; }
/* buy chips: deep red, a stack */
.bs-s-chips { background: #8a0f1f; color: #ffd84a; }
.bs-s-chips .bs-go { background: #ffc60b; color: #0b0b0b; }
.bs-stack { width: 56px; height: 76px; }
.bs-stack i { position: absolute; left: 0; width: 56px; height: 18px; border-radius: 50%; background: #c8102e; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .85), 0 4px 0 #4a0710; }
.bs-stack i:nth-child(1) { bottom: 0; } .bs-stack i:nth-child(2) { bottom: 12px; background: #111; }
.bs-stack i:nth-child(3) { bottom: 24px; background: #1f7a4a; } .bs-stack i:nth-child(4) { bottom: 36px; background: #b8860b; } .bs-stack i:nth-child(5) { bottom: 48px; background: #6b2fb3; }

/* find a page, then every page in four groups */
.bs-find { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--bg-raise); color: var(--muted); cursor: text; }
.bs-find:focus-within { box-shadow: 0 0 0 2px var(--line-strong); color: var(--text); }
.bs-find input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: none; color: var(--text); font: 500 16px var(--font-body); outline: none; }
.bs-find input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.bs-nav { display: grid; gap: 18px; }
.bs-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font: 700 .86rem var(--font-body); color: var(--text); }
.bs-grp h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--g); }
.bs-grp[hidden] { display: none; }
.bs-g-games { --g: #ff2a1f; } .bs-g-money { --g: #2ee59d; } .bs-g-club { --g: #ffc60b; } .bs-g-help { --g: #33d6c6; }
.bs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
.bs-grid a { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 2px; color: var(--text); text-decoration: none;
  font: 600 .74rem/1.2 var(--font-body); text-align: center; overflow-wrap: break-word; transition: transform .15s cubic-bezier(.22, 1, .36, 1); }
.bs-grid a svg { box-sizing: content-box; padding: 14px; border-radius: 16px; background: var(--g, var(--bg-raise)); color: #0b0b0b; }
.bs-grid a[hidden] { display: none; }
.bs-grid a:active { transform: scale(.93); }
.bs-grid a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 16px; }
@media (min-width: 360px) {
  .bs-grid:has(> :nth-child(5):last-child), .bs-grid:has(> :nth-child(9):last-child), .bs-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bs-grid:has(> :nth-child(5):last-child) a, .bs-grid:has(> :nth-child(9):last-child) a, .bs-grid:has(> :nth-child(10):last-child) a { font-size: .7rem; }
  .bs-grid:has(> :nth-child(5):last-child) a svg, .bs-grid:has(> :nth-child(9):last-child) a svg, .bs-grid:has(> :nth-child(10):last-child) a svg { padding: 12px; }
}
.bs-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-none { margin: 4px 2px 0; color: var(--text-dim); font-size: .9rem; }
body.bs-lock { overflow: hidden; }
@media (min-width: 901px) { .bs-panel { width: 100%; max-width: 520px; margin: 0 auto; } }
@media (max-width: 370px) { .bs-slide { flex-basis: 90%; } .bs-menu span { display: none; } .bs-menu { width: 38px; padding: 0; justify-content: center; } }

/* ---------- A page that did not load (nav.js) ----------------------------
   Shown in the page area, inside the app: the header, the bottom bar and the
   player stay. A gold mark, a big line, and the way forward. */
.nav-err { display: grid; justify-items: start; gap: 14px; max-width: 560px; margin: clamp(24px, 8vh, 80px) 0; }
.nav-err-mark { width: 54px; height: 54px; border-radius: 16px; background: #ffc60b; display: grid; place-items: center; }
.nav-err-mark::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 4px solid #0b0b0b; border-right-color: transparent; }
.nav-err[data-kind="offline"] .nav-err-mark { background: #ff8fb1; }
.nav-err[data-kind="server"] .nav-err-mark, .nav-err[data-kind="missing"] .nav-err-mark { background: #ff2a1f; }
.nav-err-h { margin: 0; font: 400 clamp(2rem, 7vw, 3.4rem)/.95 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.nav-err-p { margin: 0; max-width: 40ch; font: 500 1rem/1.55 var(--font-body); color: var(--text-dim); }
.nav-err-ref { display: inline-flex; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 10px; background: var(--bg-raise); font: 600 .82rem var(--font-body); color: var(--muted); }
.nav-err-ref b { font-family: var(--font-mono); letter-spacing: .14em; color: var(--text); direction: ltr; }
.nav-err-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nav-err-go, .nav-err-alt { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 700 .95rem/1 var(--font-body); transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.nav-err-go { border: 0; background: #ffc60b; color: #0b0b0b; }
.nav-err-alt { border: 1px solid var(--line-strong); background: none; color: var(--text); }
.nav-err-go:active, .nav-err-alt:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .nav-err-go, .nav-err-alt { transition: none; } }

/* ---------- The admin sidebar: eleven groups that fold ------------------- */
.ax-nav .ax-group { margin: 0 0 2px; }
.ax-group-label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; border-radius: 10px; list-style: none; cursor: pointer; user-select: none;
  font: 700 .86rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.ax-group-label::-webkit-details-marker { display: none; }
.ax-group-label:hover { background: var(--wash-2); }
.ax-group-label > span { flex: 1; min-width: 0; }
.ax-g-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--g, var(--bg-raise)); color: #0b0b0b; }
.ax-g-chev { display: grid; flex: none; color: var(--muted); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.ax-group[open] > .ax-group-label .ax-g-chev { transform: rotate(180deg); }
.ax-group[open] > .ax-group-label > .ax-badge { display: none; }
.ax-g-links { display: grid; margin: 2px 0 8px; padding-inline-start: 10px; margin-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.ax-g-links .ax-link { padding: 7px 10px; border-left: 0; border-radius: 8px; font-size: .85rem; }
.ax-g-links .ax-link.on { background: var(--wash-3); box-shadow: inset 3px 0 0 var(--g, #ffc60b); }
:root[dir="rtl"] .ax-g-links .ax-link.on { box-shadow: inset -3px 0 0 var(--g, #ffc60b); }
.ax-g-links .ax-link.on .icon { color: var(--text); }
.ax-g-today { --g: #ff2a1f; } .ax-g-people { --g: #33d6c6; } .ax-g-night { --g: #ffc60b; } .ax-g-money { --g: #2ee59d; }
.ax-g-crypto { --g: #0098ea; } .ax-g-shop { --g: #f3ead8; } .ax-g-games { --g: #b9a7ff; } .ax-g-media { --g: #ff2bd6; }
.ax-g-messages { --g: #ff8fb1; } .ax-g-studio { --g: #ff7a3d; } .ax-g-system { --g: #c8c6b8; }

/* Farsi: the display face's taller forms need room between lines */
:root[lang="fa"] .mm-links .lbl, :root[lang="fa"] .mm-b > b, :root[lang="fa"] .bs-h { line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .bs-panel, .bs-scrim, .ax-g-chev, .mm-links a { transition: none; }
}