/* /discord-bots/streamers (stp-). Loaded after builtin_services.css (pa-
   tokens, hero type, buttons, closing band), all_in_one.css (aio- sections,
   fact tiles, perks, steps, plans, FAQ, related links) and gaming_page.css
   (gcp- Discord window, embed, buttons, cards, service tiles), all unchanged.
   Only what is new to this page lives here. */

.stp { --stp-twitch: #9146ff; --stp-live: #eb0400; }

/* ---- Hero stage: the go-live alert and the recap it becomes ---- */
.stp-stage { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 540px; padding-top: 118px; }
.stp-bot { position: absolute; top: -40px; right: -28px; width: 250px; height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.42)); }
.stp-alert { position: relative; z-index: 1; width: 80%; }
.stp-content { font-size: 0.8rem; line-height: 1.5; color: var(--yb-text); margin-bottom: 0.4rem; }
.stp-content b { font-weight: 700; }
.stp-embed-twitch { border-left-color: var(--stp-twitch); }
.stp-author { font-size: 0.72rem; font-weight: 600; color: var(--yb-text); }
.stp-link { color: #00a8fc; }
.stp-ef-inline { grid-template-columns: repeat(2, max-content); gap: 0.4rem 1.6rem; }

/* The stream preview: a drawn placeholder frame, 16:9 like Twitch's. */
.stp-preview { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #1b1446 0%, #3a1d6e 48%, #7b2d8e 100%); }
.stp-preview-sky { position: absolute; left: 62%; top: 18%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0%, #ff8a5b 55%, rgba(255,138,91,0) 72%); }
.stp-preview-hill { position: absolute; left: -10%; right: -10%; bottom: -34%; height: 70%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #2b1a55, #120c2b); }
.stp-preview-hud { position: absolute; left: 6%; bottom: 9%; width: 30%; height: 7%; border-radius: 3px; background: rgba(255,255,255,0.14); box-shadow: 0 -12px 0 -4px rgba(255,255,255,0.08); }

.stp-recap { position: relative; z-index: 2; width: 60%; margin: -150px 0 0 auto; background: var(--yb-abyss); border: 1px solid var(--yb-gold-dim); border-radius: 12px; padding: 0.7rem 0.8rem 0.8rem; box-shadow: 0 0 0 1px rgba(145,70,255,0.12), 0 20px 50px rgba(88,40,180,0.28); transform: rotate(1deg); }
.stp-recap .gcp-embed { gap: 0.35rem; }
.stp-recap-tag { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-cyan); margin-bottom: 0.45rem; }

/* ---- 02 Feeds: the source list ---- */
.stp-sources { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; padding: 0.95rem 1rem 0.9rem; box-shadow: 0 22px 60px rgba(0,0,0,0.24); }
.stp-src-head { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.stp-src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.stp-src-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); }
.stp-src-list b { font-size: 0.9rem; font-weight: 600; color: var(--yb-text); }
.stp-src-every { font-family: var(--mono); font-size: 0.66rem; color: var(--yb-cyan); align-self: center; justify-self: end; }
.stp-src-x { grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.5; color: var(--yb-muted); }
.stp-src-cap { font-size: 0.8rem; line-height: 1.55; color: var(--yb-muted); margin-top: 0.75rem; }

/* ---- 03 Arrivals: welcome perks and the raid ladder ---- */
.stp-arrivals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.2rem; align-items: start; }
.stp-raid { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; padding: 1rem 1.1rem 1.05rem; box-shadow: 0 22px 60px rgba(0,0,0,0.24); }
.stp-raid-head { display: flex; justify-content: space-between; margin-bottom: 0.55rem; }
.stp-raid-lede { font-size: 0.88rem; line-height: 1.6; color: var(--yb-muted); margin: 0 0 0.8rem; }
.stp-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.stp-ladder li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); }
.stp-rung-k { font-family: var(--disp); font-weight: 600; font-size: 0.95rem; color: var(--yb-text); }
.stp-rung-x { font-size: 0.84rem; line-height: 1.5; color: var(--yb-muted); }
.stp-rung-auto { border-color: var(--yb-cyan-dim) !important; background: var(--yb-cyan-bg) !important; }
.stp-rung-tag { grid-column: 2; justify-self: start; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-cyan); border: 1px solid var(--yb-cyan-dim); border-radius: 4px; padding: 1px 6px; margin-top: 0.2rem; }
.stp-raid-note { font-size: 0.84rem; line-height: 1.6; color: var(--yb-muted); margin: 0.85rem 0 0; }
.stp-raid-note a { color: var(--yb-cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Light theme ---- */
[data-theme="light"] .stp-bot { filter: drop-shadow(0 14px 22px rgba(20,30,60,0.22)); }
[data-theme="light"] .stp-recap { box-shadow: 0 0 0 1px rgba(145,70,255,0.1), 0 14px 34px rgba(88,40,180,0.14); }
[data-theme="light"] .stp-sources, [data-theme="light"] .stp-raid { box-shadow: 0 16px 40px rgba(30,41,80,0.12); }
[data-theme="light"] .stp-link { color: #006ce7; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .stp-stage { justify-self: center; max-width: 560px; }
  .stp-arrivals { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Mono labels: legible floor on a phone, nothing below ~10px. */
  .stp-src-every, .stp-recap-tag, .stp-rung-tag { font-size: 0.64rem; }
}
@media (max-width: 560px) {
  .stp-stage { padding-top: 150px; }
  .stp-bot { width: 200px; top: -14px; right: -6px; }
  .stp-alert { width: 94%; }
  .stp-recap { width: 92%; margin-top: 12px; transform: none; }
  .stp-ladder li { grid-template-columns: 1fr; }
  .stp-rung-tag { grid-column: 1; }
}