:root{
  --bg:#0B0E14;
  --panel:#151A24;
  --panel-2:#1E2632;
  --text:#E8EAED;
  --muted:#9AA3B2;
  --orange:#FF6A00;
  --orange-bright:#FF9A3E;
  --cyan:#00A8B5;
  --cyan-light:#7FDBFF;
  --border:#2A2F3A;
  --heading-font:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  --data-font:'Roboto Mono',monospace;
  --body-font:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --header-h:68px;
  --container-w:1240px;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-pill:999px;
  --shadow-1:0 12px 40px rgba(0,0,0,.45);
  --shadow-2:0 4px 20px rgba(255,106,0,.15);
  --transition:.35s cubic-bezier(.4,0,.2,1);
  --glass:rgba(21,26,36,.75);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 85% -5%,rgba(255,106,0,.12),transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 30%,rgba(0,168,181,.08),transparent 70%),
    linear-gradient(rgba(42,47,58,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,47,58,.18) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  mask-image:linear-gradient(to bottom,black 0%,transparent 90%);
}
img,svg{display:block;max-width:100%;}
a{color:var(--orange);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--orange-bright);}
ul{list-style:none;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
:focus-visible{
  outline:3px solid var(--cyan-light);
  outline-offset:3px;
  border-radius:6px;
}
::selection{background:var(--orange);color:#fff;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;
  top:-60px;left:16px;
  z-index:2000;
  background:var(--orange);
  color:#fff;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:14px;
  transition:top .3s;
}
.skip-link:focus{top:12px;outline:none;}
#main-content{min-height:60vh;}

/* Header */
.phx-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--header-h);
  background:rgba(11,14,20,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(42,47,58,.6);
}
.phx-header::after{
  content:"";
  position:absolute;
  bottom:-1px;left:0;
  width:120px;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-bright));
  border-radius:2px;
}
.phx-header-inner{
  max-width:var(--container-w);
  height:100%;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.phx-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  flex-shrink:0;
}
.phx-brand:hover{color:var(--text);}
.phx-brand-mark{
  width:38px;height:38px;
  color:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 0 10px rgba(255,106,0,.5));
  transition:transform var(--transition),color var(--transition);
}
.phx-brand:hover .phx-brand-mark{
  transform:rotate(-8deg) scale(1.05);
  color:var(--orange-bright);
}
.phx-brand-mark svg{width:100%;height:100%;}
.phx-brand-text{
  display:flex;
  align-items:baseline;
  gap:4px;
  line-height:1;
}
.phx-brand-text strong{
  font-size:22px;
  font-family:var(--heading-font);
  font-weight:700;
  letter-spacing:.5px;
}
.phx-brand-text small{
  font-size:12px;
  color:var(--muted);
  letter-spacing:3px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:400;
}
.phx-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.phx-nav a{
  position:relative;
  color:var(--muted);
  font-size:15px;
  font-weight:500;
  padding:10px 15px;
  border-radius:var(--radius-pill);
  transition:background var(--transition),color var(--transition);
  white-space:nowrap;
}
.phx-nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.phx-nav a[aria-current="page"]{
  color:var(--orange);
  background:rgba(255,106,0,.1);
}
.phx-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  bottom:2px;left:50%;
  transform:translateX(-50%);
  width:18px;height:3px;
  border-radius:3px;
  background:var(--orange);
}
.phx-header-side{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.phx-live{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-family:var(--data-font);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:rgba(0,168,181,.06);
  border:1px solid rgba(0,168,181,.25);
  padding:6px 12px;
  border-radius:var(--radius-pill);
}
.phx-live-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,168,181,.5);
  animation:livePulse 2s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(0,168,181,.5);}
  70%{box-shadow:0 0 0 8px rgba(0,168,181,0);}
  100%{box-shadow:0 0 0 0 rgba(0,168,181,0);}
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  padding:10px;
  border-radius:var(--radius-md);
  background:var(--panel);
  border:1px solid var(--border);
}
.nav-toggle-bar{
  width:100%;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform var(--transition),opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Footer */
.phx-footer{
  position:relative;
  background:linear-gradient(180deg,var(--panel) 0%,#10141C 100%);
  border-top:1px solid var(--border);
  margin-top:80px;
}
.phx-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,var(--orange) 0%,transparent 30%,var(--cyan) 100%);
  opacity:.4;
}
.phx-footer-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:56px 24px 40px;
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr;
  gap:48px;
}
.phx-footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  margin-bottom:16px;
}
.phx-footer-brand .phx-brand-mark{width:32px;height:32px;}
.phx-footer-brand .phx-brand-text strong{font-size:20px;}
.phx-footer-desc{
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  max-width:38em;
  margin-bottom:16px;
}
.phx-footer-col h4{
  font-family:var(--heading-font);
  font-size:18px;
  color:var(--text);
  letter-spacing:1px;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(255,106,0,.3);
  display:inline-block;
}
.phx-footer-links li{
  margin-bottom:10px;
}
.phx-footer-links a{
  color:var(--muted);
  font-size:14px;
  transition:color var(--transition),padding-left var(--transition);
}
.phx-footer-links a:hover{
  color:var(--orange-bright);
  padding-left:6px;
}
.phx-footer-links--inline{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.phx-footer-links--inline li{
  margin-bottom:0;
}
.phx-footer-contact-list li{
  color:var(--muted);
  font-size:14px;
  margin-bottom:12px;
  line-height:1.7;
}
.phx-footer-contact-list a{
  color:var(--muted);
  border-bottom:1px dashed var(--border);
}
.phx-footer-contact-list a:hover{
  color:var(--cyan-light);
  border-bottom-color:var(--cyan-light);
}
.phx-footer-bottom{
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.2);
}
.phx-footer-bottom-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--data-font);
  font-size:12px;
  color:var(--muted);
  letter-spacing:.5px;
}

/* Container & Grid */
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}
.section-panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.section-panel::before{
  content:"";
  position:absolute;
  top:0;left:24px;right:24px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 24px;
  border-radius:var(--radius-pill);
  font-family:var(--body-font);
  font-size:15px;
  font-weight:600;
  background:var(--orange);
  color:#fff;
  border:1px solid transparent;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  cursor:pointer;
  line-height:1.4;
}
.btn:hover{
  background:var(--orange-bright);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(255,106,0,.3);
}
.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn--ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan-light);
  background:rgba(0,168,181,.06);
  box-shadow:none;
}

/* Card base */
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,106,0,.5);
  box-shadow:var(--shadow-2);
}

/* Components */
.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:4px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all var(--transition);
  white-space:nowrap;
}
.tag-pill:hover{
  border-color:var(--cyan);
  color:var(--cyan-light);
}
.tag-pill[data-active="true"],.tag-pill.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.tag-pill[data-active="true"]::before,.tag-pill.is-active::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
}
.tag-pill--cyan[data-active="true"],.tag-pill--cyan.is-active{
  background:var(--cyan);
  border-color:var(--cyan);
}

.btn-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Match banner (featured) */
.match-banner{
  position:relative;
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,106,0,.18) 0%,transparent 50%),
    linear-gradient(315deg,rgba(0,168,181,.14) 0%,transparent 50%),
    var(--panel);
  border:1px solid var(--border);
  min-height:360px;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.match-banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,154,62,.15),transparent 50%),
    radial-gradient(circle at 20% 80%,rgba(127,219,255,.08),transparent 50%);
}
.match-banner-content{
  padding:56px;
  max-width:60%;
}
.match-banner-content .match-kicker{
  font-family:var(--data-font);
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--cyan-light);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.match-banner-content .match-kicker::before{
  content:"";
  width:28px;height:2px;
  background:var(--cyan);
}
.match-banner-content h2{
  font-family:var(--heading-font);
  font-size:clamp(32px,5vw,58px);
  line-height:1.1;
  margin-bottom:16px;
  letter-spacing:1px;
  color:#fff;
}
.match-banner-content p{
  color:var(--muted);
  font-size:16px;
  margin-bottom:24px;
  max-width:44em;
}

/* Floating data panel */
.data-float-panel{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-1);
}
.data-float-panel .panel-label{
  font-family:var(--data-font);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.data-float-panel .panel-label::before{
  content:"";
  width:8px;height:8px;
  border-radius:2px;
  background:var(--orange);
  transform:rotate(45deg);
}
.stat-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.stat-row:last-child{border-bottom:none;}
.stat-row .stat-name{color:var(--muted);font-size:14px;}
.stat-row .stat-value{
  font-family:var(--data-font);
  font-weight:700;
  font-size:20px;
  color:var(--text);
}
.stat-row .stat-value b{color:var(--orange-bright);}

/* Stat bar */
.stat-bar{
  display:flex;
  align-items:center;
  gap:12px;
}
.stat-bar .track{
  flex:1;
  height:6px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
}
.stat-bar .fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:6px;
  background:linear-gradient(90deg,var(--orange),var(--orange-bright));
  transition:width 1.2s var(--transition);
}
.stat-bar--cyan .fill{
  background:linear-gradient(90deg,var(--cyan),var(--cyan-light));
}
.stat-bar .value{
  font-family:var(--data-font);
  font-size:14px;
  color:var(--text);
  min-width:44px;
  text-align:right;
}

/* Image placeholder base rules */
.media-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,106,0,.08),transparent 60%),
    linear-gradient(315deg,rgba(0,168,181,.08),transparent 60%),
    var(--panel);
  border:1px solid var(--border);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.015) 12px 13px);
}
.media-frame .media-aspect{
  aspect-ratio:16/10;
  width:100%;
}
.media-frame--tall .media-aspect{aspect-ratio:4/5;}
.media-frame--wide .media-aspect{aspect-ratio:21/9;}

/* Timeline / scroll progress */
.phx-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--orange),var(--cyan));
  z-index:3000;
  border-radius:0 3px 3px 0;
  pointer-events:none;
  box-shadow:0 0 12px rgba(255,106,0,.4);
}

/* Reveal animation */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1);
  transition-delay:var(--reveal-delay,0s);
  will-change:opacity,transform;
}
[data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* Data count flash */
[data-count].is-counted{
  animation:dataFlash .8s ease;
}
@keyframes dataFlash{
  0%{color:var(--orange);}
  50%{color:var(--cyan-light);text-shadow:0 0 12px rgba(127,219,255,.3);}
  100%{color:inherit;}
}

/* Breadcrumb */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  padding:14px 0;
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb [aria-current="page"]{
  color:var(--text);
  font-weight:500;
}

/* Page hero (shared foundation) */
.page-hero{
  padding:52px 0 32px;
  position:relative;
}
.page-hero .kicker{
  font-family:var(--data-font);
  font-size:12px;
  letter-spacing:4px;
  color:var(--cyan-light);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.page-hero .kicker::before{
  content:"";
  width:24px;height:2px;
  background:var(--cyan);
}
.page-hero h1{
  font-family:var(--heading-font);
  font-size:clamp(36px,6vw,64px);
  font-weight:700;
  letter-spacing:1px;
  line-height:1.05;
  color:#fff;
}
.page-hero .lead{
  color:var(--muted);
  font-size:18px;
  margin-top:16px;
  max-width:48em;
}

/* Responsive */
@media (max-width: 1024px){
  .phx-footer-inner{
    grid-template-columns:1fr 1fr;
  }
  .phx-footer-about{grid-column:1/-1;}
  .match-banner-content{max-width:70%;padding:40px;}
}
@media (max-width: 768px){
  :root{--header-h:60px;}
  .phx-header-inner{padding:0 16px;gap:12px;}
  .phx-live-text{display:none;}
  .phx-live{padding:6px 10px;}
  .nav-toggle{
    display:flex;
  }
  .phx-nav{
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    background:rgba(11,14,20,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    align-items:stretch;
    padding:16px 16px 28px;
    gap:4px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .phx-nav[data-open="true"]{
    transform:none;
    opacity:1;
    visibility:visible;
  }
  .phx-nav a{
    padding:14px 16px;
    font-size:16px;
    border-radius:var(--radius-md);
    text-align:center;
  }
  .phx-nav a[aria-current="page"]{
    background:rgba(255,106,0,.12);
  }
  .phx-brand-text strong{font-size:19px;}
  .phx-brand-mark{width:32px;height:32px;}
  .match-banner{min-height:320px;}
  .match-banner-content{
    max-width:100%;
    padding:32px 24px;
  }
  .match-banner-content h2{
    font-size:32px;
  }
  .phx-footer-inner{
    grid-template-columns:1fr;
    gap:36px;
    padding:40px 20px 30px;
  }
  .phx-footer-bottom-inner{
    flex-direction:column;
    text-align:center;
    gap:6px;
    padding:16px 20px;
  }
  .container{padding:0 16px;}
  .data-float-panel{padding:18px;}
  .section-panel{border-radius:20px;}
}
@media (max-width: 480px){
  .phx-live{
    display:none;
  }
  .phx-header-inner{gap:8px;}
  .page-hero h1{
    font-size:34px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  [data-reveal]{
    opacity:1;
    transform:none;
  }
  .phx-live-dot{animation:none;box-shadow:none;}
}