body.theme-dark {
  background:#080b11;
  color:#f5f6f7;
  overflow-x:hidden;
}
.theme-dark .appbar {
  background:rgba(8,11,17,.9);
  color:#f5f6f7;
}
.theme-dark .tabs button { color:#7f8b99; }
.theme-dark .tabs button.active { color:#f5f6f7; }
.theme-dark .search.is-open { background:#18202b; }
.theme-dark .search input { color:#fff; }
.theme-dark .search input::placeholder { color:#7e8996; }
.theme-dark .view-head p,.theme-dark .section-title p { color:#a3adba; }
.theme-dark .view-head p strong { color:#fff; }
.theme-dark .friend-picker,.theme-dark .panel:not(.dark) { background:#101620; color:#f5f6f7; }
.theme-dark .friend-item { background:#19222e; }
.theme-dark .friend-item.is-pinned { background:#17334a; }
.theme-dark .friend-copy span,.theme-dark .panel>p,.theme-dark .rank-key { color:#9ba7b5; }
.theme-dark .pin { background:#2a3441; color:#f5f6f7; }
.theme-dark .pin.active { background:#f5f6f7; color:#111318; }
.theme-dark .act-picker { background:#151c26; }
.theme-dark .act-picker button { color:#9aa5b2; }
.theme-dark .act-picker button.active { background:#f5f6f7; color:#111318; }
.theme-dark .act-picker select { background:#242d39; color:#fff; }
.theme-dark .rank-track { background:#27313e; }
.theme-dark .site-footer { color:#7f8b99; }
.theme-dark .shell,.theme-dark .site-footer { position:relative; z-index:2; }

.game-backdrop {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.game-backdrop::before {
  content:"";
  position:absolute;
  inset:-18%;
  background-image:linear-gradient(rgba(91,151,191,.105) 1px,transparent 1px),linear-gradient(90deg,rgba(91,151,191,.105) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(800px) rotateX(54deg) translateY(-10%);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18) 72%,transparent);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18) 72%,transparent);
}
.game-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 50% 12%,rgba(47,96,130,.18),transparent 42%);
}
.map-coordinate {
  position:absolute;
  color:rgba(126,183,220,.24);
  font:700 .68rem Manrope,sans-serif;
  letter-spacing:.16em;
}
.coordinate-a { top:22%; left:7%; }
.coordinate-b { top:54%; right:8%; }
.coordinate-c { bottom:12%; left:18%; }

.theme-arena .game-backdrop::before { opacity:.72; }
.theme-arena .game-backdrop::after { background:none; }
.theme-arena .tabs button::after { background:#ff4655; }
.theme-arena .profile-chip { background:#27313d; }
.theme-arena .fighter.you,.theme-arena .fighter.rival { background:#151b24; }
.theme-arena .fighter.you .identity span,.theme-arena .fighter.rival .identity span { color:#a7b2bf; }
.theme-arena .scoreline .you-score,.theme-arena .scoreline .rival-score { color:#f5f6f7; }
.theme-arena .metric-table { gap:2px; padding:2px; }
.theme-arena .metric-row { min-height:58px; grid-template-columns:minmax(0,1fr) minmax(160px,210px) minmax(0,1fr); gap:2px; }
.theme-arena .metric-value { padding:9px 22px; font-size:1.5rem; }
.theme-arena .metric-name { padding:7px 10px; }
.theme-arena .metric-name span { font-size:.6rem; }
.theme-arena .metric-name strong { font-size:.78rem; }
.theme-arena .metric-value.won.you-win,.theme-arena .metric-value.won.rival-win { color:#f5f6f7; background:var(--stage-2); }
.theme-arena .metric-value.won.you-win::after,.theme-arena .metric-value.won.rival-win::after {
  margin-left:10px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#45ff8f;
  font-size:.96rem;
  font-weight:900;
  line-height:1;
}
.theme-arena .score-note { padding:12px 20px; }
.theme-arena .score-note .blue,.theme-arena .score-note .red { color:#a4aeba; }
.theme-arena .friend-item.is-pinned { background:#352027; }
.theme-arena .player-summary { background:#151b24; }
.theme-arena .player-badge { background:#ff4655; color:#fff; }
.theme-arena .player-summary h2 span { color:#ff5a67; }
.theme-arena .stat-card small.up { color:#45ff8f; }
.theme-arena .stat-card small.down { color:#ff6675; }
.theme-arena .stat-card small.neutral { color:#8d99a7; }
.theme-arena .rank-track i,.theme-arena .rank-key i { background:#ff4655; }
.theme-arena .rank-track em,.theme-arena .rank-key span:last-child i { background:#dfc379; }
.light-field { position:absolute; width:48vw; height:80vh; top:0; opacity:.24; filter:blur(90px); }
.blue-field { left:-18vw; background:#7d3039; }
.red-field { right:-18vw; background:#4b535f; }
.shard { position:absolute; display:block; width:26vw; height:38vh; opacity:.09; background:#97cfff; clip-path:polygon(48% 0,100% 16%,72% 100%,0 74%,16% 23%); }
.shard-a { left:4%; top:18%; transform:rotate(18deg); }
.shard-b { right:5%; top:62%; width:22vw; height:32vh; background:#9a3844; transform:rotate(-24deg); }
.shard-c { left:37%; top:112%; width:18vw; height:28vh; background:#ff6b76; transform:rotate(44deg); }
.scanner { position:absolute; left:0; right:0; top:0; height:2px; background:rgba(255,70,85,.48); opacity:.65; }
.scroll-progress { position:fixed; right:10px; top:18vh; width:3px; height:64vh; border-radius:4px; background:#ff4655; transform:scaleY(0); transform-origin:top; }

@supports (animation-timeline:scroll()) {
  .game-backdrop::before { animation:grid-travel linear both; animation-timeline:scroll(root); }
  .theme-grid .map-coordinate { animation:coordinate-drift linear both; animation-timeline:scroll(root); }
  .theme-arena .shard-a { animation:shard-a-travel linear both; animation-timeline:scroll(root); }
  .theme-arena .shard-b { animation:shard-b-travel linear both; animation-timeline:scroll(root); }
  .theme-arena .shard-c { animation:shard-c-travel linear both; animation-timeline:scroll(root); }
  .theme-arena .scanner { animation:scanner-travel linear both; animation-timeline:scroll(root); }
  .theme-arena .scroll-progress { animation:progress-fill linear both; animation-timeline:scroll(root); }
}

.theme-arena .glitch-hit { animation:rival-glitch 380ms steps(2,end); }
@keyframes grid-travel { from { transform:perspective(800px) rotateX(54deg) translateY(-10%); } to { transform:perspective(800px) rotateX(54deg) translateY(-25%); } }
@keyframes coordinate-drift { from { transform:translateY(0); } to { transform:translateY(-110px); } }
@keyframes shard-a-travel { from { transform:translateY(22vh) rotate(18deg); } to { transform:translateY(-52vh) rotate(58deg); } }
@keyframes shard-b-travel { from { transform:translateY(24vh) rotate(-24deg); } to { transform:translateY(-72vh) rotate(-58deg); } }
@keyframes shard-c-travel { from { transform:translateY(20vh) rotate(44deg); } to { transform:translateY(-96vh) rotate(92deg); } }
@keyframes scanner-travel { from { transform:translateY(-10vh); opacity:0; } 10%,88% { opacity:.65; } to { transform:translateY(105vh); opacity:0; } }
@keyframes progress-fill { to { transform:scaleY(1); } }
@keyframes rival-glitch { 0%,100% { transform:none; filter:none; } 25% { transform:translateX(3px); filter:saturate(1.5); } 50% { transform:translateX(-4px); } 75% { transform:translateX(2px); } }

@media (max-width:700px) {
  .game-backdrop::before { background-size:46px 46px; }
  .map-coordinate { display:none; }
  .scroll-progress { right:4px; }
  .shard { width:52vw; }
  .theme-arena .metric-row { min-height:54px; grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr); }
  .theme-arena .metric-value { padding:8px 10px; font-size:1.12rem; }
  .theme-arena .metric-name { padding:6px 4px; }
  .theme-arena .metric-name span { font-size:.52rem; }
  .theme-arena .metric-name strong { font-size:.64rem; }
  .theme-arena .metric-value.won.you-win::after,.theme-arena .metric-value.won.rival-win::after {
    margin-left:7px;
    padding:0;
    font-size:.82rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .game-backdrop::before,.map-coordinate,.shard,.scanner,.scroll-progress,.glitch-hit { animation:none!important; }
  .scroll-progress { display:none; }
}