:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #15171a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #f3f1ec;
  background:
    radial-gradient(circle at 8% 5%, rgba(216, 108, 61, 0.2), transparent 25rem),
    radial-gradient(circle at 90% 25%, rgba(127, 171, 115, 0.15), transparent 26rem),
    #15171a;
}

a { color: inherit; }

.links-page {
  width: min(1200px, 92vw);
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 0 34px;
}

.links-header,
.links-header__brand,
.links-header__back,
.link-card__top,
.link-card__qr,
.link-card__url { display: flex; }

.links-header {
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.links-header__brand img { display: block; width: clamp(132px, 15vw, 178px); height: auto; }

.links-header__back,
.link-card__url {
  align-items: center;
  gap: 8px;
  color: #f3f1ec;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.links-header__back { padding: 9px 13px; border: 1px solid rgba(243, 241, 236, 0.25); border-radius: 999px; }
.links-header__back:hover, .links-header__back:focus-visible { border-color: #f3f1ec; background: rgba(243, 241, 236, 0.08); }

.links-hero { max-width: 680px; padding: clamp(62px, 9vw, 110px) 0 clamp(34px, 5vw, 62px); }
.links-kicker { margin: 0 0 12px; color: #d86c3d; font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(46px, 7vw, 88px); line-height: .94; letter-spacing: -.055em; }
.links-hero > p:last-child { max-width: 43ch; margin-bottom: 0; color: #b8b2a8; font-size: clamp(17px, 2vw, 21px); }

.links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.link-card {
  display: flex;
  min-width: 0;
  min-height: 510px;
  flex-direction: column;
  padding: clamp(20px, 2.3vw, 30px);
  border: 1px solid rgba(243, 241, 236, 0.13);
  border-radius: 22px;
  background: rgba(35, 38, 43, 0.9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.link-card--games { background: linear-gradient(160deg, rgba(151, 103, 30, 0.96), rgba(66, 45, 20, 0.98)); }
.link-card--golden-nail { background: linear-gradient(160deg, rgba(83, 58, 24, 0.96), rgba(35, 38, 43, 0.98)); }

.link-card__top {
  min-height: 112px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: rgba(10, 12, 14, 0.34);
  text-decoration: none;
}

.link-card__pbp-logo { width: min(75%, 230px); height: auto; }
.link-card__games-logo { width: min(90%, 280px); height: auto; }
.link-card__nail-logo { width: min(95%, 270px); max-height: 110px; object-fit: contain; }

.link-card__qr {
  width: 164px;
  height: 164px;
  align-items: center;
  justify-content: center;
  margin: 30px auto 24px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.24);
}

.link-card__qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
h2 { margin-bottom: 8px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.05; letter-spacing: -.025em; }
.link-card p { margin-bottom: 18px; color: rgba(243, 241, 236, 0.72); font-size: 15px; line-height: 1.48; }
.link-card__url { margin-top: auto; color: #f3f1ec; overflow-wrap: anywhere; }
.link-card__url span { color: #d86c3d; font-size: 19px; }
.link-card__top:hover, .link-card__top:focus-visible, .link-card__qr:hover, .link-card__qr:focus-visible { outline: 3px solid rgba(243, 241, 236, 0.78); outline-offset: 3px; }

.links-footer { padding-top: 32px; color: #807b73; font-size: 13px; text-align: center; }

@media (max-width: 790px) {
  .links-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .link-card { min-height: auto; }
  .link-card__qr { margin-top: 24px; }
}

@media (max-width: 440px) {
  .links-page { width: min(100% - 32px, 1200px); }
  h1 { font-size: 46px; }
  .links-header__back { font-size: 13px; }
}