.official-links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 20%, rgba(218, 167, 65, .13), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .16);
}

.official-links h2 { margin: 0 0 .7rem; color: #fff; font: 400 clamp(1.45rem, 2vw, 1.9rem) Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.official-links p { max-width: 560px; margin: 0; color: #aebdb6; font-size: .76rem; line-height: 1.75; }
.official-links nav { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; flex-wrap: wrap; }
.official-links a { font-weight: 700; text-underline-offset: 4px; }
.official-links nav > a:not(.official-badge):not(.official-social) { display: inline-flex; align-items: center; min-height: 42px; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: #e8eeeb; background: rgba(255, 255, 255, .045); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.official-links nav > a:not(.official-badge):not(.official-social):hover { border-color: rgba(224, 178, 79, .55); background: rgba(224, 178, 79, .1); transform: translateY(-1px); }
.official-links .official-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; text-decoration: none; }
.official-links .official-badge--play img { display: block; width: 162px; height: auto; }
.official-links .official-badge--youtube { width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.official-links .official-badge--youtube img { display: block; width: 40px; height: 40px; }
.official-links .official-badge:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.official-links .official-social { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #9fa8a4; background: rgba(255,255,255,.055); text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.official-links .official-social svg { width: 21px; height: 21px; fill: currentColor; }
.official-links .official-social:hover { color: #f3d27f; border-color: rgba(243,210,127,.42); background: rgba(243,210,127,.1); transform: translateY(-2px); }
.official-links .official-social:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.store-badge-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 48px; border-radius: 8px; text-decoration: none; }
.store-badge-link img { display: block; width: 176px; height: auto; }
.store-badge-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

@media (max-width: 800px) {
  .official-links { grid-template-columns: 1fr; gap: 1.5rem; border-radius: 17px; }
  .official-links nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .official-links nav > a:not(.official-badge):not(.official-social), .official-links .official-social { transition: none; }
}

@media (forced-colors: active) {
  .official-links { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .official-links h2, .official-links p, .official-links nav > a:not(.official-badge) { color: CanvasText; }
}