/* фон: лента на ширину экрана сверху, а не на всю высоту длинной страницы */
body { background-size: max(100%, 1500px) auto; background-position: center top; }

/* замены картинкам, которых не было в архиве */
.player-icon { font-size: 30px; color: var(--text-color); line-height: 1; }
.down .repeat.player-icon, .down .sc.player-icon { font-size: 24px; color: #aaa; }
.tile { display: inline-grid; place-items: center; width: 86px; height: 86px; border-radius: 14px; font-size: 40px; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 60%), var(--tile); flex: none; }
.highlight.status.xray .tile { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
.other-statuses .images img { aspect-ratio: 1; object-fit: cover; }

/* островок как в игре: полупрозрачная тёмная капсула, логотип и название, тонкая светлая кромка */
.game-island { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; border-radius: 999px;
  font-size: 17px; font-weight: 600; color: #fff; line-height: 1;
  background: rgba(16, 16, 18, 0.72); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5); }
.game-island img { width: 20px; height: 20px; object-fit: contain; }

/* секция «Лучший клиент» */
.showcase { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; padding: 120px 0 170px; color: var(--text-color); }
.showcase-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.showcase-text .highlight { font-size: 16px; padding: 6px 16px 6px 6px; }
.showcase-text h1 { font-size: 56px; font-weight: 500; letter-spacing: -1px; line-height: 1.1;
  background-image: linear-gradient(to bottom, #fff 50%, #979797); -webkit-background-clip: text; color: transparent; }
.showcase-text p { font-size: 18px; line-height: 1.5; color: var(--text-desc); }
.showcase-stats { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.showcase-stats div { padding: 16px 20px; border-radius: 22px; background: rgba(20, 20, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px); }
.showcase-stats b { display: block; font-size: 30px; font-weight: 500; }
.showcase-stats span { font-size: 13px; color: var(--text-desc); }
.show-stack { position: relative; aspect-ratio: 16 / 11; perspective: 1400px; }
.show-card { position: absolute; left: 6%; top: 10%; width: 82%; margin: 0; padding: 7px; border-radius: 26px; cursor: pointer;
  background: rgba(20, 20, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s, filter 0.9s; }
.show-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.show-card figcaption { position: absolute; left: 22px; bottom: 20px; padding: 6px 14px; border-radius: 999px; font-size: 14px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px); color: #fff; }
.show-card[data-pos="0"] { z-index: 3; transform: translate3d(0, 0, 0) rotateY(-8deg); }
.show-card[data-pos="1"] { z-index: 2; transform: translate3d(14%, -12%, -120px) rotateY(-14deg) scale(0.9); filter: brightness(0.55); }
.show-card[data-pos="2"] { z-index: 1; transform: translate3d(26%, -22%, -240px) rotateY(-18deg) scale(0.8); filter: brightness(0.3); opacity: 0.8; }
.show-card[data-pos="0"]:hover { transform: translate3d(0, -6px, 20px) rotateY(-4deg); }
@media (max-width: 1000px) { .showcase { grid-template-columns: 1fr; } .showcase-text h1 { font-size: 40px; } }