/* Which Came First? A history game with its own look: museum archive labels, rubber-stamped years,
   parchment and walnut. Everything is scoped to .wcf so it leaves site.css alone. */
.wcf {
  --paper: #f4ead3; --paper2: #e9dbb8; --card: #fffaf0; --ink: #2a1d13; --ink2: #5b4734; --rust: #b13c1d; --rust-d: #7f2a12;
  --teal: #13606a; --teal-d: #0b3f46; --brass: #a8761a; --brass-soft: #f6e3b4; --ok: #2b7a45; --bad: #b3261e; --on: #fffaf0;
  --line: rgba(42,29,19,.2); --shadow: 0 2px 0 rgba(42,29,19,.18), 0 14px 30px rgba(42,29,19,.12); --stamp: #b13c1d; --glow: rgba(255,255,255,.55);
  --c-inv: #13606a; --c-sci: #34479a; --c-pol: #a3361b; --c-cul: #84346f; --c-bld: #7a5a12; --c-spo: #2b7a45; --c-eve: #b4560f; --c-on: #fffaf0;
  --slab: "Zilla Slab", Georgia, "Times New Roman", serif;
  color: var(--ink); background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% -20%, var(--glow), transparent 60%),
    repeating-linear-gradient(0deg, rgba(42,29,19,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(42,29,19,.025) 0 1px, transparent 1px 28px);
  border-block: 3px solid var(--ink); padding: clamp(16px, 4vw, 40px) 0; margin-top: 8px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wcf {
  --paper: #16100c; --paper2: #221913; --card: #2a1f17; --ink: #f2e6cc; --ink2: #c9b79c; --rust: #f0875f; --rust-d: #b85a37;
  --teal: #6cc7cf; --teal-d: #3c8d94; --brass: #e6b85c; --brass-soft: #3a2c16; --ok: #7fd59d; --bad: #ff8f85; --on: #16100c;
  --line: rgba(242,230,204,.2); --shadow: 0 2px 0 rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.4); --stamp: #f0875f; --glow: rgba(230,184,92,.1);
  --c-inv: #6cc7cf; --c-sci: #9fb0ff; --c-pol: #f39a7a; --c-cul: #e59ad3; --c-bld: #e2c06e; --c-spo: #86d9a2; --c-eve: #f5aa6a; --c-on: #16100c; } }
:root[data-theme="dark"] .wcf {
  --paper: #16100c; --paper2: #221913; --card: #2a1f17; --ink: #f2e6cc; --ink2: #c9b79c; --rust: #f0875f; --rust-d: #b85a37;
  --teal: #6cc7cf; --teal-d: #3c8d94; --brass: #e6b85c; --brass-soft: #3a2c16; --ok: #7fd59d; --bad: #ff8f85; --on: #16100c;
  --line: rgba(242,230,204,.2); --shadow: 0 2px 0 rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.4); --stamp: #f0875f; --glow: rgba(230,184,92,.1);
  --c-inv: #6cc7cf; --c-sci: #9fb0ff; --c-pol: #f39a7a; --c-cul: #e59ad3; --c-bld: #e2c06e; --c-spo: #86d9a2; --c-eve: #f5aa6a; --c-on: #16100c; }

.backlink { font-weight: 800; font-size: 14px; text-decoration: none; justify-self: start; }
.backlink:hover { text-decoration: underline; }
.wcf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wcf-stage { max-width: 940px; margin: 0 auto; padding: 0 16px; }
.wcf button { font: inherit; color: inherit; }
.wcf :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- Start screen: hero photo with a ticket card ---------- */
.wcf-hero { position: relative; min-height: 500px; display: grid; place-items: center; padding: 48px 16px 44px; border: 3px solid var(--ink);
  border-radius: 8px; overflow: hidden; isolation: isolate; box-shadow: var(--shadow); background: #2a1d13; }
.wcf-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: saturate(.85) contrast(1.05); }
.wcf-hero-art { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 120px, rgba(255,235,190,.16) 121px 123px, transparent 124px 190px, rgba(255,235,190,.12) 191px 193px, transparent 194px 270px, rgba(255,235,190,.1) 271px 273px, transparent 274px),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,235,190,.09) 0 3deg, transparent 3deg 30deg),
    conic-gradient(from 200deg at 50% 50%, #7f2a12, #a8761a, #13606a, #34479a, #7f2a12); }
.wcf-hero-img:not([hidden]) + .wcf-hero-art { display: none; }
.wcf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(20,12,6,.15), rgba(20,12,6,.6)); }
.wcf-start { position: relative; width: min(440px, 100%); background: var(--card); color: var(--ink); text-align: center; padding: 26px clamp(18px, 5vw, 34px) 22px;
  border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.wcf-tear { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 24px -6px 0; }
.wcf-tear::before, .wcf-tear::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper2); border: 2px solid var(--line); }
.wcf-tear::before { left: -14px; } .wcf-tear::after { right: -14px; }
.wcf-logo { width: min(300px, 100%); height: auto; display: block; margin: 0 auto 6px; }
.wcf-logo .lg-frame { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.wcf-logo .lg-sand { fill: var(--brass); }
.wcf-logo .lg-cap { fill: var(--rust); }
.wcf-logo .lg-small { font-family: var(--slab); font-size: 22px; letter-spacing: .12em; fill: var(--teal); }
.wcf-logo .lg-big { font-family: var(--slab); font-size: 54px; fill: var(--rust); }
.wcf-logo .lg-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.wcf-logo .lg-dot { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.wcf-pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 12px; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--brass-soft); }
.wcf-play { display: block; width: 100%; margin: 16px 0 0; padding: 16px 20px; border: 3px solid var(--ink); border-radius: 6px; background: var(--rust); color: var(--on) !important;
  font-family: var(--slab) !important; font-size: 28px; letter-spacing: .04em; cursor: pointer; box-shadow: 0 6px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.wcf-play:hover { filter: brightness(1.06); }
.wcf-play:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.wcf-meta { display: flex; justify-content: center; gap: 4px 14px; flex-wrap: wrap; margin: 16px 0 0; font-weight: 800; font-size: 15px; }
.wcf-best { color: var(--ink2); }
.wcf-modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.wcf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer;
  font-weight: 800 !important; font-size: 14px !important; }
.wcf-chip:hover { background: var(--brass-soft); }
.wcf-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wcf-opts { margin-top: 14px; text-align: left; font-size: 14px; }
.wcf-opts summary { cursor: pointer; font-weight: 800; color: var(--ink2); text-align: center; list-style: none; }
.wcf-opts summary::-webkit-details-marker { display: none; }
.wcf-opts summary::after { content: " \25BE"; }
.wcf-opts[open] summary { margin-bottom: 10px; }
.wcf-switch { display: flex; align-items: center; gap: 12px; font-weight: 800; cursor: pointer; position: relative; justify-content: center; }
.wcf-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wcf-switch .sw { width: 44px; height: 26px; border-radius: 999px; background: var(--paper2); border: 2px solid var(--ink); position: relative; flex: none; }
.wcf-switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.wcf-switch input:checked + .sw { background: var(--teal); }
.wcf-switch input:checked + .sw::after { transform: translateX(18px); background: var(--card); }
.wcf-switch input:focus-visible + .sw { outline: 3px solid var(--brass); outline-offset: 2px; }
.wcf-switch small { display: block; font-weight: 600; color: var(--ink2); font-size: 12px; }
.wcf-credit { position: absolute; left: 12px; right: 12px; bottom: 8px; margin: 0; font-size: 12px; font-style: italic; color: rgba(255,248,232,.9); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.wcf-credit a { color: inherit; }

/* ---------- Game bar ---------- */
.wcf-game { display: grid; gap: 18px; }
.wcf-body { display: grid; gap: 18px; }
.wcf-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; background: var(--card);
  border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
.wcf-bar-title { font-family: var(--slab); font-size: 20px; color: var(--rust); }
.wcf-bar-right { display: flex; align-items: center; gap: 12px; position: relative; font-weight: 800; }
.wcf-prog { font-variant-numeric: tabular-nums; }
.wcf-score { padding: 4px 10px; border-radius: 4px; background: var(--brass-soft); font-variant-numeric: tabular-nums; }
.wcf-score b { font-family: var(--slab); font-weight: 400; font-size: 18px; }
.wcf-ring { width: 40px; height: 40px; }
.wcf-ring circle { fill: none; stroke-width: 4; }
.wcf-ring .trk { stroke: var(--paper2); }
.wcf-ring .arc { stroke: var(--teal); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 22px 22px; stroke-dasharray: 119.4; transition: stroke-dashoffset .25s linear; }
.wcf-ring.low .arc { stroke: var(--rust); }
.wcf-ring text { font-family: var(--slab); font-size: 15px; text-anchor: middle; fill: var(--ink); }
.wcf-pop { position: absolute; right: 100%; top: 50%; margin-right: 6px; padding: 2px 9px; border-radius: 999px; background: var(--ok); color: var(--on);
  font-family: var(--slab); font-size: 15px; white-space: nowrap; opacity: 0; transform: translateY(-50%); pointer-events: none; }
.wcf-pop.go { animation: wcfpop 1.1s ease-out forwards; }
@keyframes wcfpop { 0% { opacity: 0; transform: translateY(-50%) scale(.6); } 15% { opacity: 1; transform: translateY(-50%) scale(1.12); }
  30% { transform: translateY(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-140%); } }

/* ---------- Question ---------- */
.wcf-q { margin: 0; text-align: center; font-family: var(--slab); font-size: clamp(22px, 4vw, 30px); line-height: 1.15; }
.wcf-q small { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.wcf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.wcf-or { align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--on);
  font-family: var(--slab); font-size: 17px; border: 3px solid var(--ink); }
@media (max-width: 600px) {
  .wcf-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wcf-or { justify-self: center; width: 44px; height: 44px; margin: -10px 0; z-index: 2; position: relative; font-size: 15px; }
}

/* Museum label card */
.wcf-card { --c: var(--c-inv); position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; min-height: 200px; padding: 0; background: var(--card);
  border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .3s; overflow: visible; }
button.wcf-card:hover:not(:disabled) { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 2px 0 rgba(42,29,19,.18), 0 20px 36px rgba(42,29,19,.18); }
.wcf-card:disabled { cursor: default; }
.wcf-card .band { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--c); color: var(--c-on); font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; border-bottom: 3px solid var(--ink); border-radius: 3px 3px 0 0; }
.wcf-card .band svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wcf-card .band .key { margin-left: auto; margin-right: 22px; font-family: var(--slab); font-weight: 400; letter-spacing: 0; font-size: 14px; width: 24px; height: 24px; border-radius: 4px;
  display: grid; place-items: center; background: rgba(255,255,255,.25); }
.wcf-card .inner { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; flex: 1; }
.wcf-card .nm { font-family: var(--slab); font-size: clamp(20px, 3.2vw, 25px); line-height: 1.15; overflow-wrap: anywhere; }
.wcf-card .rg { font-size: 13px; font-weight: 700; color: var(--ink2); }
.wcf-card .reveal { display: none; gap: 4px; margin-top: 6px; }
.wcf-card.shown .reveal { display: grid; }
.wcf-card .what { font-size: 14px; font-weight: 700; color: var(--ink2); }
.wcf-stamp { justify-self: start; font-family: var(--slab); font-size: 30px; line-height: 1; color: var(--stamp); padding: 6px 12px 4px; border: 3px double var(--stamp); border-radius: 4px;
  transform: rotate(-4deg); font-variant-numeric: tabular-nums; }
.wcf-card.shown .wcf-stamp { animation: wcfstamp .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes wcfstamp { from { opacity: 0; transform: rotate(-14deg) scale(1.8); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.wcf-card.dim { opacity: .55; }
.wcf-card.right { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok), var(--shadow); }
.wcf-card.wrong { border-color: var(--bad); }

/* Check and X badges */
.wcf-badge { position: absolute; top: -14px; right: -12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 3px solid var(--card);
  z-index: 3; animation: wcfbadge .3s cubic-bezier(.2,1.6,.4,1) both; }
.wcf-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wcf-badge.ok { background: #2b7a45; }
.wcf-badge.no { background: #b3261e; }
@keyframes wcfbadge { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .wcf .shake { animation: wcfshake .42s ease-in-out; }
  @keyframes wcfshake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-9px); } 35% { transform: translateX(8px); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
}
@media (prefers-reduced-motion: reduce) { .wcf *, .wcf *::before { animation: none !important; transition: none !important; } }

/* Lightbulb fact */
.wcf-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--brass-soft); border: 2px solid var(--ink);
  border-left-width: 8px; border-radius: 6px; }
.wcf-fact svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcf-fact svg .glow { fill: var(--brass); stroke: none; opacity: .55; }
.wcf-fact p { margin: 0; font-size: 16px; line-height: 1.5; }
.wcf-fact p + p { margin-top: 6px; }
.wcf-fact .verdict { font-weight: 800; }
.wcf-fact .src { font-size: 13px; color: var(--ink2); }
.wcf-fact .src a { color: inherit; }
.wcf-next-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 26px; border: 3px solid var(--ink); border-radius: 6px;
  background: var(--teal); color: var(--on) !important; font-family: var(--slab) !important; font-size: 20px; letter-spacing: .03em; cursor: pointer; box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s; }
.wcf-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.wcf-btn.alt { background: var(--card); color: var(--ink) !important; }
.wcf-btn.rust { background: var(--rust); }
.wcf-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wcf-hint { text-align: center; font-size: 13px; color: var(--ink2); margin: 0; font-weight: 700; }
.wcf kbd { font: inherit; font-weight: 800; font-size: 12px; border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 5px; padding: 0 6px; background: var(--card); }

/* ---------- Timeline ---------- */
.wcf-tl { list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 10px; position: relative; }
.wcf-tl::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--ink); }
.wcf-tl .lbl { position: absolute; left: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.wcf-row { --c: var(--c-inv); position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px 10px 8px;
  background: var(--card); border: 3px solid var(--ink); border-left: 10px solid var(--c); border-radius: 6px; box-shadow: var(--shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wcf-row::before { content: ""; position: absolute; left: -33px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); }
.wcf-row:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.wcf-row.drag { z-index: 5; box-shadow: 0 18px 40px rgba(0,0,0,.3); transform: scale(1.02) rotate(-.6deg); cursor: grabbing; }
.wcf-row .grip { width: 30px; height: 44px; display: grid; place-items: center; cursor: grab; touch-action: none; color: var(--ink2); border-radius: 4px; }
.wcf-row .grip svg { width: 18px; height: 24px; fill: currentColor; }
.wcf-row .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--c-on); }
.wcf-row .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcf-row .tx { min-width: 0; display: grid; gap: 2px; }
.wcf-row .nm { font-family: var(--slab); font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.wcf-row .sub { font-size: 13px; font-weight: 700; color: var(--ink2); }
.wcf-row .had { justify-self: start; font-size: 12px; font-weight: 800; color: var(--bad); }
.wcf-row .mv { display: flex; flex-direction: column; gap: 4px; }
.wcf-row .mv button { width: 38px; height: 30px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); cursor: pointer; display: grid; place-items: center; padding: 0; }
.wcf-row .mv button:disabled { opacity: .3; cursor: default; }
.wcf-row .mv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wcf-row .yr { font-family: var(--slab); font-size: 20px; color: var(--stamp); border: 3px double var(--stamp); border-radius: 4px; padding: 3px 8px 1px; transform: rotate(-4deg);
  white-space: nowrap; animation: wcfstamp .35s cubic-bezier(.2,1.6,.4,1) both; }
.wcf-row.right { border-color: var(--ok); border-left-color: var(--c); }
.wcf-row.wrong { border-color: var(--bad); border-left-color: var(--c); }
.wcf-row .wcf-badge { top: -12px; right: -10px; width: 32px; height: 32px; }
.wcf-row .wcf-badge svg { width: 16px; height: 16px; }
.wcf-tl.done .wcf-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.wcf-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wcf-tl-head h3 { font-family: var(--slab); font-weight: 400; font-size: 18px; margin: 0; }
@media (max-width: 480px) { .wcf-row { gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; } .wcf-row .grip { display: none; } .wcf-row .nm { font-size: 16px; } .wcf-row .yr { font-size: 16px; } }

/* ---------- End screen ---------- */
.wcf-end { display: grid; gap: 18px; justify-items: center; }
.wcf-ticket { width: min(560px, 100%); background: var(--card); border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); text-align: center; padding: 26px 20px; position: relative; }
.wcf-ticket h2 { font-family: var(--slab); font-weight: 400; font-size: clamp(26px, 5vw, 36px); color: var(--rust); margin: 0; }
.wcf-big { font-family: var(--slab); font-size: clamp(52px, 12vw, 80px); line-height: 1; margin: 10px 0 4px; }
.wcf-ticket .sub { font-weight: 800; color: var(--ink2); margin: 0; }
.wcf-ticket .newbest { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px; background: var(--brass); color: var(--on); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.wcf-review { width: min(720px, 100%); list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wcf-review li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; background: var(--card); border: 2px solid var(--line); border-radius: 6px; font-size: 14px; }
.wcf-review .m { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.wcf-review .m.ok { background: #2b7a45; } .wcf-review .m.no { background: #b3261e; }
.wcf-review .m svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wcf-review b { font-family: var(--slab); font-weight: 400; color: var(--stamp); }
.wcf-loading { text-align: center; font-weight: 800; color: var(--ink2); padding: 40px 0; }

/* Guide restyle to match */
.guide h2, .guide h3 { font-family: var(--slab, "Zilla Slab"), Georgia, serif; font-weight: 400; }
#guide { font-family: inherit; }
#guide h2, #guide h3 { font-family: "Zilla Slab", Georgia, serif; font-weight: 400; letter-spacing: .01em; }

.wcf-endimg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); display: block; margin: -70px auto 10px; background: var(--paper2); box-shadow: var(--shadow); }
.wcf-ticket.has-img { margin-top: 50px; }
.wcf-endcredit { font-size: 11px; font-style: italic; color: var(--ink2); margin: 10px 0 0; }
.wcf-endcredit a { color: inherit; }