/* Showcase skin for the copy of the game that ships with the site.

   The main menu blurs what is behind it; nothing else in the game did.
   Every popup sat on a flat 75%-black wash and the pause screen had its
   blur explicitly switched back off further down the stylesheet, so the
   menus all looked like a different, older build than the screen you
   arrive on. These put the same treatment on all of them. */
.popup-overlay,
#pause-overlay,
#reeng-overlay,
#quit-overlay {
  background: rgba(12, 4, 10, .55) !important;
  backdrop-filter: blur(14px) saturate(.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.92) !important;
}

/* the boxes read as glass sitting on that blur rather than as opaque
   cards pasted over it */
.popup-box,
.pause-settings-box,
.reeng-box {
  background: linear-gradient(160deg, rgba(60, 20, 48, .82), rgba(26, 8, 22, .88)) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* controls: one height, one radius, one press. They were a mix of pill,
   rounded and square with three different paddings. */
.popup-box button,
#pause-overlay button {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .12s cubic-bezier(.2, 1, .4, 1), filter .12s;
}
.popup-box button:active,
#pause-overlay button:active { transform: translateY(2px) scale(.985); filter: brightness(1.08); }

.toggle { min-width: 54px; min-height: 30px; border-radius: 99px; font-weight: 800; }
.pause-setting-row input[type=range] { height: 22px; }

/* Menu rows were a thin white film over the painting: legible over the
   mine and gone over the sky. Enough ground under them to hold text at
   any point of the art. */
.setting-row,
.settings-wrap > *,
.quest-card,
.shop-item,
.ach-card {
  background: rgba(18, 8, 16, .55) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.setting-row label,
.setting-row span:not(.toggle) { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.top-bar { text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }

/* Five tiles left-aligned in a four-wide grid gives a ragged 4+1; centred
   they read as the whole set they are. */
/* the tiles sit in a grid whose tracks size the buttons; switching it to
   flex collapsed them, so only the tracks are centred */
#episode-level-grid { grid-template-columns: repeat(5, 1fr) !important;
  justify-content: center; align-content: start; max-width: 340px; }