/**
 * Styles for replay readiness, row buttons, "New" badge, nav indicator dot,
 * and in-page notification toasts.
 *
 * Owned by Task W4. Isolated from styles/{style,ladder,player,clips,podium}.css
 * per layout concurrency safety rules.
 */

/* ----------------------------------------------------------- Row Button States */

.replay-btn.replay-btn--ready {
  position: relative;
  box-sizing: border-box;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #d4a753 0%, #b88a32 100%);
  color: #0a0d14;
  border-color: #ecc678;
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  padding: 7px 8px;
  gap: 5px;
}

.replay-btn.replay-btn--ready:hover {
  background: linear-gradient(180deg, #e5b869 0%, #c89b3c 100%);
  border-color: #f7dca3;
  color: #000;
  box-shadow: 0 0 10px rgba(212, 167, 83, 0.45);
}

.replay-btn.replay-btn--ready svg {
  fill: currentColor;
}

.replay-btn.replay-btn--preparing {
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: #8fa0b5;
}

.replay-btn.replay-btn--preparing:hover {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.35);
  color: #abb9cb;
}

.replay-btn.replay-btn--preparing .replay-spinner-icon {
  animation: replay-btn-spin 1.2s linear infinite;
}

@keyframes replay-btn-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------- "New" Row Badge */

.replay-badge-new {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
  background: #0a0d14;
  border: 1px solid #f3cf7a;
  box-shadow: 0 0 0 1px rgba(10, 13, 20, 0.55);
}

/* -------------------------------------------------------------- Nav Link Dot */

a[href="ladder.html"].has-ready-replay,
a[href="/ladder.html"].has-ready-replay,
a[href="/"].has-ready-replay {
  position: relative;
}

.nav-ready-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5b869;
  box-shadow: 0 0 6px rgba(229, 184, 105, 0.85);
  margin-left: 6px;
  vertical-align: middle;
  animation: replay-dot-pulse 2s ease-in-out infinite;
}

@keyframes replay-dot-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(0.85);
  }
}

/* ------------------------------------------------------------ In-Page Toast */

.replay-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.replay-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #10141d;
  border: 1px solid rgba(229, 184, 105, 0.4);
  border-radius: 9px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(229, 184, 105, 0.12);
  color: #e6ebf2;
  min-width: 300px;
  max-width: 420px;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  animation: replay-toast-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.replay-toast.replay-toast--leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

@keyframes replay-toast-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.replay-toast__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(229, 184, 105, 0.15);
  color: #e5b869;
  display: flex;
  align-items: center;
  justify-content: center;
}

.replay-toast__icon svg {
  width: 13px;
  height: 13px;
}

.replay-toast__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.replay-toast__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.replay-toast__label {
  font-size: 0.74rem;
  color: #98a3b7;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.replay-toast__watch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  background: #e5b869;
  color: #0b0e14;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
}

.replay-toast__watch:hover {
  background: #f0c674;
  transform: translateY(-1px);
}

.replay-toast__watch:active {
  transform: translateY(0);
}

.replay-toast__watch:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.replay-toast__close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #6d788d;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.replay-toast__close svg {
  width: 14px;
  height: 14px;
}

.replay-toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.replay-toast__close:focus-visible {
  outline: 2px solid #e5b869;
  outline-offset: 1px;
}

/* ---------------------------------------------------- Responsive Adjustments */

@media (max-width: 480px) {
  .replay-toast-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }

  .replay-toast {
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    gap: 9px;
  }

  .replay-toast__label {
    max-width: 160px;
  }
}