/* ============================================================
   BASQUIAT SKIN — overlay that paints the whole DAWJAY app
   in a Basquiat-inspired raw-painterly aesthetic.
   Loaded LAST in DAJAI DAW.html so it overrides cleanly.
   Activates whenever `body` is on the page (always).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&family=Archivo+Black&family=Bungee&family=Caveat:wght@500;700&display=swap');

:root {
  --bsq-ochre: #f0a04b;
  --bsq-ochre-d: #8a4a18;
  --bsq-red:   #c63a3a;
  --bsq-red-d: #4d0a14;
  --bsq-blue:  #1a4470;
  --bsq-blue-d: #08263d;
  --bsq-yellow:#f0c84a;
  --bsq-cream: #f4e8d4;
  --bsq-ink:   #0a0606;
  --bsq-marker:'Permanent Marker', cursive;
  --bsq-script:'Caveat', cursive;
  --bsq-stencil:'Bungee', sans-serif;
  --bsq-type:  'Archivo Black', sans-serif;
  --bsq-mono:  'Special Elite', monospace;
}

/* === GLOBAL BG · cream-paper canvas with painterly texture === */
body::before {
  background:
    radial-gradient(ellipse at 22% -8%, rgba(240,160,75,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 92% 110%, rgba(198,58,58,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 60%, rgba(26,68,112,0.08) 0%, transparent 60%),
    var(--bg-deep) !important;
}
body::after {
  /* canvas grain / brush texture */
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image:
    repeating-linear-gradient(13deg, rgba(244,232,212,0.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-31deg, rgba(244,232,212,0.014) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* === HERO TYPE · marker + display ============================ */
.hero4 h1, .listen-hero-info h1, .explore-hd h1, .feed-hd h1,
.crystal .side h1, .sec4-hd-l h2, .ex-section-hd h2,
.reality-hd h2, .creator-hd h1, .ex-hero-info h2, .lv-sec-hd h2,
.sb4-name, .brand-name {
  font-family: var(--bsq-type), system-ui, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}

/* Replace italic-serif em with hand-marker for that Basquiat scrawl */
.hero4 h1 em,
.listen-hero-info h1 em,
.explore-hd h1 em,
.feed-hd h1 em,
.crystal .side h1 em,
.sec4-hd-l h2 em,
.ex-section-hd h2 em,
.reality-hd h2 em,
.lv-sec-hd h2 em,
.creator-hd h1 em {
  font-family: var(--bsq-marker), cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-text-fill-color: var(--bsq-ochre) !important;
  color: var(--bsq-ochre) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  position: relative;
  display: inline-block;
  transform: rotate(-1.6deg);
  padding: 0 0.04em;
}

/* === BASQUIAT CROWN · on display h1 ========================== */
.hero4 h1::before, .listen-hero-info h1::before, .ex-hero-info h2::before,
.creator-hd h1::before, .reality-hd h2::before {
  content: '';
  display: block;
  width: 96px; height: 38px; margin-bottom: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 38'><g fill='none' stroke='%23f0a04b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 32 L12 8 L24 24 L36 4 L48 24 L60 4 L72 24 L84 8 L90 32 Z'/><line x1='6' y1='34' x2='90' y2='34'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}

/* === KICKERS · stencil black-block style ===================== */
.kicker, .kicker-sm, .lbl, .label, .sec4-hd-l .kicker,
.sec-hd-left .lbl, .mz-kicker, .r-kicker,
.sov-hd, .sb4-nav span, .left-tab span, .ex-section-hd .hint,
.sec-hd-left h2 + .lbl, .reality-hd .r-kicker,
.q-kind, .pw-overlay-card .pw-overlay-s, .brand-tag {
  font-family: var(--bsq-stencil), sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* === BLURBS / italic editorial → typewriter ================= */
.hero4 .blurb, .listen-hero-info .blurb, .blurb,
.ex-hero-info, .feed-view .sub, .seo-tt .info .t,
.cap-body, .dm-suggest, .r-card.lose ul li,
.fd-post-cap, .seo-cap .cap-body, .reality-hd p {
  font-family: var(--bsq-mono), monospace !important;
  font-style: normal !important;
  letter-spacing: 0.005em !important;
}

/* === BUTTONS · hand-stamped rectangle ======================== */
.btn-prime4, .btn-prime-listen, .ai-go, .pay-out, .pay-keep,
.btn-ghost4, .btn-ghost-listen, .lv-more, .sec4-more,
.ex-follow, .fd-follow, .fd-tip, .fd-unlock,
.th-buy, .seo-copy, .seo-action, .ppv-unlock,
.r-ai-btn, .r-ppv, .dm-send, .ppv-overlay-btn, .pw-overlay-btn,
.btn-ai-top, .wk3-upgrade, .wk4-champ, .mode-switch .opt,
.tip-amt, .qs-btn, .q-act, .dm-suggest-btn, .dj-btn,
.pad-mode, .pad, .stem-btn, .pay-out, .crystal-play,
.crystal-iconbtn, .preview-toggle, .dm-attach,
.lib-row .add-btn, .ai-quick, .seo-tag, .platform-pill {
  border-radius: 4px !important;
  border: 2px solid currentColor !important;
  font-family: var(--bsq-type) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.55) !important;
  transition: transform 0.08s var(--spring), box-shadow 0.08s, background 0.12s !important;
}
.btn-prime4:hover, .btn-prime-listen:hover, .ai-go:hover,
.pay-out:hover, .th-buy:hover, .seo-copy:hover,
.r-ai-btn:hover:not(:disabled), .r-ppv:hover:not(:disabled),
.dm-send:hover, .ppv-overlay-btn:hover, .pw-overlay-btn:hover,
.fd-tip:hover, .fd-unlock:hover, .ex-follow:hover,
.fd-follow:hover, .btn-ai-top:hover, .wk4-champ:hover,
.dm-suggest-btn:hover, .crystal-play:hover, .lv-more:hover,
.sec4-more:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.7) !important;
}
.btn-prime4:active, .btn-prime-listen:active, .ai-go:active,
.r-ppv:active, .r-ai-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 0 rgba(0,0,0,0.5) !important;
}
.btn-prime4 { background: var(--bsq-ochre) !important; color: var(--bsq-ink) !important; border-color: var(--bsq-ink) !important; }
.btn-prime-listen { background: var(--bsq-yellow) !important; color: var(--bsq-ink) !important; border-color: var(--bsq-ink) !important; }
.ai-go, .r-ai-btn, .dm-suggest-btn { background: var(--bsq-red) !important; color: var(--bsq-cream) !important; border-color: var(--bsq-ink) !important; }
.fd-tip, .pay-out { background: var(--bsq-yellow) !important; color: var(--bsq-ink) !important; border-color: var(--bsq-ink) !important; }
.fd-unlock, .ppv-unlock, .pw-overlay-btn { background: var(--bsq-ochre) !important; color: var(--bsq-ink) !important; border-color: var(--bsq-ink) !important; }
.th-buy { background: var(--bsq-blue) !important; color: var(--bsq-cream) !important; border-color: var(--bsq-ink) !important; }

/* Mode switch · stencil pills with painted-block active state */
.mode-switch {
  border: 2px solid var(--bsq-ink) !important;
  background: var(--bsq-cream) !important;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.6) !important;
  border-radius: 4px !important;
  padding: 2px !important;
}
.mode-switch .opt {
  border-radius: 2px !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bsq-ink) !important;
  background: transparent !important;
}
.mode-switch .opt.active { background: var(--bsq-ink) !important; color: var(--bsq-yellow) !important; box-shadow: none !important; }
.mode-switch .opt.listen.active  { background: var(--bsq-ochre) !important; color: var(--bsq-ink) !important; }
.mode-switch .opt.explore.active { background: var(--bsq-yellow) !important; color: var(--bsq-ink) !important; }
.mode-switch .opt.feed.active    { background: var(--bsq-red) !important; color: var(--bsq-cream) !important; }
.mode-switch .opt.dj.active      { background: var(--bsq-blue) !important; color: var(--bsq-cream) !important; }
.mode-switch .opt.creator.active { background: var(--bsq-red) !important; color: var(--bsq-cream) !important; }
.mode-switch .opt:hover { transform: none !important; }

/* === CARDS · raw paper with hand-drawn outline ============== */
.q4-tile, .mix4-card .cover-wrap, .single4-cv, .live4-card,
.mix3-card .cover-wrap, .single3 .cover-wrap, .live3-card,
.mix4-cv, .ex-tile-cv, .ex-clip-vid, .uni4, .vault3-card,
.replay4, .feature, .feed-shell .fd-post, .clip-card,
.mz-channel, .mz-earnings-left, .mz-payout-card, .pay-card,
.pay-balance, .throne-card, .queue-shell, .q-row,
.seo-card, .seo-tt, .sov-dept, .sov-treasury-l, .sov-treasury-r,
.r-card, .reality, .lv-quick, .ex-cat, .ex-leaderboard,
.dm-shell, .mz-table, .chart3, .chart4, .replay3 {
  border-radius: 3px !important;
  border: 2px solid var(--bsq-ink) !important;
  box-shadow: 6px 6px 0 0 rgba(10,6,6,0.6) !important;
  background: var(--surface-1) !important;
}

/* Light cream cards for stat surfaces */
.mz-earnings-left, .pay-balance, .reality, .sov-treasury-l {
  background:
    linear-gradient(135deg, var(--bsq-cream), #e8d8b8) !important;
  color: var(--bsq-ink) !important;
}
.mz-earnings-left *, .pay-balance *, .reality *, .sov-treasury-l * {
  color: var(--bsq-ink) !important;
}
.mz-earnings-left .mz-kicker, .pay-balance .kicker-sm, .reality .r-kicker {
  color: var(--bsq-red) !important;
}
.mz-earnings-left .mz-amount, .pay-balance .pay-amt, .sov-treasury-l .sov-nav, .r-wallet .rw-v {
  color: var(--bsq-ink) !important;
  -webkit-text-fill-color: var(--bsq-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
}
.mz-earnings-left .mz-amount span, .pay-balance .pay-amt span, .sov-treasury-l .sov-nav span {
  color: var(--bsq-red) !important;
}

/* === COVER ART · paint smear overlay ========================= */
.hero4-cover, .mix4-cv, .single4-cv, .ex-tile-cv,
.ex-clip-vid, .lv-mix-card .cv, .q4-tile .cv,
.lv-quick .cv, .sb4-row .cv, .lib-row .cv,
.pb3-cover, .dj-library-drawer .item .cv {
  position: relative;
}
.hero4-cover::after, .mix4-cv::after, .single4-cv::after,
.ex-tile-cv::after, .ex-clip-vid::after, .lv-mix-card .cv::after,
.q4-tile .cv::after, .lv-quick .cv::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(35deg, rgba(10,6,6,0.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(244,232,212,0.06) 0 1px, transparent 1px 9px);
  mix-blend-mode: overlay;
}

/* === SCRIBBLE UNDERLINE on accents (Basquiat-style emphasis) === */
.mz-amount, .pay-amt, .sov-nav, .ex-amount, .r-wallet .rw-v {
  position: relative; display: inline-block;
}
.mz-amount::after, .pay-amt::after, .sov-nav::after, .r-wallet .rw-v::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M0 4 Q 10 0 20 4 T 40 4 T 60 4 T 80 4 T 100 4' stroke='%23c63a3a' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

/* === BRAND mark · crown stamp =============================== */
.brand-name, .sb4-name {
  position: relative;
}
.brand-name::after, .sb4-name::after {
  content: '™'; font-family: var(--bsq-type), sans-serif;
  font-size: 10px; vertical-align: super; color: var(--bsq-red);
  margin-left: 3px;
}
.brand-logo, .sb4-logo {
  background: var(--bsq-ink) !important;
  border: 2px solid var(--bsq-ochre) !important;
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.6) !important;
}
.brand-logo span, .sb4-logo span { color: var(--bsq-ochre) !important; font-family: var(--bsq-type) !important; }

/* === BADGES become hand-stamped ============================= */
.hi-badge, .badge-ai, .live-pill, .pip, .live-pip, .live-pip4,
.q-ppv, .q-kind, .seo-tag, .badge-e, .badge-e4, .tier-tag,
.pw-badge, .pw-chip, .ex-tile-rank, .ex-clip-badge,
.ex-rank-orb, .ex-trend-pill, .platform-pill, .ctr-badge,
.tr-pill {
  border-radius: 3px !important;
  border: 1.5px solid var(--bsq-ink) !important;
  font-family: var(--bsq-stencil), sans-serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* === Section heads · framed in painter's tape =============== */
.lv-sec-hd, .sec4-hd, .row-section-hd, .ex-section-hd,
.r-card h3, .seo-card .kicker-sm + h3 {
  position: relative;
}

/* Mark ©, ®, ™ stamps next to key brand surfaces */
.brand-tag::after, .sov-hd::after {
  content: ' ©';
  color: var(--bsq-red);
  font-family: var(--bsq-type), sans-serif;
}

/* === SLOGANS crossed out (where deserved) =================== */
.r-card.admit .slop em {
  position: relative;
  color: var(--bsq-ochre) !important;
}
.r-card.admit .slop em::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 50%;
  height: 2px; background: var(--bsq-red);
  transform: rotate(-2deg);
}

/* === Marker arrows on links ================================= */
a:not(.brand):not(.nav-item):not(.collab):not(.mob-tab):not(.lv-foot a):not(.wk3-foot a):not(.wk4-foot a):hover::after {
  content: ' →'; color: var(--bsq-red);
  font-family: var(--bsq-marker), cursive;
}

/* === Hand-drawn rotation on key painted cards =============== */
.reality { transform: rotate(-0.4deg); }
.replay4 { transform: rotate(0.5deg); }
.mz-earnings-left { transform: rotate(-0.3deg); }
.r-card.admit { transform: rotate(0.5deg); }
.r-card.lose { transform: rotate(-0.6deg); }
.r-card.todo { transform: rotate(0.4deg); }

/* === Listen hero · brutal paint ============================== */
.listen-hero-info .kicker {
  background: var(--bsq-red) !important;
  color: var(--bsq-cream) !important;
  border: 2px solid var(--bsq-ink) !important;
  border-radius: 3px !important;
  font-family: var(--bsq-stencil), sans-serif !important;
}

/* === Quick tiles painted square ============================== */
.lv-quick { transform: rotate(-0.2deg); }
.lv-quick:nth-child(2n) { transform: rotate(0.3deg); }
.lv-quick:nth-child(3n) { transform: rotate(-0.4deg); }

/* === Trust ribbon stamped ==================================== */
.trust-ribbon .tr-pill {
  border: 1.5px solid var(--bsq-ink) !important;
  background: var(--bsq-cream) !important;
  color: var(--bsq-ink) !important;
  box-shadow: 2px 2px 0 0 var(--bsq-red) !important;
}
.trust-ribbon .tr-pill.verify {
  background: var(--bsq-ochre) !important;
  color: var(--bsq-ink) !important;
  box-shadow: 2px 2px 0 0 var(--bsq-ink) !important;
}

/* === Drips on featured pages ================================ */
.creator-hd::before, .listen-hero::before {
  content: '';
  position: absolute; left: 12%; top: -10px;
  width: 4px; height: 60px;
  background:
    linear-gradient(180deg, var(--bsq-red) 0%, var(--bsq-red) 40%, transparent 100%);
  filter: blur(0.5px);
  pointer-events: none;
}
.creator-hd, .listen-hero { position: relative; }
.creator-hd::after, .listen-hero::after {
  content: '';
  position: absolute; right: 14%; top: -10px;
  width: 3px; height: 80px;
  background:
    linear-gradient(180deg, var(--bsq-ochre) 0%, var(--bsq-ochre) 50%, transparent 100%);
  filter: blur(0.4px);
  pointer-events: none;
}

/* === Cinema scrim removed — let raw cream show through =====*/
.ambient::after { background: radial-gradient(ellipse at center, transparent 0%, rgba(6,4,3,0.4) 80%, rgba(6,4,3,0.7) 100%) !important; }