@media (max-width: 700px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nav-left,
  .nav-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  .nav-link,
  .feedback-btn,
  .wc26-btn {
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
  }

  .site-logo {
    height: 30px;
  }
}

@media (max-width: 600px) {
  .wrap {
    padding: 10px;
  }

  .nav {
    padding: 10px 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .nav-right {
    margin-left: 0;
  }

  .nav-left,
  .nav-right {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-link {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .site img {
    height: 28px;
  }

  .player-actions {
    padding: 10px 12px;
    gap: 6px;
  }

  .btn {
    padding: 10px 12px;
    font-size: 0.8rem;
    min-height: 42px;
    min-width: 42px;
  }

  .info {
    padding: 12px;
  }

  .info-title,
  .event-toolbar-title {
    font-size: 1rem;
  }

  .info-meta {
    font-size: 0.75rem;
  }

  .help {
    padding: 12px;
    font-size: 0.8rem;
  }

  .site-footer {
    padding: 16px 12px;
    font-size: 0.8rem;
  }

  .event-backups-row {
    justify-content: flex-start;
  }

  .event-source-row {
    grid-template-columns: auto 1fr auto;
  }

  .event-source-current {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Sidebar Chat / Live TV tabs. The chat-box becomes a flex column: a tab
   strip on top, then the active pane (chat iframe OR the live-channel list).
   Only ever rendered inside the chat-open flex context (desktop sidebar).
--------------------------------------------------------------------------- */
.side-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid #1a1a2e;
  background: #0a0a0f;
}

.side-tab {
  flex: 1;
  padding: 11px 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #9ca3af;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.side-tab:hover {
  color: #e5e5e5;
}

.side-tab.is-on {
  color: #fff;
  border-bottom-color: #3b82f6;
  background: #0d1424;
}

.side-tab:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.side-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.side-pane[hidden] {
  display: none;
}

.side-pane-chat iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
}

.ltv-search {
  padding: 8px;
  border-bottom: 1px solid #1a1a2e;
  flex-shrink: 0;
}

.ltv-search input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background: #050508;
  color: #e5e7eb;
  font-size: 0.88rem;
}

.ltv-search input:focus {
  outline: none;
  border-color: #3b82f6;
}

.ltv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.ltv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #e5e7eb;
}

.ltv-row:hover {
  background: #0d1424;
}

.ltv-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070b13;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.ltv-logo .a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #3b82f6;
}

.ltv-logo img {
  position: relative;
  z-index: 1;
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}

.ltv-txt {
  min-width: 0;
}

.ltv-nm {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.ltv-sub {
  display: block;
  font-size: 0.72rem;
  color: #7b859a;
}

.ltv-msg {
  padding: 20px;
  text-align: center;
  color: #8b93a7;
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile bottom app-nav (event page). NTV-style fixed bar: a Streams picker
   (opens a sheet of the same source links from "Pick your stream"), Live TV,
   Feedback, and a More sheet (Discord + Mirrors). No server picker here —
   event pages aren't server-scoped. Desktop never shows any of this.
   ───────────────────────────────────────────────────────────────────────── */
.mnav,.mnav-sheet{display:none}
@media (max-width:600px){
  body{padding-bottom:60px}
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;align-items:stretch;gap:5px;padding:5px 8px calc(5px + env(safe-area-inset-bottom));background:rgba(9,9,14,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid #20202b}
  .mnav-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:46px;background:transparent;border:0;color:#96a0b2;font:inherit;font-size:.6rem;font-weight:700;letter-spacing:.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mnav-ic{font-size:1.2rem;line-height:1}
  .mnav-btn:active,.mnav-btn.on{color:#fff}
  .mnav-sheet.open{display:flex;flex-direction:column;position:fixed;z-index:401;background:#0e0e17;border:1px solid #2b3350;border-radius:14px;padding:6px;box-shadow:0 16px 46px rgba(0,0,0,.6)}
  #mnavSheet.open{right:8px;bottom:62px;min-width:180px}
  #mnavStreamsSheet.open{left:8px;right:8px;bottom:62px;max-height:54vh;overflow-y:auto}
  .mnav-sheet-item{display:flex;align-items:center;gap:9px;width:100%;padding:12px 13px;border-radius:9px;background:transparent;border:0;color:#dbeafe;font:inherit;font-size:.92rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
  .mnav-sheet-item:active{background:#141c2e}
  .mnav-sheet-head{padding:6px 10px 8px;color:#8b93a7;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .mnav-sheet-empty{padding:14px;color:#8b93a7;font-size:.9rem}
  .mnav-src-q{flex:0 0 auto;font-size:.62rem;font-weight:800;padding:2px 6px;border-radius:5px;background:#1d2740;color:#93c5fd}
  .mnav-src-current .mnav-src-q{background:#1e40af;color:#fff}
  .mnav-src-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mnav-src-now{flex:0 0 auto;font-size:.6rem;font-weight:800;color:#34d399}
  .mnav-src-current{background:#111a2e}
  /* Top nav on mobile: logo + "Back to schedule" share ONE row; the primary
     actions (Discord/Live TV/Feedback/Mirrors) live in the bottom bar now. */
  .nav-left .feedback-btn{display:none !important}
  .nav{flex-direction:row !important;align-items:center;flex-wrap:nowrap;gap:8px;padding:8px 12px}
  .nav-left{width:auto !important;flex:1 1 auto;min-width:0;justify-content:flex-start}
  .nav-right{width:auto !important;flex:0 0 auto;margin-left:auto;justify-content:flex-end}
  .nav-right .nav-link{padding:6px 8px;font-size:.8rem;white-space:nowrap}
  /* The "If stream has problems… / Discord | Back to schedule" help lines are
     redundant on mobile — Feedback, Discord and Back are all in the nav now. */
  .stream-help-card{display:none !important}
}

/* ---------------------------------------------------------------------------
   Embed Code box — sits under the player, above the channel picker. Gives
   out a trendsp.xyz /event/ URL (never a foxxy.st one). Collapsed by
   default so it costs no vertical space for the 99% who never use it.
   --------------------------------------------------------------------------- */
.embed-code-bar{margin:10px 0 0;display:flex;flex-direction:column;align-items:flex-end}
.embed-code-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;border:1px solid #2a2a35;background:#12121a;color:#b8b8c4;font:inherit;font-size:.78rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.embed-code-btn:hover{border-color:#3b82f6;color:#dbeafe;background:#0f1624}
.embed-code-btn[aria-expanded="true"]{border-color:#3b82f6;color:#dbeafe;background:#0f1624}
.embed-code-ic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;font-weight:700;color:#3b82f6;line-height:1}
.embed-code-panel{width:min(440px,100%);margin-top:8px;padding:12px;border:1px solid #2b3350;border-radius:10px;background:#0b0b11;box-shadow:0 12px 32px rgba(0,0,0,.6)}
.embed-code-label{display:block;font-size:.68rem;font-weight:700;color:#7b859a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.embed-code-row{display:flex;gap:8px;align-items:stretch}
.embed-code-input{flex:1;min-width:0;padding:9px 11px;border-radius:8px;border:1px solid #2a2a35;background:#050508;color:#c8ccd4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem}
.embed-code-input:focus{outline:none;border-color:#3b82f6}
.embed-code-copy{flex:0 0 auto;padding:9px 15px;border-radius:8px;border:1px solid #2563eb;background:#2563eb;color:#fff;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}
.embed-code-copy:hover{filter:brightness(1.08)}
@media (max-width:600px){
  .embed-code-row{flex-direction:column}
  .embed-code-copy{width:100%}
}
}

/* Cloudflare intercepts every image response on this zone and replaces it
   with its ToS notice, so the SVG logo cannot render here. Text wordmark
   instead - restore the <img> if the zone is ever un-flagged. */
.site-logo-text{font:700 21px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap}