/* Theme: cinematic (Billie) x static / anti-pop (Radiohead). Black, gold, purple. */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-400-normal.woff2) format("woff2"); }

:root {
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --hand: "Space Mono", ui-monospace, monospace;
  --line: #262328;
  --bg: #060507;
  --bg-2: #0d0b10;
  --bg-3: #16131a;
}
body { background: var(--bg); }
body::before { background: radial-gradient(50% 35% at 90% 0%, rgba(155,92,255,.16), transparent 70%); }
/* global film grain + faint scanlines */
body::after { opacity: .09; }
.fx-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.fx-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ticker + nav */
.ticker { background: #000; color: var(--ink); border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ticker .sl { color: var(--purple); }
.nav { border-bottom: 1px solid var(--line); padding-top: 14px; padding-bottom: 14px; }
.logo { font: 400 24px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.logo i { font: 400 24px var(--display); color: var(--gold); }
.chip { border-radius: 0; border-color: #4a4452; font: 700 11px var(--mono); letter-spacing: .12em; }
.chip.solid { background: var(--gold); }

/* buttons: square, mono */
.btn { border-radius: 0; min-height: 50px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: none !important; }
.btn.gold { background: var(--gold); color: #0b0800; }
.btn.gold:hover { background: var(--gold-2); filter: none; }
.btn.ghost { border: 1px solid #d9d2c4; }
.btn.purple { background: var(--purple); }

/* kicker = bracketed mono label */
.kicker { background: none; border: 0; padding: 0; border-radius: 0; color: var(--ink); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.kicker::before { display: none; }

/* HERO */
.hx { min-height: min(94svh, 900px); justify-content: flex-end; }
.hx-photo { width: 74%; background-position: 50% 30%; filter: contrast(1.08) saturate(.85); }
.hx-shade { background: linear-gradient(90deg, var(--bg) 22%, rgba(6,5,7,.7) 45%, rgba(6,5,7,0) 72%), linear-gradient(0deg, var(--bg) 4%, rgba(6,5,7,.2) 38%, rgba(6,5,7,0) 60%), radial-gradient(45% 45% at 88% 12%, rgba(155,92,255,.4), transparent 70%); }
.hx-inner { padding-top: 64px; padding-bottom: 8px; z-index: 4; }
.hx-lyric { font: 700 clamp(22px, 2.8vw, 36px)/1.25 var(--mono); letter-spacing: -.02em; margin: 22px 0 16px; text-transform: lowercase; }
.hx-lyric span { color: var(--gold); }
.hx .lede { font-size: 16px; color: #cfc8d6; max-width: 460px; }
.hx h1.hx-word { max-width: none; position: relative; z-index: 4; margin: 10px 0 0; padding: 0 12px 6px; font: 400 clamp(96px, 16.5vw, 250px)/.86 var(--display); overflow: hidden; text-transform: uppercase; letter-spacing: -.005em; color: #efe8d8; white-space: nowrap; filter: url(#rough); }
.hx h1.hx-word span { color: var(--gold); }
.hx-count { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: 4; }
.hx-count-in { display: grid; grid-template-columns: auto 1fr auto; gap: 0; padding: 0; align-items: stretch; max-width: none; }
.hx-count .cell { padding: 18px 24px; border-right: 1px solid var(--line); }
.hx-count .cell:last-child { border-right: 0; }
.hx-count .cell.btns { display: flex; gap: 8px; align-items: center; }
.lbl { display: block; font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8a8478; margin-bottom: 8px; }
.hx-n { font: 400 64px/.9 var(--display); color: var(--gold); letter-spacing: .01em; text-shadow: 0 0 30px rgba(233,196,106,.25); white-space: nowrap; }
.hx-n small { font-size: .42em; color: #5b5346; margin-left: 6px; }
.bar.big { height: 14px; border-radius: 0; background: repeating-linear-gradient(90deg, #1b1820 0 10px, transparent 10px 13px); }
.bar.big > i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--purple) 0 10px, transparent 10px 13px); box-shadow: none; min-width: 10px; }
.ticks i { background: rgba(233,196,106,.6); width: 1px; }
.hx-msg { font: 400 13px/1.5 var(--mono); color: #d9d2c4; margin-top: 12px; }
.hx .next { font: 400 12px var(--mono); }

/* section heads */
section { padding: 72px 0; }
h2 { font: 400 clamp(56px, 9vw, 120px)/.86 var(--display); letter-spacing: 0; text-transform: uppercase; }
h2 .hand { font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-2); transform: none; margin-top: 14px; }
.head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 0; }
.head p { font: 400 13px/1.5 var(--mono); }

/* tracklist = table rows */
.tracks { gap: 0; }
.track { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 20px 0; box-shadow: none; transform: none !important; }
.track:hover { border-color: var(--line); background: linear-gradient(90deg, rgba(155,92,255,.06), transparent 60%); }
.track.playing { border-color: var(--line); box-shadow: none; background: linear-gradient(90deg, rgba(233,196,106,.08), transparent 60%); }
.track.playing .meta .title { color: var(--gold); }
.play { width: 56px; height: 56px; border-radius: 0; background: var(--gold); }
.play.preview { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.play.locked { background: transparent; box-shadow: inset 0 0 0 1px #3a3540; }
.meta .num { font: 400 10px var(--mono); letter-spacing: .16em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.meta .num .hot { margin-left: auto; }
.meta .title { font: 400 clamp(32px, 4vw, 48px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 4px 0 6px; }
.meta .lyric { font: 400 13px/1.4 var(--mono); color: #a89fb2; }
.meta .stats { font: 400 11px var(--mono); justify-content: flex-end; text-align: right; min-height: 1.6em; align-items: center; gap: 4px 12px; }
.meta .stats > span { white-space: nowrap; }
.listening.idle { color: var(--muted); }
.listening.idle::before { background: #5c5464; box-shadow: none; animation: none; }
@media (max-width: 380px) { .meta .stats { font-size: 10px; gap: 4px 10px; } }
.small-btn { border-radius: 0; font: 400 11px var(--mono); letter-spacing: .14em; border-color: #4a4452; }
.small-btn.on { background: var(--purple); border-color: var(--purple); }
.progress { border-radius: 0; height: 4px; }
.progress i { border-radius: 0; }

/* panels, cards, modals: hard edges */
.panel, .fancard, .modal, .drawer, .compose, .tasks button, .ladder li, .lb li, .soc, .share-link input, .share-row a, .share-row button, input[type=text], input[type=email], input[type=tel], select, textarea, .oauth button, .q, .tile, .chart, .tbl { border-radius: 0 !important; }
.panel { background: var(--bg-2); border-color: var(--line); }
.fancard { background: #000; border: 1px solid var(--gold-deep); }
.fancard .name { font: 400 44px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.fancard .badge { border-radius: 0; font: 400 10px var(--mono); }
.nums div { border-radius: 0; background: #0d0b10; border: 1px solid var(--line); }
.nums b { font: 400 40px/1 var(--display); }
.panel h3, .modal h3, .drawer-head h3 { font: 400 32px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.drawer-head h3 { font-size: 48px; }
.lb li { background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.lb li::before { font: 400 28px var(--display); }
.lb .n { font: 400 22px var(--display); text-transform: uppercase; letter-spacing: .01em; }

/* studio diary: hard-cut film frames with grain */
.shot { border-radius: 0; flex-basis: 260px; }
.shot::after { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.85)), repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.shot img { filter: contrast(1.06) saturate(.85); }
.shot span { font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* letter */
.diary { border-radius: 0; background: #000; border: 1px solid var(--line); border-left: 3px solid var(--gold); text-align: left; }
.diary::before { display: none; }
.diary h3 { font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-2); }
.diary p { font: 400 clamp(17px, 2vw, 22px)/1.55 var(--mono); letter-spacing: -.01em; text-transform: none; }
.diary p:last-child { color: var(--gold); font-size: 13px; }

/* socials grid */
.socials { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.soc { background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; font: 400 20px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.soc small { font: 400 10px var(--mono); letter-spacing: .14em; }
.soc:hover { background: rgba(233,196,106,.06); }

footer { border-top: 1px solid var(--line); }
.toast { border-radius: 0; background: var(--gold); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.banner { border-radius: 0; }

@media (max-width: 800px) {
  .hx-photo { width: 100%; height: 70vw; }
  .hx-inner { margin-top: -40px; }
  .hx h1.hx-word { font-size: 23vw; white-space: normal; line-height: .84; margin-top: 18px; }
  .hx-count-in { grid-template-columns: 1fr; }
  .hx-count .cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .hx-count .cell.btns { flex-direction: column; align-items: stretch; }
  .hx-n { font-size: 54px; }
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soc small { display: none; }
  .soc { font-size: 17px; }
}

/* banner slideshow: one slide per song */
.hx-slides { position: absolute; top: 0; bottom: 0; right: 0; width: 74%; }
.hx-slides .hx-photo { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity 1.1s ease, transform 8s ease; transform: scale(1.04); }
.hx-slides .hx-photo.on { opacity: 1; transform: scale(1); }
.hx-text { min-height: 150px; }
.hx-text.swap { animation: hxIn .7s ease; }
@keyframes hxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hx-tabs { display: flex; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); max-width: 640px; }
.hx-tabs button { flex: 1; background: none; border: 0; color: #8a8478; font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 12px 10px 4px 0; cursor: pointer; position: relative; }
.hx-tabs button b { display: block; color: var(--muted); font-weight: 400; margin-bottom: 2px; }
.hx-tabs button::before { content: ""; position: absolute; left: 0; right: 10px; top: -1px; height: 2px; background: transparent; }
.hx-tabs button.on { color: var(--ink); }
.hx-tabs button.on b { color: var(--gold); }
.hx-tabs button.on::before { background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(233,196,106,.25) var(--p, 0%)); }
.hx-tabs button:hover { color: var(--ink); }
@media (max-width: 800px) {
  .hx-slides { position: relative; width: 100%; height: 70vw; min-height: 300px; order: -1; }
  .hx-slides .hx-photo { height: 100%; min-height: 0; }
  .hx-tabs { overflow-x: auto; }
  .hx-tabs button { flex: 0 0 auto; min-width: 92px; }
  .hx-text { min-height: 130px; }
  /* the song's name over the photo, bottom left (John, 13 Oct); not repeated in the line under it */
  .hx-slides .hx-name { display: block; position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; font: 400 clamp(34px, 10vw, 56px)/.95 Anton, Impact, sans-serif;
             text-transform: uppercase; letter-spacing: .01em; color: #efe8d8; text-shadow: 0 2px 18px rgba(0,0,0,.65); pointer-events: none; overflow-wrap: anywhere; }
  .hx-slides .hx-name.swap { animation: hxName .6s ease both; }
  .hx-slides::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(6,5,7,.7), rgba(6,5,7,0)); }
  .hx-text .k-song { display: none; }
}
.hx-name { display: none; }
@keyframes hxName { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-slides .hx-photo { transition: none; transform: none; } .hx-text.swap { animation: none; } }
.hx-inner { min-width: 0; max-width: 100%; }
.hx-tabs { max-width: min(640px, 100%); }
@media (max-width: 800px) { .hx-inner { width: 100%; } .hx .lede { max-width: 100%; } }


/* press */
.press { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.pq { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 170px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.pq:hover { background: rgba(155,92,255,.08); }
.pq q { font: 400 17px/1.4 var(--mono); color: var(--ink); quotes: "\201C" "\201D"; }
.pq .pa { font: 400 17px/1.4 var(--mono); color: var(--ink); }
.pq b { font: 400 30px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--gold); }
@media (max-width: 900px) { .press { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .press { grid-template-columns: 1fr; } .pq { min-height: 0; } }

.letter-cta { margin-top: 18px; }
.phone-row { display: flex; gap: 8px; }
.phone-row select { flex: 0 0 44%; min-width: 0; }
.phone-row input { flex: 1; min-width: 0; }
.explicit { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 10px; vertical-align: middle; border-radius: 3px; background: #b9b0a0; color: #0b0a0c; font: 700 11px/1 var(--mono, monospace); }
.made-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.made-card h3 { font: 400 clamp(30px, 4vw, 44px)/1 var(--display, Anton, sans-serif); text-transform: uppercase; letter-spacing: .01em; margin: 6px 0 12px; color: #efe8d8; }
.made-kick { font: 400 12px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #e9c46a); margin: 0; }
@media (max-width: 760px) { .made-grid { grid-template-columns: 1fr; } }

/* ---------- glass dialogs (modern) ---------- */
.overlay { background: radial-gradient(120% 90% at 50% 0%, rgba(155,92,255,.18), rgba(6,5,7,.55) 60%); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.overlay:not(.hidden) .modal { animation: nb-pop .32s cubic-bezier(.22,1,.36,1); }
.overlay:not(.hidden) .drawer { animation: nb-slide .38s cubic-bezier(.22,1,.36,1); }
@keyframes nb-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nb-slide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.modal, .drawer {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 40%, rgba(155,92,255,.06)) , rgba(16,13,22,.62) !important;
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 40px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(155,92,255,.12);
}
.modal { border-radius: 24px !important; padding: 28px; }
.drawer { border-radius: 24px 0 0 24px !important; border-right: 0 !important; }
.drawer-head { border-bottom-color: rgba(255,255,255,.08); }
.x { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #efe8d8; backdrop-filter: blur(8px); transition: background .2s; }
.x:hover { background: rgba(255,255,255,.14); }
.modal input[type=text], .modal input[type=email], .modal input[type=tel], .modal select, .drawer textarea, .drawer input[type=text], .cc {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; color: #efe8d8;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.modal input:focus, .modal select:focus, .drawer textarea:focus, .cc:focus-within { outline: none; border-color: rgba(155,92,255,.7) !important; box-shadow: 0 0 0 3px rgba(155,92,255,.22); background: rgba(255,255,255,.09) !important; }
.modal .btn, .drawer .btn { border-radius: 14px !important; }
.modal .steps i { border-radius: 99px; }
/* phone: compact country code */
.phone-row { display: flex; gap: 8px; }
.phone-row .cc { position: relative; flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; padding: 0 30px 0 12px; font: 700 14px var(--mono); white-space: nowrap; cursor: pointer; }
.phone-row .cc::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #b7ae9c; border-bottom: 1.5px solid #b7ae9c; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.phone-row .cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0 !important; background: transparent !important; }
.phone-row input { flex: 1; min-width: 0; }
/* logo in the nav */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 34px; height: 34px; display: block; }

/* brush wordmark (matches the logo and intro) */
.logo-word { height: 24px; width: auto; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hx h1.hx-word.hx-brush { filter: none; overflow: visible; white-space: normal; padding: 0 12px 14px; line-height: 0; }
.hx-wm { display: block; width: min(100%, 1500px); height: auto; }
@media (max-width: 700px) { .hx-wm { width: min(100%, 420px); } .logo-word { height: 18px; } }

/* ∴ — the site mark: on the i of Nandi, and before every section title */
:root { --therefore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 36'%3E%3Cg fill='%23E9C46A'%3E%3Ccircle cx='21' cy='6' r='5.6'/%3E%3Ccircle cx='7' cy='30.2' r='5.6'/%3E%3Ccircle cx='35' cy='30.2' r='5.6'/%3E%3C/g%3E%3C/svg%3E"); }
.ti { position: relative; display: inline-block; }
.ti::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: .34em; height: .29em; margin-bottom: .06em; transform: translateX(-50%); background: var(--therefore) center / contain no-repeat; }
.hx h1.hx-word { overflow: visible; padding-top: .3em; }
.hx h1.hx-word span.ti { color: inherit; }
.logo { padding-top: .3em; }
.logo .ti::before { width: .4em; height: .34em; }
.ticker .sl { color: var(--gold); }

/* hero: one name only (in the nav); single release target */
.hx-count .hx-ask { margin: 6px 0 0; font: 600 15px/1.4 var(--body, "DM Sans"), sans-serif; color: var(--gold); }

/* ∴ as a full stop at the end of the name and every section title */
.tf { display: inline-block; width: .42em; height: .36em; margin-left: .1em; vertical-align: baseline; background: var(--therefore) center / contain no-repeat; }
.logo .tf { width: .5em; height: .43em; }
.logo { padding-top: .3em; }
.logo { display: inline-block; gap: 0; }
.logo .tf { margin-left: .08em; }
.logo { padding-top: 0; }

/* points v2: share buttons, reward progress */
.fancard .nums small { display: block; font: 400 11px var(--mono); color: var(--muted); margin-top: 2px; }
.share-row a small, .share-row button small { margin-left: 6px; font: 400 10px var(--mono); color: var(--gold); }
#rewardNext .bar { height: 8px; background: rgba(239,232,216,.08); border-radius: 4px; overflow: hidden; margin: 6px 0 6px; }
#rewardNext .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); }
.share-row { grid-template-columns: repeat(3, 1fr) !important; }

/* waveform seek bar + play all */
.wave { grid-column: 2 / -1; position: relative; height: 40px; cursor: pointer; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave svg.base rect { fill: rgba(155,92,255,.35); }
.wave-on { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.wave svg.on rect { fill: var(--gold); }
.wave.off { cursor: default; opacity: .35; }
.track.playing .wave svg.base rect { fill: rgba(155,92,255,.6); }
#playAll { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
#playAll svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .wave { grid-column: 1 / -1; } }

/* back office: map + split tables */
.map { border: 1px solid var(--line); background: #0a090c; margin-bottom: 14px; }
.map svg { display: block; width: 100%; height: auto; }
.map .empty { padding: 30px; text-align: center; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .split2 { grid-template-columns: 1fr; } }

/* back office tabs */
.dtabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; padding: 10px 0; margin-bottom: 8px; background: rgba(6,5,7,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; }
.dtabs button { font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid transparent; padding: 10px 16px; cursor: pointer; white-space: nowrap; }
.dtabs button[aria-selected="true"] { color: var(--gold); border-color: var(--gold); }
.dtabs #modCount:not(:empty) { display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px; background: var(--purple); color: #fff; font-size: 10px; letter-spacing: 0; }

/* listening depth curves */
.depth { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dsong { border: 1px solid var(--line); padding: 14px; background: rgba(0,0,0,.25); }
.dsong > b { display: block; font: 400 20px var(--display); text-transform: uppercase; margin-bottom: 8px; }
.drow { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; align-items: end; margin-top: 8px; }
.drow > span { font: 400 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drow > small { grid-column: 2; font: 400 11px var(--mono); color: var(--muted); }
.curve { height: 48px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; align-items: end; border-bottom: 1px solid var(--line); }
.curve i { display: block; background: var(--gold); }
.curve.prev i { background: var(--purple); }

/* ---------- From Nandi feed ---------- */
.nfeed { display: grid; gap: 14px; max-width: 720px; }
.npost { border: 1px solid var(--line); background: rgba(14,12,17,.7); padding: 18px 18px 14px; }
.npost.pinned { border-color: var(--gold); }
.npost.prompt { border-left: 3px solid var(--purple); }
.ntop { display: flex; align-items: center; gap: 10px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ntop b { font: 400 18px var(--display); letter-spacing: .02em; color: var(--bone, #EFE8D8); }
.ntop time { margin-left: auto; }
.ntop .pin, .ntop .tagq { color: var(--gold); border: 1px solid currentColor; padding: 2px 6px; }
.ntop .tagq { color: var(--purple-2, #b58cff); }
.nbody { margin: 10px 0 12px; font-size: 17px; line-height: 1.5; }
.npost img { display: block; width: 100%; max-height: 520px; object-fit: cover; margin-bottom: 12px; }
.npost audio { width: 100%; margin-bottom: 12px; }
.nacts { display: flex; flex-wrap: wrap; gap: 8px; }
.poll { display: grid; gap: 8px; margin-bottom: 12px; }
.poll .opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid #4a4152; background: rgba(0,0,0,.3); color: inherit; font: 600 14px var(--body); cursor: pointer; text-align: left; overflow: hidden; }
.poll .opt i { position: absolute; inset: 0 auto 0 0; background: rgba(155,92,255,.28); }
.poll .opt.mine { border-color: var(--gold); }
.poll .opt.mine i { background: rgba(233,196,106,.25); }
.poll .opt span, .poll .opt b { position: relative; }
.poll .opt b { font: 400 13px var(--mono); color: var(--gold); }

/* ---------- Gigs ---------- */
.gigs { display: grid; gap: 12px; }
.gig { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); background: rgba(14,12,17,.7); padding: 16px 18px; }
.gig.cancelled { opacity: .55; }
.gdate { text-align: center; border-right: 1px solid var(--line); padding-right: 16px; }
.gdate b { display: block; font: 400 44px/1 var(--display); color: var(--gold); }
.gdate span { display: block; font: 400 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.gdate small { font: 400 11px var(--mono); color: var(--muted); }
.ginfo h3 { margin: 0; font: 400 28px/1 var(--display); text-transform: uppercase; }
.ginfo h3 small { font: 400 11px var(--mono); color: var(--muted); margin-left: 8px; letter-spacing: .14em; }
.gvenue { margin: 6px 0 2px; font-weight: 600; }
.gmeta { margin: 0; font: 400 12px var(--mono); color: var(--muted); }
.gtext { margin: 8px 0 0; font-size: 14px; color: #cfc8d6; }
.gmap { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-2, #b58cff); }
.gacts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 150px; }
.gacts .btn { min-height: 44px; }
.gstatus { text-align: center; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); padding: 12px; }
.gcount { text-align: center; font: 400 11px var(--mono); color: var(--gold); }
@media (max-width: 700px) {
  .gig { grid-template-columns: 64px 1fr; }
  .gdate b { font-size: 34px; }
  .gacts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .gacts > * { flex: 1; }
}

/* ---------- Studio diary gallery ---------- */
#gallery { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; grid-template-rows: auto 1fr; grid-template-areas: "idx mos" "nav mos"; gap: 18px 28px; align-items: start; margin-top: 18px; }
.gidx { grid-area: idx; } .gmos { grid-area: mos; }
.gnav { grid-area: nav; display: flex; align-items: center; gap: 6px; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gnav span { margin-right: auto; }
.gnav button { width: 40px; height: 40px; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s, color .2s; }
.gnav button:hover { border-color: var(--gold); color: var(--gold); }
.gmos.fade .gph { animation: gfade .35s ease both; }
.gmos.fade .gph:nth-child(2) { animation-delay: .04s; } .gmos.fade .gph:nth-child(3) { animation-delay: .08s; } .gmos.fade .gph:nth-child(4) { animation-delay: .12s; } .gmos.fade .gph:nth-child(5) { animation-delay: .16s; }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gmos.fade .gph { animation: none; } }
.gph[data-gnext] { cursor: pointer; }
.gidx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gidx li { border-bottom: 1px solid var(--line); }
.gidx button { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--muted); padding: 14px 0; cursor: pointer; }
.gidx i { font: 400 11px var(--mono); letter-spacing: .14em; font-style: normal; padding-top: 6px; }
.gidx b { font: 400 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; transition: color .2s; }
.gidx small, .gidx em { grid-column: 2; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.gidx em { text-transform: none; letter-spacing: .02em; font: 400 14px var(--body, inherit); margin-top: 4px; color: var(--muted); }
.gidx button:hover b { color: var(--ink); }
.gidx [aria-selected="true"] { color: var(--ink); }
.gidx [aria-selected="true"] i, .gidx [aria-selected="true"] small { color: var(--gold); }
.gmos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(110px, 12vw, 190px); gap: 6px; }
.gmos .big { grid-column: span 2; grid-row: span 2; }
.gmos.n1 .big { grid-column: 1 / -1; }
.gmos.n2 .gph:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.gmos.n3 .gph:nth-child(n+2) { grid-column: span 2; }
.gmos.n4 .gph:nth-child(4) { grid-column: span 2; }
.gph { position: relative; padding: 0; border: 0; background: #111; cursor: zoom-in; overflow: hidden; }
.gmore { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,5,7,.62); font: 400 34px var(--display); color: #fff; letter-spacing: .02em; transition: background .3s; }
.gph:hover .gmore { background: rgba(6,5,7,.4); }
.gph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.85); transition: transform .4s, filter .4s; }
.gph:hover img, .gph:focus-visible img { transform: scale(1.05); filter: none; }
@media (max-width: 800px) {
  #gallery { grid-template-columns: 1fr; grid-template-areas: "idx" "mos" "nav"; gap: 12px; }
  .gidx { display: flex; gap: 18px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .gidx li { border: 0; flex: none; }
  .gidx button { grid-template-columns: auto; padding: 6px 0; border-bottom: 2px solid transparent; }
  .gidx [aria-selected="true"] { border-bottom-color: var(--gold); }
  .gidx i, .gidx em { display: none; }
  .gidx b { font-size: 20px; } .gidx small { grid-column: 1; }
  .gmos { grid-auto-rows: 26vw; gap: 4px; }
}
.lightbox { background: rgba(4,3,5,.95); place-items: center; }
.lightbox figure { margin: 0; max-width: min(92vw, 1400px); }
.lightbox img { display: block; max-width: 100%; max-height: 82svh; margin: 0 auto; }
.lightbox figcaption { text-align: center; margin-top: 10px; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lightbox .x { position: fixed; top: 14px; right: 18px; z-index: 2; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 40px; cursor: pointer; z-index: 2; }
.lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }

/* back office: date range, forms, lists */
.range { position: sticky; top: 58px; z-index: 19; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 0 12px; background: rgba(6,5,7,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.range .lbl { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.range .presets { display: flex; flex-wrap: wrap; gap: 4px; }
.range .presets button { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: none; color: var(--muted); border: 1px solid var(--line); padding: 8px 10px; cursor: pointer; }
.range .presets button.on { color: var(--gold); border-color: var(--gold); }
.range label { display: flex; align-items: center; gap: 6px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.range input[type=date] { color-scheme: dark; background: rgba(0,0,0,.4); color: inherit; border: 1px solid var(--line); padding: 7px 8px; font: 400 13px var(--mono); }
.aform { display: grid; gap: 12px; }
.aform .arow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.aform input[type=datetime-local], .aform input[type=file] { color-scheme: dark; width: 100%; }
.aform .checks { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.alist { display: grid; gap: 10px; }
.aitem { border: 1px solid var(--line); padding: 12px 14px; background: rgba(0,0,0,.25); }
.aitem.off, .aitem.past { opacity: .6; }
.aitem p { margin: 6px 0; }
.aitem .acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* fan groups */
.ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.ghead b { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--gold); }
.ghead span { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.gmembers { margin: 14px 0 10px; }
.gmembers li.me .n { color: var(--gold); }
small.gm { font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lbtabs { display: flex; gap: 4px; margin-bottom: 12px; }
.lbtabs button { font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: none; color: var(--muted); border: 1px solid var(--line); padding: 10px 16px; cursor: pointer; }
.lbtabs button.on { color: var(--gold); border-color: var(--gold); }
.invitebar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 10px 44px 10px 16px; background: rgba(155,92,255,.92); color: #fff; font-size: 14px; backdrop-filter: blur(8px); }
.invitebar .btn { min-height: 36px; padding: 0 14px; }
.invitebar .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }

/* label credit */

/* live feedback */
.live-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(155,92,255,.6); color: #cbb2ff; font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.live-pill::before, .listening::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: nb-live 1.8s infinite; }
.listening { display: inline-flex; align-items: center; gap: 6px; color: #9be8bd; font: 400 11px var(--mono); }
.listening[hidden], .live-pill[hidden] { display: none; }
@keyframes nb-live { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
.bump { animation: nb-bump .6s ease; }
@keyframes nb-bump { 0% { color: var(--gold); transform: scale(1.18); } 100% { transform: none; } }
.live-flash { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 90; padding: 10px 16px; background: rgba(20,16,26,.92); border: 1px solid rgba(155,92,255,.6); color: #efe8d8; font: 400 12px var(--mono); letter-spacing: .06em; backdrop-filter: blur(10px); }
.live-flash.on { animation: nb-flash 3.2s ease forwards; }
@keyframes nb-flash { 0% { opacity: 0; transform: translate(-50%, 20px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 10px); } }
button.tapped, .btn.tapped, .small-btn.tapped { transform: scale(.97); filter: brightness(1.15); }
button, .btn, .small-btn { transition: transform .12s ease, filter .12s ease, background .2s, border-color .2s; }
.busy { position: relative; color: transparent !important; pointer-events: none; }
.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-color: #060507 transparent #060507 transparent; border-radius: 50%; animation: nb-spin .7s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }
.post.sending { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .bump, .live-flash.on, .live-pill::before, .listening::before { animation: none; } .live-flash.on { opacity: 1; transform: translate(-50%, 0); } }

/* trends: small multiples */
.trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tk { position: relative; margin: 0; padding: 12px 12px 8px; border: 1px solid var(--line); background: #0d0b10; }
.tk figcaption { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tk figcaption span { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: 1; }
.tk figcaption b { font: 400 24px/1 var(--display); color: #efe8d8; }
.tk-ch { font: 400 11px var(--mono); color: var(--muted); }
.tk-ch.up { color: #7fd8a4; } .tk-ch.down { color: #ff9b8a; }
.tk svg { display: block; width: 100%; height: 110px; overflow: visible; }
.tk-day { fill: none; stroke: rgba(155,92,255,.55); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.tk-avg { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tk-base { stroke: #2a2430; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tk-grid { stroke: #1d1922; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tk-x { stroke: rgba(239,232,216,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tk-dot { fill: var(--gold); stroke: #0d0b10; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tk-axis { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10px var(--mono); color: var(--muted); }
.tk-tip { position: absolute; top: 44px; width: 150px; padding: 6px 8px; background: rgba(20,16,26,.95); border: 1px solid #3a3242; font: 400 11px/1.4 var(--mono); color: #efe8d8; pointer-events: none; z-index: 2; }
.tk-key { white-space: nowrap; font: 400 11px var(--mono); color: var(--muted); }
.tk-key i { display: inline-block; width: 16px; height: 0; margin: 0 6px 3px 4px; vertical-align: middle; }
.tk-key i.d { border-top: 1.5px solid rgba(155,92,255,.8); } .tk-key i.a { border-top: 2px solid var(--gold); }

/* privacy + community rules page */
.legal { padding-top: 24px; padding-bottom: 64px; max-width: 860px; }
.legal section { padding: 22px 0; }
.legal-tabs { display: flex; gap: 4px; margin: 6px 0 4px; }
.legal-tabs a { font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 10px 16px; text-decoration: none; }
.legal-tabs a:hover { color: var(--gold); border-color: var(--gold); }
.legal-note { display: inline-block; margin-top: 10px; padding: 6px 10px; border: 1px dashed rgba(155,92,255,.6); color: #cbb2ff; font: 400 11px var(--mono); letter-spacing: .08em; }
.legal-panel h3 { margin: 22px 0 6px; font: 400 20px var(--display); letter-spacing: .02em; text-transform: uppercase; color: #efe8d8; }
.legal-panel h3:first-child { margin-top: 0; }
.legal-panel p, .legal-panel li { color: #cfc8d6; line-height: 1.65; }
.legal-panel ul, .legal-panel ol { padding-left: 20px; }
.legal-panel li { margin: 6px 0; }
.legal-panel li b { color: #efe8d8; }
.legal-panel a { color: var(--gold); }
.rules li::marker { color: var(--gold); font-family: var(--mono); }
.legal-help { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--purple); background: rgba(155,92,255,.08); }

/* lyrics & credits (in the song panel, beside comments) */
.more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.more-btn .arr { font-size: 16px; line-height: 0; transition: transform .2s; }
.more-btn:hover .arr { transform: translateX(3px); }
.ftabs { display: flex; gap: 0; margin: 14px 0 -15px; }
.ftabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 12px 6px; cursor: pointer; }
.ftabs button[aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.tdet { display: grid; gap: 28px; padding-top: 6px; }
.tdet[hidden] { display: none; }
.tdet h3 { margin: 0 0 14px; font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lyr-part + .lyr-part { margin-top: 18px; }
.lyr-part h4 { margin: 0 0 6px; font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lyr-part p { margin: 0; font: 400 16px/1.65 var(--mono); color: var(--ink); }
.cred dl { margin: 0; display: grid; gap: 12px; }
.cred dl div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cred dt { font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cred dd { margin: 0; font: 400 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.cred .fine { margin-top: 14px; }
@media (max-width: 800px) { .lyr-part p { font-size: 15px; } }
@media (max-width: 800px) {
  .track .side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .track .side .small-btn { min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 10px; letter-spacing: .1em; }
  .track .side [data-join], .track .side [data-fav], .track .side .solo { grid-column: 1 / -1; }
}

/* fan-facing momentum */
.hx-mom { margin: 4px 0 0; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hx-mom b { color: var(--gold); font-weight: 400; }
.hot { color: var(--gold); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.cities { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0 0 18px; }
.cities .lbl { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cities .city { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); }
.cities .city b { font: 400 20px var(--display); text-transform: uppercase; color: var(--ink); margin-right: 4px; letter-spacing: .01em; }
.impact { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.impact b { color: var(--gold); }

/* comment likes and replies */
.pthread + .pthread { margin-top: 2px; }
.post.reply { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--line); }
.post .acts { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.post .acts .like { color: var(--muted); font-size: 13px; }
.post .acts .like.on { color: var(--gold); }
.post .acts .like span { font: 400 11px var(--mono); margin-left: 2px; }
.rbox { margin: 6px 0 14px 22px; padding-left: 14px; border-left: 2px solid var(--gold); }
.rbox textarea { width: 100%; min-height: 70px; }
.rrow { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rrow .btn { min-height: 40px; padding: 0 16px; }

.linkbtn { display: block; width: 100%; margin-top: 12px; background: none; border: 0; padding: 8px; color: var(--muted); font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }

/* one rating per song, in the song panel header */
.myrate { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.myrate > span, .myrate small { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.myrate .stars { margin: 0; }

/* leaderboard: how the points were earned */
.lb .why { display: block; margin-top: 3px; font: 400 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.lb .gm { font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--purple-2); margin-left: 6px; }

#board #groupPanel { margin: 0 0 18px; }
#board #groupPanel[hidden] { display: none; }

/* follow me: points for fans */
.soc .plus { margin-left: auto; font: 400 11px var(--mono); color: var(--purple-2); }
.soc.done { border-color: var(--gold-deep, #8a6f2f); }
.soc.done .plus { color: var(--gold); }

.grank { margin: 16px 0 6px; font-size: 15px; } .grank b { color: var(--gold); }
.gmh { margin: 10px 0 0; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gmembers li.me { background: rgba(233,196,106,.07); }

/* groups leaderboard: tap a group to see its members */
.lb li.gl { cursor: pointer; }
.lb li.gl:hover .n { color: var(--gold); }
.lb li.gl .chev { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.lb li.gl[aria-expanded="true"] .chev { transform: translateY(0) rotate(-135deg); border-color: var(--gold); }
.lb li.glm { counter-increment: none; display: block; padding: 4px 0 14px 56px; background: transparent; }
.lb li.glm::before { content: none; }
.glist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lb .glist li { counter-increment: none; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 6px; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; background: transparent; text-align: left; }
.lb .glist li::before { content: none; }
.lb .glist .nm { text-align: left; }
.lb .glist li.me { background: rgba(233,196,106,.07); }
.glist .r { font: 400 12px var(--mono); color: var(--muted); }
.glist .nm { font-size: 15px; } .glist .fr { display: block; font: 400 11px var(--mono); color: var(--muted); }
.glist .s { font: 400 12px var(--mono); color: var(--gold); }
@media (max-width: 700px) { .lb li.glm { padding-left: 0; } }

/* leaderboard: you, top 50 */
.lb li.me { background: rgba(233,196,106,.07); }
.lb .gm.you { color: var(--gold); }
.lb li.lbgap { counter-increment: none; display: block; text-align: center; padding: 4px 0; color: var(--muted); letter-spacing: .3em; border: 0; }
.lb li.lbgap::before { content: none; }
.lbmore { display: block; margin: 16px auto 0; }
.lbmore[hidden] { display: none; }
.navrank { color: var(--gold); font-weight: 400; }

/* Follow me: tidy tiles (icon, name, action underneath, +1 on the right); nothing spills over */
.socials { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.soc { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 16px 18px; min-width: 0; }
.soc img { grid-row: 1 / 3; width: 22px; height: 22px; }
.soc .nm { grid-column: 2; font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc small { grid-column: 2; display: block; margin: 0; font: 400 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.soc .plus { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 4px 7px; border: 1px solid var(--line); font: 400 11px var(--mono); color: var(--purple-2); }
.soc.done .plus { border-color: var(--gold); color: var(--gold); }
.soc:hover .nm { color: var(--gold); }
@media (max-width: 800px) {
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soc { padding: 14px 12px; column-gap: 10px; }
  .soc .nm { font-size: 17px; }
  .soc small { display: block; }
}

.sprow { display: flex; gap: 8px; margin-top: 8px; } .sprow .btn { flex: 1; } .sprow .btn.hidden { display: none; }

/* How points work */
.rules{margin-top:18px;border:1px solid var(--line, rgba(255,255,255,.12));border-radius:14px;padding:0 16px}
.rules summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"+";float:right;color:var(--muted)}
.rules[open] summary::after{content:"\2212"}
.rules h4{margin:4px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.rules h4 small{text-transform:none;letter-spacing:0;font-weight:400}
.rules ul{list-style:none;margin:0 0 14px;padding:0}
.rules li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line, rgba(255,255,255,.08));font-size:14px}
.rules li b{color:var(--purple-2, #b48cff)}
.rules li small{color:var(--muted)}

/* join form: dropdowns match the text boxes */
.modal label.f select:not(.ccSelect) {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding: 0 40px 0 14px;
  font: 400 16px var(--sans, inherit); color: #efe8d8; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b7ae9c' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.modal label.f select:invalid, .modal label.f select.empty { color: rgba(239,232,216,.45); }
.modal select option { background: #1b1720; color: #efe8d8; }
.modal .free { margin: 2px 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(232,197,106,.1); border: 1px solid rgba(232,197,106,.35); color: #f3e3b5; font-size: 15px; line-height: 1.4; }
.modal .free b { color: #e8c56a; }
.modal .namehint { display: block; margin-top: 6px; font: 400 12px var(--mono); color: var(--muted); letter-spacing: 0; text-transform: none; }
.modal .namehint.bad { color: #ff8a8a; }
.modal .tick { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; cursor: pointer; }
.modal .tick input { width: 20px; height: 20px; accent-color: #9b5cff; flex: none; }
.modal .tick { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 15px; cursor: pointer; }
.modal .tick input { width: 20px; height: 20px; accent-color: #9b5cff; flex: none; }
/* phone row: country code and number the same height */
.modal .phone-row { align-items: stretch; }
.modal .phone-row .cc, .modal .phone-row input { height: 50px; min-height: 50px; box-sizing: border-box; }
.modal #emailHint { cursor: pointer; }
footer .flinks a, footer .flinks button { white-space: nowrap; }

/* ---------- navigation: glass top bar (computers) and bottom bar (phones) ---------- */
.navshell { position: sticky; top: 0; z-index: 50; background: rgba(9,8,11,.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.08); }
.navshell .nav { border-bottom: 0; }
.topnav { display: none; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.topnav .tn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 600 14px var(--body); transition: color .2s, background .2s; }
.topnav .tn svg { width: 18px; height: 18px; }
.topnav .tn:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.topnav .tn.on { color: var(--ink); background: rgba(155,92,255,.22); }
.topnav .tn.center { color: #1a1206; background: var(--goldgrad); box-shadow: 0 4px 18px rgba(233,196,106,.25); }
.topnav .tn.center.on { box-shadow: 0 0 0 2px rgba(233,196,106,.45), 0 4px 18px rgba(233,196,106,.35); }
@media (min-width: 900px) { .topnav { display: flex; } .botnav { display: none !important; } }

.botnav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); align-items: end;
  height: 64px; padding: 0 6px; border-radius: 24px; background: rgba(22,18,28,.55); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.botnav .bn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; color: rgba(246,241,231,.6); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.botnav .bn .t { font: 600 10.5px var(--body); letter-spacing: .02em; }
.botnav .bn.on { color: var(--ink); }
.botnav .bn.on:not(.center)::after { content: ""; position: absolute; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.botnav .bn.center { justify-content: flex-end; padding-bottom: 8px; color: var(--ink); }
.botnav .bn.center .ring { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--goldgrad); color: #1a1206; box-shadow: 0 0 0 5px rgba(9,8,11,.85), 0 0 0 6px rgba(255,255,255,.14), 0 8px 24px rgba(233,196,106,.35); transition: transform .2s; }
.botnav .bn.center .ring svg { width: 26px; height: 26px; }
.botnav .bn.center:active .ring { transform: translateX(-50%) scale(.94); }
.botnav .bn.center.on .ring { box-shadow: 0 0 0 5px rgba(9,8,11,.85), 0 0 0 7px rgba(233,196,106,.6), 0 8px 28px rgba(233,196,106,.5); }
@media (max-width: 899px) {
  body.has-botnav { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.has-botnav .toast, body.has-botnav .live-flash { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .botnav, .navshell { background: rgba(14,11,18,.95); } }
section[id] { scroll-margin-top: 76px; }

/* back office: settings tables (points, navigation) */
.ptbl table { width: 100%; border-collapse: collapse; }
.ptbl th { text-align: left; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 10px; border-bottom: 1px solid var(--line); }
.ptbl td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.ptbl tr.off td { opacity: .5; }
.ptbl .in { width: 100%; min-height: 40px; padding: 0 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px !important; color: var(--ink); font: 400 14px var(--body); }
.ptbl .in:focus { outline: none; border-color: rgba(155,92,255,.7); box-shadow: 0 0 0 3px rgba(155,92,255,.2); }
.ptbl .in.num { width: 90px; text-align: right; font-family: var(--mono); }
.ptbl select.in { color-scheme: dark; width: auto; }
.ptbl .kind { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 600 12px var(--body); white-space: nowrap; }
.ptbl .kind.friend, .ptbl .kind.share { background: rgba(233,196,106,.14); color: var(--gold); }
.ptbl .kind.fan { background: rgba(155,92,255,.16); color: var(--purple-2); }
.ptbl .muted { color: var(--muted); font-size: 13px; }
.ptbl .ord { white-space: nowrap; }
.ptbl .ord .small-btn { padding: 6px 10px; margin-right: 4px; }
.ptbl input[type=checkbox], .ptbl input[type=radio] { width: 20px; height: 20px; accent-color: var(--purple); }
.savebar { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.navprev { display: flex; justify-content: center; gap: 6px; margin: 0 auto 18px; padding: 10px 14px; max-width: 420px; border-radius: 22px; background: rgba(22,18,28,.7); border: 1px solid rgba(255,255,255,.12); }
.navprev span { flex: 1; text-align: center; font: 600 12px var(--body); color: var(--muted); padding: 8px 0; }
.navprev span.c { color: #1a1206; background: var(--goldgrad); border-radius: 99px; }
/* join popup: New fan / Sign in */
.jtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 44px 18px 0; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.jtabs button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 13px var(--body); cursor: pointer; }
.jtabs button.on { background: rgba(155,92,255,.25); color: var(--ink); }
@media (max-width: 420px) { #navSignIn { padding-left: 10px; padding-right: 10px; } }
/* phones: "Sign in" stays in the header as a plain link next to Become a fan */
@media (max-width: 640px) { .nav #navSignIn:not(.hidden) { display: inline-flex; border-color: transparent; padding-left: 6px; padding-right: 6px; } }
#dash [data-tab][hidden] { display: none !important; }
.off-section { display: none !important; }
.navprevs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.navprevs .np small { display: block; margin-bottom: 6px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.navprevs .navprev { margin: 0; max-width: none; }

/* phones: no sticky top bar (the bottom bar does the navigating) */
@media (max-width: 899px) { .navshell { position: relative; } }

/* phones: link boxes keep their width (the Copy button no longer stretches), and 16px text so iPhones don't zoom in */
.share-link .btn { width: auto !important; flex: none; }
@media (max-width: 899px) { .share-link input, .modal input, .modal select, .compose textarea, .drawer textarea, .drawer input { font-size: 16px !important; } }
html, body { max-width: 100%; overflow-x: clip; }

/* the middle button is a gold record with grooves; it spins while music plays */
.botnav .bn.center .ring {
  background:
    conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.38) 12%, transparent 18% 50%, rgba(255,255,255,.26) 62%, transparent 68%),
    repeating-radial-gradient(circle at 50% 50%, rgba(70,45,5,.32) 0 .6px, transparent .6px 2.4px),
    radial-gradient(circle at 50% 50%, #f7dd94 0%, #e9c46a 45%, #b8913a 100%);
}
.botnav .bn.center .ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(70,45,5,.35), inset 0 0 0 9px rgba(70,45,5,.06); pointer-events: none; }
.botnav .bn.center .ring .lbl { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff3c9 0 12%, #e9c46a 13% 100%); box-shadow: 0 0 0 1.5px rgba(70,45,5,.45); color: #1a1206; }
.botnav .bn.center .ring .lbl svg { width: 14px; height: 14px; margin-left: 1px; }
@keyframes spinrec { to { rotate: 360deg; } }
body.music-on .botnav .bn.center .ring { animation: spinrec 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { body.music-on .botnav .bn.center .ring { animation: none; } }

/* phones: the bar shrinks while you scroll down, grows back when you scroll up */
.botnav { transition: left .3s ease, right .3s ease, height .3s ease, bottom .3s ease, border-radius .3s ease, background .3s ease; }
.botnav .bn { transition: height .3s ease; }
.botnav .bn .t { transition: opacity .2s ease, max-height .3s ease; max-height: 14px; }
.botnav .bn.center .ring { transition: transform .3s ease, width .3s ease, height .3s ease, top .3s ease; }
body.nav-compact .botnav { left: 56px; right: 56px; height: 48px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 20px; }
body.nav-compact .botnav .bn { height: 48px; }
body.nav-compact .botnav .bn .t { opacity: 0; max-height: 0; }
body.nav-compact .botnav .bn.center .ring { width: 48px; height: 48px; top: -10px; }
body.nav-compact .botnav .bn.on:not(.center)::after { top: auto; bottom: 6px; }
/* back office: contact fans */
.confirm { margin-top: 12px; padding: 16px; border: 1px solid rgba(233,196,106,.45); background: rgba(233,196,106,.08); border-radius: 12px; }
.confirm p { margin: 0 0 12px; }
.wabox { margin-top: 16px; padding: 16px; border: 1px solid rgba(37,211,102,.4); background: rgba(37,211,102,.06); border-radius: 12px; }
.wabox h4 { margin: 0 0 6px; }
.wabox textarea { width: 100%; margin: 10px 0; background: rgba(0,0,0,.35); color: var(--ink); border: 1px solid var(--line); padding: 10px; font: 14px/1.5 var(--body); }
.subh { margin: 26px 0 10px; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* the play label sits exactly in the middle of the record */
.botnav .bn.center .ring .lbl { position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px; }
body.nav-compact .botnav .bn.center .ring .lbl { transform: scale(.85); }
.botnav .bn.center .ring .lbl svg { margin-left: 0; }
/* centre the record without a transform, so spinning turns it around its own middle */
.botnav .bn.center .ring { left: 50%; margin-left: -31px; transform: none; }
.botnav .bn.center:active .ring { transform: scale(.94); }
body.nav-compact .botnav .bn.center .ring { margin-left: -24px; }
.botnav .bn.center .ring { transition: transform .3s ease, width .3s ease, height .3s ease, top .3s ease, margin-left .3s ease; }
.wordsrow td { background: rgba(255,255,255,.025); }
.wordsbox { display: grid; gap: 12px; padding: 6px 0; }
.wordsbox textarea.in { min-height: 0; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.wordsbox .cards { display: grid; gap: 10px; }
.wordsbox .cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.wordsbox .cardrow .ct { grid-column: 1 / -1; }
/* a song you arrived at through a friend's link */
.track.spot { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(233,196,106,.25); transition: box-shadow .4s; }
body.viewer .adminOnly { display: none; } tr.clickable { cursor: pointer; } tr.clickable:hover td { background: rgba(255,255,255,.04); }
/* back office: messages */
.tpls { display: grid; gap: 8px; }
.tpl { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.02); }
.tpl.open { border-color: rgba(233,196,106,.45); }
.tplhead { display: grid; gap: 4px; width: 100%; text-align: left; padding: 14px 16px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.tplhead b { font: 600 15px var(--body); }
.tplhead span { color: var(--muted); font-size: 13px; }
.tplbody { display: grid; gap: 12px; padding: 0 16px 16px; }
.tplbody .in { width: 100%; min-height: 40px; padding: 8px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px !important; color: var(--ink); font: 400 14px var(--body); }
.tplbody textarea.in { line-height: 1.5; resize: vertical; }
.tplbody code { padding: 1px 6px; border-radius: 6px; background: rgba(155,92,255,.18); color: var(--purple-2); font: 12px var(--mono); }
.tplprev { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: #09080b; }
/* anything marked hidden stays hidden, whatever its layout style (e.g. the Lyrics tab in gig and post comments) */
[hidden] { display: none !important; }

/* each song: one tidy row of actions under the waveform; Share in a soft green so it stands out */
:root { --share: #7fdca4; --share-bg: rgba(127,220,164,.12); --share-line: rgba(127,220,164,.45); }
.track .tacts { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
@media (max-width: 700px) { .track .tacts { grid-column: 1 / -1; } }
.track .tacts .tl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.track .ic { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; min-width: 38px; justify-content: center; padding: 0 10px; border: 1px solid transparent; border-radius: 999px !important;
  background: transparent; color: var(--muted); font: 600 13px var(--body); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.track .ic:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.track .ic.on { color: #ff7aa8; }
.track .ic[data-fav] { font-size: 19px; line-height: 1; }
.track .ic.txt { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; border-color: rgba(255,255,255,.12); }
.track .sharebtn, .track .unlockbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 18px; border-radius: 999px !important; cursor: pointer;
  font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, transform .1s; }
.track .sharebtn { background: var(--share-bg); color: var(--share); border: 1px solid var(--share-line); }
.track .sharebtn:hover { background: rgba(127,220,164,.22); }
.track .sharebtn:active, .track .unlockbtn:active { transform: scale(.97); }
.track .unlockbtn { background: transparent; color: var(--gold); border: 1px solid rgba(233,196,106,.55); }
.track .unlockbtn:hover { background: rgba(233,196,106,.1); }

/* back office navigation: areas on top, the pages of the chosen area underneath */
.navbars { position: sticky; top: 0; z-index: 20; margin-bottom: 8px; background: rgba(6,5,7,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.navbars .dtabs { position: static; margin: 0; border-bottom: 0; background: none; backdrop-filter: none; padding: 4px 0 10px; }
.navbars .dtabs .other { display: none; }
.dgroups { display: flex; gap: 6px; padding: 12px 0 6px; overflow-x: auto; }
.dgroups button { padding: 9px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px var(--body); cursor: pointer; white-space: nowrap; }
.dgroups button[aria-current="true"] { background: var(--goldgrad); color: #1a1206; border-color: transparent; }
.dgroups #modCount:not(:empty), .dtabs #modCount2:not(:empty) { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #ff7a7a; color: #1a0606; font: 700 11px/18px var(--body); text-align: center; }
.range { top: 104px; }
.track .tacts { flex-wrap: nowrap; }
.track .tacts .tl { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 480px) { .xs-hide { display: none; } .track .ic { padding: 0 8px; } .track .sharebtn, .track .unlockbtn { padding: 0 14px; } }

/* one share style everywhere: soft green */
.sharebtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px !important; cursor: pointer; text-decoration: none;
  font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--share-bg); color: var(--share); border: 1px solid var(--share-line); transition: background .15s, transform .1s; }
.sharebtn:hover { background: rgba(127,220,164,.22); color: var(--share); }
.sharebtn:active { transform: scale(.97); }
.sharebtn.big { min-height: 50px; padding: 0 22px; font-size: 13px; background: rgba(127,220,164,.18); }
.sharebtn.ghost { background: transparent; border-color: rgba(127,220,164,.3); }
.sharebtn.block { display: flex; width: 100%; }
.share-row a, .share-row button { background: var(--share-bg) !important; color: var(--share) !important; border: 1px solid var(--share-line) !important; border-radius: 999px !important; }
.share-row a:hover, .share-row button:hover { background: rgba(127,220,164,.22) !important; }
.share-row small { color: var(--share); opacity: .8; }
.hx .cell.btns .sharebtn { min-height: 48px; }
#sharePop .sprow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

/* the fan card, simpler */
.fancard.v2 { display: grid; gap: 16px; }
.fc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.fc-who .name { margin: 0; }
.fc-rank { margin-top: 6px; color: var(--muted); font-size: 14px; }
.fc-rank b { color: var(--ink); }
.fc-pts { text-align: right; flex: none; }
.fc-pts b { display: block; font: 400 56px/0.9 var(--display, Anton, sans-serif); color: var(--gold); }
.fc-pts span { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fc-pts small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.fc-link .share-link input { border-radius: 999px !important; padding-left: 16px; }
.fc-link .share-link .btn { min-height: 46px; padding: 0 18px; border-radius: 999px !important; }
.fc-share { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.fc-more .share-row { margin-top: 0; }
.fc-earn { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.fc-earn b { color: var(--share); }
.rewards-all summary { cursor: pointer; padding: 10px 0; color: var(--muted); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* favourite: heart plus a word, so it's clear what it does */
.track .ic.fav { gap: 5px; border-color: rgba(255,255,255,.12); }
.track .ic.fav .h { font-size: 17px; line-height: 1; }
.track .ic.fav .fl { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.track .ic.fav.on { border-color: rgba(255,122,168,.5); background: rgba(255,122,168,.08); }
.fc-share .sharebtn { white-space: nowrap; letter-spacing: .06em; padding: 0 16px; font-size: 12px; }

/* gigs: details on top, actions in one row underneath: going, comments, tickets on the left, Share on the right */
.gig { grid-template-columns: 84px 1fr; }
.gig .gacts { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }
.gig .gacts > * { flex: none; }
.gig .gacts .tl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.gig .ic, .gfeat .ic { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px !important; background: transparent; color: var(--muted);
  font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.gig .ic:hover, .gfeat .ic:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.gig .ic.going.on, .gfeat .ic.going.on { color: var(--ink); border-color: rgba(155,92,255,.6); background: rgba(155,92,255,.18); }
.gig .ic.tix { color: #1a1206; background: var(--gold); border-color: transparent; font-weight: 700; }
.gig .ic[data-gig-thread], .gfeat .ic[data-gig-thread] { border-color: transparent; font: 600 13px var(--body); letter-spacing: 0; }
.gig .gstatus { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.gig .gcount { color: var(--muted); font-size: 12px; padding: 0 6px; }
.gig.spot { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(233,196,106,.25); }
@media (max-width: 700px) { .gig { grid-template-columns: 64px 1fr; } .gig .gacts { flex-wrap: nowrap; } }

/* ---------- fan card: a membership card with the points ring, then sharing, then Earn / My points ---------- */
.fancard.v3 { display: grid; gap: 14px; }
.mcard { position: relative; overflow: hidden; border-radius: 18px; padding: 20px; color: var(--ink);
  background: linear-gradient(135deg, #2b1450 0%, #141118 55%, #3a2a08 100%); border: 1px solid rgba(233,196,106,.4); }
/* Nandi on the card, like the banners (24 Oct, John picked "A"): the gig flyer's purple photo on the right, fading into the card */
.mcard { background: #141118; isolation: isolate; }
.mc-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 68%; z-index: 0; pointer-events: none;
  background: url(/img/fx/purple/oj22.jpg) 60% 25% / cover no-repeat; filter: contrast(1.08) saturate(.85); }
.mc-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #141118 30%, rgba(20,17,24,.75) 52%, rgba(20,17,24,0) 80%), linear-gradient(0deg, rgba(20,17,24,.9) 0%, rgba(20,17,24,0) 45%); }
.mc-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.mc-logo { font: 400 22px Anton, Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.mc-no { font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.mc-mid { display: flex; align-items: flex-end; gap: 14px; margin-top: 22px; position: relative; z-index: 1; }
.mc-who { flex: 1; min-width: 0; }
.mc-name { font: 400 clamp(30px, 9vw, 42px)/1 Anton, Impact, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; margin-bottom: 8px; }
.mc-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #cfc6d8; }
.mc-stats b { font-size: 18px; color: var(--ink); }
.mc-ring { --p: 0; flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) 0 calc(var(--p) * var(--sh, 100) * .01%), var(--purple) 0 calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.mc-ring > div { width: 84px; height: 84px; border-radius: 50%; background: #1d1424; display: grid; place-items: center; align-content: center; text-align: center; }
.mc-ring b { font: 400 28px/1 Anton, Impact, sans-serif; color: var(--gold); }
.mc-ring span { font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.mc-next { position: relative; z-index: 1; margin-top: 14px; font-size: 13px; color: #cfc6d8; }
.mc-next b { color: var(--gold); }
.mc-link input { border-radius: 999px !important; padding-left: 16px; }
.mc-link .btn { min-height: 46px; padding: 0 18px; border-radius: 999px !important; width: auto !important; }
.mc-apps { display: flex; justify-content: center; gap: 8px; }
.mc-apps a, .mc-apps button { width: 46px; height: 46px; border-radius: 50% !important; display: grid; place-items: center; padding: 0 !important; position: relative;
  background: transparent !important; border: 1px solid rgba(127,220,164,.35) !important; color: var(--share) !important; font: 700 12px var(--mono); cursor: pointer; }
.mc-apps .done::after { content: "\2713"; position: absolute; right: -2px; top: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--share); color: #0b1a10; font: 700 10px/16px var(--body); text-align: center; }
.appico { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.mc-apps .sc { font-style: normal; font: 700 12px var(--mono); }
.mc-tabs { padding: 14px !important; }
.mc-tabs .seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mc-tabs .seg button { padding: 10px 6px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px var(--body); cursor: pointer; }
.mc-tabs .seg button[aria-selected="true"] { background: rgba(155,92,255,.25); color: var(--ink); }
.plist { list-style: none; margin: 6px 0 0; padding: 0; }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.plist li:last-child { border-bottom: 0; }
.plist b { font: 700 14px var(--mono); flex: none; }
.plist li.friend b, .plist li.share b { color: var(--share); } .plist li.fan b { color: var(--gold); }
.plist li small { color: var(--muted); }
.plist li.tot { font-weight: 700; } .plist li.tot b { color: var(--gold); }
.plist li.empty { color: var(--muted); }
.plegend { margin: 8px 0 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.dot.friend, .dot.share { background: var(--share); } .dot.fan { background: var(--gold); }
#navCard { white-space: nowrap; }

/* join / sign in popup: fewer words, one font for labels, fits a small iPhone */
#joinModal .modal { padding: 18px 18px 16px; max-height: calc(100dvh - 20px); overflow-y: auto; }
#joinModal h3 { font-size: 30px; line-height: 1; margin: 0 0 8px; }
#joinModal .sub { margin: 0 0 12px; font-size: 14px; }
#joinModal label.f { margin-bottom: 10px; }
#joinModal label.f > span { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#joinModal label.f > span .opt { font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--body); opacity: .7; }
#joinModal .namehint:empty { display: none; }
#joinModal .fine { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
#joinModal .or { margin: 10px 0; }
#joinModal .jtabs { margin: 14px 0 16px; }   /* title and close button at the top, the tabs under them, like Support my journey (23 Oct) */
/* a new fan's nickname and age come first (23 Oct): Google and Join look waiting until they're filled in */
#joinModal .oauth { margin: 4px 0 0; }
#joinModal .oauth button { border-radius: 999px !important; border: 0; }   /* the same pill as Join */
#joinModal label.f select:not(.ccSelect) { height: 50px; min-height: 50px; }   /* the same height as the boxes */
#joinModal .ohint { margin: 8px 0 0; text-align: center; font: 400 13px/1.4 var(--body); color: var(--gold); }
#joinModal .oauth button.wait, #joinModal #emailBtn.wait { opacity: .4; }
@media (max-height: 640px), (max-width: 360px) {
  #joinModal h3 { font-size: 26px; }
  #joinModal .modal input[type=text], #joinModal .modal input[type=email], #joinModal .modal input[type=tel], #joinModal label.f select:not(.ccSelect) { min-height: 44px; height: 44px; }
  #joinModal .phone-row .cc, #joinModal .phone-row input { height: 44px; min-height: 44px; }
  #joinModal label.f { margin-bottom: 8px; }
}
/* waveform: light up to where you're pointing or sliding */
.wave { touch-action: pan-y; }
.wave-hov { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); pointer-events: none; }
.wave svg.hov rect { fill: var(--purple-2); opacity: .85; }
.wave.hovering .wave-on { opacity: .9; }
.gig .gmeta b { color: var(--ink); font-weight: 600; }
@media (max-width: 480px) {
  .gig { padding: 14px; gap: 12px; }
  .gig .gacts { gap: 6px; }
  .gig .gacts .tl { gap: 2px; flex-wrap: nowrap; }
  .gig .ic { padding: 0 10px; letter-spacing: .06em; }
  .gig .ic[data-gig-thread] { padding: 0 6px; }
  .gig .sharebtn { padding: 0 12px; letter-spacing: .08em; }
  .gig .gstatus { padding: 0 4px; letter-spacing: .06em; }
}
/* fan card section: a gap under the title; card on the left and the points tabs on the right on computers */
#me .card-grid { grid-template-columns: 1fr; max-width: 560px; margin: 28px auto 0; }
.mc-side, .mc-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.mc-main > .fine:empty { display: none; }
@media (min-width: 900px) {
  #me .card-grid { max-width: none; margin: 32px 0 0; }
  #me .fancard.v3 { grid-template-columns: minmax(380px, 440px) 1fr; gap: 28px; align-items: start; }
  #me .mc-main .mc-tabs { margin: 0; }
  #me .mc-main > .fine { margin: 0; }
}
#rewardsTab { padding-top: 10px; } #rewardsTab .ladder { margin-top: 10px; }
.mc-tabs .seg { grid-template-columns: repeat(3, 1fr); }
.plist li .note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fancard.v3 { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }

/* share icons everywhere match the fan card: one big WhatsApp button, then round app icons */
#ssRow { display: grid; gap: 14px; margin: 16px 0 12px; }
#ssRow .mc-apps a, #ssRow .mc-apps button { min-height: 0; }
#sharePop .mc-apps.sprow { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.gshare { display: grid; gap: 12px; margin-top: 12px; }
.mc-apps { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 480px) { .mc-apps { column-gap: 12px; max-width: calc(4 * 46px + 3 * 12px); margin-inline: auto; } }
#spLink { margin: 4px 0 12px; }
/* the link in share popups and groups: shown in full (wraps on small phones) */
.mc-link .lnk { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 46px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 23px;
  background: rgba(0,0,0,.35); font: 400 14px/1.35 var(--mono); color: var(--ink); word-break: break-all; user-select: all; }
.mc-link { display: flex; gap: 8px; align-items: stretch; }

/* a single gold dot: the full stop after every title, and the dot in NANDI.ART */
.tf { width: .2em !important; height: .2em !important; border-radius: 50%; background: var(--gold) !important; margin: 0 .05em 0 .06em !important; vertical-align: baseline; }
.logo .tf, .mc-logo .tf { margin: 0 .06em !important; }
/* phones have no sticky top bar: tapping a nav item puts the section title near the top of the screen */
/* phones and tablets: the floating top bar covers the top of the screen, so a section lands with its title just below it */
@media (max-width: 899px) { section[id] { scroll-margin-top: calc(env(safe-area-inset-top) + 28px); } }

/* comments from Nandi: gold mark, gold border, warm background; pinned first */
.nmark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbe7a6, var(--gold) 55%, #b8913a); box-shadow: 0 0 0 2px rgba(233,196,106,.25); vertical-align: -2px; margin-left: 6px; }
.post.nandi { border: 1px solid var(--gold) !important; background: linear-gradient(135deg, rgba(233,196,106,.13), rgba(233,196,106,.04)) !important; border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 1px rgba(233,196,106,.15), 0 6px 24px rgba(233,196,106,.08); }
.post.nandi .who b { color: var(--gold); }
.post.reply.nandi { margin-top: 8px; }
.post.spot { outline: 2px solid var(--gold); outline-offset: 4px; transition: outline-color .6s; }
.nandi-reply { position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 60; display: flex; align-items: center; gap: 10px; width: min(520px, calc(100% - 24px)); box-sizing: border-box;
  padding: 10px 10px 10px 14px; border: 1px solid var(--gold); border-radius: 16px; background: rgba(20,16,8,.92); backdrop-filter: blur(10px); color: var(--ink); font: 500 14px var(--body); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.nandi-reply[hidden] { display: none; }
.nandi-reply .nmark { margin: 0; flex: none; }
.nandi-reply b { color: var(--gold); }
.nandi-reply button[data-nr-open], .nandi-reply button[data-push-yes], #updateNow { border: 0; border-radius: 999px; padding: 7px 12px; background: var(--gold); color: #1a1206; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.nandi-reply > span:not(.nmark) { flex: 1; line-height: 1.35; }
.nandi-reply .nr-x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* returning fans: the fan version from the first frame, until the page script takes over */
html.pre-fan #heroJoin, html.pre-fan #missionJoin, html.pre-fan #navJoin, html.pre-fan #navSignIn { display: none !important; }
html.pre-fan #heroLede { visibility: hidden; }

/* notifications in the Marketing & notifications dialog */
.pushbox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pushbox h4 { margin: 0 0 6px; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-2, #c4a1ff); }
.pushbox .sharebtn { margin-top: 10px; }
.pushbox[hidden], .pushbox .hidden { display: none !important; }

/* after joining: add to home screen */
.hs-steps { margin: 4px 0 14px; padding: 0 0 0 22px; color: var(--ink); font-size: 14px; line-height: 1.5; }
.hs-steps li { margin-bottom: 8px; }
.hs-steps li::marker { color: var(--gold); font-weight: 700; }
.hs-ico { width: 18px; height: 18px; vertical-align: -3px; color: #4ea1ff; }

/* sign in with the code from the email (needed in the home screen app) */
#codeForm h3 { margin-right: 44px; }
#codeForm .code-in { font: 700 24px var(--mono); letter-spacing: .22em; text-align: center; }
.inline-link { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* join popup: "Step 2 of 4" */
.jsteps { display: flex; flex-direction: column; gap: 6px; margin: 0 52px 12px 0; }
.jsteps[hidden] { display: none; }
.jbar { display: flex; gap: 4px; }
.jbar i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.12); }
.jbar i.on { background: var(--gold); }
.jlbl { font: 400 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#joinModal .jsteps + #stepSignIn .jtabs { margin-top: 0; }

/* close button on popups: a quiet cross in the corner rather than a heavy circle */
.modal .x, .drawer .x { top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: transparent; backdrop-filter: none; font-size: 0; color: var(--muted); border-radius: 12px; }
.modal .x::before, .modal .x::after, .drawer .x::before, .drawer .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; }
.modal .x::before, .drawer .x::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal .x::after, .drawer .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal .x:hover, .drawer .x:hover, .modal .x:focus-visible, .drawer .x:focus-visible { background: rgba(255,255,255,.08); color: var(--ink); }

/* phones: the mission sits in its own box with a "The mission" tag, clearly apart from the banner above */
.hx-tag { display: none; }
@media (max-width: 800px) {
  .hx-count { background: transparent; border: 0; padding: 34px 16px 12px; }
  .hx-count-in { position: relative; background: linear-gradient(180deg, #1a150d, #0e0c09); border: 1px solid rgba(233,196,106,.45); border-radius: 22px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
  .hx-tag { display: block; position: absolute; top: -13px; left: 18px; z-index: 1; padding: 6px 12px; border-radius: 99px; background: var(--gold); color: #1a1206; font: 700 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
  .hx-count .cell { border: 0; padding: 16px 20px; }
  .hx-count .cell:nth-child(3) { padding-bottom: 0; }
  .hx-count .cell.btns { padding-bottom: 20px; }
  .bar.big { height: 16px; }
  .hx-count .ticks { display: none; }
}

/* a posted prize the fan has won */
#ladder .prize { display: block; margin-top: 4px; color: var(--gold); font-weight: 600; }

/* the "turn on notifications" reminder: a quiet "Don't ask again" */
.nandi-reply .nr-never { display: inline; margin-left: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* the mission statement: the first thing in the box, under the tag */
.hx-statement { grid-column: 1 / -1; margin: 0; padding: 20px 24px 0; font: 400 clamp(22px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: .01em; color: var(--ink); text-transform: uppercase; }
.hx-statement[hidden], .hx-tag[hidden], .hx-count p[hidden] { display: none !important; }
@media (max-width: 800px) {
  .hx-statement { padding: 30px 20px 0; font-size: 26px; }
  .hx-count .cell:nth-child(3) { padding-top: 14px; }
}

/* computers: the mission in its own box too (design D1), with the tag and the statement on top */
@media (min-width: 801px) {
  .hx-count { background: transparent; border: 0; padding: 40px 24px 20px; }
  .hx-count-in { position: relative; max-width: 1240px; margin: 0 auto; background: linear-gradient(180deg, #1a150d, #0e0c09); border: 1px solid rgba(233,196,106,.45); border-radius: 22px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
  .hx-tag { display: block; position: absolute; top: -13px; left: 22px; z-index: 1; padding: 6px 12px; border-radius: 99px; background: var(--gold); color: #1a1206; font: 700 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
  .hx-statement { padding: 30px 26px 4px; }
  .hx-count .cell { border: 0; padding: 22px 26px 24px; }
  .hx-count .cell + .cell { border-left: 1px solid rgba(233,196,106,.15); }
}

/* "A new version is ready" */
.update-bar { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70; }
.update-bar button { margin-left: auto; }

/* star rating under each song */
.track .rate { display: flex; align-items: center; gap: 2px; margin: 6px 0 2px -3px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.track .rate button { background: none; border: 0; padding: 4px 4px; font-size: 22px; touch-action: pan-y; line-height: 1; color: #3a3442; cursor: pointer; transition: color .15s, transform .15s; }
.track .rate button.on { color: var(--gold); }
@media (hover: hover) { .track .rate:hover button { color: rgba(233,196,106,.75); } .track .rate button:hover ~ button { color: #3a3442; } }
.track .rate button:active { transform: scale(1.25); }
.track .rate .avg { margin-left: 8px; font: 700 13px var(--mono); color: var(--gold); }

/* a reply to a reply: a step further in, with who it answers */
.post.reply2 { margin-left: 44px; }
.post .who .to { margin-left: 6px; font: 400 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.post .who .to::before { content: "\21B3  "; }
.rbox.in { margin-left: 36px; }
@media (max-width: 480px) { .post.reply2 { margin-left: 34px; } }

/* ---------- motion: fan card and leaderboard (all of it switches off for "reduce motion") ---------- */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sh { syntax: "<number>"; inherits: true; initial-value: 100; }
/* the card: a slow foil sheen (no hover tilt) */
.mcard { transition: box-shadow .35s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(233,196,106,.08), 0 0 40px rgba(155,92,255,.12); }
.mcard.lit { transition: transform .08s linear, box-shadow .35s ease; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 50px rgba(233,196,106,.18); }
.mcard::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 42%, rgba(233,196,106,.16) 50%, rgba(155,92,255,.12) 56%, transparent 68%);
  background-size: 250% 100%; background-position: 150% 0; animation: fxFoil 7s ease-in-out 1.2s infinite; mix-blend-mode: screen; }
.mcard.lit::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.14), rgba(233,196,106,.08) 35%, transparent 60%); animation: none; }
@keyframes fxFoil { 0% { background-position: 150% 0; } 35%, 100% { background-position: -60% 0; } }
/* the ring fills smoothly and glows at the end */
.mc-ring { position: relative; transition: --p 1.4s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 10px rgba(233,196,106,.25)); }
.mc-ring.pop { animation: fxPop .7s ease; }
@keyframes fxPop { 40% { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(233,196,106,.7)); } }
.fx-plus { position: absolute; left: 50%; top: -6px; z-index: 3; transform: translateX(-50%); font: 700 15px var(--mono); color: var(--gold); text-shadow: 0 0 12px rgba(233,196,106,.7); pointer-events: none; animation: fxPlus 1.6s ease-out forwards; }
@keyframes fxPlus { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
/* the leaderboard: rows slide in one after another */
.lb#leaderboard > li { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(min(var(--i, 0), 12) * 45ms); }
.lb#leaderboard:not(.in) > li { opacity: 0; transform: translateY(14px); }
/* the top three: gold, silver, bronze, with a slow light across number one */
.lb li.top { position: relative; overflow: hidden; }
.lb li.top1 { background: linear-gradient(90deg, rgba(233,196,106,.16), rgba(233,196,106,.02) 70%); box-shadow: inset 3px 0 0 #e9c46a; }
.lb li.top2 { background: linear-gradient(90deg, rgba(200,206,220,.11), transparent 70%); box-shadow: inset 3px 0 0 #c8cedc; }
.lb li.top3 { background: linear-gradient(90deg, rgba(205,127,50,.12), transparent 70%); box-shadow: inset 3px 0 0 #cd7f32; }
.lb li.top1::before { color: #e9c46a; text-shadow: 0 0 16px rgba(233,196,106,.6); }
.lb li.top2::before { color: #c8cedc; }
.lb li.top3::before { color: #cd7f32; }
.lb li.top1::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.14) 50%, transparent 65%); background-size: 250% 100%; animation: fxFoil 6s ease-in-out 2s infinite; }
/* you: a soft glow that breathes a couple of times */
.lb li.me { box-shadow: inset 0 0 0 1px rgba(233,196,106,.45); animation: fxMe 2.4s ease-in-out .8s 2; }
.lb li.me.top { box-shadow: inset 3px 0 0 #e9c46a, inset 0 0 0 1px rgba(233,196,106,.45); }
@keyframes fxMe { 50% { box-shadow: inset 0 0 0 1px rgba(233,196,106,.9), 0 0 24px rgba(233,196,106,.25); } }
/* who moved since you last looked */
.lb .mv { font: 700 10px var(--mono); letter-spacing: .04em; margin-left: 4px; vertical-align: 2px; }
.lb .mv.up { color: #7fdca4; }
.lb .mv.down { color: #e07a7a; }
@media (prefers-reduced-motion: reduce) {
  .mcard, .mcard::before, .lb li.top1::after, .lb li.me, .mc-ring, .mc-ring.pop { animation: none !important; transition: none !important; transform: none !important; }
  .lb#leaderboard > li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- one tab style everywhere (fan card, leaderboard, song panel, join popup) ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px !important; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.seg > button { min-height: 40px; padding: 10px 8px; border: 0 !important; border-radius: 9px !important; background: none; color: var(--muted); font: 600 13px var(--body); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background .2s, color .2s; }
.seg > button[aria-selected="true"], .seg > button.on { background: rgba(155,92,255,.25); color: var(--ink); }
.seg > button:hover { color: var(--ink); }
.lbtabs.seg { display: grid; max-width: 360px; margin-bottom: 14px; }
.ftabs.seg { margin: 14px 0 0; }
.jtabs.seg { margin: 0 44px 18px 0; }

/* ---------- sharing earns points: "+1" on each app until shared today, and a "+1" that flies to your points ---------- */
[data-sp][data-earn] { position: relative; }
.mc-apps [data-sp][data-earn]::before, .ss-row [data-sp][data-earn]::before, #ssRow [data-sp][data-earn]::before, #spRow [data-sp][data-earn]::before {
  content: attr(data-earn); position: absolute; right: -6px; top: -6px; z-index: 1; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
  background: var(--gold); color: #1a1206; font: 700 10px/18px var(--mono); text-align: center; box-shadow: 0 0 10px rgba(233,196,106,.55); animation: fxEarn 2.6s ease-in-out 1s 2; }
@keyframes fxEarn { 50% { transform: scale(1.18); box-shadow: 0 0 16px rgba(233,196,106,.9); } }
.fx-fly { position: fixed; z-index: 9000; pointer-events: none; padding: 4px 9px; border-radius: 999px; background: var(--gold); color: #1a1206; font: 700 14px var(--mono); box-shadow: 0 0 18px rgba(233,196,106,.8); }
#navCard.fx-got, .fx-got { animation: fxGot .8s ease; }
@keyframes fxGot { 35% { transform: scale(1.12); box-shadow: 0 0 22px rgba(233,196,106,.75); } }
@media (prefers-reduced-motion: reduce) { [data-sp][data-earn]::before, .fx-got { animation: none !important; } }

/* ---------- fan chip in the top bar: name, rank and a points ring (progress to the next reward); tap for your card ---------- */
.navcard { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px 4px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; text-align: right; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; }
.navcard:hover { border-color: rgba(233,196,106,.45); }
.navcard.hidden { display: none !important; }
.nc-who { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.05; }
.nc-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 16px Anton, Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.nc-st { margin-top: 3px; font: 400 10.5px var(--mono); letter-spacing: .06em; color: #bdb4c9; }
.nc-st b { color: var(--gold); font-weight: 700; }
.nc-ring { --p: 0; position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: --p 1.2s cubic-bezier(.2,.8,.2,1);
  background: conic-gradient(var(--gold) 0 calc(var(--p) * var(--sh, 100) * .01%), var(--purple) 0 calc(var(--p) * 1%), rgba(255,255,255,.14) 0); filter: drop-shadow(0 0 6px rgba(233,196,106,.25)); }
.nc-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #1d1424; }
.nc-ring b { position: relative; font: 400 13px/1 Anton, Impact, sans-serif; color: var(--gold); letter-spacing: .02em; }

/* phones: the top bar floats, like the bottom bar */
@media (max-width: 899px) {
  .navshell { position: fixed; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
    background: rgba(22,18,28,.55); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  .navshell .nav { padding: 0 8px 0 16px !important; height: 60px; box-sizing: border-box; }   /* same height for fans and visitors, so the space under it is always right */
  .navcard { height: 46px; padding-top: 0; padding-bottom: 0; }
  .navcard .nc-ring { width: 36px; height: 36px; }
  .navcard .nc-ring::before { inset: 4px; }
  .navshell .logo { font-size: 20px; }
  body { padding-top: calc(86px + env(safe-area-inset-top)); }
  .nc-name { max-width: 34vw; }
}

/* "+1 point for ..." with the next reward and a My card button */
.toast.earn { text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 24px)); box-sizing: border-box; padding: 10px 10px 10px 14px; border-radius: 18px;
  background: linear-gradient(135deg, #2b1450, #17121d 60%, #3a2a08); color: var(--ink); border: 1px solid rgba(233,196,106,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 30px rgba(233,196,106,.22); animation: fxToastIn .45s cubic-bezier(.2,.9,.3,1.2); transition: opacity .35s, transform .35s; }
.toast.earn.out { opacity: 0; transform: translate(-50%, 10px); }
.toast.earn .em { flex: none; font: 400 30px/1 Anton, Impact, sans-serif; color: var(--gold); text-shadow: 0 0 16px rgba(233,196,106,.6); }
.toast.earn .tx { flex: 1; min-width: 0; font: 400 13px/1.35 var(--body); }
.toast.earn .tx b { color: var(--gold); }
.toast.earn .tx small { display: block; margin-top: 2px; font: 400 11px var(--mono); color: #bdb4c9; }
.toast.earn button { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--goldgrad, #e9c46a); color: #1a1206; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
@keyframes fxToastIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
@media (max-width: 899px) { .toast { bottom: calc(90px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .toast.earn { animation: none; } }

/* ---------- the points celebration (more fun) ---------- */
.toast.earn { overflow: visible; padding: 12px 10px 12px 12px; gap: 12px; border-radius: 20px; }
.toast.earn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.18) 50%, transparent 65%); background-size: 250% 100%; animation: fxFoil 1.6s ease-out .25s 1; }
.toast.earn .em { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(233,196,106,.35), rgba(233,196,106,.06) 70%); box-shadow: inset 0 0 0 1px rgba(233,196,106,.45); }
.toast.earn .em i { font: 400 28px/1 Anton, Impact, sans-serif; font-style: normal; color: #ffe29a; text-shadow: 0 0 18px rgba(233,196,106,.9); animation: fxNum .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes fxNum { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.35) rotate(4deg); opacity: 1; } 100% { transform: scale(1); } }
.toast.earn .cheer { display: block; font: 400 18px/1 Anton, Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); animation: fxIn .5s ease .15s both; }
.toast.earn .why { display: block; margin-top: 3px; font: 400 13px/1.3 var(--body); color: #d9d1e3; animation: fxIn .5s ease .25s both; }
.toast.earn .tb { display: block; height: 5px; margin-top: 7px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.toast.earn .tb i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #9b5cff, #e9c46a); box-shadow: 0 0 10px rgba(233,196,106,.6); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.toast.earn .tx small { margin-top: 4px; }
.toast.earn .unl { color: var(--gold) !important; font-weight: 700; }
.toast.earn.big { border-color: var(--gold); box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 50px rgba(233,196,106,.45); }
.toast.earn.big .cheer { color: var(--gold); }
@keyframes fxIn { from { opacity: 0; transform: translateY(6px); } }
.spark { position: fixed; z-index: 9500; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; }
.spark.star { width: auto; height: auto; font: 14px/1 sans-serif; }
.spark.star::before { content: "\2726"; }
/* everyday messages (link copied, saved...): dark glass with a gold edge, not a flat yellow strip */
.toast:not(.earn) { background: rgba(22,18,28,.92); color: var(--ink); border: 1px solid rgba(233,196,106,.45); border-radius: 999px !important; padding: 12px 18px; font: 600 13px var(--body); letter-spacing: 0; text-transform: none;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 22px rgba(233,196,106,.15); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fxIn .3s ease; max-width: calc(100% - 32px); text-align: center; }
/* leaderboard points: same-width digits so nothing shifts */
.lb .s { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .toast.earn::after, .toast.earn .em i, .toast.earn .cheer, .toast.earn .why { animation: none !important; } }

/* the big WhatsApp button: "+1" until shared today, then a tick */
.sharebtn.big[data-sp="whatsapp"] { position: relative; }
.sharebtn.big[data-sp="whatsapp"][data-earn]::before { content: attr(data-earn); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; box-sizing: border-box;
  background: var(--gold); color: #1a1206; font: 700 11px/22px var(--mono); letter-spacing: 0; text-align: center; box-shadow: 0 0 10px rgba(233,196,106,.55); animation: fxGlow 2.6s ease-in-out 1s 2; }
@keyframes fxGlow { 50% { box-shadow: 0 0 18px rgba(233,196,106,.95); } }
.sharebtn.big[data-sp="whatsapp"].done::after { content: "\2713"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--share); color: #0b1a10; font: 700 12px/22px var(--body); text-align: center; }

/* leaderboard tabs: centred, with what each tab means just under them (so switching never moves the tabs) */
.lbtabs.seg { margin: 24px auto 10px; width: 100%; max-width: 420px; }
.lbnote { display: grid; max-width: 560px; margin: 0 auto 16px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lbnote > span { grid-area: 1 / 1; visibility: hidden; }
.lbnote > span.on { visibility: visible; }
@media (max-width: 640px) { .lbtabs.seg { max-width: none; } }

/* rewards tab: share vs fan points, and progress to the next reward of each kind */
.psplit { margin: 2px 0 14px; }
.ps-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.ps-bar i { display: block; height: 100%; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.ps-bar i.sh { background: linear-gradient(90deg, #c9a24a, #e9c46a); }
.ps-bar i.fa { background: linear-gradient(90deg, #7c4dff, #9b5cff); }
.ps-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--ink); }
.ps-key span { display: inline-flex; align-items: center; gap: 6px; }
.ps-key small { color: var(--muted); font-size: 11px; }
.ps-key .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ps-key .dot.friend, .ps-key .dot.share { background: var(--gold); } .ps-key .dot.fan { background: var(--purple); }
.pgoal { margin: 12px 0 0; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.pg-top { display: flex; justify-content: space-between; align-items: baseline; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-top b { color: var(--ink); letter-spacing: .02em; }
.pg-bar { height: 8px; margin: 8px 0 6px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.pg-bar i { display: block; height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.pgoal.friend .pg-bar i, .pgoal.share .pg-bar i { background: linear-gradient(90deg, #c9a24a, #e9c46a); }
.pgoal.all .pg-bar i { background: linear-gradient(90deg, #9b5cff, #e9c46a); }
.pgoal .fine { margin: 0; }
.ladder .p small { display: block; font: 400 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* song buttons: gold outlines so they read as tappable */
.track .ic, .track .ic.txt, .track .ic.fav { border-color: rgba(233,196,106,.55); color: var(--gold); }
.track .ic:hover { border-color: var(--gold); color: var(--gold); background: rgba(233,196,106,.08); }
.track .ic.fav.on { color: #ff7aa8; border-color: rgba(255,122,168,.5); background: rgba(255,122,168,.08); }

/* listening / plays / faves: under the song title, on the left */
.track .tstats { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-start; text-align: left; min-height: 1.6em; align-items: center; margin: 2px 0 4px; font: 400 11px var(--mono); color: var(--muted); }
.track .tstats > span { white-space: nowrap; }
.track .tstats b { color: var(--gold); font-weight: 700; }

/* ---------- videos: upright cards; locked ones greyed with a lock and how close you are ---------- */
.vrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 600px) { .vrow { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.vcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; padding: 12px;
  background: #140f19 center / cover no-repeat; background-clip: padding-box; color: var(--ink); text-align: left; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.vcard { border-color: rgba(255,255,255,.2); }   /* an even edge all the way round: the picture never shows through the border */
.vcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,5,7,.05) 35%, rgba(6,5,7,.92)); }
.vcard > * { position: relative; }
.vcard .vk { font: 400 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vcard .vt { margin-top: 4px; font: 400 18px/1.05 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.vcard .vl { margin-top: 6px; font: 400 10.5px var(--mono); color: #bdb4c9; }
.vcard .vplay { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -40px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(233,196,106,.92); color: #060507; }
.vcard .vplay svg { width: 22px; height: 22px; margin-left: 3px; }
.vcard:hover { border-color: rgba(233,196,106,.5); }
.vcard.vlocked { cursor: pointer; }
/* locked: only the picture goes grey; the progress bar stays in colour on top */
.vcard.vlocked::before { background: linear-gradient(180deg, rgba(6,5,7,.55), rgba(6,5,7,.95)); -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
.vcard.vlocked .vt { color: #d9d1e3; }
.vcard.vlocked .vl b { color: var(--gold); }
.vcard.vlocked .vplay { background: rgba(255,255,255,.1); color: #cfc6d8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vcard.vlocked .vplay svg { margin: 0; width: 20px; height: 20px; }
.vcard.vlocked .vk { color: #9d94a8; }
.vcard .pg-bar { margin-top: 8px; height: 5px; background: rgba(255,255,255,.14); }
.vcard .pg-bar i { box-shadow: 0 0 10px rgba(233,196,106,.55); }
.vcard.vlimit .vl { color: #ff9b8a; }
/* the player: full screen, upright */
.vpop { background: rgba(0,0,0,.94); }
.vp-box { position: relative; width: min(100%, calc((100vh - 120px) * 9 / 16), 460px); margin: auto; }
.vp-box video { display: block; width: 100%; max-height: calc(100vh - 120px); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; }
.vp-box .x { position: absolute; top: -44px; right: 0; }
.vp-cap h3 { margin: 12px 0 2px; font: 400 22px Anton, Impact, sans-serif; text-transform: uppercase; }
/* songs still to unlock: greyed with a lock and a progress bar */
.track.rlocked .meta { opacity: .62; }
.track.rlocked .play.locked { cursor: pointer; }
.track .rprog { margin-top: 8px; max-width: 360px; }
.track .rprog .pg-bar { height: 5px; }
.track .rprog p { margin: 6px 0 0; font: 400 11px var(--mono); color: var(--muted); }
.track .rprog p b { color: var(--gold); }
.toast.unlock .em i { font-style: normal; }
.track .rprog .pg-bar i, .vcard .pg-bar i { background: linear-gradient(90deg, #9b5cff, #e9c46a); }
#ladder .ulk { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
#ladder .ul-go { min-height: 32px; padding: 0 12px; border: 1px solid rgba(233,196,106,.55); border-radius: 999px; color: var(--gold); background: transparent; font: 400 11px var(--mono); letter-spacing: .06em; }
#ladder .ul-lock { display: inline-flex; align-items: center; gap: 5px; font: 400 11px var(--mono); color: var(--muted); }
#ladder .ul-lock svg { width: 12px; height: 12px; }
/* back office: songs & videos */
#mediaAdmin .md-item { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
#mediaAdmin .md-main { grid-column: 1 / -1; }
#mediaAdmin .md-cover { grid-column: 1 / -1; width: 72px; aspect-ratio: 9 / 16; border-radius: 8px; background: #1d1424 center / cover no-repeat; }
#mediaAdmin .warn { color: #ff9b8a; font-weight: 400; }
#mediaAdmin .mdmsg { grid-column: 1 / -1; }
#mediaAdmin .mdmsg.err { color: #ff9b8a; } #mediaAdmin .mdmsg.ok { color: #7fdca4; }
#rwTable .rw-ul { font-size: 12px; line-height: 1.5; color: #cfc6d8; }
/* fan card > My points: friends, then every point itemised */
.mypts .frbox { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; }
.mypts .frbox h4 { margin: 0 0 8px; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mypts .frbox .fine { margin: 0; }
.mypts .frow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); font: 400 13px var(--mono); }
.mypts .st { flex: none; font: 400 10px var(--mono); letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.mypts .st.ok { background: rgba(127,220,164,.12); color: #7fdca4; } .mypts .st.wt { background: rgba(255,255,255,.07); color: #bdb4c9; }
.mypts .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.mypts .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: none; font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #bdb4c9; cursor: pointer; }
.mypts .chip.on { background: var(--gold); border-color: var(--gold); color: #060507; }
.mypts .hsum { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--muted); margin-bottom: 4px; }
.mypts .hlist { list-style: none; margin: 0; padding: 0; }
.mypts .hlist li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.mypts .hlist li.empty { display: block; color: var(--muted); font-size: 14px; }
.mypts .hic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #060507; background: var(--gold); }
.mypts .hic.fan { background: var(--purple); color: #fff; } .mypts .hic.w { background: rgba(255,255,255,.12); color: #cfc6d8; }
.mypts .htx { min-width: 0; font: 400 13px var(--mono); color: #cfc6d8; }
.mypts .htx b { color: var(--ink); font-weight: 400; } .mypts .htx small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.mypts .htx .hrep { font-style: normal; color: var(--muted); font-size: 11px; }
.mypts .hpt { font: 400 15px Anton, Impact, sans-serif; color: var(--gold); white-space: nowrap; }
.mypts .hpt.fan { color: #b78cff; } .mypts .hpt.w { color: #6f6779; font: 400 11px var(--mono); }
.mypts .more { display: block; width: 100%; margin-top: 12px; padding: 11px; border: 1px solid rgba(233,196,106,.5); border-radius: 999px; background: none; color: var(--gold); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.mypts .more.hidden { display: none; }
#rewardsTbl .warnsig { color: #ffb36b; font-size: 12px; } #rewardsTbl .oksig { color: #7fdca4; font-size: 12px; }
/* fan card on phones: nothing wider than the screen (tabs share the width; long reward buttons wrap) */
.mc-tabs { min-width: 0; max-width: 100%; }
.mc-tabs .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-tabs .seg button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .mc-tabs .seg button { font-size: 12px; padding: 10px 2px; } }
#ladder li, #ladder .t { min-width: 0; overflow-wrap: anywhere; }
#ladder .ul-go { white-space: normal; text-align: left; line-height: 1.3; padding: 6px 12px; max-width: 100%; }
/* videos on phones: one swipeable row of upright cards (title over the picture); computers keep the grid */
.vhint { display: flex; justify-content: space-between; font: 400 11px var(--mono); letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.vhint .swipe { display: none; }
@media (max-width: 700px) {
  #videoList.vrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #videoList.vrow::-webkit-scrollbar { display: none; }
  #videoList .vcard { flex: 0 0 46%; scroll-snap-align: start; }
  .vhint .swipe { display: inline; }
}
@media (min-width: 701px) { .vrow { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
/* phones: a solid strip behind the status bar, so the page doesn't show above the floating top bar */
@media (max-width: 899px) {
  /* above the floating top bar: solid black; around and just under it the page fades out, so scrolled content doesn't distract */
  /* The area behind an iPhone's clock can't be covered by a website (pinned things start below the clock), so there's no
     strip or fade here: anything we drew only showed as a thin black line under the clock. The Home Screen app gets a
     plain black status bar instead (apple-mobile-web-app-status-bar-style). The strip stays above the top edge, out of sight. */
  .topshade { display: block; position: fixed; z-index: 49; left: 0; right: 0; top: -300px; height: 300px; background-color: #060507; pointer-events: none; }
  body::before { content: none; }
}

/* back office: song and video fields look like every other field */
#mediaAdmin .in { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--ink); font: 400 14px var(--body); box-sizing: border-box; }
#mediaAdmin input[type=file].in { padding: 6px; font-size: 12px; }
#mediaAdmin > .head, #vlimitsAdmin > .head { display: block; } #mediaAdmin > .head p, #vlimitsAdmin > .head p { max-width: 70ch; margin-top: 10px; }
/* live songs: no stars or faves (they're for the studio songs) */
/* rewards: a standard Watch / Listen button with the title beside it */
#ladder .ulk { display: grid; gap: 6px; margin: 8px 0 2px; }
#ladder .ul-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
#ladder .ul-go { flex: none; width: 96px; min-height: 32px; padding: 0; text-align: center; white-space: nowrap; }
#ladder .ul-lock { flex: none; width: 96px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--muted); }
#ladder .ul-lock svg { width: 13px; height: 13px; }
#ladder .ul-t { min-width: 0; font: 400 12px var(--mono); color: #cfc6d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* videos: a strip of small thumbnails above the big ones (phones), the one in view lit up */
.vthumbs { display: none; }
@media (max-width: 700px) {
  .vthumbs { display: flex; gap: 6px; margin: 0 0 12px; }
  .vth { flex: 1 1 0; min-width: 0; aspect-ratio: 9 / 16; max-width: 44px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 0; background: #140f19 center / cover no-repeat; background-clip: padding-box; color: #cfc6d8; display: grid; place-items: center; opacity: .55; transition: opacity .2s, border-color .2s, transform .2s; cursor: pointer; }
  .vth svg { width: 12px; height: 12px; filter: drop-shadow(0 0 2px #000); }
  .vth.vlocked { filter: grayscale(1); }
  .vth.on { opacity: 1; border-color: var(--gold); transform: translateY(-2px); }
}
/* photos for visitors: greyed out, can't be opened or paged; tapping asks them to become a fan */
.gmos.glocked { position: relative; }
.gmos.glocked .gph { filter: grayscale(1) brightness(.55); cursor: pointer; }
.gmos.glocked .gmore { display: none; }
.glockbar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid rgba(233,196,106,.6); border-radius: 999px; background: rgba(6,5,7,.8); color: var(--gold); font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.glockbar svg { width: 13px; height: 13px; }
/* sections: the gap between them is about the floating top bar plus a little room */
section { padding: 44px 0; }
@media (max-width: 899px) { section { padding: 36px 0; } }

/* every pop-up message drops in at the top, just under the top bar (never over it, never by the bottom bar) */
:root { --toastTop: calc(env(safe-area-inset-top) + 84px); }
@media (min-width: 900px) { :root { --toastTop: 96px; } }
.toast, .live-flash, .nandi-reply { top: var(--toastTop) !important; bottom: auto !important; z-index: 200; }
.nandi-reply:not([hidden]) ~ .toast, .nandi-reply:not([hidden]) ~ .live-flash { top: calc(var(--toastTop) + 74px) !important; }
.toast:not(.earn) { animation: fxDrop .3s ease; }
.toast.earn { animation: fxDropIn .45s cubic-bezier(.2,.9,.3,1.2); }
.toast.earn.out { transform: translate(-50%, -10px); }
.nandi-reply:not([hidden]) { animation: fxDrop .3s ease; }
@keyframes fxDrop { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes fxDropIn { from { opacity: 0; transform: translate(-50%, -16px) scale(.96); } }
@keyframes nb-flash { 0% { opacity: 0; transform: translate(-50%, -14px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .toast, .nandi-reply:not([hidden]) { animation: none !important; } }
footer .madeby { white-space: nowrap; }
#board.few-fans { display: none !important; }
/* songs on wider screens: a line from the song sits on the right, beside the stats and stars (never pushes anything) */
.track .tlyric { display: none; }
@media (min-width: 900px) {
  .track .meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-content: start; }
  .track .meta > * { grid-column: 1 / -1; }
  .track .meta > .num { grid-row: 1; } .track .meta > .title { grid-row: 2; }
  .track .meta > .tstats { grid-column: 1; grid-row: 3; } .track .meta > .rate { grid-column: 1; grid-row: 4; }
  .track .meta > .tlyric { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; grid-column: 2; grid-row: 3 / span 2; align-self: center; justify-self: end;
    max-width: 440px; margin: 0; text-align: right; font: italic 400 15px/1.45 var(--body); color: #c9bfd6; }
  .track .meta > .tlyric::before { content: "\201C"; color: var(--gold); font-style: normal; margin-right: 2px; }
  .track .meta > .tlyric::after { content: "\201D"; color: var(--gold); font-style: normal; margin-left: 2px; }
}
@media (max-width: 600px) { footer .madeby { display: block; margin-top: 4px; } footer .madeby .dot { display: none; } }
/* phones turned sideways: keep everything clear of the notch now the page fills the whole screen */
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* follow me: one even grid (followed ones don't change the lines), and the +1 / tick badge is always the same size */
.soc.done { border-color: var(--line); background: rgba(233,196,106,.05); }
.soc .plus { box-sizing: border-box; width: 34px; height: 30px; padding: 0; display: grid; place-items: center; line-height: 1; }
.soc.done .plus { background: rgba(233,196,106,.12); }

.topshade { display: none; }
@media (max-width: 899px) { .topshade { display: block; } }
@media (max-width: 480px) { .soc { column-gap: 8px; padding: 14px 10px 14px 12px; } .soc .nm { font-size: 16px; } .soc .plus { width: 28px; height: 26px; } }
/* the top and bottom bars: frosted glass with a gentle purple glow */
@media (max-width: 899px) {
  .navshell, .botnav { background: linear-gradient(180deg, rgba(44,28,70,.5), rgba(20,15,30,.55)); border-color: rgba(180,140,255,.2);
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 24px rgba(155,92,255,.2), inset 0 1px 0 rgba(210,185,255,.14); }
}
@media (min-width: 900px) {
  .navshell { background: linear-gradient(180deg, rgba(34,22,54,.55), rgba(12,10,18,.5)); border-bottom-color: rgba(170,130,255,.16); box-shadow: 0 8px 28px rgba(155,92,255,.07); }
}
/* banner photos fade in once the back office ones are confirmed; until then the banner is just dark (never a wrong photo) */
.hx-slides .hx-photo:not(.has) { opacity: 0 !important; }
/* back office, view only (readers): a clear chip, and a short note when a change is tried */
body.readonly #viewOnly { background: rgba(155,92,255,.18); border-color: rgba(155,92,255,.5); color: var(--ink); }
.ro-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 300; padding: 12px 18px; border-radius: 999px; background: rgba(22,18,28,.95); border: 1px solid rgba(155,92,255,.6); color: var(--ink); font: 600 13px var(--body); transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.ro-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* likes and comments on videos and photos */
.msoc { display: flex; gap: 6px; margin-top: 8px; }
.msoc .mlike, .msoc .mcom { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(6,5,7,.6); border: 1px solid rgba(255,255,255,.16);
  font: 400 11px var(--mono); color: #e7dff0; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.msoc .mlike i { font-style: normal; font-size: 13px; line-height: 1; }
.msoc .mlike.on { color: #ff7d9b; border-color: rgba(255,125,155,.55); }
.msoc b, .soc-bar b { font-weight: 400; }
.msoc b:empty { display: none; }
.vcard.vlocked .msoc { opacity: .8; }
.soc-bar { display: flex; gap: 10px; margin-top: 10px; }
.soc-bar[hidden] { display: none; }
.soc-bar .mlike, .soc-bar .mcom, .soc-bar .mshare { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: var(--bone, #efe8d8); font: 400 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.soc-bar .mlike i { font-style: normal; font-size: 16px; line-height: 1; }
.soc-bar .mlike.on { color: #ff7d9b; border-color: rgba(255,125,155,.6); background: rgba(255,125,155,.08); }
.soc-bar .mlike:active, .soc-bar .mcom:active, .soc-bar .mshare:active, .msoc span:active { transform: scale(.96); }
.lightbox .soc-bar { justify-content: center; }
.vp-box video { max-height: calc(100vh - 190px); }
.gph .gsoc { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: rgba(6,5,7,.72);
  font: 400 10px var(--mono); color: #eee6f3; pointer-events: none; }
.gph .gsoc svg { width: 11px; height: 11px; }

/* "N here now": there from the first frame, numbers the same width, so the box never changes size */
.live-pill { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the shop ---------- */
.shop-chips { display: grid; gap: 8px; margin: 0 0 14px; }
.shop-kinds, .shop-songs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.shop-kinds::-webkit-scrollbar, .shop-songs::-webkit-scrollbar { display: none; }
.shop-chips .chip { flex: 0 0 auto; }
.shop-chips::-webkit-scrollbar { display: none; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
@media (max-width: 600px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.scard { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; min-width: 0; font: inherit; }
.scard .sc-img { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #141016; border: 1px solid rgba(255,255,255,.1); }
.scard .sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.scard:hover .sc-img img { transform: scale(1.03); }
.scard .sc-lock { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(6,5,7,.7); color: var(--gold); }
.scard .sc-lock svg { width: 14px; height: 14px; }
.scard.slocked .sc-img img { filter: saturate(.6) brightness(.75); }
.scard .sc-t { font: 400 17px/1.1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; margin-top: 6px; overflow-wrap: anywhere; }
.scard .sc-p { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--muted); }
.scard .sc-p i { color: var(--gold); font-style: normal; }
.scard .sc-ul { font: 400 11px var(--mono); color: var(--gold); }
/* locked items (gold, points): a progress bar like locked songs and videos */
.scard .sc-prog { display: grid; gap: 4px; }
.scard .sc-prog .pg-bar { height: 5px; margin: 2px 0 0; background: rgba(255,255,255,.14); }
.scard .sc-prog .pg-bar i { background: linear-gradient(90deg, #9b5cff, #e9c46a); box-shadow: 0 0 10px rgba(233,196,106,.45); }
.scard .sc-ul b { color: var(--bone, #efe8d8); }
.shop-closed { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--gold); border: 1px dashed rgba(233,196,106,.5); padding: 8px 12px; border-radius: 10px; margin: 0 0 12px; }
.bagbtn { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 0 -2px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bagbtn svg { width: 18px; height: 18px; }
.bagbtn b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--gold); color: #060507; font: 700 10px/18px var(--mono); text-align: center; }
.bagbtn b[hidden] { display: none; }
.navshell .nav .topnav { margin: 0 auto; }
/* the More menu: a sheet from the bottom on phones, a small panel under the bar on computers */
.botnav .bn.more { background: none; border: 0; font: inherit; cursor: pointer; }
.topnav .tn.more { background: none; border: 0; cursor: pointer; }
.topnav .tn.more:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.botnav .bn.more { color: rgba(246,241,231,.6); }
.bn.more .mdot, .tn.more .mdot { position: absolute; top: 12px; left: calc(50% + 7px); width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #141016; }
.tn.more { position: relative; }
.tn.more .mdot { top: 6px; left: 22px; }
.more-pop { place-items: end stretch; padding: 0; background: rgba(6,5,7,.55); }
.more-sheet { position: relative; width: 100%; max-height: 82vh; overflow-y: auto; box-sizing: border-box; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #141016; border-top: 1px solid rgba(255,255,255,.12); animation: nb-up .32s cubic-bezier(.22,1,.36,1); }
@keyframes nb-up { from { transform: translateY(30px); opacity: 0; } }
.more-sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); margin: 0 auto 10px; }
.more-sheet .x { position: absolute; top: 12px; right: 12px; }
.more-sheet h3 { font: 400 26px/1 Anton, Impact, sans-serif; text-transform: uppercase; margin: 6px 0 8px; }
.more-sheet h4 { font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 16px 0 2px; }
.more-list { display: grid; }
.more-list .mi { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 2px; border: 0; border-top: 1px solid rgba(255,255,255,.07); background: none; color: var(--ink); font: 500 16px var(--body); text-align: left; cursor: pointer; }
.more-list .mi:first-child { border-top: 0; }
.more-list .mi svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.more-list .mi .new { margin-left: auto; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #060507; background: var(--gold); padding: 2px 7px; }
.more-foot { margin: 14px 0 0; } .more-foot a { color: var(--muted); }
@media (min-width: 900px) {
  .more-pop { place-items: start end; padding: 74px max(16px, calc(50% - 600px)) 0; background: rgba(6,5,7,.35); }
  .more-sheet { width: 340px; max-height: calc(100vh - 100px); border-radius: 18px; border: 1px solid rgba(255,255,255,.12); padding: 14px 18px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
  .more-sheet .grab { display: none; }
}
.shop-drawer .drawer-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sp-imgs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -2px 14px; }
.sp-imgs::-webkit-scrollbar { display: none; }
.sp-imgs img { flex: 0 0 88%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; scroll-snap-align: start; background: #141016; }
.sp-imgs img:only-child { flex-basis: 100%; }
.sp-price { margin: 0 0 8px; color: var(--muted); } .sp-price b { color: var(--ink); font-size: 20px; margin-right: 4px; }
.sp-body { margin: 0 0 14px; }
.sp-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.sp-row .lbl { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 56px; }
.sp-row .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-row .chip.on, .shop-chips .chip.on { background: var(--gold); color: #060507; border-color: var(--gold); }
.sp-lock { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 4px 0 12px; color: var(--gold); }
.sp-lock svg { width: 16px; height: 16px; } .sp-lock .pg-bar { grid-column: 1 / -1; }
.sp-lock .pg-bar i { background: linear-gradient(90deg, #9b5cff, #e9c46a); }
.bag { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.bag li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.bag img, .bag li > span:first-child { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #141016; }
.bag b { display: block; font-size: 15px; } .bag small { display: block; color: var(--muted); font: 400 11px var(--mono); }
.bag .qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.bag .qty button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: none; color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1; }
.bag .bp { font: 700 13px var(--mono); }
.bag-sum { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bag-sum span { color: var(--muted); } .bag-sum .gold { color: var(--gold); }
.bag-sum span:nth-last-child(2), .bag-sum b:last-child { color: var(--ink); font-size: 17px; }
.shop-nudge { position: fixed; z-index: 90; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(420px, calc(100% - 24px)); box-sizing: border-box;
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px; border-radius: 18px; background: #141016; border: 1px solid rgba(233,196,106,.55); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: nb-slide .38s cubic-bezier(.22,1,.36,1); }
.shop-nudge img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.shop-nudge b { display: block; } .shop-nudge span { display: block; margin: 2px 0 10px; color: var(--muted); }
.shop-nudge .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-nudge .btn { padding: 8px 14px; font-size: 13px; }
.shop-nudge .linkish { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--muted); font: 400 12px var(--mono); text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) { .shop-nudge { bottom: 24px; } }
/* a visitor hearing a preview (23 Oct): the same card as the shop's suggestion, with the hero's two buttons side by side */
.pv-nudge { animation: pv-fade .2s ease-out; }   /* a quick fade, not the slide (the slide fought the centring and looked jumpy, 23 Oct) */
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pv-nudge { animation: none; } }
.pv-nudge.noimg { grid-template-columns: 1fr; }
.pv-nudge b { margin-bottom: 2px; }
.pv-nudge span { margin: 0 0 12px; line-height: 1.45; }
.pv-nudge em { font-style: normal; font-weight: 700; color: var(--ink); }
.pv-nudge .btn { width: 100%; min-height: 44px; padding: 0 12px; }
.myorders { margin: 0 0 16px; } .myorders h4 { margin: 0 0 8px; }
.myorders .mo { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.myorders .mo b { font: 700 12px var(--mono); letter-spacing: .06em; }
.myorders .mo .st { color: var(--gold); font: 400 12px var(--mono); }
.shop-toast .tx { flex: 1; }
/* the top bar with the bag: the name never wraps; on small phones Sign in lives in the More menu */
.navshell .logo { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 400px) { body.has-bag .nav #navSignIn:not(.hidden) { display: none !important; } .nav #navJoin { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 360px) { .nav-r { min-width: 0; } .navcard { min-width: 0; flex-shrink: 1; gap: 6px; padding-left: 8px; } .nc-name { max-width: 26vw; font-size: 14px; } .nc-st { font-size: 9.5px; letter-spacing: .02em; } .bagbtn { width: 34px; height: 34px; } }
/* shop: colour choice */
.swatches { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.swatch.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233,196,106,.35), inset 0 0 0 2px rgba(0,0,0,.25); }
.swatch.sw-black { background: #1b1a1e; } .swatch.sw-white { background: #f7f6f3; } .swatch.sw-grey { background: #b9b8b8; } .swatch.sw-navy { background: #26314f; }
#spColName { font: 400 13px var(--body); color: var(--muted); }
.scard .sc-img { background: #e4e0da; }
.sp-imgs img, .bag img { background: #e4e0da; }
.sguide { margin: -4px 0 14px; }
.sguide summary { cursor: pointer; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 6px 0; }
.sguide table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 14px; }
.sguide th, .sguide td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.sguide th { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sguide small { color: var(--muted); margin-left: 4px; }
/* paying inside the bag: Stripe's form fills the drawer */
.bag-back { margin: 0 0 12px; }
.bag-pay { min-height: 420px; margin: 0; border-radius: 12px; overflow: hidden; }
/* back office: unsaved changes keep the save bar in view */
.savebar.dirty { position: sticky; bottom: 0; z-index: 5; background: var(--bg, #111); padding: 12px; margin-left: -12px; margin-right: -12px; border-top: 1px solid var(--gold); box-shadow: 0 -8px 20px rgba(0,0,0,.4); }
.savebar.dirty .fine { color: var(--gold); }
.savebar .fine.err { color: #ff8a80; }
/* the shop view: full screen over the site (nandi.art/shop); its sheets (item, bag) open over it */
.shopview { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; }
.shopview.hidden { display: none; }
body.sv-open { overflow: hidden; }
body.sv-open .botnav { display: none !important; }
.sv-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(9,8,11,.9); }
.sv-head h2 { margin: 0; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; flex: 1; min-width: 0; }
.sv-back, .sv-bag { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.sv-bag b { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: #17131b; font-size: 11px; display: grid; place-items: center; padding: 0 4px; }
.sv-bag b[hidden] { display: none; }
.sv-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); }
.sv-body > div { max-width: 1100px; margin: 0 auto; }
.sv-empty { text-align: center; padding: 40px 10px; color: var(--muted); }
.sv-empty .btn { margin: 8px auto; }
.sv-h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.sv-order { background: var(--bg-3); border: 1px solid var(--line); border-radius: 0; padding: 14px; margin-bottom: 10px; display: grid; gap: 6px; }
.so-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .so-top span { color: var(--muted); font-size: 13px; }
.so-items { font-size: 14px; }
.so-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.so-steps span { font-size: 11.5px; color: var(--muted); display: grid; gap: 5px; }
.so-steps i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.so-steps .on { color: var(--ink); } .so-steps .on i { background: var(--gold); }
.sv-order .st { font-size: 13px; color: var(--gold); } .sv-order .st a { color: var(--gold); }
/* the long page's shop strip */
.shop-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 12px; margin-bottom: 8px; scrollbar-width: none; }
.shop-strip::-webkit-scrollbar { display: none; }
.sstrip { flex: 0 0 132px; scroll-snap-align: start; text-decoration: none; color: var(--ink); display: grid; gap: 4px; }
.sstrip img, .sstrip > span { width: 132px; height: 132px; border-radius: 12px; object-fit: cover; background: #d9d6d0; display: block; }
.sstrip small { color: var(--gold); font-size: 13px; }
@media (min-width: 1132px) { .sv-head { padding-left: calc((100vw - 1100px) / 2); padding-right: calc((100vw - 1100px) / 2); } }
/* navigation, 9 Oct: computers get plain text links (their own order) + an account menu on the fan card;
   phones get a 5-button bottom bar and the burger menu at the top right */
@media (min-width: 900px) {
  .topnav { background: none; border: 0; padding: 0; gap: 22px; }
  .topnav .tn { padding: 8px 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--muted); font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid transparent; }
  .topnav .tn:hover { color: var(--ink); }
  .topnav .tn.on, .topnav .tn.center.on { color: var(--ink); border-bottom-color: var(--gold); }
  .topnav .tn.center { color: var(--muted); }
  .topnav .tn.more { gap: 4px; }
  .navmenu { display: none !important; }
}
.navmenu { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.navmenu .mdot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #141016; }
@media (max-width: 899px) { .nav #navSignIn { display: none !important; } }   /* phones: Sign in is in the menu */
@media (max-width: 360px) { .navmenu { width: 34px; height: 34px; } .nav-r { gap: 6px; } }
.nav-r { position: relative; }
.acct-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 230px; padding: 6px; border-radius: 14px; background: #141118; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.5); display: grid; }
.acct-pop[hidden] { display: none; }
.acct-pop .mi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 14px var(--body); text-align: left; cursor: pointer; }
.acct-pop .mi:hover, .acct-pop .mi:focus-visible { background: rgba(255,255,255,.07); }
.acct-pop .mi svg { width: 18px; height: 18px; color: var(--muted); }
.acct-pop .mi.out { border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 10px 10px; color: var(--muted); }
/* the fan card: name and points closer together */
.navcard { gap: 6px; padding-left: 10px; }
.nc-who { align-items: flex-end; }
/* back office: Phone / Computer switch for the navigation */
.nav-views { display: flex; gap: 8px; margin: 0 0 14px; }
.navprevs .np > small + .navprev { margin-top: 0; }
.navprevs .np small.muted { display: block; margin: 6px 0 14px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.navprev.dprev { border-radius: 8px; }
.navprev.dprev span { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* Marketing & notifications: two tabs */
.msg-tabs.hidden { display: none; }
#msgPush .pushbox { margin-top: 0; border-top: 0; padding-top: 0; }
/* back office: song order buttons */
.md-ord { display: inline-flex; gap: 4px; margin-right: 10px; vertical-align: middle; }
.md-ord .small-btn { padding: 4px 8px; min-width: 0; }
/* top bar, 9 Oct (John: option B): phones have the burger on the left, then the logo; bag and fan card on the right */
.nav-r .bagbtn { margin: 0; }
@media (max-width: 899px) {
  .navshell .nav { padding: 0 8px !important; gap: 8px; justify-content: flex-start; }
  .navshell .nav .logo { margin-right: auto; }
  .navmenu { order: -1; }
}
/* the fan card hugs its content: name and rank on the left, the points ring right next to them */
.navcard { gap: 8px; padding: 0 4px 0 12px; }
.nc-who { align-items: flex-start; text-align: left; }
.nrl-s { display: none; }
@media (max-width: 899px) { .nrl-l { display: none; } .nrl-s { display: inline; } .navcard { height: 44px; } }
@media (max-width: 360px) { .navcard { padding-left: 10px; gap: 6px; } }
/* top bar on phones, 8 Oct (John): NANDI.ART on the left; on the right a round points button (opens the fan card),
   the bag, then the burger at the far right. No name or rank in the bar (they're on the fan card). */
@media (max-width: 899px) {
  .navmenu { order: 99; }
  .navshell .nav { padding: 0 8px 0 16px !important; }
  .nav-r { gap: 8px; }
  .nav-r #navCard, .nav-r #navJoin { order: 1; }
  .nav-r .bagbtn { order: 2; }
  .navcard { height: 42px; width: 42px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .navcard .nc-who { display: none; }
  .navcard .nc-ring { width: 40px; height: 40px; }
  .navcard .nc-ring b { font-size: 13px; }
}
/* the smallest phones: visitors' bag goes into the menu so Become a fan fits */
@media (max-width: 340px) { .nav-r:has(#navJoin:not(.hidden)) .bagbtn { display: none !important; } }
/* 8 Oct (John): no "+1" badges on the share buttons for now (they came back every day and looked too much).
   The buttons still know (data-earn), so they can come back by deleting this rule. */
[data-sp][data-earn]::before, [data-sp][data-earn]::after, #waInvite[data-earn]::before, #waInvite[data-earn]::after { content: none !important; display: none !important; }
/* the empty bag: clearly empty, then a few suggestions */
.bag-empty { text-align: center; padding: 18px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.bag-empty .be-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); color: var(--muted); }
.bag-empty .empty { margin: 10px 0 6px; font: 400 22px/1.1 var(--display); text-transform: uppercase; color: var(--ink); }
.bag-picks-h { margin: 0 0 10px; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bag-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.bpick { display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.bpick img, .bpick span { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #d9d6d0; display: block; }
.bpick b { font: 400 13px/1.15 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpick small { color: var(--gold); font-size: 12px; }

/* tabs look the same everywhere (the .seg style of the fan card and leaderboard): marketing popup, shop, back office */
.msg-tabs.seg { margin: 4px 0 14px; }
.sv-tabs.seg { width: calc(100% - 32px); max-width: 420px; margin: 12px 16px 4px; }
@media (min-width: 1132px) { .sv-tabs.seg { margin-left: calc((100vw - 1100px) / 2); } }
.nav-views.seg { display: grid; max-width: 320px; margin: 0 0 14px; }
.seg > button[aria-pressed="true"] { background: rgba(155,92,255,.25); color: var(--ink); }
/* the phone menu (burger, top right): a panel that slides in from the right, full height, like most apps */
@keyframes nb-from-right { from { transform: translateX(100%); } to { transform: none; } }
@media (max-width: 899px) {
  .more-pop { place-items: stretch end; padding: 0; background: rgba(6,5,7,.6); }
  .more-sheet { width: min(86vw, 360px); height: 100%; max-height: none; border-radius: 22px 0 0 22px; border-top: 0; border-left: 1px solid rgba(255,255,255,.12);
    padding: calc(18px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); animation: nb-from-right .3s cubic-bezier(.22,1,.36,1); box-shadow: -24px 0 60px rgba(0,0,0,.5); }
  .more-sheet .grab { display: none; }
  .more-sheet .x { top: calc(12px + env(safe-area-inset-top)); }
  .more-sheet h3 { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .more-sheet { animation: none !important; } }
/* popups, side menus and the shop: the page underneath stays still; only the popup scrolls */
html.scroll-lock, html.scroll-lock body { overflow: hidden !important; }
.overlay .drawer-body, .more-sheet, .overlay .modal, .sv-body, .bag-pay { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.overlay .modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
/* the payment form scrolls with the bag (no clipping box around Stripe's frame) */
.bag-pay { overflow: visible !important; min-height: 460px; }
/* the shop's top bar looks like the main page's: purple glow, glass bar */
.shopview { background: radial-gradient(70% 45% at 88% -5%, rgba(155,92,255,.22), transparent 70%), radial-gradient(60% 40% at 0% 0%, rgba(155,92,255,.08), transparent 70%), var(--bg); }
.sv-head { background: rgba(9,8,11,.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 899px) {
  .sv-head { margin: calc(8px + env(safe-area-inset-top)) 10px 0; padding: 8px 8px 8px 10px; height: 60px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
    background: rgba(22,18,28,.55); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  .sv-head h2 { font-size: 20px; }
  .sv-back, .sv-bag { width: 40px; height: 40px; }
}
/* 8 Oct (John): one button shape everywhere: rounded (pill), like the Copy and Share buttons */
.btn, .chip, .small-btn, .sharebtn, .linkbtn.btnish { border-radius: 999px !important; }
.modal .btn, .drawer .btn { border-radius: 999px !important; }
.sv-order, .shop-closed { border-radius: 14px !important; }
.bag-cont { margin-top: 10px; }
.sabout ul { margin: 6px 0 8px; padding-left: 18px; } .sabout li { margin: 3px 0; font-size: 14px; } .sabout p { margin: 8px 0 0; }

/* the shop: thank-you note on Your orders after paying; Your orders from the bag */
.sv-thanks { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(233,196,106,.45); background: rgba(233,196,106,.1); font-size: 14px; line-height: 1.45; }
.sv-thanks b { color: var(--gold, #E9C46A); }
.bag-orders { margin-top: 8px; }

/* the bag for visitors: join or sign in to buy */
.bag-gate { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(233,196,106,.35); background: rgba(233,196,106,.07); }
.bag-gate p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.bag-gate .btn + .btn { margin-top: 8px; }

/* Gigs: the next gig as a feature, with the gig page's details (14 Oct) */
.gfeat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 18px; margin-bottom: 14px; border: 1px solid rgba(233,196,106,.35); border-radius: 18px; background: linear-gradient(180deg, rgba(43,20,80,.35), rgba(6,5,7,.2)); }
.gf-pv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #060507; }
.gf-pv > img { position: absolute; inset: 0 0 28% 0; width: 100%; height: 72%; object-fit: cover; object-position: 50% 20%; }
.gf-pv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #060507 30%, rgba(6,5,7,.7) 44%, rgba(6,5,7,0) 62%); }
.gf-k { position: absolute; top: 12px; left: 14px; z-index: 1; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gf-b { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; }
.gf-b h3 { margin: 0; font: 400 clamp(48px, 9vw, 84px)/1 var(--display); text-transform: uppercase; color: var(--gold); }
.gf-sup { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 15px var(--display); text-transform: uppercase; }
.gf-sup img { height: 46px; width: auto; max-width: 36%; object-fit: contain; }   /* bigger, less black between them (15 Oct) */
.gf-when { margin: 0; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.gf-venue { margin: 6px 0 4px; font: 400 36px/1 var(--display); text-transform: uppercase; }
.gf-title { margin: 0 0 4px; font-weight: 700; }
.gf-addr { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.gf-tix { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 8px; }
.gf-tix .p { font: 400 30px var(--display); color: var(--gold); }
.gf-tix .p small { font: 400 12px var(--body); color: var(--muted); margin-left: 4px; }
.gf-soon { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.07); }
.gf-cd { margin: 0 0 6px; color: var(--muted); font-size: 14px; } .gf-cd b { color: var(--gold); font: 400 22px var(--display); }
.gf-h { margin: 18px 0 8px; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gf-acts .a { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gf-acts .a:last-child { border-bottom: 0; }
.gf-acts .ph { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #241b2c; border: 1px solid var(--line); }
.gf-acts b { display: block; font: 400 20px/1.1 var(--display); text-transform: uppercase; }
.gf-acts .sl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gf-acts .sl a { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); color: inherit; }
.gf-acts .sl a:hover { border-color: var(--gold); color: var(--gold); }
.gf-faq details, .gf-fly { border-top: 1px solid var(--line); padding: 10px 0; font-size: 14px; }
.gf-faq summary, .gf-fly summary { font-weight: 700; cursor: pointer; }
.gf-faq p { margin: 6px 0 0; color: var(--muted); white-space: pre-line; }
.gf-fly img { display: block; max-width: 280px; width: 100%; margin-top: 10px; border-radius: 8px; }
.gf-acts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.gf-acts-row .sharebtn { margin-left: auto; }
.gwith { margin: 4px 0 0; font-size: 14px; color: var(--muted); } .gwith b { color: var(--gold); }
@media (max-width: 800px) {
  .gfeat { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .gf-venue { font-size: 30px; }
}

/* low numbers stay hidden until there are enough (Settings > Mission) */
.hx-count-in.lowfans > .cell.lownum { display: none !important; }
.hx-count-in.lowfans { grid-template-columns: 1fr auto; }
@media (max-width: 800px) { .hx-count-in.lowfans { grid-template-columns: 1fr; } }
.tstats [hidden] { display: none !important; }


/* booking enquiries (Gigs) */
.enq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px dashed rgba(233,196,106,.35); border-radius: 14px; }
.enq-row p { margin: 0; color: var(--muted); font-size: 14px; }
#enqForm textarea { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--ink); font: 16px var(--body); resize: vertical; }
#enqForm .btn { width: 100%; margin-top: 6px; }
#enqForm [hidden], #enqDone[hidden] { display: none !important; }

/* the mission bar shows the real share of the target, no minimum (John, 14 Oct) */
.bar.big > i, #goalBar { min-width: 0 !important; }
#moreLinks .mi { text-decoration: none; }
.enq-msg-err { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,155,138,.12); color: #ffb3a6; font-size: 14px; }
.enq-msg-err[hidden] { display: none; }


/* Share on the video player and photo viewer (14 Oct): the link says who shared it and what */
.soc-bar .mshare { color: var(--share, #7fdca4); border-color: var(--share-line, rgba(127,220,164,.45)); }
.soc-bar .mshare .appico { width: 16px; height: 16px; }

.ps-line { margin: 10px 0 14px; font-size: 13px; color: var(--muted); } .ps-line b { color: var(--ink); }
#rewardNext .pgoal { margin-top: 0; }
.sp-share { margin-top: 10px; }
#earnIntro { margin: 16px 2px 14px; }

/* Loading (14 Oct, John: on slow internet a tapped song or video looked broken): a spinning ring until it plays */
@keyframes nb-spin { to { transform: rotate(360deg); } }
.track.loading .play, .ul-go.loading, .vcard.loading { position: relative; }
.track.loading .play svg { opacity: 0; }
.track.loading .play::after, .ul-go.loading::after, .vcard.loading::after, .vp-box.loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-sizing: border-box;   /* the ring inside its size, so it sits dead centre (23 Oct) */
  border: 2.5px solid rgba(233,196,106,.25); border-top-color: var(--gold, #e9c46a); animation: nb-spin .8s linear infinite; pointer-events: none; }
.ul-go.loading { color: transparent !important; }
.vcard.loading::after, .vp-box.loading::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-width: 3px; }
.vcard.loading::before { content: ""; position: absolute; inset: 0; background: rgba(6,5,7,.45); border-radius: inherit; z-index: 1; }
.vcard.loading::after { z-index: 2; }
.vp-box.loading::after { top: 45%; }
@media (prefers-reduced-motion: reduce) { .track.loading .play::after, .ul-go.loading::after, .vcard.loading::after, .vp-box.loading::after { animation-duration: 2.4s; } }
.track.loading .play::after { border-color: rgba(0,0,0,.18); border-top-color: currentColor; }

/* Locked items in the shop (15 Oct, John: make gold obviously locked for visitors) */
.scard .sc-img .lk-badge, .sstrip .ss-img .lk-badge { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: #1a1206; box-shadow: 0 2px 10px rgba(0,0,0,.5); z-index: 1; }
.lk-badge svg { width: 15px; height: 15px; }
.scard .sc-img .lk-tag, .sstrip .ss-img .lk-tag { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 1px 6px rgba(0,0,0,.8); z-index: 1; font-style: normal; }
.lk-badge, .lk-tag, .lk-p { font-style: normal; }
.scard.slocked .sc-img img, .sstrip.slocked img { filter: brightness(.45) saturate(.7); }
.sstrip .ss-img { position: relative; overflow: hidden; }
.lk-p { color: var(--gold); white-space: nowrap; } .lk-p svg { width: 11px; height: 11px; vertical-align: -1px; }
.lk-pr { color: var(--muted); font-size: .92em; }
.sstrip small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; }
.sp-lockbox { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 12px; margin: 0 0 10px; border-radius: 12px;
  background: rgba(233,196,106,.1); border: 1px solid rgba(233,196,106,.5); }
.sp-lockbox .lb { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #1a1206; display: grid; place-items: center; }
.sp-lockbox .lb svg { width: 15px; height: 15px; }
.sp-lockbox p { margin: 0; font-size: 14px; line-height: 1.4; } .sp-lockbox p b { color: var(--gold); }
.sp-lockbox .pg-bar { grid-column: 1 / -1; margin: 0; } .sp-lockbox .pg-bar i { background: linear-gradient(90deg, #9b5cff, #e9c46a); }
.sp-lockbox + .btn { margin-bottom: 16px; }
.sp-imgs.sp-dim img { filter: brightness(.7); }
.sstrip .ss-img .lk-tag { font-size: 9px; letter-spacing: .08em; bottom: 7px; }
.sstrip .ss-img .lk-badge { width: 28px; height: 28px; top: 6px; left: 6px; }
.sstrip .ss-img .lk-badge svg { width: 13px; height: 13px; }
.lk-pr { font-style: normal; }

/* fan name taken: free names to tap (15 Oct) */
.namehint .namepick { display: inline-block; margin: 6px 6px 0 0; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(233,196,106,.6); background: rgba(233,196,106,.1);
  color: var(--gold); font: 400 12px var(--mono); cursor: pointer; }
.namehint .namepick:active { transform: scale(.96); }
#ladder button.ul-lock { background: transparent; cursor: pointer; font: inherit; padding: 0; }

/* ---------- Support my journey (16 Oct): the nudge, the sheet (Ways, Merch, Support), thank you ---------- */
.sj-nudge { position: fixed; z-index: 90; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(420px, calc(100% - 24px)); box-sizing: border-box;
  display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid rgba(233,196,106,.38);
  background: linear-gradient(100deg, rgba(155,92,255,.24), rgba(233,196,106,.14)), #1a1420; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: nb-up .4s cubic-bezier(.22,1,.36,1); }
.sj-nudge.out { opacity: 0; transform: translate(-50%, 16px); transition: opacity .35s, transform .35s; }
.sj-nudge svg { flex: none; color: var(--gold); }
.sj-nudge .t { flex: 1; min-width: 0; } .sj-nudge b { display: block; font-size: 14.5px; } .sj-nudge span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sj-nudge .go { flex: none; background: none; border: 0; color: var(--gold); font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 10px 4px; cursor: pointer; white-space: nowrap; }
.sj-nudge .xx { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: var(--muted); font-size: 18px; cursor: pointer; }
@media (min-width: 900px) { .sj-nudge { bottom: 24px; } }
.sj-sheet { max-height: 90vh; }
.sj-kick { font: 700 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c4a1ff; margin: 6px 0 0; }
.sj-sheet h3 { font: 400 30px/1 var(--display); text-transform: uppercase; margin: 6px 0 10px; } .sj-sheet h3 b { color: var(--gold); font-weight: 400; }
.sj-story { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; } .sj-story p { margin: 0; font-size: 14px; line-height: 1.5; color: #e4ddd0; }
.sj-story img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.sj-ways { display: grid; gap: 8px; }
.sj-way { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sj-way .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(233,196,106,.14); color: var(--gold); }
.sj-way .ic.p { background: rgba(155,92,255,.16); color: #c4a1ff; } .sj-way .ic.g { background: rgba(127,220,164,.14); color: #7fdca4; }
.sj-way b { display: block; font-size: 14.5px; } .sj-way small { display: block; font-size: 12.5px; color: var(--muted); } .sj-way .ch { margin-left: auto; color: var(--muted); }
.sj-fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.sj-merch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sj-mi { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); padding: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sj-mi img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; } .sj-mi span { display: block; padding: 8px 10px; font-size: 13px; } .sj-mi b { display: block; color: var(--gold); }
.sj-intro { margin: 0 0 10px; font-size: 14px; color: #e4ddd0; }
.sj-amts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sj-amt { padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sj-amt b { display: block; font: 400 26px/1 var(--display); } .sj-amt small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.sj-amt.on { border-color: var(--gold); background: rgba(233,196,106,.1); } .sj-amt.on b { color: var(--gold); }
.sj-other { display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 0 14px; height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.sj-other.on { border-color: var(--gold); } .sj-other span { font: 400 24px var(--display); color: var(--muted); }
.sj-other input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 400 16px var(--body); outline: none; }
.sj-msg { width: 100%; box-sizing: border-box; min-height: 48px; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--ink); font: 400 15px var(--body); resize: vertical; }
.sj-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.sj-young { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(155,92,255,.12); font-size: 13.5px; }
.sj-err { color: #ff9a8a; font-size: 13px; margin: 8px 0 0; }
.sj-thanks { text-align: center; padding: 18px 0 6px; } .sj-thanks .big { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(233,196,106,.14); color: var(--gold); font: 400 36px var(--display); }
.sj-thanks p { color: #e4ddd0; } .sj-thanks .sign { color: var(--muted); }
.more-sheet .mi.sj-mi-line { color: var(--gold); }
.sj-ref { margin: 14px 0 16px; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sj-ref b { color: var(--ink); letter-spacing: .08em; }
.sj-link { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted); font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.sj-gifts { display: grid; gap: 8px; }
.sj-gift { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.03); }
.sj-gift b { display: block; font: 400 24px/1 var(--display); } .sj-gift small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.sj-gift p { margin: 6px 0 0; font-size: 13px; color: #e4ddd0; overflow-wrap: anywhere; } .sj-gift.off b { color: var(--muted); }
.sj-gift .r { text-align: right; flex: none; } .sj-gift .r span { display: block; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sj-gift .r b { font: 700 13px var(--mono); letter-spacing: .06em; margin: 3px 0 6px; } .sj-gift .r a { font-size: 12.5px; color: var(--gold); }
/* the Support sheet: a bottom sheet on phones (like the mock-ups), a centred panel on computers; not the menu's side drawer */
.more-pop.sj-pop { place-items: end stretch; padding: 0; background: rgba(6,5,7,.6); }
.sj-pop .more-sheet.sj-sheet { width: 100%; height: auto; max-height: 92vh; border-radius: 22px 22px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.12);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); animation: nb-up .32s cubic-bezier(.22,1,.36,1); box-shadow: 0 -24px 60px rgba(0,0,0,.5); }
.sj-pop .sj-sheet .grab { display: block; }
.sj-pop .sj-sheet .x { top: 12px; }
@media (min-width: 900px) {
  .more-pop.sj-pop { place-items: center; padding: 24px; }
  .sj-pop .more-sheet.sj-sheet { width: 440px; max-height: calc(100vh - 48px); border-radius: 22px; border: 1px solid rgba(255,255,255,.12); padding: 18px 24px 24px; animation: nb-pop .32s cubic-bezier(.22,1,.36,1); }
  .sj-pop .sj-sheet .grab { display: none; }
}

/* ---------- layers (16 Oct): one close button everywhere; on phones, sheets that rise from the bottom ----------
   Bottom sheets: comments and lyrics, a shop item, the bag, share, join and sign in, emails and notifications,
   booking enquiries, Support. The menu stays a drawer from the right; quick yes/no pop-ups stay in the middle;
   the shop, videos and photos stay full screen. Computers keep the side panels. */
.modal .x, .drawer .x, .more-sheet .x { top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border: 0 !important; border-radius: 50%; background: rgba(255,255,255,.08); backdrop-filter: none; font-size: 0; color: var(--ink); z-index: 3; }
.modal .x::before, .modal .x::after, .drawer .x::before, .drawer .x::after, .more-sheet .x::before, .more-sheet .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; }
.modal .x::before, .drawer .x::before, .more-sheet .x::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal .x::after, .drawer .x::after, .more-sheet .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal .x:hover, .drawer .x:hover, .more-sheet .x:hover, .modal .x:focus-visible, .drawer .x:focus-visible, .more-sheet .x:focus-visible { background: rgba(255,255,255,.16); }
@keyframes nb-sheet { from { transform: translateY(36%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 899px) {
  .overlay:not(.more-pop):not(.vpop):not(.lightbox):not(.pop-center) { place-items: end stretch; padding: 0; }
  .overlay:not(.pop-center) > .modal { max-width: none !important; width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 20px);
    border-radius: 22px 22px 0 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
  .overlay > .drawer { inset: auto 0 0 0; width: 100%; height: calc(100dvh - env(safe-area-inset-top) - 20px); max-height: 94dvh;
    border-radius: 22px 22px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.14) !important; }
  .overlay:not(.pop-center) > .modal::before, .overlay > .drawer::before { content: ""; display: block; flex: none; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin: 0 auto 6px; }
  .overlay > .drawer::before { margin-top: 8px; }
  .overlay:not(.hidden):not(.pop-center) > .modal, .overlay:not(.hidden) > .drawer { animation: nb-sheet .34s cubic-bezier(.22,1,.36,1); }
  .drawer-head { padding: 6px 20px 12px; }
  .drawer-head h3 { font-size: 30px; margin-right: 44px; }
  .modal h3 { margin-right: 40px; }
  .drawer .drawer-body, .shop-drawer .drawer-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  #joinModal .modal { padding-top: 8px; max-height: calc(100dvh - env(safe-area-inset-top) - 20px); }
  .lightbox .x { top: calc(14px + env(safe-area-inset-top)) !important; }
}
@media (prefers-reduced-motion: reduce) { .overlay .modal, .overlay .drawer, .sj-nudge, .shop-nudge { animation: none !important; } }
/* the video player's close button sits above the video: keep room for it (and the notch) so it's never cut off (16 Oct) */
.vpop { padding-top: calc(52px + env(safe-area-inset-top)); }
/* Support my journey (17 Oct): the title, "From Nandi" under it, then the tabs in the site's tab style (.seg), the same on every tab */
.sj-sheet h3 { margin: 6px 48px 0 0; }
.sj-from { margin: 6px 0 0; }
.sj-tabs.seg { margin: 14px 0 16px; }
.sj-pay { margin-top: 14px; }
/* phones (18 Oct, John): the page scrolling behind the top bar is softly frosted (the bar itself stays crisp). No band and
   no edge: the blur fades in at the top, where the iPhone lets the page start (just under the clock), and fades out just
   below the bar, so there's never a line across a photo. */
@media (max-width: 899px) {
  .topshade { top: 0; height: calc(env(safe-area-inset-top) + 104px); background: rgba(6,5,7,.28);
    -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%); }
}
/* Support: the thank-you and Your gifts, spaced like the rest of the sheet (17 Oct, John) */
.sj-sheet .sj-thanks { padding: 10px 0 4px; }
.sj-sheet .sj-thanks h3 { margin: 6px 0 14px; }
.sj-sheet .sj-thanks p { margin: 0 auto 10px; max-width: 34ch; font-size: 15px; line-height: 1.55; }
.sj-sheet .sj-thanks .sj-kick { margin: 0; color: #c4a1ff; font-size: 10.5px; line-height: 1.4; max-width: none; }
.sj-sheet .sj-thanks .sign { margin: 2px auto 20px; color: var(--gold); font: 400 15px var(--body); }
.sj-sheet .sj-thanks .sign::before { content: "\2014\00a0"; }
.sj-sheet .sj-thanks .sj-ref, .sj-sheet .sj-ref { max-width: none; display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.03); text-align: left; }
.sj-sheet .sj-ref b { font: 700 14px var(--mono); letter-spacing: .08em; }
.sj-sheet .sj-link { margin-top: 16px; }
.sj-sheet #sjTitle + .sj-gifts, .sj-sheet #sjTitle + .sj-fine { margin-top: 18px; }
.sj-sheet .sj-gifts + .sj-fine { margin: 12px 0 0; }
.sj-gift { padding: 14px 16px; }
/* Support: before paying, the fan reads Nandi's words and ticks that they understand it's a gift (17 Oct) */
.sj-confirm { padding: 2px 0 4px; }
.sj-confirm h4 { margin: 4px 0 12px; font: 400 24px/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.sj-confirm p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #e4ddd0; }
.sj-confirm .sj-kick { margin: 0; }
.sj-confirm .sign { margin: 0 0 16px; color: var(--gold); } .sj-confirm .sign::before { content: "\2014\00a0"; }
.sj-check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.03); cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink); }
.sj-check:has(input:checked) { border-color: rgba(233,196,106,.6); background: rgba(233,196,106,.07); }
.sj-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gold); }
.sj-confirm p.sj-kick { font-size: 10.5px; line-height: 1.4; color: #c4a1ff; }
.sj-confirm [data-sjconfirm]:disabled { opacity: .45; cursor: not-allowed; }
/* 17 Oct (John): no full stop after the section titles (the logo keeps its dot) */
h1 .tf, h2 .tf, h3 .tf { display: none !important; }
/* computers: Support my journey as a heart link in the top bar (17 Oct, John); phones have it in the menu */
.sjbtn { display: none; }
@media (min-width: 900px) {
  .sjbtn:not(.hidden) { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 38px; padding: 0 14px 0 12px; margin-right: 8px; border-radius: 999px;
    border: 1px solid rgba(233,196,106,.45); background: rgba(233,196,106,.07); color: var(--gold); font: 600 14px var(--body); cursor: pointer; transition: background .2s, border-color .2s; }
  .sjbtn:hover { background: rgba(233,196,106,.16); border-color: var(--gold); }
  .sjbtn svg { flex: none; }
}
/* 17 Oct (John): clear space between a section's title and the words under it (now the titles have no full stop) */
h2 .hand { margin-top: 18px !important; }
.head > p { margin-top: 6px; }
body.bo .bo-content .head p { margin-top: 12px; }
/* the home screen app on phones (18 Oct, John): there the page runs up under the clock, so the frosting starts below the
   clock (not at the top of the screen) and sits round the bar exactly as it does in the browser: no black, no blur under
   the clock, no band or line. The bar also sits a little lower. */
@media (max-width: 899px) {
  html.app .navshell { top: calc(16px + env(safe-area-inset-top)); }
  html.app body { padding-top: calc(94px + env(safe-area-inset-top)); }
  html.app .topshade { top: env(safe-area-inset-top); height: 112px; }
}
@media (max-width: 899px) { html.app { --toastTop: calc(env(safe-area-inset-top) + 92px); } }