/* Two looks: .page (the public site, deliberately disgusting) and .admin (plain
   Bootstrap). One palette on purpose: acid green is the brand, in any light. */
:root {
  --acid: #ccff33;
  --ink: #210535;
  --goo: #ff2e88;
  --bile: #8fb300;
  --curd: #fbffe0;
  --muted: #4d3a5c;
  --gold: #ffc700;
  --logo: "Rubik Wet Paint", "Bagel Fat One", system-ui, sans-serif;
  --display: "Bagel Fat One", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
}

/* ---- public site ---- */
body.page {
  background: var(--acid);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  overflow-x: hidden;
}
body.page a { color: var(--ink); font-weight: 700; }
.slime {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 96px;
  fill: var(--goo);
  pointer-events: none;
}
.sheet {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.25rem 16px 3rem;
}
body.page a.logo {
  display: inline-block;
  font-family: var(--logo);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transform: rotate(-3deg);
  margin-bottom: 2.25rem;
}
.hero { position: relative; margin-bottom: 2rem; }
.hero > .blob { position: absolute; right: -6px; top: 33%; width: 26%; }
.hero.small { display: grid; grid-template-columns: 1fr 6.5rem; align-items: center; gap: 0.5rem; }
.hero.small > .blob { position: static; width: 100%; }
.shout {
  font-family: var(--logo);
  font-weight: 400;
  font-size: clamp(4.4rem, 23vw, 8rem);
  line-height: 0.95;
  transform: rotate(-2deg);
  transform-origin: left;
  margin: 0;
}
.title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 9.5vw, 3rem);
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.blob { width: 100%; max-width: 15rem; overflow: visible; animation: wobble 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.hero.small .blob { max-width: 6.5rem; }
.blob .body { fill: var(--goo); stroke: var(--ink); stroke-width: 6; transition: fill 0.25s; }
.blob .pupil { fill: var(--ink); }
.blob .eyes circle:not(.pupil) { stroke: var(--ink); stroke-width: 5; }
.blob .mouth { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.blob .tongue { fill: var(--acid); stroke: var(--ink); stroke-width: 5; }
.blob .m1, .blob .m2 { display: none; }
.blob[data-mood="1"] .m0, .blob[data-mood="2"] .m0, .blob[data-mood="3"] .m0 { display: none; }
.blob[data-mood="3"] .m2 { display: block; }
.blob[data-mood="3"] .body { fill: var(--gold); }
.blob[data-mood="3"] { animation: party 0.5s ease-in-out infinite alternate; }
.blob[data-mood="1"] .m1 { display: block; }
.blob[data-mood="2"] .m2 { display: block; }
.blob[data-mood="2"] .body { fill: var(--bile); }
.blob[data-mood="2"] { animation-duration: 0.7s; }
@keyframes party {
  from { transform: translateY(0) rotate(-6deg); }
  to { transform: translateY(-10px) rotate(6deg) scale(1.08); }
}
@keyframes wobble {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); }
  50% { transform: scale(1.05, 0.95) rotate(1.5deg); }
}
.lede { font-size: 1.2rem; line-height: 1.4; margin-bottom: 1rem; }
.lede.quiet { color: var(--muted); }
.note { color: var(--muted); margin-bottom: 1rem; }
.oops {
  background: var(--ink);
  color: var(--acid);
  font-weight: 700;
  padding: 0.6rem 0.8rem;
  border-radius: 0.4rem 1rem 0.5rem 1.2rem;
  transform: rotate(-0.6deg);
}
.cta { margin: 1.75rem 0; }
body.page .btn, body.page a.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.1;
  padding: 0.75rem 1.5rem;
  color: var(--curd);
  background: var(--goo);
  border: 3px solid var(--ink);
  border-radius: 1.6rem 1.1rem 1.8rem 1rem;
  box-shadow: 0 5px 0 var(--ink);
  text-decoration: none;
  -webkit-text-stroke: 0;
}
body.page .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
body.page .btn:disabled { color: var(--muted); background: var(--curd); box-shadow: none; opacity: 0.7; }

.picks { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.6rem 0.8rem;
  background: var(--curd);
  border: 3px solid var(--ink);
  border-radius: 1.1rem 0.7rem 1.3rem 0.6rem;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.12s;
}
.pick:nth-child(3n) span { border-radius: 0.7rem 1.3rem 0.6rem 1.2rem; }
.pick:nth-child(3n + 1) span { border-radius: 1.4rem 0.6rem 1rem 1rem; }
.pick input:checked + span {
  background: var(--goo);
  color: var(--curd);
  transform: rotate(-2deg) scale(1.03);
}
.pick:nth-child(even) input:checked + span { transform: rotate(2deg) scale(1.03); }
.pick input:checked + span::after {
  content: "ew";
  position: absolute;
  top: -0.7rem;
  right: -0.3rem;
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  color: var(--ink);
  background: var(--acid);
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  transform: rotate(9deg);
}
.pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.pick input:disabled + span { opacity: 0.45; }
.submit-bar {
  position: sticky;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.6rem 0.75rem 0.9rem;
  margin-bottom: 1.5rem;
  background: var(--acid);
  border: 3px solid var(--ink);
  border-radius: 1.5rem 1rem 1.6rem 1.1rem;
}
.pick-count { font-family: var(--display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.pass {
  background: var(--ink);
  color: var(--curd);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0.5rem 0 1.5rem;
  border-radius: 1.5rem 0.9rem 1.7rem 1rem;
  transform: rotate(-1.5deg);
}
.pass.gold { background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.pass.gold .pass-label { color: var(--ink); }
.pass.gold .pass-code { color: var(--ink); }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti i {
  position: absolute;
  top: -1.5rem;
  width: 0.7rem;
  height: 1rem;
  background: var(--goo);
  border-radius: 0.2rem 0.5rem;
  animation: fall 2.6s ease-in forwards;
}
.confetti i:nth-child(3n) { background: var(--gold); border-radius: 50%; width: 0.8rem; height: 0.8rem; }
.confetti i:nth-child(3n + 1) { background: var(--ink); }
.confetti i:nth-child(4n) { animation-duration: 2s; }
.confetti i:nth-child(5n) { animation-duration: 3.2s; }
.confetti i:nth-child(7n) { animation-delay: 0.35s; }
.confetti i:nth-child(11n) { animation-delay: 0.7s; }
.confetti i:nth-child(1) { left: 3%; }
.confetti i:nth-child(2) { left: 71%; }
.confetti i:nth-child(3) { left: 38%; }
.confetti i:nth-child(4) { left: 92%; }
.confetti i:nth-child(5) { left: 17%; }
.confetti i:nth-child(6) { left: 55%; }
.confetti i:nth-child(7) { left: 84%; }
.confetti i:nth-child(8) { left: 26%; }
.confetti i:nth-child(9) { left: 63%; }
.confetti i:nth-child(10) { left: 8%; }
.confetti i:nth-child(11) { left: 47%; }
.confetti i:nth-child(12) { left: 96%; }
.confetti i:nth-child(13) { left: 33%; }
.confetti i:nth-child(14) { left: 76%; }
.confetti i:nth-child(15) { left: 12%; }
.confetti i:nth-child(16) { left: 59%; }
.confetti i:nth-child(17) { left: 88%; }
.confetti i:nth-child(18) { left: 22%; }
.confetti i:nth-child(19) { left: 41%; }
.confetti i:nth-child(20) { left: 67%; }
.confetti i:nth-child(21) { left: 5%; }
.confetti i:nth-child(22) { left: 80%; }
.confetti i:nth-child(23) { left: 30%; }
.confetti i:nth-child(24) { left: 52%; }
.confetti i:nth-child(25) { left: 94%; }
.confetti i:nth-child(26) { left: 15%; }
.confetti i:nth-child(27) { left: 73%; }
.confetti i:nth-child(28) { left: 44%; }
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}
.pass-label { font-family: var(--logo); font-size: 1.3rem; color: var(--goo); margin: 0; }
.pass-code { font-family: var(--display); font-size: clamp(1.45rem, 7vw, 2.3rem); line-height: 1.15; color: var(--acid); margin: 0.2rem 0; overflow-wrap: anywhere; }
.pass-note { margin: 0.25rem 0 0; }
.verdicts { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.verdicts li { display: flex; gap: 0.75rem; padding: 0.4rem 0; font-weight: 700; color: var(--muted); }
.verdicts li.hit { color: var(--ink); }
.verdicts .mark { width: 2.4rem; flex: none; font-weight: 500; padding: 0; background: none; }
.verdicts li.hit .mark { font-family: var(--logo); font-size: 1.15rem; line-height: 1.2; color: var(--goo); -webkit-text-stroke: 0.5px var(--ink); }

.field { margin-bottom: 1rem; }
.field label, .field-label { display: block; font-weight: 800; margin-bottom: 0.3rem; }
.field input {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  background: var(--curd);
  border: 3px solid var(--ink);
  border-radius: 1rem 0.7rem 1.1rem 0.6rem;
}
.hp { position: absolute; left: -9999px; }
.share-link {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  margin-bottom: 0.5rem;
}
.change-link { margin-bottom: 1rem; }
.change-link summary { cursor: pointer; font-weight: 700; text-decoration: underline; }
.link-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0.6rem 0;
  padding: 0.5rem 0.8rem;
  background: var(--curd);
  border: 3px solid var(--ink);
  border-radius: 1rem 0.7rem 1.1rem 0.6rem;
}
.link-row span { color: var(--muted); }
.link-row input { flex: 1; min-width: 0; font: inherit; font-weight: 800; color: var(--ink); background: none; border: 0; outline: 0; }
body.page .btn.small { font-size: 1.05rem; padding: 0.5rem 1rem; }
.chosen { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chosen li {
  font-weight: 700;
  line-height: 1.2;
  padding: 0.45rem 0.7rem;
  color: var(--curd);
  background: var(--goo);
  border: 3px solid var(--ink);
  border-radius: 1.1rem 0.7rem 1.3rem 0.6rem;
}
.edit-picks { margin-bottom: 1rem; }
.edit-picks summary { cursor: pointer; font-weight: 700; text-decoration: underline; margin-bottom: 0.75rem; }
.save-link { margin-bottom: 1.5rem; }
.check-code { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.check-code input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-weight: 700;
  padding: 0.5rem 0.8rem;
  color: var(--ink);
  background: var(--curd);
  border: 3px solid var(--ink);
  border-radius: 1rem 0.7rem 1.1rem 0.6rem;
}
.checked .section-title { margin-top: 0.5rem; }
.section-title { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.play { margin-bottom: 0.5rem; }
.play summary { cursor: pointer; font-weight: 700; }
.danger { margin-top: 2.5rem; display: flex; gap: 1.5rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; text-decoration: underline; }
.prose { font-size: 1.1rem; line-height: 1.45; margin-top: 1.25rem; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin-top: 1.5rem; }
.fine { margin-top: 2.5rem; font-size: 0.9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .blob, .blob[data-mood="2"], .blob[data-mood="3"] { animation: none; }
  .confetti { display: none; }
}

/* ---- owner's interview ---- */
.admin-wrap { max-width: 44rem; }
.admin-login { min-height: 100vh; display: grid; place-items: center; }
.admin-pass { width: 16rem; }
.step-num { font-weight: 700; color: #b2325a; width: 1.5rem; font-variant-numeric: tabular-nums; }
.interview-q { font-family: var(--display); font-weight: 700; font-size: 1.8rem; line-height: 1.15; text-wrap: balance; }
.interview-followup { font-family: var(--display); font-weight: 500; font-size: 1.35rem; color: #b2325a; text-wrap: balance; }
.said {
  border-left: 3px solid #e4e0e8;
  padding-left: 1rem;
  color: #6b6474;
  white-space: pre-wrap;
}
.final-text { font-family: var(--body); font-size: 1.15rem; line-height: 1.5; }