/* =========================================================
   Tournament Site — Home Page Stylesheet
   Loaded AFTER styles.css so it inherits the same color/type
   tokens (--crimson, --cyan, --font-display, etc). This file
   only adds tokens and rules specific to the home page.
   ========================================================= */

:root {
  --success: #3DDC84;
  --gold: #E8B84B;
  --silver: #B9C0CC;
  --bronze: #C67F4E;
  --live-glow: rgba(232, 40, 63, 0.5);
  --nav-height-mobile: 68px;
}

body.home-body {
  padding-bottom: 0;
  /* Column layout so the footer sits at the bottom of the window on short
     pages (Live, Result) instead of leaving an empty band underneath it. */
  display: flex;
  flex-direction: column;
}

body.home-body > main {
  flex: 1 0 auto;
  width: 100%;
}

body.home-body > .site-header,
body.home-body > .ban-banner,
body.home-body > .site-footer {
  flex-shrink: 0;
}

/* ---------- Sticky top header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.site-header .brand-mark__name {
  font-size: 17px;
}

.site-header .brand-mark__tagline {
  font-size: 9px;
  letter-spacing: 0.14em;
}

.site-header__nav {
  display: flex;
  gap: 8px;
}

.nav-pill {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-pill:hover {
  color: var(--text-primary);
  border-color: var(--cyan);
}

.nav-pill--active {
  color: var(--bg-void);
  background: var(--cyan);
  border-color: var(--cyan);
}

.nav-pill--live {
  color: var(--crimson);
  border-color: var(--crimson-dim);
}

.nav-pill--live:hover {
  color: var(--bg-void);
  background: var(--crimson);
  border-color: var(--crimson);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.icon-btn:hover {
  border-color: var(--cyan);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.icon-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  background: var(--crimson);
  border-radius: 50%;
  border: 2px solid var(--panel);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--bg-void);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

/* ---------- Shared section shell ---------- */

.home-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section__head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

.section__head p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ---------- Featured Matchups: horizontal R→L slide ---------- */

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-viewport {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.carousel-viewport.is-dragging {
  cursor: grabbing;
  touch-action: none;
}

.carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

/* Motion is JS-driven — disable CSS keyframes that fought touch */
.carousel-track.is-autoplay {
  animation: none;
}

.carousel-viewport:hover .carousel-track.is-autoplay,
.carousel-viewport.is-dragging .carousel-track.is-autoplay,
.carousel-track.is-paused {
  animation: none;
}

@keyframes carousel-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(var(--carousel-shift, -50%)); }
}

/* Featured cards — width set by JS to auto-fit viewport (PC & mobile) */
.carousel-track > .match-card {
  flex: 0 0 auto;
  width: min(280px, 72vw);
  max-width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  overflow: hidden;
  user-select: none;
}

.match-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  overflow: hidden;
}
.match-card--link {
  cursor: pointer;
}
.match-card--link:focus-visible {
  outline: 2px solid rgba(63, 224, 208, 0.7);
  outline-offset: 2px;
}

.match-card__art {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, #1B1030 0%, #2A0F1E 60%, #12151C 100%);
  overflow: hidden;
}

.carousel-track > .match-card .match-card__art {
  height: 110px;
}

.match-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(63, 224, 208, 0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(232, 40, 63, 0.28), transparent 55%);
}

.match-card__tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--crimson);
  color: var(--bg-void);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-clip);
  z-index: 1;
}

.match-card__body {
  padding: 14px 16px 16px;
}

.carousel-track > .match-card .match-card__body {
  padding: 10px 12px 12px;
}

.match-card__body h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.carousel-track > .match-card .match-card__body h3 {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-card__body span {
  font-size: 12px;
  color: var(--text-muted);
}

.carousel-track > .match-card .match-card__body span {
  font-size: 11px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Match registration ---------- */
/* Reuses the .match-card component from Featured Matchups so both
   sections share the same design. This block only adds the link
   behavior (cursor, no underline, hover/focus state) on top of it. */

.registration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.registration-section {
  scroll-margin-top: 90px; /* keeps the heading clear of the sticky header when "Register now" jumps here */
}

a.registration-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

a.registration-card:hover,
a.registration-card:focus-visible {
  border-color: var(--cyan);
}

/* Mode type + joined count line on each registration card */
.registration-slots {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.match-card__body .registration-slots__type {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-clip);
  padding: 2px 8px;
}

.match-card__body .registration-slots__badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--crimson);
  border: 1px solid var(--crimson-dim);
  border-radius: var(--radius-clip);
  padding: 2px 8px;
}

.match-card__body .registration-slots__closes {
  font-size: 11px;
  color: var(--gold);
}

.match-card__body .registration-slots__closes--closed {
  color: var(--crimson);
}

/* ---------- Matches overview grid ---------- */

.matches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  padding: 18px 18px 8px;
}

.panel h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.match-row:first-of-type {
  border-top: none;
}

.match-row__teams {
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-chip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  font-size: 10px;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.match-row__time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.result-tag {
  font-size: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-clip);
  white-space: nowrap;
}

.result-tag--win {
  color: var(--success);
  border: 1px solid var(--success);
}

.result-tag--loss {
  color: var(--crimson);
  border: 1px solid var(--crimson-dim);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 4px var(--live-glow);
  flex: none;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.standings-table th {
  text-align: left;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  padding-bottom: 10px;
}

.standings-table td {
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.standings-table td:last-child,
.standings-table th:last-child {
  text-align: right;
}

.rank-badge {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bg-void);
  margin-right: 8px;
}

.rank-badge--1 { background: var(--gold); }
.rank-badge--2 { background: var(--silver); }
.rank-badge--3 { background: var(--bronze); }

/* ---------- Marquee banner ---------- */

.marquee-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  padding: 10px 10px 10px 0;
  overflow: hidden;
}

.marquee-viewport {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 22s linear infinite;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.marquee-track span {
  color: var(--text-muted);
  margin-right: 60px;
  text-shadow: 0 0 6px rgba(63, 224, 208, 0.25), 0 0 14px rgba(63, 224, 208, 0.12);
  animation: marquee-glow 3s ease-in-out infinite;
}

.marquee-track span strong {
  color: var(--text-primary);
  text-shadow: 0 0 6px rgba(232, 40, 63, 0.4), 0 0 16px rgba(232, 40, 63, 0.22);
}

@keyframes marquee-glow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(63, 224, 208, 0.25), 0 0 14px rgba(63, 224, 208, 0.12);
  }
  50% {
    text-shadow: 0 0 10px rgba(63, 224, 208, 0.55), 0 0 22px rgba(63, 224, 208, 0.3);
  }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.marquee-cta {
  flex: none;
  width: auto;
  padding: 12px 24px;
  white-space: nowrap;
}

/* ---------- Empty states for admin-managed content ---------- */

.home-empty-note {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px 0;
  margin: 0;
}

/* ---------- Site footer (Help & Support) ----------
   Filled in by help-content-sync.js from the contacts the admin adds
   under Help & Support. Appears at the bottom of every page that has
   the site header. */

.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 32px 28px 20px;
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.site-footer__brand {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__brand .brand-mark__name {
  font-size: 17px;
}

.site-footer__brand p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.site-footer__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-clip);
  font-size: 13px;
  transition: border-color 0.15s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  border-color: var(--cyan);
}

.site-footer__link svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--cyan);
  fill: none;
}

.site-footer__link-value {
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.site-footer__legal {
  max-width: 1180px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Announcement Popup (popup-content-sync.js) ----------
   Same modal pattern as .tutorial-modal / .ban-modal, but with a
   glowing yellow/gold accent (reuses --gold, defined above) so an
   admin announcement reads distinctly from the cyan "info" tutorial
   popup and the crimson "warning" ban popup. */

.popup-message-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(5, 6, 9, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.popup-message-modal {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: var(--radius-clip);
  padding: 28px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 0 10px rgba(232, 184, 75, 0.35), 0 0 26px rgba(232, 184, 75, 0.18);
  animation: popup-message-glow 2.2s ease-in-out infinite;
}

@keyframes popup-message-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(232, 184, 75, 0.35), 0 0 26px rgba(232, 184, 75, 0.18);
  }
  50% {
    box-shadow: 0 0 20px rgba(232, 184, 75, 0.7), 0 0 42px rgba(232, 184, 75, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-message-modal {
    animation: none;
  }
}

.popup-message-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(232, 184, 75, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-message-modal__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold);
  fill: none;
}

.popup-message-modal__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-line;
}

.popup-message-modal__close {
  width: 100%;
}

@media (max-width: 480px) {
  .popup-message-modal {
    padding: 24px 20px;
  }
}

/* ---------- Bottom tab bar (mobile primary nav) ---------- */

.bottom-nav {
  display: none;
}

/* ---------- Rendering Optimization (Faster First Paint) ---------- */
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 180px;
}

.standings-table {
  content-visibility: auto;
  contain-intrinsic-size: 0 220px;
}

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

@media (max-width: 860px) {
  .site-header__nav {
    display: none;
  }

  .site-header {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .home-main {
    padding: 24px 16px calc(var(--nav-height-mobile) + 32px);
  }

  /* Each page's <main> already reserves room for the fixed bottom nav,
     so pull the footer up into that space and give the footer its own
     bottom padding to clear the nav instead of doubling the gap. */
  .site-footer {
    margin-top: calc(-1 * var(--nav-height-mobile));
    padding: 28px 16px calc(var(--nav-height-mobile) + 20px);
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__links {
    flex-direction: column;
  }

  .site-footer__link {
    width: 100%;
  }

  /* Featured Matchups — swipeable, hide PC arrows; size set by JS */
  .carousel-controls {
    display: none;
  }

  .carousel-track > .match-card {
    width: min(200px, 70vw);
  }

  .carousel-track > .match-card .match-card__art {
    height: 84px;
  }

  .carousel-track > .match-card .match-card__body {
    padding: 8px 10px 10px;
  }

  .carousel-track > .match-card .match-card__body h3 {
    font-size: 12px;
  }

  .carousel-track > .match-card .match-card__body span {
    font-size: 10.5px;
  }

  .carousel-track.is-autoplay {
    animation-duration: 22s;
  }

  .matches-grid {
    grid-template-columns: 1fr;
  }

  .registration-grid {
    grid-template-columns: 1fr;
  }

  /* Fixed bottom tab bar replaces the header nav on mobile */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: var(--nav-height-mobile);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--border);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-body);
    color: var(--text-muted);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .bottom-nav__item:active {
    transform: scale(0.92);
  }

  .bottom-nav__item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.22s ease;
  }

  .bottom-nav__item--active {
    color: var(--cyan);
  }

  .bottom-nav__item--active svg {
    transform: scale(1.12);
  }

  .bottom-nav__item--live {
    color: var(--crimson);
  }
}

@media (max-width: 480px) {
  .home-main {
    gap: 32px;
  }

  .section__head h2 {
    font-size: 17px;
  }
}

/* =========================================================
   Fail-safe Celestial Particle Layer & 3D Red S / Blue X Glyphs
   Guarantees absolute overlay & hidden initial state on all devices
   ========================================================= */
.bar-celestial-particles,
.profile-header__particles {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  border-radius: inherit;
  contain: paint;
}

.ph-glyph {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-family: var(--font-display, "Chakra Petch", sans-serif);
  font-weight: 800;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1 !important;
}

.ph-glyph__inner {
  display: inline-block;
  will-change: transform;
}