/* ===== Reset & Variables ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--size-base);
  line-height:var(--line-height);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

:root{
  --color-bg:#0B1B3D;
  --color-bg-panel:#102A4C;
  --color-bg-sub:#1E3A5F;
  --color-accent:#FFD700;
  --color-live:#39FF14;
  --color-text:#FFFFFF;
  --color-text-dim:#B0C4DE;
  --color-border:#2A4563;
  --color-warn:#FF4D4F;
  --font-title:'Noto Sans SC',sans-serif;
  --font-body:'Noto Sans SC',sans-serif;
  --font-number:'JetBrains Mono',monospace;
  --size-base:16px;
  --line-height:1.6;
  --header-h:auto;
  --content-max:1280px;
  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:4rem;
  --space-xl:6rem;
  --radius-cut:12px 2px 12px 2px;
}

/* ===== Focus & Reduced Motion ===== */
:focus-visible{
  outline:3px solid var(--color-live);
  outline-offset:2px;
  border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ===== Global Layout ===== */
.site-main{
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--space-md) var(--space-md) var(--space-xl);
}
::selection{background:var(--color-accent);color:#0B1B3D}

/* ===== Skip Link ===== */
.site-skip{
  position:absolute;
  left:1rem;
  top:-100px;
  background:var(--color-accent);
  color:#0B1B3D;
  padding:.6rem 1rem;
  font-weight:700;
  z-index:2000;
  border-radius:0 0 4px 4px;
  transition:top .2s;
}
.site-skip:focus-visible{
  top:0;
}

/* ===== Header ===== */
.site-header{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  position:relative;
  z-index:100;
}
.header-shell{
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--space-sm) var(--space-md) 0;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-sm);
  padding-bottom:var(--space-sm);
}
.site-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.brand-mark{
  width:40px;
  height:40px;
  background:var(--color-accent);
  color:#0B1B3D;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-number);
  font-weight:700;
  font-size:1.2rem;
  border-radius:2px 10px 2px 10px;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-name{
  font-weight:900;
  font-size:1.2rem;
  letter-spacing:.06em;
}
.brand-code{
  font-family:var(--font-number);
  font-size:.7rem;
  color:var(--color-text-dim);
  letter-spacing:.08em;
}
.site-header-actions{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.4rem;
  background:var(--color-accent);
  color:var(--color-bg);
  font-weight:700;
  border-radius:2px 8px 2px 8px;
  border:1px solid transparent;
  transition:all .2s ease;
  cursor:pointer;
}
.btn:hover{
  background:transparent;
  color:var(--color-accent);
  border-color:var(--color-live);
}
.btn-ghost{
  background:transparent;
  color:var(--color-text);
  border-color:var(--color-border);
}
.btn-ghost:hover{
  border-color:var(--color-live);
  color:var(--color-live);
  background:rgba(57,255,20,.05);
}
.btn-compact{
  padding:.4rem .8rem;
  font-size:.85rem;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  width:44px;
  height:44px;
  justify-content:center;
  align-items:center;
  gap:6px;
  border:1px solid var(--color-border);
  border-radius:4px;
}
.nav-toggle-line{
  display:block;
  width:22px;
  height:2px;
  background:var(--color-accent);
  transition:transform .2s, opacity .2s;
}
.header-main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-sm);
  padding-bottom:.5rem;
  flex-wrap:wrap;
}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.site-nav a{
  display:block;
  padding:.3rem 0;
  color:var(--color-text-dim);
  font-weight:500;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.site-nav a:hover{
  color:var(--color-text);
}
.site-nav a[aria-current="page"]{
  color:var(--color-accent);
  border-bottom-color:var(--color-accent);
}
.site-live{
  display:flex;
  align-items:center;
  gap:.8rem;
  background:var(--color-bg-panel);
  border:1px solid var(--color-border);
  border-radius:4px 16px 4px 16px;
  padding:.45rem .9rem;
  font-family:var(--font-number);
  font-size:.85rem;
}
.live-status{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--color-live);
  box-shadow:0 0 6px var(--color-live);
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}
.live-text{
  font-size:.8rem;
  letter-spacing:.15em;
  color:var(--color-live);
}
.live-clock{
  display:flex;
  gap:.5rem;
  color:var(--color-text-dim);
}
.clock-date,.clock-time{
  white-space:nowrap;
}
.live-score{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--color-text);
}
.score-team{
  font-weight:700;
}
.score-num{
  color:var(--color-accent);
  font-weight:700;
}
.score-minute{
  color:var(--color-text-dim);
  font-size:.75rem;
}

/* ===== Footer ===== */
.site-footer{
  background:var(--color-bg);
  border-top:1px solid var(--color-border);
  margin-top:var(--space-lg);
}
.footer-shell{
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--space-lg) var(--space-md) var(--space-md);
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-lg);
}
.footer-brand-block{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.footer-brand{
  font-family:var(--font-title);
  font-weight:900;
  font-size:1.6rem;
  color:var(--color-accent);
}
.footer-trust{
  color:var(--color-text-dim);
  font-size:.9rem;
}
.footer-heading{
  font-size:.8rem;
  color:var(--color-text-dim);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:var(--space-sm);
  border-left:3px solid var(--color-live);
  padding-left:.6rem;
}
.footer-links li,.footer-contact li{
  margin-bottom:.5rem;
}
.footer-links a{
  color:var(--color-text-dim);
  font-size:.9rem;
  transition:color .2s;
}
.footer-links a:hover{
  color:var(--color-accent);
}
.footer-contact{
  color:var(--color-text-dim);
  font-size:.9rem;
}
.footer-contact a{
  color:var(--color-text-dim);
}
.footer-contact a:hover{
  color:var(--color-accent);
}
.footer-bottom{
  border-top:1px solid var(--color-border);
  margin-top:var(--space-lg);
  padding-top:var(--space-sm);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  color:var(--color-text-dim);
  font-size:.8rem;
}
.icp{
  font-family:var(--font-number);
}

/* ===== Shared Content Components ===== */
.section{
  margin-bottom:var(--space-xl);
}
.section-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:var(--space-md);
}
.section-index{
  font-family:var(--font-number);
  font-size:2rem;
  color:var(--color-accent);
  opacity:.7;
  line-height:1;
}
.section-title{
  font-size:2rem;
  font-weight:900;
  line-height:1.2;
}
.section-desc{
  color:var(--color-text-dim);
  max-width:70ch;
  margin-top:.5rem;
}
.cut-panel{
  background:var(--color-bg-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-cut);
  padding:var(--space-md);
  position:relative;
}
.cut-panel::after{
  content:"";
  position:absolute;
  bottom:-1px;
  right:-1px;
  width:40px;
  height:20px;
  background:var(--color-bg);
  border-top:1px solid var(--color-border);
  border-left:1px solid var(--color-border);
  transform:skewX(-12deg);
}
.img-placeholder-live{
  position:relative;
  background:var(--color-bg-sub);
  border:1px solid var(--color-border);
  border-radius:12px 0 12px 0;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--color-text-dim);
  font-family:var(--font-number);
  font-size:.8rem;
}
.img-placeholder-live::before{
  content:"LIVE";
  position:absolute;
  top:.8rem;
  right:.8rem;
  background:var(--color-live);
  color:#0B1B3D;
  padding:.1rem .4rem;
  font-size:.7rem;
  border-radius:2px;
}
.img-placeholder-map{
  background:var(--color-bg-sub);
  border:1px solid var(--color-border);
  border-radius:2px 12px 2px 12px;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text-dim);
  font-family:var(--font-number);
  font-size:.8rem;
}
.grid-x{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-md);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--color-bg-sub);
  border:1px solid var(--color-border);
  color:var(--color-text-dim);
  font-size:.8rem;
  padding:.2rem .6rem;
  border-radius:100px;
}
.chip-live{
  color:var(--color-live);
  border-color:rgba(57,255,20,.4);
  background:rgba(57,255,20,.05);
}
.index-mono{
  font-family:var(--font-number);
  color:var(--color-text-dim);
  font-size:.8rem;
}

/* ===== Reveal Animation ===== */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal][data-revealed]{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity:1;
    transform:none;
  }
}

/* ===== To Top ===== */
.to-top{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:44px;
  height:44px;
  background:var(--color-accent);
  color:#0B1B3D;
  border-radius:2px 10px 2px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:999;
}
.to-top.visible{
  opacity:1;
  pointer-events:auto;
}
.to-top:hover{
  background:var(--color-live);
}
@media (prefers-reduced-motion: reduce){
  .to-top{
    transition:opacity .01s;
  }
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:var(--space-md);
  }
}
@media (max-width: 767px){
  :root{
    --space-lg:2.5rem;
    --space-xl:3rem;
  }
  .header-shell{
    padding-left:var(--space-sm);
    padding-right:var(--space-sm);
  }
  .site-header-actions .btn{
    display:none;
  }
  .nav-toggle{
    display:inline-flex;
  }
  .site-header[data-open] .nav-toggle-line:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .site-header[data-open] .nav-toggle-line:nth-child(2){
    opacity:0;
  }
  .site-header[data-open] .nav-toggle-line:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
  .site-nav{
    display:none;
    width:100%;
    background:var(--color-bg-panel);
    border-radius:0 0 12px 12px;
    padding:var(--space-sm);
  }
  .site-header[data-open] .site-nav{
    display:block;
  }
  .site-nav ul{
    flex-direction:column;
    gap:0;
  }
  .site-nav a{
    padding:.8rem .5rem;
    border-bottom:1px solid var(--color-border);
  }
  .site-nav a[aria-current="page"]{
    color:var(--color-accent);
    background:rgba(255,215,0,.05);
  }
  .header-main{
    align-items:stretch;
  }
  .site-live{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:.5rem;
  }
  .footer-top{
    grid-template-columns:1fr;
    gap:var(--space-md);
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .section-title{
    font-size:1.5rem;
  }
  .section-index{
    font-size:1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1024px){
  .site-live{
    flex-wrap:wrap;
  }
}

/* ===== Table of Contents-style index list ===== */
.index-list{
  border-top:1px solid var(--color-border);
}
.index-list a{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--color-border);
  transition:background .2s, padding-left .2s;
}
.index-list a:hover{
  background:rgba(255,215,0,.04);
  padding-left:.5rem;
}
.index-list .idx-no{
  font-family:var(--font-number);
  color:var(--color-accent);
  font-size:.8rem;
}
.index-list .idx-title{
  color:var(--color-text);
  font-weight:600;
}
.index-list .idx-meta{
  color:var(--color-text-dim);
  font-size:.8rem;
  font-family:var(--font-number);
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-number);
  font-size:.8rem;
  color:var(--color-text-dim);
  margin-bottom:var(--space-md);
}
.breadcrumb a{
  color:var(--color-accent);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.breadcrumb a:hover{
  border-bottom-color:var(--color-accent);
}

/* ===== Tables & data tables ===== */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.data-table th,.data-table td{
  border-bottom:1px solid var(--color-border);
  padding:.6rem .8rem;
  text-align:left;
}
.data-table th{
  background:var(--color-bg-panel);
  color:var(--color-accent);
  font-family:var(--font-number);
  font-size:.8rem;
  text-transform:uppercase;
}
.data-table td{
  color:var(--color-text);
}
.data-table .num{
  font-family:var(--font-number);
  color:var(--color-live);
}

/* ===== Notice / callout ===== */
.callout{
  background:linear-gradient(135deg, rgba(255,215,0,.08) 0%, rgba(57,255,20,.04) 100%);
  border-left:4px solid var(--color-live);
  padding:1rem 1.2rem;
  color:var(--color-text-dim);
  border-radius:0 8px 8px 0;
  font-size:.9rem;
}

/* ===== Standings strip ===== */
.standings-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1px;
  background:var(--color-border);
  border:1px solid var(--color-border);
}
.standings-strip .cell{
  background:var(--color-bg-panel);
  padding:.8rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.standings-strip .cell .rank{
  font-family:var(--font-number);
  font-size:1.4rem;
  font-weight:700;
  color:var(--color-accent);
}
.standings-strip .cell .team{
  font-size:.85rem;
  color:var(--color-text);
}
.standings-strip .cell .goals{
  font-family:var(--font-number);
  font-size:.75rem;
  color:var(--color-text-dim);
}
.standings-strip .cell.highlight{
  background:var(--color-bg-sub);
  border-left:3px solid var(--color-live);
}

/* ===== Header live data component in page context ===== */
.live-compact{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--color-bg-panel);
  border:1px solid var(--color-border);
  padding:.8rem 1rem;
  border-radius:2px 12px 2px 12px;
  font-family:var(--font-number);
}
.live-compact .team-name{
  font-family:var(--font-title);
  font-weight:700;
}
.live-compact .score-mid{
  color:var(--color-accent);
  font-weight:700;
  font-size:1.1rem;
}
.live-compact .live-tag{
  background:var(--color-live);
  color:#0B1B3D;
  font-size:.7rem;
  padding:.1rem .5rem;
  border-radius:2px;
}
@media (max-width: 767px){
  .live-compact{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
}