/* BIG AND LITTLE — The Name Train. See assets/games-g.js. Every class is
   prefixed nmt- (checked unused against index.html and every games-*.css).
   The header takes the top ~14% of the stage and the play-cast Mo stands
   over the bottom left, so nothing to tap goes there. */

.nmt-scene{position:absolute;inset:0;overflow:hidden;
  --nmt-spring:cubic-bezier(0.34,1.56,0.64,1);--nmt-ink:#3A2A22;--nmt-glow:#FFCE3D;--nmt-cream:#FFF8E8}
.g-name-train .wanted-tag{display:none}          /* the name, not today's letter, is the point here */
.nmt-g{display:block;width:100%;height:100%;color:var(--nmt-ink);overflow:visible}

/* ---- the place ----------------------------------------------------- */
.nmt-sky{position:absolute;inset:0 0 44% 0;background:linear-gradient(180deg,#9AD8F7 0%,#CDEFFF 60%,#EAF8FF 100%)}
.nmt-sun{position:absolute;right:8%;top:15%;width:min(15vw,13vh);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFF3A8 0 40%,#FFCE3D 70%);box-shadow:0 0 40px rgba(255,206,61,.6)}
.nmt-cloud{position:absolute;width:min(26vw,24vh);aspect-ratio:2.6/1;border-radius:999px;background:#fff;opacity:.92;
  animation:nmtDrift 22s linear infinite alternate}
.nmt-cloud::before,.nmt-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.nmt-cloud::before{width:46%;aspect-ratio:1;left:14%;bottom:30%}
.nmt-cloud::after{width:34%;aspect-ratio:1;left:48%;bottom:42%}
.nmt-cloud.c1{left:6%;top:19%}
.nmt-cloud.c2{left:56%;top:30%;transform:scale(.7);animation-duration:30s}
@keyframes nmtDrift{from{translate:0 0}to{translate:8vw 0}}
.nmt-hill{position:absolute;bottom:42%;border-radius:50% 50% 0 0;background:#9FDB8E}
.nmt-hill.h1{left:-10%;width:70%;height:16%}
.nmt-hill.h2{right:-12%;width:66%;height:12%;background:#8AD37F}

/* ---- the train ----------------------------------------------------- */
.nmt-train{position:absolute;left:2%;right:2%;top:30%;height:21%;display:flex;align-items:flex-end;justify-content:center;
  gap:calc(var(--w,80px) * .07);z-index:2;transition:transform 3.4s cubic-bezier(.55,0,.8,.4)}
.nmt-engine{position:relative;flex:0 0 auto;width:calc(var(--w,80px) * 1.3);aspect-ratio:120/100;margin-bottom:calc(var(--w,80px) * -.04)}
.nmt-engine svg{display:block;width:100%;height:100%}
.nmt-puff{position:absolute;left:22%;top:-6%;width:22%;aspect-ratio:1;border-radius:50%;background:#fff;opacity:0;
  animation:nmtPuff 2.4s ease-out infinite}
.nmt-puff.p2{animation-delay:.8s}.nmt-puff.p3{animation-delay:1.6s}
@keyframes nmtPuff{0%{opacity:.9;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(60%,-160%) scale(1.6)}}
.nmt-car{position:relative;flex:0 0 auto;width:var(--w,80px);height:calc(var(--w,80px) * 1.6);
  display:flex;flex-direction:column;justify-content:flex-end;
  animation:nmtCarIn .6s var(--d,0ms) var(--nmt-spring) both}
@keyframes nmtCarIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* the roof space for the bag: dashed from the very first second */
.nmt-slot{position:relative;flex:0 0 auto;height:36%;margin:0 9%;border-radius:12px 12px 4px 4px;
  border:3px dashed rgba(58,42,34,.32);border-bottom:5px solid #8C5A32;background:rgba(255,255,255,.35);
  transition:border-color .3s,background .3s,box-shadow .3s}
.nmt-roofbag{position:absolute;inset:4% 4% 0 4%}
.nmt-roofbag:empty{display:none}
.nmt-roofbag .nmt-bagsvg{position:absolute;inset:0;width:100%;height:100%}
.nmt-roofbag .nmt-label{position:absolute;left:12%;right:12%;top:20%;bottom:8%}
.nmt-car.nmt-full .nmt-slot{border-style:solid;border-color:transparent;border-bottom-color:#8C5A32;background:transparent}
.nmt-car.nmt-full .nmt-roofbag{animation:nmtLand .5s var(--nmt-spring) both}
@keyframes nmtLand{from{transform:translateY(-30%) scale(.5);opacity:0}to{transform:none;opacity:1}}
.nmt-body{position:relative;flex:0 0 auto;height:64%}
.nmt-carsvg{position:absolute;inset:0 0 14% 0;width:100%;height:86%;overflow:visible}
.nmt-wheels{position:absolute;left:0;right:0;bottom:-2%;width:100%;height:18%}
.nmt-big{position:absolute;left:10%;right:10%;top:9%;height:54%}
/* the carriage that is next: its roof space glows and the big letter lifts */
.nmt-car.nmt-next .nmt-slot{border-color:var(--nmt-glow);background:rgba(255,236,160,.6);
  box-shadow:0 0 0 4px rgba(255,206,61,.35),0 0 22px rgba(255,206,61,.7);animation:nmtBeat 1.3s ease-in-out infinite}
.nmt-car.nmt-next .nmt-big{animation:nmtBob 1.3s ease-in-out infinite}
@keyframes nmtBeat{0%,100%{box-shadow:0 0 0 4px rgba(255,206,61,.3),0 0 16px rgba(255,206,61,.5)}50%{box-shadow:0 0 0 7px rgba(255,206,61,.5),0 0 28px rgba(255,206,61,.9)}}
@keyframes nmtBob{0%,100%{transform:none}50%{transform:translateY(-6%) scale(1.06)}}
.nmt-car.nmt-look .nmt-body{animation:nmtLook .6s var(--nmt-spring)}
@keyframes nmtLook{0%,100%{transform:none}40%{transform:translateY(-8%) scale(1.06)}}
.nmt-slot.fed{filter:brightness(1.25)}
/* the ending: each carriage, big and little, lights as it is named */
.nmt-car.nmt-say-it{animation:none;transform:translateY(-6%) scale(1.08);transition:transform .35s var(--nmt-spring)}
.nmt-car.nmt-say-it .nmt-carsvg{filter:drop-shadow(0 0 10px rgba(255,206,61,.95))}
.nmt-car.nmt-say-it .nmt-roofbag{filter:drop-shadow(0 0 8px rgba(255,206,61,.95))}

.nmt-track{position:absolute;left:0;right:0;top:51%;height:2.2%;z-index:1;
  background:repeating-linear-gradient(90deg,#8C5A32 0 10px,transparent 10px 26px) 0 60%/100% 60% no-repeat,
             linear-gradient(180deg,#6B7685 0 18%,transparent 18% 72%,#6B7685 72% 90%,transparent 90%)}
.nmt-platform{position:absolute;left:0;right:0;top:53.2%;bottom:0;
  background:linear-gradient(180deg,#EADFCB,#D9CBB0);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 70px),linear-gradient(180deg,#EFE5D3,#D8C9AC)}
.nmt-edge{position:absolute;left:0;right:0;top:0;height:2.2%;min-height:8px;background:repeating-linear-gradient(90deg,#FFCE3D 0 24px,#F0A93B 24px 30px)}

/* a bench, so the platform is a place and not a floor */
.nmt-bench{position:absolute;right:16%;bottom:18%;width:30%;height:6%;
  background:linear-gradient(180deg,#C98A3A 0 22%,transparent 22% 40%,#C98A3A 40% 62%,transparent 62%),
             linear-gradient(90deg,transparent 8%,#8C5A32 8% 13%,transparent 13% 87%,#8C5A32 87% 92%,transparent 92%)}

/* ---- the bags on the platform ---------------------------------------- */
.nmt-bags{position:absolute;left:4%;right:4%;top:58%;height:17%;display:flex;justify-content:center;align-items:flex-end;gap:5%;z-index:3}
.nmt-bag{position:relative;flex:0 1 auto;height:100%;aspect-ratio:100/120;max-width:30%;padding:0;border:0;background:none;
  cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transition:transform .3s var(--nmt-spring)}
.nmt-bag .nmt-bagsvg{position:absolute;inset:0;width:100%;height:100%}
.nmt-bag .nmt-label{position:absolute;left:12%;right:12%;top:19%;bottom:10%;pointer-events:none}
.nmt-bag.nmt-in{animation:nmtBagIn .5s calc(var(--i) * 70ms) var(--nmt-spring) both}
@keyframes nmtBagIn{from{transform:translateY(24%) scale(.7);opacity:0}to{transform:none;opacity:1}}
.nmt-bag:active{transform:scale(.95)}
.nmt-bag.nmt-hint{animation:nmtHint 1s ease-in-out infinite}
@keyframes nmtHint{0%,100%{transform:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
  50%{transform:translateY(-8%);filter:drop-shadow(0 0 16px rgba(255,206,61,1))}}
.nmt-bag.nmt-no{animation:nmtNo .42s}
@keyframes nmtNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-4deg)}75%{transform:translateX(8px) rotate(4deg)}}
.nmt-bag.nmt-gone-bag{visibility:hidden}
@media (min-aspect-ratio:1/1){.nmt-bags{top:57%;height:24%}}
/* a wrong bag shows which BIG letter it belongs to, for a moment */
.nmt-ghost{position:absolute;left:50%;bottom:74%;width:44%;max-width:84px;z-index:2;aspect-ratio:1;translate:-50% 0;pointer-events:none;
  border-radius:50%;background:#fff;box-shadow:0 0 0 4px #C9A0F0,0 6px 14px rgba(0,0,0,.18);padding:14%;box-sizing:border-box;
  animation:nmtGhost 1.3s var(--nmt-spring) both}
.nmt-ghost .nmt-g{color:#7A5AB0}
@keyframes nmtGhost{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-12%)}}

/* ---- the station sign: the name as a book writes it ------------------- */
.nmt-sign{position:absolute;left:50%;top:58%;height:14%;translate:-50% 0;z-index:2;
  opacity:0;transform:translateY(-40%) scale(.6);transition:opacity .4s,transform .6s var(--nmt-spring)}
.nmt-sign i{position:absolute;top:60%;width:6px;height:90%;background:#8C5A32;border-radius:3px;z-index:-1}
.nmt-sign i.l{left:14%}.nmt-sign i.r{right:14%}
.nmt-board{height:100%;display:flex;align-items:stretch;gap:2px;padding:0 4%;border-radius:14px;background:var(--nmt-cream);
  box-shadow:inset 0 0 0 4px #F0A93B,0 8px 16px rgba(0,0,0,.16);min-width:30vw;justify-content:center}
.nmt-sl .nmt-g,.nmt-label .nmt-g{overflow:hidden}
.nmt-sl{display:block;height:100%;aspect-ratio:100/184;opacity:0;transform:scale(.4)}
.nmt-scene.nmt-signed .nmt-sign{opacity:1;transform:none}
.nmt-scene.nmt-signed .nmt-sl{animation:nmtSl .5s var(--d) var(--nmt-spring) both}
@keyframes nmtSl{to{opacity:1;transform:none}}

/* ---- the ending: the train pulls out to the left ------------------------ */
.nmt-scene.nmt-full .nmt-bags{opacity:0;transition:opacity .6s;pointer-events:none}
.nmt-scene.nmt-gone .nmt-train{transform:translateX(-140vw)}
.nmt-scene.nmt-gone .nmt-puff{animation-duration:.9s}

/* ---- the speech bubble ---------------------------------------------- */
.nmt-say{position:absolute;left:24%;right:5%;bottom:5%;z-index:6;pointer-events:none;
  background:#fff;border-radius:18px;padding:10px 16px;font-weight:800;font-size:clamp(14px,2.6vw,20px);
  color:#3A2A22;box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .25s,transform .35s cubic-bezier(0.34,1.56,0.64,1)}
.nmt-say.on{opacity:1;transform:none}
.nmt-say.her{background:#FFF3C4;color:#6A4A10}
.nmt-say::after{content:'';position:absolute;left:14%;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.nmt-say.her::after{border-top-color:#FFF3C4}