/* Play page: the question, hint and answer cards on screen, lying on Piranesi's etching of Rome.
   The cards are drawn like the printed ones (IBM Plex Sans, the answer in IBM Plex Mono), all with the same thin
   border. Cards turned over form a pile; the rest wait face down in the deck. */

/* Fonts of the printed cards (self-hosted, SIL Open Font License) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}

/* The page reaches the edges of the screen (viewport-fit=cover), under the clock at the top and, on iPhones, behind
   Safari's bar at the bottom, and doesn't scroll itself: the pile does, if it has to. It's as tall as the screen is
   for pinned things (--edge, which play.js measures: on iPhones, the top of Safari's bar); the etching and the deck
   run on below that, behind the bar. Nothing on it is pinned (position: fixed), because Safari cuts pinned things off
   where its bar begins and fills the strip behind the bar with their colour. */
html.play-page { overflow: hidden; }
/* No zooming in by pinching or tapping twice, which only got in the way at the table. This and the viewport tag stop
   it in most browsers; play.js also stops Safari's pinch, which can ignore both. */
html.play-page { touch-action: pan-x pan-y; }
/* Safari paints the page's own background in the strip above it (under the notch on iPhones, behind the tab bar on
   iPads and Macs): here, the tone of the table at its very top, where the etching fades in from it (.rome) */
html.play-page { --page-bg: #eae9dc; }
body.play {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--edge, 100svh);
  min-height: 0;
  background: transparent;
}
/* The etching is the table: it fills the screen, softened so the cards stand out, a little darker at the edges.
   The deck's cards show it through them, so play.js knows its size and place (ETCHING): change them together. At
   the very top it fades in from the page's own colour, so Safari's strip above the page and the table meet without
   a seam. */
.rome {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, var(--page-bg), transparent 28px),
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(70, 55, 30, 0.13)),
    linear-gradient(to bottom, rgba(247, 247, 234, 0.85), rgba(247, 247, 234, 0.22) 150px, rgba(247, 247, 234, 0.3)),
    #ebe6da url(/assets/img/forum-piranesi.webp) 33% 35% / cover;
}
/* On phones and tablets it runs on below --edge, behind Safari's bar */
@media (pointer: coarse) {
  .rome { bottom: -100px; }
}

/* Header: the logo, the rules, and a menu for skipping a question or going back to the last one */
.ph {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(13px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 13px max(18px, env(safe-area-inset-left));
  /* On a layer of its own all the time. Otherwise browsers move it onto one while a card is dealt below it, and back
     after, and each move redraws its buttons a fraction of a pixel to the side. */
  will-change: transform;
}
.ph .logo { font-size: 20px; white-space: nowrap; }
.ph .logo img { width: 32px; height: 32px; }
.ph__tools { display: flex; align-items: center; gap: 8px; }
.ph-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: #fffef8;
  color: var(--ink);
  font: 700 15px/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(21, 29, 35, 0.12), 0 8px 20px -10px rgba(21, 29, 35, 0.4);
  transition: background-color 150ms var(--ease);
}
.ph-btn svg { flex: none; width: 18px; height: 18px; }
.ph-btn--round { width: 36px; padding: 0; }
/* A bigger area to tap than the button shows */
.ph-btn::after { content: ""; position: absolute; inset: -5px -3px; }
.ph-btn:hover,
.ph-btn[aria-expanded="true"] { background: #fff; }
.ph-more { position: relative; }
.ph-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  min-width: 240px;
  max-width: calc(100vw - 28px);
  padding: 6px;
  border-radius: 12px;
  background: #fffef8;
  box-shadow: 0 2px 4px rgba(21, 29, 35, 0.12), 0 24px 48px -16px rgba(21, 29, 35, 0.5);
  transform-origin: top right;
  animation: ph-menu-in 140ms var(--ease);
}
@keyframes ph-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.ph-menu button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px 11px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.ph-menu button[hidden] { display: none; }
.ph-menu button:not([hidden]) + button::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid rgba(21, 29, 35, 0.1); }
.ph-menu button:hover { background: rgba(21, 29, 35, 0.06); }
.ph-menu svg { flex: none; width: 20px; height: 20px; color: var(--ink-soft); }
/* While looking back, the way back to the question in play: the arrow the other way */
.ph-menu button.is-return svg { transform: scaleX(-1); }
.ph-menu small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 13.5px; font-weight: 400; }
.ph__home:focus-visible,
.ph-btn:focus-visible,
.ph-menu button:focus-visible,
.rules__close:focus-visible,
.back:focus-visible,
.pc:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ph-menu button:focus-visible { outline-offset: -3px; }
/* Very narrow phones: the Rules button without its icon */
@media (max-width: 350px) {
  .ph-btn:not(.ph-btn--round) svg { display: none; }
}

/* The table: the pile, scrolling on its own if it has to, with the deck at the bottom of the screen */
.table {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 170px;
  /* Scrolling a card into view keeps it clear of the deck */
  scroll-padding: 8px 0 168px;
}
.table__pile { width: min(560px, 100% - 36px); margin: 0 auto; }

.table__noscript { margin-top: 16px; color: var(--ink); font-size: 17px; text-align: center; }
/* While cards change shape, copies of the pile lie behind it for a moment (play.js): the pile as it was, and the pile
   as it is now, of which only what's new on the cards changing shows. Their cards lie in turn (play.js sets their
   z-index), so neither copy is a layer of its own. */
.table__pile { position: relative; }
.pile.pile--was,
.pile.pile--now { position: absolute; top: 0; left: 0; right: 0; perspective: none; pointer-events: none; }
.pile--now > .pc { background: none; box-shadow: none; }
/* A card's name, going between its top line and its folded line (play.js) */
.pc__name { position: absolute; margin: 0; font-weight: 700; line-height: normal; white-space: nowrap; }

/* A card, as printed: which card it is, its text, and what the table does now. A thin line runs inside its edge, as
   on the cards in the deck. */
.pc {
  --pc-ink: #151515;
  --pc-frame: inset 0 0 0 7px #fffef8, inset 0 0 0 8.5px rgba(27, 35, 42, 0.5), 0 0 0 1px rgba(27, 35, 42, 0.16);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 19px 23px 16px;
  border-radius: 5px;
  background: #fffef8;
  color: var(--pc-ink);
  font-family: 'IBM Plex Sans', sans-serif;
  transform: translateX(var(--x, 0px)) rotate(var(--r, 0deg));
  box-shadow: var(--pc-frame), 0 1px 1px rgba(30, 22, 8, 0.08), 0 8px 18px -8px rgba(30, 22, 8, 0.32);
  transition: box-shadow 250ms var(--ease);
}
.pc__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--pc-ink);
  font-size: 15px;
  line-height: 1.3;
}
.pc__top b { font-weight: 700; }
.pc__body { flex: 1; padding-bottom: 16px; }
.pc__body > :first-child { margin-top: 12px; }
.pc__text { font-size: 20px; line-height: 1.38; }
.pc__value { font-family: 'IBM Plex Mono', monospace; font-size: 30px; line-height: 1.2; }
.pc__note { margin-top: 8px; color: #6a6a6a; font-size: 15px; line-height: 1.35; }
.pc__now { padding-top: 9px; border-top: 1.5px dashed #6a6a6a; font-size: 14px; line-height: 1.35; }
.pc__now b { font-weight: 700; }
/* The one-line version a card folds to */
.pc__peek { display: none; overflow: hidden; font-size: 15px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.pc__peek b { margin-right: 3px; font-weight: 700; }

/* The pile: each card lies over the bottom edge of the one before. A covered card's "Now" line is over by then. */
.pile .pc + .pc { margin-top: -14px; }
.pile .pc:not(:last-child) .pc__now { display: none; }
/* Looking back at the question before the one in play: what to do now isn't on its cards */
.pile.is-past .pc__now { display: none; }
.pile .pc:nth-child(1) { --r: -0.9deg; --x: -3px; }
.pile .pc:nth-child(2) { --r: 0.6deg; --x: 4px; }
.pile .pc:nth-child(3) { --r: -0.5deg; --x: -2px; }
.pile .pc:nth-child(4) { --r: 0.7deg; --x: 3px; }
.pc--focus { box-shadow: var(--pc-frame), 0 1px 1px rgba(30, 22, 8, 0.08), 0 22px 40px -16px rgba(30, 22, 8, 0.55); }
/* Dealing a card (play.js): the deck's top card turns over where it lies, on a layer above the deck, and the card it
   turns into flies to the pile, turning face up on the way */
.pile { perspective: 1600px; }
.flip-layer { position: absolute; z-index: 20; pointer-events: none; perspective: 900px; }
/* Every card is a layer of its own, all the time. Browsers draw what moves on a layer of its own, as a picture they
   then tilt, and what stands still straight onto the page, tilted letter by letter, which looks a hair different; so
   each card would shift a little the moment it stops moving (as it lands, or changes shape). */
.pc { will-change: transform; }
/* Letters exactly as wide in every type size. Some browsers round each letter's width to whole pixels, each size its
   own way, so the letters of a line would shuffle about as a card's text grows or shrinks (play.js). */
.pc { text-rendering: geometricPrecision; }
/* Cards you can tap to open */
.pile .pc[role="button"] { cursor: pointer; touch-action: manipulation; }

/* The card in focus gets the room */
.pc--focus { min-height: 236px; padding: 23px 25px 19px; }
.pc--focus .pc__top { font-size: 17px; }
.pc--focus .pc__body > :first-child { margin-top: 16px; }
.pc--focus .pc__text { font-size: 23px; line-height: 1.32; }
.pc--focus .pc__value { font-size: 38px; }
.pc--focus .pc__note { font-size: 17px; }
.pc--focus .pc__now { font-size: 15px; }
.pile .pc:not(.pc--focus) .pc__text { font-size: 18px; }
/* Screens up to 1000px tall, phones and laptops (not upright tablets, which have room): from hint 2 on, the question
   stays readable in smaller type and the hints fold to one line. Tapping a folded card opens it in its place and
   folds the open one. */
@media (max-height: 1000px) {
  .pile.is-folded .pc:not(:first-child):not(.pc--focus) { padding-top: 15px; padding-bottom: 24px; }
  .pile.is-folded .pc:not(:first-child):not(.pc--focus) > :not(.pc__peek):not(.pc__name) { display: none; }
  .pile.is-folded .pc:not(:first-child):not(.pc--focus) .pc__peek { display: block; }
  .pile.is-folded .pc:first-child:not(.pc--focus) { padding-top: 15px; padding-bottom: 26px; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__top { padding-bottom: 5px; font-size: 14px; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__body { padding-bottom: 0; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__body > :first-child { margin-top: 7px; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__text { font-size: 17px; line-height: 1.35; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__now { display: none; }
  .pile.is-folded .pc--focus:not(:last-child) { min-height: 0; padding-bottom: 26px; }
  .pile.is-folded .pc--focus:not(:last-child) .pc__now { display: none; }
  .pile.is-folded .pc + .pc { margin-top: -16px; }
  /* Folded at the bottom of the pile, with no card lying on it: even padding */
  .pile.is-folded .pc:last-child:not(.pc--focus) { padding-bottom: 16px; }
}

/* The deck: the cards still face down, peeking up from the bottom of the screen. Their top 132px stand above --edge;
   below, they run on past the bottom of the screen, behind Safari's bar on iPhones. */
.deck {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--edge, 100svh) - 132px);
  width: min(560px, 100% - 36px);
  height: 300px;
  transform: translateX(-50%);
}
/* Measures --edge for play.js: the bottom edge of the screen for pinned things */
.edge-probe { position: fixed; bottom: 0; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; }
/* A card face down: thin cream paper, with the same line inside its edge as the cards face up */
.back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 300px;
  padding: 18px 22px;
  border-radius: 5px;
  color: #1b232a;
  text-align: left;
  background: #f2ecdc;
  box-shadow: inset 0 0 0 7px #f2ecdc, inset 0 0 0 8.5px rgba(27, 35, 42, 0.45), 0 0 0 1px rgba(27, 35, 42, 0.16),
    0 1px 2px rgba(40, 25, 10, 0.25), 0 -8px 22px -8px rgba(40, 25, 10, 0.5);
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
/* The etching of the table shows through it, faintly, lined up with the table: play.js works out where the etching
   lies under each card (--etching-at, --etching-size). Only its lines darken the cream, not its paper. */
.back::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: url(/assets/img/forum-piranesi.webp) var(--etching-at, 0 0) / var(--etching-size, cover) no-repeat;
  filter: grayscale(1) contrast(1.3);
  opacity: 0.15;
  mix-blend-mode: multiply;
  clip-path: inset(8.5px round 1px);
  pointer-events: none;
}
/* Where each card lies in the deck (play.js sets the offsets, deeper cards peek out above) */
.back { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)); }
.back__top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(27, 35, 42, 0.42);
  color: rgba(27, 35, 42, 0.62);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
}
.back__top b { color: #1b232a; font-weight: 600; }
/* Which card it is, on one line next to the button: a little smaller on narrow phones, so that "New question" and
   "Current question" fit, from phones 360px wide on (on narrower ones, the button goes under it instead) */
.back__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; margin-top: 10px; }
.back__kind { font-family: 'IBM Plex Sans', sans-serif; font-size: min(25px, 6.2vw); font-weight: 700; line-height: 1.2; white-space: nowrap; }
/* The button, white like those in the header */
.back__tap {
  padding: 7px 16px;
  border-radius: 999px;
  background: #fffef8;
  color: var(--ink);
  font: 700 15px/1.2 var(--sans);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(21, 29, 35, 0.12), 0 8px 20px -10px rgba(21, 29, 35, 0.4);
}

/* Tablets and laptops: the same table, wider and in bigger type, to read from around it */
@media (min-width: 700px) {
  .table__pile,
  .deck { width: min(640px, 100% - 64px); }
  .pc,
  .pc--focus { padding: 20px 27px 17px; }
  .pc__top,
  .pc--focus .pc__top { font-size: 17px; }
  .pile .pc:not(.pc--focus) .pc__text { font-size: 24px; }
  .pc--focus .pc__text { font-size: 30px; line-height: 1.3; }
  .pc__value,
  .pc--focus .pc__value { font-size: 44px; }
  .pc__now,
  .pc--focus .pc__now { font-size: 16px; }
  .pile .pc + .pc { margin-top: -16px; }
}
/* Folded there, the question and the hints' one line stay big enough to read from across the table */
@media (min-width: 700px) and (max-height: 1000px) {
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__top { font-size: 15px; }
  .pile.is-folded .pc:first-child:not(.pc--focus) .pc__text { font-size: 21px; }
  .pc__peek { font-size: 17px; }
}
@media (min-width: 900px) {
  .ph { padding: calc(16px + env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 16px max(32px, env(safe-area-inset-left)); }
  .ph .logo { font-size: 23px; }
  .ph .logo img { width: 38px; height: 38px; }
}

/* The rule sheet, set like the printed one. On phones it slides up from the bottom; on bigger screens it opens in
   the middle, in two columns on laptops. The page behind it stays where it was (it doesn't scroll anyway). */
.rules {
  --pc-ink: #151515;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: calc(100% - 40px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #fffef8;
  color: var(--pc-ink);
  font-family: 'IBM Plex Sans', sans-serif;
  box-shadow: 0 -12px 40px -16px rgba(21, 29, 35, 0.55);
}
.rules[open] { display: flex; flex-direction: column; animation: rules-up 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rules::backdrop { background: rgba(21, 29, 35, 0.45); }
.rules[open]::backdrop { animation: rules-fade-in 260ms ease-out; }
.rules.is-closing { animation: rules-down 200ms ease-in forwards; }
.rules.is-closing::backdrop { animation: rules-fade-out 200ms ease-in forwards; }
@keyframes rules-up { from { transform: translateY(100%); } }
@keyframes rules-down { to { transform: translateY(100%); } }
@keyframes rules-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes rules-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes rules-fade-in { from { opacity: 0; } }
@keyframes rules-fade-out { to { opacity: 0; } }
.rules__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 10px 22px;
  /* A soft line, just enough to show where the text scrolls under the header */
  border-bottom: 1px solid rgba(21, 21, 21, 0.14);
}
.rules__head h2 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.rules__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--pc-ink);
  transition: background-color 150ms var(--ease);
}
.rules__close:hover { background: rgba(21, 29, 35, 0.07); }
.rules__close svg { width: 22px; height: 22px; }
.rules__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px 26px;
  font-size: 16px;
  line-height: 1.45;
}
/* It takes the focus when the sheet opens, so the keys scroll it; a ring around the whole sheet isn't needed */
.rules__body:focus { outline: none; }
/* Space above a section is its padding rather than a margin, so on laptops both columns start at the same height */
.rules section { padding-top: 20px; }
.rules h3 {
  margin-bottom: 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(21, 21, 21, 0.5);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.rules b { font-weight: 700; }
.rules ul,
.rules ol { padding-left: 20px; }
.rules ul { list-style: disc; }
.rules ol { list-style: decimal; }
.rules li::marker { color: #6a6a6a; }
.rules li + li { margin-top: 5px; }
.rules section > * + p,
.rules section > p + ul { margin-top: 9px; }
.rules__more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 15px; }
.rules__more a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rules__more a:hover { color: var(--blue); }
.rules__more a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (min-width: 700px) {
  .rules {
    inset: 0;
    width: min(640px, 100% - 64px);
    max-height: min(100% - 64px, 920px);
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(21, 29, 35, 0.15), 0 30px 70px -20px rgba(21, 29, 35, 0.6);
  }
  .rules[open] { animation-name: rules-in; animation-duration: 240ms; }
  .rules.is-closing { animation-name: rules-out; animation-duration: 160ms; }
  .rules.is-closing::backdrop { animation-duration: 160ms; }
  .rules__head { padding: 14px 16px 12px 30px; }
  .rules__body { padding: 0 30px 28px; }
}
/* Laptops: two columns, split where the printed sheet splits them */
@media (min-width: 900px) {
  .rules { width: min(880px, 100% - 64px); }
  .rules__cols { columns: 2; column-gap: 44px; }
  .rules__cols > section { break-inside: avoid; }
  .rules__betting { break-before: column; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-menu,
  .rules[open],
  .rules[open]::backdrop { animation: none; }
  .pc { transition: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}