/* HOW WORDS WORK (games-h.js) — class prefix nb- */

.nb-scene{
  --nb-sky1:#BFE6FA; --nb-sky2:#EAF7FF; --nb-grass1:#8FD16E; --nb-grass2:#6BBE5A;
  --nb-paper:#FFFDF6; --nb-ink:#3A2A22; --nb-sun:#FFCE3D; --nb-sun-deep:#F0A93B;
  --nb-slot:#F3EBDD; --nb-slot-line:#D9C7A8; --nb-tile:#FFF8E8; --nb-tile-edge:#C9B48E;
  --nb-spring:cubic-bezier(0.34,1.56,0.64,1);
  position:absolute;inset:0;overflow:hidden;color:var(--nb-ink)}
.nb-sky{position:absolute;inset:0 0 40% 0;background:linear-gradient(var(--nb-sky1),var(--nb-sky2))}
.nb-grass{position:absolute;inset:60% 0 0 0;background:linear-gradient(var(--nb-grass1),var(--nb-grass2));
  border-radius:50% 50% 0 0 / 12% 12% 0 0}

/* the bubble sits in the sky, over nothing the child needs */
.nb-say{position:absolute;left:22%;right:4%;top:2%;z-index:6;pointer-events:none;
  background:#fff;border-radius:18px;padding:8px 16px;font-weight:800;font-size:clamp(14px,2.4vw,20px);
  box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .25s,transform .35s var(--nb-spring)}
.nb-say.on{opacity:1;transform:none}
.nb-say.her{background:#FFF3C4;color:#6A4A10}

/* ---- the work area: the friend, Mo's badge, the child's badge ------ */
.nb-work{position:absolute;left:3%;right:3%;top:14%;height:45%;display:flex;flex-direction:column;align-items:center;gap:3%}
.nb-face{height:34%;aspect-ratio:1;flex:0 0 auto;border-radius:50%;background:var(--nb-paper);
  box-shadow:0 0 0 5px var(--acc,var(--nb-sun)),0 10px 20px rgba(0,0,0,.14);padding:4%;
  opacity:0;transform:scale(.6)}
.nb-face.nb-in{opacity:1;transform:none;transition:opacity .3s,transform .5s var(--nb-spring)}
.nb-face svg{width:100%;height:100%;display:block}
.nb-badges{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%}

/* a badge: paper, a ribbon in the friend's colour, a gradient outline */
.nb-badge{position:relative;height:44%;max-width:100%;border-radius:18px;background:var(--nb-paper);
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 22px 0 34px;
  box-shadow:0 8px 16px rgba(0,0,0,.12);opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .3s,transform .45s var(--nb-spring)}
.nb-badge::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:4px;pointer-events:none;
  background:linear-gradient(135deg,var(--acc,var(--nb-sun)),var(--nb-sun));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.nb-badge::after{content:'';position:absolute;left:0;top:0;bottom:0;width:16px;border-radius:18px 0 0 18px;background:var(--acc,var(--nb-sun))}
.nb-badge.nb-show{opacity:1;transform:none}
.nb-badge.nb-full{box-shadow:0 0 0 4px var(--nb-sun),0 0 26px rgba(255,206,61,.55)}
.nb-badge.nb-glow{animation:nbGlow 1.2s ease-in-out 2}
@keyframes nbGlow{50%{transform:scale(1.05)}}

.nb-slot{height:78%;width:calc(min(9vh, 86vw / var(--n, 3) - 12px));flex:0 0 auto;border-radius:12px;
  background:var(--nb-slot);box-shadow:inset 0 0 0 3px var(--nb-slot-line);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(20px,calc(min(6vh, 60vw / var(--n, 3))),60px);line-height:1}
.nb-slot.nb-in{background:#fff;box-shadow:inset 0 0 0 3px var(--acc,var(--nb-sun));animation:nbLand .45s var(--nb-spring)}
@keyframes nbLand{from{transform:scale(1.5) translateY(-30%);opacity:0}to{transform:none;opacity:1}}
.nb-slot.nb-here{box-shadow:inset 0 0 0 4px var(--nb-sun-deep);animation:nbHere 1.1s ease-in-out infinite}
@keyframes nbHere{50%{background:#FFF1C2}}

/* ---- the row of friends along the grass, badges on ---------------- */
.nb-row{position:absolute;left:3%;right:3%;top:61%;height:10%;display:flex;align-items:flex-end;justify-content:center;gap:2%}
.nb-friend{height:100%;aspect-ratio:.8;display:flex;flex-direction:column;align-items:center;
  animation:nbJoin .6s var(--nb-spring) both}
.nb-friend svg{height:72%;width:auto;max-width:100%;display:block}
.nb-mini{margin-top:-4%;background:var(--nb-paper);border-radius:6px;padding:0 6px;
  box-shadow:0 0 0 2px var(--acc,var(--nb-sun));font-weight:900;font-size:clamp(10px,1.8vh,16px);white-space:nowrap}
@keyframes nbJoin{from{opacity:0;transform:translateY(30%) scale(.5)}to{opacity:1;transform:none}}
.nb-row.nb-wave .nb-friend{animation:nbBounce .7s var(--nb-spring) infinite alternate}
.nb-row.nb-wave .nb-friend:nth-child(2n){animation-delay:.2s}
.nb-row.nb-wave .nb-friend:nth-child(3n){animation-delay:.35s}
@keyframes nbBounce{to{transform:translateY(-12%)}}
.nb-scene.nb-done .nb-row{top:36%;height:13%}
.nb-scene.nb-done .nb-work{opacity:0;transition:opacity .4s}

/* ---- the letters to copy from ------------------------------------ */
.nb-tray{position:absolute;left:26%;right:3%;top:74%;height:12%;display:flex;justify-content:center;gap:3%;
  opacity:0;transform:translateY(30%);pointer-events:none;transition:opacity .3s,transform .45s var(--nb-spring)}
.nb-tray.nb-show{opacity:1;transform:none;pointer-events:auto}
.nb-tile{height:100%;width:min(22%,11vh);border-radius:14px;border:0;padding:0;font-family:inherit;
  background:var(--nb-tile);box-shadow:inset 0 0 0 3px var(--nb-slot-line),0 6px 0 var(--nb-tile-edge),0 10px 16px rgba(0,0,0,.14);
  font-weight:900;font-size:clamp(28px,6.5vh,64px);color:var(--nb-ink);display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--nb-spring),opacity .3s,box-shadow .25s;cursor:pointer}
.nb-tile.nb-glow{box-shadow:inset 0 0 0 4px var(--nb-sun-deep),0 6px 0 var(--nb-tile-edge),0 0 26px rgba(255,206,61,.8);
  animation:nbPulse 1s ease-in-out infinite}
@keyframes nbPulse{50%{transform:translateY(-6px) scale(1.06)}}
.nb-tile.nb-used{opacity:0;transform:translateY(-60%) scale(.6);pointer-events:none}
@keyframes nbNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-3deg)}75%{transform:translateX(7px) rotate(3deg)}}
.nb-no{animation:nbNo .42s}
.nb-hop{animation:nbHop .55s var(--nb-spring)}
@keyframes nbHop{40%{transform:translateY(-10%) scale(1.04)}}

/* ---- Mo's paw, showing where each letter goes -------------------- */
.nb-paw{position:absolute;left:50%;top:40%;width:9vh;aspect-ratio:1;z-index:5;pointer-events:none;
  transform:translate(-50%,-20%) rotate(-12deg);opacity:0;
  transition:left .45s var(--nb-spring),top .45s var(--nb-spring),opacity .25s}
.nb-paw.on{opacity:.95}
.nb-paw svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}