/* The US Presidents Quiz: its own look. Navy stage, parchment cards, Caslon type (the typeface of the 1776 broadside
   of the Declaration of Independence), flag red and old gold. One look in light and dark mode; all text pairs pass contrast. */
.pz-stage, .pz-band {
  --ink: #0e1a31; --navy: #17284a; --navy2: #20365f; --parch: #f7f0e1; --parch2: #ede2c9; --paper-line: #d8c9a6;
  --text: #1d2233; --muted: #5a5a66; --red: #a3172b; --red-soft: #f6dcd9; --gold: #c9a44c; --gold-ink: #6f5413; --ok: #2c6a3d; --ok-soft: #dcefdc;
  --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif; --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
}
.pz-band { background: var(--ink); color: var(--parch); }
.pz-band .wrap { padding-top: 14px; padding-bottom: 0; }
.pz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.pz-back { display: inline-flex; gap: 6px; align-items: center; color: var(--parch); font-weight: 800; font-size: 14px; text-decoration: none; opacity: .85; }
.pz-back:hover { opacity: 1; text-decoration: underline; }

.pz-stage { position: relative; color: var(--text); font-family: var(--serif); padding: 18px max(16px, env(safe-area-inset-left, 0px)) 40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.07) 0 1.2px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.05) 0 1px, transparent 1.4px) 0 0 / 34px 34px,
    linear-gradient(180deg, var(--ink), var(--navy) 60%, var(--ink));
  min-height: 420px; }
.pz-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 28px, var(--parch) 28px 56px); }
.pz-stage *, .pz-stage *::before, .pz-stage *::after { box-sizing: border-box; }
.pz-stage :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pz-loading { color: var(--parch); text-align: center; padding: 60px 0; }

/* Cards */
.pz-card { position: relative; background: var(--parch); border-radius: 6px; box-shadow: 0 0 0 1px var(--paper-line), 0 0 0 6px var(--parch), 0 0 0 7px var(--gold), 0 24px 50px rgba(0,0,0,.45);
  background-image: linear-gradient(rgba(201,164,76,.06) 1px, transparent 1px); background-size: 100% 28px; }

/* Start: hero collage of portraits with a centered card */
.pz-hero { position: relative; max-width: 1120px; margin: 0 auto; border-radius: 10px; overflow: hidden; min-height: 560px; display: grid; place-items: center; padding: 40px 16px 52px; isolation: isolate; }
.pz-collage { position: absolute; inset: -40px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: 118px; gap: 4px; z-index: -2; filter: sepia(.55) saturate(.7) contrast(1.05); transform: rotate(-3deg) scale(1.12); }
.pz-collage img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; opacity: .9; }
.pz-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(14,26,49,.55), rgba(14,26,49,.92) 75%); }
@media (prefers-reduced-motion: no-preference) { .pz-collage { animation: pz-drift 60s linear infinite alternate; } }
@keyframes pz-drift { from { transform: rotate(-3deg) scale(1.12) translateY(0); } to { transform: rotate(-3deg) scale(1.12) translateY(-120px); } }
.pz-startcard { width: min(100%, 460px); padding: 34px 28px 22px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.pz-pill { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-ui, system-ui); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; padding: 5px 14px; border-radius: 999px; box-shadow: 0 0 0 3px var(--parch); }
.pz-seal { width: 64px; height: 64px; flex: none; }
.pz-seal .s1 { fill: var(--navy); } .pz-seal .s2 { fill: none; stroke: var(--gold); stroke-width: 1.5; } .pz-seal .s3 circle { fill: var(--parch); }
.pz-seal .s4 { fill: var(--gold); } .pz-seal .s5 { fill: var(--parch); font: 700 9px/1 var(--serif); text-anchor: middle; letter-spacing: .1em; }
.pz-title { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 7vw, 50px); line-height: 1.02; color: var(--ink); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.pz-tag { margin: 0; font-style: italic; color: var(--muted); font-size: 16px; }
.pz-play { width: 100%; margin-top: 8px; font: 700 22px/1 var(--serif); letter-spacing: .04em; color: #fff; background: var(--navy); border: 0; border-radius: 6px; min-height: 62px; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 4px var(--gold), 0 4px 0 var(--ink); transition: transform .1s, background .15s; }
.pz-play:hover { background: var(--navy2); }
.pz-play:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 4px var(--gold), 0 1px 0 var(--ink); }
.pz-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-ui, system-ui); font-weight: 800; font-size: 15px; color: var(--text); }
.pz-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.pz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pz-switch i { width: 46px; height: 26px; border-radius: 999px; background: #b9b2a2; position: relative; transition: background .15s; }
.pz-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.pz-switch input:checked + i { background: var(--navy); }
.pz-switch input:checked + i::after { transform: translateX(20px); }
.pz-switch input:focus-visible + i { outline: 3px solid var(--gold); outline-offset: 2px; }
.pz-now { margin: 0; font-size: 14px; color: var(--muted); }
.pz-opts { font: 800 13px/1 var(--font-ui, system-ui); color: var(--navy); background: none; border: 0; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.pz-opts::after { content: " \25BE"; }
.pz-opts[aria-expanded="true"]::after { content: " \25B4"; }
.pz-optbox { width: 100%; display: grid; gap: 10px; text-align: left; }
.pz-modes { display: grid; gap: 6px; }
.pz-mode { font: inherit; text-align: left; border: 1px solid var(--paper-line); background: #fffaf0; color: var(--text); border-radius: 6px; padding: 9px 12px; cursor: pointer; display: grid; gap: 1px; }
.pz-mode b { font-size: 16px; } .pz-mode small { color: var(--muted); font-size: 13px; }
.pz-mode[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--red); background: #fff; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-chip { font: 700 13px/1 var(--font-ui, system-ui); border: 1px solid var(--paper-line); background: #fffaf0; color: var(--text); border-radius: 999px; padding: 9px 12px; cursor: pointer; min-height: 36px; }
.pz-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pz-best { margin: 4px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; border-top: 1px solid var(--paper-line); padding-top: 10px; width: 100%; }
.pz-best b { color: var(--ink); }
.pz-imgcred { position: absolute; left: 14px; bottom: 10px; margin: 0; font-style: italic; font-size: 12px; color: rgba(247,240,225,.8); }
@media (max-width: 520px) { .pz-hero { min-height: 520px; padding: 34px 8px 56px; } .pz-startcard { padding: 30px 18px 18px; } .pz-collage { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-rows: 94px; } }

/* Playing */
.pz-play-card, .pz-result { max-width: 860px; margin: 8px auto 0; }
.pz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; border-bottom: 1px solid var(--paper-line); flex-wrap: wrap; }
.pz-qt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--ink); min-width: 0; }
.pz-qt .pz-seal { width: 34px; height: 34px; } .pz-qt .pz-seal .s5 { display: none; }
.pz-meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui, system-ui); font-weight: 800; font-size: 16px; margin-left: auto; }
.pz-of { white-space: nowrap; }
.pz-score { background: #fffaf0; border: 1px solid var(--paper-line); padding: 6px 10px; border-radius: 6px; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pz-plus { font-size: 13px; color: #fff; background: var(--ok); padding: 3px 9px; border-radius: 999px; opacity: 0; transform: translateY(6px); }
.pz-plus.show { animation: pz-pop 1.6s ease-out forwards; }
@keyframes pz-pop { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.pz-ring { position: relative; width: 44px; height: 44px; flex: none; }
.pz-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.pz-ring circle { fill: none; stroke-width: 3.5; }
.pz-ring .r0 { stroke: var(--paper-line); } .pz-ring .r1 { stroke: var(--navy); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.pz-ring.low .r1 { stroke: var(--red); }
.pz-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.pz-prog { height: 4px; background: var(--parch2); }
.pz-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .3s; }
.pz-body { padding: 18px 20px 6px; }
.pz-q { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.2; text-align: center; margin: 4px 0 0; color: var(--ink); }
.pz-sub { text-align: center; color: var(--muted); margin: 6px 0 0; font-size: 15px; }
.pz-media { margin-top: 14px; display: grid; justify-items: center; gap: 8px; }
.pz-nohint { max-width: 420px; text-align: center; font-size: 15px; color: var(--muted); margin: 0; }
.pz-nohint b { color: var(--text); }

/* Portrait frames: gilt edge; initials or a silhouette until the image exists */
.por { position: relative; width: min(100%, 220px); aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, var(--navy2), var(--ink)); flex: none;
  border-radius: 4px; box-shadow: 0 0 0 3px var(--parch), 0 0 0 6px var(--gold), 0 10px 20px rgba(0,0,0,.25); }
.por img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.por .ini { position: absolute; inset: 0; display: none; place-items: center; font: 400 clamp(40px, 9vw, 60px)/1 var(--display); color: var(--gold); }
.por.missing img { display: none; }
.por.missing .ini { display: grid; }
.por .ini svg { width: 46%; height: auto; opacity: .7; }
@media (max-width: 520px) { .por.q { width: min(100%, 180px); } }
.por.sm { width: 76px; box-shadow: 0 0 0 2px var(--parch), 0 0 0 4px var(--gold); } .por.sm .ini { font-size: 26px; }
.por.xs { width: 40px; box-shadow: 0 0 0 2px var(--gold); border-radius: 3px; } .por.xs .ini { font-size: 15px; }
.pcred { margin: 0; font-family: var(--font-ui, system-ui); font-size: 12px; color: var(--muted); text-align: center; }

/* Answers: 2x2 grid with check and X badges */
.pz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 20px auto 6px; max-width: 720px; }
.pz-choice { position: relative; font: 700 17px/1.25 var(--serif); color: var(--ink); background: #fffdf7; border: 2px solid var(--paper-line); border-radius: 6px; min-height: 60px;
  padding: 12px 14px 12px 42px; text-align: center; cursor: pointer; overflow-wrap: anywhere; transition: border-color .15s, background .15s, opacity .25s, transform .1s; box-shadow: 0 3px 0 var(--paper-line); }
.pz-choice .k { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--paper-line); color: var(--muted); font: 800 12px/20px var(--font-ui, system-ui); text-align: center; }
@media (hover: hover) { .pz-choice:hover:not(:disabled) { border-color: var(--navy); background: #fff; } }
.pz-choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-line); }
.pz-choice:disabled { cursor: default; }
.pz-choice.right { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 3px 0 var(--ok); }
.pz-choice.wrong { border-color: var(--red); background: var(--red-soft); box-shadow: 0 3px 0 var(--red); }
.pz-choice.dim { opacity: .4; }
.pz-choice .badge, .pz-order .badge { display: none; width: 30px; height: 30px; border-radius: 50%; color: #fff; place-items: center; }
.pz-choice .badge { position: absolute; top: -13px; right: -13px; box-shadow: 0 0 0 3px var(--parch); }
.pz-choice .badge svg, .pz-order .badge svg { width: 18px; height: 18px; }
.pz-choice.right .badge { display: grid; background: var(--ok); }
.pz-choice.wrong .badge { display: grid; background: var(--red); }
@media (max-width: 420px) { .pz-choices { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pz-choice { min-height: 54px; font-size: 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .shake { animation: pz-shake .4s ease-in-out; }
  @keyframes pz-shake { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 7px; } 60% { translate: -5px; } 80% { translate: 3px; } }
  .pz-clues li.new { animation: pz-in .35s ease-out; }
  @keyframes pz-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* After each answer */
.pz-foot { padding: 0 20px 18px; }
.pz-foot:empty { padding: 0; }
.pz-next-row { display: flex; justify-content: center; margin: 14px 0 4px; }
.pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 18px/1 var(--serif); border-radius: 6px; min-height: 52px; padding: 0 26px; cursor: pointer; border: 2px solid var(--navy); }
.pz-btn svg { width: 20px; height: 20px; }
.pz-btn.primary { background: var(--navy); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.pz-btn.primary:hover { background: var(--navy2); }
.pz-btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pz-btn.ghost { background: transparent; color: var(--navy); }
.pz-btn:disabled { opacity: .45; cursor: default; }
.explain { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 14px; padding: 16px 16px 14px; border-top: 1px solid var(--paper-line); font-size: 16px; line-height: 1.5; }
.explain .bulb { width: 26px; height: 26px; color: var(--gold-ink); margin-top: 2px; }
.explain .lead { margin: 0; }
.explain .yes { color: var(--ok); font-weight: 700; } .explain .no { color: var(--red); font-weight: 700; }
.explain ul, .explain ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.pz-reveal { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 4px; }

/* Who am I? */
.pz-clues { list-style: none; margin: 16px auto 0; padding: 0; display: grid; gap: 8px; max-width: 720px; }
.pz-clues li { position: relative; background: #fffdf7; border: 1px solid var(--paper-line); border-radius: 6px; padding: 10px 12px 10px 46px; font-size: 17px; line-height: 1.4; }
.pz-clues li::before { content: attr(data-n); position: absolute; left: 10px; top: 9px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--parch); font: 700 13px/26px var(--serif); text-align: center; }
.pz-clues li.locked { color: var(--muted); font-style: italic; background: transparent; border-style: dashed; }
.pz-clues li.locked::before { background: var(--parch2); color: var(--muted); }
.pz-cluerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px auto 0; max-width: 720px; }
.pz-cluerow .pz-btn { min-height: 44px; font-size: 16px; padding: 0 18px; }
.pz-worth { font-family: var(--font-ui, system-ui); font-weight: 800; font-size: 14px; color: var(--muted); }
.pz-worth b { color: var(--red); }

/* In order */
.pz-order { list-style: none; margin: 16px auto 0; padding: 0; display: grid; gap: 8px; max-width: 620px; counter-reset: none; }
.pz-order li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; background: #fffdf7; border: 2px solid var(--paper-line); border-radius: 6px; padding: 8px 8px 8px 10px; touch-action: none; user-select: none; cursor: grab; transition: border-color .15s, background .15s; }
.pz-order li.sel { border-color: var(--navy); background: #fff; box-shadow: inset 4px 0 0 var(--red); }
.pz-order li.drag { box-shadow: 0 12px 26px rgba(0,0,0,.25); position: relative; z-index: 2; cursor: grabbing; }
.pz-order li.ok { border-color: var(--ok); background: var(--ok-soft); cursor: default; }
.pz-order li.bad { border-color: var(--red); background: var(--red-soft); cursor: default; }
.pz-order li.ok .badge { display: grid; background: var(--ok); } .pz-order li.bad .badge { display: grid; background: var(--red); }
.pz-order .pos { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--parch); font: 700 13px/26px var(--serif); text-align: center; }
.pz-order .nm { font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.pz-order .nm small { display: block; font-family: var(--font-ui, system-ui); font-weight: 700; color: var(--muted); font-size: 13px; }
.pz-order .mv { display: flex; gap: 4px; }
.pz-order .mv button { width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--paper-line); background: var(--parch); color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.pz-order .mv button:disabled { opacity: .35; cursor: default; }
.pz-order .mv svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .pz-order li { gap: 8px; } .pz-order .nm { font-size: 15px; } .pz-order .mv button { width: 38px; } }

.pz-quit { display: block; margin: 18px auto 0; font: 800 13px/1 var(--font-ui, system-ui); color: rgba(247,240,225,.8); background: none; border: 0; padding: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Results */
.pz-result { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 34px 20px 24px; }
.pz-result > .pz-seal { width: 72px; height: 72px; }
.pz-result .pz-pill { position: static; transform: none; }
.pz-result .big { font: 400 clamp(56px, 13vw, 84px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-result .of { margin: 0; color: var(--muted); font-style: italic; }
.pz-result .msg { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.pz-result .best { margin: 0; color: var(--muted); }
.pz-new { font: 800 12px/1 var(--font-ui, system-ui); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); }
.pz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.pz-review { width: 100%; max-width: 620px; text-align: left; margin-top: 14px; }
.pz-review h3 { font: 700 19px/1.2 var(--serif); margin: 0 0 8px; }
.pz-review ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pz-review li { display: flex; align-items: center; gap: 12px; background: #fffdf7; border: 1px solid var(--paper-line); border-radius: 6px; padding: 6px 10px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.pz-review .t { flex: 1; min-width: 0; }
.pz-review .t span { color: var(--muted); font-family: var(--font-ui, system-ui); font-size: 13px; }
.pz-review .p { font-family: var(--font-ui, system-ui); font-weight: 800; color: var(--ok); white-space: nowrap; }
.pz-review .p.zero { color: var(--red); }

/* Guide below the game: plain and readable, with Caslon headings */
.pz-guide h2, .pz-guide h3 { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; }
.pq-credits { font-size: 13px; color: var(--muted); margin: 28px 0 0; max-width: 72ch; line-height: 1.5; }
.pq-credits a { color: inherit; }
.pq-credits summary { cursor: pointer; font-weight: 800; }
.pq-credits ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .pz-stage *, .pz-stage { transition: none !important; animation: none !important; } }