/* ============================================================
   TTMD skin — Tickets To My Downfall era (2020). Pop-punk
   pivot: drained-pool plaster, Downfall Pink, checkerboard
   tape, teal mosaic pool-tile striping. Sticker/flyer feel:
   thick black borders, hard offset shadows, marker scrawl.
   Loaded after styles.css; everything scoped under body.ttmd.
   ============================================================ */

/* ---- base: plaster white, black ink, Downfall Pink accent ---- */
body.ttmd {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #F5F2EC;
  background-image:
    radial-gradient(rgba(247, 44, 143, .05) 1px, transparent 1.3px),
    radial-gradient(rgba(17, 17, 17, .05) 1px, transparent 1.3px);
  background-size: 11px 11px, 7px 7px;
  color: #111111;
  --accent: #F72C8F;          /* Downfall Pink — the era's signature */
  --accent-deep: #C2107A;     /* darker pink */
  --accent2: #FF7FBF;         /* light pink (gradients) */
  --ink: #111111;             /* black ink */
  --paper: #FFFFFF;           /* sticker white */
  --plaster: #F5F2EC;         /* warm plaster */
  --teal: #2E7E8C;            /* pool-tile teal */
  --teal-deep: #1F5A66;       /* deep tile */
  --stucco: #C7A06B;          /* beige stucco */
  --line: #111111;            /* black rule */
  --text: #111111;            /* ink on plaster */
  --muted: #5C5648;           /* muted ink */
  --radius: 3px;
  --shadow: 6px 6px 0 rgba(17, 17, 17, .9);
  --font-display: 'Permanent Marker', 'Oswald', cursive;
}
body.ttmd input, body.ttmd select,
body.ttmd textarea, body.ttmd button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.ttmd .muted { color: #5C5648; }

/* mosaic pool-tile divider — teal diamond grid, the pool edge */
body.ttmd hr {
  border: none;
  height: 10px;
  margin: 18px 0;
  background-image:
    linear-gradient(45deg, #2E7E8C 25%, transparent 25%, transparent 75%, #2E7E8C 75%),
    linear-gradient(45deg, #2E7E8C 25%, transparent 25%, transparent 75%, #2E7E8C 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border-top: 1px solid #1F5A66;
  border-bottom: 1px solid #1F5A66;
}

/* ---- plaster scrollbars ---- */
body.ttmd::-webkit-scrollbar { width: 14px; height: 14px; }
body.ttmd::-webkit-scrollbar-track { background: #EDE7D8; }
body.ttmd::-webkit-scrollbar-thumb { background: #F72C8F; border: 2px solid #EDE7D8; border-radius: 7px; }

/* ============================================================
   BUTTONS — pink sticker rectangles: solid Downfall Pink,
   black text, thick black border, hard offset shadow.
   Slight hand-drawn wobble on border-radius.
   ============================================================ */
body.ttmd .btn {
  background: #F72C8F;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 4px 7px 3px 8px / 6px 3px 7px 4px;
  box-shadow: 4px 4px 0 #111111;
  text-shadow: none;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
}
body.ttmd .btn:hover { background: #FF54A6; box-shadow: 6px 6px 0 #111111; transform: translate(-1px, -1px); }
body.ttmd .btn:active { background: #C2107A; transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111111; }
body.ttmd .btn.primary { background: #F72C8F; color: #111111; border: 2px solid #111111; }
body.ttmd .btn.ghost { background: transparent; color: #111111; border: 2px solid #111111; box-shadow: 4px 4px 0 rgba(17,17,17,.25); text-shadow: none; }
body.ttmd .btn.ghost:hover { background: #111111; color: #F72C8F; box-shadow: 4px 4px 0 #F72C8F; transform: none; }
body.ttmd .btn.danger { background: #111111; color: #F72C8F; border-color: #111111; }
body.ttmd .btn.danger:hover { background: #2A2A2A; box-shadow: 6px 6px 0 #F72C8F; }
body.ttmd .btn:disabled { background: #D8D2C4; color: #8A8478; border-color: #8A8478; box-shadow: none; opacity: 1; text-shadow: none; transform: none; }
body.ttmd .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* icon-ish buttons — sticker chips; header boxes keep their sizing */
body.ttmd .icon-btn, body.ttmd .sheet-x, body.ttmd .wl-popup-x, body.ttmd .modal-x {
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #111111;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #111111;
  min-width: 30px;
  min-height: 28px;
}
body.ttmd .icon-btn:hover, body.ttmd .sheet-x:hover,
body.ttmd .wl-popup-x:hover, body.ttmd .modal-x:hover { background: #F72C8F; color: #111111; border-color: #111111; }
body.ttmd .topbar-actions .icon-btn, body.ttmd .notif-bell {
  background: #1B1B1B;
  color: #F72C8F;
  border: 1px solid #F72C8F;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #F72C8F;
}
body.ttmd .topbar-actions .icon-btn:hover, body.ttmd .notif-bell:hover {
  background: #F72C8F;
  color: #111111;
  border-color: #F72C8F;
  box-shadow: 2px 2px 0 #111111;
}

/* ============================================================
   POPUPS — sticker cards: white, thick black border,
   hard offset shadow, pink marker headings
   ============================================================ */
body.ttmd .modal { backdrop-filter: none; background: rgba(17, 17, 17, .55); }
body.ttmd .modal-card,
body.ttmd .wl-popup-card {
  position: relative;
  background: #FFFFFF;
  color: #111111;
  border: 3px solid #111111;
  border-radius: 4px;
  box-shadow: 8px 8px 0 rgba(17, 17, 17, .9);
  text-align: left;
  animation: none;
}
body.ttmd .modal-card h2, body.ttmd .modal-card h3,
body.ttmd .wl-popup-card h2, body.ttmd .wl-popup-card h3 {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  color: #111111;
  letter-spacing: .02em;
  text-shadow: 2px 2px 0 rgba(247, 44, 143, .35);
}
body.ttmd .modal-card h2::after, body.ttmd .wl-popup-card h2::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: 10px;
  background: repeating-conic-gradient(#111111 0% 25%, #FFFFFF 0% 50%);
  background-size: 14px 14px;
  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;
}
body.ttmd .modal-card .muted, body.ttmd .wl-popup-card .muted { color: #5C5648; }

/* ============================================================
   FORM FIELDS — white inset, black border
   ============================================================ */
body.ttmd input[type="text"], body.ttmd input[type="search"],
body.ttmd input[type="email"], body.ttmd input[type="password"],
body.ttmd input[type="number"], body.ttmd input[type="date"],
body.ttmd select, body.ttmd textarea {
  background: #FFFFFF;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 3px;
  box-shadow: inset 2px 2px 0 rgba(17, 17, 17, .08);
}
body.ttmd input:focus, body.ttmd select:focus, body.ttmd textarea:focus {
  outline: none;
  border-color: #F72C8F;
  box-shadow: 0 0 0 3px rgba(247, 44, 143, .28), inset 2px 2px 0 rgba(17, 17, 17, .08);
}
body.ttmd input::placeholder, body.ttmd textarea::placeholder { color: #9A9384; }

/* ============================================================
   NAV TABS — black ink, active tab is a pink sticker
   ============================================================ */
body.ttmd .tab {
  color: #111111;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.ttmd .tab:hover { color: #C2107A; }
body.ttmd .tab.active {
  background: #F72C8F;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 3px 6px 3px 7px / 5px 3px 6px 3px;
  box-shadow: 3px 3px 0 #111111;
  text-shadow: none;
}

/* ============================================================
   CARDS & PANELS — sticker flyers: white, thick black
   border, hard offset shadow
   ============================================================ */
body.ttmd .card, body.ttmd .panel, body.ttmd .sheet,
body.ttmd .show-card, body.ttmd .thread-card {
  background: #FFFFFF;
  color: #111111;
  border: 3px solid #111111;
  border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(17, 17, 17, .9);
}
body.ttmd .card .muted, body.ttmd .panel .muted,
body.ttmd .show-card .muted { color: #5C5648; }

/* empty states get the pink guitar line-art silhouette */
body.ttmd .empty-card {
  position: relative;
  padding-top: 96px;
  text-align: center;
}
body.ttmd .empty-card::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 50%;
  width: 46px;
  height: 52px;
  margin-left: -30px;
  transform: rotate(-14deg);
  border: 4px solid #F72C8F;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
  border-top-width: 3px;
}
body.ttmd .empty-card::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 9px;
  height: 36px;
  margin-left: 8px;
  transform: rotate(16deg);
  background: #F72C8F;
  border-radius: 4px;
  box-shadow: 12px -3px 0 -2px #F72C8F;
}

/* ============================================================
   HEADER — black bar, marker wordmark, pink underline rule
   with checkerboard segment
   ============================================================ */
body.ttmd .brand-name, body.ttmd .site-title {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  color: #FFFFFF;
  transform: rotate(-1deg);
  text-shadow: 2px 2px 0 #F72C8F;
  letter-spacing: .02em;
}
body.ttmd header, body.ttmd .topbar {
  background:
    repeating-conic-gradient(#F72C8F 0% 25%, #111111 0% 50%) 0 100% / 18px 9px repeat-x,
    #111111;
  border-bottom: 3px solid #F72C8F;
}
body.ttmd .user-chip {
  background: #FFFFFF;
  color: #111111;
  border: 2px solid #F72C8F;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #F72C8F;
}
body.ttmd .user-chip span { color: #111111; font-weight: 800; }
body.ttmd .user-chip:hover { border-color: #111111; box-shadow: 3px 3px 0 #111111; }

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

/* punk-flyer window chrome: black title bar, pink marker type,
   checkerboard edge along the bottom */
body.ttmd .mac-window {
  background: #FFFFFF;
  border: 3px solid #111111;
  border-radius: 3px;
  box-shadow: 8px 8px 0 rgba(17, 17, 17, .9);
  overflow: hidden;
}
body.ttmd .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background:
    repeating-conic-gradient(#F72C8F 0% 25%, #111111 0% 50%) 0 100% / 16px 8px repeat-x,
    #111111;
  border-bottom: 2px solid #111111;
  padding: 7px 12px 13px;
  font: 700 12px/1.2 'Oswald', Tahoma, Verdana, sans-serif;
  color: #F72C8F;
  letter-spacing: .2em;
  text-transform: uppercase;
}
body.ttmd .mac-titlebar::before { content: "\25A0"; color: #F72C8F; font-size: 10px; }
body.ttmd .mac-lights { display: none; }
body.ttmd .mac-filename { flex: 1; text-align: left; }

/* Masthead — plaster wall, teal pool-tile strip on top,
   marker-scrawl logo with pink offset */
body.ttmd .home-masthead-body {
  padding: 30px 18px 34px; text-align: center;
  background:
    linear-gradient(45deg, #2E7E8C 25%, transparent 25%, transparent 75%, #2E7E8C 75%) 0 0 / 14px 14px repeat-x,
    radial-gradient(600px 300px at 50% 110%, rgba(247, 44, 143, .14) 0%, transparent 60%),
    #FDFBF7;
  background-size: 14px 10px, auto, auto;
  background-repeat: repeat-x, no-repeat, no-repeat;
  border-bottom: 3px solid #111111;
}
body.ttmd .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 16px;
  background: #F72C8F; color: #111111; font-family: 'Oswald', sans-serif;
  font-weight: 700; letter-spacing: .22em; font-size: 12px;
  transform: rotate(-2deg); border-radius: 2px;
  border: 2px solid #111111;
  box-shadow: 3px 3px 0 #111111;
  text-transform: uppercase;
}
body.ttmd .home-logo {
  margin: 0; font-family: 'Permanent Marker', cursive;
  font-size: clamp(38px, 9vw, 74px); font-weight: 400;
  letter-spacing: .02em; color: #111111;
  text-shadow: 3px 3px 0 #F72C8F;
  transform: rotate(-1deg);
  line-height: 1.05;
}
body.ttmd .home-logo span {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: .42em; letter-spacing: .42em; color: #C2107A;
  text-shadow: none; transform: none;
}
body.ttmd .home-tagline { margin: 16px 0 0; color: #5C5648; font-size: 15px; font-style: italic; }

/* home tiles — sticker squares on plaster */
body.ttmd .home-section-title {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  color: #111111;
  font-size: 22px;
  transform: rotate(-.5deg);
  background: linear-gradient(transparent 55%, rgba(247, 44, 143, .45) 55%, rgba(247, 44, 143, .45) 92%, transparent 92%);
  align-self: flex-start;
  padding: 0 8px;
}
body.ttmd .tile {
  background: #FFFFFF; color: #111111;
  border: 3px solid #111111; border-radius: 3px;
  box-shadow: 5px 5px 0 rgba(17, 17, 17, .9);
}
body.ttmd .tile:hover { border-color: #F72C8F; box-shadow: 5px 5px 0 #F72C8F; transform: translate(-1px, -1px); }
body.ttmd .tile .tile-label { color: #111111; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body.ttmd .tile .tile-sub { color: #5C5648; }

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

/* ticker — black marquee, pink type, checkerboard edges */
body.ttmd .home-ticker {
  background:
    repeating-conic-gradient(#F72C8F 0% 25%, #111111 0% 50%) 0 0 / 14px 7px repeat-x,
    repeating-conic-gradient(#F72C8F 0% 25%, #111111 0% 50%) 0 100% / 14px 7px repeat-x,
    #111111;
  border: 2px solid #111111; border-radius: 3px;
  color: #F72C8F; overflow: hidden; white-space: nowrap; padding: 12px 0;
  font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 13px;
  text-transform: uppercase;
}

/* ============================================================
   CHAT — sticker bubbles; own messages Downfall Pink
   ============================================================ */
body.ttmd .chat-bubble, body.ttmd .msg {
  background: #FFFFFF; color: #111111;
  border: 2px solid #111111; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .85);
}
body.ttmd .chat-bubble.own, body.ttmd .msg.own {
  background: #F72C8F; color: #111111; border-color: #111111;
}
body.ttmd .chat-launcher {
  background: #F72C8F; color: #111111;
  border: 2px solid #111111;
  border-radius: 50%;
  box-shadow: 4px 4px 0 #111111;
}

/* ============================================================
   NOTIFICATIONS — white ledger, pink unread marker
   ============================================================ */
body.ttmd .notif-list, body.ttmd .notif-item {
  background: #FFFFFF; color: #111111;
  border-color: #111111;
}
body.ttmd .notif-item { border: 2px solid #111111; border-radius: 3px; box-shadow: 3px 3px 0 rgba(17,17,17,.85); }
body.ttmd .notif-item.unread { border-left: 6px solid #F72C8F; }
body.ttmd .notif-item:hover { background: #FFF0F7; }

/* ============================================================
   FOOTER — black bar, pink rule + checkerboard, marker stamp
   ============================================================ */
body.ttmd .site-footer, body.ttmd footer {
  border-top: 3px solid #F72C8F;
  background:
    repeating-conic-gradient(#F72C8F 0% 25%, #111111 0% 50%) 0 0 / 16px 8px repeat-x,
    #111111;
  color: #EDE7D8;
  padding-top: 14px;
}
body.ttmd .est-stamp, body.ttmd .footer-est {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  color: #F72C8F;
  border: 2px solid #F72C8F;
  border-radius: 4px;
  letter-spacing: .18em;
  transform: rotate(-3deg);
  background: rgba(247, 44, 143, .08);
}
body.ttmd .foot-donate a, body.ttmd .donate-link {
  color: #FF7FBF;
}

/* ============================================================
   PINK ALIGN — hard-coded pink glows in the base stylesheet
   get locked to Downfall Pink. (var(--accent) already flips;
   these are the literal pink values the variable swap can't
   reach — TTMD's signature IS pink, so this keeps them honest.)
   ============================================================ */
body.ttmd .attend-btn.on { box-shadow: 0 4px 14px rgba(247, 44, 143, .45); }
body.ttmd .alert-btn.on { background: rgba(247, 44, 143, .16); }
body.ttmd .chip.active { box-shadow: 0 4px 16px rgba(247, 44, 143, .5); border-color: #F72C8F; }
body.ttmd .stat-card.hero { background: linear-gradient(135deg, rgba(247, 44, 143, .24), #FFFFFF 65%); border: 3px solid #111111; box-shadow: 6px 6px 0 rgba(17,17,17,.9); }
body.ttmd .badge-pick.sel { box-shadow: 0 0 0 2px #111111, 0 0 16px rgba(247, 44, 143, .5); }
body.ttmd .dm-row.unread { box-shadow: 0 0 12px rgba(247, 44, 143, .3); }
body.ttmd .filters input[type="search"]:focus,
body.ttmd .search-wrap input:focus,
body.ttmd .auth-card input:focus,
body.ttmd .form-grid input:focus,
body.ttmd .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(247, 44, 143, .28); border-color: #F72C8F; }
body.ttmd .home-logo { text-shadow: 3px 3px 0 #F72C8F; }

/* ============================================================
   My Shows tiles + hero + install banner — sticker cards,
   pink icon chips, teal progress, matching the TTMD theme.
   ============================================================ */
body.ttmd .my-subnav-card {
  background: #FFFFFF;
  color: #111111;
  border: 3px solid #111111;
  border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(17, 17, 17, .9);
}
body.ttmd .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(247, 44, 143, .16), transparent 70%);
}
body.ttmd .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(247, 44, 143, .2); }
body.ttmd .my-subnav-card[data-goto="states"] { --tile-glow: rgba(46, 126, 140, .2); }
body.ttmd .my-subnav-card:hover { border-color: #F72C8F; box-shadow: 6px 6px 0 #F72C8F; }
body.ttmd .my-subnav-emoji {
  background: linear-gradient(140deg, #FF54A6, #F72C8F 60%, #C2107A);
  border: 2px solid #111111;
  box-shadow: 3px 3px 0 #111111, inset 0 1px 0 rgba(255, 255, 255, .4);
  border-radius: 14px;
}
body.ttmd .my-subnav-txt b { color: #111111; font-family: 'Oswald', sans-serif; letter-spacing: .06em; }
body.ttmd .my-subnav-txt small { color: #5C5648; }
body.ttmd .songpct {
  background: linear-gradient(160deg, rgba(247, 44, 143, .1), rgba(255, 255, 255, .02)), #FFFFFF;
  color: #111111;
  border: 3px solid #111111;
  border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(17, 17, 17, .9);
}
body.ttmd .songpct-num { color: #C2107A; font-family: 'Permanent Marker', cursive; }
body.ttmd .songpct-txt .muted { color: #5C5648; }
body.ttmd .songpct-bar { background: rgba(46, 126, 140, .18); border: 2px solid #111111; border-radius: 999px; }
body.ttmd .install-banner {
  background: linear-gradient(135deg, rgba(247, 44, 143, .2), rgba(46, 126, 140, .12));
  border: 2px solid #111111;
  border-radius: 3px;
  box-shadow: 4px 4px 0 #111111;
  color: #111111;
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — TICKETS TO MY
   DOWNFALL. Drained-pool pop-punk: guitar-pick buttons, teal
   pool-tile cards with depth markers, masking-tape setlist
   tabs, sticker-bombed guitar-case popups, XX tour sticker.
   ============================================================ */
/* drained pool behind the masthead */
body.ttmd .home-masthead-body { position: relative; overflow: hidden; }
body.ttmd .home-masthead-body::before {
  content: "";
  position: absolute; inset: auto -20px -70px -20px; height: 170px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(10,60,70,.35) 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(10,60,70,.35) 22px 24px),
    linear-gradient(#7fd4d4 0%, #3d9db0 55%, #17616f 100%);
  transform: perspective(400px) rotateX(38deg);
  opacity: .55;
  pointer-events: none;
}
body.ttmd .home-masthead-body::after {
  content: "XX";
  position: absolute; right: 16px; top: 10px;
  font-family: 'Permanent Marker', cursive; font-size: 34px;
  color: #ff5d8f;
  background: #fdfdf4;
  border: 2px solid #141414;
  border-radius: 50%;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(10deg);
  box-shadow: 3px 3px 0 #141414;
  pointer-events: none;
}
/* guitar-pick buttons */
body.ttmd .btn {
  background: linear-gradient(#ff5d8f, #e0447c);
  color: #141414;
  border: 2px solid #141414;
  border-radius: 46% 46% 46% 46% / 58% 58% 38% 38%;
  font-family: 'Permanent Marker', cursive;
  font-size: 15px;
  padding: 12px 26px;
  box-shadow: 3px 4px 0 #141414;
  transform: rotate(-1.5deg);
}
body.ttmd .btn:nth-of-type(2n) { transform: rotate(1.5deg); }
body.ttmd .btn.primary {
  background: linear-gradient(#fdfdf4, #f2ecd8);
  color: #e0447c;
}
body.ttmd .btn:active { transform: rotate(0) translate(2px, 3px); box-shadow: 0 0 0 #141414; }
/* masking-tape setlist tabs */
body.ttmd .tab {
  background: rgba(253,253,244,.85);
  border: none;
  color: #141414;
  font-family: 'Permanent Marker', cursive;
  padding: 10px 18px;
  transform: rotate(-1deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  clip-path: polygon(2% 0, 98% 4%, 100% 96%, 0 100%);
}
body.ttmd .tab:nth-of-type(2n) { transform: rotate(1.2deg); }
body.ttmd .tab.active {
  background: #ff5d8f;
  color: #141414;
  box-shadow: 0 0 14px rgba(255,93,143,.65);
}
/* pool-tile cards with depth markers */
body.ttmd .show-card, body.ttmd .thread-card {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(10,60,70,.4) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(10,60,70,.4) 26px 28px),
    linear-gradient(#bfecec, #7fd4d4);
  border: 3px solid #0e4a56;
  color: #0b3038;
  box-shadow: 0 10px 26px rgba(10,60,70,.35);
}
body.ttmd .show-card::after, body.ttmd .thread-card::after {
  content: "3 FT";
  position: absolute; right: 10px; bottom: 8px;
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: .2em;
  color: #0e4a56;
  border-top: 2px solid #0e4a56;
  padding-top: 2px;
}
/* sticker-bombed guitar-case popups */
body.ttmd .wl-popup-card, body.ttmd .modal-card {
  background:
    radial-gradient(circle 26px at 12% 18%, #ff5d8f 62%, #141414 66%, transparent 70%),
    radial-gradient(circle 20px at 85% 12%, #fdfdf4 60%, #141414 64%, transparent 68%),
    radial-gradient(circle 24px at 78% 82%, #7fd4d4 60%, #141414 64%, transparent 68%),
    radial-gradient(circle 16px at 18% 78%, #ffd23f 60%, #141414 64%, transparent 68%),
    linear-gradient(#232323, #141414);
  border: 3px solid #0e4a56;
  border-radius: 18px;
  color: #fdfdf4;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 0 0 2px rgba(253,253,244,.15);
}
body.ttmd .wl-popup-card h2, body.ttmd .wl-popup-card h3 {
  font-family: 'Permanent Marker', cursive;
  color: #ff8fb3;
}
/* setlist-paper form fields */
body.ttmd input, body.ttmd select, body.ttmd textarea {
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(224,68,124,.25) 24px 25px),
    #fdfdf4;
  border: 2px solid #141414;
  color: #141414;
  font-family: 'Permanent Marker', cursive;
}
body.ttmd .foot::after {
  content: "XX • EST 19XX • TICKETS TO MY DOWNFALL TOUR";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive; font-size: 15px;
  color: #e0447c; margin-top: 10px;
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — TICKETS TO MY DOWNFALL
   A) Web research: early-2000s pop-punk culture; Travis Barker
   collab; "Bloody Valentine"; "Concert For Aliens" UFO
   crash-landing imagery; pink guitar; title metaphor (people
   watch when the blimp crashes rather than while it flies);
   "Downfalls High" (Kerrang!, Loudwire, Qobuz, Hot Topic).
   B) ROXY NIGHT — Oct 1 2020, NoCap livestream, TTMD in full
   from the Roxy Theatre, West Hollywood (first-venue play of
   the MTV VMA-winning "Bloody Valentine" — Universal Music
   Canada). Band: Colson Baker, Omer Fedi, Steve "Baze" Basil,
   Brandon "Slimxx" Allen, Travis Barker (footage credits).
   Staging studied from Oct 1 fan footage: full-stage
   lavender-purple wash, dot-matrix blinder light walls behind
   the band, pink guitar + pink mic stand, teal/green mood
   wash during "lonely", bleached-blonde shag, floral/paisley
   sleeveless top. No quoted lyrics anywhere.
   ============================================================ */
body.ttmd .foot::before {
  content: "★ OCT 1 2020 ★ NOCAP LIVESTREAM ★ FULL ALBUM AT THE ROXY ★ BLOODY VALENTINE — FIRST VENUE PLAY ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: #f7b8d6; opacity: .95; margin-bottom: 8px;
}
body.ttmd .home-ticker::after {
  content: "COLSON BAKER • OMER FEDI • STEVE “BAZE” BASIL • BRANDON “SLIMXX” ALLEN • TRAVIS BARKER";
  display: block; text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 13px; letter-spacing: .06em;
  color: #fff; margin-top: 6px;
  text-shadow: 0 0 10px rgba(255,105,180,.9);
}
/* Roxy backlight: dot-matrix blinder wall behind the ticker tape */
body.ttmd .home-ticker {
  background-color: rgba(178,132,205,.16);
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 2px, transparent 2.8px);
  background-size: 26px 26px;
  background-position: center;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
body.ttmd .home-section-title::before {
  content: "★ DOWNFALLS HIGH ★ ";
  font-family: 'Permanent Marker', cursive;
  font-size: 14px; letter-spacing: .1em;
  color: #e0447c;
}