/*
  style.css  --  how Quizim looks.

  THE IDEA: a school notebook, not a tech product. Warm paper with faint
  grid lines, navy "ink", a yellow highlighter for the one thing to press,
  sticky notes for explanations. Thick outlines and flat offset shadows make
  every card look like paper you could pick up.

  THE COLOURS, AND WHY
    paper   warm off-white  -- easier on the eyes than pure white for long study
    ink     deep navy       -- reads as calm and trustworthy, keeps focus
    marker  yellow          -- optimism and attention; only on main buttons
    mint    soft green      -- a right answer: calm success, not a casino flash
    coral   warm coral      -- a wrong answer: noticeable but not alarm-red,
                               so a mistake feels like feedback, not failure
    sky / lilac / peach     -- sticky notes and gentle highlights

  Every colour is a variable below. Change one here and the whole site follows.
*/

:root {
  --paper:      #FBF7F0;
  --paper-2:    #F3ECDF;
  --card:       #FFFDF8;
  --ink:        #1D2B4F;
  --ink-2:      #4A5878;
  --ink-3:      #8890A4;
  --grid:       rgba(29, 43, 79, 0.055);
  --marker:     #FFD84A;
  --marker-2:   #FFEB99;
  --sky:        #DCE9FF;
  --sky-ink:    #2853A6;
  --mint:       #2E9E7E;
  --mint-soft:  #DDF3EA;
  --mint-ink:   #17654F;
  --coral:      #E5654F;
  --coral-soft: #FCE6E0;
  --coral-ink:  #A23B2A;
  --lilac:      #E9E3FF;
  --peach:      #FFE6D1;

  /* The children's quiz: bright, friendly, never alarming. One colour per
     option, so a child who cannot read every word yet can still say "the blue one". */
  --kid-1:      #FFD45C;   /* sun */
  --kid-2:      #8FD0FF;   /* sky */
  --kid-3:      #8EDDB0;   /* grass */
  --kid-4:      #FFB3C4;   /* candy */
  --kid-5:      #C9B8FF;   /* lilac */
  --kid-6:      #FFC48C;   /* orange */
  --kid-bg:     #FFF8E7;
  --star:       #FFB800;

  --radius:     16px;
  --line:       2px solid var(--ink);
  --shadow:     4px 4px 0 var(--ink);
  --shadow-lg:  7px 7px 0 var(--ink);

  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Onest", "Segoe UI", system-ui, sans-serif;
  --font-hand:    "Caveat", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.55 var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--sky-ink); }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--marker); }
:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; }
/* The tilted sticky notes reach a pixel or two past the edge on a phone --
   never enough to show, but enough to make the page scroll sideways. */
main { overflow-x: clip; }

/* ---- the header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.logo {
  font: 700 24px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo-mark {
  width: 34px; height: 34px; border: var(--line); border-radius: 10px; background: var(--marker);
  box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; transform: rotate(-6deg);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo b { font-weight: 700; background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); }
/* Biları, the bee: the logo (minimal) and the mascot (full). */
.logo-bee { width: 40px; height: 40px; flex: 0 0 auto; transition: transform .2s; }
.logo:hover .logo-bee { transform: rotate(-8deg) scale(1.06); }
.logo-bee.is-buzz { animation: bee-jitter .07s steps(2) 12; }
@keyframes bee-jitter { 0% { transform: translate(-1px, 1px) rotate(-3deg); } 100% { transform: translate(1px, -1px) rotate(3deg); } }
@keyframes bee-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.hero-bee {
  position: absolute; top: -78px; right: -38px; width: 150px; height: auto; z-index: 2; pointer-events: none;
  animation: bee-bob 2.6s ease-in-out infinite; filter: drop-shadow(2px 4px 0 rgba(29, 43, 79, .12));
}

/* ---- the first-visit intro: "quizzzz" ---- */
.intro-on, .intro-on body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center; padding: 24px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px; transition: opacity .5s; cursor: pointer;
}
.intro.is-out { opacity: 0; pointer-events: none; }
.intro-stage { display: grid; justify-items: center; }
.intro-bee { width: clamp(130px, 28vw, 240px); height: auto; display: block; }
.intro.is-playing .intro-flight { animation: bee-in 1.45s cubic-bezier(.25, .7, .25, 1) both; }
.intro.is-playing .intro-bee { animation: bee-jitter .06s steps(2) 22, bee-bob 2.4s ease-in-out 1.45s infinite; }
@keyframes bee-in {
  0%   { transform: translate(-62vw, 28vh) rotate(-22deg) scale(.55); }
  30%  { transform: translate(-24vw, -16vh) rotate(12deg) scale(.75); }
  55%  { transform: translate(16vw, 4vh) rotate(-10deg) scale(.9); }
  78%  { transform: translate(-5vw, -5vh) rotate(5deg) scale(1.02); }
  100% { transform: none; }
}
.intro-word { margin: 6px 0 0; font: 700 clamp(46px, 11vw, 108px)/1 var(--font-display); letter-spacing: -0.045em; color: var(--ink); }
.intro.is-playing .intro-quiz { display: inline-block; animation: word-zoom .55s cubic-bezier(.2, .85, .25, 1) 1s both; }
.intro-z span {
  display: inline-block; color: #F2A900;
  animation: z-out .3s cubic-bezier(.2, 1.3, .4, 1) both, z-wiggle .5s ease-in-out .3s 2;
  transform-origin: 50% 80%; font-size: calc(1em - var(--k) * 0.035em);
}
@keyframes word-in { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
/* max-width grows from 0 so the word glides over to make room instead of jumping */
@keyframes z-out { from { opacity: 0; max-width: 0; transform: translateX(-.6em) scale(.55); } to { opacity: 1; max-width: 1em; transform: none; } }
@keyframes word-zoom {
  0%   { opacity: 0; transform: translateX(-60vw) skewX(-28deg) scaleX(1.7); filter: blur(6px); }
  55%  { opacity: 1; transform: translateX(3vw) skewX(9deg) scaleX(.93); filter: blur(0); }
  78%  { transform: translateX(-1vw) skewX(-3deg) scaleX(1.02); }
  100% { transform: none; }
}
@keyframes z-wiggle { 50% { transform: translateY(-4px) rotate(6deg); } }
.intro-tag { margin: 14px 0 0; font: 600 clamp(24px, 4.5vw, 34px)/1.1 var(--font-hand); color: var(--sky-ink); opacity: 0; }
.intro.is-playing .intro-tag { animation: word-in .5s ease-out 2.05s both; }
.intro-sound, .intro-skip {
  position: absolute; font: 700 15px var(--font-body); color: var(--ink); cursor: pointer; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--card); padding: 9px 16px; box-shadow: 3px 3px 0 var(--ink);
}
.intro-sound { bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--marker); }
.intro-skip { top: 18px; right: 18px; box-shadow: none; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a {
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 7px 12px; border-radius: 10px;
}
.top nav a:hover { background: var(--paper-2); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: var(--line); border-radius: 12px; background: var(--card);
  font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--ink); }
.btn-main { background: var(--marker); }
.btn-main:hover { background: #FFCF1F; }
.btn-big { padding: 16px 26px; font-size: 18px; width: 100%; }
.btn-quiet { border-color: transparent; box-shadow: none; background: transparent; text-decoration: underline; padding: 10px 6px; font-weight: 600; }
.btn-quiet:hover, .btn-quiet:active { transform: none; box-shadow: none; }
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- the hero ---- */
.hero { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 48px; align-items: center; padding-block: 34px 64px; }
.hero h1 {
  font: 700 clamp(2.3rem, 6vw, 4rem)/1.04 var(--font-display); letter-spacing: -0.035em; margin: 0 0 18px;
}
.swipe {
  position: relative; display: inline-block; z-index: 0; white-space: nowrap;
}
.swipe::before {
  content: ""; position: absolute; z-index: -1; left: -6px; right: -8px; bottom: 4px; height: 46%;
  background: var(--marker); border-radius: 6px 14px 8px 12px; transform: rotate(-1.5deg);
}
.hero .lead { font-size: 19px; color: var(--ink-2); max-width: 30em; margin: 0 0 24px; }
.stamps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stamps li {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px;
  padding: 7px 13px; border: 1.5px dashed var(--ink-3); border-radius: 999px; background: var(--card);
}
.stamps svg { width: 17px; height: 17px; color: var(--mint); }
.hand {
  font: 600 27px/1.1 var(--font-hand); color: var(--sky-ink); display: flex; align-items: flex-end; gap: 6px;
  margin: 26px 0 0 auto; width: max-content; transform: rotate(-3deg);
}
.hand svg { width: 70px; height: 46px; }

/* ---- the sheet: the main card, a piece of paper taped to the page ---- */
.sheet {
  position: relative; background: var(--card); border: var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 26px;
}
.sheet::before {
  content: ""; position: absolute; top: -15px; left: 50%; width: 110px; height: 30px; margin-left: -55px;
  background: rgba(255, 216, 74, 0.75); border: 1px solid rgba(29, 43, 79, 0.18); transform: rotate(-2.5deg);
}
.sheet h2 { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.sheet .sub { color: var(--ink-2); margin: 0 0 18px; font-size: 15.5px; }

.drop {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; cursor: pointer;
  padding: 34px 20px 28px; border: 2.5px dashed var(--ink-3); border-radius: 16px; background: var(--paper);
  transition: border-color .15s, background .15s, transform .15s;
}
.drop:hover, .drop.is-over { border-color: var(--ink); background: var(--marker-2); }
.drop.is-over { transform: scale(1.015); }
.drop-ic {
  width: 64px; height: 64px; border: var(--line); border-radius: 16px; background: var(--card);
  display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); margin-bottom: 8px; transform: rotate(3deg);
}
.drop-ic svg { width: 34px; height: 34px; }
.drop strong { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.drop span { color: var(--ink-2); font-size: 14.5px; }
.drop .btn { margin-top: 14px; }
.sheet-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 14px; font-size: 14.5px; }
.sheet-links a { font-weight: 600; }

/* reading the PDF */
.steps { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-3); transition: color .2s; }
.steps li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; flex: 0 0 auto;
}
.steps li.is-now { color: var(--ink); }
.steps li.is-now::before { border-color: var(--ink); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps li.is-done { color: var(--mint-ink); }
.steps li.is-done::before { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; border-color: var(--mint); }
.queue-note { margin: -6px 0 18px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--marker-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- the sponsor card ---- */
.ad {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  border: var(--line); border-radius: 14px; padding: 14px 16px; background: var(--peach); text-decoration: none; color: var(--ink);
}
.ad-tag {
  position: absolute; top: -11px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; padding: 1px 9px;
}
.ad img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--ink); }
.ad-ic { width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--card); display: grid; place-items: center; }
.ad-ic svg { width: 28px; height: 28px; }
.ad b { display: block; font-size: 16px; line-height: 1.3; }
.ad p { margin: 3px 0 8px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ad .ad-cta { font-weight: 700; font-size: 14px; text-decoration: underline; }
.ad-wait { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.count {
  --p: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--ink);
  background: conic-gradient(var(--ink) calc(var(--p) * 1%), var(--paper-2) 0); position: relative; flex: 0 0 auto;
}
.count::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.count span { position: relative; font-size: 14px; }

/* ---- settings ---- */
.found {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--mint-soft);
  border: 2px solid var(--mint); border-radius: 14px; margin-bottom: 18px;
}
.found .found-num { font: 700 38px/1 var(--font-display); color: var(--mint-ink); letter-spacing: -0.03em; }
.found b { display: block; font-size: 16.5px; }
.found b + span { font-size: 14px; color: var(--ink-2); }
.preview { font-size: 14.5px; color: var(--ink-2); border-left: 3px solid var(--marker); padding: 2px 0 2px 12px; margin: -6px 0 18px; font-style: italic; }

.field { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: 700; font-size: 15px; margin: 0 0 8px; padding: 0; }
.input {
  width: 100%; padding: 12px 14px; border: var(--line); border-radius: 12px; background: var(--card); font-size: 16px;
}
.input:focus { outline: none; box-shadow: 3px 3px 0 var(--marker), 3px 3px 0 2px var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 9px 15px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
  font-weight: 700; font-size: 15px; cursor: pointer; transition: background .12s, transform .08s;
}
.chip span:hover { background: var(--paper-2); }
.chip input:checked + span { background: var(--ink); color: var(--card); }
.chip input:focus-visible + span { outline: 3px solid var(--sky-ink); outline-offset: 2px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { position: relative; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode > span {
  display: block; height: 100%; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.mode .m-ic { display: block; }
.mode svg { width: 24px; height: 24px; display: block; margin-bottom: 6px; }
.mode b { display: block; font-size: 16px; }
.mode small { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.mode input:checked + span { background: var(--sky); box-shadow: 3px 3px 0 var(--ink); }
.mode input:focus-visible + span { outline: 3px solid var(--sky-ink); outline-offset: 2px; }

.field > .switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.switch input { appearance: none; width: 48px; height: 28px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.switch input:checked { background: var(--marker); }
.switch input:checked::after { transform: translateX(20px); }

/* ---- done: the link ---- */
.done-head { text-align: center; margin-bottom: 18px; }
.stamp {
  display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--mint);
  color: var(--mint); transform: rotate(-10deg); margin-bottom: 10px; background: var(--mint-soft);
}
.stamp svg { width: 40px; height: 40px; }
.linkbox { display: flex; gap: 8px; margin-bottom: 12px; }
.linkbox .input { font-weight: 600; font-size: 15px; background: var(--paper); min-width: 0; }
.share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.btn-wa { background: #DFF7E8; }
.btn-tg { background: #DFF0FC; }

.alert {
  border: 2px solid var(--coral); background: var(--coral-soft); color: var(--coral-ink); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.5;
}
.alert b { display: block; margin-bottom: 2px; color: var(--ink); }
.alert.is-ok { border-color: var(--mint); background: var(--mint-soft); color: var(--mint-ink); }
.alert.is-info { border-color: var(--ink); background: var(--marker-2); color: var(--ink-2); }
.verify-note .small { margin: 8px 0 0; color: var(--ink); }
.verify-note .btn { margin-top: 10px; }

/* ---- sections below the hero ---- */
.section { padding-block: 56px; }
.section h2 { font: 700 clamp(1.6rem, 3.5vw, 2.3rem)/1.15 var(--font-display); letter-spacing: -0.03em; margin: 0 0 8px; }
.section .lead { color: var(--ink-2); margin: 0 0 30px; max-width: 40em; }

.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.note {
  position: relative; padding: 22px 20px 20px; border: var(--line); border-radius: 6px 6px 18px 6px; box-shadow: var(--shadow);
  background: var(--marker-2);
}
.note:nth-child(1) { transform: rotate(-1.4deg); }
.note:nth-child(2) { transform: rotate(1deg); background: var(--sky); }
.note:nth-child(3) { transform: rotate(-0.6deg); background: var(--lilac); }
.note-n {
  position: absolute; top: -16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: var(--line);
  background: var(--card); display: grid; place-items: center; font: 700 17px var(--font-display);
}
.note svg { width: 34px; height: 34px; margin-bottom: 8px; }
.note h3 { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.note p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.format { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.page {
  background: var(--card); border: var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 22px 24px;
  font: 15.5px/1.75 var(--font-body); position: relative;
  background-image: linear-gradient(90deg, transparent 38px, rgba(229, 101, 79, .35) 38px, rgba(229, 101, 79, .35) 40px, transparent 40px);
  padding-left: 54px;
}
.page .q-n { background: var(--marker); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.page .o-l { color: var(--sky-ink); font-weight: 700; }
.page .ans { background: var(--mint-soft); color: var(--mint-ink); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.page .gap { height: 10px; }
.ways { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.ways li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.ways .w-n { width: 34px; height: 34px; border-radius: 10px; border: var(--line); background: var(--card); display: grid; place-items: center; font-weight: 800; }
.ways b { display: block; }
.ways code { background: var(--paper-2); border-radius: 6px; padding: 1px 6px; font-size: 14.5px; }
.tip { border: 2px dashed var(--ink-3); border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.tip b { color: var(--ink); }

/* ---- my results ---- */
.history { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.h-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; background: var(--card);
  border: var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.h-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.h-score { width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 16px var(--font-display); }
.h-score.good { background: var(--mint-soft); }
.h-score.mid { background: var(--marker-2); }
.h-score.low { background: var(--coral-soft); }
.h-card b { display: block; font-size: 15.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-card small { color: var(--ink-2); font-size: 13px; }
.empty { border: 2px dashed var(--ink-3); border-radius: 14px; padding: 22px; text-align: center; color: var(--ink-2); }

.sponsor-band {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; border: var(--line); border-radius: 18px; background: var(--ink); color: var(--card); box-shadow: 6px 6px 0 var(--marker);
}
.sponsor-band h3 { font: 700 20px/1.25 var(--font-display); margin: 0 0 4px; letter-spacing: -0.02em; }
.sponsor-band p { margin: 0; opacity: .8; font-size: 15px; }
.sponsor-band .btn { border-color: var(--card); box-shadow: 3px 3px 0 var(--marker); }

.foot { padding-block: 34px 46px; color: var(--ink-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* =====================================================================
   PRICES AND PAYING
   The recommended card is lifted and yellow (the one thing to press); the
   others stay quiet paper. The old price is struck through in grey -- a
   true comparison with buying one by one, never an invented "was" price.
   ===================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-top: 8px; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px 20px 20px;
  background: var(--card); border: var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.plan.is-pick { background: var(--marker-2); box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
  background: var(--ink); color: var(--card); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px;
}
.plan h3 { font: 700 18px/1.25 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.plan-price { font: 700 34px/1.1 var(--font-display); letter-spacing: -0.03em; margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-price s { font: 600 17px var(--font-body); color: var(--ink-3); }
.plan-unit { margin: 0; font-weight: 700; color: var(--mint-ink); font-size: 15px; }
.plan-izah { margin: 6px 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; flex: 1; }
.plan .btn { width: 100%; margin-top: auto; }
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.plan-compare { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.mode b em { font-style: normal; color: var(--mint-ink); }
.upgrade { border: 2px dashed var(--ink-3); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; text-align: center; }
.upgrade p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.upgrade b { color: var(--ink); }
.plans-compact { grid-template-columns: 1fr; gap: 12px; margin: 6px 0 14px; }
.plans-compact .plan { padding: 16px 16px 14px; box-shadow: 3px 3px 0 var(--ink); transform: none; }
.plans-compact .plan.is-pick { box-shadow: 5px 5px 0 var(--ink); margin-top: 6px; }
.plans-compact .plan-badge { left: 16px; transform: rotate(-2deg); }
.plans-compact .plan-price { font-size: 26px; margin-top: 2px; }
.plans-compact .plan-izah { margin: 2px 0 10px; font-size: 13.5px; }

.promises { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promises li { border: 2px dashed var(--ink-3); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; color: var(--ink-2); }
.promises b { color: var(--ink); display: block; }
.proof { font-weight: 700; color: var(--mint-ink); margin: -16px 0 22px; }

.wallet-box {
  display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: end; margin-top: 22px;
  border: var(--line); border-radius: 16px; padding: 16px 18px; background: var(--sky);
}
.wallet-box b { display: block; font-size: 16px; }
.wallet-box #wallet-code { font-family: var(--font-display); letter-spacing: .04em; }
.wallet-box small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.wallet-form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.wallet-form span { display: flex; gap: 8px; }
.wallet-form .input { width: 150px; text-transform: uppercase; }
.wallet-chip { background: var(--marker-2); border: 2px solid var(--ink); }
.wallet-line { text-align: center; font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }

.cost-note { text-align: center; font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }
.paid-note { margin: 8px auto 0; max-width: 30em; font-size: 14.5px; font-weight: 600; color: var(--mint-ink); }

.pay-steps { margin: 6px 0 14px; padding-left: 22px; display: grid; gap: 12px; }
.pay-steps li { padding-left: 4px; }
.pay-steps .btn { margin-top: 6px; }
.code-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.code { font: 700 22px var(--font-display); letter-spacing: .06em; background: var(--marker-2); border: 2px dashed var(--ink); border-radius: 10px; padding: 4px 12px; }
.small { font-size: 13.5px; }
.pay-sheet { max-height: calc(100vh - 36px); overflow-y: auto; }
.pay-sheet h2 { font: 700 21px/1.2 var(--font-display); margin: 0 0 10px; }

.terms { max-width: 760px; padding-bottom: 20px; }
.terms h1 { font: 700 clamp(1.6rem, 4vw, 2.2rem)/1.15 var(--font-display); letter-spacing: -0.03em; margin: 0 0 6px; }
.terms h2 { font-size: 18px; margin: 22px 0 6px; }
.terms p, .terms li { color: var(--ink-2); }
.terms ul { padding-left: 20px; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); background: var(--ink); color: var(--card);
  padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 15px; transition: transform .25s; z-index: 50; box-shadow: 3px 3px 0 var(--marker);
}
.toast.is-on { transform: translate(-50%, 0); }

/* =====================================================================
   THE QUIZ PAGE
   ===================================================================== */
.play { max-width: 760px; margin: 0 auto; padding: 0 16px 60px; }
.play .sheet { padding: 24px; }

.start h1 { font: 700 clamp(1.6rem, 5vw, 2.3rem)/1.15 var(--font-display); letter-spacing: -0.03em; margin: 0 0 12px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.meta li { font-weight: 700; font-size: 14px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.meta li:first-child { background: var(--marker); }
.players { color: var(--ink-2); font-size: 15px; margin: -6px 0 18px; }

.bar { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.bar-count { font: 700 15px var(--font-display); white-space: nowrap; }
.progress { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--marker); border-right: 2px solid var(--ink); transition: width .3s; }
.timer { font: 700 15px var(--font-display); padding: 5px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timer.is-low { background: var(--coral-soft); color: var(--coral-ink); border-color: var(--coral); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.streak { font-weight: 800; font-size: 14px; padding: 5px 11px; border-radius: 999px; background: var(--peach); border: 2px solid var(--ink); white-space: nowrap; }

.qcard { position: relative; }
.qcard::before, .sheet.plain::before { display: none; }   /* the tape belongs on the first card, not every question */
.q-badge {
  position: absolute; top: -18px; left: 22px; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; border: var(--line);
  background: var(--marker); display: grid; place-items: center; font: 700 17px var(--font-display); box-shadow: 2px 2px 0 var(--ink);
}
.q-text { font-size: clamp(18px, 2.6vw, 21px); line-height: 1.5; font-weight: 600; margin: 12px 0 20px; white-space: pre-line; }

.options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opt {
  width: 100%; display: grid; grid-template-columns: 38px 1fr 24px; gap: 12px; align-items: center; text-align: left;
  padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); cursor: pointer;
  font-size: 16.5px; line-height: 1.4; transition: background .12s, transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
.opt:hover:not(:disabled) { background: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.opt:disabled { cursor: default; }
.opt-l { width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 15px var(--font-display); background: var(--paper); }
.opt-mark svg { width: 24px; height: 24px; }
.opt.is-picked { background: var(--sky); box-shadow: 3px 3px 0 var(--ink); }
.opt.is-picked .opt-l { background: var(--ink); color: var(--card); }
.opt.is-right { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-ink); }
.opt.is-right .opt-l { background: var(--mint); border-color: var(--mint); color: #fff; }
.opt.is-wrong { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-ink); }
.opt.is-wrong .opt-l { background: var(--coral); border-color: var(--coral); color: #fff; }
.opt.is-dim { opacity: .55; }

.feedback { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: 15.5px; }
.feedback svg { width: 28px; height: 28px; flex: 0 0 auto; }
.feedback.good { background: var(--mint-soft); color: var(--mint-ink); border: 2px solid var(--mint); }
.feedback.bad { background: var(--coral-soft); color: var(--coral-ink); border: 2px solid var(--coral); }
.feedback b { color: var(--ink); }
/* A written question's "why": the lesson behind the answer. */
.why { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
  background: var(--sky); color: var(--sky-ink); font-size: 14.5px; line-height: 1.45; }
.why svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }

.qnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.qnav .btn { flex: 1 1 140px; }
.grid-toggle { margin-top: 14px; text-align: center; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; margin-top: 12px; }
.qgrid button {
  height: 42px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); font-weight: 800; cursor: pointer;
}
.qgrid button.is-answered { background: var(--sky); }
.qgrid button.is-here { background: var(--marker); }

/* results */
.score { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.ring { position: relative; width: 140px; height: 140px; }
.ring svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 13; }
.ring .bg { stroke: var(--paper-2); }
.ring .fg { stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.ring-txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring-txt b { display: block; font: 700 30px/1 var(--font-display); letter-spacing: -0.03em; }
.ring-txt small { font-weight: 700; color: var(--ink-2); font-size: 14px; }
.score h2 { font: 700 clamp(1.4rem, 4vw, 1.9rem)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.score p { margin: 0; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0 0 18px; }
.stat { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: var(--card); }
.stat small { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.stat b { font: 700 21px var(--font-display); }
.stat.good { background: var(--mint-soft); }
.stat.bad { background: var(--coral-soft); }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 8px; }

.block { margin-top: 26px; }
.block h3 { font: 700 18px/1.25 var(--font-display); letter-spacing: -0.02em; margin: 0 0 12px; }
.board { list-style: none; margin: 0; padding: 0; border: var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.board li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--paper-2); font-size: 15px; }
.board li:last-child { border-bottom: 0; }
.board .r { font: 700 15px var(--font-display); text-align: center; }
.board li:nth-child(1) .r { color: #B8860B; }
.board .t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.board .s { font-weight: 800; }
.board li.is-me { background: var(--marker-2); }
.board-note { color: var(--ink-2); font-size: 14px; margin: 8px 0 0; }

.review { display: grid; gap: 12px; }
.rv { border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; background: var(--card); }
.rv-q { font-weight: 600; margin: 0 0 8px; white-space: pre-line; }
.rv-a { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; }
.rv-a span { padding: 4px 10px; border-radius: 9px; }
.rv-a .yours { background: var(--coral-soft); color: var(--coral-ink); }
.rv-a .right { background: var(--mint-soft); color: var(--mint-ink); font-weight: 700; }
.rv-a .none { background: var(--paper-2); color: var(--ink-2); }
.rv-why, .rq-why { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--sky); font-size: 14px; color: var(--ink-2); }
details.more > summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 8px; display: grid; place-items: center; font-weight: 800; }
details.more[open] > summary::before { content: "–"; }
details.more[open] > summary { margin-bottom: 14px; }

.overlay { position: fixed; inset: 0; background: rgba(29, 43, 79, .55); display: grid; place-items: center; padding: 18px; z-index: 40; }
.overlay .sheet { max-width: 460px; width: 100%; }
.overlay .sheet::before { display: none; }
.overlay h3 { font: 700 19px/1.25 var(--font-display); margin: 0 0 14px; }

.center { text-align: center; }
.muted { color: var(--ink-2); }
.spin { width: 38px; height: 38px; border: 3px solid var(--ink); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }

/* =====================================================================
   PHOTOS, CHECKING THE QUESTIONS, PARENTS
   ===================================================================== */
.eyebrow { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--sky-ink);
  background: var(--sky); border-radius: 999px; padding: 4px 12px; margin: 0 0 14px; }
.btn-camera { width: 100%; margin-top: 12px; background: var(--sky); }
.photo-off { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 0 0 14px; }
.thumb { position: relative; margin: 0; aspect-ratio: 3 / 4; border: var(--line); border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb figcaption { position: absolute; left: 6px; bottom: 6px; min-width: 24px; height: 24px; border-radius: 999px; background: var(--marker);
  border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.thumb-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--card); display: grid; place-items: center; cursor: pointer; padding: 0; }
.thumb-x svg { width: 14px; height: 14px; }
[data-step="photos"] > .btn { width: 100%; margin-bottom: 10px; }

.mode-kid > span { background: linear-gradient(135deg, #FFF4D1, #FFE4EC); }
.mode-kid input:checked + span { background: linear-gradient(135deg, var(--kid-1), var(--kid-4)); }

.review { margin: 0 0 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.review > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.review > summary::-webkit-details-marker { display: none; }
.review > summary::before { content: "+"; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; }
.review[open] > summary::before { content: "–"; }
.review-note { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: var(--marker-2); font-size: 14px; line-height: 1.45; }
.rq-list { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
.rq { background: var(--card); border: 1.5px solid var(--ink-3); border-radius: 12px; padding: 10px 12px; }
.rq.is-missing { border-color: var(--coral); }
.rq.is-removed { opacity: .5; }
.rq.is-removed .rq-q { text-decoration: line-through; }
.rq-head { display: flex; align-items: center; gap: 8px; }
.rq-n { min-width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.rq-badges { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.rq-badge { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.rq-badge.ai { background: var(--marker); color: var(--ink); }
.rq-badge.calc { background: var(--sky); color: var(--sky-ink); }
.rq-badge.ok { background: var(--mint-soft); color: var(--mint-ink); }
.rq-badge.need { background: var(--coral-soft); color: var(--coral-ink); }
.rq-badge.gen { background: var(--lilac); color: var(--ink); }
.rq-remove { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.rq-remove svg { width: 16px; height: 16px; }
.rq-q { margin: 8px 0; font-weight: 600; font-size: 15px; white-space: pre-line; }
.rq-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-opt { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ink-3); border-radius: 10px; background: var(--card);
  padding: 5px 10px; font-size: 14px; cursor: pointer; text-align: left; }
.rq-opt b { color: var(--ink-2); }
.rq-opt:hover:not(:disabled) { border-color: var(--ink); }
.rq-opt.is-answer { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-ink); font-weight: 700; }
.rq-opt.is-answer b { color: var(--mint-ink); }

.parents { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--kid-bg); border: var(--line); border-radius: 24px; padding: 34px; box-shadow: var(--shadow-lg); }
.parents .eyebrow { background: var(--kid-4); color: var(--ink); }
.ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.ticks b { color: var(--ink); }
.kid-demo { background: var(--card); border: var(--line); border-radius: 22px; padding: 20px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(1.5deg); }
.kd-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.kd-stars { display: inline-flex; gap: 2px; color: var(--star); }
.kd-stars svg { width: 22px; height: 22px; }
.kd-q { font: 700 22px/1.3 var(--font-display); margin: 16px 0; }
.kd-opts { display: grid; gap: 9px; }
.kd-o { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 16px; font-weight: 800; font-size: 19px; }
.kd-o i { font-style: normal; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--card); font-size: 15px; }
.kd-a { background: #FFF3CC; } .kd-c { background: #E3FBEF; }
.kd-b.is-right { background: var(--kid-3); box-shadow: 3px 3px 0 var(--ink); }
.kd-yay { margin: 14px 0 0; text-align: center; font: 600 30px/1 var(--font-hand); color: var(--mint-ink); }

/* =====================================================================
   THE CHILDREN'S QUIZ  (body.kid -- set when the quiz is for a child)
   ===================================================================== */
body.kid { background-color: var(--kid-bg); }
body.kid .sheet { border-radius: 26px; }
body.kid .start h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
body.kid .q-text { font: 700 clamp(22px, 4vw, 30px)/1.35 var(--font-display); letter-spacing: -0.01em; }
body.kid .q-badge { background: var(--kid-2); }
body.kid .opt { min-height: 66px; font-size: 21px; font-weight: 800; border-radius: 20px; border-width: 2.5px; }
body.kid .opt-l { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; border-width: 2.5px; }
body.kid .opt.kid-0 { background: #FFF3CC; } body.kid .opt.kid-1 { background: #E0F2FF; }
body.kid .opt.kid-2 { background: #E3FBEF; } body.kid .opt.kid-3 { background: #FFE6EC; }
body.kid .opt.kid-4 { background: #EFEAFF; } body.kid .opt.kid-5 { background: #FFEEDD; }
body.kid .opt.kid-0 .opt-l { background: var(--kid-1); } body.kid .opt.kid-1 .opt-l { background: var(--kid-2); }
body.kid .opt.kid-2 .opt-l { background: var(--kid-3); } body.kid .opt.kid-3 .opt-l { background: var(--kid-4); }
body.kid .opt.kid-4 .opt-l { background: var(--kid-5); } body.kid .opt.kid-5 .opt-l { background: var(--kid-6); }
body.kid .opt.is-right { background: var(--kid-3); border-color: var(--mint); color: var(--ink); animation: pop .35s ease-out; }
body.kid .opt.is-wrong { background: #FFF0F3; border-color: var(--kid-4); color: var(--ink-2); animation: shake .4s ease-in-out; }
body.kid .opt.is-wrong .opt-l { background: var(--kid-4); border-color: var(--ink); color: var(--ink); }
body.kid .feedback { font-size: 19px; border-radius: 18px; }
body.kid .feedback.try { background: #FFF6D6; color: var(--ink); border: 2px solid var(--kid-1); }
body.kid .progress i { background: linear-gradient(90deg, var(--kid-1), var(--kid-6)); }
.stars-chip { display: inline-flex; align-items: center; gap: 4px; font: 700 16px var(--font-display); padding: 5px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.stars-chip svg { width: 20px; height: 20px; color: var(--star); }
.stars-chip.bump { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.countdown { text-align: center; padding: 40px 0 20px; }
.countdown b { display: block; font: 700 120px/1 var(--font-display); color: var(--ink); animation: pop .6s ease-out; }
.countdown p { font: 600 34px/1.1 var(--font-hand); color: var(--sky-ink); margin: 10px 0 0; }

.kid-result { text-align: center; }
.big-stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.big-stars svg { width: 76px; height: 76px; color: #E8E1D2; filter: drop-shadow(2px 3px 0 rgba(29, 43, 79, .25)); }
.big-stars .on svg { color: var(--star); animation: starin .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.big-stars .on:nth-child(2) svg { animation-delay: .25s; } .big-stars .on:nth-child(3) svg { animation-delay: .5s; }
@keyframes starin { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.kid-result h2 { font: 700 clamp(2rem, 7vw, 3rem)/1.05 var(--font-display); margin: 0 0 6px; }
.kid-result p { font-size: 19px; color: var(--ink-2); margin: 0 0 20px; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---- phones ---- */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 14px; }
  .hand { display: none; }
  .notes { grid-template-columns: 1fr; gap: 26px; }
  .format { grid-template-columns: 1fr; }
  .parents { grid-template-columns: 1fr; padding: 24px 20px; gap: 28px; }
  .plans, .plans-2 { grid-template-columns: 1fr; gap: 26px; max-width: 460px; }
  .plan.is-pick { transform: none; }
  .promises { grid-template-columns: 1fr; }
  .wallet-box { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .sheet { padding: 20px 16px; border-radius: 18px; }
  .top nav a:not(.keep) { display: none; }
  .hero-bee { width: 104px; top: -58px; right: -8px; }
  .logo-bee { width: 34px; height: 34px; }
  .top nav { flex-wrap: nowrap; gap: 4px; }
  .top nav a { padding: 7px 8px; font-size: 14px; white-space: nowrap; }
  .logo { font-size: 21px; }
  .logo-mark { width: 30px; height: 30px; }
  .wallet-form .input { width: 100%; min-width: 0; }
  .modes { grid-template-columns: 1fr; }
  .share { grid-template-columns: 1fr; }
  .score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .page { padding: 18px 16px 18px 44px; background-image: linear-gradient(90deg, transparent 28px, rgba(229, 101, 79, .35) 28px, rgba(229, 101, 79, .35) 30px, transparent 30px); }
  .board li { grid-template-columns: 28px 1fr auto; }
  .board .t { display: none; }
  .opt { grid-template-columns: 34px 1fr 22px; padding: 11px 12px; }
}
/* =====================================================================
   WHO YOU ARE, ACCOUNTS, THE RESULTS PANEL
   ===================================================================== */
.account-link { border: 2px solid var(--ink); background: var(--card); }
.account-link.is-in { background: var(--sky); }
.eyebrow-btn { margin-left: 6px; border: 0; background: none; color: var(--sky-ink); font: inherit; font-weight: 800;
  text-decoration: underline; cursor: pointer; padding: 0; }
.modal-sheet { max-height: calc(100vh - 36px); overflow-y: auto; }
.modal-sheet h2 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.02em; margin: 0 0 6px; }
.modal-sheet .sub { margin: 0 0 16px; color: var(--ink-2); }
.roles { display: grid; gap: 10px; }
.role { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; text-align: left; cursor: pointer;
  border: var(--line); border-radius: 16px; background: var(--card); padding: 14px; font: inherit; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; }
.role:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); background: var(--marker-2); }
.role.is-on { background: var(--sky); }
.role-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--marker); border: 2px solid var(--ink); display: grid; place-items: center; }
.role-ic svg { width: 26px; height: 26px; }
.role b { display: block; font-size: 16.5px; }
.role small { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.auth .btn-big { width: 100%; margin-top: 4px; }
.auth .field { margin-bottom: 14px; }
.auth select.input { appearance: auto; }
.modes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-for { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--sky-ink); }
.results-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--mint-soft); color: var(--mint-ink); font-size: 14.5px; text-align: center; }
.results-note a { color: var(--mint-ink); font-weight: 800; }
.sent-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 14px; padding: 9px 12px;
  border-radius: 12px; background: var(--mint-soft); color: var(--mint-ink); font-weight: 700; font-size: 14.5px; }
.sent-note svg { width: 20px; height: 20px; }
.kid-name { max-width: 320px; margin: 0 auto 14px; display: block; text-align: center; font-size: 20px; font-weight: 700; }

.acct { padding: 10px 18px 40px; min-height: 60vh; }   /* (keeps .wrap's side gutter) */
.acct-gate { max-width: 460px; margin: 30px auto; }
.acct-gate h1 { font: 700 28px/1.2 var(--font-display); margin: 0 0 6px; }
.acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 0 22px; }
.acct-head h1 { font: 700 clamp(26px, 4vw, 36px)/1.15 var(--font-display); letter-spacing: -0.03em; margin: 0 0 4px; }
.acct-head p.muted { margin: 0; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-actions .btn svg { width: 18px; height: 18px; vertical-align: -3px; }
.acct-title { font: 700 20px var(--font-display); margin: 0 0 12px; }
.qcards { display: grid; gap: 14px; }
.qcard { background: var(--card); border: var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px; }
.qc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qc-top h3 { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.qc-meta { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; }
.qc-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.tag-ferdi { background: var(--lilac); color: var(--ink); }
.tag-aile { background: var(--peach); color: var(--ink); }
.tag-qrup { background: var(--sky); color: var(--sky-ink); }
.tag-wait { background: var(--coral-soft); color: var(--coral-ink); }
.qc-stats { margin: 10px 0 12px; font-size: 14.5px; }
.qc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-actions .btn svg { width: 17px; height: 17px; vertical-align: -3px; }
.qc-details { border-top: 2px dashed var(--ink-3); margin-top: 14px; padding-top: 14px; }
.qc-details h4 { font: 700 15px var(--font-display); margin: 16px 0 6px; }
.hardest ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hardest li { font-size: 14.5px; }
.hardest li span { display: block; }
.hardest li b { color: var(--coral-ink); font-size: 13px; }
.atts { display: grid; gap: 8px; }
.att { border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
.att > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; }
.att > summary::-webkit-details-marker { display: none; }
.att > summary b { font-size: 15.5px; }
.att > summary small { color: var(--ink-2); font-size: 13px; flex-basis: 100%; }
.att[open] > summary { border-bottom: 2px dashed var(--ink-3); }
.att .wrong-list { margin: 0; padding: 10px 12px 12px 30px; display: grid; gap: 12px; }
.att .all-right { margin: 0; padding: 10px 12px; color: var(--mint-ink); font-weight: 700; }
.att .muted.small { padding: 10px 12px; margin: 0; }
.pct { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.pct.good { background: var(--mint-soft); color: var(--mint-ink); }
.pct.mid { background: var(--marker-2); color: var(--ink); }
.pct.low { background: var(--coral-soft); color: var(--coral-ink); }
@media (max-width: 720px) {
  .modes-3 { grid-template-columns: 1fr; }
  .qc-top { flex-direction: column; }
  .qc-tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Polen: the price list, "30 more questions", devices ---- */
.price-table-wrap { overflow-x: auto; margin: 4px 0 18px; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: var(--line);
  border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { padding: 10px 6px; text-align: center; border-bottom: 1px solid var(--paper-2); }
.price-table thead th { background: var(--marker); font-size: 14px; }
.price-table tbody th { text-align: left; font-size: 14px; color: var(--ink-2); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table td b { font: 700 18px var(--font-display); }
.price-table td small { display: block; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.more-box { margin: 4px 0 18px; padding: 12px 14px; border: 2px dashed var(--ink-3); border-radius: 12px; }
.more-box .btn { width: 100%; }
.more-note { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.device-list { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 2px solid var(--paper-2); border-radius: 10px; background: var(--card); }
.device-list small { color: var(--ink-3); }
.devices { margin-top: 28px; }

/* ---- a question's picture (cut from its page by the AI) ---- */
.q-img { display: block; max-width: 100%; max-height: 320px; margin: 4px auto 14px; border: 2px solid var(--paper-2);
  border-radius: 10px; background: #fff; cursor: zoom-in; object-fit: contain; }
.q-img.is-big { max-height: none; cursor: zoom-out; }

/* ---- the recommended pack: in the middle, a little bigger (center stage) ---- */
.plan.is-rec { border-width: 3px; background: var(--marker-2); }
@media (min-width: 760px) { .plans .plan.is-rec { transform: scale(1.05); z-index: 1; } }