/* 赛博朋克竞技剧场：深紫电竞馆、霓虹粉/电光蓝、斜切赛事屏幕、HUD角标、粒子与扫描线。
   本文件执行：赛博朋克竞技剧场视觉系统；所有页面遵循深紫背景、霓虹粉/电光蓝、斜切HUD面板与移动端优先。 */
:root {
  --deep: #1A0033;
  --deep-2: #090014;
  --panel: rgba(30, 4, 58, .78);
  --panel-2: rgba(8, 0, 20, .72);
  --pink: #FF00FF;
  --blue: #00BFFF;
  --text: #F7F3FF;
  --muted: #B9A9D6;
  --line: rgba(0, 191, 255, .38);
  --danger: #FF4FD8;
  --win: #28F7C5;
  --loss: #8B6DFF;
  --shadow-pink: 0 0 22px rgba(255, 0, 255, .45);
  --shadow-blue: 0 0 24px rgba(0, 191, 255, .38);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep-2); }
body { margin: 0; color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, Segoe UI, sans-serif; background:
  radial-gradient(circle at 14% 10%, rgba(255,0,255,.16), transparent 30%),
  radial-gradient(circle at 78% 4%, rgba(0,191,255,.16), transparent 34%),
  linear-gradient(180deg, var(--deep), #090014 52%, #05000B); overflow-x: hidden; }
body::before { content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity:.26; background-image: linear-gradient(rgba(0,191,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,255,.07) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(900px) rotateX(58deg) translateY(-22%); transform-origin: top; }
body::after { content:""; position: fixed; inset: 0; pointer-events:none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 5px); mix-blend-mode: screen; opacity:.12; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display:block; }
img { height:auto; }
.skip-link { position:absolute; left:-999px; top: 8px; background:var(--blue); color:#001; padding:.75rem 1rem; z-index:999; }
.skip-link:focus { left: 8px; }
.neon-shell { width:min(1180px, calc(100% - 32px)); margin-inline:auto; }
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); background: linear-gradient(90deg, rgba(9,0,20,.88), rgba(26,0,51,.76)); border-bottom: 1px solid rgba(0,191,255,.28); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap: 18px; }
.brand { display:flex; align-items:center; gap: 12px; min-width: 170px; }
.brand img { width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 0 12px rgba(255,0,255,.7)); }
.brand span { font-family: Impact, "Arial Black", system-ui; letter-spacing:.08em; text-transform:uppercase; line-height:1; }
.brand small { display:block; color: var(--blue); font-family: monospace; letter-spacing:.16em; font-size:.68rem; margin-top:4px; }
.nav-toggle { display:none; border:1px solid var(--line); background:rgba(0,191,255,.08); color:var(--text); padding:.6rem .85rem; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.main-nav { display:flex; align-items:center; gap: 2px; flex-wrap:wrap; justify-content:flex-end; }
.main-nav a { font-size:.92rem; color:#EDE7FF; padding:.72rem .86rem; border:1px solid transparent; position:relative; transition: .25s ease; }
.main-nav a:hover, .main-nav a.active { color:#fff; border-color:rgba(255,0,255,.45); background: linear-gradient(90deg, rgba(255,0,255,.12), rgba(0,191,255,.08)); box-shadow: var(--shadow-pink); }
.hero { position:relative; min-height: 680px; display:grid; align-items:center; overflow:hidden; background-position:center; background-size:cover; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(7,0,18,.94) 0%, rgba(15,0,31,.72) 42%, rgba(15,0,31,.22) 100%); z-index:-1; }
.hero::after { content:""; position:absolute; inset:-30%; background: radial-gradient(circle, rgba(0,191,255,.08), transparent 34%); animation: orbitGlow 12s linear infinite; z-index:-1; }
.hero-inner { display:grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 430px); gap: 40px; align-items:end; padding: 96px 0 70px; }
.kicker { color: var(--blue); font-family: monospace; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; margin-bottom: 18px; }
h1, h2, h3 { margin:0; font-family: Impact, "Arial Black", "Microsoft YaHei", system-ui; letter-spacing:.035em; }
h1 { font-size: clamp(2.7rem, 7.4vw, 6.5rem); line-height:.95; text-transform:uppercase; text-shadow: 0 0 28px rgba(255,0,255,.45); max-width: 920px; }
h2 { font-size: clamp(2rem, 4.2vw, 4rem); line-height:1; }
h3 { font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
p { color: var(--muted); line-height:1.82; }
.hero-lead { font-size: clamp(1rem, 1.9vw, 1.25rem); max-width: 760px; color:#E5D9FF; }
.neon-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.neon-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.84rem 1.2rem; border:1px solid rgba(0,191,255,.65); color:#fff; background: linear-gradient(105deg, rgba(255,0,255,.18), rgba(0,191,255,.14)); clip-path: polygon(10px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: var(--shadow-blue); transition: transform .22s ease, filter .22s ease; }
.neon-btn:hover { transform: translateY(-3px); filter: saturate(1.3); }
.neon-btn.secondary { border-color:rgba(255,0,255,.58); background: rgba(255,0,255,.08); box-shadow: var(--shadow-pink); }
.countdown { border:1px solid rgba(0,191,255,.45); background: linear-gradient(135deg, rgba(8,0,20,.78), rgba(40,0,74,.62)); clip-path: polygon(0 0, 93% 0, 100% 9%, 100% 100%, 8% 100%, 0 91%); padding: 26px; box-shadow: 0 18px 60px rgba(0,0,0,.45), var(--shadow-blue); }
.countdown .vs { color:#fff; font-size:1.5rem; margin-bottom:12px; }
.time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
.time-cell { background:rgba(0,0,0,.26); border:1px solid rgba(255,0,255,.28); padding:14px 8px; text-align:center; }
.time-cell strong { display:block; font-family:monospace; color:var(--blue); font-size:1.7rem; text-shadow: 0 0 14px rgba(0,191,255,.8); }
.time-cell span { color:var(--muted); font-size:.78rem; }
.section { padding: 86px 0; position:relative; }
.section.alt { background: linear-gradient(180deg, rgba(255,0,255,.035), rgba(0,191,255,.035)); border-block:1px solid rgba(0,191,255,.1); }
.section-head { display:grid; grid-template-columns: minmax(0, .9fr) minmax(260px, .45fr); gap:30px; align-items:end; margin-bottom:34px; }
.section-head p { margin: 0; }
.hud-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.hud-card { grid-column: span 4; position:relative; padding:22px; background: var(--panel); border:1px solid rgba(0,191,255,.28); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 18px, 100% 100%, 20px 100%, 0 calc(100% - 18px)); overflow:hidden; transition: transform .25s ease, border-color .25s ease; }
.hud-card::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(255,0,255,.13), transparent); transform: translateX(-120%); transition: transform .65s ease; }
.hud-card:hover { transform: translateY(-6px); border-color: rgba(255,0,255,.58); }
.hud-card:hover::before { transform: translateX(120%); }
.card-wide { grid-column: span 6; }
.card-full { grid-column: 1 / -1; }
.card-img { width:100%; aspect-ratio: 16/9; object-fit:cover; border:1px solid rgba(0,191,255,.24); margin-bottom:18px; clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%); }
.stat-row { display:flex; justify-content:space-between; gap:12px; border-top:1px solid rgba(0,191,255,.18); padding-top:12px; margin-top:14px; color:#E9E2FF; }
.stat-row strong, .metric strong { color:var(--blue); font-family:monospace; }
.badge { display:inline-flex; align-items:center; gap:6px; color:#fff; background:rgba(255,0,255,.13); border:1px solid rgba(255,0,255,.45); padding:.35rem .62rem; font-size:.78rem; margin-bottom:12px; }
.badge.blue { background:rgba(0,191,255,.11); border-color:rgba(0,191,255,.55); }
.results { display:grid; gap:12px; }
.result-line { display:grid; grid-template-columns: 82px 1fr auto; gap:14px; align-items:center; padding:14px 16px; background:rgba(0,0,0,.22); border-left:3px solid var(--blue); }
.result-line.loss { border-left-color: var(--pink); }
.result-line b { color:#fff; }
.table-wrap { overflow-x:auto; border:1px solid rgba(0,191,255,.22); background:rgba(0,0,0,.2); }
table { width:100%; border-collapse:collapse; min-width:720px; }
th, td { padding:16px; text-align:left; border-bottom:1px solid rgba(0,191,255,.14); }
th { color:var(--blue); font-family:monospace; letter-spacing:.08em; background:rgba(0,191,255,.06); }
td { color:#EFE9FF; }
.video-frame { background:rgba(0,0,0,.34); border:1px solid rgba(255,0,255,.34); padding:10px; clip-path: polygon(0 0, 97% 0, 100% 10%, 100% 100%, 3% 100%, 0 90%); box-shadow: var(--shadow-pink); }
.video-frame video { width:100%; aspect-ratio:16/9; background:#000; object-fit:cover; }
.marquee { overflow:hidden; border:1px solid rgba(0,191,255,.2); background:rgba(0,0,0,.22); }
.marquee-track { display:flex; width:max-content; animation: marquee 28s linear infinite; }
.logo-pill { min-width: 190px; margin:14px; padding:18px 20px; border:1px solid rgba(255,0,255,.28); color:#fff; background:linear-gradient(120deg, rgba(255,0,255,.09), rgba(0,191,255,.08)); font-family:monospace; text-align:center; letter-spacing:.08em; }
.timeline { display:grid; gap:18px; }
.timeline-item { display:grid; grid-template-columns: 150px 1fr; gap:22px; padding:20px; border:1px solid rgba(0,191,255,.24); background:rgba(255,255,255,.03); }
.price { color:var(--win); font-family:monospace; font-size:1.4rem; }
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.input, textarea, select { width:100%; min-height:46px; color:#fff; border:1px solid rgba(0,191,255,.34); background:rgba(0,0,0,.24); padding:.8rem 1rem; outline:none; }
textarea { min-height:120px; resize:vertical; }
.footer { padding:60px 0 30px; background:#06000D; border-top:1px solid rgba(255,0,255,.2); }
.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap:24px; }
.footer h3 { font-size:1.2rem; color:#fff; }
.footer p, .footer a { color:#B9A9D6; line-height:1.9; }
.qr { width:128px; height:128px; object-fit:cover; border:1px solid rgba(0,191,255,.35); }
.copy { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); color:#8C7BAA; font-size:.9rem; }
.particle { position: fixed; width:3px; height:3px; border-radius:50%; background:var(--blue); pointer-events:none; opacity:.42; animation: floatParticle 8s linear infinite; z-index:0; }
@keyframes orbitGlow { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes floatParticle { 0% { transform: translate3d(0,0,0); opacity:.1; } 50% { opacity:.75; } 100% { transform: translate3d(40px,-120vh,0); opacity:0; } }
@media (max-width: 900px) {
  .nav-toggle { display:inline-flex; }
  .main-nav { position:absolute; left:16px; right:16px; top:74px; display:none; flex-direction:column; align-items:stretch; background:rgba(9,0,20,.96); border:1px solid rgba(0,191,255,.3); padding:12px; }
  .main-nav.open { display:flex; }
  .hero { min-height: auto; }
  .hero-inner, .section-head { grid-template-columns:1fr; }
  .hud-card, .card-wide { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .neon-shell { width:min(100% - 22px, 1180px); }
  .section { padding:62px 0; }
  .time-grid { grid-template-columns:repeat(2,1fr); }
  .timeline-item { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}