/* ============================================================
   RAGE PACK skin — the "Rage Pack" mixtape era (Oct 2011).
   Spray-painted concrete grunge: concrete-gray page, torn
   charcoal cards, anarchy red #C8102E as the single color pop.
   Mosh-pit flyer rage: Permanent Marker graffiti titles, Oswald
   stencil buttons, torn paper edges, red anarchy "A" stamps.
   Loaded after styles.css; everything scoped under body.ragepack.
   ADMIN-ONLY until Jordan releases it.
   ============================================================ */

/* ---- base: concrete wall, splatter, scratches, vignette ---- */
body.ragepack {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #6f6f6f;
  background-image:
    /* faint oversized graffiti watermark feel baked into the page */
    radial-gradient(900px 420px at 50% -6%, rgba(200, 16, 46, .10) 0%, transparent 60%),
    /* spray splatter dots */
    radial-gradient(2px 2px at 12% 22%, rgba(20, 20, 20, .35), transparent 60%),
    radial-gradient(3px 3px at 78% 12%, rgba(20, 20, 20, .28), transparent 60%),
    radial-gradient(2px 2px at 64% 68%, rgba(200, 16, 46, .22), transparent 60%),
    radial-gradient(4px 4px at 28% 82%, rgba(20, 20, 20, .25), transparent 60%),
    radial-gradient(2px 2px at 88% 54%, rgba(20, 20, 20, .3), transparent 60%),
    radial-gradient(3px 2px at 42% 36%, rgba(200, 16, 46, .16), transparent 60%),
    /* scratch / scuff grain */
    repeating-linear-gradient(115deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(24deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 11px),
    /* concrete falloff + vignette */
    radial-gradient(1400px 900px at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(#8a8a8a 0%, #7a7a7a 45%, #5a5a5a 100%);
  background-attachment: fixed;
  color: #f2f2f2;
  --accent: #c8102e;          /* anarchy red — the single color pop */
  --accent-deep: #8e0b21;    /* darker red */
  --accent2: #ff4d6a;        /* hot red (gradients / glows) */
  --concrete: #8a8a8a;       /* page gray */
  --card: #1e1e1e;           /* torn charcoal */
  --card2: #161616;          /* deeper charcoal */
  --line: #0a0a0a;           /* black rule */
  --ink: #141414;            /* graffiti black */
  --text: #f2f2f2;           /* white spray */
  --muted: #b5b5b5;          /* grayed spray */
  --ink-muted: #8f8f8f;
  --radius: 2px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);
  --font-display: 'Permanent Marker', 'Oswald', cursive;
}
body.ragepack input, body.ragepack select,
body.ragepack textarea, body.ragepack button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* giant graffiti watermark behind everything */
body.ragepack::before {
  content: "RAGE PACK";
  position: fixed; inset: 18% 0 0 0; z-index: 0;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(80px, 16vw, 220px);
  color: rgba(20, 20, 20, .07);
  text-align: center; line-height: 1;
  transform: rotate(-4deg);
  pointer-events: none;
  white-space: nowrap;
}
.ragepack .muted { color: #b5b5b5; }

/* spray-painting anarchy-A loading spinner */
@keyframes ragepack-spray {
  0% { transform: scale(.6) rotate(-8deg); opacity: .2; }
  50% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(.6) rotate(-8deg); opacity: .2; }
}
.ragepack .spinner, .ragepack .loading-indicator {
  color: #c8102e !important;
  animation: ragepack-spray 1.1s ease-in-out infinite;
}

/* ---- concrete scrollbars ---- */
body.ragepack::-webkit-scrollbar { width: 14px; height: 14px; }
body.ragepack::-webkit-scrollbar-track { background: #4a4a4a; }
body.ragepack::-webkit-scrollbar-thumb { background: #141414; border: 2px solid #4a4a4a; border-radius: 7px; }
body.ragepack::-webkit-scrollbar-thumb:hover { background: #c8102e; }

/* ============================================================
   BUTTONS — black stencil tags with hand-drawn red spray border;
   hover bursts a red splatter behind the button
   ============================================================ */
.ragepack .btn {
  position: relative;
  background: #141414;
  color: #f2f2f2;
  border: 2px solid #c8102e;
  border-radius: 2px 7px 3px 8px;   /* uneven, hand-drawn */
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .8);
}
.ragepack .btn::before {
  content: ""; position: absolute; inset: -10px; z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 16, 46, .6), transparent 55%),
    radial-gradient(circle at 72% 62%, rgba(200, 16, 46, .45), transparent 50%),
    radial-gradient(circle at 55% 15%, rgba(255, 77, 106, .35), transparent 40%);
  filter: blur(3px); border-radius: 50%;
  opacity: 0; transition: opacity .15s ease-in;
}
.ragepack .btn:hover { background: #c8102e; border-color: #ff4d6a; }
.ragepack .btn:hover::before { opacity: 1; }
.ragepack .btn:active { background: #8e0b21; transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.ragepack .btn.primary { background: #c8102e; border-color: #ff4d6a; }
.ragepack .btn.primary:hover { background: #ff4d6a; color: #141414; }
.ragepack .btn.ghost { background: transparent; color: #f2f2f2; border: 2px dashed #8a8a8a; border-radius: 3px; box-shadow: none; text-shadow: none; }
.ragepack .btn.ghost:hover { border-color: #c8102e; color: #ff4d6a; background: transparent; }
.ragepack .btn.danger { background: #c8102e; border-color: #8e0b21; }
.ragepack .btn:disabled { background: #2c2c2c; color: #6f6f6f; border-color: #3d3d3d; opacity: 1; box-shadow: none; }
.ragepack .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* icon-ish buttons */
.ragepack .icon-btn, .ragepack .sheet-x, .ragepack .wl-popup-x, .ragepack .modal-x {
  background: #141414;
  color: #f2f2f2;
  border: 1px solid #c8102e;
  border-radius: 2px 6px 3px 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  min-width: 30px;
  min-height: 28px;
}
.ragepack .icon-btn:hover, .ragepack .sheet-x:hover { background: #c8102e; color: #fff; border-color: #ff4d6a; }

/* ============================================================
   POPUPS — torn charcoal flyer, red overspray title bar feel
   ============================================================ */
.ragepack .modal { backdrop-filter: none; background: rgba(10, 10, 10, .72); }
.ragepack .modal-card,
.ragepack .wl-popup-card {
  position: relative;
  background:
    radial-gradient(3px 3px at 20% 80%, rgba(200, 16, 46, .2), transparent 60%),
    radial-gradient(2px 2px at 85% 15%, rgba(255, 255, 255, .06), transparent 60%),
    #1e1e1e;
  color: #f2f2f2;
  border: 2px solid #0a0a0a;
  outline: 2px solid rgba(200, 16, 46, .55);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .65);
  text-align: left;
  animation: none;
}
.ragepack .modal-card h2, .ragepack .modal-card h3,
.ragepack .wl-popup-card h2, .ragepack .wl-popup-card h3 {
  font-family: 'Permanent Marker', cursive;
  color: #f2f2f2;
  text-shadow: 2px 2px 0 #c8102e;
  letter-spacing: .02em;
}
.ragepack .modal-card .muted, .ragepack .wl-popup-card .muted { color: #b5b5b5; }

/* ============================================================
   FORM FIELDS — dark inset concrete
   ============================================================ */
.ragepack input[type="text"], .ragepack input[type="search"],
.ragepack input[type="email"], .ragepack input[type="password"],
.ragepack input[type="number"], .ragepack input[type="date"],
.ragepack select, .ragepack textarea {
  background: #141414;
  color: #f2f2f2;
  border: 1px solid #3d3d3d;
  border-radius: 2px 5px 2px 5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.ragepack input:focus, .ragepack select:focus, .ragepack textarea:focus {
  border-color: #c8102e;
  outline: none;
}
.ragepack input::placeholder, .ragepack textarea::placeholder { color: #6f6f6f; }

/* ============================================================
   NAV TABS — stencil tags; active tab is stamped red
   ============================================================ */
.ragepack .tab {
  color: #d6d6d6;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ragepack .tab:hover { color: #ff4d6a; }
.ragepack .tab.active {
  background: #c8102e;
  color: #fff;
  border: 1px solid #ff4d6a;
  border-radius: 2px 6px 3px 6px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);
  box-shadow: 0 2px 8px rgba(200, 16, 46, .45);
}

/* ============================================================
   CARDS & PANELS — torn-paper charcoal, alternating tilt,
   graffiti section titles sprayed across the top
   ============================================================ */
.ragepack .card, .ragepack .panel, .ragepack .sheet,
.ragepack .show-card, .ragepack .thread-card {
  background:
    radial-gradient(2px 2px at 15% 85%, rgba(200, 16, 46, .14), transparent 60%),
    radial-gradient(3px 3px at 80% 10%, rgba(255, 255, 255, .05), transparent 60%),
    #1e1e1e;
  color: #f2f2f2;
  border: none;
  border-radius: 0;
  clip-path: polygon(0% 3%, 2% 1%, 5% 2.6%, 9% .6%, 13% 2.2%, 18% 1%, 24% 2.8%, 30% 1.2%, 36% 2.5%, 42% .8%, 48% 2.3%, 54% 1%, 60% 2.7%, 66% 1.4%, 72% 2.5%, 78% 1%, 84% 2.6%, 90% 1.2%, 95% 2.5%, 98% 1%, 100% 3%, 100% 97%, 98% 99%, 94% 97.6%, 89% 99.2%, 83% 98%, 77% 99.4%, 71% 98.2%, 65% 99%, 59% 97.8%, 53% 99.2%, 47% 98%, 41% 99.4%, 35% 98.2%, 29% 99%, 23% 97.8%, 17% 99.2%, 11% 98%, 6% 99.4%, 2% 98%, 0% 97%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
  padding: 20px 22px;   /* compensate for clipped corners */
}
.ragepack .show-card:nth-child(even), .ragepack .thread-card:nth-child(even) { transform: rotate(.45deg); }
.ragepack .show-card:nth-child(odd), .ragepack .thread-card:nth-child(odd) { transform: rotate(-.4deg); }
.ragepack .card h2, .ragepack .card h3, .ragepack .panel h2, .ragepack .panel h3,
.ragepack .show-card h2, .ragepack .show-card h3, .ragepack .thread-card h2, .ragepack .thread-card h3 {
  font-family: 'Permanent Marker', cursive;
  color: #f2f2f2;
  text-shadow: 2px 2px 0 rgba(200, 16, 46, .85);
  transform: rotate(-1deg);
  letter-spacing: .02em;
}
.ragepack .card .muted, .ragepack .panel .muted,
.ragepack .show-card .muted { color: #b5b5b5; }

/* anarchy-A bullets */
.ragepack .home-readme-body ul, .ragepack .card ul, .ragepack .panel ul { list-style: none; padding-left: 4px; }
.ragepack .home-readme-body ul li::before, .ragepack .card ul li::before,
.ragepack .panel ul li::before {
  content: "\24B6";           /* anarchy-style circled A */
  color: #c8102e;
  font-weight: 700;
  margin-right: 8px;
}
/* stamped watermark on empty states */
.ragepack .empty-state { position: relative; }
.ragepack .empty-state::after {
  content: "\24B6";
  position: absolute; right: 8px; bottom: 2px;
  font-size: 72px; color: rgba(200, 16, 46, .10);
  transform: rotate(-10deg);
  pointer-events: none;
}
/* torn-edge divider between major sections */
.ragepack hr, .ragepack .torn-divider {
  border: none; height: 14px; margin: 22px 0;
  background: #141414;
  clip-path: polygon(0 55%, 4% 20%, 8% 60%, 13% 25%, 19% 65%, 25% 30%, 31% 70%, 38% 28%, 45% 62%, 52% 25%, 59% 68%, 66% 30%, 73% 64%, 80% 26%, 87% 66%, 93% 30%, 100% 58%, 100% 100%, 0 100%);
  opacity: .85;
}

/* ============================================================
   HEADER — concrete header, black graffiti wordmark with the red
   anarchy A stamped through it; uniform 40px control boxes right
   ============================================================ */
.ragepack .brand-name, .ragepack .site-title {
  position: relative;
  font-family: 'Permanent Marker', cursive;
  color: #141414;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, .25);
  letter-spacing: .02em;
  transform: rotate(-1.5deg);
}
.ragepack .brand-name::after, .ragepack .site-title::after {
  content: "\24B6";           /* red anarchy A over the wordmark */
  position: absolute; right: -14px; top: -16px;
  font-family: 'Permanent Marker', cursive;
  font-size: .85em;
  color: #c8102e;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
  transform: rotate(9deg);
}
.ragepack header, .ragepack .topbar {
  background:
    repeating-linear-gradient(115deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px),
    linear-gradient(#9a9a9a, #7a7a7a);
  border-bottom: 3px solid #141414;
  box-shadow: 0 3px 0 rgba(200, 16, 46, .55);   /* red overspray line */
}
/* 40px header control boxes: black, red spray border, same sizing */
.ragepack .topbar-actions { display: flex; align-items: center; gap: 8px; }
.ragepack .topbar-actions .icon-btn,
.ragepack .topbar-actions .user-chip {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  background: #141414;
  color: #f2f2f2;
  border: 2px solid #c8102e;
  border-radius: 2px 6px 3px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 14px;
}
.ragepack .topbar-actions .icon-btn:hover,
.ragepack .topbar-actions .user-chip:hover { background: #c8102e; color: #fff; }

/* ============ RAGE PACK HOMEPAGE ============ */
.ragepack .home-wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 18px; }

/* flyer-poster window chrome: black title bar, red stencil type */
.ragepack .mac-window {
  background:
    radial-gradient(2px 2px at 20% 80%, rgba(200, 16, 46, .14), transparent 60%),
    #1e1e1e;
  border: 3px solid #0a0a0a;
  outline: 2px solid rgba(200, 16, 46, .55);
  outline-offset: 3px;
  border-radius: 0;
  clip-path: polygon(0% 2%, 3% 0%, 8% 1.5%, 15% .5%, 25% 2%, 40% .8%, 55% 2%, 70% 1%, 85% 2.2%, 95% .8%, 100% 2%, 100% 98%, 96% 100%, 88% 98.5%, 75% 100%, 60% 98.5%, 45% 100%, 30% 98.5%, 15% 100%, 6% 98.5%, 0% 100%);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
  overflow: hidden;
}
.ragepack .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#1a1a1a, #0a0a0a);
  border-bottom: 2px solid #c8102e;
  padding: 7px 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1.2;
  color: #ff4d6a;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ragepack .mac-titlebar::before { content: "\24B6"; color: #c8102e; font-size: 15px; }
.ragepack .mac-lights { display: none; }
.ragepack .mac-filename { flex: 1; text-align: left; }

/* Masthead — graffiti wall, black brush logo, red anarchy A */
.ragepack .home-masthead-body {
  padding: 34px 18px 38px; text-align: center;
  background:
    radial-gradient(3px 3px at 22% 30%, rgba(20, 20, 20, .4), transparent 60%),
    radial-gradient(4px 3px at 76% 66%, rgba(200, 16, 46, .3), transparent 60%),
    radial-gradient(2px 2px at 55% 18%, rgba(20, 20, 20, .35), transparent 60%),
    repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 8px),
    linear-gradient(#9a9a9a 0%, #828282 55%, #5f5f5f 100%);
}
.ragepack .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 18px;
  background: #141414; color: #f2f2f2;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .28em; font-size: 12px;
  text-transform: uppercase;
  border-left: 4px solid #c8102e; border-right: 4px solid #c8102e;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.ragepack .home-logo {
  position: relative;
  display: inline-block;
  margin: 0; font-family: 'Permanent Marker', cursive;
  font-size: clamp(36px, 9vw, 72px); font-weight: 400;
  letter-spacing: .02em; color: #141414;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, .22);
  line-height: 1.05;
  transform: rotate(-2deg);
}
.ragepack .home-logo::after {
  content: "\24B6";
  position: absolute; right: -30px; top: -22px;
  font-size: .6em; color: #c8102e;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
  transform: rotate(10deg);
}
.ragepack .home-logo span { display: block; font-family: 'Oswald', sans-serif; font-size: .32em; letter-spacing: .42em; color: #c8102e; font-weight: 600; }
.ragepack .home-tagline { margin: 16px 0 0; color: #2c2c2c; font-size: 15px; font-weight: 600; font-style: italic; }

/* home tiles — torn flyers */
.ragepack .tile {
  background: #1e1e1e; color: #f2f2f2;
  border: 2px solid #0a0a0a;
  outline: 1px solid rgba(200, 16, 46, .4);
  outline-offset: 2px;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.ragepack .tile:hover { outline-color: #c8102e; }
.ragepack .tile:hover .tile-label { color: #ff4d6a; }
.ragepack .tile .tile-label {
  color: #f2f2f2;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.ragepack .tile .tile-sub { color: #b5b5b5; }

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

/* ticker — black marquee, red spray type */
.ragepack .home-ticker {
  background: #0a0a0a; border: 2px solid #c8102e; border-radius: 0;
  color: #ff4d6a; overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-family: 'Permanent Marker', cursive; font-size: 15px; letter-spacing: .06em;
}

/* ============================================================
   CHAT — charcoal bubbles; own messages stamped red
   ============================================================ */
.ragepack .chat-bubble, .ragepack .msg {
  background: #262626; color: #f2f2f2;
  border: 1px solid #3d3d3d; border-radius: 2px 8px 3px 8px;
}
.ragepack .chat-bubble.own, .ragepack .msg.own {
  background: #c8102e; color: #fff; border-color: #ff4d6a;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}
.ragepack .chat-launcher {
  background: #141414; color: #f2f2f2;
  border: 2px solid #c8102e;
  box-shadow: 0 4px 16px rgba(200, 16, 46, .4);
}
.ragepack .chat-launcher:hover { background: #c8102e; color: #fff; }

/* ============================================================
   NOTIFICATIONS — charcoal ledger, red unread stamps
   ============================================================ */
.ragepack .notif-list, .ragepack .notif-item {
  background: #1e1e1e; color: #f2f2f2;
  border-color: #3d3d3d;
}
.ragepack .notif-item.unread { border-left: 4px solid #c8102e; }
.ragepack .notif-item:hover { background: #262626; }

/* ============================================================
   FOOTER — dark floor, red overspray rule, EST stamp
   ============================================================ */
.ragepack .site-footer, .ragepack footer {
  border-top: 3px solid #141414;
  box-shadow: 0 -3px 0 rgba(200, 16, 46, .55);
  background: #1a1a1a;
  color: #b5b5b5;
}
.ragepack .est-stamp, .ragepack .footer-est {
  font-family: 'Permanent Marker', cursive;
  color: #ff4d6a;
  border: 2px solid #c8102e;
  border-radius: 2px 6px 3px 6px;
  letter-spacing: .14em;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}
.ragepack .foot-donate a, .ragepack .donate-link {
  color: #ff4d6a;
}

/* ============================================================
   DE-PINK — hard-coded pink glows in the base stylesheet
   become anarchy red. (var(--accent) already flips; these are
   the literal pink values the variable swap can't reach.)
   ============================================================ */
.ragepack .attend-btn.on { box-shadow: 0 4px 14px rgba(200,16,46,.5); border-color: #c8102e; }
.ragepack .alert-btn.on { background: rgba(200,16,46,.16); }
.ragepack .chip.active { box-shadow: 0 4px 16px rgba(200,16,46,.5); background: #c8102e; color: #fff; }
.ragepack .stat-card.hero { background: linear-gradient(135deg, rgba(200,16,46,.25), #1e1e1e 65%); }
.ragepack .badge-pick.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(200,16,46,.4); }
.ragepack .dm-row.unread { box-shadow: 0 0 12px rgba(200,16,46,.28); }
.ragepack .filters input[type="search"]:focus,
.ragepack .search-wrap input:focus,
.ragepack .auth-card input:focus,
.ragepack .form-grid input:focus,
.ragepack .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(200,16,46,.3); border-color: #c8102e; }
.ragepack .home-logo { text-shadow: 3px 3px 0 rgba(255, 255, 255, .22); }

/* ============================================================
   My Shows tiles + hero + install banner — torn charcoal cards,
   red icon chips, matching the Rage Pack theme.
   ============================================================ */
.ragepack .my-subnav-card {
  background: #1e1e1e;
  color: #f2f2f2;
  border: 2px solid #0a0a0a;
  outline: 1px solid rgba(200, 16, 46, .4);
  outline-offset: 2px;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.ragepack .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(200, 16, 46, .16), transparent 70%);
}
.ragepack .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(200, 16, 46, .22); }
.ragepack .my-subnav-card[data-goto="states"] { --tile-glow: rgba(200, 16, 46, .22); }
.ragepack .my-subnav-card:hover { outline-color: #c8102e; }
.ragepack .my-subnav-emoji {
  background: linear-gradient(140deg, #c8102e, #8e0b21);
  border: 1px solid #ff4d6a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  border-radius: 4px;
}
.ragepack .my-subnav-txt b { color: #f2f2f2; font-family: 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ragepack .my-subnav-txt small { color: #b5b5b5; }
.ragepack .songpct {
  background: linear-gradient(160deg, rgba(200, 16, 46, .14), rgba(30, 30, 30, .02)), #1e1e1e;
  color: #f2f2f2;
  border: 2px solid #0a0a0a;
  outline: 1px solid rgba(200, 16, 46, .4);
  outline-offset: 2px;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.ragepack .songpct-num { color: #ff4d6a; font-family: 'Oswald', sans-serif; font-weight: 700; }
.ragepack .songpct-txt .muted { color: #b5b5b5; }
.ragepack .songpct-bar { background: rgba(200, 16, 46, .2); }
.ragepack .install-banner {
  background: linear-gradient(135deg, rgba(200, 16, 46, .16), rgba(20, 20, 20, .12));
  border: 2px solid #c8102e;
  border-radius: 0;
  color: #f2f2f2;
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — RAGE PACK
   Full GRAFFITI look per Jordan: wildstyle throw-up masthead,
   spray-can-cap buttons with drips, brick-wall piece cards,
   boxcar-panel popups, overspray textures, XX throwie.
   ============================================================ */
/* brick wall base with overspray */
body.ragepack {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(0,0,0,.28) 34px 36px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,.28) 78px 80px),
    radial-gradient(3px 3px at 15% 25%, rgba(200,16,46,.4), transparent 60%),
    radial-gradient(2px 2px at 82% 15%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(4px 3px at 60% 70%, rgba(200,16,46,.3), transparent 60%),
    radial-gradient(2px 2px at 35% 85%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(1400px 900px at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(#7d3a2a 0%, #6b3123 45%, #4a2118 100%);
  background-attachment: fixed;
}
/* giant wildstyle throw-up behind masthead */
body.ragepack .home-masthead-body { position: relative; overflow: hidden; }
body.ragepack .home-masthead-body::before {
  content: "RAGE!";
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(70px, 14vw, 150px);
  color: transparent;
  -webkit-text-stroke: 3px #c8102e;
  text-shadow: 5px 5px 0 rgba(20,20,20,.85), 10px 10px 0 rgba(255,255,255,.25);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .9;
  pointer-events: none;
}
body.ragepack .home-masthead-body::after {
  content: "XX";
  position: absolute; right: 14px; bottom: 8px;
  font-family: 'Permanent Marker', cursive; font-size: 30px;
  color: #ffd23f;
  -webkit-text-stroke: 1px #0a0a0a;
  text-shadow: 3px 3px 0 #0a0a0a;
  transform: rotate(8deg);
  pointer-events: none;
}
/* spray-can-cap buttons with drips */
body.ragepack .btn {
  position: relative;
  background: linear-gradient(#2a2a2a, #101010);
  color: #ffd23f;
  border: 3px solid #0a0a0a;
  border-radius: 12px;
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  text-shadow: 2px 2px 0 #0a0a0a;
  box-shadow: 0 0 0 2px #c8102e, 5px 5px 0 rgba(0,0,0,.6);
  overflow: visible;
}
body.ragepack .btn::after {
  content: "";
  position: absolute; left: 18px; bottom: -9px;
  width: 6px; height: 12px;
  background: linear-gradient(#c8102e, transparent);
  border-radius: 0 0 4px 4px;
  box-shadow: 22px -3px 0 -1px #c8102e, 44px -5px 0 -2px #c8102e;
}
body.ragepack .btn.primary {
  background: linear-gradient(#e01838, #8e0b21);
  color: #fff;
  box-shadow: 0 0 0 2px #ffd23f, 5px 5px 0 rgba(0,0,0,.6);
}
/* spray-tag nav tabs */
body.ragepack .tab {
  background: transparent;
  border: none;
  color: #f2f2f2;
  font-family: 'Permanent Marker', cursive;
  font-size: 17px;
  text-shadow: 2px 2px 0 #0a0a0a, 0 0 12px rgba(200,16,46,.8);
  transform: rotate(-2deg);
  padding: 8px 14px;
}
body.ragepack .tab:nth-of-type(2n) { transform: rotate(1.6deg); }
body.ragepack .tab.active {
  color: #ffd23f;
  text-shadow: 2px 2px 0 #0a0a0a, 0 0 18px rgba(255,210,63,.9);
  border-bottom: 4px solid #c8102e;
}
/* brick-wall piece cards with throw-up XX */
body.ragepack .show-card, body.ragepack .thread-card {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(0,0,0,.35) 30px 32px),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(0,0,0,.35) 70px 72px),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(3px 2px at 75% 65%, rgba(200,16,46,.35), transparent 60%),
    linear-gradient(#8a4a34, #6b3524);
  border: 3px solid #0a0a0a;
  border-radius: 4px;
  color: #f7f0e6;
  box-shadow: 6px 6px 0 rgba(0,0,0,.55);
  overflow: hidden;
}
body.ragepack .show-card::before, body.ragepack .thread-card::before {
  content: "XX";
  position: absolute; right: 6px; top: -6px;
  font-family: 'Permanent Marker', cursive; font-size: 64px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,210,63,.75);
  text-shadow: 4px 4px 0 rgba(10,10,10,.7);
  transform: rotate(10deg);
  pointer-events: none;
}
/* freight boxcar-panel popups */
body.ragepack .wl-popup-card, body.ragepack .modal-card {
  background:
    radial-gradient(circle 5px at 14px 14px, #3a3a3a 60%, transparent 65%),
    radial-gradient(circle 5px at calc(100% - 14px) 14px, #3a3a3a 60%, transparent 65%),
    radial-gradient(circle 5px at 14px calc(100% - 14px), #3a3a3a 60%, transparent 65%),
    radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px), #3a3a3a 60%, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.3) 46px 48px),
    linear-gradient(#3d3d3d, #232323);
  border: 4px solid #0a0a0a;
  border-radius: 6px;
  color: #f2f2f2;
  box-shadow: 0 0 0 3px #c8102e, 0 20px 60px rgba(0,0,0,.7);
}
body.ragepack .wl-popup-card h2, body.ragepack .wl-popup-card h3 {
  font-family: 'Permanent Marker', cursive;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #0a0a0a;
}
/* tagged form fields */
body.ragepack input, body.ragepack select, body.ragepack textarea {
  background: #141414;
  border: 2px solid #c8102e;
  border-radius: 8px;
  color: #f2f2f2;
  font-family: 'Permanent Marker', cursive;
  box-shadow: inset 0 0 18px rgba(200,16,46,.25);
}
/* graffiti ticker */
body.ragepack .home-ticker {
  background: #0a0a0a;
  border-top: 3px solid #c8102e;
  border-bottom: 3px solid #c8102e;
  color: #ffd23f;
  font-family: 'Permanent Marker', cursive;
  text-shadow: 2px 2px 0 #c8102e;
}
body.ragepack .foot::after {
  content: "WELCOME TO THE RAGE • XX • EST 19XX";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive; font-size: 17px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #0a0a0a, 0 0 14px rgba(200,16,46,.8);
  margin-top: 10px;
  transform: rotate(-1deg);
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — RAGE PACK
   Sourced: mgkestfam archive crawl Sep 16 2026 (2010–2018).
   "Welcome to the Rage", "Lord of the Rage"; archive owner
   described shows of the era as "RAGE night"; "LTFU".
   Graffiti direction (Jordan-approved) stays the lead.
   ============================================================ */
body.ragepack .foot::before {
  content: "★ WELCOME TO THE RAGE ★ LORD OF THE RAGE ★ RAGE NIGHT ★ LTFU ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: #ffd9a0; opacity: .9; margin-bottom: 8px;
}
body.ragepack .home-ticker::after {
  content: "WILDSTYLE • BREAKNECK ENERGY • EST FAMILY ONLY";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 13px; letter-spacing: .06em;
  color: #ff5d00; margin-top: 6px;
  text-shadow: 0 0 10px rgba(255,93,0,.8);
}
body.ragepack .home-section-title::before {
  content: "★ RAGE! ★ ";
  font-family: 'Permanent Marker', cursive;
  font-size: 15px; letter-spacing: .1em;
  color: #ff5d00;
}
/* spray-paint splatter */
body.ragepack .home-ticker {
  background-image:
    radial-gradient(circle, rgba(255,93,0,.28) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(255,200,60,.22) 1px, transparent 1.8px);
  background-size: 30px 30px, 19px 19px;
  background-position: 0 0, 13px 9px;
}