/* ==========================================================
   THE QUIZ AND THE DEAD — v0.2
   Code: Dolly Rotten & Ada M. Rook
   ========================================================== */

:root {
  --paper: #ead9bd;
  --ink: #17171b;
  --blue-ink: #141d62;
  --red-ink: #ae1721;
  --outside: #17130f;

  --sheet-max: 1400px;
  --body-max: 1080px;

  --fancy-font: "fredericka-the-greatest", "Bradley Hand", "Segoe Print", cursive;
  --body-font: "nimbus-sans", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--outside);
  color: var(--ink);
  font-family: var(--body-font);
}

a { color: inherit; }

/* Transparent shell = ragged transparent top of header.png shows the dark page behind it. */
.site-shell {
  position: relative;
  width: min(96vw, var(--sheet-max));
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 34px rgba(0,0,0,.35);
}

.site-header {
  position: relative;
  z-index: 2;
  line-height: 0;
  background: transparent;
}

.header-art {
  display: block;
  width: 100%;
  height: auto;
}

.login-link {
  position: absolute;
  top: 10%;
  right: 3.2%;
  z-index: 3;
  color: var(--red-ink);
  transform: rotate(1.5deg);
}

/* Paper texture begins below the header artwork. */
.paper-body {
  position: relative;
  z-index: 1;
  margin-top: -2px; /* avoids a hairline seam */
  min-height: 100vh;
  background-color: var(--paper);
  background-image: url("../images/bgrd.png");
  background-repeat: repeat;
  background-position: top left;
}

.fancy-link {
  font-family: var(--fancy-font);
  font-size: clamp(1.55rem, 2.2vw, 2.65rem);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  letter-spacing: .01em;
}

.main-nav {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
  padding: .45rem 5.2% 1.35rem;
  color: var(--blue-ink);
  background: transparent;
}

.main-nav a:nth-child(1) { justify-self: start; transform: rotate(-2deg); }
.main-nav a:nth-child(2) { justify-self: center; transform: rotate(1deg); }
.main-nav a:nth-child(3) { justify-self: end; transform: rotate(-1deg); }

.main-nav a,
.login-link {
  transition: color .16s ease, text-decoration-color .16s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.login-link:hover,
.login-link:focus-visible {
  color: var(--red-ink);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}

.new-link { color: var(--blue-ink); }

.page-body a:not(.fancy-link),
.site-footer a {
  color: var(--red-ink);
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
  transition: color .16s ease;
}

.page-body a:not(.fancy-link):hover,
.page-body a:not(.fancy-link):focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--blue-ink);
}

.page-body {
  position: relative;
  z-index: 1;
  min-height: 1050px;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.1rem, 5vw, 5rem) 6rem;
}

.ring-stain {
  position: absolute;
  z-index: 0;
  width: clamp(300px, 42vw, 610px);
  height: auto;
  right: -9%;
  top: 25%;
  opacity: .22;
  pointer-events: none;
  user-select: none;
  transform: rotate(8deg);
}

.content-card {
  position: relative;
  z-index: 1;
  width: min(100%, var(--body-max));
  margin: 0 auto 4.5rem;
}

.content-card h1,
.content-card h2 {
  margin: 0 0 .55rem;
  color: var(--blue-ink);
  font-family: var(--fancy-font);
  font-weight: 400;
  line-height: 1.04;
}

.content-card h1 { font-size: clamp(2.4rem, 5vw, 5.2rem); }
.content-card h2 { font-size: clamp(2rem, 4vw, 4rem); }

.content-card p {
  max-width: 75ch;
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.65;
}

.eyebrow {
  margin-bottom: .35rem !important;
  color: var(--red-ink);
  font-family: var(--fancy-font);
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
}

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 5%;
  border-top: 1px solid rgba(20,29,98,.35);
  color: rgba(20,29,98,.7);
  font-size: .82rem;
}

.credit { text-align: right; }

@media (max-width: 820px) {
  .site-shell { width: 100%; box-shadow: none; }
  .main-nav { padding-inline: 4%; }
  .fancy-link { font-size: clamp(1.25rem, 4.5vw, 2rem); }
  .ring-stain { width: 430px; right: -24%; opacity: .16; }
}

@media (max-width: 560px) {
  .login-link {
    top: 6%;
    right: 3%;
    font-size: clamp(.95rem, 4vw, 1.35rem);
  }

  .main-nav {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .9rem 1.2rem 1.5rem;
  }

  .main-nav a:nth-child(n) { justify-self: start; }
  .main-nav a:nth-child(2) { margin-left: 16%; }
  .main-nav a:nth-child(3) { margin-left: 34%; }

  .fancy-link { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .page-body { padding: 2.2rem 1.1rem 4rem; }

  .ring-stain {
    width: 300px;
    right: -38%;
    top: 30%;
    opacity: .12;
  }

  .site-footer { display: block; }
  .credit { margin-top: .35rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* ==========================================================
   QUESTION ARCHIVE
   Code: Dolly Rotten & Ada M. Rook
   ========================================================== */

.questions-page {
  width: 100%;
}


/* ==========================================================
   INTRO
   ========================================================== */

.questions-intro {
  position: relative;
  z-index: 1;

  width: min(100%, var(--body-max));
  margin: 0 auto 2.2rem;
}

.questions-intro h1 {
  margin: 0 0 .5rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: .95;
}

.questions-intro p {
  max-width: 65ch;
  margin: 0 0 1rem;

  font-size: 1.1rem;
  line-height: 1.55;
}


/* ==========================================================
   SEARCH FORM
   ========================================================== */

.question-search {
  position: relative;
  z-index: 2;

  width: min(100%, var(--body-max));
  margin: 0 auto 1.5rem;
  padding: 1.2rem 0 1.5rem;

  border-top: 2px solid rgba(20, 29, 98, .7);
  border-bottom: 1px solid rgba(20, 29, 98, .45);
}

.question-search label {
  display: block;
  margin-bottom: .3rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: 1.45rem;
  line-height: 1.1;
}

.question-search input,
.question-search select {
  width: 100%;
  min-height: 44px;

  border: 1px solid rgba(23, 23, 27, .5);
  border-radius: 0;

  padding: .65rem .75rem;

  background: rgba(255, 255, 255, .18);
  color: var(--ink);

  font-family: var(--body-font);
  font-size: 1rem;
}

.question-search input:focus,
.question-search select:focus {
  outline: 2px solid var(--red-ink);
  outline-offset: 2px;
}

.search-main input {
  font-size: 1.08rem;
}

.search-filters {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr auto;
  gap: 1rem;
  align-items: end;

  margin-top: 1rem;
}

.filter-field {
  min-width: 0;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: .8rem;

  min-height: 44px;
}


/* ==========================================================
   SEARCH BUTTON
   ========================================================== */

.paper-button {
  min-height: 44px;

  border: 0;
  padding: .45rem 1rem;

  background: transparent;
  color: var(--red-ink);

  cursor: pointer;

  font-family: var(--fancy-font);
  font-size: 1.65rem;

  transform: rotate(-1deg);
}

.paper-button:hover,
.paper-button:focus-visible {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}

.clear-search {
  font-size: .92rem;
}


/* ==========================================================
   VIEW SWITCH
   ========================================================== */

.view-switch {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;

  gap: .4rem;

  width: min(100%, var(--body-max));
  margin: 0 auto .65rem;

  color: rgba(23, 23, 27, .58);

  font-family: var(--fancy-font);
  font-size: 1.3rem;
}

.view-label {
  margin-right: .15rem;
}

.view-switch a {
  color: var(--blue-ink);
  text-decoration: none;
}

.view-switch a:hover,
.view-switch a:focus-visible {
  color: var(--red-ink);
  text-decoration: underline;
}

.view-switch a.active {
  color: var(--red-ink);

  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}


/* ==========================================================
   RESULT SUMMARY
   ========================================================== */

.result-summary {
  position: relative;
  z-index: 1;

  width: min(100%, var(--body-max));
  margin: 0 auto 1.6rem;

  color: rgba(23, 23, 27, .7);

  font-size: .9rem;
}

.result-note {
  margin-left: .25rem;
  font-style: italic;
}

.result-limit {
  margin-left: .5rem;
}


/* ==========================================================
   RESULTS WRAPPER
   ========================================================== */

.question-results {
  position: relative;
  z-index: 1;

  width: min(100%, var(--body-max));
  margin: 0 auto;
}


/* ==========================================================
   CARD VIEW
   ========================================================== */

.question-item {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;

  padding: 1.8rem 0 2rem;

  border-top: 1px solid rgba(20, 29, 98, .38);
}

.question-item:last-child {
  border-bottom: 1px solid rgba(20, 29, 98, .38);
}


/* ---------- Metadata ---------- */

.question-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: .45rem .75rem;
}

.category-label {
  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.35rem;
  line-height: 1;
}

.question-flag {
  display: inline-block;

  border: 1px solid rgba(20, 29, 98, .45);

  padding: .14rem .4rem;

  color: var(--blue-ink);

  font-family: var(--body-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}

.buzzer-flag {
  transform: rotate(-1deg);
}

.review-flag {
  color: var(--red-ink);
  border-color: rgba(174, 23, 33, .45);
}


/* ---------- Main question image ---------- */

.question-image {
  max-width: 620px;
}

.question-image img {
  display: block;

  width: 100%;
  max-height: 520px;

  object-fit: contain;

  border: 8px solid rgba(255, 255, 255, .45);

  box-shadow:
    1px 2px 2px rgba(0, 0, 0, .08),
    4px 6px 12px rgba(0, 0, 0, .09);

  transform: rotate(-.35deg);
}


/* ---------- Question copy ---------- */

.question-copy {
  max-width: 850px;
}

.question-text {
  margin: 0 0 1rem;

  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.45;
}


/* ---------- Answer reveal ---------- */

.answer-reveal {
  margin: .4rem 0 .8rem;
}

.answer-reveal summary {
  width: fit-content;

  color: var(--blue-ink);

  cursor: pointer;

  font-family: var(--fancy-font);
  font-size: 1.5rem;
  line-height: 1.1;
}

.answer-reveal summary:hover,
.answer-reveal summary:focus-visible {
  color: var(--red-ink);
}

.answer-content {
  margin-top: .65rem;
  padding-left: 1rem;

  border-left: 3px solid rgba(174, 23, 33, .55);
}

.answer-text {
  margin: 0;

  color: var(--red-ink);

  font-size: 1.15rem;
  font-weight: 700;
}

.supplementary-info {
  max-width: 70ch;
  margin: .7rem 0 0;

  font-size: .94rem;
  line-height: 1.55;
}


/* ---------- Tags ---------- */

.question-tags {
  max-width: 80ch;
  margin: .8rem 0 0;

  color: rgba(23, 23, 27, .58);

  font-size: .8rem;
  line-height: 1.45;
}


/* ==========================================================
   TABLE VIEW
   ========================================================== */

.question-table-wrap {
  width: 100%;

  overflow-x: auto;

  border-top: 2px solid rgba(20, 29, 98, .55);
  border-bottom: 2px solid rgba(20, 29, 98, .4);
}

.question-table {
  width: 100%;

  border-collapse: collapse;

  font-size: .92rem;
}

.question-table th,
.question-table td {
  padding: .7rem .65rem;

  border-bottom: 1px solid rgba(20, 29, 98, .25);

  text-align: left;
  vertical-align: top;
}

.question-table th {
  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: 1.25rem;
  font-weight: 400;

  white-space: nowrap;
}

.question-table tbody tr:hover {
  background: rgba(255, 255, 255, .13);
}


/* ---------- Table thumbnails ---------- */

.thumb-column {
  width: 95px;
}

.question-thumb-cell {
  width: 95px;
}

.question-thumb {
  display: block;

  width: 72px;
  height: 72px;

  object-fit: cover;

  border: 4px solid rgba(255, 255, 255, .48);

  box-shadow:
    1px 2px 2px rgba(0, 0, 0, .07),
    2px 3px 7px rgba(0, 0, 0, .08);

  transform: rotate(-1deg);
}

.no-thumb {
  display: block;

  width: 72px;

  color: rgba(23, 23, 27, .3);

  font-size: 1.5rem;
  text-align: center;
}


/* ---------- Table content ---------- */

.table-question {
  min-width: 260px;
  max-width: 540px;

  line-height: 1.4;
}

.table-answer {
  min-width: 160px;

  color: var(--red-ink);

  font-weight: 700;
  line-height: 1.4;
}

.table-category {
  min-width: 120px;
}

.flags-column {
  width: 120px;
}

.table-flags {
  min-width: 100px;
}

.table-flags .question-flag {
  display: block;

  width: fit-content;
  margin-bottom: .25rem;
}

.table-extra {
  margin-top: .45rem;

  color: rgba(23, 23, 27, .65);

  font-size: .82rem;
}

.table-extra summary {
  width: fit-content;

  color: var(--blue-ink);

  cursor: pointer;
}

.table-extra div {
  margin-top: .35rem;
  line-height: 1.45;
}


/* ==========================================================
   GALLERY VIEW
   ========================================================== */

.question-gallery {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(210px, 1fr));

  gap: clamp(1.5rem, 2.5vw, 2.5rem);

  align-items: start;
}

.gallery-item {
  min-width: 0;
}


/* ---------- Gallery picture ---------- */

.gallery-image-wrap {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  padding: 7px;

  overflow: hidden;

  background: rgba(255, 255, 255, .42);

  box-shadow:
    1px 2px 3px rgba(0, 0, 0, .08),
    4px 6px 13px rgba(0, 0, 0, .10);

  transform: rotate(-.45deg);
}

.gallery-item:nth-child(3n + 2) .gallery-image-wrap {
  transform: rotate(.6deg);
}

.gallery-item:nth-child(3n + 3) .gallery-image-wrap {
  transform: rotate(-.9deg);
}

.gallery-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ---------- Gallery text ---------- */

.gallery-copy {
  padding: .75rem .25rem 0;
}

.gallery-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: .35rem .45rem;

  margin-bottom: .45rem;
}

.gallery-meta .category-label {
  font-size: 1.1rem;
}

.gallery-meta .question-flag {
  font-size: .58rem;
}

.gallery-question {
  margin: 0 0 .55rem;

  font-size: .96rem;
  font-weight: 600;
  line-height: 1.4;
}


/* ---------- Gallery answer ---------- */

.gallery-answer {
  margin-top: .3rem;
}

.gallery-answer summary {
  width: fit-content;

  color: var(--blue-ink);

  cursor: pointer;

  font-family: var(--fancy-font);
  font-size: 1.25rem;
  line-height: 1.1;
}

.gallery-answer summary:hover,
.gallery-answer summary:focus-visible {
  color: var(--red-ink);
}

.gallery-answer-copy {
  margin-top: .45rem;
  padding-left: .7rem;

  border-left: 2px solid rgba(174, 23, 33, .5);

  color: var(--red-ink);

  font-size: .91rem;
  line-height: 1.4;
}

.gallery-answer-copy p {
  margin: .45rem 0 0;

  color: var(--ink);

  font-size: .82rem;
  font-weight: 400;
}


/* ==========================================================
   NO RESULTS
   ========================================================== */

.no-results {
  padding: 3rem 0;
}

.no-results h2 {
  margin: 0 0 .5rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: 2.5rem;
  font-weight: 400;
}

.no-results p {
  margin: 0;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

  .search-filters {
    grid-template-columns: 1fr 1fr;
  }

  .filter-actions {
    align-self: end;
  }

  .question-gallery {
    grid-template-columns:
      repeat(auto-fill, minmax(180px, 1fr));
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .view-switch {
    justify-content: flex-start;
  }

  .question-table {
    min-width: 760px;
  }

}


@media (max-width: 600px) {

  .search-filters {
    grid-template-columns: 1fr;
  }

  .question-search input,
  .question-search select {
    font-size: 16px;
  }

  .filter-actions {
    justify-content: space-between;
  }

  .question-item {
    padding: 1.4rem 0 1.7rem;
  }

  .question-image {
    width: 100%;
  }

  .question-image img {
    max-height: 420px;
    border-width: 5px;
  }

  .question-gallery {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 1.3rem .9rem;
  }

  .gallery-image-wrap {
    padding: 5px;
  }

  .gallery-question {
    font-size: .86rem;
  }

  .gallery-meta .category-label {
    font-size: 1rem;
  }

}


@media (max-width: 390px) {

  .question-gallery {
    grid-template-columns: 1fr;
  }

}
/* ==========================================================
   TABLE ANSWER TOGGLE
   ========================================================== */

.table-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin: 0 0 .55rem;
}

.table-answer-toggle {
  border: 0;
  padding: .25rem .45rem;

  background: transparent;
  color: var(--blue-ink);

  cursor: pointer;

  font-family: var(--fancy-font);
  font-size: 1.35rem;

  transform: rotate(-1deg);
}

.table-answer-toggle:hover,
.table-answer-toggle:focus-visible {
  color: var(--red-ink);

  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}

/* ==========================================================
   QUESTION CARD GRID
   ========================================================== */

.question-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.8rem;

  width: 100%;
}


/* cards should fit their own grid column */

.question-card-grid .question-item {
  min-width: 0;
  width: 100%;
  margin: 0;
}


/* images behave nicely in the narrower cards */

.question-card-grid .question-image {
  width: 100%;
}

.question-card-grid .question-image img {
  display: block;

  width: 100%;
  height: auto;
  max-height: 420px;

  object-fit: contain;
}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 850px) {

  .question-card-grid {
    grid-template-columns: 1fr;
  }

}
/* Hide the entire answer column when answers are off */

.question-table-wrap.answers-hidden .table-answer {
  display: none;
}

.question-table-wrap.answers-hidden th:nth-child(3) {
  display: none;
}
/* ==========================================================
   ONLINE GAMES PAGE
   ========================================================== */

.games-page {
  width: 100%;
}


/* ==========================================================
   INTRO
   ========================================================== */

.games-intro {
  position: relative;
  z-index: 1;

  width: min(100%, var(--body-max));
  margin: 0 auto 2.8rem;
}

.games-intro h1 {
  margin: 0 0 .5rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: .95;
}

.games-intro p {
  max-width: 65ch;
  margin: 0;

  font-size: 1.1rem;
  line-height: 1.55;
}


/* ==========================================================
   GAME GRID
   ========================================================== */

.games-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 2.3rem;

  width: min(100%, var(--body-max));
  margin: 0 auto;
}


/* ==========================================================
   GAME CARDS
   ========================================================== */

.game-card {
  position: relative;

  min-width: 0;

  padding: 1.65rem 1.55rem 1.9rem;

  border: 1px solid rgba(20, 29, 98, .3);

  background:
    rgba(255, 255, 255, .17);

  box-shadow:
    2px 3px 8px rgba(0, 0, 0, .06);

  transform: rotate(-.35deg);
}

.game-card:nth-child(even) {
  transform: rotate(.4deg);
}

.game-card-wipeout {
  border-top: 4px solid rgba(174, 23, 33, .62);
}

.game-card-bidding {
  border-top: 4px solid rgba(20, 29, 98, .62);
}

.game-card-heading {
  margin-bottom: 1rem;
}

.game-card h2 {
  margin: 0;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2rem, 3vw, 3.3rem);
  font-weight: 400;
  line-height: 1;
}

.game-card p {
  max-width: 50ch;
  margin: 0 0 .8rem;

  font-size: 1rem;
  line-height: 1.5;
}

.game-description {
  font-weight: 700;
}


/* ==========================================================
   GAME TYPE LABELS
   ========================================================== */

.game-type {
  display: inline-block;

  width: fit-content;
  margin: 0 0 .75rem;

  padding: .3rem .72rem .24rem;

  font-family: var(--fancy-font);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: .025em;
}


/* ---------- Wipeout ---------- */

.game-type-wipeout {
  color: var(--red-ink);

  border: 3px solid rgba(174, 23, 33, .72);

  transform: rotate(-2deg);
}


/* ---------- Bidding War ---------- */

.game-type-bidding {
  color: var(--blue-ink);

  border-top: 2px solid rgba(20, 29, 98, .72);
  border-bottom: 2px solid rgba(20, 29, 98, .72);

  transform: rotate(1deg);
}


/* ---------- Coming soon ---------- */

.game-type-soon {
  color: rgba(23, 23, 27, .5);

  border: 1px dashed rgba(23, 23, 27, .4);

  transform: rotate(-1deg);
}


/* ==========================================================
   PLAY LINKS
   ========================================================== */

.game-play-link {
  display: inline-block;

  margin-top: .55rem;

  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.75rem;
  line-height: 1;

  text-decoration: none;

  transform: rotate(-1deg);
}

.game-play-link:hover,
.game-play-link:focus-visible {
  color: var(--blue-ink);

  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}


/* ==========================================================
   COMING SOON
   ========================================================== */

.coming-soon-card {
  opacity: .72;
}

.coming-soon-card::after {
  content: "MORE COMING SOON!";

  position: absolute;
  right: 1rem;
  bottom: 1rem;

  color: rgba(174, 23, 33, .52);

  font-family: var(--fancy-font);
  font-size: clamp(1.2rem, 2vw, 1.8rem);

  transform: rotate(-5deg);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .games-grid {
    grid-template-columns: 1fr;
  }

  .game-card,
  .game-card:nth-child(even) {
    transform: none;
  }

}
.game-card-higher {
  border-top: 4px solid rgba(116, 89, 160, .65);
}

.game-type-higher {
  color: var(--blue-ink);

  border: 2px solid rgba(116, 89, 160, .6);

  background: rgba(116, 89, 160, .08);

  transform: rotate(-1deg);
}

.game-card-board {
  border-top: 4px solid rgba(76, 55, 110, .65);
}

.game-type-board {
  color: var(--red-ink);

  border: 2px dashed rgba(20, 29, 98, .58);

  background: rgba(255, 255, 255, .13);

  transform: rotate(1.5deg);
}
/* ==========================================================
   HOME PAGE
   ========================================================== */

.home-page {
  overflow: hidden;
}


/* ==========================================================
   WELCOME
   ========================================================== */

.home-welcome {
  position: relative;
  z-index: 2;

  width: min(100%, var(--body-max));
  margin: 0 auto 5rem;
}

.home-welcome h1 {
  max-width: 850px;
  margin: 0 0 1rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(3rem, 6vw, 6.2rem);
  font-weight: 400;
  line-height: .94;

  transform: rotate(-1deg);
}

.home-welcome p {
  max-width: 70ch;

  font-size: 1.08rem;
  line-height: 1.6;
}

.home-lead {
  font-size: clamp(1.12rem, 1.5vw, 1.28rem) !important;
  font-weight: 700;
}


/* ==========================================================
   HOME ACTIONS
   ========================================================== */

.home-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 1rem 1.5rem;

  margin-top: 1.7rem;
}

.home-action {
  display: inline-block;

  padding: .65rem .9rem;

  border: 2px solid rgba(20,29,98,.5);

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1;

  text-decoration: none;

  transform: rotate(.5deg);
}

.home-action-primary {
  border-color: rgba(174,23,33,.6);

  color: var(--red-ink);

  transform: rotate(-1deg);
}

.home-action:hover,
.home-action:focus-visible {
  color: var(--red-ink);

  background:
    rgba(255,255,255,.2);
}


/* ==========================================================
   LATEST GAMES
   ========================================================== */

.latest-games {
  position: relative;
  z-index: 3;

  width: min(100%, 1220px);
  margin: 0 auto 5.5rem;
}

.latest-games-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;

  gap: 1rem;

  margin-bottom: 1.2rem;
}

.latest-games-heading h2 {
  margin: 0;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: .95;
}

.latest-games-all {
  margin-bottom: .25rem;

  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.45rem;
  text-decoration: none;
}

.latest-games-all:hover,
.latest-games-all:focus-visible {
  color: var(--blue-ink);
  text-decoration: underline;
}


/* ==========================================================
   SIDEWAYS SCROLLER
   ========================================================== */

.games-scroll-wrap {
  position: relative;
}

.games-scroll {
  display: flex;

  gap: 1.2rem;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    .7rem .3rem
    1.4rem;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(20,29,98,.42)
    transparent;
}

.games-scroll::-webkit-scrollbar {
  height: 8px;
}

.games-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.games-scroll::-webkit-scrollbar-thumb {
  background:
    rgba(20,29,98,.35);

  border-radius: 99px;
}


/* ==========================================================
   HOME GAME CARDS
   ========================================================== */

.home-game-card {
  flex:
    0 0
    clamp(260px, 31vw, 355px);

  min-width: 0;

  scroll-snap-align: start;

  padding: 1.45rem 1.35rem 1.6rem;

  border: 1px solid rgba(20,29,98,.3);
  border-top-width: 4px;

  background:
    rgba(255,255,255,.2);

  box-shadow:
    2px 3px 8px rgba(0,0,0,.06);
}

.home-game-card:nth-child(odd) {
  transform: rotate(-.4deg);
}

.home-game-card:nth-child(even) {
  transform: rotate(.45deg);
}

.home-game-type {
  display: inline-block;

  margin: 0 0 .7rem;

  padding: .2rem .5rem;

  color: var(--red-ink);

  border: 1px dashed rgba(174,23,33,.5);

  font-family: var(--fancy-font);
  font-size: 1.35rem;
  line-height: 1;

  text-transform: uppercase;
}

.home-game-card h3 {
  margin: 0 0 .8rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 400;
  line-height: .95;
}

.home-game-card p:not(.home-game-type) {
  min-height: 4.8em;

  margin: 0 0 1rem;

  font-size: .98rem;
  line-height: 1.5;
}

.home-game-card a {
  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.5rem;

  text-decoration: none;
}

.home-game-card a:hover,
.home-game-card a:focus-visible {
  color: var(--blue-ink);
  text-decoration: underline;
}


/* individual game-family marks */

.home-game-board {
  border-top-color:
    rgba(76,55,110,.65);
}

.home-game-higher {
  border-top-color:
    rgba(116,89,160,.65);
}

.home-game-bidding {
  border-top-color:
    rgba(20,29,98,.65);
}

.home-game-wipeout {
  border-top-color:
    rgba(174,23,33,.65);
}


/* ==========================================================
   SCROLL ARROWS
   ========================================================== */

.games-scroll-button {
  position: absolute;
  z-index: 5;

  top: 50%;

  width: 46px;
  height: 60px;

  border: 0;

  background:
    rgba(234,217,189,.9);

  color: var(--red-ink);

  cursor: pointer;

  font-family: Arial, sans-serif;
  font-size: 3rem;
  line-height: 1;

  transform: translateY(-50%);

  box-shadow:
    0 2px 8px rgba(0,0,0,.12);
}

.games-scroll-left {
  left: -.8rem;
}

.games-scroll-right {
  right: -.8rem;
}

.games-scroll-button:hover,
.games-scroll-button:focus-visible {
  color: var(--blue-ink);

  background:
    rgba(255,255,255,.92);
}

.games-swipe-note {
  margin: .3rem 0 0;

  color:
    rgba(20,29,98,.62);

  font-family: var(--fancy-font);
  font-size: 1.1rem;

  text-align: right;
}


/* ==========================================================
   ARCHIVE CTA
   ========================================================== */

.home-archive {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(250px, .65fr);

  gap: 3rem;

  width: min(100%, var(--body-max));
  margin: 0 auto 2rem;

  padding-top: 2rem;

  border-top:
    1px solid rgba(20,29,98,.3);
}

.home-archive-copy h2 {
  margin: 0 0 .8rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.home-archive-copy p {
  max-width: 62ch;

  font-size: 1rem;
  line-height: 1.6;
}

.home-archive-link {
  display: inline-block;

  margin-top: .6rem;

  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.55rem;

  text-decoration: none;
}

.home-archive-link:hover,
.home-archive-link:focus-visible {
  color: var(--blue-ink);
  text-decoration: underline;
}


/* fake answer sheet */

.home-answer-sheet {
  display: grid;
  grid-template-columns:
    auto 1fr;

  align-content: start;

  gap: .7rem .5rem;

  padding: 1.2rem;

  color: rgba(20,29,98,.75);

  border:
    1px solid rgba(20,29,98,.25);

  background:
    rgba(255,255,255,.12);

  font-family:
    var(--fancy-font);

  font-size: 1.25rem;

  transform: rotate(2deg);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 850px) {

  .home-archive {
    grid-template-columns: 1fr;
  }

  .home-answer-sheet {
    width: min(100%, 420px);
  }

}


@media (max-width: 620px) {

  .home-actions {
    display: block;
  }

  .home-action {
    display: block;

    width: fit-content;
    margin-bottom: .8rem;
  }

  .home-game-card {
    flex-basis: 82vw;
  }

  .games-scroll-button {
    display: none;
  }

  .games-swipe-note {
    text-align: left;
  }

}
/* ==========================================================
   GAMES DIRECTORY
   ========================================================== */

.game-directory {
  position: relative;
  z-index: 2;

  width: min(100%, var(--body-max));
  margin: 0 auto 5rem;
}

.game-directory-heading {
  margin-bottom: 2rem;
}

.game-directory-heading h2 {
  margin: 0 0 .7rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: .95;
}

.game-directory-heading > p:last-child {
  max-width: 68ch;

  margin: 0;

  font-size: 1.05rem;
  line-height: 1.55;
}


/* ==========================================================
   GAME FAMILY GRID
   ========================================================== */

.game-type-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 2rem;
}


/* ==========================================================
   FAMILY CARD
   ========================================================== */

.game-family {
  position: relative;

  min-width: 0;

  padding: 1.5rem;

  border:
    1px solid rgba(20,29,98,.28);

  border-top-width: 5px;

  background:
    rgba(255,255,255,.15);

  box-shadow:
    2px 3px 8px rgba(0,0,0,.05);
}

.game-family:nth-child(odd) {
  transform: rotate(-.25deg);
}

.game-family:nth-child(even) {
  transform: rotate(.25deg);
}


/* ==========================================================
   FAMILY TYPES
   ========================================================== */

.game-family-board {
  border-top-color:
    rgba(76,55,110,.68);
}

.game-family-higher {
  border-top-color:
    rgba(116,89,160,.68);
}

.game-family-bidding {
  border-top-color:
    rgba(20,29,98,.68);
}

.game-family-wipeout {
  border-top-color:
    rgba(174,23,33,.68);
}


/* ==========================================================
   FAMILY HEADING
   ========================================================== */

.game-family-header {
  padding-bottom: 1rem;

  border-bottom:
    1px dashed rgba(20,29,98,.25);
}

.game-family-label {
  display: inline-block;

  margin: 0 0 .65rem;

  padding: .25rem .6rem;

  color: var(--red-ink);

  border:
    2px solid rgba(174,23,33,.45);

  font-family: var(--fancy-font);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;

  text-transform: uppercase;

  transform: rotate(-1deg);
}

.game-family:nth-child(even) .game-family-label {
  transform: rotate(1deg);
}

.game-family-header h3 {
  margin: 0 0 .65rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: .95;
}

.game-family-header p:last-child {
  max-width: 48ch;

  margin: 0;

  font-size: .97rem;
  line-height: 1.5;
}


/* ==========================================================
   GAME LIST
   ========================================================== */

.game-family-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.game-family-list li {
  margin: 0;

  border-bottom:
    1px solid rgba(20,29,98,.18);
}

.game-family-list li:last-child {
  border-bottom: 0;
}

.game-family-list a {
  display: block;

  padding: 1rem .25rem;

  color: var(--blue-ink);

  text-decoration: none;
}

.game-family-list strong {
  display: block;

  margin-bottom: .25rem;

  color: var(--red-ink);

  font-family: var(--fancy-font);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.05;
}

.game-family-list span {
  display: block;

  color: var(--ink);

  font-size: .94rem;
  line-height: 1.4;
}

.game-family-list a:hover strong,
.game-family-list a:focus-visible strong {
  color: var(--blue-ink);

  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}


/* ==========================================================
   MORE GAMES
   ========================================================== */

.games-more {
  position: relative;
  z-index: 2;

  width: min(100%, var(--body-max));
  margin: 0 auto 2rem;

  padding-top: 2rem;

  border-top:
    1px solid rgba(20,29,98,.3);
}

.games-more h2 {
  margin: 0 0 .7rem;

  color: var(--blue-ink);

  font-family: var(--fancy-font);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.games-more p:last-child {
  max-width: 65ch;

  margin: 0;

  line-height: 1.55;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

  .game-type-grid {
    grid-template-columns: 1fr;
  }

  .game-family,
  .game-family:nth-child(odd),
  .game-family:nth-child(even) {
    transform: none;
  }

}
/* ==========================================================
   TAG SEARCH
   ========================================================== */

.tag-search {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(150px, 210px);

  gap: 1rem;

  align-items: end;

  margin-top: 1rem;
}

.tag-search-main label,
.tag-mode-field label {
  display: block;

  margin-bottom: .3rem;
}

.tag-search-main input {
  width: 100%;
}

.field-help {
  display: block;

  margin-top: .3rem;

  color: rgba(20,29,98,.65);

  font-size: .85rem;
  line-height: 1.3;
}


@media (max-width: 650px) {

  .tag-search {
    grid-template-columns: 1fr;
  }

}
.available-tags,
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.tag-pill,
.selected-tag-pill {
  border: 1px solid rgba(20,29,98,.35);
  padding: .3rem .6rem;

  background: rgba(255,255,255,.28);
  color: var(--blue-ink);

  cursor: pointer;

  font-family: var(--fancy-font);
  font-size: 1rem;
  line-height: 1;

  transform: rotate(-.4deg);
}

.tag-pill:nth-child(even) {
  transform: rotate(.5deg);
}

.tag-pill:hover,
.tag-pill:focus-visible,
.tag-pill.selected {
  border-color: rgba(174,23,33,.55);
  color: var(--red-ink);
}

.selected-tag-pill {
  border-color: rgba(174,23,33,.5);
  color: var(--red-ink);
}

.selected-tag-remove {
  margin-left: .35rem;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

/* ---------- For Quizmasters ---------- */

.home-game-quizmasters {
  border-top-color:
    rgba(66,107,80,.72);
}

.home-game-quizmasters .home-game-type {
  color: #426b50;

  border-color:
    rgba(66,107,80,.55);
}

.game-family-quizmasters {
  border-top-color:
    rgba(66,107,80,.75);
}

.game-family-quizmasters .game-family-label {
  color: #426b50;

  border-color:
    rgba(66,107,80,.55);

  background:
    rgba(66,107,80,.06);
}
/* ==========================================================
   PICTURE REVEAL QUESTIONS
   ========================================================== */

.reveal-player {
  position: relative;
}

.reveal-stage {
  position: relative;
}

.reveal-frame {
  display: none;
  margin: 0;
}

.reveal-frame.active {
  display: block;
}

.reveal-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.reveal-caption {
  margin-top: .5rem;
  font-size: .9rem;
  font-style: italic;
}

.reveal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

.reveal-progress {
  font-size: .9rem;
  font-weight: 700;
}

.reveal-next:disabled {
  opacity: .55;
  cursor: default;
}
/* ==========================================================
   GAME CARDS
   Shared by homepage and games page
   ========================================================== */

.games-scroll-wrap {
    position: relative;
}

.games-scroll {
    display: flex;
    gap: 1.15rem;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        .3rem
        .15rem
        1rem;

    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.games-scroll:focus-visible {
    outline: 3px solid var(--red-ink);
    outline-offset: 5px;
}


.home-game-card {
    position: relative;

    flex:
        0 0
        min(310px, 82vw);

    display: flex;
    flex-direction: column;

    min-height: 390px;

    padding: 0;

    overflow: hidden;

    border:
        3px solid
        rgba(20, 29, 98, .48);

    background:
        rgba(255, 255, 255, .78);

    box-shadow:
        3px 5px 12px
        rgba(0, 0, 0, .11);

    scroll-snap-align: start;

    transform:
        rotate(-.25deg);
}

.home-game-card:nth-child(even) {
    transform:
        rotate(.25deg);
}


/* ==========================================================
   GAME CARD ART
   ========================================================== */

.home-game-art {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 145px;

    overflow: hidden;

    border-bottom:
        3px solid
        rgba(20, 29, 98, .35);

    background:
        rgba(214, 219, 236, .55);
}

.home-game-art img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Carry On */

.home-game-art-carry img {
    object-position:
        center 38%;
}


/* Bob */

.home-game-art-bob {
    background:
        repeating-linear-gradient(
            -12deg,
            rgba(255,255,255,.9) 0,
            rgba(255,255,255,.9) 18px,
            rgba(215,220,237,.9) 18px,
            rgba(215,220,237,.9) 36px
        );
}

.home-game-art-bob img {
    width: auto;
    max-width: 82%;
    height: 128px;

    object-fit: contain;

    filter:
        drop-shadow(
            2px 3px 2px
            rgba(0,0,0,.22)
        );

    transform:
        rotate(-2deg);
}


/* Board */

.home-game-art-board {
    padding: .9rem;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    grid-template-rows:
        repeat(3, 1fr);

    gap: .32rem;
}

.home-game-art-board span {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(255,255,255,.88);

    border:
        2px solid
        rgba(20,29,98,.5);

    color:
        var(--blue-ink);

    font-family:
        var(--fancy-font);

    font-size:
        1.15rem;
}


/* Higher / Lower */

.home-game-art-higher {
    gap: 1.2rem;

    color:
        var(--blue-ink);

    font-family:
        var(--fancy-font);

    font-size:
        5rem;

    line-height:
        1;
}

.home-game-art-higher span:last-child {
    color:
        var(--red-ink);
}


/* Bidding */

.home-game-art-bidding {
    flex-direction:
        column;

    color:
        var(--blue-ink);

    font-family:
        var(--fancy-font);
}

.bid-big {
    color:
        var(--red-ink);

    font-size:
        4.2rem;

    line-height:
        .8;
}

.bid-small {
    margin-top:
        .25rem;

    font-size:
        1.45rem;
}


/* Bingo */

.home-game-art-bingo {
    padding: 1rem;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: .25rem;
}

.home-game-art-bingo span {
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        rgba(20,29,98,.5);

    background:
        rgba(255,255,255,.86);

    color:
        var(--red-ink);

    font-family:
        var(--fancy-font);

    font-size:
        .9rem;
}


/* ==========================================================
   GAME CARD COPY
   ========================================================== */

.home-game-copy {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding:
        1rem
        1.1rem
        1.15rem;
}

.home-game-type {
    margin:
        0
        0
        .35rem;

    color:
        var(--red-ink);

    font-family:
        var(--fancy-font);

    font-size:
        1.25rem;

    line-height:
        1;
}

.home-game-card h3 {
    margin:
        0
        0
        .65rem;

    color:
        var(--blue-ink);

    font-size:
        1.45rem;

    line-height:
        1.05;
}

.home-game-card p:not(.home-game-type) {
    margin-top: 0;

    line-height:
        1.45;
}

.home-game-card a {
    margin-top: auto;

    align-self:
        flex-start;

    color:
        var(--red-ink);

    font-family:
        var(--fancy-font);

    font-size:
        1.35rem;

    line-height:
        1.05;

    text-decoration-thickness:
        .07em;

    text-underline-offset:
        .12em;
}

.home-game-card a:hover,
.home-game-card a:focus-visible {
    color:
        var(--blue-ink);
}


/* ==========================================================
   NEW LABEL
   ========================================================== */

.game-new {
    position: absolute;

    top: .55rem;
    right: .5rem;
    z-index: 4;

    padding:
        .15rem
        .5rem;

    background:
        var(--red-ink);

    color:
        #fff;

    font-family:
        var(--fancy-font);

    font-size:
        1rem;

    transform:
        rotate(4deg);

    box-shadow:
        1px 2px 3px
        rgba(0,0,0,.2);
}


/* ==========================================================
   GAME SCROLL CONTROLS
   ========================================================== */

.games-scroll-button {
    position: absolute;

    top: 50%;
    z-index: 5;

    width:
        2.7rem;

    height:
        4.2rem;

    border: 0;

    background:
        rgba(255,255,255,.92);

    color:
        var(--red-ink);

    cursor:
        pointer;

    font-family:
        var(--fancy-font);

    font-size:
        3rem;

    line-height:
        1;

    box-shadow:
        1px 3px 7px
        rgba(0,0,0,.16);

    transform:
        translateY(-50%);
}

.games-scroll-left {
    left:
        -.9rem;
}

.games-scroll-right {
    right:
        -.9rem;
}

.games-scroll-button:hover,
.games-scroll-button:focus-visible {
    color:
        var(--blue-ink);
}


@media (max-width: 820px) {

    .games-scroll-button {
        display:
            none;
    }

}


@media (max-width: 520px) {

    .home-game-card {
        flex-basis:
            min(285px, 86vw);

        min-height:
            370px;
    }

    .home-game-art {
        height:
            130px;
    }

}