/* PANJGOOSHEH · the member pages: the home, the hub, Nights, Profile, the
 * wallet, staking and the shop share these pieces so they read as one app.
 *
 * A page opens on a head (a small line, then a big title or the member's
 * name, then a row of chips), then a bento of boxes that shows what matters
 * at a glance, then sections, one after another. Boxes are flat fields of
 * colour; titles and big numbers are in the display face, everything else
 * in the body face. Nothing moves by itself; things that can be pressed
 * shrink a little while held. */

/* a raised surface that reads on the dark ground (the site's --bg-raise is a hair off it) */
:root { --mb-raise: color-mix(in srgb, var(--text) 7%, var(--bg)); }

.mb { display: grid; gap: clamp(22px, 3vw, 36px); min-width: 0; padding-bottom: 14px; }
:where(.mb) a { color: inherit; }

/* ---- the head ---- */
.mb-head { display: grid; gap: 12px; min-width: 0; padding-top: 4px; }
.mb-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 700 .9rem var(--font-body); color: var(--muted); }
.mb-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2ee59d; }
.mb-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; min-width: 0; }
.mb-name, .mb-title { margin: 0; min-width: 0; font: 400 clamp(2.6rem, 7.4vw, 4.6rem)/.88 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.mb-sub { margin: 0; max-width: 60ch; font: 500 1rem/1.55 var(--font-body); color: var(--text-dim); }
.mb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--mb-raise); color: var(--text-dim) !important;
  font: 600 .84rem var(--font-body); text-decoration: none; transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.mb-chip b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
a.mb-chip:active { transform: scale(.96); }

/* ---- buttons ---- */
.mb-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 17px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 700 .9rem/1.1 var(--font-body); white-space: nowrap; transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.mb-btn:active { transform: scale(.96); }
.mb-btn:disabled { opacity: .55; cursor: default; transform: none; }
.mb-btn.is-gold { background: #ffc60b; color: #0b0b0b !important; }
.mb-btn.is-dark { background: #0b0b0b; color: #fff !important; }
.mb-btn.is-light { background: #fff; color: #0b0b0b !important; }
.mb-btn.is-ice { background: #8fdcff; color: #04202e !important; }
.mb-btn.is-line { border: 1px solid var(--line-strong); background: none; color: var(--text) !important; }
.mb-btn.is-ghost { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: none; color: inherit !important; }
.mb-more { flex: none; padding: 0; border: 0; background: none; font: 700 .86rem var(--font-body); color: var(--muted) !important; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mb-more:hover { color: var(--text) !important; }

/* ---- the bento ---- */
.mb-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
@media (max-width: 1100px) { .mb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.mb-box { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px;
  border-radius: 22px; background: var(--mb-raise); color: var(--text); text-decoration: none; container-type: inline-size; }
a.mb-box, .mb-box-main { transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
a.mb-box:active { transform: scale(.985); }
.mb-box-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; color: inherit; }
.mb-box-k { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font: 700 .82rem/1.3 var(--font-body); opacity: .82; }
.mb-box-k img { flex: none; }
.mb-box-n { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 400 clamp(1.5rem, 13cqi, 2.7rem)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-box-n b { overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.mb-box-n small { flex: none; font: 700 .8rem var(--font-body); opacity: .72; }
.mb-box-h { font: 400 clamp(1.05rem, 9.5cqi, 3rem)/.92 var(--font-display); text-transform: uppercase; }
.mb-box-s { margin: 0; font: 500 .86rem/1.45 var(--font-body); opacity: .82; }
.mb-box-s b { font-weight: 800; }
.mb-box-s .up { color: #0c7a3e; } .mb-box-s .dn { color: #b3121f; }
.mb-box-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; }
.mb-box .mb-btn { min-height: 40px; max-width: 100%; padding: 0 14px; font-size: .84rem; }
@media (max-width: 560px) { .mb-box .mb-btn { white-space: normal; text-align: center; padding: 8px 12px; } }
.mb-lines { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.mb-lines li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font: 600 .84rem var(--font-body); }
.mb-lines li > a { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; text-decoration: none; }
.mb-lines li span:first-child, .mb-lines li > a > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mb-lines b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; text-align: end; }
.mb-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mb-stats > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 600 .76rem var(--font-body); }
.mb-stats b { font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-mark { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* the box colours: each a flat field, with its own ink */
.mb-t-mint { background: #2ee59d; color: #0b0b0b; }
.mb-t-gold { background: #ffc60b; color: #0b0b0b; }
.mb-t-night { background: #0d1a3d; color: #e8f3ff; }
.mb-t-night .mb-box-k { color: #8fdcff; opacity: 1; }
.mb-t-black { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mb-t-black .mb-box-k { color: #ff8a80; opacity: 1; }
.mb-t-violet { background: #6b2fff; color: #fff; }
.mb-t-red { background: #ff2a1f; color: #0b0b0b; }
.mb-t-cream { background: #f3ead8; color: #0b0b0b; }
.mb-t-pink { background: #ff8fb1; color: #0b0b0b; }
.mb-t-blue { background: #0098ea; color: #fff; }
.mb-t-teal { background: #33d6c6; color: #0b0b0b; }

/* ---- sections ---- */
.mb-sec { display: grid; gap: 12px; min-width: 0; }
.mb-sec-hd { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 14px; min-width: 0; }
.mb-sec-h { margin: 0; min-width: 0; font: 400 clamp(1.6rem, 3.6vw, 2.6rem)/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.mb-sec-p { margin: -4px 0 0; max-width: 62ch; font: 500 .95rem/1.55 var(--font-body); color: var(--text-dim); }
.mb-card { min-width: 0; padding: 16px 18px; border-radius: 20px; background: var(--mb-raise); }
.mb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.mb-cards .mb-card > b { display: block; margin-bottom: 6px; font: 800 1rem var(--font-body); }
.mb-cards .mb-card > p { margin: 0; color: var(--text-dim); line-height: 1.55; }

/* ---- every place one tap away ---- */
.mb-dock { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.mb-dock > a, .mb-dock > button { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 84px; padding: 8px 4px; border: 0; border-radius: 18px;
  background: var(--mb-raise); color: var(--text); text-decoration: none; font: 600 .78rem/1.2 var(--font-body); text-align: center; cursor: pointer;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.mb-dock > a:active, .mb-dock > button:active { transform: scale(.95); }
.mb-dock svg { color: var(--text-dim); }
@media (max-width: 900px) { .mb-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .mb-dock > a, .mb-dock > button { min-height: 72px; font-size: .72rem; } }

/* ---- the next night (_night_hero.html): the flyer whole and large, the night beside it ---- */
.nh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 3.2vw, 48px); padding: clamp(12px, 1.6vw, 18px); }
.nh.is-in { box-shadow: inset 0 0 0 2px #2ee59d; }
.nh-flyer { position: relative; display: block; justify-self: start; line-height: 0; border-radius: 16px; overflow: hidden; background: #000; transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.nh-flyer:active { transform: scale(.99); }
.nh-flyer .fm { position: relative; display: block; }
.nh-flyer img, .nh-flyer .fm-img { display: block; width: auto; height: auto; max-width: min(40vw, 460px); max-height: clamp(380px, 64vh, 580px); }
.nh-t { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 6px 4px; container-type: inline-size; }
.nh-k { display: flex; align-items: center; gap: 7px; margin: 0; font: 700 .92rem var(--font-body); color: #ffc60b; }
.nh.is-in .nh-k { color: #2ee59d; }
.nh-h { margin: 0; font: 400 clamp(2rem, 11cqi, 5.2rem)/.88 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.nh-h small { display: block; margin-top: .3em; font: 800 clamp(1rem, 3.4cqi, 1.5rem)/1.2 var(--font-body); color: #ffc60b; text-transform: none; letter-spacing: 0; }
.nh-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 700 .92rem var(--font-body); color: var(--text-dim); }
.nh-when b { font: 800 clamp(1.3rem, 4.4cqi, 2rem)/1.1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.nh-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; max-width: 640px; }
.nh-facts > div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.nh-facts dt { font: 600 .8rem var(--font-body); color: var(--muted); }
.nh-facts dd { margin: 0; font: 700 .95rem/1.35 var(--font-body); overflow-wrap: break-word; }
.nh-invite { margin: 0; max-width: 52ch; font: 500 1rem/1.55 var(--font-body); color: var(--text-dim); }
.nh-lineup { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.nh-lineup span { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font: 700 .82rem var(--font-body); }
.nh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.nh-acts .mb-btn { min-height: 50px; padding: 0 22px; font-size: .95rem; }
@media (max-width: 760px) {
  .nh { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px; }
  .nh-flyer { justify-self: stretch; }
  .nh-flyer img, .nh-flyer .fm-img { width: 100%; max-width: none; max-height: none; }
  .nh-t { padding: 2px 6px 6px; gap: 12px; }
  .nh-h { font-size: clamp(1.7rem, 10cqi, 3rem); }
  .nh-acts .mb-btn { flex: 1 1 auto; justify-content: center; }
}
:root[lang="fa"] .nh-h { line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .nh-flyer { transition: none; } }

/* ---- VJ 3D, the app: violet, a coin and three windows that hold still (_vj_box.html) ---- */
.mb-vj { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: clamp(16px, 2.4vw, 26px); }
.mb-vj-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mb-vj-p { max-width: 62ch; }
.mb-tag { padding: 2px 8px; border-radius: 999px; background: #fff; color: #2a0f6b; font: 800 .66rem/1.4 var(--font-body); font-style: normal; text-transform: uppercase; }
.mb-vj-art { position: relative; width: 210px; height: 170px; flex: none; }
.mb-vj-art img { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.mb-vj-art i { position: absolute; width: 96px; height: 64px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); }
.mb-vj-art .w1 { left: 0; top: 10px; transform: rotate(-10deg); } .mb-vj-art .w2 { right: 0; top: 0; transform: rotate(8deg); border-color: #ffc60b; }
.mb-vj-art .w3 { right: 18px; bottom: 0; transform: rotate(-4deg); border-color: #33d6c6; }
.mb-days { font: 700 .84rem var(--font-body); color: rgba(255, 255, 255, .8); }
@media (max-width: 720px) {
  .mb-vj { grid-template-columns: minmax(0, 1fr); }
  .mb-vj-art { display: none; }
  .mb-vj-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}

/* Farsi: the display face's taller forms need room between lines */
:root[lang="fa"] .mb-name, :root[lang="fa"] .mb-title, :root[lang="fa"] .mb-sec-h, :root[lang="fa"] .mb-box-h, :root[lang="fa"] .mb-box-n { line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .mb-btn, .mb-chip, .mb-box-main, a.mb-box, .mb-dock > a, .mb-dock > button { transition: none; } }