/* ============================================================
   Open House 2026 — game layer of the passport (assets/js/quest.js)
   Uses the passport's own tokens (--green, --gold, --muted, --card ...).
   ============================================================ */

/* ---------- rank emblem ---------- */
.q-emb{--rc:#5FA84B;flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),var(--rc);
  color:#fff;font-size:1.55rem;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rc),0 6px 14px -4px var(--rc)}
.q-emb img{width:118%;height:118%;object-fit:contain}
.q-emb.sm{width:34px;height:34px;font-size:1rem;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--rc)}

/* ---------- rank card on the passport tab ---------- */
#qRank{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.q-rank{display:flex;align-items:center;gap:14px}
.q-rank-t{min-width:0}
.q-rank-t small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--muted);line-height:1.2}
.q-rank-t b{display:block;font-size:1.18rem;font-weight:700;line-height:1.3}
.q-rank-t em{display:block;font-style:normal;font-size:.74rem;color:var(--muted);line-height:1.2}
.q-ladder{display:flex;align-items:center;margin:12px 2px 6px}
.q-step{--rc:#98A79E;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;
  background:#EEF1EE;color:#B5C0B8;transition:transform .3s}
.q-step.past{background:var(--rc);color:#fff;opacity:.55}
.q-step.now{background:var(--rc);color:#fff;transform:scale(1.22);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--rc)}
.q-join{flex:1;height:3px;border-radius:3px;background:#E3EAE4;margin:0 3px}
.q-next{font-size:.8rem;color:var(--muted)}
.q-next b{color:var(--ink)}

/* the header portrait wears the rank's colour */
.hud .who img[data-rank]{box-shadow:0 0 0 2.5px var(--rank-c,var(--green));transition:box-shadow .4s}

/* ---------- share button ---------- */
.q-sharebtn{--rc:var(--gold);display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:left;font:inherit;cursor:pointer;
  background:linear-gradient(120deg,#FFF4D6,#FFE7A6);color:#3B2A05}
.q-sharebtn .q-sb-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:#fff;color:var(--gold-d);box-shadow:0 3px 8px -3px rgba(169,118,27,.6)}
.q-sharebtn b{display:block;font-size:.95rem;font-weight:700;line-height:1.3}
.q-sharebtn small{display:block;font-size:.74rem;opacity:.75}
.q-sharebtn .q-sb-go{margin-left:auto;font-size:1.2rem;color:var(--gold-d)}
.q-sharebtn.busy{opacity:.6;pointer-events:none}
.q-share .box{max-width:360px}
.q-share-tip{font-size:.74rem;color:var(--muted)}

/* ---------- ribbons in the celebration modal ---------- */
.q-ribbons{display:grid;gap:8px;margin:10px 0 4px}
.q-lvl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;text-align:left;
  background:linear-gradient(120deg,#FFF6DC,#FFE9A8);animation:qRibbon .5s cubic-bezier(.34,1.5,.5,1) .25s backwards}
.q-lvl-k{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--gold-d);padding:3px 8px;border-radius:99px}
.q-lvl-t b{display:block;font-size:.95rem;line-height:1.25}
.q-lvl-t small{display:block;font-size:.7rem;color:var(--muted)}
.q-sec{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;text-align:left;font-size:.84rem;
  background:#FCE7F0;color:#8E2458;animation:qRibbon .5s cubic-bezier(.34,1.5,.5,1) .45s backwards}
.q-sec i{font-size:1.1rem;color:#C0387A}
@keyframes qRibbon{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}

/* ---------- secret badge tile ---------- */
.bdg.q-secret:not([data-done="1"]) .bdg-label b{color:var(--muted)}

/* ---------- fog ---------- */
.q-fog{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.q-fog-veil{fill:rgba(244,247,244,.34)}

/* ---------- journey moment ---------- */
.q-journey{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .6s ease}
.q-journey.out{opacity:0}
.q-journey svg{position:absolute;inset:0;overflow:visible}
.q-draw{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round}
.q-trail-bg{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.9}
.q-trail{fill:none;stroke:var(--green-2,#1B8A4B);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 8}
.q-token{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--gold),0 6px 12px rgba(19,37,27,.35);will-change:transform}
.q-token img{width:100%;height:100%;object-fit:cover}
.q-token.landed{animation:qLand .45s cubic-bezier(.34,1.6,.5,1)}
@keyframes qLand{0%{scale:1}35%{scale:1.25 .8}70%{scale:.95 1.08}100%{scale:1}}

/* ---------- reminder: one line inside the sticky header ---------- */
.hud{flex-wrap:wrap}
.q-questpill{flex:1 0 100%;display:flex;align-items:center;gap:8px;margin-top:2px;padding:7px 10px 7px 12px;border:0;border-radius:12px;
  font:inherit;font-size:.8rem;font-weight:600;text-align:left;cursor:pointer;color:#5A3C05;background:var(--gold-l);box-shadow:inset 0 0 0 1.5px #F3D27A}
.q-questpill i{flex:none;font-size:1rem;color:var(--gold-d)}
.q-questpill span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-questpill .q-qp-go{color:#B58A2E}
.q-questpill.now{color:#fff;background:var(--green);box-shadow:none}
.q-questpill.now i{color:#FFE08A}
.q-questpill.pop{animation:qPill .45s cubic-bezier(.34,1.5,.5,1)}
@keyframes qPill{0%{opacity:0;transform:translateY(-6px) scale(.97)}100%{opacity:1;transform:none}}
.q-questpill:not(.now) > i:first-child{animation:qRing 1.4s ease-in-out 2}
@keyframes qRing{0%,100%{rotate:0deg}15%{rotate:-14deg}30%{rotate:12deg}45%{rotate:-8deg}60%{rotate:5deg}75%{rotate:0deg}}
.hud .who span i{font-size:.8rem;vertical-align:-1px}

/* ---------- "?" and the guide ---------- */
.q-help{position:absolute;z-index:7;left:9px;bottom:9px;width:44px;height:44px;border-radius:14px;border:0;
  display:grid;place-items:center;font-size:1.05rem;font-weight:700;cursor:pointer;color:var(--green);
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(19,37,27,.35);backdrop-filter:blur(3px)}
.q-help:active{transform:scale(.92)}
.q-guide{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,25,16,.5);
  opacity:0;pointer-events:none;transition:opacity .25s}
.q-guide.on{opacity:1;pointer-events:auto}
.q-g-box{position:relative;width:100%;max-width:520px;max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--card);
  border-radius:24px 24px 0 0;padding:24px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(24px);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.q-guide.on .q-g-box{transform:none}
.q-g-x{position:absolute;right:14px;top:14px;width:44px;height:44px;border:0;border-radius:50%;background:#F0F5F1;color:var(--ink-2);font-size:1.1rem;display:grid;place-items:center;cursor:pointer}
.q-g-box h2{font-size:1.28rem;font-weight:700;line-height:1.3;padding-right:40px}
.q-g-lead{margin-top:2px;font-size:.88rem;color:var(--muted)}
.q-g-lead b{color:var(--green)}
.q-g-steps{list-style:none;margin:16px 0 4px;padding:0;counter-reset:qstep}
.q-g-step{position:relative;display:flex;gap:12px;align-items:flex-start;padding:0 0 16px 0}
.q-g-step:not(:last-child)::after{content:"";position:absolute;left:27px;top:58px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--line) 0 5px,transparent 5px 9px)}
.q-g-art{position:relative;flex:none;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--green-l);color:var(--green);font-size:1.6rem;counter-increment:qstep}
.q-g-art img{width:46px;height:46px;object-fit:contain}
.q-g-art::after{content:counter(qstep);position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
.q-g-step b{display:block;font-size:.98rem;line-height:1.35;margin-top:4px}
.q-g-step p,.q-g-sec p{font-size:.84rem;color:var(--ink-2);line-height:1.5}
.q-g-sec{margin-top:6px;padding:14px 0 2px;border-top:1px solid var(--line)}
.q-g-sec h3{display:flex;align-items:center;gap:6px;font-size:.92rem;font-weight:700;margin-bottom:4px}
.q-g-sec h3 i{color:var(--green)}
.q-g-sec ul{list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:6px}
.q-g-sec > ul > li{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:8px 12px;border-radius:12px;background:#F4F8F4}
.q-g-sec > ul > li span{color:var(--green);font-weight:600;white-space:nowrap}
.q-g-extra > li{justify-content:flex-start!important;align-items:flex-start;background:none!important;padding:4px 0!important}
.q-g-extra b{display:block;font-size:.88rem}
.q-g-ic{--c:var(--green);flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;color:#fff;background:var(--c)}
.q-g-ladder{flex:none;width:38px;display:grid;grid-template-columns:1fr 1fr;gap:1px;font-size:.78rem;line-height:1.1;place-items:center;padding-top:2px}
.q-g-ladder i:last-child{grid-column:1/-1}
.q-g-help a{color:var(--green);font-weight:600}
.q-g-ok{display:block;width:100%;margin-top:14px;border:0;border-radius:14px;padding:13px;font:inherit;font-weight:700;font-size:.98rem;color:#fff;background:var(--green);cursor:pointer}

/* ---------- memory card modal ---------- */
.q-share-fmt{display:inline-flex;margin:8px auto 0;padding:3px;border-radius:99px;background:#EEF2EF}
.q-share-fmt button{border:0;border-radius:99px;padding:5px 16px;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);background:none;cursor:pointer}
.q-share-fmt button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(19,37,27,.2)}
.q-share-frame{position:relative;margin:10px 0 8px}
.q-share-img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:14px;background:#1B1446;box-shadow:0 8px 20px -8px rgba(27,20,70,.6)}
.q-share-img.story{aspect-ratio:9/16;max-height:56dvh;width:auto;margin:0 auto}
.q-share-spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;animation:qSpin .8s linear infinite;pointer-events:none}
.q-share.busy .q-share-spin{opacity:1}
@keyframes qSpin{to{rotate:360deg}}
.q-share-photo{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border-radius:12px;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--green);background:var(--green-l)}

@media (prefers-reduced-motion:reduce){
  .q-lvl,.q-sec,.q-questpill.pop,.q-questpill i,.q-token.landed,.q-share-spin{animation:none}
  .q-g-box{transition:none}
}