/* Games-first refinements layered over the original visual identity. */
.uploaded-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generic-game-art {
  display: grid;
  place-items: center;
  color: var(--turquoise);
  font-size: 90px;
}

.catalogue-description {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.game h3,
.soon h3 {
  overflow-wrap: anywhere;
}

.catalogue-notice {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
}

.coming-artwork {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.coming-copy {
  min-width: 0;
  flex: 1;
}

.catalogue-spacer {
  height: 50px;
}

.mobile-greeting,
.bottom-nav {
  display: none;
}

.home-page .hero {
  padding: 24px 0 16px;
}

.home-page .hero-grid {
  min-height: 270px;
}

.home-page .hero h1 {
  font-size: clamp(44px, 4.5vw, 62px);
  letter-spacing: -2.5px;
  margin: 12px 0;
}

.home-page .hero .lead {
  font-size: 14px;
  max-width: 450px;
  margin: 12px 0 20px;
}

.home-page .hero h1 br,
.home-page .hero-note {
  display: none;
}

.home-page .hero .art {
  height: 270px;
  margin: 0;
  transform: none;
}

.home-page .hero .board {
  top: 25px;
  left: 25%;
  transform: rotate(-20deg) skew(8deg, 5deg) scale(.65);
  transform-origin: top left;
}

.home-page .hero-card {
  top: 105px;
  right: 12%;
  scale: .7;
}

.home-page .hero-card.back {
  top: 75px;
  right: 22%;
}

.home-page .hero .dice {
  bottom: 30px;
  left: 25%;
  scale: .7;
}

.home-page .float-label {
  bottom: 5px;
}

#featured {
  padding-top: 26px;
  padding-bottom: 32px;
}

.game {
  min-width: 0;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

@media (min-width: 651px) {
  .game-visual {
    height: 200px;
  }

  .game-visual .board {
    top: 25px;
    scale: .8;
  }

  .card-fan {
    position: absolute;
    inset: -18px 0 0;
    scale: .85;
    transform-origin: center top;
  }

  .game-info {
    padding: 20px;
  }

  .game p {
    margin-bottom: 14px;
  }

  .game-bottom {
    padding-top: 12px;
  }
}

.game:focus-within {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 1px var(--turquoise);
}

.game-visual .board,
.card-fan {
  transition: translate .3s;
}

.game-bottom .button {
  min-height: 44px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .game:hover {
    box-shadow: 0 15px 40px #0004;
  }

  .game:hover .game-visual .board,
  .game:hover .card-fan {
    translate: 0 -6px;
  }
}

@media (max-width: 650px) {
  html {
    scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .nav {
    height: 64px;
    gap: 12px;
  }

  .nav .logo small {
    font-size: 6px;
    letter-spacing: 2.5px;
    margin-top: 6px;
  }

  .menu {
    min-height: 44px;
    cursor: pointer;
  }

  .links {
    top: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .home-page .hero,
  .home-page .marquee {
    display: none;
  }

  .mobile-greeting {
    display: block;
    padding-top: 16px;
  }

  .mobile-greeting h1 {
    font-size: 30px;
    letter-spacing: -1.2px;
    margin: 0 0 7px;
    line-height: 1.2;
  }

  .mobile-greeting h1 span {
    color: var(--orange);
  }

  .mobile-greeting p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
  }

  #featured,
  #available {
    padding-top: 12px;
    padding-bottom: 20px;
  }

  #featured .section-head {
    align-items: center;
    margin-bottom: 8px;
  }

  #featured .section-head .eyebrow,
  #featured .section-head p {
    display: none;
  }

  #featured .section-head h2 {
    font-size: 16px;
    letter-spacing: -.3px;
    margin: 0;
  }

  #featured .text-link {
    padding: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
  }

  .games-grid {
    gap: 14px;
  }

  .game {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    border-radius: 14px;
  }

  .game:hover {
    transform: none;
  }

  .game-visual {
    height: 100%;
    min-height: 150px;
  }

  .game-visual .badge,
  .game-visual .dice,
  .game-bottom > span,
  .game-info > p {
    display: none;
  }

  .game-visual .board {
    top: 26px;
    left: calc(50% - 57px);
    transform: rotate(-22deg) skew(8deg, 5deg) scale(.55);
    transform-origin: top left;
  }

  .card-fan {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 220px;
    scale: .53;
    transform-origin: center top;
  }

  .game-info {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .game-meta {
    font-size: 8px;
    letter-spacing: .6px;
  }

  .game h3 {
    font-size: clamp(17px, 4.6vw, 24px);
    margin: 5px 0 13px;
    letter-spacing: -.5px;
  }

  .game-bottom {
    padding: 0;
    border: 0;
  }

  .game-bottom .button {
    width: 100%;
    padding: 11px 12px;
    justify-content: space-between;
    font-size: 12px;
  }

  .games-page .page-hero {
    padding-top: 25px;
  }

  .games-page .page-hero h1 {
    font-size: 32px;
    letter-spacing: -1px;
    margin: 10px 0;
  }

  .games-page .page-hero h1 br,
  .games-page .page-hero .lead,
  .games-page #available .section-head {
    display: none;
  }

  section.content {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    background: #0c1428f5;
    backdrop-filter: blur(16px);
    border-top: 1px solid #ffffff20;
    box-shadow: 0 -8px 24px #0003;
  }

  .bottom-nav > a,
  .profile-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 8px;
    color: var(--muted);
    gap: 3px;
  }

  .bottom-nav a[aria-current="page"] {
    color: var(--orange);
    background: #ff84480c;
  }

  .bottom-icon {
    font-size: 24px;
    line-height: 1;
  }

  .profile-unavailable small {
    display: block;
    font-size: 9px;
    color: var(--turquoise);
    text-align: center;
    margin-top: 2px;
  }
}

@media (max-width: 350px) {
  .games-page .page-hero {
    padding-top: 16px;
  }

  .games-page .page-hero .eyebrow {
    display: none;
  }

  .games-page .page-hero h1 {
    font-size: 26px;
  }

  .game-visual {
    min-height: 132px;
  }

  .game-info {
    padding: 12px;
  }

  .game h3 {
    margin-bottom: 9px;
  }

  .game-visual .board {
    top: 12px;
  }

  .card-fan {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game,
  .game-visual .board,
  .card-fan {
    transition: none;
  }
}