/* ===================== THEME TOKENS ===================== */
:root,
[data-theme="dark"] {
  --bg: #0e0e10;
  --bg-elevated: #18181b;
  --bg-elevated-2: #1f1f23;
  --border: #2d2d33;
  --text: #efeff1;
  --text-muted: #adadb8;
  --text-faint: #71717a;
  /* Color-theme accent tokens default to US Open; overridden below per
     [data-color-theme]. --accent-text is a lighter/readable variant for
     standalone colored text (bot name, mentions); --accent-strong-soft is a
     stronger tint used for mention backgrounds; --accent-2 is the secondary
     brand-highlight color. */
  --accent: #155EEF;
  --accent-hover: #0F4FC0;
  --accent-soft: rgba(21, 94, 239, 0.15);
  --accent-strong-soft: rgba(21, 94, 239, 0.25);
  --accent-text: #5B9CFF;
  --accent-2: #D4FF3D;
  --accent-2-soft: rgba(212, 255, 61, 0.15);
  --live-red: #eb0400;
  --online-green: #00c781;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --chat-bg: #18181b;
  --input-bg: #0e0e10;
  --scrollbar: #3a3a3d;
  --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Color theme: Classic Purple (the site's original/previous theme) ---- */
[data-color-theme="purple"] {
  --bg: #0e0e10;
  --bg-elevated: #18181b;
  --bg-elevated-2: #1f1f23;
  --chat-bg: #18181b;
  --input-bg: #0e0e10;
  --accent: #9147ff;
  --accent-hover: #7d2ff0;
  --accent-soft: rgba(145, 71, 255, 0.15);
  --accent-strong-soft: rgba(145, 71, 255, 0.25);
  --accent-text: #a970ff;
  --accent-2: #9147ff;       /* single unified purple — matches the original look */
  --accent-2-soft: rgba(145, 71, 255, 0.15);
}

/* ---- Color theme: US Open (court blue + tennis-ball green) ---- */
[data-color-theme="usopen"] {
  --bg: #070738;
  --bg-elevated: #0c0c46;
  --bg-elevated-2: #121254;
  --chat-bg: #0c0c46;
  --input-bg: #070738;
  --accent: #155EEF;
  --accent-hover: #0F4FC0;
  --accent-soft: rgba(21, 94, 239, 0.15);
  --accent-strong-soft: rgba(21, 94, 239, 0.25);
  --accent-text: #5B9CFF;
  --accent-2: #D4FF3D;
  --accent-2-soft: rgba(212, 255, 61, 0.15);
}

* { box-sizing: border-box; }

/* Belt-and-suspenders: an author rule like `.foo { display: flex }` beats the
   browser's own `[hidden] { display: none }` in the cascade, since author
   styles always win over user-agent styles regardless of specificity. Any
   element using the hidden attribute must stay hidden no matter what other
   classes it carries. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===================== FLYOUT MENU ===================== */
.flyout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.flyout-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.flyout-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  height: 100%;
  width: 280px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.flyout-drawer.is-open {
  transform: translateX(0);
}

.flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.flyout-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
.flyout-brand-name { color: var(--text); }
.flyout-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.flyout-close:hover { background: var(--accent-soft); color: var(--text); }

.flyout-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
}
.flyout-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.flyout-link:hover { background: var(--bg-elevated-2); color: var(--text); }
.flyout-link--active {
  background: var(--accent-soft);
  color: var(--accent);
}
.flyout-link--active:hover { background: var(--accent-soft); color: var(--accent); }
.flyout-link--muted { color: var(--text-faint); font-size: 13px; }
.flyout-link--app {
  background: var(--accent-soft);
  color: var(--accent);
  margin-top: 4px;
}
.flyout-link--app:hover { background: var(--accent); color: #fff; }
.flyout-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  background: var(--live-red);
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.flyout-divider { border-top: 1px solid var(--border); margin: 0 12px; }

.flyout-footer-links {
  padding: 12px 12px 0;
}
.flyout-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

.chat-msg__pin {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  opacity: 0.7;
  border-radius: 4px;
  line-height: 1;
}
.chat-msg__pin:hover { opacity: 1; background: var(--accent-soft); }
.is-mod .chat-msg:hover .chat-msg__pin { display: inline-flex; }

.chat-msg__timeout {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  opacity: 0.9;
  border-radius: 4px;
  line-height: 1;
}
.chat-msg__timeout:hover { opacity: 1; background: #92400e; }
.is-mod .chat-msg:hover .chat-msg__timeout { display: inline-flex; }

@media (max-width: 900px) {
  .is-mod .chat-msg .chat-msg__pin,
  .is-mod .chat-msg .chat-msg__timeout { display: inline-flex; }
}

.timeout-menu {
  position: fixed;
  z-index: 1000;
  background: var(--bg-elevated-2, #1f1f23);
  border: 1px solid var(--border, #2d2d33);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.timeout-menu__header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint, #71717a);
  padding: 6px 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border, #2d2d33);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeout-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text, #efeff1);
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
}
.timeout-menu__item:hover { background: #92400e; color: #fff; }

@media (max-width: 900px) {
  .is-mod .chat-msg .chat-msg__pin { display: inline-flex; }
  .is-mod .chat-msg .chat-msg__actions { display: flex; }
}

.pinned-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  font-size: 13px;
}
.pinned-bar__icon { flex-shrink: 0; font-size: 14px; padding-top: 1px; }
.pinned-bar__content {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  color: var(--text-muted);
  max-height: 30vh;
  overflow-y: auto;
}
.pinned-bar__content strong { color: var(--accent); margin-right: 4px; }
.pinned-bar__unpin {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.pinned-bar__unpin:hover { color: var(--text); background: var(--bg-elevated-2); }

@media (max-width: 900px) {
  /* Keep the pinned message INSIDE the Stream Chat on mobile (in normal flow),
     rather than fixing it to the top of the screen over the video. It already
     sits just above the chat messages in the markup. */
  .pinned-bar {
    position: static;
    z-index: auto;
    border-top: none;
    border-bottom: 2px solid var(--accent);
    background: rgba(20, 10, 40, 0.95);
  }
}

/* ---- COUNTDOWN ---- */
.offline-overlay__next {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 4px 0;
}
.offline-overlay__day {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 16px;
}
.offline-overlay__countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}
.countdown__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 64px;
}
.countdown__num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
/* When the admin turns off "show unit names", hide the day/hr/min/sec labels. */
.countdown--no-units .countdown__label { display: none; }
.countdown__sep {
  font-size: 24px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

/* ---- ANNOUNCEMENT ---- */
.announce-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 180, 0, 0.08);
  border-top: 1px solid rgba(255, 180, 0, 0.25);
  border-bottom: 1px solid rgba(255, 180, 0, 0.25);
}
.announce-bar__input {
  flex: 1;
  background: rgba(255, 180, 0, 0.1);
  border: 1px solid rgba(255, 180, 0, 0.3);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.announce-bar__input:focus { border-color: rgba(255, 180, 0, 0.7); }
.announce-bar__input::placeholder { color: rgba(255, 180, 0, 0.5); }
.announce-bar__btn {
  background: rgba(255, 180, 0, 0.85);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}
.announce-bar__btn:hover { background: rgba(255, 180, 0, 1); }

.chat-msg--announcement {
  background: rgba(255, 180, 0, 0.1);
  border: 1px solid rgba(255, 180, 0, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative; /* anchor the mod delete (✕) button */
}
/* Give the ✕ room so it doesn't sit on top of the text, and nudge it inside
   the padded/bordered announcement box. Only shows for mods on hover. */
.chat-msg--announcement .chat-msg__actions {
  top: 6px;
  right: 8px;
}
.is-mod .chat-msg--announcement:hover .announce-text {
  padding-right: 22px;
}
.chat-msg--announcement .announce-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.chat-msg--announcement .announce-text {
  color: #fbbf24;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
}

/* ---- YOUTUBE CLICK HINT ---- */
.yt-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  animation: yt-fade 3s ease-in-out infinite;
}
.yt-hint__box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 8px 18px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.yt-hint__icon {
  color: #ff0000;
  font-size: 14px;
}
.yt-hint__text {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
@keyframes yt-fade {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ===================== TOPBAR ===================== */
.topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.2px;
}

.brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}

.brand__accent { color: var(--accent-2); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-btn--ghost { border: none; background: transparent; width: 28px; height: 28px; }

.icon { width: 18px; height: 18px; }

/* ===================== LAYOUT ===================== */
.layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;
  overflow: hidden;
}

.stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  flex: 0 0 auto;
  overflow: hidden;
  /* Keep a true 16:9 box on every screen. Previously max-height:80vh
     clamped the HEIGHT while width stayed 100%, which broke the ratio on
     wide monitors (box got wider than 16:9 → video/poster stretched
     horizontally). Instead we cap the WIDTH to whatever 80vh of height
     allows at 16:9, so the aspect-ratio rule is never overridden. The box
     is centered in the stage via the auto margins below. */
  max-width: calc(80vh * 16 / 9);
  margin-left: auto;
  margin-right: auto;
}
.player-wrap iframe,
.player-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.live-badge--hidden { display: none !important; }
.offline-overlay--hidden { display: none !important; }

.live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--live-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}
.live-badge--replay {
  background: #f59e0b;
  color: #1a1200;
}
.live-badge--replay .dot { background: #1a1200; }
.live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s infinite;
  flex: 0 0 auto;
}
.live-badge__viewers {
  opacity: 0.85;
  font-size: 11px;
  font-weight: 600;
}

.live-duration {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.live-duration--hidden { display: none !important; }
@media (max-width: 560px) {
  .live-duration { top: 10px; right: 10px; font-size: 11px; padding: 3px 8px; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Offline overlay — sits ABOVE iframe (z-index 2), covers it completely */
.offline-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0e0e10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.3s;
}

/* Dark scrim so text stays readable over any background image */
.offline-overlay__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 32px;
  background: rgba(0, 0, 0, 0.52);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  text-align: center;
}
.offline-overlay__text {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.offline-overlay__viewers {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.stream-meta {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
/* Ad slots beside the Live Stream info. The wrapper centers up to three
   468x60 units in the empty space to the right of the title; they sit in a
   row on wide screens and wrap to new lines as space runs out. */
.stream-meta__ads {
  margin-left: auto;
  margin-right: auto;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.stream-meta__ad {
  flex: 0 0 auto;
  width: 468px;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-meta__ad iframe,
.stream-meta__ad ins,
.stream-meta__ad img {
  max-width: 100%;
  max-height: 60px;
}

.stream-meta__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #4f2db8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.stream-meta__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}

.stream-meta__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.streamer-name { color: var(--accent); font-weight: 600; }

.viewer-count::before {
  content: "●";
  color: var(--online-green);
  margin-right: 5px;
  font-size: 9px;
}

/* ===================== NEWS TICKER ===================== */
.news-ticker {
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--bg-elevated-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.news-ticker--hidden { display: none !important; }
.news-ticker__label {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.news-ticker__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.news-ticker__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: news-ticker-scroll linear infinite;
}
.news-ticker__item {
  display: inline-block;
  padding-right: 64px;
  font-size: 13px;
  font-weight: 600;
}
@keyframes news-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ticker-shift, -20%)); }
}

/* ===================== CHAT ===================== */
.chat {
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  border-left: 1px solid var(--border);
  min-height: 0;
}

.chat__header {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.45;
}

.chat-msg { word-wrap: break-word; }
.chat-msg__name { font-weight: 700; margin-right: 4px; }
.chat-msg__name--system { color: var(--text-faint); font-style: italic; font-weight: 500; }
.chat-msg__text { color: var(--text); white-space: pre-wrap; }

.chat-msg--system { color: var(--text-faint); font-size: 12.5px; }
.chat-msg--welcome .chat-msg__welcome-name { font-weight: 800; }
.chat-msg--welcome {
  transition: opacity 2.5s ease, max-height 2.5s ease, margin 2.5s ease, padding 2.5s ease;
  overflow: hidden;
}
.chat-msg--welcome-leaving {
  opacity: 0;
  max-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.chat__status {
  flex: 0 0 auto;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--text-faint);
}

.chat__form {
  flex: 0 0 auto;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat__name,
.chat__input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 10px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s ease;
}
.chat__name:focus,
.chat__input:focus { border-color: var(--accent); }

.chat__name-row { position: relative; }
.chat__name[readonly] {
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  cursor: default;
  padding-right: 30px;
}
.chat__name-lock {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.chat__name-hint {
  margin: -4px 0 0;
  font-size: 11px;
  color: var(--text-faint);
}
.chat__name-hint[hidden] { display: none !important; }

.chat__input {
  resize: vertical;
  min-height: 92px;
  max-height: 180px;
  font-family: inherit;
  line-height: 1.4;
  padding-bottom: 40px;
  padding-right: 6px;
}

.chat__composer { position: relative; }

.chat__composer-icons {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 34px;
  background: var(--input-bg);
  border-top: 1px solid var(--border);
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}

.chat__icon-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s;
}
.chat__icon-btn:hover { background: var(--bg-elevated-2); }
.chat__icon-btn[hidden] { display: none !important; }

.chat__send--inline {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 80px;
  height: 26px;
  z-index: 1;
}

.chat__send {
  flex: 0 0 auto;
  width: 80px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.chat__send:hover { background: var(--accent-hover); }
.chat__send svg { width: 16px; height: 16px; }

.chat-expand-btn {
  display: none;
}

.chat__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn--active {
  color: var(--accent);
}

.mod-popover {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated-2);
}
.mod-popover[hidden] { display: none !important; }
.mod-popover input {
  flex: 1 1 auto;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 9px;
  font-size: 12.5px;
  outline: none;
}
.mod-popover input:focus { border-color: var(--accent); }
.mod-popover input:disabled {
  background: var(--bg-elevated-2);
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.6;
}
.mod-popover button {
  flex: 0 0 auto;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
}
.mod-popover button:hover { background: var(--accent-hover); }

.mod-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
  font-size: 11.5px;
}
.mod-bar__label {
  font-weight: 700;
  color: var(--accent);
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mod-bar__btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.mod-bar__btn:hover { background: var(--accent); color: #fff; }
.mod-bar__btn--ghost { border-color: var(--border); color: var(--text-muted); }
.mod-bar__btn--ghost:hover { background: var(--bg-elevated-2); color: var(--text); }

.chat-msg {
  position: relative;
  padding-right: 44px;
}
.chat-msg__actions {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  gap: 3px;
}
.is-mod .chat-msg:hover .chat-msg__actions {
  display: flex;
}
.chat-msg__delete,
.chat-msg__ban {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chat-msg__delete { background: var(--live-red); }
.chat-msg__ban { background: #92400e; font-size: 11px; }
.chat-msg.is-removed {
  opacity: 0.4;
}

.emoji-picker {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated-2);
}
.emoji-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 4px;
}
.chat-msg__name--mod {
  color: #52e0a0 !important;
  font-weight: 700;
}

.chat-msg__name--bot {
  color: var(--accent-text) !important;
  font-weight: 700;
}

/* MOD / BOT badges in chat (match the OBS overlay) */
.chat-msg__badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 5px;
  margin-right: 5px;
  vertical-align: middle;
}
.chat-msg__badge--mod { background: #52e0a0; color: #06251a; }
.chat-msg__badge--bot { background: var(--accent); color: #fff; }

.chat-emoji {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 0 1px;
  animation: emoji-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes emoji-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.chat-mention {
  background: var(--accent-strong-soft);
  color: var(--accent-text);
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
}

.chat-link {
  color: var(--accent);
  text-decoration: underline;
  word-break: break-all;
}
.chat-link:hover { color: var(--accent-hover); }

.chat-msg__image {
  display: block;
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 6px;
  cursor: zoom-in;
  object-fit: cover;
}
.chat-msg__image:hover { border-color: var(--accent); }

/* Chat image lightbox — styled to match the GCash QR popup modal */
.chat-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.chat-lightbox.is-open { display: flex; }
.chat-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.chat-lightbox__box {
  position: relative;
  z-index: 1;
  background: #1a1a2e;
  border: 1px solid #3b2868;
  border-radius: 16px;
  padding: 16px;
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 8px 40px rgba(80, 30, 160, 0.4);
}
.chat-lightbox__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.chat-lightbox__close:hover { color: #fff; }
.chat-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(85vh - 32px);
  border-radius: 10px;
  margin: 0 auto;
}

.emoji-picker__close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.emoji-picker__close:hover { background: var(--bg-elevated); color: var(--text); }
.emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 4px 8px 8px;
  max-height: 220px;
  overflow-y: auto;
}
.emoji-btn {
  border: none;
  background: none;
  font-size: 20px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  line-height: 1;
}
.emoji-btn:hover { background: var(--accent-soft); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .chat {
    border-left: none;
    border-top: 1px solid var(--border);
    height: 50vh;
  }
  .player-wrap {
    aspect-ratio: 16 / 9;
    max-height: none;
    width: 100%;
    /* On phones the height-based width cap isn't needed — full width at
       16:9 always fits. Reset it so the box spans the column. */
    max-width: 100%;
  }
  .stage { overflow-y: visible; }
}

@media (max-width: 560px) {
  .stream-meta { padding: 12px 14px; flex-wrap: wrap; }
  /* Hide the 468x60 stream ad banners on mobile — they don't fit the layout
     here and the row reads cleaner without them. */
  .stream-meta__ads {
    display: none;
  }
  .stream-meta__avatar { width: 40px; height: 40px; font-size: 15px; }
  .stream-meta__title { font-size: 15.5px; }
  .chat { height: 46vh; }
  .brand__name { font-size: 14px; }
  .news-ticker { height: 28px; }
  .news-ticker__label { font-size: 9.5px; padding: 0 8px; }
  .news-ticker__item { font-size: 12px; padding-right: 40px; }
}

/* collapsed chat (mobile toggle) */
.chat.is-collapsed { display: none; }
.chat-expand-btn[hidden] { display: none !important; }
@media (max-width: 900px) {
  .chat-expand-btn {
    display: block;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: var(--shadow);
    cursor: pointer;
  }
}

/* ---- Agora click-to-unmute button ---- */
/* Shown when audio autoplay was blocked by the browser (no user gesture
   yet). Sits over the video, non-intrusive, tap-to-enable-sound. */
.agora-unmute-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s;
}
.agora-unmute-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}
.agora-unmute-btn[hidden] {
  display: none !important;
}

/* ---- Agora custom control bar ---- */
/* Agora ships no player UI, so we render our own — sits over the video,
   fades on hover, mirrors what viewers expect from Twitch/YouTube. */
.agora-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.player-wrap:hover .agora-controls,
.player-wrap:focus-within .agora-controls,
.agora-controls:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.agora-controls__btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s;
}
.agora-controls__btn:hover {
  background: rgba(255,255,255,0.15);
}
.agora-controls__volume {
  width: 90px;
  height: 4px;
  accent-color: #fff;
  cursor: pointer;
}
.agora-controls__spacer {
  flex: 1;
}
.agora-controls__quality-wrap {
  position: relative;
}
.agora-controls__quality-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(20,20,24,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  min-width: 160px;
  padding: 4px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.agora-controls__quality-menu[hidden] {
  display: none;
}
.agora-controls__quality-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #efeff1;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
.agora-controls__quality-menu button:hover {
  background: rgba(255,255,255,0.08);
}
.agora-controls__quality-menu button.is-active {
  color: var(--accent-text);
  font-weight: 700;
}
.agora-controls__quality-menu button.is-active::before {
  content: "✓ ";
}

/* ---- On-screen popup / banner over the video (automation) ---- */
.stream-popup {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 6;
  max-width: 82%;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(125,47,240,0.96), rgba(90,30,190,0.96));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  word-break: break-word;
}
.stream-popup--show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 560px) {
  .stream-popup { font-size: 14px; padding: 9px 16px; max-width: 90%; }
}

/* ---- Name-required entry modal ---- */
.namegate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 12, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.namegate[hidden] { display: none; }
.namegate__card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-elevated, #17151f);
  border: 1px solid rgba(169, 112, 255, 0.28);
  border-radius: 16px;
  padding: 32px 26px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
  animation: namegate-pop 0.28s cubic-bezier(0.2,0.9,0.3,1.15) both;
}
@keyframes namegate-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.namegate__logo {
  font-size: 22px; font-weight: 800; margin-bottom: 18px; color: #fff;
}
.namegate__logo span { color: var(--accent-2, #D4FF3D); }
.namegate__title {
  font-size: 19px; font-weight: 800; margin: 0 0 6px; color: #fff; line-height: 1.3;
}
.namegate__sub {
  font-size: 13.5px; color: rgba(255,255,255,0.6); margin: 0 0 20px; line-height: 1.5;
}
.namegate__input {
  width: 100%;
  padding: 13px 15px;
  font-size: 16px;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.namegate__input:focus { border-color: var(--accent, #155EEF); }
.namegate__input::placeholder { color: rgba(255,255,255,0.35); }
.namegate__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 4px;
  text-align: left;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  line-height: 1.45;
}
.namegate__check input {
  width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--accent, #155EEF); cursor: pointer;
}
.namegate__error {
  color: #f87171; font-size: 12.5px; margin: 8px 0 0; text-align: left;
}
.namegate__error[hidden] { display: none; }
.namegate__btn {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #155EEF);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.namegate__btn:hover { background: var(--accent-hover, #0F4FC0); }
.namegate__btn:active { transform: scale(0.98); }
/* brief welcome state */
.namegate__card.welcome .namegate__input,
.namegate__card.welcome .namegate__check,
.namegate__card.welcome .namegate__btn,
.namegate__card.welcome .namegate__sub,
.namegate__card.welcome .namegate__error { display: none; }
.namegate__welcome { display: none; font-size: 15px; color: rgba(255,255,255,0.8); margin-top: 8px; }
.namegate__card.welcome .namegate__welcome { display: block; }

/* Image brand logo (tennis) in the site header — transparent box */
.brand__logo--img { background: transparent !important; overflow: hidden; }
.brand__logo--img img { width: 100%; height: 100%; object-fit: contain; }

/* Chat disabled notice (master chat toggle) */
.chat-disabled-notice {
  display: none;
  text-align: center;
  padding: 14px 12px;
  margin: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-faint, #71717a);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Danger icon button (clear chat, etc.) ---- */
.chat__icon-btn--danger { color: #f87171; }
.chat__icon-btn--danger:hover { color: #fca5a5; background: rgba(248,113,113,0.12); }

/* ---- Reusable yes/no confirm modal ---- */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 12, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elevated, #17151f);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 14px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  animation: namegate-pop 0.22s cubic-bezier(0.2,0.9,0.3,1.15) both;
}
.confirm-modal__title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.confirm-modal__body { font-size: 13.5px; color: rgba(255,255,255,0.65); margin: 0 0 20px; line-height: 1.5; }
.confirm-modal__actions { display: flex; gap: 10px; }
.confirm-modal__btn {
  flex: 1;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.confirm-modal__btn:active { transform: scale(0.97); }
.confirm-modal__btn--no { background: rgba(255,255,255,0.08); color: #efeff1; }
.confirm-modal__btn--no:hover { background: rgba(255,255,255,0.14); }
.confirm-modal__btn--yes { background: #ef4444; color: #fff; }
.confirm-modal__btn--yes:hover { background: #dc2626; }