/* Final visual refinements layered after the archive-inspired theme. */
:root {
  --source-page: 1600px;
}

.page,
.topbar--authenticated + .page {
  padding-top: 24px;
  padding-bottom: 56px;
}

.page > .hero,
.topbar--authenticated + .page > .hero {
  height: clamp(282px, 16.3vw, 312px);
}

.slide,
.topbar--authenticated + .page .slide {
  padding-inline: 34px;
}

.slide__tag,
.topbar--authenticated + .page .slide__tag {
  margin-bottom: 52px;
}

.slide__title,
.topbar--authenticated + .page .slide__title {
  font-size: clamp(30px, 1.85vw, 34px);
}

.slide__sub,
.topbar--authenticated + .page .slide__sub {
  margin-bottom: 64px;
  font-size: 17px;
}

/* Fixed dimensions make every carousel indicator a true circle. */
.hero__dots,
.topbar--authenticated + .page .hero__dots {
  bottom: 14px;
  width: auto;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.hero__dots .dot,
.topbar--authenticated + .page .hero__dots .dot,
.hero__dots .dot.is-active,
.topbar--authenticated + .page .hero__dots .dot.is-active {
  display: block;
  box-sizing: border-box;
  flex: 0 0 8px;
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  padding: 0;
  border-radius: 50%;
}

.cats,
.topbar--authenticated + .page .cats {
  margin-top: 34px;
  margin-bottom: 24px;
}

.cat,
.topbar--authenticated + .page .cat {
  min-height: 86px;
}

.cat__label,
.topbar--authenticated + .page .cat__label {
  font-size: 16px;
}

#rows .row,
.topbar--authenticated + .page #rows .row {
  margin-top: 24px;
  padding: 24px 26px 18px;
}

#rows .row__head,
.topbar--authenticated + .page .row__head {
  margin-bottom: 18px;
}

#rows .row__title,
.topbar--authenticated + .page .row__title {
  font-size: 23px;
}

/* Keep wheel, touch and arrow scrolling; hide only the browser scrollbar. */
#rows .scroller,
.topbar--authenticated + .page .scroller {
  padding-bottom: 2px;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#rows .scroller::-webkit-scrollbar,
.topbar--authenticated + .page .scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Artwork can include its own corner marking. Keep our NEW label in the
   opposite corner so two labels can never sit on top of each other. */
.card__badge--new,
.topbar--authenticated + .page .card__badge--new {
  top: 5px;
  right: 5px;
  left: auto;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: 5;
}

.card__badge-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.card {
  position: relative;
}

/* The NEW marker is a sibling of the artwork, so it sits in the card corner
   rather than on top of text already printed in a source thumbnail. */
.card > .card__badge--new {
  position: absolute;
}

/* The Play affordance belongs to the artwork only. Hovering the title or the
   favourite control must not reveal it. */
.card__play {
  pointer-events: none;
}

.card:hover .card__play {
  opacity: 0;
}

.card__art:hover .card__play {
  opacity: 1;
  pointer-events: auto;
}

/* Keep the game title and the favourite control on exactly one baseline. */
.card__meta,
.topbar--authenticated + .page .card__meta {
  display: flex;
  min-width: 0;
  min-height: 22px;
  align-items: center;
  gap: 7px;
}

.card__meta .card__label,
.topbar--authenticated + .page .card__meta .card__label {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-top: 8px;
  padding-left: 2px;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.card__meta .card__favourite,
.topbar--authenticated + .page .card__meta .card__favourite {
  display: grid;
  width: 22px;
  height: 20px;
  flex: 0 0 22px;
  place-items: center;
  margin-left: -3px;
  margin-top: 8px;
  color: #d7ddff;
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 680px) {
  .card__meta .card__label,
  .topbar--authenticated + .page .card__meta .card__label {
    font-size: 14px;
    line-height: 17px;
  }

  .card__meta .card__favourite,
  .topbar--authenticated + .page .card__meta .card__favourite {
    height: 17px;
    margin-top: 8px;
    font-size: 19px;
  }
}

/* Stable CSS icons avoid font-dependent characters in password recovery. */
.auth-dialog--reset {
  width: min(calc(100vw - 32px), 440px);
  border-color: rgba(157, 181, 255, .42);
  border-radius: 14px;
  background: #111a59;
}

.auth-dialog--reset .auth-dialog__header {
  min-height: 58px;
  padding-inline: 20px 14px;
  background: #273675;
}

.auth-dialog--reset .auth-dialog__header h2 {
  font-size: 19px;
}

.auth-dialog--reset .auth-dialog__body {
  padding: 20px;
}

.auth-dialog--reset .auth-copy {
  margin: 0 0 16px;
  color: #d8e0ff;
  font-size: 13px;
  line-height: 1.45;
}

.auth-dialog--reset .auth-form {
  gap: 8px;
}

.auth-dialog--reset .auth-field {
  min-height: 50px;
  border-color: rgba(139, 164, 241, .64);
  border-radius: 9px;
  background: #1c2b70;
}

.auth-dialog--reset .auth-field input {
  height: 48px;
  font-size: 14px;
}

.auth-dialog--reset .auth-field__error {
  min-height: 0;
  margin: -4px 2px 0;
}

.auth-dialog--reset .auth-submit {
  min-height: 50px;
  margin-top: 4px;
  border-radius: 9px;
  font-size: 16px;
}

.auth-dialog--reset .auth-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #c5d0ff;
  font-size: 26px;
  line-height: 1;
}

.auth-dialog--reset .auth-close:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.auth-dialog--reset .auth-field__icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #b9c8ff;
  font-size: 0;
}

.auth-dialog--reset .auth-field__icon--identifier::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 1px;
  width: 16px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.auth-dialog--reset .auth-field__icon--identifier::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.auth-dialog--reset .auth-field__icon--code {
  border: 1.5px solid currentColor;
  border-radius: 5px;
  background:
    radial-gradient(circle, currentColor 1.25px, transparent 1.5px) 3px 3px / 6px 6px;
}

.auth-dialog--reset .auth-field__icon--password::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 10px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.auth-dialog--reset .auth-field__icon--password::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 8px;
  height: 9px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 680px) {
  .page,
  .topbar--authenticated + .page {
    padding-top: 18px;
  }

  .page > .hero,
  .topbar--authenticated + .page > .hero {
    height: 220px;
  }

  .slide__tag,
  .topbar--authenticated + .page .slide__tag {
    margin-bottom: 22px;
  }

  .slide__sub,
  .topbar--authenticated + .page .slide__sub {
    margin-bottom: 28px;
    font-size: 14px;
  }

  .cats,
  .topbar--authenticated + .page .cats {
    margin-top: 30px;
  }

  .cat,
  .topbar--authenticated + .page .cat {
    min-height: 74px;
  }

  #rows .row,
  .topbar--authenticated + .page #rows .row {
    padding: 18px 14px 14px;
  }

  .auth-dialog--reset {
    width: min(calc(100vw - 24px), 440px);
  }

  .auth-dialog--reset .auth-dialog__body {
    padding: 16px;
  }
}