/* Today's Sparks pages (lane S2b): /sparks/, /sparks/<id>/, /u/<name>/. Tokens + the 37px bar slot live inline in each page. */
*{ box-sizing:border-box }
html,body{ margin:0 }
body{ background:var(--paper); color:var(--ink); font-family:var(--ui); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>") }
@media (prefers-color-scheme: dark){ body::before{ mix-blend-mode:screen; opacity:.6 } }
a{ color:inherit }
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 16px 90px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:8px; top:-60px; z-index:5; background:var(--crimson); color:#fff; padding:8px 12px; border-radius:8px; font-weight:600 }
.skip:focus{ top:44px }

/* site header row (same look as /support/) */
.sp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:22px 0 16px; border-bottom:1px solid var(--line) }
.brand{ display:flex; align-items:baseline; text-decoration:none; color:var(--ink) }
.brand-logo{ display:block; width:clamp(140px,28vw,190px); aspect-ratio:800/233; background-color:var(--ink);
  -webkit-mask:url(/images/fbe-games-logo.png) center/contain no-repeat; mask:url(/images/fbe-games-logo.png) center/contain no-repeat; transition:background-color .25s ease }
.brand:hover .brand-logo,.brand:focus-visible .brand-logo{ background-color:var(--crimson) }
.nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
/* A phone always gets the nav on its own row: the account chip arrives late, and wrapping THEN pushed the page down ~53px (CLS). */
@media (max-width:560px){ .sp-head .nav{ flex-basis:100% } }
.home-link{ font-size:.8125rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line); padding:9px 14px; border-radius:999px; transition:.18s ease; white-space:nowrap }
.home-link:hover{ color:var(--crimson); border-color:var(--crimson) }
.home-link[aria-current="page"]{ color:var(--crimson); border-color:var(--crimson) }

.crumb{ display:inline-flex; align-items:center; gap:6px; margin:16px 0 0; font-size:.875rem; font-weight:600; color:var(--ink-soft); text-decoration:none }
.crumb:hover{ color:var(--crimson) }

/* buttons */
.sp-btn{ font:inherit; font-size:.9375rem; font-weight:650; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 18px; border-radius:12px; cursor:pointer;
  color:#fff; background:var(--crimson); border:0; text-decoration:none; transition:filter .15s ease, transform .12s ease }
.sp-btn:hover{ filter:brightness(1.08) } .sp-btn:active{ transform:scale(.97) }
.sp-ghost{ font:inherit; font-size:.9375rem; font-weight:600; min-height:44px; padding:9px 14px; border-radius:12px; cursor:pointer; color:var(--ink); background:transparent;
  border:1px solid var(--line); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px }
.sp-ghost:hover{ border-color:var(--crimson) }
.sp-btn:focus-visible,.sp-ghost:focus-visible,.sp-tab:focus-visible,.sp-seg button:focus-visible,.sp-tile:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px }

/* the goal line: crimson-to-gold, a slow shimmer (owner rule: the goal is coloured and moves a little) */
.sp-goal{ display:flex; align-items:center; gap:.45em; font-family:var(--display); font-style:italic; font-weight:600; font-size:clamp(1.125rem,3.6vw,1.375rem); margin:4px 0 0 }
/* The shimmer rides the words only: background-clip:text on the whole line would make the checkbox transparent too. */
.sp-goal-t{ background:linear-gradient(100deg,var(--crimson) 0%,var(--gold) 45%,var(--crimson) 90%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:spGoal 7s ease-in-out infinite alternate }
/* Today's bonus checkbox (twin of the panel's in feed.css): an outlined box that fills gold with a tick once one of today's is answered. */
.spk-chk{ flex:0 0 auto; position:relative; box-sizing:border-box; display:inline-block; width:1em; height:1em; border:2px solid color-mix(in srgb,var(--gold) 62%,var(--ink)); border-radius:.25em }
.spk-chk.is-done{ background:var(--gold); border-color:var(--gold) }
.spk-chk.is-done::after{ content:""; position:absolute; left:32%; top:10%; width:28%; height:54%; border:solid var(--paper,#fff); border-width:0 .14em .14em 0; transform:rotate(45deg) }
@keyframes spGoal{ to{ background-position:100% 0 } }
.spark-ico{ display:inline-block; animation:spFlicker 3.4s ease-in-out infinite }
@keyframes spFlicker{ 0%,100%{ opacity:1; transform:scale(1) } 45%{ opacity:.82; transform:scale(.94) rotate(-4deg) } 55%{ opacity:1; transform:scale(1.06) rotate(3deg) } }
@media (prefers-reduced-motion:reduce){ .sp-goal-t,.spark-ico{ animation:none } }

/* hub hero */
.sp-hero{ padding:22px 0 6px }
.sp-hero h1{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,6vw,2.75rem); line-height:1.05; margin:0; letter-spacing:-.01em }
.sp-together{ margin:10px 0 0; font-size:.9375rem; color:var(--ink-soft) } .sp-together b{ color:var(--ink) }
.sp-week{ margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--tile) }
.sp-week-h{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:.875rem; font-weight:600 }
.sp-bar{ position:relative; height:12px; border-radius:999px; background:var(--paper-2); margin:8px 0 2px; overflow:hidden }
.sp-bar > i{ position:absolute; inset:0 auto 0 0; width:var(--w,0%); border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--crimson)); transition:width .6s ease }
.sp-week small{ color:var(--ink-soft); font-size:.8125rem }
/* Holds the community-goal box's measured height until the day's data lands, so the tabs below do not jump (it was a 317px shift).
   Only that box: your own three-stop bar shows only in weeks with weekly Sparks, so reserving it would overshoot the other weeks. */
.sp-week-sk{ margin:14px 0 0; height:9.125rem; border-radius:14px }
@media (min-width:600px){ .sp-week-sk{ height:5.8rem } }
/* Your weekly bar's measured height, reserved only when the hub's pre-paint knows this week has weekly Sparks (fb-sparks-wk). */
.sp-myweek-sk{ margin:14px 0 0; height:10.375rem; border-radius:14px } .sp-myweek-sk.is-out{ margin-top:10px; height:2.625rem; border-radius:8px }
@media (min-width:600px){ .sp-myweek-sk{ height:8.625rem } .sp-myweek-sk.is-out{ height:1.3125rem } }
/* Your own three weekly stops: the Crown track's parts, sized for the hero. */
.sp-myweek .ct-h h2{ font-size:1.0625rem } .sp-myweek .ct-goal{ margin:4px 0 4px; font-size:.9375rem } .sp-myweek .ct-track{ margin:16px 14px 30px 0 }
.sp-myweek-out{ margin:10px 0 0; font-size:.875rem; color:var(--ink-soft) } .sp-myweek-out a{ color:var(--crimson); font-weight:650 }

/* tabs */
.sp-tabs{ display:flex; gap:4px; margin:18px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none }
.sp-tab{ font:inherit; font-size:.9375rem; font-weight:650; color:var(--ink-soft); background:none; border:0; border-bottom:3px solid transparent; padding:12px 12px 10px; cursor:pointer; white-space:nowrap; min-height:44px }
.sp-tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--crimson) }
.sp-tab:hover{ color:var(--ink) }
.sp-panel{ padding:6px 0 0 }
.sp-panel[hidden]{ display:none }

/* sections + tiles */
.sp-sec{ margin:22px 0 0 }
.sp-sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px }
.sp-sec-h h2{ font-family:var(--display); font-weight:600; font-size:1.375rem; margin:0 }
.sp-sec-h span{ font-size:.8125rem; color:var(--ink-soft) }
.sp-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)) }
.sp-tile{ position:relative; display:flex; flex-direction:column; gap:6px; min-height:120px; padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--tile);
  text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease }
.sp-tile:hover{ border-color:var(--crimson); transform:translateY(-1px); box-shadow:0 12px 26px -20px var(--shadow) }
.sp-tile .k{ display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft) }
.sp-tile .q{ font-family:var(--display); font-weight:600; font-size:1.1875rem; line-height:1.2; margin:0; overflow-wrap:anywhere }
.sp-tile .m{ margin-top:auto; display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.8125rem; color:var(--ink-soft) }
.sp-tile.is-done{ background:color-mix(in srgb,var(--tile) 88%,var(--gold)) }
.sp-tick{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.875rem;
  background:var(--gold); color:#fff; font-weight:800 }
.sp-tile.big{ min-height:150px } .sp-tile.big .q{ font-size:1.375rem }
.sp-feat{ border-color:color-mix(in srgb,var(--gold) 60%,var(--line)); background:linear-gradient(140deg,color-mix(in srgb,var(--gold) 14%,var(--tile)),var(--tile)) }

/* All Sparks list */
.sp-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 4px; font-size:.875rem }
.sp-tools label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; min-height:40px }
.sp-tools input[type=checkbox]{ width:20px; height:20px; accent-color:var(--crimson) }
.sp-search{ flex:1 1 200px; font:inherit; font-size:.9375rem; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:42px }
.sp-search:focus{ outline:none; border-color:var(--crimson) }
.sp-day{ font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px }
.sp-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--tile); overflow:hidden }
.sp-list li + li{ border-top:1px solid var(--line-2,var(--line)) }
.sp-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; text-decoration:none; color:var(--ink); min-height:56px }
.sp-row:hover{ background:color-mix(in srgb,var(--crimson) 6%,transparent) }
.sp-row .ic{ font-size:1.25rem; flex:none; width:1.6em; text-align:center }
.sp-row .t{ flex:1 1 auto; min-width:0; font-weight:600; overflow-wrap:anywhere } .sp-row .n{ flex:none; font-size:.8125rem; color:var(--ink-soft) }
.sp-row .ok{ flex:none; color:var(--gold); font-weight:800 }
/* The one "answered" mark on every Sparks surface: a gold text tick, not a platform emoji (✅ is green on one phone, purple on another). */
.sp-ok{ color:var(--gold); font-weight:800 } .sp-row .ok.no{ color:var(--line) }

/* Quick Sparks */
.sp-quick{ margin:16px 0 0; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--tile) }
.sp-quick-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:.875rem; font-weight:650; color:var(--ink-soft) }
.sp-left{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; background:var(--paper-2); color:var(--ink) }
.sp-quick h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.375rem,5vw,1.75rem); line-height:1.15; margin:10px 0 14px }
.sp-quick-acts{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0 }

/* Spark page */
.spk-card{ margin:12px 0 0; padding:20px 18px 16px; border-radius:20px; border:1px solid var(--line); background:var(--tile); box-shadow:0 16px 34px -26px var(--shadow) }
.spk-kicker{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft) }
.sp-kico{ flex:none; width:1.35em; height:1.35em; color:color-mix(in srgb,var(--gold) 72%,var(--ink)) }
.sp-gly{ font-weight:800; color:var(--crimson); line-height:1 }
.spk-card h1{ font-family:var(--display); font-weight:600; font-size:clamp(1.75rem,6vw,2.5rem); line-height:1.1; margin:8px 0 10px; overflow-wrap:anywhere }
.spk-meta{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:0; padding:0; list-style:none; font-size:.875rem; color:var(--ink-soft) }
.spk-meta li{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--paper-2) }
.spk-meta b{ color:var(--ink) }
.spk-acts{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 }
.spk-by{ margin:12px 0 0; font-size:.8125rem; color:var(--ink-soft) }
.spk-sec{ margin:20px 0 0; padding:16px 16px 14px; border-radius:18px; border:1px solid var(--line); background:var(--tile) }
.spk-sec > h2,.spk-seg-row h2{ font-family:var(--display); font-weight:600; font-size:1.25rem; margin:0 0 10px }
.spk-res-line{ font-size:1.0625rem; font-weight:650; margin:0 0 12px }
.spk-res-line b{ color:color-mix(in srgb,var(--crimson) 75%,var(--ink)) }
.spk-res{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.spk-res li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center }
.spk-res .lbl{ font-weight:600; overflow-wrap:anywhere } .spk-res .pct{ font-variant-numeric:tabular-nums; font-weight:700 }
.spk-res .sp-bar{ grid-column:1 / -1; margin:0; height:14px }
.spk-res li.mine .lbl::after{ content:"\2190 you"; margin-left:.5em; font-weight:700; color:color-mix(in srgb,var(--crimson) 75%,var(--ink)); font-size:.8125rem }
.spk-res li.top .sp-bar > i{ background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 50%,var(--crimson))) }
.spk-groups{ display:flex; flex-wrap:wrap; gap:6px }
.spk-groups span{ padding:5px 11px; border-radius:999px; background:var(--paper-2); font-size:.875rem; font-weight:600 } .spk-groups b{ color:var(--ink-soft); font-weight:600 }
.spk-seg-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 4px }
.spk-seg-row h2{ margin:0 }
.sp-seg{ display:inline-flex; padding:3px; gap:2px; border-radius:12px; background:var(--paper-2) }
.sp-seg button{ font:inherit; font-size:.875rem; font-weight:650; color:var(--ink-soft); background:transparent; border:0; border-radius:9px; padding:8px 12px; cursor:pointer; min-height:38px }
.sp-seg button[aria-pressed="true"]{ background:var(--tile); color:var(--ink); box-shadow:0 1px 4px -1px var(--shadow) }
.spk-more{ display:flex; justify-content:center; margin:10px 0 0 }
.spk-next{ display:flex; justify-content:center; margin:26px 0 0 }
.spk-next .sp-btn{ font-size:1.0625rem; min-height:52px; padding:12px 28px }
.spk-done{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 6px; font-weight:650 }

/* The Spark page carousel (feed/sparks-carousel.js). Core rules mirror sparks-feed.css's carousel block (test-sparks-ui pins them). */
.spk-car{ position:relative; --spk-gap:12px }
.spk-car-vp{ position:relative; overflow:hidden; touch-action:pan-y; overscroll-behavior-x:contain }
.spk-car-vp.spk-car-anim-h{ transition:height .3s cubic-bezier(.22,.8,.24,1) }
.spk-car-track{ display:flex; gap:var(--spk-gap); align-items:flex-start; will-change:transform; transition:transform .38s cubic-bezier(.22,.8,.24,1) }
.spk-car-track.spk-car-drag{ transition:none }
.spk-car-pane{ flex:0 0 100%; min-width:0; outline:none }
.spk-car-dragging{ -webkit-user-select:none; user-select:none; cursor:grabbing }
.spk-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* A narrower track lets the next Spark's edge peek in from the right: the cue that the page swipes. Steps stay one pane. */
.sp-run .spk-car-track{ width:calc(100% - 26px) }
.sp-run .spk-car-pane[inert]{ opacity:.55 }
.sp-run .spk-card{ box-shadow:none }
.sp-q{ font-family:var(--display); font-weight:600; font-size:clamp(1.75rem,6vw,2.5rem); line-height:1.1; margin:8px 0 10px; overflow-wrap:anywhere }
.sp-your{ margin-top:14px }
.sp-end{ border:1px dashed var(--line); border-radius:20px; margin-top:12px }
.sp-dots{ display:flex; justify-content:center; align-items:center; gap:10px; min-height:20px; margin:10px 0 0 }
.sp-dots-i{ display:flex; align-items:center; gap:7px }
/* Owner sketch: dots under Next Spark with a sideways arrow. The arrows are the visible "this swipes" cue and the mouse/keyboard way through. */
.sp-arr{ font:inherit; font-size:1.25rem; font-weight:700; line-height:1; width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line); transition:color .15s ease, border-color .15s ease, opacity .15s ease }
.sp-arr:hover{ color:var(--crimson); border-color:var(--crimson) }
.sp-arr:focus-visible{ outline:2px solid var(--crimson); outline-offset:2px }
.sp-arr:disabled{ opacity:.3; cursor:default; border-color:var(--line); color:var(--ink-soft) }
.sp-arr[data-dir="next"]:not(:disabled){ color:var(--crimson); border-color:color-mix(in srgb,var(--crimson) 45%,var(--line)) }
/* First visit: one sideways breath shows the next Spark sliding in from the right (same move as the feed card's nudge). */
.sp-run.spk-nudge .spk-car-track{ animation:spPageNudge 1.15s cubic-bezier(.3,.7,.3,1) }
@keyframes spPageNudge{ 0%,100%{ translate:0 } 38%{ translate:-34px } 64%{ translate:5px } }
.sp-dots i{ width:7px; height:7px; border-radius:50%; background:color-mix(in srgb,var(--ink) 20%,transparent); transition:transform .2s ease, background .2s ease }
.sp-dots i.on{ background:var(--gold); transform:scale(1.35) }
.sp-bodysk{ padding:18px 4px }
@media (prefers-reduced-motion:reduce){ .spk-car-track, .spk-car-vp.spk-car-anim-h, .sp-dots i{ transition:none } .sp-run.spk-nudge .spk-car-track{ animation:none } }

/* states: loading / empty / error (designed, centred, with a next action) */
.sp-state{ text-align:center; padding:34px 16px; color:var(--ink-soft) }
.sp-state .big{ font-size:2.25rem; line-height:1; display:block; margin:0 0 8px }
.sp-state h2,.sp-state h3{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.375rem; margin:0 0 6px }
.sp-state p{ margin:0 auto 14px; max-width:42ch }
.sk{ display:block; border-radius:10px; background:linear-gradient(90deg,var(--paper-2) 0%,color-mix(in srgb,var(--paper-2) 60%,var(--tile)) 50%,var(--paper-2) 100%);
  background-size:200% 100%; animation:sk 1.3s ease-in-out infinite }
@keyframes sk{ to{ background-position:-200% 0 } }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none } }
.sk-line{ height:14px; margin:8px 0 } .sk-title{ height:34px; width:80%; margin:10px 0 } .sk-tile{ height:130px; border-radius:16px }

/* profile */
.pf-head{ position:relative; margin:16px 0 0; padding:22px 18px 18px; border-radius:22px; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--pf,var(--crimson)) 20%,var(--tile)),var(--tile) 70%) }
.pf-top{ display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.pf-av{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--pf,var(--gold)); background:var(--paper-2); flex:none }
.pf-id{ min-width:0; flex:1 1 200px }
.pf-id h1{ font-family:var(--display); font-weight:600; font-size:clamp(1.75rem,6vw,2.25rem); line-height:1.05; margin:0; overflow-wrap:anywhere }
.pf-since{ margin:4px 0 0; font-size:.875rem; color:var(--ink-soft) }
.pf-song{ display:inline-flex; align-items:center; gap:6px; margin:8px 0 0; padding:4px 11px; border-radius:999px; background:color-mix(in srgb,var(--pf,var(--crimson)) 14%,var(--paper-2)); font-size:.875rem; font-weight:600 }
.pf-about{ margin:14px 0 0; font-size:1.0625rem; line-height:1.45; overflow-wrap:anywhere }
.pf-crowns{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:1rem; padding:6px 12px; border-radius:999px; background:var(--paper-2) }
.pf-grid{ display:grid; gap:12px; margin:14px 0 0 }
@media (min-width:700px){ .pf-grid{ grid-template-columns:1fr 1fr } .pf-wide{ grid-column:1 / -1 } }
.pf-box{ padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:var(--tile); min-width:0 }
.pf-box h2{ font-family:var(--display); font-weight:600; font-size:1.1875rem; margin:0 0 8px }
.pf-box ul{ list-style:none; margin:0; padding:0 }
.pf-box li{ padding:7px 0; border-top:1px solid var(--line-2,var(--line)); font-size:.9375rem } .pf-box li:first-child{ border-top:0 }
.pf-empty{ color:var(--ink-soft); font-size:.9375rem; margin:0 }
.pf-flex{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px }
.pf-flex figure{ margin:0; text-align:center; padding:8px 4px; border-radius:14px; background:var(--paper-2) }
.pf-flex img{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 4px }
.pf-flex .em{ font-size:2rem; line-height:56px; height:56px; display:block }
.pf-flex figcaption{ font-size:.75rem; font-weight:600; line-height:1.25; overflow-wrap:anywhere }
.pf-same{ margin:12px 0 0; padding:10px 14px; border-radius:14px; background:color-mix(in srgb,var(--gold) 16%,var(--tile)); font-weight:600 }
.pf-private{ margin:14px 0 0 }
.pf-edit{ margin:14px 0 0 }
.pf-edit details{ border:1px solid var(--line); border-radius:18px; background:var(--tile); padding:4px 16px }
.pf-edit summary{ cursor:pointer; font-weight:700; padding:12px 0; min-height:44px; list-style:none }
.pf-edit summary::-webkit-details-marker{ display:none }
.pf-edit summary::before{ content:"\270F\FE0F  " }
.pf-f{ margin:0 0 14px } .pf-f > label,.pf-f legend{ display:block; font-size:.8125rem; font-weight:700; color:var(--ink-soft); margin:0 0 6px; padding:0 }
.pf-f fieldset{ border:0; margin:0; padding:0 }
.pf-in{ width:100%; font:inherit; font-size:1rem; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px }
.pf-in:focus{ outline:none; border-color:var(--crimson) }
.pf-swatches{ display:flex; flex-wrap:wrap; gap:8px }
.pf-swatches label{ position:relative; cursor:pointer }
.pf-swatches input{ position:absolute; opacity:0; inset:0 }
.pf-swatches span{ display:block; width:40px; height:40px; border-radius:50%; border:3px solid transparent; box-shadow:inset 0 0 0 2px #0002 }
.pf-swatches input:checked + span{ border-color:var(--ink) }
.pf-swatches input:focus-visible + span{ outline:2px solid var(--crimson); outline-offset:2px }
.pf-pick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; max-height:320px; overflow:auto; padding:2px }
.pf-pick label{ display:block; text-align:center; padding:8px 4px; border-radius:14px; border:2px solid transparent; background:var(--paper-2); cursor:pointer; font-size:.75rem; font-weight:600 }
.pf-pick input{ position:absolute; opacity:0; width:1px; height:1px }
.pf-pick input:checked + label{ border-color:var(--crimson) }
.pf-pick input:focus-visible + label{ outline:2px solid var(--crimson); outline-offset:2px }
.pf-pick img{ width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 4px }
.pf-pick .em{ font-size:1.75rem; line-height:48px; height:48px; display:block }
.pf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pf-msg{ font-size:.9375rem; margin:8px 0 0 } .pf-msg.err{ color:color-mix(in srgb,var(--crimson) 80%,var(--ink)); font-weight:600 }

/* Crown track (feed/crown-track.js) */
.ct{ padding:14px 16px; border-radius:18px; border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); background:linear-gradient(140deg,color-mix(in srgb,var(--gold) 12%,var(--tile)),var(--tile)) }
.ct-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap }
.ct-h h2{ font-family:var(--display); font-weight:600; font-size:1.1875rem; margin:0 }
.ct-h span{ font-size:.8125rem; color:var(--ink-soft) }
.ct-goal{ margin:4px 0 10px; font-weight:650 } .ct-goal b{ color:color-mix(in srgb,var(--crimson) 75%,var(--ink)) }
.ct-track{ position:relative; height:14px; margin:12px 6px 30px; border-radius:999px; background:var(--paper-2) }
.ct .ct-track{ margin-top:30px }
/* "You: n" above the fill end, clear of the stop circles; the hub's weekly bar has none. */
.ct-now{ position:absolute; bottom:calc(100% + 10px); transform:translateX(-50%); padding:1px 7px; border-radius:999px; font-size:.71875rem; font-weight:800; color:#fff; background:var(--crimson); white-space:nowrap }
.ct-now::before{ content:"You: " }
.ct-track > i{ position:absolute; inset:0 auto 0 0; width:var(--w,0%); border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--crimson)); transition:width .7s ease }
.ct-stop{ position:absolute; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.875rem;
  background:var(--tile); border:2px solid var(--line) }
/* Ticks are text, gold like every Sparks tick (white on a gold stop, as on the hub's answered tiles), never ✅/✔️ emoji. */
.ct-stop.got{ background:var(--gold); border-color:var(--gold); color:#fff; font-weight:800 }
.ct-tick{ color:color-mix(in srgb,var(--gold) 62%,var(--ink)); font-weight:800 }
.ct-stop small{ position:absolute; top:30px; left:50%; transform:translateX(-50%); font-size:.6875rem; font-weight:700; color:var(--ink-soft); white-space:nowrap }
.ct-rewards{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; font-size:.8125rem }
.ct-rewards li{ padding:4px 10px; border-radius:999px; background:var(--paper-2) } .ct-rewards li.got{ background:color-mix(in srgb,var(--gold) 30%,var(--paper-2)); font-weight:700 }

@media (max-width:420px){
  .spk-card{ padding:16px 14px 14px } .spk-sec{ padding:14px 12px 12px } .pf-av{ width:76px; height:76px }
}

/* The ordinary feed under every Sparks page (functions/_sparks-tail.js); feed.css styles the cards, this only seats them. */
.sp-tail{ margin-top:48px }
.sp-tail .rule{ display:flex; align-items:center; gap:14px; margin:0 0 18px; color:var(--gold) }
.sp-tail .rule::before,.sp-tail .rule::after{ content:""; height:1px; background:var(--line); flex:1 }
.sp-tail .rule span{ font-family:var(--display); font-size:18px; letter-spacing:.3em }
/* Held back until the Sparks section has painted, so the feed never flashes in under a skeleton or rides down as answers arrive. */
.wrap:has(#sparkBody:empty, #panel-foryou .sk-tile) > .sp-tail{ display:none }