:root {
  color-scheme: dark;
  --bg: #070a11;
  --panel: rgba(15, 21, 34, .9);
  --line: rgba(255, 255, 255, .1);
  --text: #f4f5f8;
  --muted: #939baa;
  --gold: #e8b85b;
  --orange: #f27735;
  --blue: #78a9ff;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.ambient { position: fixed; border-radius: 50%; filter: blur(110px); opacity: .22; pointer-events: none; }
.ambient-one { width: 560px; height: 560px; background: #e8692d; right: -180px; top: 80px; }
.ambient-two { width: 480px; height: 480px; background: #264c9e; left: -220px; bottom: -170px; }
.topbar { height: 76px; padding: 0 clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(7,10,17,.72); backdrop-filter: blur(18px); position: relative; z-index: 3; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; font-family: serif; font-size: 24px; font-weight: 900; color: #1a0e07; background: linear-gradient(145deg,#f6d079,#c17a2d); transform: rotate(45deg); border-radius: 8px; box-shadow: 0 0 30px rgba(232,184,91,.22); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand > span:last-child { display: grid; line-height: 1; gap: 5px; }
.brand strong { letter-spacing: .12em; }
.brand small { font-size: 9px; letter-spacing: .35em; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.ghost-link,.ghost-button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; color: #c9ced7; text-decoration: none; background: rgba(255,255,255,.03); font: inherit; font-size: 13px; cursor: pointer; }
.shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; min-height: calc(100vh - 145px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 7vw, 100px); padding: 70px 0; position: relative; z-index: 1; }
.hero { max-width: 620px; }
.eyebrow { color: var(--gold); letter-spacing: .3em; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 34px; height: 1px; background: var(--gold); }
.hero h1 { font-family: Georgia, "STKaiti", serif; font-size: clamp(50px, 6vw, 82px); line-height: 1.08; letter-spacing: -.04em; margin: 24px 0; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg,#fff 10%,#dfac50 55%,#ea6e36); background-clip: text; }
.hero > p { color: #aab0bd; font-size: 17px; line-height: 1.9; max-width: 580px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero-tags span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #aeb5c2; font-size: 12px; background: rgba(255,255,255,.025); }
.portal-card { min-height: 510px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(145deg,rgba(24,31,47,.92),rgba(10,14,24,.96)); box-shadow: 0 30px 100px rgba(0,0,0,.45); position: relative; overflow: hidden; display: flex; }
.portal-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg,rgba(246,208,121,.3),transparent 35%,rgba(102,152,255,.16)); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.card-shine { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(236,154,71,.12); filter: blur(80px); right: -130px; top: -100px; }
.center-view { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 54px; position: relative; }
.loader { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.12); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rune-icon { width: 70px; height: 70px; display: grid; place-items: center; color: var(--gold); font-size: 34px; border-radius: 50%; border: 1px solid rgba(232,184,91,.34); background: rgba(232,184,91,.07); box-shadow: 0 0 50px rgba(232,184,91,.1); }
.section-kicker { margin: 22px 0 8px; color: var(--gold); font-size: 10px; letter-spacing: .3em; }
.center-view h2 { margin: 4px 0 12px; font-size: 27px; }
.muted { color: var(--muted); line-height: 1.7; max-width: 360px; font-size: 14px; }
.steam-button,.primary-button { border: 0; border-radius: 10px; min-width: 220px; padding: 14px 24px; margin-top: 22px; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; background: linear-gradient(115deg,#24649b,#173c67); box-shadow: 0 12px 30px rgba(18,67,110,.35); transition: transform .18s,filter .18s; }
.steam-button span { font-weight: 800; letter-spacing: .04em; }
.primary-button { background: linear-gradient(115deg,#d9873c,#e45d2e); box-shadow: 0 12px 30px rgba(226,91,45,.24); }
.steam-button:hover,.primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dev-login { width: 100%; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: #737d8d; font-size: 11px; }
.dev-login > div { display: flex; margin-top: 10px; }
.dev-login input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px 0 0 8px; background: #090d16; color: #bdc3cd; padding: 10px; outline: none; }
.dev-login button { border: 0; border-radius: 0 8px 8px 0; background: #30394a; color: #fff; padding: 0 12px; cursor: pointer; }
.lobby-view { width: 100%; padding: 36px; position: relative; display: flex; flex-direction: column; }
.player-row { display: flex; align-items: center; gap: 13px; }
.avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#745027,#d79d4d); font-size: 13px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.player-row > div:nth-child(2) { display: grid; gap: 5px; }
.player-row strong { font-size: 13px; letter-spacing: .05em; }
.muted-label { color: #7f8999; font-size: 11px; }
.status-badge { margin-left: auto; padding: 7px 10px; border-radius: 999px; background: rgba(67,188,125,.1); color: #7bd49f; font-size: 10px; border: 1px solid rgba(67,188,125,.18); }
.status-badge.offline { color: #e5a06c; border-color: rgba(229,160,108,.2); background: rgba(229,160,108,.08); }
.divider { height: 1px; background: var(--line); margin: 28px 0; }
.state-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mode-label { color: var(--gold); font-size: 11px; letter-spacing: .25em; }
.state-panel h2 { margin: 12px 0 9px; font-size: 27px; }
.versus { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 26px 0 8px; }
.fighter { padding: 18px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.vs { color: var(--gold); font-family: Georgia,serif; font-style: italic; font-size: 22px; }
.spinner-rings { width: 74px; height: 74px; border: 1px solid rgba(232,184,91,.2); border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px; animation: pulse 1.8s ease-in-out infinite; }
.spinner-rings::after { content: ""; width: 42px; height: 42px; border: 2px solid transparent; border-top-color: var(--gold); border-bottom-color: var(--gold); border-radius: 50%; animation: spin 1.4s linear infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 35px rgba(232,184,91,.16); } }
.secondary-button { border: 1px solid var(--line); color: #aab1bd; background: transparent; border-radius: 9px; padding: 10px 18px; margin-top: 18px; cursor: pointer; }
.connect-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.connect-actions .primary-button { display: inline-block; }
.command { width: 100%; margin-top: 18px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: #7f8999; background: rgba(0,0,0,.18); font: 11px ui-monospace,Consolas,monospace; cursor: pointer; }
.notice { margin-top: 14px; color: #747e8e; font-size: 11px; line-height: 1.6; }
.simulation-ready { margin-top: 20px; min-width: 220px; padding: 13px 20px; border: 1px solid rgba(232,184,91,.24); border-radius: 10px; color: #dcb975; background: rgba(232,184,91,.06); font-weight: 700; letter-spacing: .08em; }
.error-text { color: #e98a78; }
.hidden { display: none !important; }
footer { min-height: 69px; padding: 20px 24px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #555e6e; font-size: 11px; border-top: 1px solid rgba(255,255,255,.06); position: relative; z-index: 1; }
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #7a5a34; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; padding: 54px 0; } .hero { text-align: center; margin: auto; } .eyebrow,.hero-tags { justify-content: center; } .portal-card { min-height: 480px; } }
@media (max-width: 560px) { .topbar { padding: 0 16px; } .brand small { display: none; } .ghost-link { display: none; } .shell { width: min(100% - 28px,1240px); } .hero h1 { font-size: 43px; } .hero > p { font-size: 14px; } .center-view,.lobby-view { padding: 28px 22px; } .portal-card { min-height: 470px; } }