/* Capricornus Arena — original esports landing */
:root {
  --void: #05070c;
  --panel: #0b101a;
  --panel-2: #111827;
  --line: rgba(0, 255, 209, 0.18);
  --neon: #00ffd1;
  --neon-dim: rgba(0, 255, 209, 0.55);
  --acid: #c8ff3d;
  --hot: #ff4d6d;
  --fog: rgba(230, 240, 255, 0.86);
  --mute: rgba(180, 196, 220, 0.62);
  --gold: #e0c06a;
  --header-h: 4.5rem;
  --font-display: "Chakra Petch", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--fog);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 200;
  background: var(--neon); color: #04110e; padding: .5rem .75rem;
}

/* ===== BOOT LOADER (original Capricornus sequence) ===== */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #02040a;
  transition: opacity .55s ease, visibility .55s ease;
}
.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-panel {
  width: min(420px, calc(100% - 2rem));
  text-align: center;
}
.boot-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--neon);
}
.boot-sub {
  margin: 0.45rem 0 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.boot-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.boot-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon), var(--acid));
  box-shadow: 0 0 18px rgba(0, 255, 209, 0.55);
  transition: width 0.15s linear;
}
.boot-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0, 255, 209, 0.03) 2px 3px
  );
  pointer-events: none;
  animation: scan 2.2s linear infinite;
}
.boot-pct {
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--acid);
}

body.is-booting { overflow: hidden; }
body.is-booting .site { opacity: 0; }
.site {
  opacity: 1;
  transition: opacity 0.5s ease 0.1s;
  position: relative;
  z-index: 1;
}

/* Ambient */
.arena-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 255, 209, 0.12), transparent 55%),
    radial-gradient(ellipse 40% 35% at 100% 30%, rgba(200, 255, 61, 0.06), transparent 50%),
    radial-gradient(ellipse 35% 40% at 0% 80%, rgba(255, 77, 109, 0.06), transparent 50%),
    linear-gradient(180deg, #05070c 0%, #070b14 50%, #05070c 100%);
}
.arena-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 209, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 209, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 255, 209, 0.12);
}
.header-inner {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.brand img {
  width: 2.15rem;
  height: 2.15rem;
  object-fit: cover;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  box-shadow: 0 0 0 1px rgba(0, 255, 209, 0.35);
}
.nav-desktop {
  display: none;
  gap: 1.25rem;
  align-items: center;
}
.nav-desktop a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .2s ease, text-shadow .2s ease;
}
.nav-desktop a:hover {
  color: var(--neon);
  text-shadow: 0 0 12px rgba(0, 255, 209, 0.45);
}
.header-actions { display: flex; gap: .5rem; align-items: center; }
.chip-btn {
  min-height: 2.2rem;
  padding: 0 .75rem;
  border: 1px solid rgba(0, 255, 209, 0.28);
  background: rgba(0, 255, 209, 0.06);
  color: var(--neon);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 30%);
}
.chip-btn:hover { background: rgba(0, 255, 209, 0.14); }
.mobile-nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 40;
  background: rgba(5, 7, 12, 0.97);
  border-bottom: 1px solid rgba(0, 255, 209, 0.15);
  padding: .75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  padding: .75rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fog);
}
@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

/* Hero */
.hero {
  min-height: calc(100svh - var(--header-h));
  margin-top: var(--header-h);
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem 3rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-fx-grid {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 18%;
  height: 120%;
  background-image:
    linear-gradient(rgba(0, 255, 209, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 209, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, transparent 85%);
  animation: hero-grid-drift 18s linear infinite;
}
.hero-fx-aurora {
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  background:
    radial-gradient(ellipse 45% 55% at 30% 40%, rgba(0, 255, 209, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 50% at 72% 35%, rgba(200, 255, 61, 0.1), transparent 68%),
    radial-gradient(ellipse 35% 45% at 50% 70%, rgba(255, 77, 109, 0.08), transparent 70%);
  filter: blur(8px);
  animation: hero-aurora 14s ease-in-out infinite alternate;
}
.hero-fx-beams {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 40%, rgba(0, 255, 209, 0.05) 48%, transparent 56%),
    linear-gradient(255deg, transparent 42%, rgba(200, 255, 61, 0.04) 50%, transparent 58%);
  background-size: 220% 100%, 240% 100%;
  animation: hero-beams 10s ease-in-out infinite;
}
.hero-fx-orbs {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(0, 255, 209, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(200, 255, 61, 0.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 62% 68%, rgba(0, 255, 209, 0.45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 72%, rgba(255, 77, 109, 0.4) 0 1.5px, transparent 3px),
    radial-gradient(circle at 88% 58%, rgba(0, 255, 209, 0.35) 0 1px, transparent 2.5px);
  animation: hero-orbs 12s ease-in-out infinite alternate;
  opacity: 0.85;
}
.hero-fx-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 255, 209, 0.045) 45%,
    rgba(0, 255, 209, 0.09) 50%,
    rgba(0, 255, 209, 0.04) 55%,
    transparent 100%
  );
  animation: hero-scan 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(255, 77, 109, 0.45);
  color: #ffb3c0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: rise .7s both;
}
.live-pill::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px var(--hot);
  animation: blink 1s step-end infinite;
}
.hero-emblem {
  width: min(520px, 88vw);
  aspect-ratio: 16/10;
  object-fit: contain;
  clip-path: polygon(2% 0, 100% 0, 100% 92%, 98% 100%, 0 100%, 0 8%);
  box-shadow: 0 0 0 1px rgba(0, 255, 209, 0.25), 0 30px 80px -30px rgba(0, 255, 209, 0.35);
  animation: rise .85s both, floaty 6s ease-in-out 1s infinite;
}
.hero-brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.1rem, 12vw, 6.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: .92;
  color: #fff;
  text-shadow: 0 0 40px rgba(0, 255, 209, 0.25);
  animation: rise .9s .05s both;
}
.hero-brand span {
  color: var(--neon);
  text-shadow: 0 0 24px rgba(0, 255, 209, 0.55);
}
.hero-copy {
  margin: 0;
  max-width: 34rem;
  color: var(--mute);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.55;
  animation: rise .9s .12s both;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  animation: rise .9s .2s both;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .85rem;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--neon), #00c4a5);
  color: #04110e;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 0 28px rgba(0, 255, 209, 0.25);
}
.btn-ghost {
  border-color: rgba(200, 255, 61, 0.35);
  color: var(--acid);
  background: rgba(200, 255, 61, 0.05);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Match strip */
.match {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto 1rem;
  border: 1px solid rgba(0, 255, 209, 0.2);
  background: linear-gradient(90deg, rgba(0, 255, 209, 0.08), rgba(200, 255, 61, 0.05) 50%, rgba(255, 77, 109, 0.08));
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  padding: 1rem 1.1rem;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
@media (min-width: 800px) {
  .match {
    grid-template-columns: 1.2fr auto 1.2fr;
    align-items: center;
    text-align: center;
  }
}
.match-side {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.match-side strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.05rem;
}
.match-side span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.match-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.match-vs {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--acid);
  text-shadow: 0 0 16px rgba(200, 255, 61, 0.35);
}
.match-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neon);
}

/* Sections */
.section {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3.75rem 0 1rem;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: end;
}
.section-head h2 {
  margin: .2rem 0 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon);
}
.section-head p {
  margin: 0;
  max-width: 28rem;
  color: var(--mute);
  line-height: 1.5;
}

.roster {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .roster-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .roster-3 { grid-template-columns: repeat(3, 1fr); } }
.roster-dev { grid-template-columns: 1fr; }
@media (min-width: 700px) { .roster-dev { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .roster-dev { grid-template-columns: repeat(3, 1fr); } }

.player {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(11, 16, 26, 0.98));
  border: 1px solid rgba(0, 255, 209, 0.16);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.player:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 209, 0.45);
  box-shadow: 0 18px 40px -24px rgba(0, 255, 209, 0.5);
}
.player-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: #070b14;
}
.player-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transition: transform .45s ease;
}
.player:hover .player-media img { transform: scale(1.05); }
.player-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, rgba(5, 7, 12, 0.95));
}
.player-media--icon {
  background: #070b14;
}
.player-media--icon::after { display: none; }
.player-media--icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  border-radius: 0;
  box-shadow: none;
}
.player:hover .player-media--icon img { transform: scale(1.05); }
.player-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  background: rgba(5, 7, 12, 0.75);
  border: 1px solid rgba(200, 255, 61, 0.4);
  color: var(--acid);
}
.player-body {
  padding: 1rem 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.player-body h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.15rem;
}
.player-body p {
  margin: 0;
  color: var(--mute);
  font-size: .92rem;
  line-height: 1.45;
  flex: 1;
}
.player-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon-dim);
}
.player-link { color: var(--acid); }

/* Contact */
.contact {
  width: min(680px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 4rem 0 5rem;
}
.contact-card {
  border: 1px solid rgba(0, 255, 209, 0.2);
  background: rgba(11, 16, 26, 0.92);
  padding: 1.5rem;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
@media (min-width: 700px) { .contact-card { padding: 2rem; } }
.contact-card h2 {
  margin: .25rem 0 .4rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}
.contact-card > p { margin: 0 0 1.25rem; color: var(--mute); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.field label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon-dim);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(5, 7, 12, 0.8);
  padding: .85rem .9rem;
  color: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(0, 255, 209, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.12);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; }

.site-footer {
  border-top: 1px solid rgba(0, 255, 209, 0.12);
  padding: 1.5rem 0 2rem;
}
.footer-inner {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.footer-links { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.footer-links a:hover { color: var(--neon); }
.footer-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--mute);
  border: 1px solid rgba(0, 255, 209, 0.22);
  clip-path: polygon(12% 0, 100% 0, 100% 78%, 88% 100%, 0 100%, 0 22%);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-admin:hover {
  color: var(--neon);
  border-color: rgba(0, 255, 209, 0.55);
  background: rgba(0, 255, 209, 0.08);
}
.footer-admin svg { display: block; }

.status-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: min(360px, calc(100% - 2rem));
  padding: .9rem 1rem;
  font-weight: 650;
  border: 1px solid rgba(0,255,209,.3);
  background: #0b101a;
}
.status-toast.ok { color: var(--neon); }
.status-toast.err { color: #ff8fa0; border-color: rgba(255,77,109,.4); }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes blink {
  50% { opacity: 0; }
}
@keyframes scan {
  from { transform: translateY(-20%); }
  to { transform: translateY(20%); }
}
@keyframes hero-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 48px 0; }
}
@keyframes hero-aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.85; }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: 1; }
}
@keyframes hero-beams {
  0%, 100% { background-position: 0% 0, 100% 0; opacity: 0.55; }
  50% { background-position: 100% 0, 0% 0; opacity: 0.95; }
}
@keyframes hero-orbs {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -14px, 0); }
}
@keyframes hero-scan {
  0% { top: -30%; opacity: 0; }
  12% { opacity: 0.9; }
  55% { opacity: 0.55; }
  100% { top: 105%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot, .hero-emblem, .hero-brand, .hero-copy, .hero-cta, .live-pill,
  .hero-fx-grid, .hero-fx-aurora, .hero-fx-beams, .hero-fx-orbs, .hero-fx-scan {
    animation: none !important;
  }
  .boot-bar > span { transition: none; }
  .hero-fx-scan { display: none; }
}