/* ---------------------------------------------------------
   whosfunny.gc
   pastel yellow, clouds, thick outlines, flat fills only
--------------------------------------------------------- */

:root {
  --butter:   #FFF3C7;
  --butter-2: #FFEAA6;
  --cream:    #FFFDF4;
  --ink:      #2C2318;
  --ink-soft: #6B5D48;
  --sun:      #FFD23F;
  --pink:     #FFB3C7;
  --blue:     #A9D9F5;
  --mint:     #B6E7C4;
  --lilac:    #D8C4F5;
  --tomato:   #FF7A59;

  --edge: 3px solid var(--ink);
  --pop: 6px 6px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);
  --r-blob: 42px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; }

.mono-inline, .code {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- floaty background ---------- */

.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.cloud { position: absolute; fill: #FFFDF4; opacity: .85; }
.cloud-a { width: 260px; top: 8%;  left: -60px;  animation: drift 34s ease-in-out infinite; }
.cloud-b { width: 180px; top: 46%; right: -40px; animation: drift 44s ease-in-out infinite reverse; }
.cloud-c { width: 320px; bottom: 4%; left: 24%;  animation: drift 52s ease-in-out infinite; opacity: .55; }

.sun {
  position: absolute; top: 5%; right: 9%;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--sun); opacity: .5;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(34px, -18px); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}

/* ---------- top bar ---------- */

.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 1080px; margin: 0 auto; padding: 22px 24px 0;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 21px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 7px 18px 7px 12px; box-shadow: var(--pop-sm);
}
.wordmark-face { width: 24px; height: auto; display: block; }
.wordmark:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.topnav { display: flex; gap: 18px; }
.topnav a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent; padding-bottom: 2px;
}
.topnav a:hover { border-bottom-color: var(--ink); }

@media (max-width: 620px) {
  .topbar { padding: 16px 18px 0; }
  .wordmark { font-size: 18px; padding: 6px 14px 6px 10px; }
  .topnav { gap: 12px; }
  .topnav a { font-size: 15px; white-space: nowrap; }
  .view { padding-left: 18px; padding-right: 18px; }
  .panel { padding: 26px 20px; border-radius: 32px; }
}



/* ---------- views ---------- */

main { position: relative; z-index: 1; }
.view { display: none; max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }
.view.is-active { display: block; }

/* ---------- hero ---------- */

.hero { text-align: center; padding: 54px 0 34px; }

.kicker {
  display: inline-block;
  background: var(--pink); border: var(--edge); border-radius: var(--r-pill);
  padding: 5px 16px; font-weight: 500; font-size: 15px;
  transform: rotate(-2deg); box-shadow: var(--pop-sm);
}

.hero h1 {
  font-size: clamp(44px, 8vw, 82px);
  font-weight: 700;
  margin: 20px 0 16px;
}

.squiggle-word {
  position: relative; display: inline-block;
  background: var(--sun); border: var(--edge); border-radius: 24px;
  padding: 0 18px; transform: rotate(-1.5deg);
  box-shadow: var(--pop);
}

.subhead {
  max-width: 520px; margin: 0 auto;
  font-size: 19px; color: var(--ink-soft);
}

/* ---------- dropzone ---------- */

.dropwrap { position: relative; max-width: 720px; margin: 108px auto 0; }

.cloud-bump {
  position: absolute; background: var(--cream);
  border: var(--edge); border-radius: 50%; z-index: 0;
}
.bump-1 { width: 130px; height: 130px; top: -56px; left: 12%; }
.bump-2 { width: 190px; height: 190px; top: -92px; left: 34%; }
.bump-3 { width: 116px; height: 116px; top: -50px; right: 15%; }

.dropzone {
  position: relative; z-index: 1;
  background: var(--cream);
  border: var(--edge);
  border-radius: var(--r-blob);
  box-shadow: var(--pop);
  padding: 44px 28px 38px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dropzone:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.dropzone:focus-visible { outline: 4px dashed var(--ink); outline-offset: 6px; }
.dropzone.is-hot { background: var(--butter-2); transform: scale(1.015); }

.drop-inner { position: relative; }

.drop-emoji { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.dropzone.is-hot .drop-emoji { transform: rotate(-8deg) scale(1.1); }

.dropzone h2 { font-size: clamp(24px, 4vw, 34px); }
.mono-inline {
  background: var(--butter-2); border: 2px solid var(--ink);
  border-radius: 10px; padding: 1px 8px; font-size: .82em;
}

.drop-sub { color: var(--ink-soft); margin-top: 10px; }
.drop-foot { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }

.btn {
  border: var(--edge); border-radius: var(--r-pill);
  padding: 12px 28px; font-size: 17px; font-weight: 600;
  cursor: pointer; box-shadow: var(--pop-sm);
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: none; }
/* No margin here on purpose. This button sits in a flex row next to ghost
   buttons in five places, and a top margin on one of them knocks it out of
   line with its neighbours. The one spot that needs the gap asks for it. */
.btn-primary { background: var(--sun); color: var(--ink); }
.btn-ghost { background: var(--cream); color: var(--ink); }
.drop-inner .btn { margin-top: 20px; }

.linkbtn {
  background: none; border: none; padding: 0;
  font-size: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 3px;
  text-underline-offset: 4px; cursor: pointer;
}
.linkbtn:hover { color: var(--tomato); }

.demo-line { text-align: center; margin-top: 22px; color: var(--ink-soft); }

.drop-error {
  margin: 18px auto 0; max-width: 560px; text-align: center;
  background: var(--pink); border: var(--edge); border-radius: 22px;
  padding: 14px 18px; font-weight: 500; box-shadow: var(--pop-sm);
}

/* ---------- stickers ---------- */

.sticker-row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  list-style: none; padding: 0; margin: 54px 0 0;
}
.sticker {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 9px 20px; font-weight: 500; box-shadow: var(--pop-sm);
}
.sticker-emoji { font-size: 19px; }
.s-pink  { background: var(--pink);  transform: rotate(-2deg); }
.s-blue  { background: var(--blue);  transform: rotate(1.5deg); }
.s-mint  { background: var(--mint);  transform: rotate(-1deg); }
.s-lilac { background: var(--lilac); transform: rotate(2deg); }

/* ---------- standalone pages ---------- */

.page { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; position: relative; z-index: 1; }
.page-head { text-align: center; padding: 54px 0 34px; }
.page-head h1 {
  font-size: clamp(38px, 7vw, 68px); font-weight: 700; margin: 18px 0 16px;
}
.page-head .subhead { margin-left: auto; margin-right: auto; }

.topnav a.is-here { border-bottom-color: var(--ink); }

.cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 40px;
}

.qa { margin-top: 26px; }
.qa h3 { font-size: 20px; margin-bottom: 8px; }
.qa p { color: var(--ink-soft); margin-top: 8px; }
.qa p b { color: var(--ink); }

.plainlist { margin: 20px 0 0; padding-left: 22px; }
.plainlist li { margin-bottom: 12px; color: var(--ink-soft); }
.plainlist li b { color: var(--ink); }

/* ---------- panels ---------- */

.panel {
  background: var(--cream); border: var(--edge); border-radius: var(--r-blob);
  box-shadow: var(--pop); padding: 34px 30px; margin-top: 64px;
}
.panel-title { font-size: clamp(24px, 4vw, 32px); }
.panel-title .tiny { font-size: 15px; color: var(--ink-soft); font-weight: 400; }
.panel-sub { color: var(--ink-soft); margin-top: 8px; }

.steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }

.step {
  position: relative;
  border: var(--edge); border-radius: 28px;
  padding: 26px 22px 22px; box-shadow: var(--pop-sm);
}
.step-1 { background: var(--pink); }
.step-2 { background: var(--blue); }
.step-3 { background: var(--mint); }
.step-4 { background: var(--lilac); }

.step-num {
  position: absolute; top: -18px; left: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream); border: var(--edge);
  display: grid; place-items: center; font-weight: 700; font-size: 20px;
}
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 16px; }
.step-note { margin-top: 10px; font-size: 15px; }

.code {
  display: block; background: var(--ink); color: #FFF3C7;
  border-radius: 16px; padding: 14px 16px; margin: 12px 0 0;
  font-size: 14px; line-height: 1.7; overflow-x: auto; white-space: pre;
}

.panel-note { background: var(--butter-2); }
.note-grid { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 760px) { .note-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .note-grid { grid-template-columns: repeat(4, 1fr); } }
.note-card {
  background: var(--cream); border: var(--edge); border-radius: 26px;
  padding: 22px; box-shadow: var(--pop-sm);
}
.note-emoji { font-size: 30px; display: block; margin-bottom: 8px; }
.note-card h3 { font-size: 20px; margin-bottom: 6px; }
.note-card p { font-size: 16px; color: var(--ink-soft); }

/* ---------- results header ---------- */

.results-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 40px 0 8px;
}
.results-title h1 { font-size: clamp(32px, 6vw, 54px); font-weight: 700; }
.results-meta { color: var(--ink-soft); margin-top: 6px; }

/* ---------- tabs ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tab {
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 9px 18px; font-size: 16px; font-weight: 500; cursor: pointer;
  box-shadow: var(--pop-sm);
}
.tab.is-on { background: var(--sun); font-weight: 600; }
.tab:active { transform: translate(3px, 3px); box-shadow: none; }

.tabpanel { display: none; }
.tabpanel.is-on { display: block; }

/* ---------- podium ---------- */

.podium {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; align-items: end; margin-top: 40px;
}
.pod {
  border: var(--edge); border-radius: 28px 28px 18px 18px;
  padding: 20px 12px; text-align: center; box-shadow: var(--pop);
  background: var(--cream);
}
.pod-1 { background: var(--sun);  padding-top: 46px; order: 2; }
.pod-2 { background: var(--blue); padding-top: 30px; order: 1; }
.pod-3 { background: var(--pink); padding-top: 22px; order: 3; }
.pod-medal { font-size: 34px; line-height: 1; }
.pod-name { font-size: clamp(17px, 3vw, 24px); font-weight: 700; margin-top: 8px; word-break: break-word; }
.pod-num { font-size: clamp(22px, 4vw, 34px); font-weight: 700; margin-top: 4px; }
.pod-lab { font-size: 13px; color: var(--ink-soft); }

/* ---------- leaderboards ---------- */

.board { margin-top: 22px; display: grid; gap: 10px; }

.row {
  display: grid;
  grid-template-columns: 44px minmax(90px, 1.1fr) 2fr auto;
  align-items: center; gap: 14px;
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 10px 18px 10px 10px; box-shadow: var(--pop-sm);
}
.row-top { background: var(--butter-2); }

.rank {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sun); border: 2px solid var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.row-name { font-weight: 600; word-break: break-word; }

.bar-track {
  height: 16px; background: var(--butter); border: 2px solid var(--ink);
  border-radius: var(--r-pill); overflow: hidden;
}
.bar-fill { height: 100%; background: var(--tomato); border-radius: var(--r-pill); }
.bar-fill.f-2 { background: var(--blue); }
.bar-fill.f-3 { background: var(--mint); }
.bar-fill.f-4 { background: var(--lilac); }
.bar-fill.f-5 { background: var(--pink); }

.row-val { font-weight: 700; font-size: 18px; white-space: nowrap; }
.row-sub { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; text-align: right; }

@media (max-width: 620px) {
  .row { grid-template-columns: 38px 1fr auto; padding-right: 14px; }
  .bar-track { display: none; }
}

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 7px 16px; font-weight: 500; cursor: pointer; box-shadow: var(--pop-sm);
  font-size: 15px;
}
.chip.is-on { background: var(--mint); font-weight: 600; }
.chip:active { transform: translate(3px, 3px); box-shadow: none; }

/* ---------- matrix ---------- */

.matrix-scroll { overflow-x: auto; margin-top: 24px; padding-bottom: 8px; }
.matrix { display: grid; gap: 5px; min-width: max-content; }

.m-cell {
  width: 58px; height: 46px; border: 2px solid var(--ink); border-radius: 12px;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.m-head {
  border: none; font-size: 13px; font-weight: 600;
  display: grid; place-items: center; width: 58px; height: 46px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-side { justify-self: end; padding-right: 8px; width: auto; place-items: center end; }
.m-self { background: var(--butter); color: var(--ink-soft); font-weight: 400; }

.h0 { background: var(--cream); color: var(--ink-soft); }
.h1 { background: #E4F3E0; }
.h2 { background: #C4E8BE; }
.h3 { background: #97D693; }
.h4 { background: #5FBE68; color: #fff; }
.h5 { background: #2F9A4B; color: #fff; }

.matrix-key {
  display: flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 14px; color: var(--ink-soft);
}
.key { width: 26px; height: 18px; border: 2px solid var(--ink); border-radius: 7px; }
.k1 { background: #E4F3E0; } .k2 { background: #C4E8BE; } .k3 { background: #97D693; }
.k4 { background: #5FBE68; } .k5 { background: #2F9A4B; }

.facts { display: grid; gap: 12px; margin-top: 26px; }
.fact {
  background: var(--butter-2); border: var(--edge); border-radius: 22px;
  padding: 14px 20px; box-shadow: var(--pop-sm); font-weight: 500;
}
.fact b { font-weight: 700; }

/* ---------- hall of fame ---------- */

.hof { display: grid; gap: 16px; margin-top: 24px; }
.hof-card {
  background: var(--cream); border: var(--edge); border-radius: 26px;
  padding: 18px 22px; box-shadow: var(--pop-sm);
}
.hof-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hof-who { font-weight: 700; }
.hof-count {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sun); border: 2px solid var(--ink); border-radius: var(--r-pill);
  padding: 3px 13px; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.hof-text { margin-top: 10px; font-size: 18px; }
.hof-text.is-blur { filter: blur(6px); user-select: none; }
.hof-date { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* ---------- empty ---------- */

.empty {
  background: var(--butter-2); border: var(--edge); border-radius: 24px;
  padding: 24px; text-align: center; color: var(--ink-soft); margin-top: 22px;
}

/* ---------- the copyable path ---------- */

.pathrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.pathbox {
  flex: 1; min-width: 220px;
  background: var(--ink); color: #FFF3C7;
  border-radius: 16px; padding: 13px 16px;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; overflow-x: auto; white-space: nowrap;
}
.pathrow .btn { padding: 11px 22px; font-size: 15px; }

.steps-3 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- working screen ---------- */

.working-box { text-align: center; padding: 130px 0 90px; }
.working-box h1 { font-size: clamp(30px, 6vw, 50px); }
.working-note { color: var(--ink-soft); margin-top: 14px; }

.working-clouds { display: flex; gap: 14px; justify-content: center; margin-bottom: 34px; }
.working-clouds i {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream); border: var(--edge);
  animation: bob 1.1s ease-in-out infinite;
}
.working-clouds i:nth-child(2) { animation-delay: .16s; background: var(--pink); }
.working-clouds i:nth-child(3) { animation-delay: .32s; background: var(--blue); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}
@media (prefers-reduced-motion: reduce) { .working-clouds i { animation: none; } }

/* ---------- chat picker ---------- */

.pick-head { text-align: center; padding: 48px 0 8px; }
.pick-head h1 { font-size: clamp(38px, 7vw, 64px); font-weight: 700; margin: 18px 0 14px; }

.chat-list { display: grid; gap: 14px; max-width: 720px; margin: 34px auto 0; }

.chat-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--cream); border: var(--edge); border-radius: 30px;
  padding: 20px 24px; box-shadow: var(--pop);
  font-family: inherit; color: var(--ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.chat-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.chat-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.c-0 { background: var(--sun); }
.c-1 { background: var(--blue); }
.c-2 { background: var(--pink); }
.c-3 { background: var(--mint); }

.chat-name { font-size: clamp(20px, 4vw, 26px); font-weight: 700; word-break: break-word; }
.chat-meta { font-size: 15px; margin-top: 4px; opacity: .75; }
.chat-go { font-size: 28px; font-weight: 700; }

/* ---------- naming people ---------- */

.contacts-box {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 660px; margin: 34px auto 0;
  background: var(--lilac); border: var(--edge); border-radius: 30px;
  padding: 22px 26px; box-shadow: var(--pop);
}
.contacts-box.is-hot { background: var(--mint); }
.contacts-copy { flex: 1; min-width: 240px; }
.contacts-copy h3 { font-size: 21px; margin-bottom: 6px; }
.contacts-copy p { font-size: 15px; }
.contacts-box .btn { white-space: nowrap; }

.vcf-result {
  max-width: 660px; margin: 16px auto 0; text-align: center;
  border: var(--edge); border-radius: 22px; padding: 12px 18px;
  font-weight: 500; box-shadow: var(--pop-sm);
}
.vcf-result[hidden] { display: none; }
.vcf-result.is-good { background: var(--mint); }
.vcf-result.is-bad { background: var(--pink); }

.name-list { display: grid; gap: 12px; max-width: 660px; margin: 26px auto 0; }

.name-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 10px 14px 10px 22px; box-shadow: var(--pop-sm);
}
.name-left { flex: 1; min-width: 150px; }
.name-handle {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; word-break: break-all;
}
.name-count { font-size: 13px; color: var(--ink-soft); }

.name-input {
  flex: 1; min-width: 160px;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink);
  background: var(--butter); border: var(--edge); border-radius: var(--r-pill);
  padding: 10px 18px;
}
.name-input:focus { outline: none; background: var(--sun); }
.name-input.is-matched { background: var(--mint); }
.name-input:disabled { opacity: .45; }

.name-toggle {
  border: var(--edge); border-radius: var(--r-pill);
  background: var(--mint); color: var(--ink);
  padding: 8px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: var(--pop-sm); min-width: 66px;
}
.name-toggle:active { transform: translate(3px, 3px); box-shadow: none; }
.name-row.is-out { opacity: .55; }
.name-row.is-out .name-toggle { background: var(--pink); }
.name-row.is-mystery .name-handle { font-style: italic; opacity: .8; }

.quiet-hint {
  max-width: 660px; margin: 20px auto 0; text-align: center;
  background: var(--butter-2); border: var(--edge); border-radius: 22px;
  padding: 12px 20px; box-shadow: var(--pop-sm); font-weight: 500;
}
.quiet-hint[hidden] { display: none; }

/* ---------- reaction filter ---------- */

.kind-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px;
}
.kind-row[hidden] { display: none; }
.kind-label { font-weight: 600; color: var(--ink-soft); }
.kind-row .chips { margin-top: 0; }
.kind-row .chip.is-on { background: var(--sun); }
.kind-row .chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-icon { width: 19px; height: auto; display: block; }
.name-input::placeholder { font-weight: 400; color: var(--ink-soft); }

.name-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin: 30px auto 0;
}

/* ---------- results header extras ---------- */

.results-head {
  align-items: flex-end; justify-content: space-between;
}
.results-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* an emoji has a taller line box than plain text, which was making the one
   button with an emoji in it 1.5px taller than its neighbours */
.results-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px; font-size: 15px; line-height: 1;
}

@media (max-width: 780px) {
  .results-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .results-actions { width: 100%; }
  .results-actions .btn { flex: 1; white-space: nowrap; }
}

.shared-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; text-align: center;
  background: var(--lilac); border: var(--edge); border-radius: var(--r-pill);
  padding: 11px 22px; box-shadow: var(--pop-sm); margin-top: 36px; font-weight: 500;
}
.shared-banner[hidden] { display: none; }

/* ---------- the recap ---------- */

body.no-scroll { overflow: hidden; }

.recap {
  position: fixed; inset: 0; z-index: 60;
  background: var(--butter);
  display: flex; align-items: stretch; justify-content: center;
}
.recap[hidden] { display: none; }

.recap-bars {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 5px; padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.recap-bars i {
  flex: 1; height: 7px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: transparent;
  position: relative; overflow: hidden;
}
.recap-bars i::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: var(--ink);
}
.recap-bars i.is-done::after { width: 100%; }
.recap-bars i.is-run::after { animation: fillbar 6.2s linear forwards; }

@keyframes fillbar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .recap-bars i.is-run::after { animation-duration: 0s; width: 100%; }
}

.recap-close {
  position: absolute; z-index: 4; top: 34px; right: 18px;
  top: max(34px, calc(env(safe-area-inset-top) + 20px));
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 7px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: var(--pop-sm); color: var(--ink);
}

.recap-zone {
  position: absolute; top: 0; bottom: 0; width: 22%;
  background: none; border: none; padding: 0; z-index: 2; cursor: pointer;
  opacity: 0;
}
.recap-prev { left: 0; }
.recap-next { right: 0; }

.recap-stage { position: relative; z-index: 1; flex: 1; display: flex; }

.slide {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 72px 26px 48px; text-align: center;
  animation: slidein .34s ease both;
}
@keyframes slidein {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } }

.t-sun    { background: var(--sun); }
.t-pink   { background: var(--pink); }
.t-blue   { background: var(--blue); }
.t-mint   { background: var(--mint); }
.t-lilac  { background: var(--lilac); }
.t-tomato { background: var(--tomato); }

.slide-inner { max-width: 640px; }

.slide-emoji {
  font-size: clamp(46px, 11vw, 74px); line-height: 1;
  transform: rotate(-7deg); margin-bottom: 14px;
}

.slide-kicker {
  display: inline-block;
  background: var(--cream); border: var(--edge); border-radius: var(--r-pill);
  padding: 6px 18px; font-weight: 600; font-size: clamp(14px, 3.4vw, 17px);
  box-shadow: var(--pop-sm); transform: rotate(-1.5deg);
}

.slide-big {
  font-size: clamp(64px, 19vw, 132px);
  font-weight: 700; line-height: .95; letter-spacing: -0.045em;
  margin: 22px 0 6px; word-break: break-word;
}
.slide-big.is-name { font-size: clamp(42px, 12vw, 92px); }

.slide-sub {
  font-size: clamp(19px, 4.6vw, 27px); font-weight: 600;
}

/* the winning message, in a bubble rather than as a giant number */
.slide-quote {
  margin: 22px 0 14px;
  background: var(--cream); border: var(--edge); border-radius: 34px 34px 34px 8px;
  padding: 22px 26px; box-shadow: var(--pop);
  font-size: clamp(22px, 5.4vw, 36px); font-weight: 600; line-height: 1.28;
  letter-spacing: -0.01em; word-break: break-word;
  transform: rotate(-.7deg);
}
.slide-quote.is-long { font-size: clamp(17px, 3.8vw, 25px); }

.slide-line {
  font-size: clamp(16px, 3.8vw, 20px); margin-top: 18px; opacity: .82;
}

.slide-joke {
  font-size: clamp(18px, 4.4vw, 24px); font-weight: 500;
  margin-top: 22px;
  background: var(--cream); border: var(--edge); border-radius: 28px;
  padding: 16px 22px; box-shadow: var(--pop);
  transform: rotate(.6deg);
}

.slide-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 30px; position: relative; z-index: 5;
}

/* ---------- toast ---------- */

.toast {
  position: fixed; z-index: 80; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: var(--ink); color: var(--butter);
  border-radius: var(--r-pill); padding: 13px 24px;
  font-weight: 500; font-size: 16px; max-width: 90vw; text-align: center;
}
.toast[hidden] { display: none; }

/* ---------- footer ---------- */

.foot {
  position: relative; z-index: 1;
  text-align: center; padding: 40px 24px 54px; color: var(--ink-soft);
}
.foot-tiny { font-size: 14px; margin-top: 4px; }