* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #000;
  color: #ffe49e;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

a {
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
  border: 0;
}

.page-shell {
  position: relative;
  width: min(100vw, 720px);
  aspect-ratio: 720 / 1270;
  margin: 0 auto;
  overflow: hidden;
  background: #070302 url('../images/bg.jpg') center top / 100% 100% no-repeat;
}

/* 效果图中的光影已经合成在 bg.jpg 里，这里关闭旧版遮罩，避免页面被二次压暗。 */
.page-shell::before,
.coin-overlay {
  display: none;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  text-align: center;
}

.side-icon,
.download-btn-app,
.download-btn-ios,
.web-game-btn {
  position: absolute;
  z-index: 6;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform .18s ease, filter .18s ease;
}

.side-icon:hover,
.download-btn-app:hover,
.download-btn-ios:hover,
.web-game-btn:hover {
  transform: scale(1.025);
  filter: brightness(1.08);
}

/* 左上 Telegram：按 720x1270 效果图的坐标等比定位。 */
.side-icon.left-top {
  left: 1.67%;
  top: 1.97%;
  width: 11.11%;
}

/* 左侧 Facebook：和 Telegram 同宽，垂直位置对齐效果图。 */
.side-icon.left-bottom {
  left: 1.67%;
  top: 9.53%;
  width: 11.11%;
}

/* 右上客服按钮：按效果图右侧间距定位。 */
.side-icon.right-top {
  right: 2.92%;
  top: 2.05%;
  width: 11.11%;
}

/* 两个绿色下载按钮：保持原图 284x104 尺寸比例，移动到鲨鱼下方一排。 */
.download-btn-app {
  left: 6.11%;
  top: 77%;
  width: 39.44%;
}

.download-btn-ios {
  left: 54.58%;
  top: 77%;
  width: 39.44%;
}

/* 黄色 Web Game 按钮：居中放到下载按钮下一行。 */
.web-game-btn {
  left: 22%;
  top: 70%;
  width: 56%;
}

.web-game-btn img,
.download-btn-app img,
.download-btn-ios img,
.side-icon img {
  width: 100%;
  height: auto;
}

.chat-main {
  display: block;
  width: 64%;
  max-width: 503px;
  margin: 7.8% auto 0;
  transition: transform .18s ease, filter .18s ease;
}

.league-title {
  margin: 9.8% auto 4.3%;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: .02em;
  color: #ffe000;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(255, 180, 0, .25);
}

.game-grid {
  width: 85.7%;
  max-width: 674px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 16px;
}

.game-card {
  width: 100%;
  border-radius: 8px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65));
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .page-shell {
    width: 100vw;
  }

  .league-title {
    font-size: 4.58vw;
  }

  .game-grid {
    gap: 2vw 2vw;
  }

  .game-card {
    border-radius: 1vw;
  }
}