/* ============================================================
   MAINSTREAM SELLOUT skin — the 2022 pop-punk era. White
   painted brick, bubblegum pink (#F27BB5), tomato splatters,
   flyer-wall punk collage. Pink hair, ripped black skinny
   layers, the "SELLOUT!" guitar strap. Playful defiance.
   Loaded after styles.css; everything scoped under body.mss.
   ============================================================ */

/* ---- base: white brick wall, pink-splattered, Oswald/Permanent Marker ---- */
body.mss {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #ffffff;
  background-image:
    /* sparse pink splats, restrained, near edges */
    radial-gradient(60px 44px at 6% 12%, rgba(242, 123, 181, .14) 0%, rgba(242, 123, 181, .05) 55%, transparent 70%),
    radial-gradient(34px 30px at 94% 6%, rgba(242, 123, 181, .12) 0%, transparent 65%),
    radial-gradient(46px 40px at 90% 92%, rgba(242, 123, 181, .10) 0%, transparent 65%),
    radial-gradient(26px 24px at 8% 88%, rgba(242, 123, 181, .10) 0%, transparent 65%),
    /* faint white-brick mortar grid */
    repeating-linear-gradient(0deg, transparent 0, transparent 26px, rgba(13, 13, 13, .055) 26px, rgba(13, 13, 13, .055) 28px),
    repeating-linear-gradient(90deg, transparent 0, transparent 56px, rgba(13, 13, 13, .055) 56px, rgba(13, 13, 13, .055) 58px);
  color: #0d0d0d;
  --accent: #f27bb5;          /* bubblegum pink */
  --accent-deep: #d94f92;    /* darker splat pink */
  --accent2: #ffc2dd;         /* light cotton-candy pink */
  --ink: #0d0d0d;            /* sellout black */
  --card: #ffffff;           /* white tee */
  --surface: #fdeef5;        /* light pink-tinted surface */
  --line: #0d0d0d;           /* black rule */
  --muted: #6d6d6d;          /* faded setlist gray */
  --radius: 8px;
  --shadow: 0 6px 22px rgba(217, 79, 146, .16);
  --font-display: 'Oswald', sans-serif;
  --font-marker: 'Permanent Marker', cursive;
}
body.mss input, body.mss select,
body.mss textarea, body.mss button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.mss h1, body.mss h2, body.mss h3, body.mss .card-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.mss .muted { color: #6d6d6d; }

/* ---- bubblegum scrollbars ---- */
body.mss::-webkit-scrollbar { width: 14px; height: 14px; }
body.mss::-webkit-scrollbar-track { background: #fdeef5; }
body.mss::-webkit-scrollbar-thumb { background: #f27bb5; border: 3px solid #fdeef5; border-radius: 8px; }

/* ============================================================
   BUTTONS — black pills, bubblegum text; primary CTA flips
   to pink bg + black text. Spray texture on hover.
   ============================================================ */
body.mss .btn {
  background: #0d0d0d;
  color: #f27bb5;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(242, 123, 181, .55);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 20px;
  min-height: 44px;
  transition: box-shadow .15s ease, transform .15s ease;
}
body.mss .btn:hover {
  /* stencil-spray texture */
  background-image: radial-gradient(rgba(242, 123, 181, .35) 1px, transparent 1.6px);
  background-size: 9px 9px;
  box-shadow: 1px 1px 0 rgba(242, 123, 181, .55);
}
body.mss .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(242, 123, 181, .55); background-image: none; }
body.mss .btn.primary { background: #f27bb5; border-color: #0d0d0d; color: #0d0d0d; }
body.mss .btn.primary:hover {
  background-color: #ff8fc0;
  background-image: radial-gradient(rgba(13, 13, 13, .28) 1px, transparent 1.6px);
  background-size: 9px 9px;
}
body.mss .btn.ghost { background: transparent; color: #d94f92; border: 2px solid #f27bb5; box-shadow: none; }
body.mss .btn.ghost:hover { background: rgba(242, 123, 181, .12); }
body.mss .btn.danger { background: #0d0d0d; color: #ff5c8a; border-color: #0d0d0d; }
body.mss .btn:disabled { background: #e8e8e8; color: #a5a5a5; border-color: #d4d4d4; box-shadow: none; }
body.mss .btn.tiny { font-size: 11px; padding: 5px 12px; min-height: 0; }

/* icon-ish buttons */
body.mss .icon-btn, body.mss .sheet-x, body.mss .wl-popup-x, body.mss .modal-x {
  background: #ffffff;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(242, 123, 181, .55);
  min-width: 30px;
  min-height: 28px;
}
body.mss .icon-btn:hover, body.mss .sheet-x:hover { border-color: #f27bb5; color: #d94f92; }

/* ---- 40px header control boxes: stay sized, get the era look ---- */
body.mss .topbar-actions .icon-btn,
body.mss .topbar-actions .bell,
body.mss .topbar-actions .search-btn,
body.mss .topbar-actions .guide-btn,
body.mss .topbar-actions .theme-btn {
  background: #ffffff;
  border: 2px solid #0d0d0d;
  border-radius: 8px;
  color: #0d0d0d;
  box-shadow: 2px 2px 0 rgba(242, 123, 181, .55);
  /* sizing/spacing untouched — base stylesheet owns the 40px */
}
body.mss .topbar-actions .icon-btn:hover,
body.mss .topbar-actions .bell:hover,
body.mss .topbar-actions .search-btn:hover,
body.mss .topbar-actions .guide-btn:hover,
body.mss .topbar-actions .theme-btn:hover {
  background: #fdeef5;
  color: #d94f92;
  border-color: #f27bb5;
}
body.mss .topbar-actions .user-chip {
  background: #0d0d0d;
  color: #f27bb5;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(242, 123, 181, .55);
}
body.mss .topbar-actions .user-chip:hover { color: #ffc2dd; }

/* ============================================================
   POPUPS — white tee card, black frame, pink marker headings
   ============================================================ */
body.mss .modal { backdrop-filter: none; background: rgba(13, 13, 13, .55); }
body.mss .modal-card,
body.mss .wl-popup-card {
  position: relative;
  background: #ffffff;
  color: #0d0d0d;
  border: 3px solid #0d0d0d;
  border-top: 8px solid #0d0d0d;
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(242, 123, 181, .5), 0 12px 34px rgba(13, 13, 13, .3);
  text-align: left;
  animation: none;
  overflow: hidden;
}
body.mss .modal-card::before,
body.mss .wl-popup-card::before {
  /* splat drips on the top corner */
  content: "";
  position: absolute;
  top: -6px; right: 26px;
  width: 90px; height: 46px;
  background:
    radial-gradient(14px 14px at 12px 30px, #f27bb5 0 60%, transparent 62%),
    radial-gradient(9px 9px at 30px 18px, #f27bb5 0 60%, transparent 62%),
    radial-gradient(20px 20px at 52px 34px, #f27bb5 0 60%, transparent 62%),
    radial-gradient(7px 7px at 70px 14px, #f27bb5 0 60%, transparent 62%);
  opacity: .85;
  pointer-events: none;
}
body.mss .modal-card h2, body.mss .modal-card h3,
body.mss .wl-popup-card h2, body.mss .wl-popup-card h3 {
  font-family: 'Oswald', sans-serif;
  color: #0d0d0d;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body.mss .modal-card .muted, body.mss .wl-popup-card .muted { color: #6d6d6d; }

/* ============================================================
   FORM FIELDS — pink-tint inset, black frame
   ============================================================ */
body.mss input[type="text"], body.mss input[type="search"],
body.mss input[type="email"], body.mss input[type="password"],
body.mss input[type="number"], body.mss input[type="date"],
body.mss select, body.mss textarea {
  background: #fff7fb;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(217, 79, 146, .12);
}
body.mss input::placeholder, body.mss textarea::placeholder { color: #b08a9d; }

/* ============================================================
   NAV TABS — black text, active tab is a pink backstage pass
   ============================================================ */
body.mss .tab {
  color: #3d3d3d;
  font-weight: 600;
  letter-spacing: .06em;
}
body.mss .tab:hover { color: #d94f92; }
body.mss .tab.active {
  background: #f27bb5;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(13, 13, 13, .8);
  font-weight: 800;
}

/* ============================================================
   CARDS & PANELS — white cards, 3px black top border, marker
   condensed titles, splatter-dot bullets
   ============================================================ */
body.mss .card, body.mss .panel, body.mss .sheet,
body.mss .show-card, body.mss .thread-card {
  background: #ffffff;
  color: #0d0d0d;
  border: 1px solid #e8c9d8;
  border-top: 3px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(217, 79, 146, .14);
}
body.mss .card .muted, body.mss .panel .muted,
body.mss .show-card .muted { color: #6d6d6d; }
/* splatter-dot bullets */
body.mss .card ul li::marker, body.mss .panel ul li::marker { color: #f27bb5; }
body.mss ul.splat-list { list-style: none; padding-left: 0; }
body.mss ul.splat-list li { position: relative; padding-left: 22px; }
body.mss ul.splat-list li::before {
  content: "";
  position: absolute; left: 2px; top: .42em;
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc2dd 0 28%, #f27bb5 45% 75%, #d94f92 100%);
  box-shadow: 14px -4px 0 -5px #f27bb5, 6px 8px 0 -5px #ffc2dd;
}

/* ============================================================
   HEADER — white bar; wordmark heavy black Oswald, pink
   marker "sellout" tag; one tomato-splat decorative mark
   ============================================================ */
body.mss .brand-name, body.mss .site-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #0d0d0d;
  letter-spacing: .03em;
  text-transform: uppercase;
  position: relative;
}
body.mss .brand-name::after, body.mss .site-title::after {
  content: "sellout";
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: .52em;
  color: #f27bb5;
  letter-spacing: 0;
  margin-left: 8px;
  text-transform: lowercase;
  transform: rotate(-3deg);
  display: inline-block;
  text-shadow: 1px 1px 0 rgba(13, 13, 13, .25);
}
body.mss header, body.mss .topbar {
  background: #ffffff;
  border-bottom: 3px solid #0d0d0d;
  box-shadow: 0 3px 0 rgba(242, 123, 181, .35);
  position: relative;
}
body.mss header::after, body.mss .topbar::after {
  /* single tomato-splat decorative mark */
  content: "";
  position: absolute;
  right: 14px; bottom: -9px;
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffc2dd 0 22%, #f27bb5 48% 78%, #d94f92 100%);
  box-shadow:
    26px 6px 0 -8px #f27bb5,
    -22px 10px 0 -9px #ffc2dd,
    10px -14px 0 -9px #f27bb5;
}

/* ============ MAINSTREAM SELLOUT HOMEPAGE ============ */
body.mss .home-wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; }

/* flyer-wall window chrome: black title bar, pink marker title, tape tabs */
body.mss .mac-window {
  background: #ffffff;
  border: 3px solid #0d0d0d;
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(242, 123, 181, .5);
  overflow: hidden;
}
body.mss .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: #0d0d0d;
  border-bottom: 3px solid #f27bb5;
  padding: 8px 14px;
  font: 700 12px/1.2 'Oswald', sans-serif;
  color: #f27bb5;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body.mss .mac-titlebar::before { content: "\2605"; color: #f27bb5; }
body.mss .mac-titlebar::after {
  /* tape tab on the corner */
  content: "";
  margin-left: auto;
  width: 64px; height: 18px;
  background: rgba(242, 123, 181, .35);
  border-left: 2px dashed rgba(13, 13, 13, .35);
  border-right: 2px dashed rgba(13, 13, 13, .35);
  transform: rotate(3deg);
}
body.mss .mac-lights { display: none; }
body.mss .mac-filename { flex: 1; text-align: left; }

/* Masthead — tomato-rain over the white brick wall */
body.mss .home-masthead-body {
  padding: 32px 18px 36px; text-align: center;
  background:
    radial-gradient(46px 38px at 12% 78%, rgba(242, 123, 181, .85) 0 55%, transparent 62%),
    radial-gradient(30px 26px at 20% 20%, rgba(242, 123, 181, .7) 0 55%, transparent 62%),
    radial-gradient(56px 46px at 86% 30%, rgba(242, 123, 181, .8) 0 55%, transparent 62%),
    radial-gradient(24px 22px at 78% 82%, rgba(242, 123, 181, .65) 0 55%, transparent 62%),
    radial-gradient(18px 16px at 58% 12%, rgba(242, 123, 181, .7) 0 55%, transparent 62%),
    radial-gradient(38px 32px at 38% 88%, rgba(255, 194, 221, .9) 0 55%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0, transparent 26px, rgba(13, 13, 13, .055) 26px, rgba(13, 13, 13, .055) 28px),
    repeating-linear-gradient(90deg, transparent 0, transparent 56px, rgba(13, 13, 13, .055) 56px, rgba(13, 13, 13, .055) 58px),
    linear-gradient(#ffffff, #fdeef5);
}
body.mss .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 18px;
  background: #0d0d0d; color: #f27bb5;
  font-family: 'Permanent Marker', cursive; font-weight: 400;
  font-size: 14px; letter-spacing: .06em;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(242, 123, 181, .6);
  text-transform: lowercase;
}
body.mss .home-logo {
  margin: 0;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(36px, 8vw, 70px);
  letter-spacing: .02em; color: #0d0d0d;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #f27bb5, 6px 6px 0 rgba(13, 13, 13, .25);
  line-height: 1.02;
}
body.mss .home-logo span {
  display: block;
  font-family: 'Permanent Marker', cursive;
  font-size: .42em; letter-spacing: .04em; color: #d94f92;
  text-transform: lowercase;
  text-shadow: none;
  transform: rotate(-1.5deg);
  margin-top: 6px;
}
body.mss .home-tagline { margin: 16px 0 0; color: #4a4a4a; font-size: 15px; text-transform: lowercase; }

/* home tiles — pink flyers pinned to the wall */
body.mss .tile {
  background: #ffffff;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-top: 3px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(242, 123, 181, .5);
  position: relative;
}
body.mss .tile::before {
  /* pin-hole dot on each flyer */
  content: "";
  position: absolute; top: 8px; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc2dd, #f27bb5 70%);
  box-shadow: 0 1px 2px rgba(13, 13, 13, .4);
}
body.mss .tile:hover { border-color: #f27bb5; box-shadow: 4px 4px 0 #f27bb5; }
body.mss .tile .tile-label { color: #0d0d0d; font-weight: 800; letter-spacing: .06em; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
body.mss .tile .tile-sub { color: #6d6d6d; }

/* readme window body */
body.mss .home-readme-body { padding: 16px 18px 18px; font-size: 14px; color: #0d0d0d; }
body.mss .home-readme-body p { margin: 0 0 10px; }
body.mss .home-readme-body p:last-child { margin-bottom: 0; }

/* ticker — pink marquee, black tape type */
body.mss .home-ticker {
  background: #f27bb5;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  color: #0d0d0d;
  overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-weight: 800; letter-spacing: .1em; font-size: 13px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(13, 13, 13, .25);
}

/* ============================================================
   CHAT — white bubbles; own messages pink with black text
   ============================================================ */
body.mss .chat-bubble, body.mss .msg {
  background: #ffffff; color: #0d0d0d;
  border: 2px solid #0d0d0d; border-radius: 12px;
  box-shadow: 2px 2px 0 rgba(242, 123, 181, .45);
}
body.mss .chat-bubble.own, body.mss .msg.own {
  background: #f27bb5; color: #0d0d0d; border-color: #0d0d0d;
  box-shadow: 2px 2px 0 rgba(13, 13, 13, .5);
}
body.mss .chat-launcher {
  background: #0d0d0d; color: #f27bb5;
  border: 2px solid #0d0d0d;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(242, 123, 181, .6);
}

/* ============================================================
   NOTIFICATIONS — pink ledger; tomato-dot unread marker
   ============================================================ */
body.mss .notif-list, body.mss .notif-item {
  background: #ffffff; color: #0d0d0d;
  border-color: #e8c9d8;
}
body.mss .notif-item { position: relative; }
body.mss .notif-item.unread { border-left: 4px solid #f27bb5; }
body.mss .notif-item.unread::before {
  /* tomato dot */
  content: "";
  position: absolute; left: 6px; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #ffc2dd 0 25%, #f27bb5 50% 75%, #d94f92 100%);
  box-shadow: 0 0 0 2px #ffffff, 0 0 6px rgba(217, 79, 146, .6);
}
body.mss .notif-item.unread { padding-left: 26px; }
body.mss .notif-item:hover { background: #fdeef5; }

/* ============================================================
   FOOTER — scuffed dark stage floor, pink marker brand
   ============================================================ */
body.mss .site-footer, body.mss footer {
  border-top: 3px solid #0d0d0d;
  background:
    radial-gradient(900px 200px at 50% -40%, rgba(242, 123, 181, .10) 0%, transparent 60%),
    #0d0d0d;
  color: #c9a8bc;
}
body.mss .est-stamp, body.mss .footer-est {
  font-family: 'Permanent Marker', cursive;
  color: #f27bb5;
  border: 2px solid #f27bb5;
  border-radius: 6px;
  letter-spacing: .12em;
  transform: rotate(-3deg);
  text-transform: lowercase;
}
body.mss .foot-donate a, body.mss .donate-link { color: #ffc2dd; }

/* ============================================================
   DE-PINK — the base stylesheet already ships pink; here the
   hard-coded pinks are normalized to the exact sellout-era
   bubblegum (#F27BB5) so every glow matches the cover art.
   ============================================================ */
body.mss .attend-btn.on { box-shadow: 0 4px 14px rgba(242, 123, 181, .45); border-color: #f27bb5; }
body.mss .alert-btn.on { background: rgba(242, 123, 181, .14); }
body.mss .chip.active { box-shadow: 0 4px 16px rgba(242, 123, 181, .45); background: #f27bb5; color: #0d0d0d; border-color: #0d0d0d; }
body.mss .stat-card.hero { background: linear-gradient(135deg, rgba(242, 123, 181, .22), #ffffff 65%); border-top: 3px solid #0d0d0d; }
body.mss .badge-pick.sel { box-shadow: 0 0 0 2px #0d0d0d, 0 0 14px rgba(242, 123, 181, .5); }
body.mss .dm-row.unread { box-shadow: 0 0 12px rgba(242, 123, 181, .25); }
body.mss .filters input[type="search"]:focus,
body.mss .search-wrap input:focus,
body.mss .auth-card input:focus,
body.mss .form-grid input:focus,
body.mss .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(242, 123, 181, .25); border-color: #f27bb5; }
body.mss .home-logo { text-shadow: 3px 3px 0 #f27bb5, 6px 6px 0 rgba(13, 13, 13, .25); }

/* ============================================================
   My Shows tiles + hero + install banner — pink-flyer tiles,
   black top rules, bubblegum icon chips.
   ============================================================ */
body.mss .my-subnav-card {
  background: #ffffff;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-top: 3px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(242, 123, 181, .5);
}
body.mss .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(242, 123, 181, .14), transparent 70%);
}
body.mss .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(242, 123, 181, .18); }
body.mss .my-subnav-card[data-goto="states"] { --tile-glow: rgba(242, 123, 181, .18); }
body.mss .my-subnav-card:hover { border-color: #f27bb5; box-shadow: 4px 4px 0 #f27bb5; }
body.mss .my-subnav-emoji {
  background: linear-gradient(140deg, #ffc2dd, #f27bb5 60%, #d94f92);
  border: 2px solid #0d0d0d;
  box-shadow: 2px 2px 0 rgba(13, 13, 13, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  border-radius: 14px;
}
body.mss .my-subnav-txt b { color: #0d0d0d; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
body.mss .my-subnav-txt small { color: #6d6d6d; }
body.mss .songpct {
  background: linear-gradient(160deg, rgba(242, 123, 181, .12), rgba(255, 255, 255, .02)), #ffffff;
  color: #0d0d0d;
  border: 2px solid #0d0d0d;
  border-top: 3px solid #0d0d0d;
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(242, 123, 181, .5);
}
body.mss .songpct-num { color: #d94f92; font-family: 'Oswald', sans-serif; }
body.mss .songpct-txt .muted { color: #6d6d6d; }
body.mss .songpct-bar { background: rgba(242, 123, 181, .18); }
body.mss .songpct-bar > * { background: linear-gradient(90deg, #f27bb5, #d94f92); }
body.mss .install-banner {
  background: linear-gradient(135deg, #0d0d0d 0%, #0d0d0d 100%);
  border: 2px solid #f27bb5;
  border-radius: 8px;
  color: #f27bb5;
  box-shadow: 3px 3px 0 rgba(242, 123, 181, .5);
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — MAINSTREAM SELLOUT
   Pink-and-black helicopter era: CSS-built pink/black
   helicopter over the masthead, backstage-laminate buttons
   with lanyard stripes, flyer-wall cards with pink tape,
   cockpit-window popups, SELLOUT AIR footer.
   ============================================================ */
/* pink-and-black helicopter silhouette over the masthead */
body.mss .home-masthead-body { position: relative; overflow: visible; }
body.mss .home-masthead-body::before {
  content: "";
  position: absolute; right: 6px; top: -58px;
  width: 240px; height: 120px;
  background:
    /* main rotor */
    linear-gradient(#0d0d0d, #0d0d0d) 50% 6px / 210px 7px no-repeat,
    /* rotor blur */
    radial-gradient(105px 12px at 50% 10px, rgba(13,13,13,.35), transparent 70%) 50% 0 / 220px 22px no-repeat,
    /* mast */
    linear-gradient(#0d0d0d, #0d0d0d) 50% 12px / 10px 22px no-repeat,
    /* fuselage: pink with black belly */
    radial-gradient(72px 44px at 42% 62%, #f27bb5 62%, transparent 66%) 0 0 / 240px 120px no-repeat,
    linear-gradient(#0d0d0d, #0d0d0d) 12% 74% / 96px 16px no-repeat,
    /* cockpit window */
    radial-gradient(26px 20px at 62% 52%, #bfe9ff 60%, #0d0d0d 64%, transparent 70%) 0 0 / 240px 120px no-repeat,
    /* tail boom */
    linear-gradient(100deg, transparent 46%, #0d0d0d 46% 54%, transparent 54%) 52% 30% / 120px 44px no-repeat,
    /* tail fin + tail rotor */
    linear-gradient(#0d0d0d, #0d0d0d) 93% 18% / 8px 34px no-repeat,
    linear-gradient(90deg, #0d0d0d 0 34%, transparent 34% 66%, #0d0d0d 66%) 90% 30% / 34px 7px no-repeat,
    /* skids */
    linear-gradient(#0d0d0d, #0d0d0d) 22% 96% / 120px 6px no-repeat,
    linear-gradient(#0d0d0d, #0d0d0d) 28% 84% / 6px 16px no-repeat,
    linear-gradient(#0d0d0d, #0d0d0d) 62% 84% / 6px 16px no-repeat;
  transform: rotate(-4deg);
  filter: drop-shadow(4px 6px 0 rgba(242,123,181,.45));
  pointer-events: none;
  z-index: 2;
}
body.mss .home-masthead-body::after {
  content: "XX";
  position: absolute; left: 16px; bottom: 8px;
  font-family: 'Permanent Marker', cursive; font-size: 30px;
  color: #f27bb5;
  background: #0d0d0d;
  border-radius: 50%;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 rgba(13,13,13,.35);
  pointer-events: none;
}
/* backstage laminate buttons with lanyard stripe */
body.mss .btn {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  padding-top: 16px;
}
body.mss .btn::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, #f27bb5 0 14px, #0d0d0d 14px 18px);
}
body.mss .btn::after {
  content: "";
  position: absolute; top: 12px; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%);
  background: #fdeef5;
  border: 2px solid #0d0d0d;
}
/* AAA-pass nav tabs */
body.mss .tab {
  border-radius: 6px;
  background: linear-gradient(#0d0d0d, #232323);
  border: 2px solid #f27bb5;
  color: #f27bb5;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .14em;
}
body.mss .tab.active {
  background: linear-gradient(#f27bb5, #d94f92);
  color: #0d0d0d;
  box-shadow: 0 0 16px rgba(242,123,181,.7);
}
/* flyer-wall cards with pink tape corners + SELLOUT stamp */
body.mss .show-card, body.mss .thread-card {
  position: relative;
  background:
    radial-gradient(40px 30px at 8% 10%, rgba(242,123,181,.25), transparent 70%),
    #ffffff;
  border: 2px solid #0d0d0d;
  box-shadow: 6px 6px 0 rgba(242,123,181,.6);
  transform: rotate(-.5deg);
}
body.mss .show-card:nth-of-type(2n), body.mss .thread-card:nth-of-type(2n) { transform: rotate(.6deg); }
body.mss .show-card::before, body.mss .thread-card::before {
  content: "";
  position: absolute; top: -12px; left: 24px;
  width: 70px; height: 24px;
  background: rgba(242,123,181,.75);
  transform: rotate(-4deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
body.mss .show-card::after, body.mss .thread-card::after {
  content: "SELLOUT!";
  position: absolute; right: 10px; top: 10px;
  font-family: 'Permanent Marker', cursive; font-size: 15px;
  color: #d94f92;
  border: 3px solid #d94f92;
  border-radius: 4px;
  padding: 2px 8px;
  transform: rotate(10deg);
  opacity: .9;
  pointer-events: none;
}
/* helicopter cockpit-window popups */
body.mss .wl-popup-card, body.mss .modal-card {
  background: linear-gradient(#101418, #1c2530);
  border: 4px solid #0d0d0d;
  border-radius: 48% 48% 12px 12px / 30% 30% 12px 12px;
  outline: 3px solid #f27bb5;
  outline-offset: 4px;
  color: #fdeef5;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 30px rgba(242,123,181,.35);
}
/* boarding-pass form fields */
body.mss input, body.mss select, body.mss textarea {
  background:
    radial-gradient(circle 5px at 8px 50%, #fff 96%, transparent 100%),
    radial-gradient(circle 5px at calc(100% - 8px) 50%, #fff 96%, transparent 100%),
    #fdeef5;
  border: 2px dashed #0d0d0d;
  color: #0d0d0d;
}
body.mss .foot::after {
  content: "🚁 XX • SELLOUT AIR • EST 19XX 🚁";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive; font-size: 16px;
  color: #f27bb5; margin-top: 10px;
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — MAINSTREAM SELLOUT
   Sourced: web research (Loudwire, Kerrang!, Discogs, Music
   Times). Pink/black helicopter stays the centerpiece (Jordan's
   call). Original working title: "Born With Horns"; "Life In
   Pink Deluxe"; pink tomatoes thrown at MGK on the album
   artwork; tracklist revealed via 16 shirts (one stuck/missing);
   Mainstream Sellout Tour; "Emo Girl", "Papercuts", "5150",
   "Wall of Fame"; pink guitar association; "I am whatever you
   say I am" reported in relation to the renamed album.
   ============================================================ */
body.mss .foot::before {
  content: "★ BORN WITH HORNS ★ LIFE IN PINK DELUXE ★ WALL OF FAME ★ 5150 ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: #ffb3d1; opacity: .9; margin-bottom: 8px;
}
body.mss .home-ticker::after {
  content: "EMO GIRL • PAPERCUTS • TWIN FLAME • AY! • DIE IN CALIFORNIA • FAKE LOVE DON'T LAST • MAINSTREAM SELLOUT TOUR";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 13px; letter-spacing: .06em;
  color: #ff7fb0; margin-top: 6px;
}
body.mss .home-section-title::before {
  content: "★ I AM WHATEVER YOU SAY I AM ★ ";
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 12px; letter-spacing: .3em;
  color: #ff5d8f;
}
/* tomato-splat scatter: pink tomatoes on the album artwork */
body.mss .home-ticker {
  background-image:
    radial-gradient(circle, rgba(255,90,110,.30) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255,160,190,.22) 1px, transparent 1.8px);
  background-size: 34px 34px, 22px 22px;
  background-position: 0 0, 11px 7px;
}