/* ============================================================
   ECHO FIGHT HUB — CSS (PORTRAITS + SPOTLIGHTS VERSION)
   ============================================================ */

/* -------------------------------------------- */
/*                 THEME COLORS                 */
/* -------------------------------------------- */
:root {
  --bg1: #05030c;
  --bg2: #0a0616;

  --mag: #ff2da8;
  --cyan: #2de3ff;

  --amber: #ffb347;
  --amber-dark: #ff7a00;

  --violet: #b580ff;
  --teal: #2de3ff;

  --danger: #ff335f;
  --muted: #cfc8e6;

  --glass: rgba(255,255,255,0.02);
  --card-back: rgba(8,6,12,0.65);

  --accent-glow: 0 12px 40px rgba(45,227,255,0.04);
}

/* -------------------------------------------- */
/*                 GLOBAL BASE                  */
/* -------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
  color: var(--muted);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
}

/* -------------------------------------------- */
/*      BACKGROUND PARALLAX (PLASMA + NOISE)    */
/* -------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    url("assets/gradient-bg.png"),
    url("assets/ui-plasma.png"),
    linear-gradient(180deg, rgba(10,0,20,0.18), rgba(0,0,0,0.7));
  background-size: cover, 700px 700px, cover;
  background-position: center, 15% 25%, center;
  opacity: 0.9;
  filter: blur(18px) saturate(120%);
  animation: parallaxShift 22s linear infinite;
}

@keyframes parallaxShift {
  0%   { background-position: center, 15% 25%, center; }
  50%  { background-position: 10% 40%, 30% 20%, center; }
  100% { background-position: center, 15% 25%, center; }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    url("assets/noise.png"),
    url("assets/scanline.png");
  background-repeat: repeat, repeat;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* -------------------------------------------- */
/*         HERO SECTION BACKGROUND FIX          */
/* -------------------------------------------- */

.hero-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  background: radial-gradient(
    circle at 40% 30%,
    rgba(145, 30, 255, 0.22),
    rgba(0,0,0,0)
  );
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
}

.hero, .sidebar, .feature-card {
  position: relative;
  z-index: 5;
}

/* -------------------------------------------- */
/*                 LAYOUT WRAPPER               */
/* -------------------------------------------- */
.wrap {
  position: relative;
  z-index: 3;
  max-width: 1250px;
  margin: 20px auto;
  padding: 14px;
}

/* -------------------------------------------- */
/*                 SITE HEADER                  */
/* -------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  margin-bottom: 16px;
}

.logo {
  font-weight: 800;
  font-size: 18px;
}

.logo .accent {
  color: var(--mag);
}

.nav a {
  margin-left: 12px;
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  opacity: 0.85;
}

.viewer-counter {
  font-size: 13px;
  opacity: 0.85;
}

/* -------------------------------------------- */
/*                 HERO SECTION                 */
/* -------------------------------------------- */
.hero {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.hero-left {
  flex: 1.4;
  position: relative;
}

.feature-card {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.04);
}

/* FEATURE HEADER — LIVE PILL + SOUND BAR */
.feature-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  position: relative;
}

.live-pill {
  position: relative;
  background: rgba(255,51,95,0.25);
  color: #ffccd9;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(255,51,95,0.4);
  animation: pulseLive 1.6s ease-in-out infinite;
}

/* sound/equalizer bar behind live pill */
.live-pill::before {
  content: "";
  position: absolute;
  left: -40px;
  right: -10px;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,51,95,0.05) 0,
    rgba(255,51,95,0.8) 12px,
    rgba(255,51,95,0.05) 24px
  );
  opacity: 0.45;
  filter: blur(2px);
  z-index: -1;
  animation: eqSweep 1.4s linear infinite;
}

@keyframes pulseLive {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,51,95,0.3);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255,51,95,0.8);
  }
}

@keyframes eqSweep {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* FIGHTER ROW + PORTRAIT FRAMES */
.fighters-row {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
}

.fighter-block {
  text-align: center;
}

/* portrait frame with animated rank glow */
.portrait-frame {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  margin: 0 auto 6px auto;
  background-image: var(--portrait);
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.9);
  overflow: hidden;
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.2),
    rgba(45,227,255,0.9),
    rgba(255,45,168,0.9),
    rgba(255,255,255,0.2)
  );
  mix-blend-mode: screen;
  animation: frameSpin 9s linear infinite;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,0.4), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.8), #000);
  mix-blend-mode: soft-light;
}

@keyframes frameSpin {
  to { transform: rotate(360deg); }
}

/* rank-specific vibes */
.portrait-frame.rank-splus::before {
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.2),
    rgba(45,227,255,0.9),
    rgba(181,128,255,0.9),
    rgba(255,45,168,0.9),
    rgba(255,255,255,0.2)
  );
}

.portrait-frame.rank-bplus::before {
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.1),
    rgba(255,179,71,0.9),
    rgba(255,122,0,0.9),
    rgba(255,255,255,0.1)
  );
}

.fighter-tag {
  font-size: 10px;
  opacity: 0.7;
}

.fighter-name {
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 2px;
  color: #fff;
}

.fighter-meta {
  font-size: 11px;
  opacity: 0.8;
}

.vs-label span {
  font-weight: 900;
  font-size: 16px;
  opacity: 0.85;
}

.feature-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.timer-box {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.timer-value {
  font-weight: 800;
  font-size: 16px;
  color: var(--cyan);
}

.flag.chip {
  background: rgba(255,255,255,0.06);
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 10px;
}

.flag.chip.danger {
  background: rgba(255,51,95,0.18);
  color: #ff335f;
}

/* animated echo tier badges */
.echo-tier {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.echo-tier::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0),
    rgba(255,255,255,0.3),
    rgba(255,255,255,0.0)
  );
  transform: translateX(-70%) rotate(15deg);
  animation: tierSweep 3.2s ease-in-out infinite;
  z-index: -1;
}

.echo-tier-high {
  background: radial-gradient(circle at 0 0, rgba(255,51,95,0.6), rgba(0,0,0,0.9));
  color: #ffe5f1;
}

.echo-tier-red {
  background: rgba(255,51,95,0.25);
  color: #ffc1d0;
}

.echo-tier-amber {
  background: rgba(255,179,71,0.25);
  color: #ffe4b8;
}

.echo-tier-violet {
  background: rgba(181,128,255,0.25);
  color: #f0e3ff;
}

@keyframes tierSweep {
  0%   { transform: translateX(-80%) rotate(15deg); }
  50%  { transform: translateX(10%) rotate(15deg); }
  100% { transform: translateX(80%) rotate(15deg); }
}

/* -------------------------------------------- */
/*                 SIDEBAR                      */
/* -------------------------------------------- */
.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.panel h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.status-line {
  display: flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.85;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-right: 6px;
}

.status-dot.live {
  background: #2de3ff;
  box-shadow: 0 0 8px #2de3ff;
}

.status-dot.warn {
  background: #ffb347;
  box-shadow: 0 0 8px #ffb347;
}

/* CHAT PANEL — glowing border */
.chat-panel {
  border: 1px solid rgba(45,227,255,0.3);
  box-shadow:
    0 0 16px rgba(45,227,255,0.25),
    0 8px 26px rgba(0,0,0,0.8);
  position: relative;
}

.chat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.04);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* -------------------------------------------- */
/*                 CHAT FEED                    */
/* -------------------------------------------- */
.chat-feed {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.chat-line {
  font-size: 12px;
  margin: 3px 0;
}

.chat-line.corrupted {
  color: #ff335f;
  font-weight: 700;
  text-shadow: 0 0 6px #ff335f;
}

/* -------------------------------------------- */
/*              UPCOMING MATCH CARDS            */
/* -------------------------------------------- */
.upcoming {
  margin-top: 10px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.section-header h2 {
  margin: 0;
  font-size: 16px;
}

.section-header .hint {
  font-size: 11px;
  opacity: 0.7;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* Match card = banner + micro-motion tile */
.match-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #05030c;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  z-index: 2;
}

/* Banner layer */
.match-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    var(--banner),
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent),
    radial-gradient(circle at bottom right, rgba(0,0,0,0.7), transparent);
  background-size: cover, 80% 80%, 100% 100%;
  background-position: center;
  filter: saturate(125%) contrast(110%);
  opacity: 0.45;
  transform: scale(1.08);
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

/* Dark overlay for readability */
.match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.86),
    rgba(0,0,0,0.78),
    rgba(0,0,0,0.92)
  );
  z-index: 1;
  pointer-events: none;
}

/* Spotlight beams (high drama) */
.spotlight-layer {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(
      120deg,
      rgba(45,227,255,0.0) 0%,
      rgba(45,227,255,0.7) 45%,
      rgba(45,227,255,0.0) 80%
    ),
    linear-gradient(
      240deg,
      rgba(255,45,168,0.0) 0%,
      rgba(255,45,168,0.65) 40%,
      rgba(255,45,168,0.0) 80%
    );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Tier sidebar */
.tier-bar {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  z-index: 3;
}

/* Red tier */
.match-card.tier-red .tier-bar {
  background: linear-gradient(180deg, #ff335f, #ff1440);
  box-shadow: 0 0 18px rgba(255,51,95,0.9);
}

/* Amber tier */
.match-card.tier-amber .tier-bar {
  background: linear-gradient(180deg, #ffb347, #ff7a00);
  box-shadow: 0 0 18px rgba(255,179,71,0.9);
}

/* Violet tier */
.match-card.tier-violet .tier-bar {
  background: linear-gradient(180deg, #b580ff, #2de3ff);
  box-shadow: 0 0 18px rgba(181,128,255,0.9);
}

/* Inner content */
.match-inner {
  position: relative;
  z-index: 4;
  padding: 10px 10px 10px 14px;
}

/* Hover motion + spotlight animation */
.match-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.85);
  border-color: rgba(255,255,255,0.2);
}

.match-card:hover::before {
  opacity: 0.8;
  transform: scale(1.02);
}

.match-card:hover .spotlight-layer {
  opacity: 0.8;
  animation: beamSweep 1.4s ease-in-out forwards;
}

@keyframes beamSweep {
  0%   { transform: translateX(-12%) translateY(4%); }
  50%  { transform: translateX(8%) translateY(-4%); }
  100% { transform: translateX(14%) translateY(6%); }
}

.match-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
}

.slot-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(45,227,255,0.2);
  font-size: 10px;
}

.match-label {
  opacity: 0.85;
  font-size: 10px;
}

.match-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 6px 0;
}

.match-fighter {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.tiny-vs {
  font-size: 10px;
  opacity: 0.75;
}

.match-footer {
  font-size: 10px;
}

.flag.chip {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 5px;
  font-size: 9px;
}

/* -------------------------------------------- */
/*                 ARCHIVE                      */
/* -------------------------------------------- */
.archive {
  margin-top: 24px;
}

.archive-grid {
  display: grid;
  gap: 8px;
}

.archive-item {
  background: rgba(255,255,255,0.04);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}

/* -------------------------------------------- */
/*                 MODAL                        */
/* -------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal.hidden {
  display: none;
}

.modal-card {
  background: linear-gradient(180deg, rgba(5,4,8,0.96), rgba(8,6,12,0.98));
  padding: 20px;
  border-radius: 12px;
  max-width: 480px;
  width: 90%;
}

.close {
  position: absolute;
  right: 14px;
  top: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.modal-tags {
  opacity: 0.8;
  font-size: 11px;
  margin-bottom: 8px;
}