/* Noma's quest board (quest-board.jsx). Wood, paper, pins, wax and the chest are
   all drawn here with gradients and shadows: no image assets. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');
.qb-main{position:relative;flex:1;min-height:0;padding:28px 12px 80px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:transparent}
.qb-empty{margin:80px auto;text-align:center;color:#d9c7a8;font:600 22px Caveat,cursive}
.qb-scene{position:relative;max-width:860px;margin:0 auto}

/* ---- wooden board ---------------------------------------------------------- */
.qb-board{--plank:#8a5a32;position:relative;padding:86px 34px 34px;border-radius:10px;
  background:
    radial-gradient(ellipse 16px 30px at 14% 32%,rgba(50,24,8,.55),rgba(70,36,14,.25) 45%,transparent 70%),
    radial-gradient(ellipse 12px 24px at 63% 71%,rgba(50,24,8,.5),rgba(70,36,14,.2) 45%,transparent 70%),
    radial-gradient(ellipse 10px 20px at 86% 18%,rgba(50,24,8,.5),transparent 70%),
    radial-gradient(ellipse 14px 26px at 38% 88%,rgba(50,24,8,.45),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(25,12,4,.85) 118px 120px,rgba(255,220,170,.10) 120px 122px),
    repeating-linear-gradient(91.2deg,rgba(60,30,10,.16) 0 1px,transparent 1px 5px,rgba(255,210,150,.05) 5px 6px,transparent 6px 13px),
    repeating-linear-gradient(88.6deg,rgba(40,18,6,.12) 0 2px,transparent 2px 9px,rgba(40,18,6,.08) 9px 10px,transparent 10px 23px),
    repeating-linear-gradient(90deg,#94603a 0 40px,#8a5631 40px 79px,#9a6640 79px 120px),
    var(--plank);
  border:14px solid #4a2c15;
  border-image:none;
  box-shadow:inset 0 0 0 2px rgba(255,210,160,.12),inset 0 18px 30px rgba(0,0,0,.35),inset 0 -14px 26px rgba(0,0,0,.4),
    0 0 0 2px #2a170a,0 30px 60px rgba(0,0,0,.6),0 8px 0 #2a170a;
  transform-origin:50% 0}
.qb-board::before{content:'';position:absolute;inset:-14px;border-radius:10px;pointer-events:none;
  border:14px solid transparent;
  background:
    repeating-linear-gradient(0deg,rgba(255,200,140,.07) 0 2px,transparent 2px 7px) border-box,
    repeating-linear-gradient(90deg,rgba(255,200,140,.07) 0 2px,transparent 2px 7px) border-box;
  -webkit-mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) padding-box;-webkit-mask-composite:xor;mask-composite:exclude;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.qb-board.is-thud-a{animation:qb-thud-a .45s cubic-bezier(.3,1.6,.5,1)}
.qb-board.is-thud-b{animation:qb-thud-b .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes qb-thud-a{30%{transform:rotate(.5deg) translateY(2px)}65%{transform:rotate(-.3deg)}}
@keyframes qb-thud-b{30%{transform:rotate(-.5deg) translateY(2px)}65%{transform:rotate(.3deg)}}
.qb-nail{position:absolute;width:12px;height:12px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#f0f0ea,#9a9a94 40%,#4a4a46 75%,#2a2a28);box-shadow:0 2px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.4)}
.qb-nail.is-tl{left:-7px;top:-7px}.qb-nail.is-tr{right:-7px;top:-7px}.qb-nail.is-bl{left:-7px;bottom:-7px}.qb-nail.is-br{right:-7px;bottom:-7px}

/* ---- hanging sign ------------------------------------------------------------ */
.qb-sign{position:absolute;left:50%;top:-6px;transform:translateX(-50%) rotate(-1.5deg);transform-origin:50% -30px;z-index:3;
  padding:6px 34px 8px;text-align:center;border-radius:8px;
  background:
    repeating-linear-gradient(2deg,rgba(60,28,8,.2) 0 1px,transparent 1px 4px,rgba(255,220,170,.06) 4px 5px,transparent 5px 9px),
    linear-gradient(#b07a46,#8e5a2e 55%,#7a4a24);
  box-shadow:inset 0 2px 0 rgba(255,220,170,.35),inset 0 -3px 0 rgba(0,0,0,.3),0 6px 12px rgba(0,0,0,.5);
  animation:qb-sign-sway 5s ease-in-out infinite;cursor:default}
@keyframes qb-sign-sway{0%,100%{transform:translateX(-50%) rotate(-1.5deg)}50%{transform:translateX(-50%) rotate(1.2deg)}}
.qb-sign h1{margin:0;font:700 40px/1 Caveat,cursive;letter-spacing:1px;color:#3a1d08;text-shadow:0 1px 0 rgba(255,220,170,.45),0 -1px 0 rgba(0,0,0,.35)}
.qb-sign-clock{display:block;font:600 15px/1 Caveat,cursive;color:#4a2810;opacity:.85}
.qb-rope{position:absolute;top:-34px;width:4px;height:40px;border-radius:2px;
  background:repeating-linear-gradient(35deg,#d8c08a 0 3px,#a8894e 3px 6px);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.qb-rope.is-l{left:18px;transform:rotate(14deg)}.qb-rope.is-r{right:18px;transform:rotate(-14deg)}
.qb-rope::after{content:'';position:absolute;left:-3px;bottom:-4px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ddd,#666)}

/* ---- notes ---------------------------------------------------------------------- */
.qb-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px 26px;position:relative;z-index:1}
.qb-slot{position:relative;min-height:200px;display:flex;justify-content:center}
.qb-pin{position:absolute;left:50%;top:-4px;z-index:4;width:18px;height:18px;margin-left:-9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 8%,color-mix(in srgb,var(--pin) 70%,#fff) 22%,var(--pin) 50%,color-mix(in srgb,var(--pin) 55%,#000) 100%);
  box-shadow:2px 4px 3px rgba(0,0,0,.45),inset -2px -2px 3px rgba(0,0,0,.25)}
.qb-pin::after{content:'';position:absolute;left:7px;top:13px;width:3px;height:7px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#ccc,#777);transform:rotate(18deg);transform-origin:top;opacity:.8}
.qb-pin.is-popped{animation:qb-pop .7s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes qb-pop{40%{transform:translate(10px,-40px) rotate(160deg)}100%{transform:translate(30px,120px) rotate(400deg);opacity:0}}
.qb-hole{position:absolute;left:50%;top:4px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#1a0c04;box-shadow:0 1px 0 rgba(255,220,170,.2)}
.qb-scrap{position:absolute;left:50%;top:-2px;width:26px;height:16px;margin-left:-13px;
  background:linear-gradient(#efe2c4,#e2d1ad);clip-path:polygon(0 0,100% 0,92% 60%,78% 40%,64% 90%,48% 55%,34% 100%,20% 50%,8% 80%);opacity:.9}

.qb-note{position:relative;width:100%;max-width:230px;padding:24px 16px 16px;transform-origin:50% 6px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.3));will-change:transform;color:#2b1a0c}
.qb-note:active{cursor:grabbing}
.qb-note.is-done{cursor:pointer}
.qb-note.is-falling{pointer-events:none;z-index:20}
/* the paper itself: cream base, fibers, foxing spots, darker edges, torn bottom */
.qb-note::before{content:'';position:absolute;inset:0;z-index:-1;filter:hue-rotate(var(--hue));
  background:
    radial-gradient(circle at 78% 22%,rgba(160,110,50,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 18% 70%,rgba(160,110,50,.14) 0 2px,transparent 3px),
    radial-gradient(circle at 62% 84%,rgba(160,110,50,.12) 0 5px,transparent 7px),
    radial-gradient(ellipse 40% 30% at 85% 90%,rgba(170,120,60,.16),transparent 70%),
    radial-gradient(ellipse 50% 35% at 10% 8%,rgba(170,120,60,.12),transparent 70%),
    repeating-linear-gradient(12deg,rgba(120,80,30,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-71deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(transparent 0 25px,rgba(90,120,170,.16) 25px 26px),
    linear-gradient(170deg,#f8efd8,#efe2c2 60%,#e6d4ac);
  box-shadow:inset 0 0 18px rgba(150,100,40,.28),inset 0 0 3px rgba(120,80,30,.35);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),95% 100%,89% calc(100% - 5px),82% 100%,74% calc(100% - 6px),66% 100%,58% calc(100% - 4px),50% 100%,42% calc(100% - 6px),34% 100%,27% calc(100% - 4px),19% 100%,11% calc(100% - 6px),5% 100%,0 calc(100% - 5px))}
/* a little fold at the top corner */
.qb-note::after{content:'';position:absolute;right:0;top:0;width:18px;height:18px;
  background:linear-gradient(225deg,transparent 50%,#d6c196 50%,#f3e7cc 80%);box-shadow:-1px 1px 2px rgba(0,0,0,.15)}
.qb-note-icon{position:absolute;left:10px;top:8px;font-size:17px;opacity:.75;filter:sepia(.6) saturate(1.3);transform:rotate(-8deg)}
.qb-note-title{margin:4px 0 12px;font:700 23px/1.05 Caveat,cursive;text-align:center;color:#2b1a0c}
.qb-note-title b{font-weight:700;filter:saturate(1.4) brightness(.8)}
/* ink progress line: a pencil outline filled with ink */
.qb-ink{position:relative;height:12px;border:2px solid rgba(43,26,12,.75);border-radius:7px 4px 6px 5px;overflow:hidden;background:rgba(255,255,255,.25);transform:rotate(-.6deg)}
.qb-ink span{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:repeating-linear-gradient(-45deg,#3c5aa8 0 4px,#2c4690 4px 7px);transition:width .8s cubic-bezier(.3,1.2,.5,1)}
.qb-note.is-done .qb-ink span{background:repeating-linear-gradient(-45deg,#2f8a46 0 4px,#23733a 4px 7px)}
.qb-note-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-right:60px;font:600 17px/1 Caveat,cursive}
.qb-note-prog{opacity:.8}
.qb-note-go{color:#8a3a12;text-decoration:underline wavy rgba(138,58,18,.5);text-underline-offset:3px}
.qb-note-go:hover{color:#b44a14}
/* wax seal with the reward */
.qb-seal{position:absolute;right:-8px;bottom:-12px;width:64px;height:64px;border:0;border-radius:48% 52% 46% 54%/52% 46% 54% 48%;cursor:default;color:#ffe9d0;
  background:radial-gradient(circle at 36% 30%,#e0624e,#b0281c 45%,#7a140c 85%);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),inset 0 0 0 6px rgba(255,160,140,.25),inset -3px -4px 6px rgba(0,0,0,.35),0 3px 4px rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-10deg);filter:saturate(.55) brightness(.85)}
.qb-seal::before{content:'';position:absolute;inset:-4px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 10deg,#9a2014 0 8%,transparent 8% 12%,#a3261a 12% 22%,transparent 22% 27%,#9a2014 27% 41%,transparent 41% 44%,#a3261a 44% 60%,transparent 60% 66%,#9a2014 66% 80%,transparent 80% 85%,#a3261a 85%)}
.qb-seal b{font:800 15px/1 Inter,system-ui,sans-serif;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.qb-seal small{font:600 13px/1 Caveat,cursive;opacity:.9}
.qb-seal.is-ready{cursor:pointer;filter:none;animation:qb-seal 1.4s ease-in-out infinite}
.qb-seal.is-ready:hover{transform:rotate(-4deg) scale(1.08)}
@keyframes qb-seal{0%,100%{box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),inset -3px -4px 6px rgba(0,0,0,.35),0 3px 4px rgba(0,0,0,.4),0 0 0 0 rgba(255,140,90,.5)}50%{box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),inset -3px -4px 6px rgba(0,0,0,.35),0 3px 4px rgba(0,0,0,.4),0 0 0 10px rgba(255,140,90,0)}}
.qb-stamp{position:absolute;left:12px;bottom:28px;padding:1px 10px;border:3px double rgba(40,130,60,.75);border-radius:6px;
  font:700 22px/1 Caveat,cursive;text-transform:uppercase;letter-spacing:2px;color:rgba(40,130,60,.8);transform:rotate(-14deg);
  animation:qb-stamp .35s cubic-bezier(.3,1.6,.5,1);mix-blend-mode:multiply;pointer-events:none}
@keyframes qb-stamp{from{transform:rotate(-14deg) scale(2.2);opacity:0}}

/* ---- chest ------------------------------------------------------------------------ */
.qb-chest-wrap{--c1:#9a6a3c;--c2:#6e4522;--band:#5b5b5b;--band2:#9a9a9a;position:relative;display:flex;flex-direction:column;align-items:center;margin:46px auto 0;width:fit-content}
.qb-chest-wrap.is-bronze{--c1:#9a5a32;--c2:#6a3a1a;--band:#8a4d22;--band2:#e09a5a}
.qb-chest-wrap.is-silver{--c1:#7a5a44;--c2:#4a3426;--band:#8c96a2;--band2:#eef2f6}
.qb-chest-wrap.is-gold{--c1:#7a2a22;--c2:#4a1410;--band:#b88a1c;--band2:#ffe27a}
.qb-chest-wrap.is-crystal{--c1:#3a4e8a;--c2:#1e2a5a;--band:#7ad6f0;--band2:#f0fdff}
.qb-chest{position:relative;width:150px;height:118px;border:0;background:none;padding:0;cursor:pointer}
.qb-chest-box{position:absolute;left:0;right:0;bottom:0;height:70px;border-radius:4px 4px 8px 8px;
  background:repeating-linear-gradient(transparent 0 22px,rgba(0,0,0,.35) 22px 24px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 6px),
    linear-gradient(var(--c1),var(--c2));
  box-shadow:inset 0 0 0 3px var(--band),inset 0 0 0 4px rgba(0,0,0,.3),inset 0 -10px 16px rgba(0,0,0,.35),0 10px 14px rgba(0,0,0,.55)}
.qb-chest-box i{position:absolute;top:0;bottom:0;width:12px;background:linear-gradient(90deg,var(--band),var(--band2) 45%,var(--band))}
.qb-chest-box i:first-child{left:22px}.qb-chest-box i:last-child{right:22px}
.qb-chest-lid{position:absolute;left:-3px;right:-3px;bottom:66px;height:50px;border-radius:70px 70px 4px 4px/46px 46px 4px 4px;transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 1px,transparent 1px 7px),linear-gradient(color-mix(in srgb,var(--c1) 80%,#fff),var(--c1) 40%,var(--c2));
  box-shadow:inset 0 0 0 3px var(--band),inset 0 6px 8px rgba(255,255,255,.18),0 -2px 6px rgba(0,0,0,.3);transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.qb-chest-lid i{position:absolute;top:0;bottom:0;left:25px;right:25px;border-left:12px solid var(--band);border-right:12px solid var(--band);filter:brightness(1.15)}
.qb-lock{position:absolute;left:50%;bottom:44px;z-index:2;width:26px;height:24px;margin-left:-13px;border-radius:5px;
  background:linear-gradient(var(--band2),var(--band));box-shadow:0 2px 3px rgba(0,0,0,.5),inset 0 -2px 2px rgba(0,0,0,.25)}
.qb-lock::before{content:'';position:absolute;left:5px;top:-11px;width:16px;height:15px;border:4px solid var(--band);border-bottom:0;border-radius:10px 10px 0 0;box-sizing:border-box}
.qb-lock i{position:absolute;left:10px;top:7px;width:6px;height:9px;border-radius:3px 3px 1px 1px;background:#1a1208}
.qb-lock em{position:absolute;right:-16px;top:-14px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;font:800 12px/22px Inter,sans-serif;font-style:normal;color:#fff;background:#b0281c;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.qb-chest-name{margin-top:10px;padding:2px 14px;font:700 21px/1.1 Caveat,cursive;color:#f3e3c3;text-shadow:0 2px 2px rgba(0,0,0,.6)}
.qb-chest-peek{display:flex;gap:6px;margin-top:4px;opacity:.8}
.qb-chest-peek span{position:relative;display:flex;padding:3px;border-radius:6px;background:rgba(0,0,0,.25)}
.qb-chest-peek small{position:absolute;right:-4px;bottom:-4px;font:800 10px/1 Inter,sans-serif;color:#fff;background:#3a2412;border-radius:6px;padding:2px 4px}
.qb-chest-wrap.is-ready .qb-chest{animation:qb-rattle 1.6s ease-in-out infinite}
@keyframes qb-rattle{0%,70%,100%{transform:none}74%{transform:rotate(-4deg)}80%{transform:rotate(4deg) translateY(-3px)}86%{transform:rotate(-3deg)}92%{transform:rotate(2deg)}}
.qb-chest-wrap.is-ready .qb-chest-rays,.qb-chest-wrap.is-open .qb-chest-rays{opacity:1}
.qb-chest-rays{position:absolute;left:50%;top:40%;width:300px;height:300px;margin:-150px;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .5s;
  background:repeating-conic-gradient(from 0deg,rgba(255,235,150,.35) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);animation:nma-spin 12s linear infinite}
.qb-chest-wrap.is-open .qb-chest{cursor:default;animation:none}
.qb-chest-wrap.is-open .qb-chest-lid{transform:perspective(300px) rotateX(-115deg) translateY(-4px)}
.qb-loot{position:relative;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px;max-width:440px}
.qb-loot-item{display:flex;flex-direction:column;align-items:center;width:64px;animation:qb-loot-x .9s cubic-bezier(.2,.6,.4,1) both;animation-delay:calc(var(--i) * .14s + .3s)}
.qb-loot-y{display:flex;animation:qb-loot-y .9s both;animation-delay:inherit}
.qb-loot-name{margin-top:4px;font:700 15px/1 Caveat,cursive;color:#f3e3c3;text-align:center;text-shadow:0 1px 2px #000;animation:qb-fade .4s both;animation-delay:calc(var(--i) * .14s + 1.1s)}
@keyframes qb-loot-x{from{transform:translateX(calc(var(--dx) * -1)) scale(.3)}}
@keyframes qb-loot-y{0%{transform:translateY(-110px);animation-timing-function:cubic-bezier(.2,.8,.4,1)}45%{transform:translateY(-190px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}80%{transform:translateY(0)}90%{transform:translateY(-12px)}100%{transform:none}}
@keyframes qb-fade{from{opacity:0}}

/* ---- closed placard ------------------------------------------------------------- */
.qb-board.is-closed .qb-notes,.qb-board.is-closed .qb-chest-wrap{filter:brightness(.55) saturate(.6)}
.qb-closed{position:absolute;left:50%;top:38%;z-index:10;padding:14px 40px;text-align:center;border-radius:6px;transform-origin:50% -40px;
  background:repeating-linear-gradient(1deg,rgba(60,28,8,.2) 0 1px,transparent 1px 4px),linear-gradient(#a8703e,#7a4a24);
  box-shadow:inset 0 2px 0 rgba(255,220,170,.35),inset 0 -3px 0 rgba(0,0,0,.3),0 12px 24px rgba(0,0,0,.6);
  animation:qb-drop 1.4s cubic-bezier(.2,.9,.3,1) both,qb-hang 4s 1.4s ease-in-out infinite;translate:-50% 0}
.qb-closed .qb-rope{height:60px;top:-56px}
.qb-closed b{display:block;font:700 44px/1 Caveat,cursive;color:#3a1d08;text-shadow:0 1px 0 rgba(255,220,170,.45)}
.qb-closed small{font:600 18px/1 Caveat,cursive;color:#3a1d08}
@keyframes qb-drop{0%{transform:translateY(-400px) rotate(-8deg)}55%{transform:translateY(10px) rotate(6deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(1deg)}}
@keyframes qb-hang{0%,100%{transform:rotate(1deg)}50%{transform:rotate(-1.5deg)}}

/* ---- Noma ------------------------------------------------------------------------- */
.qb-noma-perch{position:absolute;left:calc(100% + 18px);top:120px;width:90px;height:100px;z-index:6;transition:opacity .3s,transform .3s}
html[data-noma-out] .qb-noma-perch{opacity:0;transform:translateY(-30px) scale(.6);pointer-events:none}
@media (max-width:1100px){.qb-noma-perch{left:auto;right:-6px;top:-34px}}
.qb-noma{--lx:0;--ly:0;--pa:0deg;position:relative;width:72px;height:84px;transform:scale(1.35);transform-origin:50% 100%}
.qb-noma-hit{display:block;padding:0;border:0;background:none;cursor:pointer;animation:qb-hover 4s ease-in-out infinite}
@keyframes qb-hover{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,-6px)}50%{transform:translate(2px,-12px)}75%{transform:translate(6px,-4px)}}
.qb-noma[data-point=l] .nma-arm.is-l,.qb-noma[data-point=r] .nma-arm.is-r{animation:none;transform:rotate(var(--pa))}
.qb-noma[data-point=l] .nma-arm.is-l i,.qb-noma[data-point=r] .nma-arm.is-r i{animation:nma-poke .7s ease-in-out infinite}
.qb-noma-squish{position:relative;display:block;transform-origin:50% 55%;will-change:transform}
.qb-noma-spin{display:block}
.qb-noma.is-spin .qb-noma-spin{animation:qb-spin .85s cubic-bezier(.3,1.3,.5,1)}
@keyframes qb-spin{from{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.15)}to{transform:rotate(360deg) scale(1)}}
.qb-noma-hit{touch-action:none;cursor:grab}
.qb-noma.is-held .qb-noma-hit{cursor:grabbing;animation-play-state:paused}
.qb-noma.is-held .nma-eye{transform:scaleY(.3)}
.qb-note{touch-action:pan-y}
.qb-noma.is-asleep .nma-eye{transform:scaleY(.12)}
.qb-noma.is-asleep .nma-wing{animation-duration:1.4s}
.qb-noma.is-asleep .qb-noma-hit{animation:qb-hover 9s ease-in-out infinite}
.qb-zzz{position:absolute;right:-6px;top:-8px;pointer-events:none}
.qb-zzz b{position:absolute;font:700 16px Caveat,cursive;color:#fff3b0;opacity:0;animation:qb-z 3s ease-out infinite}
.qb-zzz b:nth-child(2){animation-delay:1s;font-size:20px}.qb-zzz b:nth-child(3){animation-delay:2s;font-size:25px}
@keyframes qb-z{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(18px,-40px)}}
/* her speech: a paper scrap, docked above-left of her so it never covers itself */
.qb-bubble{position:absolute;right:30px;bottom:calc(100% + 6px);width:max-content;max-width:min(250px,62vw);padding:10px 14px;z-index:7;
  font:700 19px/1.15 Caveat,cursive;color:#2b1a0c;transform:scale(.74);transform-origin:100% 100%;
  background:repeating-linear-gradient(-71deg,rgba(255,255,255,.2) 0 1px,transparent 1px 4px),linear-gradient(170deg,#fffaf0,#f3e6c8);
  border-radius:14px 14px 4px 14px;box-shadow:inset 0 0 10px rgba(150,100,40,.2),0 6px 14px rgba(0,0,0,.45);animation:qb-bubble .3s cubic-bezier(.3,1.6,.5,1)}
.qb-bubble::after{content:'';position:absolute;right:-8px;bottom:6px;width:14px;height:14px;background:#f3e6c8;clip-path:polygon(0 0,100% 100%,0 100%)}
.qb-bubble i{font-style:normal;visibility:hidden}
@keyframes qb-bubble{from{transform:scale(.3);opacity:0}}

.qb-gain{position:absolute;z-index:30;pointer-events:none;translate:-50% 0;white-space:nowrap;font:800 22px Inter,system-ui,sans-serif;color:#ffe27a;
  text-shadow:0 2px 0 #7a4a10,0 0 12px rgba(255,200,60,.8);animation:qb-gain 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes qb-gain{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-10px) scale(1.15)}100%{transform:translateY(-110px) scale(1);opacity:0}}

@media (max-width:720px){
  .qb-main{padding:22px 6px 120px}
  .qb-board{padding:80px 14px 26px;border-width:10px}
  .qb-notes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 14px}
  .qb-note-title{font-size:20px}
  .qb-noma-perch{position:fixed;right:10px;top:auto;bottom:16px;width:72px;height:84px}
  .qb-noma{transform:scale(1)}
}

/* Header tab: a tiny Noma (sun-yellow orb, green sprout, glowing bud). */
.nav-noma-orb{background:radial-gradient(circle at 34% 28%,#fffef2 0,#fff4a8 13%,#ffdc4f 40%,#ffb224 74%,#ec7d10);box-shadow:0 0 8px rgba(255,205,60,.75)}
.nav-noma-orb i{background:#5a2a00}
.nav-noma-orb i:nth-of-type(1){left:6.5px}.nav-noma-orb i:nth-of-type(2){left:auto;right:6.5px}
.nav-noma-orb::before{left:10px;top:-6px;width:2px;height:7px;border-radius:1px;transform:rotate(-8deg);box-shadow:none;background:#5fae32}
.nav-noma-orb b{position:absolute;left:8px;top:-9px;width:5px;height:5px;border-radius:50%;background:#fff3a6;box-shadow:0 0 5px #ffd84d}
.nav-quest{position:relative;color:#ffe066;border-color:rgba(255,214,70,.6);background:linear-gradient(180deg,rgba(255,220,80,.26),rgba(255,170,20,.16));text-shadow:0 0 8px rgba(255,210,60,.45)}
.nav-quest:hover{background:linear-gradient(180deg,rgba(255,226,90,.36),rgba(255,180,30,.22))}
.nav-quest.is-current{box-shadow:0 0 0 2px rgba(255,214,70,.4),0 0 14px rgba(255,200,50,.35)}
.nav-quest .nav-count{position:absolute;top:-2px;right:-4px}