/* Nonstop Realm - game page.
   Direction: "one motif" (tasteskill seed 1512144817). The motif is the room gate the hordes pour through:
   an arch, used as the hero shape, the pressed weapon on the rack and the letters of the footer.
   The cast is the game's own: KayKit models rendered as cut-outs from the game's resources, placed with
   some character (peeking round the gate, tilting, hopping on hover, popping out of the chest).
   One family: Pilcrow Rounded. Loaded after style.css, which supplies the reset and shared helpers. */

@font-face{font-family:"Pilcrow Rounded";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pilcrow-rounded-400.woff2) format("woff2")}
@font-face{font-family:"Pilcrow Rounded";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/pilcrow-rounded-500.woff2) format("woff2")}
@font-face{font-family:"Pilcrow Rounded";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pilcrow-rounded-700.woff2) format("woff2")}

.nr{
  --night:#161a36; --night-2:#20264a; --parch:#f3e7c9; --parch-soft:#c9bfa6; --gold:#ffc531; --gold-deep:#c98f00; --oxblood:#8f1622;
  --normal:#d8d8d8; --magic:#4f8cff; --rare:#ffd84a; --set:#3ddc6b; --unique:#ff9a2e;
  --bg:var(--night); --ink:var(--parch); --muted:var(--parch-soft); --accent:var(--gold); --accent-ink:var(--night); --surface:var(--night-2);
  --font-nr:"Pilcrow Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arch:100vmax 100vmax 0 0;
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  background:var(--night);color:var(--parch);font-family:var(--font-nr);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color-scheme:dark
}
.nr ::selection{background:var(--gold);color:var(--night)}
.nr :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.nr h1,.nr h2,.nr h3{font-family:var(--font-nr)}
.nr .button{border-radius:1.625rem 1.625rem 0 0;background:var(--gold);color:var(--night);font-weight:700;min-height:3.25rem;padding:0 1.75rem}
@media (hover:hover) and (pointer:fine){.nr .button:not(.disabled):hover{background:var(--parch);color:var(--night)}}
.nr-h2{font-size:clamp(2.25rem,1.4rem + 2.8vw,4rem);line-height:1;font-weight:700;letter-spacing:-.04em;text-transform:lowercase}

/* ---------- the Google Play slot: badge-shaped, filled by config.js ---------- */
.get{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.25rem}
.play{display:inline-flex;align-items:center;gap:.85rem;width:14.5rem;min-height:4.25rem;padding:.6rem 1.25rem .6rem 1.1rem;background:#000;color:#fff;border-radius:.7rem;text-decoration:none;font-family:var(--font-nr);transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.play-mark{flex:none;width:1.75rem;height:1.9rem;fill:var(--gold)}
.play .label{display:flex;flex-direction:column;font-size:1.25rem;line-height:1.05;font-weight:700;letter-spacing:-.01em;max-width:9.5rem}
.play .l1{font-size:.8125rem;font-weight:500;letter-spacing:0;margin-bottom:.2rem;color:#e6e6e6}
.play.disabled{cursor:default}
.play:not(.disabled):active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.play:not(.disabled):hover{background:#262a40}}
.status{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;font-size:1rem}
.status .dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--gold);flex:none}
.nr-cta .status .dot{background:var(--oxblood)}

/* ---------- header ---------- */
.nr-bar{position:absolute;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.4rem var(--margin)}
.nr-bar a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.nr-bar a:hover{text-decoration-color:currentColor}}
.nr-bar .mark{justify-self:center;font-weight:700;letter-spacing:-.03em;font-size:1.25rem;text-decoration:none}
.nr-bar .studio{justify-self:start}
.nr-bar .right{justify-self:end;display:flex;gap:clamp(1rem,2vw,2rem)}
@media (max-width:40rem){.nr-bar{grid-template-columns:auto 1fr}.nr-bar .mark{display:none}.nr-bar .right a:not(:last-child){display:none}}

/* ---------- hero: the knight steps out of the gate ---------- */
.nr-hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);min-height:max(42rem,100svh);padding:0 var(--margin);overflow:hidden}
.nr-hero .copy{grid-column:1/7;align-self:center;padding:7rem 0 4rem;position:relative;z-index:4}
.nr-hero h1{font-size:clamp(3.5rem,1rem + 7.2vw,8.25rem);line-height:.9;font-weight:700;letter-spacing:-.05em;text-transform:lowercase}
.nr-hero .lede{margin-top:1.75rem;font-size:clamp(1.25rem,1.05rem + .75vw,1.75rem);line-height:1.3;max-width:30ch}
.nr-stage{--h:min(78svh,47rem);grid-column:7/12;justify-self:center;align-self:end;position:relative;height:var(--h);aspect-ratio:3/4.2;margin-bottom:-3.5rem}
.arch{position:absolute;inset:0;z-index:1;border-radius:var(--arch);background:var(--gold);padding:5.5% 5.5% 0}
.arch .door{width:100%;height:100%;border-radius:var(--arch);background:var(--night-2)}
.arch::after{content:"";position:absolute;left:50%;top:2.4%;width:6%;aspect-ratio:1;margin-left:-3%;border-radius:50%;background:var(--night)}
.stage-hero{position:absolute;z-index:3;left:50%;bottom:calc(3.5rem + 1%);height:70%;width:auto;max-width:none;translate:-50% 0;transform-origin:50% 100%}
.stage-coins{position:absolute;z-index:4;left:-2%;bottom:calc(3.5rem - 1%);height:17%;width:auto;rotate:-6deg}
.peek{position:absolute;z-index:0;width:auto;max-width:none}
.peek-minion{right:-24%;top:36%;height:34%;rotate:12deg;transform-origin:0 100%}
.peek-mage{left:-15%;top:3%;height:30%;rotate:-16deg;transform-origin:100% 100%}
@media (max-width:48rem){
  .nr-hero{min-height:0}
  .nr-hero .copy{grid-column:1/-1;padding:6rem 0 2.5rem}
  .nr-hero h1{font-size:17vw}
  .nr-stage{--h:min(64svh,31rem,86vw);grid-column:1/-1;margin-bottom:-2.5rem}
  .stage-hero{bottom:calc(2.5rem + 1%)}
  .stage-coins{bottom:calc(2.5rem - 1%)}
  .peek-minion{right:-22%}
  .peek-mage{left:-13%}
}

/* ---------- the hordes: the cast, standing in a ragged line ---------- */
.nr-hordes{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(2.5rem,5vw,4rem);padding:clamp(6rem,10vw,9rem) var(--margin) clamp(5rem,8vw,7rem);background:var(--oxblood);color:var(--parch);overflow:hidden}
.hordes-copy{grid-column:1/8;grid-row:1}
.hordes-copy p{margin-top:1.25rem;max-width:42ch;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);line-height:1.45}
.line-up{grid-column:1/9;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);align-items:end}
.foe img{height:clamp(12rem,6rem + 12vw,19rem);width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;margin:0 auto;rotate:var(--tilt,0deg);transform-origin:50% 100%;transition:transform 420ms var(--ease-back)}
.foe-minion{--tilt:-4deg}.foe-warrior{--tilt:3deg}.foe-rogue{--tilt:-2deg}.foe-mage{--tilt:5deg}
.foe-minion img{height:clamp(10.5rem,5rem + 10.5vw,16.5rem)}
.foe-warrior img{height:clamp(12.5rem,6rem + 12.5vw,20rem)}
.foe p,.boss figcaption{margin-top:1rem;font-size:1rem;line-height:1.45;max-width:24ch}
.foe strong,.boss strong{display:block;font-size:1.75rem;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin-bottom:.3rem}
.boss{grid-column:9/13;grid-row:1/3;align-self:end;margin:0;display:flex;flex-direction:column;align-items:center}
.boss img{height:clamp(22rem,10rem + 30vw,40rem);width:auto;max-width:100%;object-fit:contain;transform-origin:50% 100%;transition:transform 520ms var(--ease-back)}
.boss figcaption{align-self:stretch;max-width:30ch}
@media (hover:hover) and (pointer:fine){
  .foe:hover img{transform:translateY(-14px) rotate(calc(var(--tilt,0deg) * -1.5))}
  .boss:hover img{transform:translateY(-10px) rotate(-2deg) scale(1.02)}
}
@media (max-width:60rem){
  .hordes-copy{grid-column:1/-1}
  .line-up{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem}
  .boss{grid-column:1/-1;grid-row:auto;align-items:flex-start;flex-direction:row;gap:var(--gutter)}
  .boss img{height:min(26rem,62vw)}
  .boss figcaption{align-self:center}
}
@media (max-width:30rem){
  .foe img,.foe-minion img,.foe-warrior img{height:auto;width:100%;max-height:13rem}
  .boss{flex-direction:column}
  .boss figcaption{align-self:stretch}
}

/* ---------- the armoury: one live thing ---------- */
.nr-armoury{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(2rem,4vw,3rem);padding:clamp(6rem,10vw,9rem) var(--margin) clamp(4rem,6vw,5rem);background:var(--parch);color:var(--night)}
.nr-armoury ::selection{background:var(--night);color:var(--parch)}
.nr-armoury :focus-visible{outline-color:var(--night)}
.arm-copy{grid-column:1/-1}
.arm-copy p{margin-top:1.25rem;max-width:44ch;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);line-height:1.45}
.arm-hero{grid-column:1/7;margin:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gutter);align-items:end}
.arm-pic{position:relative;height:clamp(20rem,12rem + 22vw,34rem);display:flex;align-items:flex-end;justify-content:center}
.arm-pic::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:86%;border-radius:var(--arch);background:var(--gold)}
.arm-pic img{position:relative;height:96%;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
.arm-name{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);line-height:1;font-weight:700;letter-spacing:-.04em;text-transform:lowercase}
.arm-what{margin-top:.75rem;line-height:1.45;max-width:28ch;min-height:4.4em}
.arm-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:1.5rem;margin:1.5rem 0 0}
.arm-stats div{display:flex;flex-direction:column-reverse}
.arm-stats dt{font-size:1rem;font-weight:500}
.arm-stats dd{margin:0;font-size:1.75rem;line-height:1.1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rack{grid-column:7/13;align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem var(--gutter);align-items:end}
.w{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem .75rem;min-height:9.5rem;border-radius:var(--arch);color:var(--night);font-weight:500;font-size:1rem;transition:background-color 240ms ease,transform var(--t-press) var(--ease-out)}
.w img{height:5.75rem;width:auto;max-width:100%;object-fit:contain;rotate:var(--r,0deg);transition:transform 380ms var(--ease-back)}
.w-sword{--r:-8deg}.w-axe{--r:10deg}.w-dagger{--r:-14deg}.w-sword2h{--r:6deg}.w-axe2h{--r:-6deg}.w-staff{--r:12deg}.w-crossbow{--r:-10deg}
.w-crossbow img{height:3.25rem;margin-block:1.25rem}
.w[aria-pressed="true"]{background:var(--gold)}
.w:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.w:hover img{transform:translateY(-8px) rotate(14deg)}}
.arm-note{grid-column:1/-1;font-size:1rem;line-height:1.45}
@media (max-width:60rem){
  .arm-hero{grid-column:1/-1}
  .rack{grid-column:1/-1}
}
@media (max-width:40rem){
  .arm-hero{grid-template-columns:1fr}
  .arm-what{min-height:0}
  .rack{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
  .w{min-height:7.5rem;padding:.75rem .25rem .5rem;font-size:.9375rem}
  .w img{height:4.25rem}
  .w-crossbow img{height:2.5rem;margin-block:.9rem}
}

/* ---------- the chest: press it, something pops out ---------- */
.nr-chest{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;padding:clamp(5rem,8vw,7rem) var(--margin) clamp(4rem,6vw,5rem);background:var(--night-2);color:var(--parch);overflow:hidden;transition:background-color 400ms ease,color 400ms ease}
.nr-chest[data-r="normal"]{background:var(--normal);color:var(--night)}
.nr-chest[data-r="magic"]{background:var(--magic);color:var(--night)}
.nr-chest[data-r="rare"]{background:var(--rare);color:var(--night)}
.nr-chest[data-r="set"]{background:var(--set);color:var(--night)}
.nr-chest[data-r="unique"]{background:var(--unique);color:var(--night)}
.chest-copy{grid-column:1/6;align-self:end;padding-bottom:2rem;position:relative;z-index:2}
.chest-copy h2{font-size:clamp(2.25rem,1.4rem + 2.8vw,4rem);line-height:1;font-weight:700;letter-spacing:-.04em;text-transform:lowercase}
.chest-copy p{margin-top:1rem;line-height:1.55;max-width:38ch}
.chest-copy .found{margin-top:1.75rem;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;min-height:2.4em;max-width:20ch}
.chest-copy .power{font-size:1rem;max-width:40ch;min-height:3em}
.rarities{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.75rem;font-weight:500}
.rarities span{display:inline-flex;align-items:center;gap:.45rem}
.rarities span::before{content:"";width:.9rem;height:1.1rem;border-radius:.45rem .45rem 0 0;background:var(--c)}
.r-n{--c:var(--normal)}.r-m{--c:var(--magic)}.r-r{--c:var(--rare)}.r-s{--c:var(--set)}.r-u{--c:var(--unique)}
.nr-chest:not([data-r="none"]) .rarities span::before{outline:2px solid var(--night)}
.chest-stage{grid-column:7/13;position:relative;justify-self:center;width:min(100%,32rem);padding-top:5.5rem}
.chest-btn{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:640/621;cursor:pointer;transition:transform var(--t-press) var(--ease-out)}
.chest-btn > img{position:absolute;left:0;bottom:0;width:100%;height:auto}
.chest-btn .open{opacity:0}
.nr-chest:not([data-r="none"]) .chest-btn .shut{opacity:0}
.nr-chest:not([data-r="none"]) .chest-btn .open{opacity:1}
.chest-btn:active{transform:scale(.97)}
.drop{position:absolute;z-index:1;left:46%;bottom:46%;width:44%;height:68%;translate:-50% 0;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none}
.drop img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.nr-chest:not([data-r="none"]) .drop{opacity:1}
.chest-key{position:absolute;z-index:2;left:-6%;bottom:-2%;width:26%;rotate:-14deg}
@media (max-width:48rem){
  .nr-chest{min-height:0}
  .chest-copy{grid-column:1/-1}
  .chest-copy{padding-bottom:0}
  .chest-stage{grid-column:1/-1;width:min(84%,22rem);padding-top:4.5rem}
}

/* ---------- between the fights: the world, in props ---------- */
.nr-camp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(3rem,6vw,5rem);padding:clamp(6rem,10vw,9rem) var(--margin)}
.nr-camp > h2{grid-column:1/-1}
.camp-map,.camp-village{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.camp-gate{grid-column:1/6;width:100%;max-width:30rem;rotate:-3deg}
.camp-map .camp-text{grid-column:7/12}
.camp-village .camp-text{grid-column:2/7;grid-row:1}
.camp-text h3{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);line-height:1.05;font-weight:700;letter-spacing:-.03em;text-transform:lowercase;max-width:18ch}
.camp-text p{margin-top:1rem;line-height:1.55;max-width:42ch}
.camp-pile{grid-column:8/13;grid-row:1;position:relative;aspect-ratio:5/4}
.camp-pile img{position:absolute;width:auto;transform-origin:50% 100%;transition:transform 420ms var(--ease-back)}
.pile-crates{left:2%;bottom:14%;height:78%;rotate:-3deg}
.pile-keg{right:0;bottom:22%;height:46%}
.pile-barrel{left:36%;bottom:0;height:62%;rotate:4deg;z-index:1}
.pile-coins{left:0;bottom:-2%;height:32%;z-index:2}
@media (hover:hover) and (pointer:fine){.camp-pile img:hover{transform:translateY(-10px) rotate(-3deg)}}
@media (max-width:40rem){
  .camp-gate{grid-column:1/-1;max-width:20rem;margin-bottom:2rem}
  .camp-map .camp-text,.camp-village .camp-text{grid-column:1/-1}
  .camp-pile{grid-column:1/-1;grid-row:2;margin-top:2rem;width:min(100%,26rem)}
}

/* ---------- the close: gold field, the other hero, the slot again ---------- */
.nr-cta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;min-height:86svh;padding:clamp(5rem,8vw,7rem) var(--margin) clamp(4rem,6vw,5rem);background:var(--gold);color:var(--night);overflow:hidden}
.nr-cta ::selection{background:var(--night);color:var(--gold)}
.nr-cta :focus-visible{outline-color:var(--night)}
.nr-cta .close{grid-column:1/7;align-self:center}
.nr-cta h2{font-size:clamp(3.5rem,1rem + 6.4vw,7rem);line-height:.92;font-weight:700;letter-spacing:-.05em;text-transform:lowercase}
.nr-cta .close p{margin-top:1.25rem;line-height:1.55;max-width:40ch}
.cta-cast{grid-column:7/13;position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.cta-barb{height:clamp(22rem,10rem + 28vw,38rem);width:auto;max-width:100%;object-fit:contain;transform-origin:50% 100%;transition:transform 520ms var(--ease-back)}
.cta-chest{position:absolute;right:0;bottom:2.25rem;width:clamp(8rem,4rem + 12vw,15rem);rotate:6deg}
.cta-cast figcaption{margin-top:.75rem;font-size:1rem;font-weight:500;align-self:flex-start}
@media (hover:hover) and (pointer:fine){.cta-barb:hover{transform:translateY(-12px) rotate(2deg)}}
@media (max-width:48rem){
  .nr-cta{min-height:0}
  .nr-cta .close{grid-column:1/-1}
  .nr-cta h2{font-size:15vw}
  .cta-cast{grid-column:1/-1;margin-top:3rem}
  .cta-barb{height:min(26rem,90vw)}
  .cta-chest{width:34%}
}

/* ---------- footer: the mark, built from gates ---------- */
.nr-foot{padding:clamp(4rem,7vw,6rem) var(--margin) 2rem;background:var(--night)}
.blocks{display:flex;align-items:flex-end;gap:2.5vw}
.blocks .wm{display:block;height:auto;min-width:0;width:100%;overflow:visible}
.blocks .wm:first-child{flex:736 1 0}
.blocks .wm:last-child{flex:524 1 0}
.blocks text{font-family:var(--font-nr);font-weight:700;font-size:84px;text-anchor:middle}
.blocks path{transform-box:fill-box;transform-origin:50% 100%;transition:transform 900ms var(--ease-expo)}
.blocks g:nth-child(2) path{transition-delay:50ms}.blocks g:nth-child(3) path{transition-delay:100ms}.blocks g:nth-child(4) path{transition-delay:150ms}.blocks g:nth-child(5) path{transition-delay:200ms}.blocks g:nth-child(6) path{transition-delay:250ms}.blocks g:nth-child(7) path{transition-delay:300ms}
.nr-foot .cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:56px}
.nr-foot .col{grid-column:span 2}
.nr-foot .col h2{font-size:1rem;font-weight:700;margin-bottom:.6rem}
.nr-foot .col ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.nr-foot .col a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.nr-foot .col a:hover{text-decoration-color:currentColor}}
.nr-foot .contact{grid-column:9/13;font-size:1.25rem;line-height:1.4}
.nr-foot .contact a{color:var(--gold)}
.nr-foot .last{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:4.5rem;font-size:.875rem;color:var(--muted)}
.nr-foot .last p{max-width:none}
.nr-foot .last .button{min-height:2.75rem;padding:0 1.25rem;font-size:1rem}
@media (max-width:48rem){
  .blocks{flex-direction:column;align-items:flex-start;gap:12px}
  .blocks .wm:first-child{width:100%}
  .blocks .wm:last-child{width:71.2%}
  .nr-foot .col{grid-column:span 6;margin-bottom:1.5rem}
  .nr-foot .contact{grid-column:1/-1}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .nr-hero h1{opacity:0;transform:translateY(24px);animation:rise 1000ms var(--ease-expo) 80ms forwards}
  .js .nr-hero .lede{opacity:0;transform:translateY(18px);animation:rise 900ms var(--ease-expo) 200ms forwards}
  .js .nr-hero .get{opacity:0;transform:translateY(18px);animation:rise 900ms var(--ease-expo) 300ms forwards}
  .js .arch{transform:translateY(14%);animation:settle 1300ms var(--ease-expo) 100ms forwards}
  .js .stage-hero{opacity:0;transform:translateY(-12%);animation:land 900ms var(--ease-back) 520ms forwards}
  .js .stage-coins{opacity:0;transform:scale(.6);animation:pop 600ms var(--ease-back) 900ms forwards}
  .js .peek-minion{transform:translateX(-55%);animation:peek-x 800ms var(--ease-back) 600ms forwards,sway 3.6s ease-in-out 1.6s infinite alternate}
  .js .peek-mage{transform:translate(40%,30%);animation:peek-up 800ms var(--ease-back) 800ms forwards,sway-2 4.2s ease-in-out 1.8s infinite alternate}
  @keyframes settle{to{transform:none}}
  @keyframes land{to{opacity:1;transform:none}}
  @keyframes pop{to{opacity:1;transform:none}}
  @keyframes peek-x{to{transform:none}}
  @keyframes peek-up{to{transform:none}}
  @keyframes sway{from{transform:none}to{transform:rotate(-7deg)}}
  @keyframes sway-2{from{transform:none}to{transform:rotate(6deg) translateY(-3%)}}
  .stage-hero{transition:rotate 420ms var(--ease-back),scale 420ms var(--ease-back)}
  @media (hover:hover) and (pointer:fine){.nr-hero .nr-stage:hover .stage-hero{rotate:-3deg;scale:1.04}}
  @keyframes hop{0%{transform:none}40%{transform:translateY(-5%) rotate(-2deg)}100%{transform:none}}
  .status .dot{animation:blink 2.4s ease-in-out infinite}
  @keyframes blink{50%{opacity:.35}}

  /* the cast arrives with a hop, one after another */
  .js .foe[data-reveal]:not(.is-in){transform:translateY(40px)}
  .js .foe[data-reveal].is-in img{animation:hop 700ms var(--ease-back) calc(var(--i,0) * 90ms + 200ms)}
  .foe-minion{--i:0}.foe-warrior{--i:1}.foe-rogue{--i:2}.foe-mage{--i:3}
  .js .boss[data-reveal]:not(.is-in){transform:translateY(60px) scale(.96)}

  /* the chest wobbles until someone opens it; the drop leaps out */
  .nr-chest[data-r="none"] .chest-btn .shut{transform-origin:50% 100%;animation:wobble 3.2s ease-in-out 1.5s infinite}
  @keyframes wobble{0%,80%,100%{transform:none}84%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}92%{transform:rotate(-2deg)}96%{transform:rotate(1deg)}}
  .drop.is-popping img{animation:drop-out 820ms var(--ease-back) both}
  @keyframes drop-out{0%{transform:translateY(55%) scale(.3) rotate(0);opacity:0}30%{opacity:1}100%{transform:translateY(-8%) scale(1) rotate(-10deg)}}
  .drop:not(.is-popping) img{transform:translateY(-8%) rotate(-10deg)}
  .chest-btn.is-shaking{animation:shake 320ms ease}
  @keyframes shake{25%{transform:rotate(-2deg) scale(1.02)}75%{transform:rotate(2deg) scale(1.02)}}

  .arm-pic img.is-swapping{animation:swap 520ms var(--ease-back)}
  @keyframes swap{0%{transform:translateY(6%) scale(.92);opacity:.2}100%{transform:none;opacity:1}}

  .js .camp-pile[data-reveal] img{transition:transform 700ms var(--ease-back)}
  .js .camp-pile[data-reveal]:not(.is-in) img{transform:translateY(30px) scale(.9)}
  .js .camp-pile[data-reveal]:not(.is-in) .pile-keg{transition-delay:90ms}
  .js .camp-gate[data-reveal]:not(.is-in){transform:translateY(24px) rotate(-8deg)}

  .js .blocks[data-reveal]{opacity:1;transform:none}
  .js .blocks:not(.is-in) path{transform:scaleY(.25)}
}
@media (prefers-reduced-motion:reduce){
  .drop img{transform:translateY(-8%) rotate(-10deg)}
}

/* ---------- Nonstop Realm legal pages: the light touch ---------- */
.nr-band{background:#161a36;color:#f3e7c9;position:relative;overflow:hidden}
.nr-band .band-name{font-family:"Pilcrow Rounded",system-ui,sans-serif;font-weight:700;letter-spacing:-.05em;text-transform:lowercase}
.nr-band::after{content:"";position:absolute;right:var(--margin);bottom:0;width:clamp(5rem,14vw,11rem);aspect-ratio:3/4;border-radius:100vmax 100vmax 0 0;background:#ffc531}
.doc-nr .doc-side h1{font-family:"Pilcrow Rounded",system-ui,sans-serif;text-transform:none;letter-spacing:-.03em;font-weight:700}