:root{
  --bg:#0b0b12;
  --ink:#eef2ff;
  --muted:#a7a8c2;
  --violet:#9f6bff;
  --cyan:#47e9ff;
  --gold:#ffd166;
  --neon:#49ffa2;
  --pill:#171a27;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Hiragino Sans CNS","Microsoft JhengHei",Arial,sans-serif;
  background:var(--bg); overflow-x:hidden;
}

#cosmos{position:fixed; inset:0; width:100%; height:100%; z-index:-3}
body::before{content:""; position:fixed; inset:-10%; z-index:-2;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(159,107,255,.22), transparent 60%),
    radial-gradient(900px 700px at 120% 20%, rgba(0,172,193,.22), transparent 60%);
  pointer-events:none;
}

.site-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(10,10,18,.55); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:32px; height:32px; object-fit:contain}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-size:15px}
.brand-text span{font-size:12px; color:var(--muted)}
.nav a{color:var(--ink); text-decoration:none; margin-left:12px; opacity:.9}
.nav a:hover{color:var(--violet)}

main{max-width:1100px; margin:0 auto; padding:0 16px 60px}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:60px 0 18px}
.hero .hero-copy h1{font-size:44px; margin:0 0 8px}
.hero .hero-copy .sub{color:var(--muted); margin:0 0 16px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.cta{display:inline-block; padding:10px 16px; border-radius:999px; background:linear-gradient(90deg,var(--violet),var(--cyan)); color:#0b0b12; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cta.ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2)}

.hero-visual{position:relative; height:340px; border-radius:24px; overflow:hidden; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.25)}
#hiveCanvas,#orbsCanvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* 卡片 */
.card{position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px; margin:18px 0; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h2{margin:0 0 6px}
.muted{color:var(--muted); margin-top:0}

#gridFlicker{position:absolute; inset:60px 18px 18px 18px; width:calc(100% - 36px); height:calc(100% - 78px); z-index:0; opacity:.35; pointer-events:none}

.grid6{position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px}
.theme{border:0; padding:20px 0; border-radius:16px; color:#0b0b12; font-weight:900; font-size:22px; letter-spacing:6px; cursor:pointer;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease; text-shadow:0 2px 6px rgba(0,0,0,.25);
  box-shadow:inset 0 0 0 0 rgba(0,0,0,0);
}
.theme:hover{transform:translateY(-3px); filter:brightness(1.08) saturate(1.02)}

.t1{background:linear-gradient(135deg,#2b213a,#6f3cff); color:#fff}
.t2{background:linear-gradient(135deg,#132b3a,#22d3ee); color:#fff}
.t3{background:linear-gradient(135deg,#2b3a21,#a8ff60)}
.t4{background:linear-gradient(135deg,#3a2312,#ffc857)}
.t5{background:linear-gradient(135deg,#321a2a,#ff5bbd); color:#fff}
.t6{background:linear-gradient(135deg,#102a2a,#7fffd4)}

/* live */
.live-section .live-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.badge{padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.6px}
.badge.live{background:#ff1744; color:#fff; box-shadow:0 0 20px rgba(255,23,68,.5)}
.badge.replay{background:#39424e; color:#e2e8f0}

.player-wrap{display:flex; flex-direction:column; gap:10px}
.player-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{border:1px solid rgba(255,255,255,.1); background:var(--pill); color:#e5e7eb; padding:10px 12px; border-radius:12px; cursor:pointer}
.btn.secondary{background:linear-gradient(135deg,#ffd166,#ffaa00); color:#0b0b12; border:0; font-weight:900}
.btn.ghost{background:transparent}

.iframe-ratio{position:relative; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.iframe-ratio::before{content:""; display:block; padding-top:56.25%}
.iframe-ratio iframe{position:absolute; inset:0; width:100%; height:100%}
.tip{opacity:.7}

.replay{margin-top:10px}
.replay .rail{display:flex; gap:10px; overflow:auto; padding-bottom:4px}
.thumb{border:0; background:#121522; color:#cbd5e1; border-radius:12px; overflow:hidden; cursor:pointer; min-width:200px}
.thumb img{display:block; width:200px; height:112px; object-fit:cover}
.thumb span{display:block; padding:6px 8px; font-size:12px}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(4,6,18,.72); backdrop-filter: blur(8px); display:none; align-items:center; justify-content:center; z-index:100}
.modal{width:min(880px,92vw); max-height:84vh; overflow:auto; background:rgba(18,21,34,.92); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.55)}
.modal header{display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; background:inherit; padding:6px 0 10px; z-index:1}
.modal h3{margin:0}
.modal .close{border:0; background:transparent; color:#cbd5e1; font-size:20px; cursor:pointer}
.list{display:grid; grid-template-columns:1fr; gap:10px; margin-top:6px}
.item{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.item h4{margin:0 0 6px}
.meta{color:#a7a8c2; font-size:13px}
.actions{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap}
.actions a{border:1px solid rgba(255,255,255,.2); color:#e2e8f0; text-decoration:none; padding:6px 10px; border-radius:10px}
.actions a:hover{background:rgba(255,255,255,.06)}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-visual{height:280px}
  .grid6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .grid6{grid-template-columns:repeat(2,1fr)}
}

.site-footer{padding:28px 16px; text-align:center; color:var(--muted)}