/* ============================================================
   HOTEL DIABLO skin — v124. The fourth-era album theme: MGK's
   "Hotel Diablo" era (Jul 2019). Haunted hotel at midnight —
   void black, electric purple neon, handwritten journal scrawl,
   and ROOM 13 key-tag motifs.
   Loaded after styles.css; everything scoped under body.diablo.
   ============================================================ */

/* ---- base: void black, ghostly ink, handwritten accents ---- */
body.diablo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(166, 74, 201, .20) 0%, transparent 60%) fixed,
    radial-gradient(700px 500px at 88% 110%, rgba(200, 16, 46, .08) 0%, transparent 55%) fixed,
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(166, 74, 201, .045) 26px 27px) fixed,
    #0b0b0d;
  background-image:
    radial-gradient(900px 480px at 50% -10%, rgba(166, 74, 201, .20) 0%, transparent 60%),
    radial-gradient(700px 500px at 88% 110%, rgba(200, 16, 46, .08) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(166, 74, 201, .045) 26px 27px);
  background-color: #0b0b0d;
  color: #f5f2f4;
  --accent: #a64ac9;        /* electric purple — the era's signature */
  --accent-deep: #7c2f99;   /* deep violet */
  --accent2: #d98ae6;       /* neon lavender (glows) */
  --blood: #c8102e;         /* monogram red */
  --ghost: #f2c9d4;         /* inverted-photo ghost pink */
  --card: #151317;          /* near-black card */
  --card2: #1c191e;         /* raised near-black */
  --line: #3a2f42;          /* violet-tinged rule */
  --text: #f5f2f4;          /* ghost white on black */
  --ink: #0e0c0f;           /* ink on ghost panels */
  --muted: #9c8fa6;         /* muted lavender-gray */
  --ink-muted: #6e5f76;
  --radius: 4px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .7);
  --font-display: 'Oswald', sans-serif;
  --font-hand: 'Permanent Marker', cursive;
}
body.diablo input, body.diablo select,
body.diablo textarea, body.diablo button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.diablo .muted { color: #9c8fa6; }

/* ---- void scrollbars with purple thumb ---- */
body.diablo::-webkit-scrollbar { width: 14px; height: 14px; }
body.diablo::-webkit-scrollbar-track { background: #0b0b0d; }
body.diablo::-webkit-scrollbar-thumb { background: #3a2f42; border: 2px solid #0b0b0d; border-radius: 7px; }
body.diablo::-webkit-scrollbar-thumb:hover { background: #a64ac9; }

/* neon-sign flicker for hovered buttons */
@keyframes diablo-flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 1; }
  44% { opacity: .55; }
  46% { opacity: 1; }
  70% { opacity: 1; }
  72% { opacity: .7; }
  74% { opacity: 1; }
}

/* ============================================================
   BUTTONS — purple neon-key solid, black text, flicker on hover
   ============================================================ */
body.diablo .btn {
  background: #a64ac9;
  color: #0b0b0d;
  border: 1px solid #7c2f99;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(166, 74, 201, .35), 0 2px 6px rgba(0, 0, 0, .6);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 18px;
  min-height: 44px;
}
body.diablo .btn:hover { animation: diablo-flicker 1.1s infinite; box-shadow: 0 0 20px rgba(166, 74, 201, .6), 0 2px 6px rgba(0, 0, 0, .6); }
body.diablo .btn:active { background: #7c2f99; transform: none; animation: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
body.diablo .btn.primary { background: #a64ac9; color: #0b0b0d; }
body.diablo .btn.ghost { background: transparent; color: #d98ae6; border: 1px solid #a64ac9; box-shadow: none; }
body.diablo .btn.ghost:hover { background: rgba(166, 74, 201, .14); }
body.diablo .btn.danger { background: #c8102e; border-color: #8c0b21; color: #f5f2f4; }
body.diablo .btn:disabled { background: #2a2530; color: #6e6478; border-color: #1c191e; box-shadow: none; opacity: 1; }
body.diablo .btn.tiny { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* icon-ish buttons */
body.diablo .icon-btn, body.diablo .sheet-x, body.diablo .wl-popup-x, body.diablo .modal-x {
  background: #1c191e;
  color: #d98ae6;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  min-width: 30px;
  min-height: 28px;
}
body.diablo .icon-btn:hover, body.diablo .sheet-x:hover { border-color: #a64ac9; color: #a64ac9; }

/* uniform 40px header control boxes — style, never resize */
body.diablo .topbar-actions {
  display: flex; align-items: center; gap: 6px;
}
body.diablo .topbar-actions .icon-btn,
body.diablo .topbar-actions .notif-bell {
  width: 40px; height: 40px;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #151317;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  color: #d98ae6;
  box-shadow: 0 0 8px rgba(166, 74, 201, .18);
}
body.diablo .topbar-actions .icon-btn:hover,
body.diablo .topbar-actions .notif-bell:hover { border-color: #a64ac9; animation: diablo-flicker 1.1s infinite; }
body.diablo .topbar-actions .user-chip {
  min-height: 40px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #151317;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  color: #f5f2f4;
  padding: 0 10px 0 6px;
}

/* ============================================================
   POPUPS — near-black cards, violet title glow
   ============================================================ */
body.diablo .modal { backdrop-filter: none; background: rgba(5, 4, 7, .78); }
body.diablo .modal-card,
body.diablo .wl-popup-card {
  position: relative;
  background: #151317;
  color: #f5f2f4;
  border: 1px solid #a64ac9;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(166, 74, 201, .25), 0 10px 34px rgba(0, 0, 0, .7);
  text-align: left;
  animation: none;
}
body.diablo .modal-card h2, body.diablo .modal-card h3,
body.diablo .wl-popup-card h2, body.diablo .wl-popup-card h3 {
  font-family: var(--font-hand);
  color: #d98ae6;
  letter-spacing: .03em;
  text-decoration: underline wavy #a64ac9 2px;
  text-underline-offset: 6px;
}
body.diablo .modal-card .muted, body.diablo .wl-popup-card .muted { color: #9c8fa6; }

/* ============================================================
   FORM FIELDS — dark inset, purple focus glow
   ============================================================ */
body.diablo input[type="text"], body.diablo input[type="search"],
body.diablo input[type="email"], body.diablo input[type="password"],
body.diablo input[type="number"], body.diablo input[type="date"],
body.diablo select, body.diablo textarea {
  background: #0e0c0f;
  color: #f5f2f4;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
body.diablo input::placeholder, body.diablo textarea::placeholder { color: #6e6478; }

/* ============================================================
   NAV TABS — ghost text, active tab is a purple key stamp
   ============================================================ */
body.diablo .tab {
  color: #9c8fa6;
  font-weight: 600;
  letter-spacing: .06em;
}
body.diablo .tab:hover { color: #d98ae6; }
body.diablo .tab.active {
  background: #a64ac9;
  color: #0b0b0d;
  border: 1px solid #7c2f99;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(166, 74, 201, .4);
}

/* ============================================================
   CARDS & PANELS — near-black, handwritten purple underlines,
   faint inverted-photo grain on media tiles
   ============================================================ */
body.diablo .card, body.diablo .panel, body.diablo .sheet,
body.diablo .show-card, body.diablo .thread-card {
  background: #151317;
  color: #f5f2f4;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
body.diablo .card .muted, body.diablo .panel .muted,
body.diablo .show-card .muted { color: #9c8fa6; }
body.diablo .card h2, body.diablo .card h3,
body.diablo .panel h2, body.diablo .panel h3 {
  text-decoration: underline wavy rgba(166, 74, 201, .75) 1.5px;
  text-underline-offset: 5px;
}
body.diablo .show-card::after, body.diablo .thread-card::after {
  content: ""; pointer-events: none;
  position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(45deg, rgba(242, 201, 212, .016) 0 2px, transparent 2px 4px);
}

/* ============================================================
   HEADER — black bar, red MGK monogram stamp, handwritten
   purple wordmark
   ============================================================ */
body.diablo .brand-name, body.diablo .site-title {
  font-family: var(--font-hand);
  color: #a64ac9;
  text-shadow: 0 0 10px rgba(166, 74, 201, .8), 0 0 26px rgba(166, 74, 201, .4);
  letter-spacing: .06em;
  font-weight: 400;
}
body.diablo .brand-mark, body.diablo .brand-monogram {
  font-weight: 800;
  color: #f5f2f4;
  background: #c8102e;
  border-radius: 3px;
  padding: 3px 7px;
  letter-spacing: .05em;
  transform: rotate(-4deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
body.diablo header, body.diablo .topbar {
  background: linear-gradient(#161318, #0b0b0d);
  border-bottom: 2px solid #a64ac9;
  box-shadow: 0 2px 18px rgba(166, 74, 201, .25);
}

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

/* haunted-hotel window chrome: black window, purple neon title bar */
body.diablo .mac-window {
  background: #151317;
  border: 1px solid #a64ac9;
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(166, 74, 201, .22), 0 8px 26px rgba(0, 0, 0, .65);
  overflow: hidden;
}
body.diablo .mac-titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#241d29, #151317);
  border-bottom: 1px solid #a64ac9;
  padding: 7px 12px;
  font: 700 12px/1.2 Tahoma, Verdana, sans-serif;
  color: #d98ae6;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(217, 138, 230, .6);
}
body.diablo .mac-titlebar::before { content: "\2730"; color: #c8102e; }
body.diablo .mac-lights { display: none; }
body.diablo .mac-filename { flex: 1; text-align: left; }

/* Masthead — midnight lobby glow, handwritten purple logo */
body.diablo .home-masthead-body {
  padding: 30px 18px 34px; text-align: center;
  background:
    radial-gradient(600px 320px at 50% 115%, rgba(166, 74, 201, .28) 0%, transparent 60%),
    radial-gradient(300px 160px at 12% 8%, rgba(200, 16, 46, .14) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(166, 74, 201, .06) 26px 27px),
    linear-gradient(#161318 0%, #0b0b0d 100%);
}
body.diablo .home-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 16px;
  background: #c8102e; color: #f5f2f4; font-weight: 700; letter-spacing: .22em; font-size: 12px;
  transform: rotate(-2deg); border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.6);
  text-transform: uppercase;
}
body.diablo .home-logo {
  margin: 0; font-family: var(--font-hand);
  font-size: clamp(36px, 8.5vw, 72px); font-weight: 400;
  letter-spacing: .03em; color: #a64ac9;
  text-shadow: 0 0 12px rgba(166, 74, 201, .85), 0 0 40px rgba(166, 74, 201, .35);
  line-height: 1.1;
}
body.diablo .home-logo span { display: block; font-size: .42em; letter-spacing: .34em; color: #f2c9d4; font-family: 'Oswald', sans-serif; }
body.diablo .home-tagline { margin: 16px 0 0; color: #9c8fa6; font-size: 15px; font-style: italic; }

/* home tiles — near-black key cards */
body.diablo .tile {
  background: #151317; color: #f5f2f4;
  border: 1px solid #3a2f42; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
body.diablo .tile:hover { border-color: #a64ac9; box-shadow: 0 0 16px rgba(166, 74, 201, .3); }
body.diablo .tile .tile-label { color: #d98ae6; font-weight: 800; letter-spacing: .08em; }
body.diablo .tile .tile-sub { color: #9c8fa6; }

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

/* ticker — purple neon marquee on black */
body.diablo .home-ticker {
  background: #0b0b0d; border: 1px solid #a64ac9; border-radius: 4px;
  color: #d98ae6; overflow: hidden; white-space: nowrap; padding: 8px 0;
  font-weight: 700; letter-spacing: .1em; font-size: 13px;
  text-shadow: 0 0 8px rgba(217, 138, 230, .6);
  box-shadow: 0 0 12px rgba(166, 74, 201, .2);
}

/* ============================================================
   CHAT — dark bubbles; own messages purple neon
   ============================================================ */
body.diablo .chat-bubble, body.diablo .msg {
  background: #1c191e; color: #f5f2f4;
  border: 1px solid #3a2f42; border-radius: 10px;
}
body.diablo .chat-bubble.own, body.diablo .msg.own {
  background: #a64ac9; color: #0b0b0d; border-color: #7c2f99;
  box-shadow: 0 0 10px rgba(166, 74, 201, .35);
}
body.diablo .chat-launcher {
  background: #a64ac9; color: #0b0b0d;
  border: 2px solid #7c2f99;
  box-shadow: 0 0 16px rgba(166, 74, 201, .5);
}

/* ============================================================
   NOTIFICATIONS — dark ledger, purple selection
   ============================================================ */
body.diablo .notif-list, body.diablo .notif-item {
  background: #151317; color: #f5f2f4;
  border-color: #3a2f42;
}
body.diablo .notif-item.unread { border-left: 4px solid #a64ac9; box-shadow: inset 0 0 12px rgba(166, 74, 201, .12); }
body.diablo .notif-item:hover { background: #1c191e; }

/* ============================================================
   FOOTER — EST 19XX as a red monogram stamp
   ============================================================ */
body.diablo .site-footer, body.diablo footer {
  border-top: 2px solid #a64ac9;
  background: #0b0b0d;
  color: #9c8fa6;
}
body.diablo .est-stamp, body.diablo .footer-est {
  font-family: var(--font-hand);
  color: #f2c9d4;
  border: 2px solid #c8102e;
  border-radius: 4px;
  letter-spacing: .18em;
  transform: rotate(-3deg);
}
body.diablo .foot-donate a, body.diablo .donate-link {
  color: #d98ae6;
}

/* ============================================================
   DE-PINK — hard-coded pink glows in the base stylesheet
   become electric purple. (var(--accent) already flips; these
   are the literal pink values the variable swap can't reach.)
   ============================================================ */
body.diablo .attend-btn.on { box-shadow: 0 4px 14px rgba(166,74,201,.45); }
body.diablo .alert-btn.on { background: rgba(166,74,201,.16); }
body.diablo .chip.active { box-shadow: 0 4px 16px rgba(166,74,201,.5); }
body.diablo .stat-card.hero { background: linear-gradient(135deg, rgba(166,74,201,.25), #151317 65%); }
body.diablo .badge-pick.sel { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(166,74,201,.4); }
body.diablo .dm-row.unread { box-shadow: 0 0 12px rgba(166,74,201,.25); }
body.diablo .filters input[type="search"]:focus,
body.diablo .search-wrap input:focus,
body.diablo .auth-card input:focus,
body.diablo .form-grid input:focus,
body.diablo .form-grid textarea:focus { box-shadow: 0 0 0 3px rgba(166,74,201,.25); }
body.diablo .home-logo { text-shadow: 0 0 12px rgba(166, 74, 201, .85), 0 0 40px rgba(166, 74, 201, .35); }

/* ============================================================
   My Shows tiles + hero + install banner — v124: near-black
   key cards with purple icon chips; the hero is a vintage ROOM 13
   hotel key tag.
   ============================================================ */
body.diablo .my-subnav-card {
  background: #151317;
  color: #f5f2f4;
  border: 1px solid #3a2f42;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
body.diablo .my-subnav-card::before {
  background: radial-gradient(120% 90% at 50% 0%, rgba(166, 74, 201, .16), transparent 70%);
}
body.diablo .my-subnav-card[data-goto="songs"] { --tile-glow: rgba(166, 74, 201, .2); }
body.diablo .my-subnav-card[data-goto="states"] { --tile-glow: rgba(166, 74, 201, .2); }
body.diablo .my-subnav-card:hover { border-color: #a64ac9; box-shadow: 0 0 16px rgba(166, 74, 201, .3); }
body.diablo .my-subnav-emoji {
  background: linear-gradient(140deg, #a64ac9, #7c2f99);
  border: 1px solid #7c2f99;
  box-shadow: 0 0 12px rgba(166, 74, 201, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
  border-radius: 14px;
}
body.diablo .my-subnav-txt b { color: #d98ae6; }
body.diablo .my-subnav-txt small { color: #9c8fa6; }
body.diablo .songpct {
  background: linear-gradient(160deg, rgba(166, 74, 201, .14), rgba(21, 19, 23, .02)), #151317;
  color: #f5f2f4;
  border: 1px solid #a64ac9;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(166, 74, 201, .28), 0 4px 14px rgba(0, 0, 0, .6);
}
body.diablo .songpct-num { color: #d98ae6; }
body.diablo .songpct-txt .muted { color: #9c8fa6; }
body.diablo .songpct-bar { background: rgba(166, 74, 201, .2); }

/* ROOM 13 key tag on the My Shows hero */
body.diablo .stat-card.hero {
  position: relative;
  transform: rotate(-1.5deg);
  border: 1px solid #a64ac9;
  border-radius: 14px 14px 4px 4px;
  padding-top: 30px;
}
body.diablo .stat-card.hero::before {
  content: "";
  position: absolute; top: 10px; left: 50%;
  width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%;
  background: #0b0b0d;
  border: 3px solid #a64ac9;
  box-shadow: 0 0 10px rgba(166, 74, 201, .5);
}
body.diablo .stat-card.hero::after {
  content: "ROOM 13";
  position: absolute; top: 30px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 13px; letter-spacing: .3em;
  color: #d98ae6;
  text-shadow: 0 0 8px rgba(217, 138, 230, .6);
}

body.diablo .install-banner {
  background: linear-gradient(135deg, rgba(166, 74, 201, .16), rgba(200, 16, 46, .10));
  border: 1px solid #a64ac9;
  border-radius: 4px;
  color: #f5f2f4;
}

/* ============================================================
   ERA-AUTHENTICITY SWEEP v133 (Sep 17 2026) — HOTEL DIABLO
   Haunted hotel between heaven and hell: flickering neon
   VACANCY buttons, brass elevator-floor nav tabs, room-key
   envelope cards stamped ROOM 19XX, neon-sign popups,
   FLOOR 13 elevator indicator (Jordan's call).
   ============================================================ */
@keyframes diablo-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; }
  78% { opacity: 1; } 79% { opacity: .7; } 80% { opacity: 1; }
}
/* neon hotel sign behind masthead */
body.diablo .home-masthead-body { position: relative; overflow: hidden; }
body.diablo .home-masthead-body::before {
  content: "HOTEL DIABLO";
  position: absolute; left: 50%; top: 10px;
  transform: translateX(-50%) rotate(-2deg);
  font-family: 'Oswald', sans-serif; font-size: 15px; letter-spacing: .5em;
  color: #ff5d7a;
  text-shadow: 0 0 6px #ff2d55, 0 0 18px #ff2d55, 0 0 42px #b3122f;
  border: 2px solid #ff5d7a;
  border-radius: 10px;
  padding: 6px 14px 6px 20px;
  box-shadow: 0 0 18px rgba(255,45,85,.5), inset 0 0 12px rgba(255,45,85,.25);
  animation: diablo-flicker 4.2s infinite;
  pointer-events: none;
  white-space: nowrap;
}
/* FLOOR 13 elevator indicator — the floor that doesn't exist */
body.diablo .home-masthead-body::after {
  content: "▲ FLOOR 13 ▼";
  position: absolute; right: 12px; bottom: 12px;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .28em;
  color: #ffb347;
  text-shadow: 0 0 8px #ff8c00, 0 0 20px rgba(255,140,0,.6);
  background: #120a04;
  border: 2px solid #8a6a2a;
  border-radius: 6px;
  padding: 5px 10px 5px 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.85), 0 0 12px rgba(255,140,0,.35);
  animation: diablo-flicker 7.5s infinite;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
/* flickering neon buttons */
body.diablo .btn {
  background: #0d0212;
  color: #ff8ba0;
  border: 2px solid #ff2d55;
  border-radius: 10px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .2em;
  text-shadow: 0 0 8px #ff2d55;
  box-shadow: 0 0 12px rgba(255,45,85,.45), inset 0 0 10px rgba(255,45,85,.2);
  animation: diablo-flicker 6s infinite;
}
body.diablo .btn.primary {
  color: #c9a7ff;
  border-color: #9d5cff;
  text-shadow: 0 0 8px #9d5cff;
  box-shadow: 0 0 14px rgba(157,92,255,.5), inset 0 0 10px rgba(157,92,255,.22);
}
/* brass elevator floor buttons */
body.diablo .tab {
  width: 48px; height: 48px; border-radius: 50%;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #e8c46a, #8a6a2a 65%, #4a3512);
  border: 2px solid #2c1f08;
  color: #1d1204;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  box-shadow: 0 3px 0 #2c1f08, 0 0 10px rgba(232,196,106,.35);
}
body.diablo .tab.active {
  background: radial-gradient(circle at 35% 30%, #ffb3c2, #ff2d55 65%, #8e0b21);
  color: #fff;
  text-shadow: 0 0 8px #ff2d55;
  box-shadow: 0 3px 0 #4a0512, 0 0 18px rgba(255,45,85,.8);
}
/* hotel room-key envelope cards */
body.diablo .show-card, body.diablo .thread-card {
  position: relative;
  background: linear-gradient(#d8b98a, #c49a63);
  color: #2a1a08;
  border: 1px solid #6b4a22;
  border-radius: 3px;
  padding-left: 92px;
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
body.diablo .show-card::before, body.diablo .thread-card::before {
  content: "ROOM\A19XX";
  white-space: pre;
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 78px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .12em;
  color: #f4e3c2;
  background: linear-gradient(#5c1010, #380808);
  border-right: 2px dashed #2a1a08;
}
body.diablo .show-card::after, body.diablo .thread-card::after {
  content: "XX";
  position: absolute; right: 10px; top: 8px;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: .2em;
  color: #8e0b21;
  border: 2px solid #8e0b21;
  border-radius: 4px;
  padding: 2px 6px;
  transform: rotate(8deg);
}
/* neon-sign popups */
body.diablo .wl-popup-card, body.diablo .modal-card {
  background: #0d0212;
  border: 3px solid #9d5cff;
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(157,92,255,.6), 0 0 70px rgba(255,45,85,.25), 0 16px 50px rgba(0,0,0,.7);
  color: #f2e9ff;
}
body.diablo .wl-popup-card h2, body.diablo .wl-popup-card h3 {
  color: #ff8ba0;
  text-shadow: 0 0 10px #ff2d55;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .14em;
}
/* key-tag form fields */
body.diablo input, body.diablo select, body.diablo textarea {
  background: #1c0a14;
  border: 2px solid #6b4a22;
  border-radius: 12px;
  color: #f4e3c2;
}
body.diablo .foot::after {
  content: "XX • ROOM 19XX • EST • CHECK OUT IS NEVER";
  display: block; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: .32em;
  color: #ff5d7a;
  text-shadow: 0 0 10px rgba(255,45,85,.7);
  margin-top: 10px;
}

/* ============================================================
   ERA RESEARCH PASS v134 (Sep 17 2026) — HOTEL DIABLO
   A) mgkestfam archive: FLOOR 13 EDITION release; "El Diablo";
   "Hollywood Whore"; "Glass House"; "5:3666"; dark honest
   inside-his-head album framing; devil-puppet Hollywood Whore
   promo; Hotel Diablo brought to life at EST Fest 6.
   B) ROXY NIGHT — Oct 8 2020, NoCap livestream, full album in
   full from the Roxy Theatre, West Hollywood (Loudwire,
   Kerrang!). Staging studied from the official "Hotel Diablo
   (Live from The Roxy)" film (dir. Adam Paul, 7cinematics):
   near-black room, deep violet backlight haze, hard warm
   spotlight on MGK in a black textured jacket, and a giant
   pink neon cursive "Hotel Diablo" sign as the backdrop.
   Setlist tape below mirrors the film's running order.
   Existing ▲ FLOOR 13 ▼ plaque (v133) is PRESERVED — do not
   restyle it. 19XX meaning intentionally unexplained.
   ============================================================ */
body.diablo .foot::before {
  content: "★ OCT 8 2020 ★ LIVE FROM THE ROXY ★ HOTEL DIABLO IN FULL ★";
  display: block; text-align: center;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: #ff9ecb; opacity: .9; margin-bottom: 8px;
}
body.diablo .home-ticker::after {
  content: "SEX DRIVE • EL DIABLO • HOLLYWOOD WHORE • GLASS HOUSE • ROULETTE • FLOOR 13 • 5:3666 • I THINK I'M OKAY";
  display: block; text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 11px; letter-spacing: .14em;
  color: #f2c9d4; margin-top: 6px;
  text-shadow: 0 0 8px rgba(255,45,130,.8);
}
body.diablo .home-section-title::before {
  content: "Hotel Diablo";
  display: block;
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 30px; font-weight: 700;
  color: #ffd7ef; letter-spacing: .06em;
  text-shadow:
    0 0 6px #ff4d9d,
    0 0 18px #ff2d85,
    0 0 42px #b01e63;
  margin-bottom: 4px;
  animation: diablo-roxy-neon 4s ease-in-out infinite;
}
@keyframes diablo-roxy-neon {
  0%, 100% { opacity: 1; }
  50% { opacity: .86; }
  52% { opacity: 1; }
  78% { opacity: .94; }
}