/* זוג·ON — warm hand-drawn look, ported from docs/design/warm.html */
:root {
  --plum: #2b1033; --plum-deep: #24092b; --rose: #ff4f8b; --gold: #ffc857;
  --paper: #fff7ef; --ink: #3a1d3f; --soft: #ffd9e6; --mut: #f3cfe0; --ink-mut: #8a5b7f;
  --ok: #7dffbf; --no: #ff8fa3;
  --hand: "Amatic SC", cursive; --body: "Varela Round", system-ui, sans-serif; --q: "Suez One", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body); font-size: 17px; line-height: 1.45; color: #fff;
  min-block-size: 100dvh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden;
  background:
    radial-gradient(900px 500px at 80% -10%, #7a2a6b 0, transparent 60%),
    radial-gradient(700px 420px at 0% 110%, #5b1a4a 0, transparent 60%),
    var(--plum-deep);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
.blob { position: fixed; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0; }
.b1 { inline-size: 220px; block-size: 220px; background: var(--rose); opacity: .45; inset-block-start: -70px; inset-inline-end: -60px; }
.b2 { inline-size: 180px; block-size: 180px; background: var(--gold); opacity: .22; inset-block-end: -60px; inset-inline-start: -50px; }
.bar, main { position: relative; z-index: 1; inline-size: 100%; max-inline-size: 440px; }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; }
.logo { font-family: var(--hand); font-size: 40px; color: #fff; text-decoration: none; line-height: 1; }
.logo b { color: var(--rose); }
main { padding: 6px 18px 48px; display: flex; flex-direction: column; gap: 16px; }

h1, h2, h3, .hey { font-family: var(--hand); font-weight: 700; margin: 0; line-height: .95; }
h1, .hey { font-size: 48px; }
h2 { font-size: 38px; }
h3 { font-size: 30px; color: var(--gold); }
.mut { color: var(--mut); }
.small { font-size: 15px; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }
.err { color: var(--no); font-size: 15px; min-block-size: 1.2em; }

/* paper cards */
.card { position: relative; background: var(--paper); color: var(--ink); border-radius: 22px;
  padding: 22px 20px; box-shadow: 0 14px 30px #0006; }
.card h2, .card h3 { color: var(--ink); }
.card .mut { color: var(--ink-mut); }
.card.tilt { transform: rotate(-1.5deg); }
.card.glass { background: #ffffff14; color: #fff; box-shadow: none; }
.card.glass .mut { color: var(--mut); }
.tag { display: inline-block; background: var(--rose); color: #fff; border-radius: 20px; padding: 4px 12px; font-size: 14px; }
.tag.g { background: var(--gold); color: var(--ink); }

/* home deck */
.deck { position: relative; min-block-size: 250px; margin-block: 6px 10px; }
.deck .card { position: absolute; inset: 0; }
.deck .c2 { transform: rotate(-6deg) translate(10px, 6px); background: #ffe3ec; }
.deck .c3 { transform: rotate(5deg) translate(-8px, 4px); background: #fff0c9; }
.deck .top { transform: rotate(-1.5deg); display: flex; flex-direction: column; gap: 8px; }
.deck h3 { font-family: var(--q); font-size: 27px; line-height: 1.25; color: var(--ink); }
.deck .heart { position: absolute; inset-block-end: 14px; inset-inline-start: 18px; font-size: 28px; }

/* avatars */
.av { display: flex; align-items: center; }
.av span { inline-size: 46px; block-size: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: var(--ink); border: 3px solid var(--plum); margin-inline-start: -12px; }
.av span:first-child { margin: 0; background: #ffb3cb; }
.av span:nth-child(2) { background: #ffe2a3; }
.av em { font-style: normal; margin-inline-start: 10px; color: var(--mut); font-size: 15px; }

/* chunky pill buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%;
  min-block-size: 56px; padding: 14px 18px; border: 0; border-radius: 999px; background: var(--rose);
  color: #fff; font: inherit; font-size: 19px; cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 0 #b8245c, 0 14px 24px #0005; margin-block-end: 8px; transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #b8245c, 0 6px 12px #0005; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.g { background: var(--gold); color: var(--ink); box-shadow: 0 8px 0 #c08d1f, 0 14px 24px #0005; }
.btn.o { background: #ffffff1c; color: #fff; box-shadow: 0 6px 0 #0004; }
.btn.wa { background: #25d366; color: #0b2a17; box-shadow: 0 8px 0 #179a48, 0 14px 24px #0005; }
.link { background: none; border: 0; color: var(--mut); font: inherit; min-block-size: 48px; cursor: pointer; text-decoration: underline; }

/* forms */
input { inline-size: 100%; min-block-size: 54px; border-radius: 18px; border: 2px solid #e8c9da;
  background: #fff; color: var(--ink); font: inherit; padding-inline: 16px; }
input:focus { outline: none; border-color: var(--rose); }
input.code { text-align: center; letter-spacing: 6px; font-size: 22px; text-transform: uppercase; direction: ltr; }
label { display: block; font-size: 14px; color: var(--ink-mut); margin-block-end: 4px; }
.tabs { display: flex; background: #ffffff14; border-radius: 999px; padding: 4px; }
.tabs button { flex: 1; min-block-size: 48px; border: 0; border-radius: 999px; background: none;
  color: var(--mut); font: inherit; cursor: pointer; }
.tabs button.on { background: var(--paper); color: var(--ink); }
.bigcode { direction: ltr; text-align: center; font-family: var(--q); font-size: 40px; letter-spacing: 8px;
  color: var(--ink); background: #fff0c9; border-radius: 18px; padding-block: 10px; border: 2px dashed #e0b25a; }

/* question + speech-bubble answers */
.meta { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--mut); }
.progress { block-size: 8px; background: #ffffff22; border-radius: 9px; overflow: hidden; }
.progress i { display: block; block-size: 100%; background: linear-gradient(90deg, var(--rose), var(--gold));
  border-radius: 9px; transition: inline-size .3s; }
.q { font-family: var(--q); font-size: 25px; line-height: 1.25; }
.bubs { display: flex; flex-direction: column; gap: 12px; }
.bub { background: #fff; color: var(--ink); border: 0; border-radius: 22px 22px 6px 22px; padding: 12px 18px;
  font: inherit; font-size: 17px; text-align: start; box-shadow: 0 6px 14px #0004; inline-size: fit-content;
  max-inline-size: 100%; min-block-size: 48px; cursor: pointer; transition: transform .12s, background .12s; }
.bub.sel { background: var(--gold); transform: rotate(-2deg) scale(1.04); }
.bub.r { border-radius: 22px 22px 22px 6px; align-self: flex-end; }
.bub.say { background: #ffffff22; color: #fff; box-shadow: none; cursor: default; }
.bub.ok { background: var(--ok); } .bub.no { background: var(--no); }

/* feedback / pass phone / waiting */
.big { font-size: 72px; text-align: center; line-height: 1; }
.pulse { animation: p 1.6s ease-in-out infinite; }
@keyframes p { 50% { transform: scale(1.12); } }
.verdict { font-family: var(--hand); font-size: 56px; text-align: center; line-height: 1; }
.verdict.ok { color: var(--ok); } .verdict.no { color: var(--no); }

/* result */
.score { display: flex; justify-content: space-around; align-items: flex-end; }
.score > div { text-align: center; }
.score b { font-family: var(--hand); font-size: 84px; display: block; line-height: .8; }
.score .w b { color: var(--gold); }
.crown { font-size: 30px; display: block; }
.prize { font-size: 19px; text-align: center; }
.rev { background: #ffffff14; border-radius: 16px; padding: 10px 12px; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rev .who { color: var(--mut); font-size: 13px; }
.ok { color: var(--ok); } .no { color: var(--no); }
.conf { position: fixed; z-index: 2; font-size: 24px; pointer-events: none; animation: fall 2.8s ease-in forwards; }
@keyframes fall { from { transform: translateY(-40px) rotate(0); opacity: 1; } to { transform: translateY(105vh) rotate(540deg); opacity: .6; } }

/* history */
.hist { display: flex; justify-content: space-between; align-items: center; min-block-size: 48px;
  background: #ffffff14; border-radius: 16px; padding: 8px 14px; color: #fff; text-decoration: none; }
.hist b { font-family: var(--hand); font-size: 30px; color: var(--gold); }

#toast { position: fixed; z-index: 3; inset-block-end: 24px; inset-inline: 0; margin-inline: auto; inline-size: max-content;
  max-inline-size: 90vw; background: var(--gold); color: var(--ink); padding: 12px 20px;
  border-radius: 999px; box-shadow: 0 8px 30px #0008; }
.card.glass label { color: var(--mut); }
.card.glass h2 { color: #fff; } .card.glass h3 { color: var(--gold); }
.card:not(.glass) .err { color: #c2185b; }
.bub.ok, .bub.no { color: var(--ink); }
.card .verdict.ok { color: #169a5a; } .card .verdict.no { color: #d6335a; }
.prize { margin: 0; }

/* v4: Google sign-in + collapsible password form */
.gbtn { display: flex; justify-content: center; min-block-size: 44px; inline-size: 100%; }
.pwbox > summary { list-style: none; cursor: pointer; padding-block: 10px; color: var(--mut); }
.pwbox > summary::-webkit-details-marker { display: none; }
.pwbox.solo > summary { display: none; }
.pwbox > .stack { display: flex; flex-direction: column; gap: 14px; }
.gcard-in .err:empty, #g2 .err:empty { display: none; }
.card:not(.glass) .btn.o { background: #fff0f5; color: var(--ink); box-shadow: 0 6px 0 #e8c9da; }

/* Login design A (docs/design/login-a.html): full-screen sunset over the header */
.hero { position: fixed; inset: 0; z-index: 5; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #3b1450 0%, #8a2f6e 45%, #ff8a7a 78%, #ffc98a 100%); }
.hero-sun { position: absolute; inset-inline-start: 50%; inset-block-end: 26%; inline-size: 260px; block-size: 260px;
  margin-inline-start: -130px; border-radius: 50%; background: radial-gradient(#fff3c4, #ffc85700 70%); }
.hero-logo { position: absolute; inset-block-start: max(56px, 8vh); inline-size: 100%; text-align: center;
  font-family: var(--hand); font-size: 96px; line-height: 1; margin: 0; }
.hero-logo b { color: var(--rose); text-shadow: 0 4px 0 #6b1d4a; }
.hero-tag { position: absolute; inset-block-start: calc(max(56px, 8vh) + 112px); inline-size: 100%; text-align: center;
  font-size: 19px; color: #ffe3ec; padding: 0 40px; line-height: 1.5; margin: 0; }
.hero-bal { position: absolute; font-size: 60px; filter: drop-shadow(0 8px 10px #2b0a2466); animation: bob 5s ease-in-out infinite; }
.hero-bal.hb1 { inset-block-start: 36%; inset-inline-start: 14%; transform: rotate(8deg); }
.hero-bal.hb2 { inset-block-start: 42%; inset-inline-end: 15%; font-size: 48px; animation-delay: -2s; }
@keyframes bob { 50% { translate: 0 -12px; } }
.hero-hill { position: absolute; inset-block-end: 0; inset-inline: 0; inline-size: 100%; block-size: 300px; fill: #5b1a4a; opacity: .8; }
.hero-panel { position: absolute; inset-block-end: 0; inset-inline: 0; margin-inline: auto; max-inline-size: 480px;
  background: var(--paper); color: var(--ink); border-radius: 34px 34px 0 0;
  padding: 30px 24px max(34px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px #2b0a2455;
  display: flex; flex-direction: column; gap: 6px; text-align: center; }
.hero-panel h2 { font-family: var(--q); font-size: 24px; margin: 0; }
.hero-sub { color: var(--ink-mut); font-size: 15px; margin: 0 0 14px; }
.hero-panel .chip { align-self: center; margin-block-end: 14px; }
.gbig { position: relative; block-size: 58px; border-radius: 999px; background: #fff; border: 2px solid #ead7e2;
  box-shadow: 0 6px 0 #ead7e2; overflow: hidden; }
.gface { display: flex; align-items: center; justify-content: center; gap: 12px; block-size: 100%;
  font: 500 18px Roboto, Arial, sans-serif; color: #1f1f1f; pointer-events: none; }
.gghost { position: absolute; inset: 0; opacity: .01; transform-origin: center; display: flex;
  align-items: center; justify-content: center; }
.gbig:active { translate: 0 3px; box-shadow: 0 3px 0 #ead7e2; }
.hero-panel .or { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: #b08aa3; font-size: 14px; }
.hero-panel .or::before, .hero-panel .or::after { content: ""; flex: 1; block-size: 1px; background: #ead7e2; }
.hero-alt { color: #b8245c; font-size: 16px; text-decoration: underline; min-block-size: 44px; }
.hero .err { color: #c0264f; min-block-size: 0; }
@media (prefers-reduced-motion: reduce) { .hero-bal { animation: none; } }