/* assets/party.css — The Knowing Game, party edition. WO90.
   DESIGNED AT 390px FIRST and widened afterwards, which is the opposite of how the rest of
   this site was built and is deliberate: the picture to design for is a dozen people on a
   couch and the floor, each on their own phone, after a drink. Everything below is sized for
   that room, and the only media query widens it.

   THE FOUR RULES THIS FILE EXISTS TO KEEP:
     1. ONE QUESTION PER SCREEN, answerable without scrolling. .pt-round is a flex column that
        fills the viewport; the options sit at the bottom where a thumb is.
     2. TAP TARGETS A THUMB HITS FIRST TIME. Nothing interactive is under 48px tall, ever.
     3. TYPE BIG ENOUGH TO READ AT ARM'S LENGTH. The round statement is 1.35rem at 390px —
        larger than anything else on this site — because it is read across a room.
     4. NO SOUND, NO REQUIRED MOTION. The only animation is a pulse on the waiting dot, and it
        is turned off entirely by prefers-reduced-motion.
   The colours are the site's own (style.css's palette), written out here because these pages
   are standalone and must draw before anything else arrives — the same reason
   report-pending.html carries its own header CSS. */

.pt-wrap { max-width: 560px; margin: 0 auto; padding: 20px 18px 40px; }
.pt-card { background: #FFFDF8; border-radius: 22px; padding: 26px 20px;
  box-shadow: 0 8px 24px rgba(33, 29, 22, .07); margin-bottom: 16px; }
/* WO100 (Aug 11 2026, a11y): #C4761A reads 3.5:1 on the card cream — under the 4.5:1 the
   small bold kicker needs. #B54800 is the site's own --orange-deep, the color every link
   in style.css already uses on cream, and it clears the threshold. Same family, darker. */
.pt-kicker { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #B54800; margin-bottom: 8px; }
.pt-card h1, .pt-card h2 { font-family: Fraunces, Georgia, serif; font-weight: 600;
  margin: 0 0 10px; line-height: 1.2; }
.pt-card h1 { font-size: 1.6rem; }
.pt-card h2 { font-size: 1.25rem; }
.pt-card p { color: #55503F; line-height: 1.6; margin: 0 0 12px; }

/* form fields, at a size a thumb finds */
.pt-field { display: block; margin: 0 0 14px; }
.pt-field span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.pt-field input, .pt-field select {
  width: 100%; box-sizing: border-box; min-height: 48px; font-size: 1rem;
  font-family: inherit; padding: 12px 14px; border: 1.5px solid #E4D9C4;
  border-radius: 12px; background: #FFF; color: #211D16; }
.pt-code { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }
.pt-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
  font-size: .92rem; color: #55503F; line-height: 1.5; }
.pt-check input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }

.pt-btn { display: inline-block; width: 100%; box-sizing: border-box; min-height: 52px;
  font-family: inherit; font-weight: 700; font-size: 1rem; background: #F0A63C;
  color: #141414; border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; }
.pt-btn[disabled] { opacity: .5; cursor: default; }
.pt-btn-quiet { background: #FFFDF8; border: 1.5px solid #F0A63C; }
.pt-note { font-size: .88rem; color: #8A8271; margin-top: 10px; }
.pt-err { color: #A33; font-size: .92rem; margin-top: 10px; }

/* the roster: names only, warm, no scores, no counts */
.pt-people { list-style: none; margin: 0; padding: 0; }
.pt-people li { display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-top: 1px solid rgba(33, 29, 22, .08); font-size: 1rem; }
.pt-people li:first-child { border-top: 0; }
.pt-dot { width: 10px; height: 10px; border-radius: 50%; background: #E4D9C4; flex: 0 0 auto; }
.pt-dot.ready { background: #4E9A5B; }
.pt-ready-word { margin-left: auto; font-size: .85rem; color: #8A8271; }

/* the lens cards — the profile wizard's interaction, at party size */
.pt-cards { display: grid; gap: 12px; }
.pt-lens { text-align: left; width: 100%; min-height: 64px; background: #FFF;
  border: 1.5px solid #E4D9C4; border-radius: 16px; padding: 14px 16px; cursor: pointer;
  font-family: inherit; font-size: 1rem; color: #211D16; line-height: 1.4; }
.pt-lens[aria-pressed="true"] { border-color: #F0A63C; background: #FFF6E7;
  box-shadow: inset 0 0 0 1.5px #F0A63C; }
.pt-lens em { display: block; font-style: normal; color: #8A8271; font-size: .85rem;
  margin-top: 4px; }

/* the ratings page: one person, two questions, repeated */
.pt-rate { border-top: 1px solid rgba(33, 29, 22, .08); padding: 16px 0; }
.pt-rate:first-child { border-top: 0; }
.pt-rate h3 { font-family: Fraunces, Georgia, serif; font-size: 1.05rem; margin: 0 0 10px; }

/* ---------- the round: one question, no scrolling, thumb at the bottom ---------- */
.pt-round { display: flex; flex-direction: column; min-height: 78vh; }
.pt-round .pt-statement { font-family: Fraunces, Georgia, serif; font-size: 1.35rem;
  line-height: 1.35; margin: 12px 0 auto; }
.pt-options { display: grid; gap: 10px; margin-top: 20px; }
.pt-option { min-height: 54px; width: 100%; text-align: left; font-family: inherit;
  font-size: 1rem; background: #FFF; border: 1.5px solid #E4D9C4; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; color: #211D16; }
.pt-option[aria-pressed="true"] { border-color: #F0A63C; background: #FFF6E7; }
.pt-locked .pt-option { opacity: .55; cursor: default; }

/* the waiting state — the room is the noise, the phone is quiet */
.pt-waiting { text-align: center; padding: 40px 0; }
.pt-waiting .pt-pulse { width: 14px; height: 14px; border-radius: 50%; background: #F0A63C;
  margin: 0 auto 18px; animation: pt-pulse 1.6s ease-in-out infinite; }
@keyframes pt-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt-waiting .pt-pulse { animation: none; opacity: .8; }
}

/* ---------- PHASE 2: THE TWELVE GAMES' OWN SCREENS ----------
   Same four rules. Every block below was sized at 390px against the longest content the game
   in question can produce — eight dossier claims, twelve wheel labels, six Three of me cards —
   and the two that cannot fit a phone without scrolling do not try to: type bingo asks about
   ONE person at a time, and the dossier's eight claims are set at .95rem in a tight list so
   the whole set is on the screen with the names under it. */

/* who the round is about, when the room is allowed to know */
.pt-subject { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600;
  color: #211D16; margin: 6px 0 10px; }

/* the dossier's eight, and Spot the fake's four */
.pt-claims { margin: 10px 0 auto; padding: 0 0 0 20px; }
.pt-claims li { font-size: .95rem; line-height: 1.45; color: #211D16; margin-bottom: 8px; }
.pt-level { display: inline; font-weight: 700; color: #C4761A; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; }

/* mystery pair's "You both…" lines sit closer together than a single statement would */
.pt-round .pt-overlap { font-size: 1.12rem; margin: 8px 0; }

/* type bingo's four cards, read once at the top of the round and then not again */
.pt-types { display: grid; gap: 8px; margin: 10px 0 auto; }
.pt-type { background: #FFF6E7; border-radius: 12px; padding: 10px 12px; font-size: .86rem;
  line-height: 1.4; color: #55503F; }
.pt-type b { display: block; color: #211D16; font-size: .95rem; }

/* the wheel: a shape, labels on, and not one number anywhere in it */
.pt-wheel { display: block; width: 100%; max-width: 300px; margin: 6px auto auto; }
.pt-wheel .pt-ring { fill: none; stroke: #E4D9C4; stroke-width: 1; }
.pt-wheel .pt-shape { fill: rgba(240, 166, 60, .35); stroke: #C4761A; stroke-width: 2; }
.pt-wheel text { font-size: 7px; fill: #8A8271; text-anchor: middle; font-family: inherit; }

/* a card-sized option, for the rounds whose options are sentences rather than names */
.pt-option-wide { min-height: 60px; line-height: 1.35; font-size: .95rem; }

/* the reveal, on every phone at once */
.pt-reveal { margin-top: auto; }
.pt-reveal h2 { font-size: 1.35rem; }

/* the medal ceremony — names and words, and the shares stay on the host's phone */
.pt-medals { display: grid; gap: 14px; margin: 10px 0; }
.pt-medal h3 { font-family: Fraunces, Georgia, serif; font-size: 1rem; margin: 0 0 6px;
  color: #211D16; }
.pt-medal ol { list-style: none; margin: 0; padding: 0; }
.pt-medal li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 1.05rem; }
.pt-medal-gold, .pt-medal-silver, .pt-medal-bronze {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.pt-medal-gold { background: #E8B33C; }
.pt-medal-silver { background: #C3C3C3; }
.pt-medal-bronze { background: #C08552; }
.pt-toppair { background: #FFF6E7; border-radius: 16px; padding: 16px; margin-top: 8px; }
.pt-toppair h3 { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; margin: 0 0 4px; }

/* the host's menu of games: one row per game, the reason underneath the ones that are off */
.pt-menu { display: grid; gap: 8px; margin-top: 12px; }
.pt-menu button { min-height: 52px; text-align: left; }
.pt-menu .pt-why { font-size: .82rem; color: #8A8271; padding: 0 4px 6px; margin: -4px 0 0; }
.pt-menu-count { float: right; color: #8A8271; font-weight: 400; font-size: .85rem; }

/* the host page is the ONE place a number is allowed (WO90 (j), Principle 4 supersession) */
.pt-count { font-family: Fraunces, Georgia, serif; font-size: 1.5rem; }
.pt-hostbar { display: grid; gap: 10px; margin-top: 14px; }

@media (min-width: 620px) {
  .pt-wrap { padding: 32px 24px 60px; }
  .pt-card { padding: 32px 30px; }
  .pt-card h1 { font-size: 2rem; }
  .pt-round .pt-statement { font-size: 1.7rem; }
  .pt-options { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================================
   WO91b, RULING 1 — THE CONSENT SCREEN
   ============================================================================================
   390px FIRST, like the rest of this file. THE SENTENCE IS THE HERO: it is set larger than the
   body and in the display face, because the whole screen exists so that somebody reads one
   sentence carefully before deciding about it — the same reason the round statement is 1.35rem.
   THE TWO BUTTONS ARE THE SAME SIZE AND THE SAME WEIGHT AS EACH OTHER. Neither is styled as the
   expected answer, neither is preselected, and the "Don't use" side is not made to look like a
   refusal: either answer is a normal answer and the page must not lean. What `aria-pressed`
   turns on is a fill, applied identically to both. */
.pt-consent{background:var(--pt-card,#FFFDF8);border-radius:16px;padding:18px 16px;margin:14px 0;
 box-shadow:0 6px 18px rgba(33,29,22,.06)}
.pt-consent-said{font-family:Fraunces,Georgia,serif;font-size:1.15rem;line-height:1.45;margin:0 0 6px}
.pt-consent-btns{display:flex;gap:10px;margin-top:14px}
.pt-choice{flex:1 1 0;min-height:48px;border:2px solid rgba(33,29,22,.18);background:#fff;
 border-radius:999px;font-family:"DM Sans",system-ui,sans-serif;font-weight:700;font-size:1rem;
 color:#211D16;cursor:pointer}
.pt-choice[aria-pressed="true"]{background:#F0A63C;border-color:#B54800}
@media (prefers-reduced-motion:no-preference){.pt-choice{transition:background .15s,border-color .15s}}

/* WO91b, RULING 3 — THE HOST'S GUEST LIST AND THE PER-PERSON STATES.
   The state word is set quietly and never in red: "part-way through the survey" is a fact about
   an evening in progress, not a failure, and a host scanning eleven rows should be able to see
   who needs a nudge without the page shouting at them. */
.pt-guest{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
 padding:9px 0;border-bottom:1px solid rgba(33,29,22,.07);flex-wrap:wrap}
.pt-guest .pt-state{font-size:.82rem;color:#8A8271;font-weight:600;text-align:right}
.pt-guest .pt-addr{word-break:break-all;font-size:.95rem}
.pt-invite-box{width:100%;min-height:96px;border:2px solid rgba(33,29,22,.16);border-radius:14px;
 padding:12px;font-family:"DM Sans",system-ui,sans-serif;font-size:1rem;background:#fff}

/* ==========================================================================================
   WO91b PHASE 2 — THE NEW ROUND SCREENS, THE INSTRUCTIONS AND THE HOUSE RULES
   ==========================================================================================
   390px first, like the rest of this file. Every tap target below is at least 44px on its
   short side; the only media query still WIDENS. */

/* RULING 12 — the one or two lines that open every round screen. Quiet enough to sit under a
   heading, loud enough that a first-time player reads it without being told to. */
.pt-instruct { margin: 10px 0 2px; font-size: .95rem; line-height: 1.45; opacity: .85; }
/* RULING 9 — the house rules, on a card, in a room where everybody is of age. */
.pt-drink { margin: 8px 0 0; font-size: .9rem; line-height: 1.45; opacity: .8; }
.pt-drink .pt-note { display: block; margin-top: 4px; }

/* PIN THE NUMBER, AND THE NORMS ROUND — one number out of a hundred, two ways to say it. */
.pt-dimension { margin: 8px 0 2px; font-size: 1.3rem; font-weight: 600; }
.pt-gloss { margin: 0 0 6px; font-size: .92rem; opacity: .8; }
.pt-scale { margin: 14px 0 4px; }
.pt-scale-value { display: block; text-align: center; font-size: 3.2rem; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.pt-slider { width: 100%; height: 44px; margin: 6px 0 0; }
.pt-scale-ends { display: flex; justify-content: space-between; font-size: .8rem; opacity: .6; }
.pt-scale-typed { display: block; margin-top: 12px; font-size: .9rem; opacity: .8; }
.pt-scale-typed input { width: 88px; min-height: 44px; margin-left: 6px; padding: 6px 10px;
  font-size: 1.1rem; text-align: center; }
.pt-bignum { font-size: 3.6rem; font-weight: 700; text-align: center; margin: 6px 0;
  font-variant-numeric: tabular-nums; }

/* SAID AND SEEN — five statements, two rows of five anchors each, on a phone. */
.pt-two-block { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
.pt-two-block:last-child { border-bottom: 0; }
.pt-two-row { margin-top: 8px; }
.pt-two-label { display: block; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.pt-two-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pt-anchor { min-height: 48px; padding: 4px 2px; font-size: .62rem; line-height: 1.15;
  border-radius: 8px; cursor: pointer; overflow: hidden; }
.pt-anchor[aria-pressed="true"] { font-weight: 700; }
.pt-anchor-full { display: block; }

/* SPOT THE FAKE NORM — the share sits where the dossier's level word sits. */
.pt-norms .pt-level { font-variant-numeric: tabular-nums; }

/* THE CHAIR'S CONSENT, AND THE CHAIR'S LAST WORD (Ruling 4). */
.pt-chairask .pt-options { margin-top: 14px; }
.pt-lastword { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); }

/* THE HOST'S "HOW TO PLAY IT", one tap under every button on the menu. */
.pt-how { margin: 2px 0 12px; font-size: .9rem; }
.pt-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer;
  opacity: .75; }
.pt-how p { margin: 4px 0 8px; line-height: 1.5; opacity: .85; }

@media (min-width: 480px) {
  .pt-anchor { font-size: .72rem; }
}