:root {
  --bg: #010510;
  --lime: #dbff26;
  --panel: #1f2939;
  --panel-active: #404c5d;
  --panel-border: rgba(255, 255, 255, .15);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 104px 104px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,.68), transparent 78%);
}
main { position: relative; z-index: 1; }
.stage {
  position: relative;
  margin: 0 auto;
  background: #010510;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 104px 104px;
  opacity: .55;
}
.stage--desktop {
  width: min(100vw, 1920px);
  aspect-ratio: 1920 / 3570;
}
.stage--mobile { display: none; }
.asset {
  position: absolute;
  display: block;
  z-index: 1;
}
.asset > img,
.asset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
a.asset {
  border-radius: 999px;
  transition: transform .16s ease, filter .16s ease;
}
a.asset:hover { transform: translateY(-2px); filter: drop-shadow(0 0 16px rgba(219,255,38,.25)); }
a.asset:focus-visible,
.game-tab:focus-visible {
  outline: 3px solid rgba(219,255,38,.95);
  outline-offset: 4px;
}
.mobile-game-toggle { display: none; }
.mobile-game-card { display: none; }

@media (max-width: 767px) {
  body::before { background-size: 44px 44px; opacity: .35; }
  .stage::before { background-size: 44px 44px; opacity: .40; }
  .stage--desktop { display: none; }
  .stage--mobile {
    display: block;
    width: min(100vw, 390px);
    aspect-ratio: 390 / 5275;
  }
  .mobile-game-toggle {
    position: absolute;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: #1f2939;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 28px rgba(0,0,0,.26);
  }
  .game-tab {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(2.3vw, 9px);
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: min(4.9vw, 19px);
    line-height: 1;
    padding: 0;
    min-width: 0;
    transition: background .18s ease, transform .18s ease, filter .18s ease;
  }
  .game-tab.is-active {
    background: var(--panel-active);
  }
  .game-tab:hover { transform: translateY(-1px); }
  .cs-icon {
    width: min(6.5vw, 25px);
    height: min(6.5vw, 25px);
    flex: 0 0 auto;
    border-radius: 2px;
    background:
      linear-gradient(135deg, #ffc233 0 36%, #1d3d90 36% 100%);
    position: relative;
    overflow: hidden;
  }
  .cs-icon::before {
    content: "";
    position: absolute;
    left: 42%;
    top: 10%;
    width: 34%;
    height: 76%;
    background: white;
    border-radius: 6px 6px 3px 3px;
    transform: translateX(-50%) skewX(-12deg) rotate(8deg);
    box-shadow: min(1.4vw, 5px) min(1.8vw, 7px) 0 min(-.9vw, -3px) white;
  }
  .dota-icon {
    width: min(6.5vw, 25px);
    height: min(6.5vw, 25px);
    object-fit: contain;
    flex: 0 0 auto;
  }
  .mobile-game-card {
    display: block;
    z-index: 2;
    border-radius: 15px;
    overflow: hidden;
    background: #1f2939;
  }
  #mobile-game-card {
    opacity: 1;
    transition: opacity .14s ease, transform .14s ease;
  }
  #mobile-game-card.is-switching {
    opacity: 0;
    transform: translateY(4px);
  }
}