/* What a page shows of a game that plays on phones: the buy card's lines and the section for the host who prefers paper (_paper.html).
   Loaded only on pages of such a game. The site's own ground and light (css/site.css); inside the phone the gold of
   the real play pages, whatever the page's theme. */

/* ---------- The case in a phone ---------- */
.smp { display: grid; justify-items: center; text-align: center; }
.smp > .kicker { margin: 0 0 0.45rem; }
.smp__title { margin-bottom: 1.1rem; font-size: clamp(1.8rem, 3vw, 2.15rem); }
.smp__phone {
  --gold-light: #f0c979; --gold: #e2b25a; --gold-deep: #b98a36; --blood: #a3232b; --plum-line: #3a2a44;
  position: relative; width: min(100%, 21rem); overflow: hidden; text-align: left;
  border: 0.42rem solid #06040a; border-radius: 2.1rem; outline: 1px solid #4a3b57; outline-offset: -1px;
  background: radial-gradient(120% 60% at 50% 0%, #241a2c 0%, #15101c 55%, #0d0a10 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px #2b2133, 0 0 60px rgba(226, 178, 90, 0.08);
}
.smp__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.7rem 0.55rem 1.1rem; border-bottom: 1px solid var(--plum-line); }
.smp__case { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.smp__sound { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.5rem; border: 0; background: none; cursor: pointer; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.smp__sound-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.smp__sound.is-off .smp__sound-dot { background: #5a4d63; box-shadow: none; }
.smp__screens { position: relative; }
.smp__screen { display: flex; flex-direction: column; min-height: 27.2rem; padding: 1.3rem 1.1rem 1.2rem; }
.smp__screen[hidden] { display: none !important; }
.smp__screen.is-in { animation: smp-in 0.38s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.smp__seal {
  align-self: center; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0.6rem 0 0.9rem; border-radius: 50%;
  font-family: var(--display); font-size: 1.9rem; color: #ffe7c2;
  background: radial-gradient(circle at 35% 30%, #d85a52, #b3272f 55%, #6e1118); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 220, 190, 0.14);
}
.smp__you { margin: 0; text-align: center; font-style: italic; color: var(--mist); }
.smp__name { margin: 0.15rem 0 0; text-align: center; font-size: 1.9rem; color: var(--snow); }
.smp__role { margin: 0.35rem 0 0; text-align: center; font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.smp__story { margin: 1.2rem 0 0; text-align: center; font-family: var(--display); font-size: 1.08rem; line-height: 1.4; color: var(--paper); }
.smp__button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.4rem; margin-top: auto; padding: 0.8rem 1rem; cursor: pointer;
  border: 0; border-radius: 2px; text-decoration: none; text-align: center;
  font-family: var(--label); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #20150a;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 8px 26px rgba(226, 178, 90, 0.28);
}
.smp__button:active, .smp__suspect:active, .smp__ping:active { transform: scale(0.97); }
.smp__sheet {
  position: relative; padding: 1.3rem 1.05rem 1.2rem; color: var(--paper-ink);
  background: linear-gradient(180deg, var(--paper), var(--paper-shade)); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), inset 0 0 36px rgba(120, 90, 40, 0.16);
}
.smp__stamp { position: absolute; top: 0.85rem; right: 0.85rem; margin: 0; padding: 0.16rem 0.42rem; transform: rotate(6deg); border: 2px solid var(--blood); font-family: var(--label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blood); }
.smp__label { margin: 0 0 0.5rem; font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6d5936; }
.smp__sheet-title { margin: 0 0 0.5rem; font-size: 1.35rem; color: var(--paper-ink); }
.smp__words { margin: 0; font-family: var(--display); font-size: 1.14rem; line-height: 1.45; }
.smp__hush { margin: 1.2rem 0 0; text-align: center; font-style: italic; color: var(--mist); }
.smp__round { margin: 0 0 0.3rem; font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.smp__ask { margin: 0 0 0.8rem; font-size: 1.55rem; color: var(--snow); }
.smp__suspects { display: grid; gap: 0.55rem; }
.smp__suspect {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.75rem; align-items: center; width: 100%; min-height: 4.2rem; padding: 0.6rem 0.75rem; cursor: pointer; text-align: left;
  border: 1px solid var(--plum-line); background: rgba(13, 10, 16, 0.7); color: var(--snow); transition: border-color 0.15s ease, background 0.15s ease;
}
.smp__initial { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-family: var(--display); font-size: 1.15rem; color: #e9cfc0; background: radial-gradient(circle at 35% 30%, #7a3f45, #55262b 60%, #33151a); }
.smp__who strong { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.smp__who em { display: block; margin-top: 0.1rem; font-size: 0.92rem; line-height: 1.3; color: var(--mist); }
.smp__suspect.is-wrong { border-color: #5c2a30; background: rgba(60, 16, 20, 0.45); cursor: default; animation: smp-no 0.42s ease both; }
.smp__suspect.is-wrong strong { text-decoration: line-through; text-decoration-color: var(--blood); text-decoration-thickness: 2px; color: var(--mist); }
.smp__suspect.is-wrong .smp__initial { filter: grayscale(1) brightness(0.7); }
.smp__suspect.is-right { border-color: var(--gold); background: rgba(226, 178, 90, 0.18); box-shadow: 0 0 0 2px var(--gold), 0 0 34px rgba(226, 178, 90, 0.5); }
.smp__verdict { min-height: 3.1rem; margin: 0.75rem 0 0; font-family: var(--display); font-size: 1.02rem; font-style: italic; line-height: 1.35; color: var(--gold-light); }
.smp__verdict.is-in { animation: smp-in 0.3s ease both; }
.smp__screen--solved { align-items: center; justify-content: center; text-align: center; }
.smp__screen[data-sample-screen="invite"] .smp__seal { margin-top: auto; }
.smp__screen[data-sample-screen="secret"] { justify-content: center; }
.smp__screen[data-sample-screen="invite"] .smp__button { margin-top: 1.6rem; margin-bottom: auto; }
.smp__guilty {
  margin: 0 0 1rem; padding: 0.3rem 1rem 0.36rem; transform: rotate(-7deg); border: 4px solid #d2444d; border-radius: 4px;
  font-family: var(--label); font-size: 1.9rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #e2555e; text-shadow: 0 0 22px rgba(210, 68, 77, 0.5);
}
.smp__screen--solved.is-in .smp__guilty { animation: smp-stamp 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.smp__confession { margin: 0.9rem 0 0; font-family: var(--display); font-size: 1.1rem; font-style: italic; line-height: 1.4; color: var(--paper); }
.smp__closed { margin: 1.1rem 0 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.3; color: var(--gold-light); }
.smp__again { min-height: 44px; margin-top: 1rem; padding: 0.4rem 0.8rem; border: 0; background: none; cursor: pointer; font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--mist); text-decoration: underline; text-underline-offset: 0.25em; }
/* The clue arrives as a message does: it drops in over the page and stays until it is opened. */
.smp__ping {
  display: grid; width: 100%; margin-top: 1.1rem; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.7rem; align-items: center;
  min-height: 4rem; padding: 0.65rem 0.75rem 0.7rem 0.9rem; cursor: pointer; text-align: left; border: 1px solid var(--gold); border-radius: 0.9rem;
  background: #1d1524; color: var(--snow); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 0 4px rgba(226, 178, 90, 0.16), 0 0 40px rgba(226, 178, 90, 0.35);
}
.smp__ping-tag { grid-column: 1; font-family: var(--label); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.smp__ping-tag::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: #e2555e; box-shadow: 0 0 10px #e2555e; }
.smp__ping-text { grid-column: 1; font-family: var(--display); font-size: 1.08rem; line-height: 1.25; }
.smp__ping-go { grid-column: 2; grid-row: 1 / span 2; padding: 0.55rem 0.8rem; border-radius: 2px; font-family: var(--label); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #20150a; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); }
.smp__ping.is-in { animation: smp-drop 0.55s cubic-bezier(0.25, 1.4, 0.45, 1) both; }
.smp__phone.is-buzzing { animation: smp-buzz 0.62s linear both; }
.smp__phone.is-jolted { animation: smp-no 0.32s ease both; }
@keyframes smp-in { from { opacity: 0; transform: translateY(0.7rem); } to { opacity: 1; transform: none; } }
@keyframes smp-drop { from { opacity: 0; transform: translateY(-2.4rem) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes smp-buzz {
  0%, 38%, 76%, 100% { transform: none; }
  5%, 15%, 25%, 43%, 53%, 63% { transform: translateX(-3px) rotate(-0.7deg); }
  10%, 20%, 30%, 48%, 58%, 68% { transform: translateX(3px) rotate(0.7deg); }
}
@keyframes smp-no { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 88% { transform: translateX(2px); } }
@keyframes smp-stamp { from { opacity: 0; transform: rotate(-7deg) scale(2.6); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }

/* The case is closed: the buy card under the phone lights up. */
.edition.is-called { animation: smp-call 1.5s ease-in-out 3 both; }
.edition.is-called .edition__buy { box-shadow: 0 0 0 3px rgba(240, 201, 121, 0.35), 0 12px 40px rgba(226, 178, 90, 0.55); }
@keyframes smp-call { 0%, 100% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } 50% { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--gold), 0 0 60px rgba(226, 178, 90, 0.5); } }

/* Home: the card stands first under the film and the case follows it; on a wide screen they stand side by side. */
.buy__head--sample { padding-top: 0.6rem; }
@media (min-width: 62rem) { .buy--home .buy__head--sample { grid-row: 1 / span 2; padding-top: 0; } .buy--home .buy__card { align-self: center; } }
.edition__host { margin: 0.9rem 0 0; font-family: var(--display); font-size: 1.02rem; line-height: 1.4; color: var(--snow); }
.edition__formats { margin: 0.9rem 0 0; font-family: var(--display); font-size: 1.08rem; line-height: 1.45; color: var(--snow); }
.edition__formats a { color: var(--gold-light); text-underline-offset: 0.22em; display: inline-block; padding: 0.55rem 0; }
.edition__after a, .edition .ticks a { color: var(--gold-light); text-underline-offset: 0.22em; }
.edition__after a { display: inline-flex; align-items: center; min-height: 44px; }
.edition .ticks a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.45rem; }

/* A game page: the case under the card, in the section to buy in. */
.buy__try { padding-top: 0.8rem; margin-bottom: 1.4rem; }
@media (min-width: 62rem) { .buy__try { padding-top: 0.4rem; } }

/* ---------- Real screens of an evening: one at a time, large enough to read, with a sliver of the next ---------- */
.shots { grid-column: 1 / -1; min-width: 0; margin: 2rem 0 0; }
.shots--band { margin: 0.4rem auto 0; }
.shotsband { padding-block: clamp(2.6rem, 6vw, 4.5rem); overflow-x: clip; }
.shotsband .title { margin-bottom: 0.9rem; }
.shots__title { margin-bottom: 0.9rem; font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.shots__row { display: flex; align-items: flex-start; gap: 0.9rem; margin: 0; padding: 0 0 0.4rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shots__row::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 min(78vw, 17.5rem); scroll-snap-align: start; }
.shot img { display: block; width: 100%; height: auto; background: #0d0a10; border: 0.3rem solid #06040a; outline: 1px solid #4a3b57; outline-offset: -1px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6); }
.shot--phone img { aspect-ratio: 9 / 16; border-radius: 1.5rem; }
.shot--tablet img { aspect-ratio: 3 / 4; border-radius: 1rem; }
.shot span { display: block; margin-top: 0.6rem; font-family: var(--label); font-size: 0.86rem; line-height: 1.35; color: var(--paper); }
.shots__nav:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 1rem 0 0; }
.shots__count { min-width: 6.6rem; text-align: center; font-family: var(--label); font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.shots__arrow { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; cursor: pointer; border: 1px solid rgba(240, 201, 121, 0.6); background: rgba(13, 10, 16, 0.6); color: var(--gold-light); font-size: 1.35rem; line-height: 1; }
.shots__arrow--next { border-color: transparent; background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #20150a; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
@media (max-width: 46rem) { .shots { margin-left: 0; margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); } .shots__row { padding-right: 1.25rem; scroll-padding-right: 1.25rem; } .shots__nav:not([hidden]) { margin-right: clamp(1.25rem, 4vw, 2.5rem); } }
/* A wide screen: three and a part of the fourth, each as wide as on a phone and a little more. */
@media (min-width: 46.01rem) { .shot { flex-basis: 19rem; } .shots__row { gap: 1.3rem; scroll-snap-type: none; } }

/* ---------- Prefer paper? ---------- */
.onpaper { padding-block: clamp(2.6rem, 6vw, 4.5rem); overflow-x: clip; }
.onpaper .title { margin-bottom: 0.5rem; }
.onpaper .ticks { margin-top: 1.4rem; }
.onpaper > .onpaper__counts { margin-left: max(0px, calc((100% - var(--measure)) / 2)); }
.onpaper__counts { max-width: 46rem; margin-top: 1.2rem; border-block: 1px solid var(--plum-line); }
.onpaper__counts summary { position: relative; display: flex; align-items: center; min-height: 3.2rem; padding-right: 2rem; cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.15rem; }
.onpaper__counts summary::-webkit-details-marker { display: none; }
.onpaper__counts summary::after { content: "+"; position: absolute; right: 0.2rem; color: var(--gold); font-size: 1.5rem; }
.onpaper__counts[open] summary::after { content: "\2212"; }
.onpaper__counts p { color: var(--mist); }

@media (prefers-reduced-motion: reduce) {
  .smp__screen.is-in, .smp__verdict.is-in, .smp__ping.is-in, .smp__phone.is-buzzing, .smp__phone.is-jolted, .smp__suspect.is-wrong,
  .smp__screen--solved.is-in .smp__guilty, .edition.is-called { animation: none; }
  .edition.is-called { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--gold); }
  .smp__button:active, .smp__suspect:active, .smp__ping:active { transform: none; }
}

/* ---------- How it works: the host's screen beside the host's four jobs; the printed evening behind one tap ---------- */
.how-hostrow { display: grid; gap: 1.8rem; }
.how-tablet { margin: 0; max-width: 34rem; }
.how-tablet img { display: block; width: 100%; height: auto; background: #0d0a10; border: 0.4rem solid #06040a; border-radius: 1rem; outline: 1px solid #4a3b57; outline-offset: -1px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65); }
.how-tablet figcaption { margin-top: 0.7rem; font-family: var(--label); font-size: 0.82rem; color: var(--mist); }
@media (min-width: 62rem) { .how-hostrow { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: 3.5rem; align-items: center; } }
.onpaper__walk { margin-top: 1.4rem; }
.onpaper__walk > summary { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.7rem 1.3rem; cursor: pointer; list-style: none; border: 1px solid rgba(226, 178, 90, 0.55); border-radius: 2px;
  font-family: var(--label); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.onpaper__walk > summary::-webkit-details-marker { display: none; }
.onpaper__walk[open] > summary { margin-bottom: 1.6rem; }
.onpaper__walk .how-desk { margin-top: 2rem; }