/* VibeQuizz — pastel theme system (blush default; sky / mint / peach via data-theme) */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg1: #fff5fa; --bg2: #f6ecff; --bg3: #eaf4ff;
  --pink: #ff8fbf; --pink-deep: #f25d9c; --purple: #a78bfa;
  --ink: #4a3b52; --ink-soft: #8a7794;
  --card: #ffffff;
  --line: #f3e2ee; --line-strong: #ffd0e5; --chip: #fff0f7;
  --shadow: 0 10px 30px rgba(180, 140, 220, .16);
}
:root[data-theme="sky"] {
  --bg1: #f2f8ff; --bg2: #eef1ff; --bg3: #fdf3ff;
  --pink: #6db4f5; --pink-deep: #3e8fe8; --purple: #8b9df7;
  --ink: #334760; --ink-soft: #7b8aa3;
  --line: #e0ecf9; --line-strong: #bcdcfb; --chip: #eef6ff;
  --shadow: 0 10px 30px rgba(110, 160, 230, .16);
}
:root[data-theme="mint"] {
  --bg1: #f1fcf6; --bg2: #edfaf2; --bg3: #f2f7ff;
  --pink: #5ecfa2; --pink-deep: #2fae7d; --purple: #67c6bb;
  --ink: #2f4a41; --ink-soft: #6f948a;
  --line: #dff3e9; --line-strong: #bfe8d6; --chip: #ecfaf3;
  --shadow: 0 10px 30px rgba(90, 190, 150, .16);
}
:root[data-theme="peach"] {
  --bg1: #fff7f0; --bg2: #fff1ec; --bg3: #fdf0f6;
  --pink: #ffab76; --pink-deep: #f0824f; --purple: #f78fb3;
  --ink: #553d33; --ink-soft: #a08376;
  --line: #fbe8dd; --line-strong: #ffd6bd; --chip: #fff3ea;
  --shadow: 0 10px 30px rgba(240, 150, 100, .16);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 92% -10%, var(--bg3), transparent 60%),
    radial-gradient(800px 500px at -12% 22%, var(--bg1), transparent 55%),
    linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 10px 16px 76px; position: relative; z-index: 1; animation: fadeup .45s ease; }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* soft floating background blobs */
.blob {
  position: fixed; z-index: 0; border-radius: 50%; opacity: .5;
  filter: blur(30px); pointer-events: none;
  animation: floaty 8s ease-in-out infinite;
  transition: background .35s ease;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* header: sticky pill that blends with the background */
.top {
  position: sticky; top: 8px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.top .spacer { width: 76px; }
.logo {
  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-size: 30px; text-decoration: none;
  background: linear-gradient(90deg, var(--pink-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dots { display: flex; gap: 7px; width: 76px; justify-content: flex-end; }
.dots button {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid #fff;
  cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.14);
  transition: transform .15s ease;
}
.dots button:hover { transform: scale(1.25); }
.dots button.on { transform: scale(1.2); outline: 2px solid var(--pink-deep); outline-offset: 1px; }

.tagline { text-align: center; color: var(--ink-soft); font-weight: 600; font-size: 14px; margin-bottom: 14px; }

/* ad slots — hidden automatically when no ad renders (see site.js) */
.ad-slot { margin: 14px auto; text-align: center; overflow: hidden; }
/* wide ads (728px) break out of the 560px column, centered on the viewport */
.ad-wide { width: 100vw; margin-left: calc(50% - 50vw); }

/* home */
.hero { text-align: center; margin: 8px 0 20px; }
.hero h1 {
  font-size: 27px; font-weight: 700;
  background: linear-gradient(90deg, var(--pink-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--ink-soft); font-weight: 600; font-size: 14px; margin-top: 7px; }
.hero .count {
  display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700;
  background: var(--chip); color: var(--pink-deep);
  border: 1.5px solid var(--line-strong); padding: 6px 15px; border-radius: 999px;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qcard {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border-radius: 22px; padding: 18px 14px 16px;
  box-shadow: var(--shadow); text-align: center;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative; overflow: hidden;
}
.qcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 64px;
  background: var(--g, linear-gradient(90deg, #ffd6e8, #e7d6ff));
  opacity: .55;
}
.qcard:hover, .qcard:active {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(150, 120, 200, .22);
}
.qcard .num {
  font-family: "Pacifico", cursive; font-size: 30px; display: block;
  position: relative; margin-bottom: 6px;
  background: linear-gradient(90deg, var(--pink-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.qcard h3 { font-size: 15px; line-height: 1.25; position: relative; }
.qcard p { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; margin-top: 5px; position: relative; }
.qcard .cta {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  color: #fff; padding: 6px 14px; border-radius: 999px; position: relative;
}

/* quiz page */
.qhead { text-align: center; margin: 8px 0 14px; }
.qhead h1 { font-size: 21px; }

.progress { margin: 0 auto 6px; }
.progress .label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-align: center; margin-bottom: 6px; }
.bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  transition: width .3s ease;
}

.qbox {
  background: var(--card); border-radius: 22px; padding: 20px 18px;
  box-shadow: var(--shadow); margin-top: 12px; border: 1.5px solid var(--line);
}
.qbox h2 { font-size: 18px; text-align: center; margin-bottom: 16px; line-height: 1.35; }

.opt {
  display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 38px 14px 16px; margin-bottom: 10px; font-weight: 700; font-size: 15px;
  position: relative;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.opt::after {
  content: "\203A"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-52%); font-size: 22px; color: var(--pink-deep);
  opacity: 0; transition: opacity .12s ease, right .12s ease;
}
.opt:hover, .opt:active { border-color: var(--pink); background: var(--chip); transform: scale(1.02); }
.opt:hover::after, .opt:active::after { opacity: 1; right: 13px; }

/* result page */
.rcard {
  background: var(--card); border-radius: 26px; padding: 18px 20px 22px;
  box-shadow: var(--shadow); text-align: center; margin-top: 10px;
  position: relative; overflow: hidden; border: 1.5px solid var(--line);
}
.rcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 90px;
  background: var(--g, linear-gradient(90deg, #ffd6e8, #e7d6ff)); opacity: .5;
}
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.rcard .you { position: relative; color: var(--ink-soft); font-weight: 700; font-size: 13px; margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.rcard h1 {
  position: relative; font-size: 34px; margin-top: 4px; animation: pop .5s ease;
  background: linear-gradient(90deg, var(--pink-deep), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.match {
  position: relative; display: inline-block; margin-top: 8px; font-weight: 700; font-size: 13px;
  background: var(--chip); color: var(--pink-deep); border: 1.5px solid var(--line-strong);
  padding: 5px 14px; border-radius: 999px;
}
.rcard .desc { position: relative; margin-top: 14px; font-size: 15.5px; line-height: 1.55; font-weight: 600; }
.traits { position: relative; margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.traits span {
  background: var(--chip); border: 1.5px solid var(--line);
  font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
}

.actions { display: flex; gap: 10px; margin-top: 16px; }
.btn {
  flex: 1; text-align: center; text-decoration: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  border-radius: 999px; padding: 13px 10px; border: none;
  transition: transform .12s ease;
}
.btn:hover, .btn:active { transform: scale(1.03); }
.btn.primary { background: linear-gradient(90deg, var(--pink), var(--purple)); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.btn.ghost { background: var(--card); color: var(--pink-deep); border: 2px solid var(--line-strong); }

.more { margin-top: 26px; }
.more h2 { text-align: center; font-size: 18px; margin-bottom: 14px; }

/* text pages (policy) + home seo section */
.page {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 22px;
  padding: 22px 20px; box-shadow: var(--shadow); margin-top: 12px;
}
.page h1 { font-size: 22px; margin-bottom: 10px; }
.page h2 { font-size: 16.5px; margin: 18px 0 6px; color: var(--pink-deep); }
.page h3 { font-size: 14.5px; margin: 12px 0 4px; }
.page p, .page li { font-size: 14px; line-height: 1.65; font-weight: 600; margin-bottom: 8px; }
.page ul { padding-left: 20px; margin-bottom: 8px; }
.page a { color: var(--pink-deep); }
.seo { margin-top: 28px; }
.seo h2:first-child { margin-top: 0; }

/* quiz intro text (question 1 only) */
.intro {
  margin-top: 14px; text-align: center; font-size: 13.5px;
  line-height: 1.6; font-weight: 600; color: var(--ink-soft); padding: 0 6px;
}

/* footer — fixed bar, always the last thing at the bottom of the screen */
footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 11px 12px; text-align: center;
  color: var(--ink-soft); font-weight: 600; font-size: 12.5px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1.5px solid rgba(255, 255, 255, .7);
}
footer a { color: var(--pink-deep); text-decoration: none; }

/* confetti dots on result */
.spark {
  position: fixed; top: -20px; z-index: 2; width: 10px; height: 10px;
  border-radius: 50%; animation: fall linear forwards; pointer-events: none;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: .2; } }

@media (min-width: 480px) {
  .qcard h3 { font-size: 16px; }
}