/*
Theme Name: Team Raze
Theme URI: https://team-raze.de
Author: Clumsytec
Author URI: https://team-raze.de
Description: Individuelles Esports-Theme für den CS2-Clan Team Raze. Enthält Roster- und Match-Verwaltung.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: team-raze
*/

:root{
  --void:#0a0908;
  --panel:#141210;
  --panel-2:#1c1916;
  --marble:#e9e6df;
  --steel:#948e83;
  --blood:#c31f2e;
  --blood-deep:#4a0d12;
  --blood-bright:#e8394a;
  --line: rgba(233,230,223,0.08);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--marble);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
}

::selection{ background:var(--blood); color:var(--marble); }

img{ max-width:100%; display:block; }

a{ color:inherit; }

.display{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

.mono{
  font-family:'IBM Plex Mono', monospace;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--blood-bright);
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--blood);
  display:inline-block;
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--blood-bright);
  outline-offset:3px;
}

/* ---------- NAV ---------- */
header.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem clamp(1.5rem, 5vw, 4rem);
  background:linear-gradient(to bottom, rgba(10,9,8,0.9), transparent);
  backdrop-filter:blur(2px);
  transition:background 0.3s ease, padding 0.3s ease;
}
header.site-header.solid{
  background:rgba(10,9,8,0.92);
  border-bottom:1px solid var(--line);
  padding-top:0.85rem;
  padding-bottom:0.85rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
  font-family:'Anton', sans-serif;
  letter-spacing:0.06em;
  font-size:1.05rem;
  text-decoration:none;
}
.brand img{ height:34px; width:auto; }

/* Vollbild-Overlay-Menü */
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px; height:44px;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  z-index:210;
  position:relative;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:border-color 0.2s ease;
}
.nav-toggle:hover{ border-color:var(--blood); }
.nav-toggle span{
  width:20px; height:2px;
  background:var(--marble);
  margin:0 auto;
  transition:transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.nav-overlay{
  position:fixed;
  inset:0;
  z-index:190;
  background:var(--void);
  clip-path: circle(0px at calc(100% - 42px) 42px);
  transition:clip-path 0.55s cubic-bezier(.6,0,.2,1);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.nav-overlay.open{
  clip-path: circle(150% at calc(100% - 42px) 42px);
  pointer-events:auto;
}
.nav-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(233,230,223,0.02) 0px, rgba(233,230,223,0.02) 1px, transparent 1px, transparent 90px);
  pointer-events:none;
}
.nav-overlay-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3.2rem;
  text-align:left;
  width:min(90vw, 480px);
}
ul.overlay-menu{
  list-style:none;
  display:flex;
  flex-direction:column;
  width:100%;
}
ul.overlay-menu li{
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
ul.overlay-menu li:first-child{ border-top:1px solid var(--line); }
ul.overlay-menu a{
  font-family:'Anton', sans-serif;
  font-size:clamp(1.5rem, 4vw, 2.1rem);
  text-transform:uppercase;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.05rem 0.2rem;
  transition:color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
}
ul.overlay-menu a .idx{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--blood);
  letter-spacing:0.05em;
  flex:0 0 28px;
}
ul.overlay-menu a:hover,
ul.overlay-menu a.active{
  color:var(--marble);
  padding-left:0.8rem;
  background:linear-gradient(90deg, rgba(195,31,46,0.08), transparent);
}
ul.overlay-menu a.active .idx{ color:var(--blood-bright); }

.overlay-social{
  display:flex;
  gap:1.8rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding-left:0.2rem;
}
.overlay-social a{
  text-decoration:none;
  color:var(--steel);
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.overlay-social a:hover{ color:var(--blood-bright); border-color:var(--blood-bright); }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:8rem 1.5rem 6rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(195,31,46,0.16), transparent 70%),
    linear-gradient(180deg, var(--void), #0d0b0a);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(233,230,223,0.02) 0px, rgba(233,230,223,0.02) 1px, transparent 1px, transparent 90px);
  pointer-events:none;
}

.hero-logo{
  width:min(300px, 55vw);
  height:auto;
  filter:drop-shadow(0 0 40px rgba(195,31,46,0.35));
  margin:0 auto 2.2rem;
  animation: blade-reveal 1.3s cubic-bezier(.25,.9,.25,1) both;
}

@keyframes blade-reveal{
  0%{
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform:scale(0.94) rotate(-2deg);
    opacity:0.4;
  }
  60%{
    opacity:1;
  }
  100%{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform:scale(1) rotate(0deg);
    opacity:1;
  }
}

.hero h1{
  font-size:clamp(2.6rem, 8vw, 5.5rem);
  line-height:0.95;
  color:var(--marble);
  animation: rise 1.1s cubic-bezier(.2,.9,.2,1) both;
  animation-delay:0.1s;
}
.hero h1 span{ color:var(--blood); }

.hero p{
  max-width:36ch;
  margin:1.4rem auto 2.4rem;
  color:var(--steel);
  font-size:1.05rem;
  line-height:1.6;
  animation: rise 1.1s cubic-bezier(.2,.9,.2,1) both;
  animation-delay:0.2s;
}

.cta-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  animation: rise 1.1s cubic-bezier(.2,.9,.2,1) both;
  animation-delay:0.3s;
}

.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.95rem 2rem;
  border:1px solid var(--line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  display:inline-block;
  cursor:pointer;
  background:none;
}
.btn-primary{
  background:var(--blood);
  border-color:var(--blood);
  color:var(--void);
  font-weight:600;
}
.btn-primary:hover{ background:var(--blood-bright); transform:translateY(-2px); }
.btn-ghost{ color:var(--marble); }
.btn-ghost:hover{ border-color:var(--marble); transform:translateY(-2px); }

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  bottom:2.2rem;
  left:50%;
  transform:translateX(-50%);
  color:var(--steel);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
}
.scroll-cue .bar{
  width:1px; height:34px;
  background:linear-gradient(var(--blood), transparent);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

/* ---------- BLADE DIVIDER (signature element) ---------- */
.blade{
  height:64px;
  width:100%;
  background:var(--panel);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.blade.flip{
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* ---------- SECTION SHELL ---------- */
section{
  position:relative;
  padding:6.5rem clamp(1.5rem, 6vw, 6rem);
}
.section-head{
  max-width:640px;
  margin-bottom:3.5rem;
}
.section-head h2{
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  margin-top:0.9rem;
  color:var(--marble);
}
.section-head p{
  margin-top:1rem;
  color:var(--steel);
  line-height:1.7;
  font-size:1rem;
}

/* ---------- ABOUT ---------- */
.about{ background:var(--panel); }
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:3rem;
  align-items:start;
}
.about-text p{
  color:var(--steel);
  line-height:1.8;
  max-width:52ch;
}
.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.stat{
  background:var(--panel);
  padding:1.8rem 1.6rem;
}
.stat .num{
  font-family:'Anton', sans-serif;
  font-size:2.4rem;
  color:var(--blood-bright);
  line-height:1;
}
.stat .label{
  margin-top:0.5rem;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--steel);
}

/* ---------- ROSTER ---------- */
.roster{ background:var(--void); }
.roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.4rem;
}
.player-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem;
  position:relative;
  overflow:hidden;
  transition:border-color 0.25s ease, transform 0.25s ease;
  text-decoration:none;
  display:block;
}
.player-card:hover{ border-color:var(--blood); transform:translateY(-4px); }
.player-card .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  color:var(--blood-bright);
  letter-spacing:0.15em;
}
.player-card .avatar{
  width:100%;
  aspect-ratio:1/1;
  background:linear-gradient(160deg, var(--panel-2), var(--void));
  margin:0.9rem 0 1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--steel);
  font-family:'Anton', sans-serif;
  font-size:2.6rem;
  border:1px solid var(--line);
  overflow:hidden;
}
.player-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.player-card h3{
  font-family:'Anton', sans-serif;
  letter-spacing:0.03em;
  font-size:1.3rem;
  color:var(--marble);
}
.player-card .role{
  margin-top:0.3rem;
  color:var(--steel);
  font-size:0.85rem;
}
.player-stats{
  display:flex;
  gap:1.2rem;
  margin-top:0.9rem;
  padding-top:0.9rem;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--steel);
}
.player-stats strong{ color:var(--blood-bright); font-size:0.85rem; }
.empty-state{
  color:var(--steel);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.9rem;
}

/* ---------- MATCHES ---------- */
.matches{ background:var(--panel); }
.matches-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:3rem;
  align-items:start;
}
.match-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.match-row{
  display:grid;
  grid-template-columns: 90px 1fr auto;
  align-items:center;
  gap:1.5rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--line);
}
.match-row .date{
  font-family:'IBM Plex Mono', monospace;
  color:var(--steel);
  font-size:0.85rem;
}
.match-row .teams{
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:'Anton', sans-serif;
  font-size:1.15rem;
  letter-spacing:0.02em;
}
.match-row .teams .vs{
  color:var(--blood);
  font-size:0.8rem;
  font-family:'IBM Plex Mono', monospace;
}
.match-row .status{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.4rem 0.9rem;
  border:1px solid var(--line);
  color:var(--steel);
  white-space:nowrap;
}
.match-row .status.live{
  color:var(--void);
  background:var(--blood);
  border-color:var(--blood);
}
.match-row .status.result{
  color:var(--marble);
  border-color:var(--steel);
}

/* Sidebar: Letzte Ergebnisse */
.results-sidebar{
  background:var(--panel-2);
  border:1px solid var(--line);
  padding:1.6rem;
  position:sticky;
  top:6.5rem;
}
.results-sidebar h3{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--blood-bright);
  margin-bottom:1.2rem;
}
.result-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.75rem 0;
  border-bottom:1px solid var(--line);
  font-size:0.88rem;
}
.result-item:last-child{ border-bottom:none; }
.result-item .opp{ font-family:'Anton', sans-serif; letter-spacing:0.02em; }
.result-item .score{
  font-family:'IBM Plex Mono', monospace;
  color:var(--steel);
}
.result-item .score.win{ color:var(--blood-bright); }

/* ---------- NEWS ---------- */
.news{ background:var(--void); }
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.4rem;
}
.news-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem;
  text-decoration:none;
  display:block;
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.news-card:hover{ border-color:var(--blood); transform:translateY(-4px); }
.news-card .date{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--blood-bright);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.news-card h3{
  margin-top:0.7rem;
  font-family:'Anton', sans-serif;
  font-size:1.25rem;
  color:var(--marble);
  letter-spacing:0.02em;
}
.news-card p{
  margin-top:0.6rem;
  color:var(--steel);
  font-size:0.9rem;
  line-height:1.6;
}

/* ---------- ACHIEVEMENTS / ERFOLGE ---------- */
.achievements{ background:var(--void); }
.timeline{
  display:flex;
  flex-direction:column;
  border-left:2px solid var(--line);
  margin-left:0.6rem;
}
.timeline-item{
  position:relative;
  padding:0 0 2.2rem 2.2rem;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-7px; top:4px;
  width:12px; height:12px;
  background:var(--blood);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.timeline-item .year{
  font-family:'IBM Plex Mono', monospace;
  color:var(--blood-bright);
  font-size:0.8rem;
  letter-spacing:0.1em;
}
.timeline-item h3{
  font-family:'Anton', sans-serif;
  font-size:1.3rem;
  margin-top:0.3rem;
  color:var(--marble);
}
.timeline-item .result{
  color:var(--steel);
  font-size:0.9rem;
  margin-top:0.2rem;
}

/* ---------- PARTNER ---------- */
.partners{ background:var(--panel); }
.partner-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2.5rem;
}
.partner-logo{
  height:52px;
  display:flex;
  align-items:center;
  opacity:0.7;
  filter:grayscale(1);
  transition:opacity 0.2s ease, filter 0.2s ease;
  text-decoration:none;
}
.partner-logo:hover{ opacity:1; filter:grayscale(0); }
.partner-logo img{ height:100%; width:auto; }

/* ---------- TWITCH ---------- */
.twitch{ background:var(--void); }
.twitch-frame{
  position:relative;
  border:1px solid var(--line);
  aspect-ratio:16/9;
  max-width:900px;
  background:var(--panel-2);
}
.twitch-frame iframe{ width:100%; height:100%; border:0; }
.twitch-offline{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--steel);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  text-align:center;
  padding:1.5rem;
}

/* ---------- GAMESERVER ---------- */
.server{
  background:var(--panel);
}
.server-box{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2rem;
  background:var(--panel-2);
  border:1px solid var(--line);
  padding:2.2rem;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.server-info .status-dot{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--steel);
}
.server-info .status-dot::before{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  background:var(--steel);
}
.server-info .status-dot.online::before{ background:#3ecf6e; box-shadow:0 0 8px #3ecf6e; }
.server-info .status-dot.online{ color:#3ecf6e; }
.server-info .status-dot.offline::before{ background:var(--blood); }
.server-info .status-dot.offline{ color:var(--blood-bright); }
.server-info .status-dot.maintenance::before{ background:#e0a941; }
.server-info .status-dot.maintenance{ color:#e0a941; }
.server-info h3{
  font-family:'Anton', sans-serif;
  font-size:1.6rem;
  margin-top:0.6rem;
  color:var(--marble);
}
.server-info .ip{
  font-family:'IBM Plex Mono', monospace;
  color:var(--steel);
  margin-top:0.4rem;
  font-size:0.95rem;
}
.server-actions{
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap;
}

/* ---------- FIGHT US / JOIN (dual CTA) ---------- */
.join{
  background:
    radial-gradient(ellipse 70% 80% at 50% 20%, rgba(195,31,46,0.14), transparent 70%),
    var(--void);
}
.join-intro{ text-align:center; }
.join-intro .eyebrow{ justify-content:center; }
.join-intro h2{
  font-size:clamp(2.2rem, 6vw, 4rem);
  margin-top:1rem;
}
.join-intro p{
  max-width:44ch;
  margin:1.2rem auto 0;
  color:var(--steel);
}

.fight-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:2.5rem;
}
.fight-card{
  background:var(--panel);
  padding:2.6rem 2.2rem;
  text-align:left;
}
.fight-card .eyebrow{ margin-bottom:1rem; }
.fight-card h3{
  font-family:'Anton', sans-serif;
  font-size:1.7rem;
  color:var(--marble);
  margin-bottom:0.8rem;
}
.fight-card p{
  color:var(--steel);
  line-height:1.7;
  margin-bottom:1.5rem;
  font-size:0.95rem;
}

/* ---------- PAGE / SINGLE CONTENT (Standard-Seiten & Beiträge) ---------- */
.content-wrap{
  max-width:760px;
  margin:0 auto;
  padding:9rem clamp(1.5rem, 6vw, 6rem) 6rem;
}
.content-wrap h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(2rem, 5vw, 3rem);
  margin-bottom:1.5rem;
}
.content-wrap .entry-content{
  color:var(--steel);
  line-height:1.8;
  font-size:1.02rem;
}
.content-wrap .entry-content p{ margin-bottom:1.2rem; }
.content-wrap .entry-content a{ color:var(--blood-bright); }

/* ---------- FOOTER ---------- */
footer.site-footer{
  background:var(--panel);
  padding:3rem clamp(1.5rem, 6vw, 6rem) 2.2rem;
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:2rem;
  margin-bottom:2.5rem;
}
.footer-brand{ display:flex; align-items:center; gap:0.7rem; }
.footer-brand img{ height:30px; }
.footer-links{ display:flex; gap:3rem; flex-wrap:wrap; }
.footer-links h4{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--blood-bright);
  margin-bottom:0.9rem;
}
.footer-links ul{ list-style:none; }
.footer-links li{ margin-bottom:0.5rem; }
.footer-links a{
  text-decoration:none;
  color:var(--steel);
  font-size:0.9rem;
  transition:color 0.2s ease;
}
.footer-links a:hover{ color:var(--marble); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.8rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--steel);
}

/* ---------- MAP-POOL ---------- */
.mappool{ background:var(--void); }
.map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.map-card{
  background:var(--panel);
  padding:1.6rem;
  text-align:center;
}
.map-card h3{
  font-family:'Anton', sans-serif;
  font-size:1.15rem;
  letter-spacing:0.02em;
  color:var(--marble);
}
.map-card .map-rate{
  margin-top:0.6rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:1.3rem;
  color:var(--blood-bright);
}

/* ---------- HIGHLIGHTS ---------- */
.highlights{ background:var(--panel); }
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem;
}
.highlight-card{
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.highlight-embed{
  position:relative;
  aspect-ratio:16/9;
}
.highlight-embed iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}
.highlight-card h3{
  font-family:'Anton', sans-serif;
  font-size:1rem;
  letter-spacing:0.02em;
  color:var(--marble);
  padding:1rem 1.2rem;
}

/* ---------- FAQ ---------- */
.faq{ background:var(--void); }
.faq-list{
  display:flex;
  flex-direction:column;
  max-width:760px;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:1.3rem 0;
  font-family:'Anton', sans-serif;
  font-size:1.05rem;
  letter-spacing:0.01em;
  color:var(--marble);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:'IBM Plex Mono', monospace;
  color:var(--blood-bright);
  font-size:1.3rem;
  flex-shrink:0;
  transition:transform 0.2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-answer{
  color:var(--steel);
  line-height:1.7;
  padding-bottom:1.4rem;
  font-size:0.95rem;
}

/* ---------- STICKY CTA ---------- */
.sticky-cta{
  position:fixed;
  bottom:1.6rem;
  right:1.6rem;
  z-index:150;
  background:var(--blood);
  color:var(--void);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.9rem 1.4rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:background 0.2s ease, transform 0.2s ease;
}
.sticky-cta:hover{ background:var(--blood-bright); transform:translateY(-2px); }
.sticky-cta .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#3ecf6e;
  box-shadow:0 0 6px #3ecf6e;
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; }
  .matches-layout{ grid-template-columns:1fr; }
  .match-row{ grid-template-columns:1fr; text-align:left; gap:0.5rem; }
  .match-row .status{ justify-self:flex-start; }
  .fight-grid{ grid-template-columns:1fr; }
  .server-box{ grid-template-columns:1fr; }
  .sticky-cta{
    bottom:1rem; right:1rem;
    padding:0.75rem 1.1rem;
    font-size:0.7rem;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}