/* ============================================================
   LAYOUT.CSS
   Styles for the shared _Layout.cshtml shell:
   quest broadcaster ticker, footer icon row, main spacing.
   All colors via CSS variables from site.css.
   ============================================================ */

/* ---- Main content transition ---- */
main { transition: padding-top 0.3s ease-out; }
body.broadcaster-visible main { padding-top: 50px; }

@media (max-width: 768px) {
  body.broadcaster-visible main { padding-top: 0; }
}

/* ============================================================
   QUEST BROADCASTER TICKER
   ============================================================ */
.quest-broadcaster-container {
  position: fixed;
  /* --nav-h is kept in sync with the real navbar height by _Layout's
     ResizeObserver, so the bar always sits flush below the navbar even
     as it shrinks/grows on scroll. */
  top: var(--nav-h, 72px);
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(13, 30, 53, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 1015; /* just under the sticky navbar (1020) */
  border-bottom: 1px solid rgba(var(--qb-rgb), 0.5);
  overflow: hidden;
  height: 50px;
  display: none;
}
/* Channel themes — quest news is gold, rare drops are purple */
.quest-broadcaster-container.kind-quest { --qb: var(--gold);  --qb-rgb: 247, 183, 51; }
.quest-broadcaster-container.kind-drop  { --qb: #b88aff;      --qb-rgb: 184, 138, 255; }
.quest-broadcaster-container.show {
  display: block;
  animation: broadcasterSlideDown 0.3s ease-out;
}
/* Soft shine sweeping across the bar */
.quest-broadcaster-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -50%;
  width: 35%;
  background: linear-gradient(105deg, transparent, rgba(var(--qb-rgb), 0.06), transparent);
  animation: broadcasterSheen 4s infinite linear;
  pointer-events: none;
}

.quest-broadcaster-content {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 16px;
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

.broadcaster-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--qb-rgb), 0.12);
  border: 1px solid rgba(var(--qb-rgb), 0.4);
  border-radius: 9px;
  color: var(--qb);
  font-size: 14px;
  animation: pulseIcon 2s ease-in-out infinite;
}

.broadcaster-tag {
  flex-shrink: 0;
  background: rgba(var(--qb-rgb), 0.14);
  border: 1px solid rgba(var(--qb-rgb), 0.45);
  color: var(--qb);
  border-radius: 999px;
  padding: 3px 12px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.broadcaster-marquee-wrapper {
  flex: 1;
  overflow: hidden;
  height: 30px;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.broadcaster-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 6px 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.broadcaster-close:hover { color: var(--text-white); }

.broadcaster-marquee {
  display: inline-block;
  white-space: nowrap;
  /* Start beyond the wrapper's right edge so the text always enters
     from the right, regardless of how long the message is. */
  padding-left: 100%;
  animation: scrollRightToLeft 30s linear infinite;
  height: 100%;
  will-change: transform;
}
.broadcaster-marquee.paused { animation-play-state: paused; }

.broadcaster-text {
  display: inline-block;
  color: var(--text-light);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  line-height: 30px;
}
.broadcaster-marquee:has(.broadcaster-text:empty) { display: none; }

.broadcaster-text.new-announcement {
  animation: broadcasterFadeSlide 0.5s ease-out;
}

/* Player name inside the announcement — channel accent color
   (gold on quest news, purple on rare drops) */
.broadcaster-text .broadcaster-player {
  color: var(--qb);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(var(--qb-rgb), 0.45);
}

/* ============================================================
   LOGIN TOASTS — quiet bottom-left notifications when a
   player logs into the game (created by signalr-online-players.js)
   ============================================================ */
.login-toasts {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.login-toast {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(13, 30, 53, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.84rem;
  color: var(--text-light);
  pointer-events: auto;
  cursor: pointer;
  animation: loginToastIn 0.35s ease-out both;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.login-toast.leaving { opacity: 0; transform: translateX(-12px); }
.login-toast strong { color: var(--text-white); font-weight: 700; }
.login-toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  flex-shrink: 0;
}
.login-toast-meta {
  color: var(--text-muted);
  font-size: 0.74rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 9px;
}
@keyframes loginToastIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 576px) {
  .login-toasts { left: 10px; bottom: 10px; right: auto; }
  .login-toast { font-size: 0.78rem; }
  .login-toast-meta { display: none; }
}

/* ============================================================
   FOOTER ICON ROW (replaces inline flex styles)
   ============================================================ */
.footer-icons-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.footer-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.footer-icon {
  color: var(--text-muted);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-icon:hover {
  color: var(--primary);
  transform: translateY(-4px);
  filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.5));
}

.footer-icon-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes broadcasterSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes broadcasterSheen {
  0%   { left: -50%; }
  60%, 100% { left: 120%; }
}
@keyframes scrollRightToLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes pulseIcon {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.1); opacity: 0.9; }
}
@keyframes broadcasterFadeSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .quest-broadcaster-container {
    position: relative;
    top: 0;
    padding: 10px 0;
    height: auto;
    min-height: 44px;
  }
  .broadcaster-tag { display: none; }
  .broadcaster-icon { width: 28px; height: 28px; font-size: 12px; }
  .broadcaster-marquee-wrapper { height: 24px; }
  .broadcaster-text { font-size: 14px; line-height: 24px; }

  .footer-icons-row { gap: 1.25rem; }
}