* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --pink: #ff5d8f;
  --pink-dark: #e63f74;
  --purple: #7b2d8b;
  --cream: #fff6f9;
  --ink: #3d1f33;
  --gold: #ffb703;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, #ff9a9e 0%, #ff5d8f 45%, #a4508b 100%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease;
}

/* faint drifting heart pattern over the gradient */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath d="M50 88 C24 66 8 50 8 32 A21 21 0 0 1 50 22 A21 21 0 0 1 92 32 C92 50 76 66 50 88 Z" fill="white"/%3E%3C/svg%3E');
  background-size: 90px 90px;
  opacity: .05;
  z-index: 0;
}
#app { position: relative; z-index: 1; }

/* after-dark theme for spicy mode 🥵 */
body.spicy {
  background: linear-gradient(160deg, #8e0e3a 0%, #5c0a3c 50%, #22052e 100%);
  background-attachment: fixed;
}

/* lavender theme for the mother-daughter mode 👩‍👧 */
body.family {
  background: linear-gradient(160deg, #ffb88c 0%, #d98fc9 45%, #7b5ea7 100%);
  background-attachment: fixed;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  padding: 16px 20px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

/* top bar */
#topbar {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  padding: 4px 2px 14px;
}

/* screens */
.screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: center;
  text-align: center;
  animation: fadein .25s ease;
}
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

.logo { font-size: 56px; line-height: 1.1; }
.logo-img {
  width: 230px;
  max-width: 70%;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }

h1 { color: #fff; font-size: 34px; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
h1 span { color: var(--gold); }
h2 { font-size: 18px; }
.screen > h2, .screen > p { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tagline { color: rgba(255,255,255,.92); font-size: 15px; }
.muted { color: rgba(255,255,255,.75); font-size: 14px; }

/* cards */
.card {
  background: var(--cream);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

/* inputs */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field span { color: #fff; font-weight: 600; font-size: 14px; }
input {
  font-size: 17px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid transparent;
  outline: none;
  background: var(--cream);
  color: var(--ink);
  width: 100%;
}
input:focus { border-color: var(--pink); }
.code-input {
  text-align: center;
  font-size: 26px;
  letter-spacing: .5em;
  text-indent: .5em;
  font-weight: 800;
  text-transform: uppercase;
  background: #fff;
  border: 2px solid #f3d2de;
}

/* buttons */
.btn {
  font-size: 17px;
  font-weight: 700;
  padding: 14px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
  width: 100%;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: #fff;
  box-shadow: 0 4px 14px rgba(230,63,116,.45);
}
.btn.ghost { background: rgba(255,255,255,.2); color: #fff; }
.btn:disabled { filter: grayscale(.6); opacity: .6; }

.rounds-picker { display: flex; gap: 8px; }
#mode-picker { flex-wrap: wrap; }
#mode-picker button { flex: 1 1 45%; }
.rounds-picker button {
  flex: 1;
  padding: 10px 4px;
  border-radius: 14px;
  border: 2px solid #f3d2de;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.rounds-picker button small { display: block; font-weight: 500; color: #a06; }
.rounds-picker button.selected { border-color: var(--pink); background: #ffe4ee; }

.big-code {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: .35em;
  text-indent: .35em;
  color: #fff;
  background: rgba(0,0,0,.18);
  border-radius: 20px;
  padding: 18px 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,.25);
}

/* sprite icons */
.bar-heart { width: 15px; height: 15px; fill: var(--gold); vertical-align: -2px; }

/* question screen */
.q-intro { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.dots { display: flex; gap: 8px; justify-content: center; }
.dots .dot {
  width: 15px; height: 15px;
  fill: rgba(255,255,255,.35);
  transition: fill .2s ease, transform .2s ease;
}
.dots .dot.done { fill: var(--gold); }
.dots .dot.now { fill: #fff; transform: scale(1.3); }

.q-card { min-height: 320px; justify-content: center; }
.q-text { font-size: 20px; font-weight: 700; line-height: 1.35; }

.choice {
  font-size: 17px;
  font-weight: 700;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid #f3d2de;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: transform .08s ease;
}
.choice:active { transform: scale(.97); }
.choice.picked { border-color: var(--pink); background: #ffe4ee; }

/* scale hearts */
.hearts { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.hearts button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform .1s ease;
}
.scale-heart {
  width: 40px; height: 40px;
  fill: #ecd3dd;
  transition: fill .12s ease, transform .12s ease;
}
.hearts button.lit { transform: scale(1.12); }
.hearts button.lit .scale-heart { fill: var(--pink-dark); }

/* mini hearts in reveals */
.mini-hearts { display: inline-flex; gap: 2px; }
.mini-heart { width: 16px; height: 16px; fill: #e8d2da; }
.mini-heart.lit { fill: var(--pink-dark); }
.scale-labels {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #a06; font-weight: 600;
  margin-bottom: 10px;
}

/* ranking */
.rank-hint { font-size: 13px; color: #a06; font-weight: 600; margin-top: 8px; }
.rank-option { position: relative; }
.rank-option .badge {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  background: var(--pink); color: #fff; font-size: 14px; font-weight: 800;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.rank-reset {
  background: none; border: none; color: var(--pink-dark);
  font-weight: 700; font-size: 14px; margin-top: 10px; cursor: pointer;
}

.wait-text { color: #fff; font-size: 19px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* judge screen (trio) */
#screen-judge > h2 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
#judge-list { display: flex; flex-direction: column; gap: 12px; }
.judge-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 14px;
  border-top: 1px solid #f3d2de; padding-top: 8px;
}
.judge-row .what { text-align: right; flex: 1; }
.award-btn {
  border: 2px solid #e5c2cf; background: #fff; color: #a06;
  border-radius: 12px; padding: 6px 10px; font-weight: 700;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.award-btn.on { border-color: #1a9c46; background: #e7f8ec; color: #1a9c46; }

/* reveal */
#reveal-list { display: flex; flex-direction: column; gap: 12px; }
.reveal-item { text-align: left; gap: 8px; }
.reveal-q { font-weight: 700; font-size: 15px; }
.reveal-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.reveal-row .who { color: #a06; font-weight: 600; white-space: nowrap; }
.reveal-row .what { text-align: right; }
.reveal-pts { font-weight: 800; text-align: right; }
.reveal-pts.hit { color: #1a9c46; }
.reveal-pts.close { color: #d98e04; }
.reveal-pts.miss { color: #c22; }

/* final */
.float-hearts { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fh {
  position: absolute;
  bottom: -50px;
  fill: rgba(255,255,255,.55);
  animation: rise 7s linear infinite;
}
.fh:nth-child(1) { left:  8%; width: 22px; height: 22px; animation-delay: 0s;   }
.fh:nth-child(2) { left: 24%; width: 34px; height: 34px; animation-delay: 2.2s; }
.fh:nth-child(3) { left: 46%; width: 18px; height: 18px; animation-delay: 4.1s; }
.fh:nth-child(4) { left: 62%; width: 28px; height: 28px; animation-delay: 1.3s; }
.fh:nth-child(5) { left: 78%; width: 20px; height: 20px; animation-delay: 3.4s; }
.fh:nth-child(6) { left: 90%; width: 30px; height: 30px; animation-delay: 5.2s; }
@keyframes rise {
  from { transform: translateY(0) rotate(-10deg); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: translateY(-108vh) rotate(12deg); opacity: 0; }
}

.final-score { color: #fff; }
.final-pct { font-size: 64px; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* toast + connection banner */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 14px; font-size: 15px; max-width: 90%;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 10;
}
#conn {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--gold); color: var(--ink);
  text-align: center; font-weight: 700; font-size: 14px;
  padding: 6px; z-index: 11;
}