/* Quest Board — theme.css: the "Game lobby" look (royal blue, chunky ink outlines, hard offset shadows,
Lilita One for display, Nunito for text). Every shared component lives here; page files only add layout.
KIT (all classes start with qb-; JS helpers that write the markup are in common.js → window.QB)
Shell body.qb-body · .qb-wrap (centred column) · .qb-main · .qb-foot · .qb-brand (mini Lumi + name)
Type .qb-h1 .qb-h2 .qb-h3 · .qb-title (huge outlined title) · .qb-muted · .qb-small · .sr-only
Layout .qb-row (wrap + gap) · .qb-stack (column + gap) · .qb-grow · .qb-spread (space-between)
Header .qb-head · .qb-head__right · .qb-chip (+ .qb-chip__text .qb-name .qb-chip__sub .qb-lvrow .qb-lv .qb-xp>i[style=width:%])
.qb-av (avatar tile; --sm --lg; colour via style="--c:#hex") · .qb-pills > .qb-pill (b = big number; --light --sm)
colour words .qb-gold .qb-greent .qb-pinkt
Panels .qb-panel (white card; --ink dark · --yellow · --tight) · .qb-panel__head (title row) · .qb-strip (dark summary bar, > .qb-strip__item)
Buttons .qb-btn + --yellow --green --pink --white --ink --danger --ghost · sizes --sm (44px) --lg (60px) · --block · --icon (square)
:active presses down · :disabled · .is-busy (+ .qb-spin spinner) · .qb-link (quiet underlined text button)
Tabs .qb-tabs[role=tablist] > .qb-tab[role=tab][aria-selected=true] (+ .qb-tabcount) · use QB.tabs() for keyboard + panels
Forms .qb-form (column of fields) · .qb-form__error (boxed form-level error, role=alert)
.qb-field > .qb-label + .qb-input|.qb-textarea|.qb-select + .qb-help + .qb-error · .qb-input-wrap + .qb-peek (show/hide)
.qb-input--code (big XXX-XXX code box) · .qb-search (label wrapping icon + input) · .qb-fieldset (fieldset reset)
.qb-seg (segmented radios: label > input + span) · .qb-switch (label > input[role=switch] + .qb-switch__ui + text)
.qb-pickgrid > .qb-pick (label > input radio/checkbox + .qb-pick__face) · .qb-pickgrid--wide/.qb-pick--wide (+ .qb-pick__emoji)
Filters .qb-chips > .qb-fchip[aria-pressed=true] (+ .qb-fchip__n count; colour via style="--c:#hex"; .qb-fchip--mystery)
Quests .qb-cards (responsive grid) > .qb-card (+ --muted --done --new; accent via style="--c:#hex")
.qb-card__top .qb-card__emoji .qb-card__head .qb-card__title .qb-card__from .qb-card__details(.is-open) .qb-card__more
.qb-card__meta .qb-card__reward .qb-card__note (+ --kid) .qb-card__actions
.qb-ribbon (reward tag, style="--c:#hex"; --mystery --lg; .qb-ribbon__emoji .qb-ribbon__text .qb-ribbon__secret)
.qb-stars (+ .qb-star .qb-star--off) · .qb-xppill · .qb-race · .qb-count (--calm --soon --hurry(pulses) --over)
.qb-stamp (inline, rotated; --corner absolute; --taken --done) · .qb-status (--open --active --waiting --done --expired --taken)
Badges .qb-badges > .qb-badge (--locked) > .qb-badge__emoji .qb-badge__label .qb-badge__how
Lumi .qb-lumi (svg from QB.lumi, bobs; --still) · .qb-bubble (speech bubble, tail down; --left --right --sm) · .qb-buddy (Lumi + bubble row) · .qb-pad
Dialogs dialog.qb-dialog (--wide --party) > form > .qb-dialog__head(.qb-dialog__title .qb-dialog__x) · .qb-dialog__body · .qb-dialog__foot (sticky)
.qb-reveal (big pop-in emoji for the celebration) — full markup example at the top of common.js
Feedback .qb-toasts > .qb-toast (--good --bad) · .qb-empty (+ .qb-empty__title) · .qb-shake · .qb-loading · .qb-fatal · .qb-confetti
.qb-authbar (+ __body; the "You got logged out" bar QB.api puts in an open dialog)
Codes .qb-code (huge family code display) · Steps .qb-steps > .qb-step (+ .qb-step__n .qb-step__emoji .qb-step__t)
Landing .qb-hero(__head __buddy __art) .qb-kicker .qb-tagline .qb-sticker .qb-float .qb-plate .qb-roles .qb-role(--kid --parent)
.qb-auths .qb-auth(__head) (index.html only; .qb-sticker / .qb-plate also work elsewhere)
Phone layout at max-width 700px. prefers-reduced-motion switches off bobbing, pulses, pops, confetti and transitions.
Focus: :focus-visible rings are white on the blue page and ink inside white surfaces (via --qb-focus). */
/* ---------- tokens ---------- */
:root{
--qb-blue:#2563EB; --qb-blue-deep:#1D4FC4; --qb-blue-soft:#E6ECFF;
--qb-ink:#14163A; --qb-ink-2:#23265A; --qb-ink-soft:#3B3F6B;
--qb-yellow:#FFC93C; --qb-yellow-hi:#FFD25E; --qb-cream:#FFF6D6;
--qb-green:#3DD68C; --qb-green-hi:#5FE0A2;
--qb-pink:#FF6FA3; --qb-pink-hi:#FF8DB7;
--qb-orange:#FF8A3D; --qb-lilac:#B79CFF;
--qb-red:#FF5C5C; --qb-red-hi:#FF7676; --qb-red-ink:#C0163C;
--qb-paper:#FFFFFF; --qb-mist:#F3F6FF; --qb-line:#E3E8F5; --qb-grey:#D5D9E8; --qb-grey-ink:#9AA0B8;
--qb-font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--qb-display:'Lilita One','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
--qb-r-sm:12px; --qb-r:18px; --qb-r-lg:24px;
--qb-shadow:0 6px 0 var(--qb-ink); --qb-shadow-sm:0 3px 0 var(--qb-ink);
--qb-focus:#FFFFFF;
}
/* ---------- reset + shell ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;background:var(--qb-blue)}
[hidden]{display:none !important}
body{margin:0}
.qb-body{min-height:100vh;min-height:100dvh;background-color:var(--qb-blue);
background-image:radial-gradient(rgba(255,255,255,.09) 2px,transparent 2.6px);background-size:30px 30px;
color:#FFFFFF;font-family:var(--qb-font);font-size:16px;line-height:1.45;font-weight:700;overflow-x:clip;
-webkit-font-smoothing:antialiased}
.qb-body.qb-modal-open{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img,svg{max-width:100%}
p{margin:0}
.qb-wrap{max-width:1180px;margin:0 auto;padding:20px 28px 40px;display:flex;flex-direction:column;gap:22px}
.qb-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.qb-foot{text-align:center;font-size:14px;font-weight:800;color:#FFFFFF;padding:8px 0 0}
.qb-foot a{color:#FFFFFF;text-underline-offset:3px}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* focus: white on the blue page, ink inside white things */
:focus-visible{outline:3px solid var(--qb-focus);outline-offset:3px}
.qb-panel,.qb-card,.qb-dialog,.qb-chip,.qb-empty,.qb-step,.qb-toast,.qb-fatal__box{--qb-focus:var(--qb-ink)}
.qb-panel--ink,.qb-strip,.qb-tab{--qb-focus:#FFFFFF}
/* ---------- type ---------- */
.qb-h1,.qb-h2,.qb-h3,.qb-title{font-family:var(--qb-display);font-weight:400;letter-spacing:.01em;margin:0;line-height:1.1}
.qb-h1{font-size:40px}
.qb-h2{font-size:28px}
.qb-h3{font-size:21px}
.qb-title{font-size:clamp(52px,9vw,96px);line-height:.95;color:#FFFFFF;letter-spacing:.02em;
text-shadow:3px 0 0 var(--qb-ink),-3px 0 0 var(--qb-ink),0 3px 0 var(--qb-ink),0 -3px 0 var(--qb-ink),
2px 2px 0 var(--qb-ink),-2px -2px 0 var(--qb-ink),2px -2px 0 var(--qb-ink),-2px 2px 0 var(--qb-ink),0 9px 0 var(--qb-ink)}
.qb-title .qb-gold{color:var(--qb-yellow)}
.qb-muted{color:var(--qb-ink-soft)}
.qb-small{font-size:14px}
.qb-gold{color:var(--qb-yellow)}
.qb-greent{color:var(--qb-green)}
.qb-pinkt{color:var(--qb-pink)}
/* ---------- layout helpers ---------- */
.qb-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.qb-stack{display:flex;flex-direction:column;gap:12px}
.qb-grow{flex:1 1 auto;min-width:0}
.qb-spread{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
/* ---------- brand ---------- */
.qb-brand{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;text-decoration:none;font-family:var(--qb-display);font-size:24px;line-height:1;
text-shadow:0 3px 0 var(--qb-ink);min-height:44px}
.qb-brand .qb-lumi{animation:none;filter:drop-shadow(0 3px 0 var(--qb-ink))}
/* ---------- header + player chip + pills ---------- */
.qb-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.qb-head__right{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.qb-chip{display:flex;align-items:center;gap:12px;background:var(--qb-paper);color:var(--qb-ink);border:3px solid var(--qb-ink);border-radius:var(--qb-r);
box-shadow:0 4px 0 var(--qb-ink);padding:6px 16px 6px 6px;min-height:58px;min-width:0;max-width:100%}
.qb-chip__text{display:flex;flex-direction:column;gap:5px;min-width:0}
.qb-name{font-family:var(--qb-display);font-weight:400;font-size:19px;line-height:1.05;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qb-chip__sub{font-size:13px;font-weight:800;color:var(--qb-ink-soft);line-height:1.1}
.qb-lvrow{display:flex;align-items:center;gap:8px}
.qb-lv{background:var(--qb-ink);color:var(--qb-yellow);border-radius:6px;padding:0 7px;font-family:var(--qb-display);font-weight:400;font-size:12px;line-height:18px;white-space:nowrap}
.qb-xp{width:110px;height:12px;border-radius:6px;background:var(--qb-line);border:2px solid var(--qb-ink);overflow:hidden;display:block;flex:none}
.qb-xp i{display:block;height:100%;background:var(--qb-green);border-radius:0 4px 4px 0;transition:width .6s ease}
.qb-av{--c:var(--qb-orange);width:46px;height:46px;border-radius:12px;background:var(--c);border:3px solid var(--qb-ink);display:inline-flex;align-items:center;justify-content:center;
font-size:24px;line-height:1;flex:none;color:var(--qb-ink);font-family:var(--qb-font)}
.qb-av--sm{width:34px;height:34px;border-radius:10px;font-size:18px;border-width:2.5px}
.qb-av--lg{width:72px;height:72px;border-radius:18px;font-size:40px;box-shadow:0 4px 0 var(--qb-ink)}
.qb-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.qb-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;border-radius:999px;background:var(--qb-ink);color:#FFFFFF;
font-size:14px;font-weight:800;white-space:nowrap}
.qb-pill b{font-family:var(--qb-display);font-weight:400;font-size:19px;line-height:1}
.qb-pill--light{background:var(--qb-paper);color:var(--qb-ink);border:3px solid var(--qb-ink)}
.qb-pill--sm{min-height:32px;padding:0 12px 0 8px;font-size:13px}
.qb-pill--sm b{font-size:16px}
/* ---------- panels ---------- */
.qb-panel{background:var(--qb-paper);color:var(--qb-ink);border:3px solid var(--qb-ink);border-radius:var(--qb-r-lg);box-shadow:var(--qb-shadow);padding:20px;min-width:0}
.qb-panel--tight{padding:14px}
.qb-panel--ink{background:var(--qb-ink);color:#FFFFFF;border-color:var(--qb-ink)}
.qb-panel--yellow{background:var(--qb-yellow)}
.qb-panel--ink .qb-muted,.qb-panel--ink .qb-help{color:#C9CDF0}
.qb-panel--ink .qb-label{color:#FFFFFF}
.qb-panel__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.qb-panel__head > .qb-h2,.qb-panel__head > .qb-h3{margin-right:auto}
.qb-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--qb-ink);color:#FFFFFF;border-radius:var(--qb-r);padding:10px 16px;font-weight:800;font-size:15px}
.qb-strip__item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.qb-strip__item b{font-family:var(--qb-display);font-weight:400;font-size:19px;color:var(--qb-yellow)}
/* ---------- buttons ---------- */
.qb-btn{--bg:var(--qb-paper);--bg-hi:var(--qb-cream);--fg:var(--qb-ink);--sh:var(--qb-ink);
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 20px;
border:3px solid var(--qb-ink);border-radius:16px;background:var(--bg);color:var(--fg);box-shadow:0 4px 0 var(--sh);
font-family:var(--qb-font);font-weight:900;font-size:16px;line-height:1.15;text-align:center;text-decoration:none;
cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .1s,box-shadow .1s,background-color .15s}
.qb-btn:hover{background:var(--bg-hi)}
.qb-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--sh)}
.qb-btn:disabled,.qb-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--sh);background:var(--bg)}
.qb-btn .qb-ic{flex:none}
.qb-btn--yellow{--bg:var(--qb-yellow);--bg-hi:var(--qb-yellow-hi)}
.qb-btn--green{--bg:var(--qb-green);--bg-hi:var(--qb-green-hi)}
.qb-btn--pink{--bg:var(--qb-pink);--bg-hi:var(--qb-pink-hi)}
.qb-btn--white{--bg:var(--qb-paper);--bg-hi:var(--qb-cream)}
.qb-btn--ink{--bg:var(--qb-ink);--bg-hi:var(--qb-ink-2);--fg:#FFFFFF;--sh:#05061A}
.qb-btn--danger{--bg:var(--qb-red);--bg-hi:var(--qb-red-hi)}
.qb-btn--ghost{--bg:transparent;--bg-hi:rgba(20,22,58,.12);--fg:inherit;border-color:transparent;box-shadow:none}
.qb-btn--ghost:active{transform:translateY(1px);box-shadow:none}
.qb-btn--ghost:disabled{box-shadow:none}
.qb-btn--sm{min-height:44px;padding:4px 14px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--sh)}
.qb-btn--sm:active{transform:translateY(3px)}
.qb-btn--sm:disabled{box-shadow:0 3px 0 var(--sh)}
.qb-btn--lg{min-height:60px;padding:8px 26px;font-family:var(--qb-display);font-weight:400;font-size:23px;letter-spacing:.02em;border-radius:20px;box-shadow:0 6px 0 var(--sh)}
.qb-btn--lg:active{transform:translateY(6px)}
.qb-btn--lg:disabled{box-shadow:0 6px 0 var(--sh)}
.qb-btn--block{display:flex;width:100%}
.qb-btn--icon{padding:0;width:48px;min-width:48px}
.qb-btn--icon.qb-btn--sm{width:44px;min-width:44px}
.qb-btn.is-busy,.qb-btn.is-busy:disabled{cursor:progress;opacity:.85}
.qb-btn:disabled:active,.qb-btn[aria-disabled="true"]:active{transform:none}
.qb-spin{width:18px;height:18px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;display:inline-block;animation:qb-spin .7s linear infinite;flex:none}
.qb-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;background:none;border:0;border-radius:10px;color:var(--qb-ink-soft);
font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;cursor:pointer}
.qb-link:hover{color:var(--qb-ink);background:rgba(20,22,58,.06)}
/* ---------- tabs ---------- */
.qb-tabs{display:flex;gap:6px;padding:6px;background:var(--qb-ink);border-radius:var(--qb-r);overflow-x:auto;scrollbar-width:none;max-width:100%}
.qb-tabs::-webkit-scrollbar{display:none}
.qb-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:0;border-radius:13px;background:transparent;
color:#FFFFFF;font-weight:900;font-size:16px;white-space:nowrap;transition:background-color .15s}
.qb-tab:hover{background:rgba(255,255,255,.12)}
.qb-tab[aria-selected="true"]{background:var(--qb-yellow);color:var(--qb-ink);box-shadow:inset 0 -4px 0 rgba(20,22,58,.18)}
.qb-tab[aria-selected="true"]:focus-visible{outline-offset:-6px;outline-color:var(--qb-ink)}
.qb-tabcount{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 7px;border-radius:999px;background:#FFFFFF;color:var(--qb-ink);
font-family:var(--qb-display);font-weight:400;font-size:15px;line-height:1}
.qb-tab[aria-selected="true"] .qb-tabcount{background:var(--qb-ink);color:var(--qb-yellow)}
/* ---------- form fields ---------- */
.qb-fieldset{border:0;margin:0;padding:0;min-width:0}
.qb-field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;margin:0;padding:0}
.qb-label{font-weight:900;font-size:16px;color:var(--qb-ink);padding:0}
.qb-label small{font-weight:700;color:var(--qb-ink-soft);font-size:14px}
.qb-input,.qb-textarea,.qb-select{width:100%;min-height:50px;padding:10px 14px;border:3px solid var(--qb-ink);border-radius:14px;background:var(--qb-paper);color:var(--qb-ink);
font-family:var(--qb-font);font-weight:800;font-size:17px;line-height:1.3;box-shadow:inset 0 3px 0 rgba(20,22,58,.08);appearance:none;-webkit-appearance:none}
.qb-textarea{min-height:96px;resize:vertical}
.qb-input[type="datetime-local"],.qb-input[type="date"],.qb-input[type="time"]{min-width:0;cursor:pointer}
.qb-input::-webkit-date-and-time-value{text-align:left}
.qb-input::-webkit-calendar-picker-indicator{cursor:pointer;padding:4px}
.qb-input::placeholder,.qb-textarea::placeholder{color:#6B6F96;opacity:1;font-weight:700}
.qb-input:focus,.qb-textarea:focus,.qb-select:focus{outline:3px solid var(--qb-blue);outline-offset:2px;border-color:var(--qb-ink)}
.qb-input[aria-invalid="true"],.qb-textarea[aria-invalid="true"],.qb-select[aria-invalid="true"]{border-color:var(--qb-red-ink);background:#FFF4F6}
.qb-select{padding-right:44px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314163A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:20px}
.qb-help{font-size:14px;font-weight:700;color:var(--qb-ink-soft);line-height:1.35}
.qb-error{display:flex;align-items:flex-start;gap:8px;font-size:15px;font-weight:900;color:var(--qb-red-ink);line-height:1.35}
.qb-error::before{content:'!';content:'!' / '';flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;border-radius:50%;
background:var(--qb-red-ink);color:#FFFFFF;font-size:13px;font-weight:900}
.qb-error:empty{display:none}
.qb-input-wrap{position:relative;display:block}
.qb-input-wrap > .qb-input{padding-right:58px}
/* show/hide eye: sits just inside the input's 3px border, so a 50px input gives a 44px-tall tap target */
.qb-peek{position:absolute;right:3px;top:3px;bottom:3px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:11px;
background:transparent;color:var(--qb-ink)}
.qb-peek:hover{background:var(--qb-mist)}
.qb-peek[aria-pressed="true"]{background:var(--qb-yellow)}
.qb-input--code{font-family:var(--qb-display);font-weight:400;font-size:32px;letter-spacing:.14em;text-align:center;text-transform:uppercase;min-height:64px;max-width:300px}
.qb-input--code::placeholder{letter-spacing:.14em;color:#8A8EB3;font-weight:400}
.qb-search{position:relative;display:block;min-width:0}
.qb-search .qb-ic{position:absolute;left:14px;top:50%;margin-top:-10px;color:var(--qb-ink);pointer-events:none}
.qb-search .qb-input{padding-left:44px;min-height:48px}
.qb-search .qb-input::-webkit-search-cancel-button{cursor:pointer}
/* segmented control: …
*/
.qb-seg{display:flex;flex-wrap:wrap;border:3px solid var(--qb-ink);border-radius:16px;background:var(--qb-paper);box-shadow:var(--qb-shadow-sm);overflow:hidden;margin:0;padding:0;min-width:0}
.qb-seg > label{position:relative;flex:1 1 0;min-width:72px;display:flex}
.qb-seg > label + label{border-left:3px solid var(--qb-ink)}
.qb-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qb-seg > label > span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;padding:6px 8px;font-weight:900;font-size:15px;line-height:1.15;
text-align:center;color:var(--qb-ink);transition:background-color .12s}
.qb-seg small{font-size:12px;font-weight:800;color:var(--qb-ink-soft)}
.qb-seg > label:hover > span{background:var(--qb-mist)}
.qb-seg input:checked + span{background:var(--qb-yellow)}
.qb-seg input:checked + span small{color:var(--qb-ink)}
.qb-seg input:focus-visible + span{outline:3px solid var(--qb-blue);outline-offset:-6px;border-radius:12px}
.qb-seg input:disabled + span{opacity:.5;cursor:not-allowed}
/* toggle switch: */
.qb-switch{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:900;color:var(--qb-ink)}
.qb-switch input{position:absolute;left:0;top:50%;width:58px;height:34px;margin:-17px 0 0;opacity:0;cursor:pointer}
.qb-switch__ui{position:relative;flex:none;width:58px;height:34px;border-radius:999px;background:var(--qb-line);border:3px solid var(--qb-ink);transition:background-color .15s}
.qb-switch__ui::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;border:3px solid var(--qb-ink);transition:transform .15s}
.qb-switch input:checked + .qb-switch__ui{background:var(--qb-green)}
.qb-switch input:checked + .qb-switch__ui::after{transform:translateX(24px)}
.qb-switch input:focus-visible + .qb-switch__ui{outline:3px solid var(--qb-blue);outline-offset:3px}
.qb-switch input:disabled ~ *{opacity:.5}
/* pick grid (avatars, quest emoji, kid toggles): …
*/
.qb-pickgrid{--qb-pick-min:56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--qb-pick-min),1fr));gap:10px;margin:0;padding:4px 2px 6px;border:0;min-width:0}
.qb-pickgrid--wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.qb-pick{position:relative;display:block;cursor:pointer;min-width:0}
.qb-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qb-pick__face{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:52px;border:3px solid var(--qb-ink);border-radius:14px;background:var(--qb-mist);
box-shadow:var(--qb-shadow-sm);font-size:30px;line-height:1;color:var(--qb-ink);transition:transform .12s,background-color .12s,box-shadow .12s}
.qb-pick:hover .qb-pick__face{background:var(--qb-blue-soft)}
.qb-pick input:checked + .qb-pick__face{background:var(--qb-yellow);transform:translateY(-2px) rotate(-4deg);box-shadow:0 5px 0 var(--qb-ink)}
.qb-pick input:checked + .qb-pick__face::after{content:'✓';content:'✓' / '';position:absolute;top:-8px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--qb-green);border:2.5px solid var(--qb-ink);
display:flex;align-items:center;justify-content:center;font:900 14px/1 var(--qb-font);color:var(--qb-ink);transform:rotate(4deg)}
.qb-pick input:focus-visible + .qb-pick__face{outline:3px solid var(--qb-blue);outline-offset:3px}
.qb-pick input:disabled + .qb-pick__face{opacity:.45;cursor:not-allowed}
.qb-pick--wide .qb-pick__face,.qb-pickgrid--wide .qb-pick__face{position:relative;aspect-ratio:auto;justify-content:flex-start;gap:10px;min-height:56px;padding:6px 14px 6px 8px;
font-size:16px;font-weight:900;text-align:left;overflow-wrap:anywhere}
.qb-pick__emoji{flex:none;width:38px;height:38px;border-radius:10px;border:2.5px solid var(--qb-ink);background:var(--c,var(--qb-orange));display:inline-flex;align-items:center;justify-content:center;font-size:22px}
.qb-pickgrid--wide .qb-pick input:checked + .qb-pick__face{transform:translateY(-2px)}
/* ---------- filter chips ---------- */
.qb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.qb-fchip{--c:var(--qb-yellow);display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px 0 12px;border:3px solid var(--qb-ink);border-radius:999px;
background:var(--qb-paper);color:var(--qb-ink);box-shadow:var(--qb-shadow-sm);font-weight:900;font-size:15px;white-space:nowrap;
transition:transform .1s,box-shadow .1s,background-color .12s}
.qb-fchip:hover{background:var(--qb-cream)}
.qb-fchip:active{transform:translateY(3px);box-shadow:0 0 0 var(--qb-ink)}
.qb-fchip[aria-pressed="true"]{background:var(--c);transform:translateY(-1px);box-shadow:0 4px 0 var(--qb-ink)}
.qb-fchip[aria-pressed="true"]::before{content:'✓';content:'✓' / '';font-weight:900}
.qb-fchip--mystery[aria-pressed="true"]{background:var(--qb-ink);color:var(--qb-yellow)}
.qb-fchip__n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--qb-ink);color:#FFFFFF;
font-family:var(--qb-display);font-weight:400;font-size:14px;line-height:1}
.qb-fchip--mystery[aria-pressed="true"] .qb-fchip__n{background:var(--qb-yellow);color:var(--qb-ink)}
.qb-fchip:disabled{opacity:.5;cursor:not-allowed}
/* ---------- quest cards ---------- */
.qb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px;margin:0;padding:0;list-style:none}
.qb-card{--c:var(--qb-yellow);position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--qb-paper);color:var(--qb-ink);
border:3px solid var(--qb-ink);border-radius:22px;box-shadow:var(--qb-shadow);padding:16px}
.qb-card__top{display:flex;align-items:flex-start;gap:12px;min-width:0}
.qb-card__emoji{flex:none;width:58px;height:58px;border-radius:16px;background:var(--c);border:3px solid var(--qb-ink);box-shadow:var(--qb-shadow-sm);
display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1;transform:rotate(-4deg)}
.qb-card__head{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qb-card__title{margin:0;font-family:var(--qb-display);font-weight:400;font-size:22px;line-height:1.12;overflow-wrap:anywhere}
.qb-card__from{font-size:14px;font-weight:800;color:var(--qb-ink-soft)}
.qb-card__details{margin:0;font-size:15px;font-weight:700;line-height:1.45;color:var(--qb-ink);overflow-wrap:anywhere;white-space:pre-line;
display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.qb-card__details.is-open{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.qb-card__more{align-self:flex-start;margin:-8px 0 -6px -8px}
.qb-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qb-card__reward{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.qb-card__note{background:var(--qb-cream);border:2.5px dashed var(--qb-ink);border-radius:14px;padding:8px 12px;font-size:15px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.qb-card__note b{font-weight:900}
.qb-card__note--kid{background:#F1ECFF}
.qb-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:2px}
.qb-card--muted{background:#ECEFF7;box-shadow:0 6px 0 rgba(20,22,58,.55)}
.qb-card--muted .qb-card__emoji,.qb-card--muted .qb-ribbon{filter:grayscale(1)}
.qb-card--muted .qb-card__emoji{background:var(--qb-grey)}
.qb-card--done{background:linear-gradient(160deg,#FFFBEA 0%,var(--qb-cream) 100%)}
.qb-card--done .qb-card__emoji{background:var(--qb-yellow)}
.qb-card--new{animation:qb-pop .35s ease-out}
/* reward ribbon = a gift tag coloured by reward type (style="--c:#hex") */
.qb-ribbon{--c:var(--qb-yellow);position:relative;display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:38px;padding:5px 16px 5px 30px;
background:var(--c);color:var(--qb-ink);border:3px solid var(--qb-ink);border-radius:999px 12px 12px 999px;box-shadow:var(--qb-shadow-sm);
font-weight:900;font-size:15px;line-height:1.2}
.qb-ribbon::before{content:'';position:absolute;left:10px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#FFFFFF;border:2.5px solid var(--qb-ink)}
.qb-ribbon__emoji{flex:none;font-size:18px;line-height:1}
.qb-ribbon__text{min-width:0;overflow-wrap:anywhere}
.qb-ribbon__secret{flex:none;display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;background:var(--qb-ink);color:var(--qb-yellow);font-size:12px;font-weight:900;white-space:nowrap}
.qb-ribbon--mystery{background-color:var(--qb-ink);color:var(--qb-yellow);
background-image:radial-gradient(circle,rgba(255,201,60,.5) 1.2px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.6px);
background-size:16px 16px,23px 23px;background-position:0 0,7px 9px}
.qb-ribbon--mystery::before{background:var(--qb-blue);border-color:var(--qb-yellow)}
.qb-ribbon--lg{min-height:56px;padding:8px 22px 8px 38px;font-family:var(--qb-display);font-weight:400;font-size:22px;letter-spacing:.01em;box-shadow:var(--qb-shadow)}
.qb-ribbon--lg::before{left:13px;width:14px;height:14px;margin-top:-7px}
.qb-ribbon--lg .qb-ribbon__emoji{font-size:28px}
/* difficulty stars, XP, race, countdown */
.qb-stars{display:inline-flex;align-items:center;gap:1px;line-height:0}
.qb-star{display:block}
.qb-star path{fill:var(--qb-yellow);stroke:var(--qb-ink);stroke-width:2.2;stroke-linejoin:round}
.qb-star--off path{fill:var(--qb-line);stroke:var(--qb-grey-ink)}
.qb-xppill{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border-radius:999px;background:var(--qb-ink);color:var(--qb-yellow);
font-family:var(--qb-display);font-weight:400;font-size:15px;line-height:1;white-space:nowrap}
.qb-race{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 10px;border-radius:999px;background:var(--qb-pink);color:var(--qb-ink);border:2.5px solid var(--qb-ink);
font-size:13px;font-weight:900;line-height:1.2}
.qb-count{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 8px;border-radius:999px;border:2.5px solid var(--qb-ink);background:var(--qb-green);color:var(--qb-ink);
font-size:14px;font-weight:900;line-height:1;white-space:nowrap}
.qb-count .qb-ic{flex:none}
.qb-count--calm{background:var(--qb-green)}
.qb-count--soon{background:var(--qb-yellow)}
.qb-count--hurry{background:var(--qb-red);animation:qb-pulse 1.6s ease-in-out infinite}
.qb-count--over{background:var(--qb-grey);color:var(--qb-ink-soft);border-color:var(--qb-ink-soft)}
/* stamps: inline + rotated; add --corner to pin to a card's top-right */
.qb-stamp{display:inline-block;align-self:flex-start;transform:rotate(-8deg);border:4px solid var(--qb-red-ink);color:var(--qb-red-ink);border-radius:10px;padding:3px 12px 1px;
background:rgba(255,255,255,.88);font-family:var(--qb-display);font-weight:400;font-size:22px;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;white-space:nowrap}
.qb-stamp--corner{position:absolute;top:-12px;right:12px;transform:rotate(8deg);z-index:1;pointer-events:none}
.qb-stamp--taken{border-color:#5B2DC2;color:#5B2DC2}
.qb-stamp--done{border-color:#0B7A47;color:#0B7A47}
/* per-kid status pills (parent page dots, kid page labels) */
.qb-status{--dot:var(--qb-blue);display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 10px 2px 6px;border-radius:999px;background:var(--qb-mist);color:var(--qb-ink);
border:2px solid var(--qb-ink);font-size:13px;font-weight:900;line-height:1.2;max-width:100%}
.qb-status i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--dot);border:2px solid var(--qb-ink)}
.qb-status--open{--dot:#FFFFFF}
.qb-status--active{--dot:var(--qb-yellow)}
.qb-status--waiting{--dot:var(--qb-lilac);background:#F1ECFF}
.qb-status--done{--dot:var(--qb-green);background:#E3FAEE}
.qb-status--expired{--dot:var(--qb-grey-ink);background:#ECEFF7;color:var(--qb-ink-soft)}
.qb-status--taken{--dot:var(--qb-pink);background:#FFE8F1}
/* ---------- badges ---------- */
.qb-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,128px),1fr));gap:14px;margin:0;padding:0;list-style:none}
.qb-badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:12px 8px;border-radius:18px;background:var(--qb-mist);border:3px solid var(--qb-ink);color:var(--qb-ink)}
.qb-badge__emoji{width:64px;height:64px;border-radius:50%;background:var(--qb-yellow);border:3px solid var(--qb-ink);box-shadow:var(--qb-shadow-sm);display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.qb-badge__label{font-family:var(--qb-display);font-weight:400;font-size:17px;line-height:1.1}
.qb-badge__how{font-size:13px;font-weight:700;line-height:1.3;color:var(--qb-ink-soft)}
.qb-badge--locked{background:#ECEFF7;border-style:dashed}
.qb-badge--locked .qb-badge__emoji{background:var(--qb-line);box-shadow:none;filter:grayscale(1);opacity:.6}
.qb-badge--locked .qb-badge__label{color:var(--qb-ink-soft)}
/* ---------- Lumi + speech bubble ---------- */
.qb-lumi{display:block;flex:none;height:auto;animation:qb-bob 3.4s ease-in-out infinite;transform-origin:50% 100%}
.qb-lumi--still{animation:none}
.qb-buddy{display:flex;align-items:center;gap:6px 14px;min-width:0}
.qb-bubble{position:relative;max-width:360px;background:var(--qb-paper);color:var(--qb-ink);border:3px solid var(--qb-ink);border-radius:22px;padding:12px 20px;
font-family:var(--qb-display);font-weight:400;font-size:21px;line-height:1.22;overflow-wrap:anywhere;box-shadow:0 4px 0 var(--qb-ink)}
.qb-bubble::after{content:'';position:absolute;left:50%;bottom:-13px;width:20px;height:20px;background:var(--qb-paper);border-right:3px solid var(--qb-ink);border-bottom:3px solid var(--qb-ink);
transform:translateX(-50%) rotate(45deg)}
.qb-bubble--left::after{left:-13px;top:50%;bottom:auto;margin-top:-10px;transform:rotate(135deg)}
.qb-bubble--right::after{left:auto;right:-13px;top:50%;bottom:auto;margin-top:-10px;transform:rotate(-45deg)}
.qb-bubble--sm{font-size:17px;padding:10px 16px;border-radius:18px}
.qb-pad{width:240px;max-width:90%;height:36px;margin-top:-24px;border-radius:50%;background:var(--qb-blue-deep);border:3px solid var(--qb-ink)}
/* ---------- dialogs (native