/*
 * /play — the motion layer (2026-10): a page-wide atmosphere that changes with the section in view,
 * drifting motes, scroll-linked zoom, reveals, the chapter rail, and the two game-window showcases
 * ("Around the minimap" pinned story, "On your taskbar" horizontal gallery).
 *
 * Every effect reads CSS custom properties that play-fx.js writes (--p = progress 0..1 of a
 * [data-sx] element through the viewport). Without JS, or with reduced motion, the page is a
 * plain stacked page: nothing is hidden, nothing is pinned.
 */

/* ---------- the atmosphere: one fixed layer per mood, cross-faded ---------- */
.pl-atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#060b11}
.pl-atmos i{position:absolute;inset:-10%;opacity:0;transition:opacity 1.4s ease}
.pl-atmos i.on{opacity:1}
.pl-atmos i[data-m="jade"]{background:radial-gradient(60% 55% at 78% 30%,rgba(28,170,160,.18),transparent 70%),radial-gradient(50% 50% at 12% 80%,rgba(20,90,120,.16),transparent 70%)}
.pl-atmos i[data-m="ember"]{background:radial-gradient(55% 50% at 80% 25%,rgba(200,96,32,.17),transparent 70%),radial-gradient(50% 55% at 10% 85%,rgba(150,40,24,.14),transparent 70%),radial-gradient(40% 40% at 50% 50%,rgba(232,170,90,.05),transparent 70%)}
.pl-atmos i[data-m="gold"]{background:radial-gradient(60% 55% at 50% 100%,rgba(214,160,72,.17),transparent 70%),radial-gradient(45% 45% at 88% 12%,rgba(47,200,180,.08),transparent 70%)}
.pl-atmos i[data-m="astral"]{background:radial-gradient(55% 55% at 50% 45%,rgba(70,90,200,.16),transparent 70%),radial-gradient(40% 40% at 85% 15%,rgba(150,90,220,.12),transparent 70%),radial-gradient(40% 40% at 12% 85%,rgba(47,230,192,.07),transparent 70%)}
.pl-atmos i[data-m="violet"]{background:radial-gradient(55% 50% at 85% 70%,rgba(130,70,230,.15),transparent 70%),radial-gradient(45% 45% at 12% 20%,rgba(30,150,180,.12),transparent 70%)}
.pl-atmos i[data-m="azure"]{background:radial-gradient(60% 60% at 50% 45%,rgba(30,120,200,.18),transparent 70%),radial-gradient(40% 40% at 90% 90%,rgba(47,230,192,.08),transparent 70%)}
.pl-atmos i[data-m="crimson"]{background:radial-gradient(55% 50% at 50% 30%,rgba(190,40,48,.16),transparent 70%),radial-gradient(45% 45% at 10% 90%,rgba(232,120,60,.1),transparent 70%)}
.pl-atmos::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
.pl-motes{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}

/* ---------- sections become see-through so the atmosphere reads ---------- */
html.fx{background:#060b11}
html.fx body{background:transparent}
html.fx .pl-armsec{background:linear-gradient(180deg,rgba(4,8,13,0),rgba(3,6,10,.55) 30%,rgba(3,6,10,.55) 70%,rgba(4,8,13,0))}
html.fx .pl-final{background:transparent}
.pl-sec,.pl-prog,.pl-final,.pl-hud,.pl-tools,.pl-marq{isolation:isolate}
.pl-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* ---------- the rune circle (symbol #pl-rune), rotating, zoomed by scroll ---------- */
.pl-rune{position:absolute;width:var(--s,900px);height:var(--s,900px);left:var(--x,50%);top:var(--y,50%);color:#e8c777;opacity:var(--o,.07);
  transform:translate(-50%,-50%) scale(calc(var(--z0,.85) + var(--p,.5) * var(--zk,.35)));will-change:transform}
.pl-rune svg{width:100%;height:100%;display:block;animation:plSpin var(--spin,140s) linear infinite}
.pl-rune.rev svg{animation-direction:reverse}
.pl-rune.jade{color:#2fe6c0}
@keyframes plSpin{to{transform:rotate(360deg)}}

/* ---------- drifting fog ---------- */
.pl-fog{position:absolute;left:-20%;right:-20%;height:60%;opacity:var(--o,.5);filter:blur(30px);
  background:radial-gradient(40% 50% at 25% 50%,rgba(150,220,215,.08),transparent 70%),radial-gradient(35% 45% at 70% 60%,rgba(150,200,230,.07),transparent 70%);
  animation:plFog 38s ease-in-out infinite alternate}
.pl-fog.b{animation-duration:52s;animation-direction:alternate-reverse}
.pl-fog.warm{background:radial-gradient(40% 50% at 25% 50%,rgba(240,170,90,.08),transparent 70%),radial-gradient(35% 45% at 70% 60%,rgba(220,110,60,.07),transparent 70%)}
@keyframes plFog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* ---------- oversized ghost titles behind section heads ---------- */
.pl-ghost{position:absolute;left:50%;top:var(--gy,0);z-index:-1;pointer-events:none;white-space:nowrap;font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(70px,13vw,210px);letter-spacing:.06em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(232,199,119,.11);
  transform:translateX(calc(-50% + (var(--p,.5) - .5) * var(--gx,-160px))) scale(calc(.92 + var(--p,.5) * .16));opacity:calc(.25 + (1 - var(--p,.5)) * .75)}

/* ---------- headings that zoom into place ---------- */
html.fx .pl-zoomhead{transform:scale(calc(1.14 - min(var(--p,1) * 2.6, 1) * .14));opacity:calc(min(var(--p,1) * 3.2, 1));transform-origin:50% 100%}

/* ---------- reveals ---------- */
html.fx [data-rv]{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s;transition-delay:calc(var(--i,0) * 70ms)}
html.fx [data-rv="zoom"]{transform:scale(.9)}
html.fx [data-rv="left"]{transform:translateX(-40px)}
html.fx [data-rv="right"]{transform:translateX(40px)}
html.fx [data-rv].in{opacity:1;transform:none;filter:none}

/* ---------- the chapter rail ---------- */
.pl-rail{position:fixed;right:22px;top:50%;z-index:40;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:14px;opacity:0;transition:opacity .5s}
.pl-rail.on{opacity:1}
.pl-rail::before{content:"";position:absolute;right:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,rgba(232,199,119,.35),transparent)}
.pl-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:12px;cursor:pointer}
.pl-rail a i{width:11px;height:11px;flex:none;transform:rotate(45deg) scale(.6);border:1px solid rgba(232,199,119,.55);background:#0a141c;transition:transform .35s,background .35s,box-shadow .35s}
.pl-rail a span{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#d9b46a;opacity:0;transform:translateX(6px);transition:.3s;white-space:nowrap;text-shadow:0 2px 8px #000}
.pl-rail a:hover span,.pl-rail a.on span{opacity:1;transform:none}
.pl-rail a.on i{transform:rotate(45deg) scale(1);background:#e8c777;box-shadow:0 0 14px rgba(232,199,119,.8)}
.pl-rail a:focus-visible{outline:2px solid #2fe6c0;outline-offset:4px}

/* ---------- hero: the dive ---------- */
html.fx .pl-hero .pl-hero-bg{transform:scale(calc(1.06 + var(--p,0) * .32)) translate3d(var(--mx,0px),calc(var(--my,0px) + var(--p,0) * 60px),0);filter:blur(calc(var(--p,0) * 5px));animation:none;will-change:transform}
html.fx .pl-hero .pl-hero-copy{transform:translateY(calc(var(--p,0) * -90px));opacity:calc(1 - var(--p,0) * 1.5)}
html.fx .pl-hero .pl-live{transform:perspective(900px) rotateX(calc(var(--p,0) * 18deg)) translateY(calc(var(--p,0) * -40px)) scale(calc(1 - var(--p,0) * .08));opacity:calc(1 - var(--p,0) * 1.3)}
.pl-h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.pl-h1 .w>span{display:inline-block}
html.fx .pl-h1 .w>span{transform:translateY(105%);animation:plRise 1s cubic-bezier(.2,.75,.15,1) forwards;animation-delay:calc(.15s + var(--i,0) * 90ms)}
@keyframes plRise{to{transform:none}}
.pl-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9.5px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:#d9b46a;opacity:calc(1 - var(--p,0) * 4)}
.pl-cue i{position:relative;width:1px;height:46px;background:linear-gradient(180deg,rgba(232,199,119,.7),transparent);overflow:hidden}
.pl-cue i::after{content:"";position:absolute;left:-2px;top:-10px;width:5px;height:10px;border-radius:3px;background:#f3d98d;box-shadow:0 0 10px #f3d98d;animation:plCue 2.2s ease-in-out infinite}
@keyframes plCue{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(60px);opacity:0}}

/* ---------- the systems marquee (moves with the scroll, flips with its direction) ---------- */
.pl-marq{position:relative;overflow:hidden;padding:26px 0;border-top:1px solid rgba(232,199,119,.12);border-bottom:1px solid rgba(232,199,119,.12);background:linear-gradient(90deg,rgba(6,11,17,.9),rgba(10,18,26,.6) 50%,rgba(6,11,17,.9))}
.pl-marq-row{display:flex;width:max-content;gap:0;will-change:transform}
.pl-marq-row span{display:inline-flex;align-items:center;gap:30px;padding-right:30px;font-family:'Cinzel',serif;font-weight:800;font-size:clamp(22px,3.2vw,40px);letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px rgba(232,199,119,.5);white-space:nowrap}
.pl-marq-row span b{color:#eafdfb;-webkit-text-stroke:0;font-weight:800}
.pl-marq-row span i{width:10px;height:10px;transform:rotate(45deg);background:#2fe6c0;box-shadow:0 0 12px #2fe6c0;flex:none}
.pl-marq::before,.pl-marq::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.pl-marq::before{left:0;background:linear-gradient(90deg,#060b11,transparent)}
.pl-marq::after{right:0;background:linear-gradient(270deg,#060b11,transparent)}

/* ---------- systems explorer: the chosen dungeon's art bleeds into the room ---------- */
.pl-amb{position:absolute;inset:-8%;z-index:-1;pointer-events:none;opacity:.0;transition:opacity 1s;background-size:cover;background-position:center;filter:blur(60px) saturate(1.3)}
.pl-amb.on{opacity:.32}
.pl-lensec .pl-sys{z-index:1}

/* ---------- Armory: the stage opens up as it arrives ---------- */
html.fx .pl-armsec .pl-arm{transform:scale(calc(.86 + min(var(--p,1) * 1.6, 1) * .14));opacity:calc(.3 + min(var(--p,1) * 1.6, 1) * .7);transform-origin:50% 0}
.pl-nebula{position:absolute;inset:-10%;opacity:.55;background:radial-gradient(30% 25% at 30% 40%,rgba(90,110,230,.18),transparent 70%),radial-gradient(25% 30% at 70% 60%,rgba(150,90,220,.14),transparent 70%),radial-gradient(20% 20% at 55% 25%,rgba(47,230,192,.1),transparent 70%);animation:plNeb 40s ease-in-out infinite alternate}
@keyframes plNeb{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(4deg) scale(1.12)}}

/* ---------- steps: the path fills as you scroll ---------- */
html.fx .pl-steps::before{background:linear-gradient(90deg,transparent,rgba(232,199,119,.18) 15%,rgba(47,230,192,.18) 85%,transparent)}
.pl-steps-fill{position:absolute;left:12%;right:12%;top:58px;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--f,0));
  background:linear-gradient(90deg,#e8c777,#2fe6c0);box-shadow:0 0 14px rgba(47,230,192,.7)}
.pl-steps-fill::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#eafffb;box-shadow:0 0 16px 4px rgba(47,230,192,.9);opacity:calc(var(--f,0) * 10)}
.pl-steps .pl-card.lit{border-color:rgba(232,199,119,.5);box-shadow:0 26px 60px rgba(0,0,0,.45),0 0 40px rgba(232,199,119,.1)}
.pl-steps .pl-card .pl-step-no{transition:filter .5s}
.pl-steps .pl-card.lit .pl-step-no{filter:drop-shadow(0 0 18px rgba(232,199,119,.7))}
@media(max-width:980px){.pl-steps-fill{display:none}}

/* ---------- cards: a light that follows the pointer ---------- */
[data-spot]{--mx:50%;--my:-20%}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(232,199,119,.13),transparent 60%)}
[data-spot]:hover::after{opacity:1}

/* ---------- languages: the earth turns and comes closer ---------- */
html.fx .pl-langsec .pl-lang-bg{transform:scale(calc(1.32 - var(--p,.5) * .3)) rotate(calc((var(--p,.5) - .5) * 8deg));opacity:.42;will-change:transform}
.pl-orbit{position:absolute;left:50%;top:50%;width:min(1100px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(127,233,214,.12);animation:plSpin 120s linear infinite}
.pl-orbit::before{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#7fe9d6;box-shadow:0 0 18px #7fe9d6}
.pl-orbit.b{width:min(800px,110vw);border-color:rgba(232,199,119,.1);animation-duration:80s;animation-direction:reverse}
.pl-orbit.b::before{background:#e8c777;box-shadow:0 0 18px #e8c777}

/* ---------- final: the summoning circle ---------- */
.pl-final .pl-deco .pl-rune{--s:min(1200px,160vw);--y:38%;--o:.16;--z0:.6;--zk:.6}
.pl-embers{position:absolute;left:0;right:0;bottom:0;height:70%;background-image:radial-gradient(2px 2px at 10% 90%,#ffb35c,transparent),radial-gradient(1.5px 1.5px at 30% 80%,#ffd27a,transparent),radial-gradient(2px 2px at 55% 95%,#ff9a4a,transparent),radial-gradient(1.5px 1.5px at 75% 85%,#ffd27a,transparent),radial-gradient(2px 2px at 90% 92%,#ffb35c,transparent);background-size:340px 260px;animation:plEmber 9s linear infinite;opacity:.5;-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
@keyframes plEmber{from{background-position:0 0}to{background-position:60px -260px}}

/* ====================================================================================
   "Around the minimap" — the ring, pinned; each scroll step opens one window
   ==================================================================================== */
.pl-hud{position:relative;padding:90px 0 0}
.pl-hud-track{position:relative}
.pl-hud-pin{position:relative}
.pl-hud-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:56px;align-items:center;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.pl-ringwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.pl-ring{position:relative;width:min(400px,80vw);aspect-ratio:1}
.pl-ring-map{position:absolute;inset:11%;border-radius:50%;overflow:hidden;background:#0b1712;box-shadow:inset 0 0 50px rgba(0,0,0,.8)}
.pl-ring-map img{width:100%;height:100%;object-fit:cover;opacity:.85;filter:saturate(.85) contrast(1.05);transform:scale(1.15);animation:plMapDrift 30s ease-in-out infinite alternate}
@keyframes plMapDrift{from{transform:scale(1.15) translate(-3%,-2%)}to{transform:scale(1.2) translate(3%,2%)}}
.pl-ring-map::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(47,230,192,.0) 0deg,rgba(47,230,192,.22) 30deg,rgba(47,230,192,0) 60deg);animation:plSpin 6s linear infinite;mix-blend-mode:screen}
.pl-ring-me{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;z-index:2;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(47,230,192,.45),0 0 16px #2fe6c0;animation:pulseDot 2.2s infinite}
.pl-ring-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.pl-ring-btn{position:absolute;z-index:3;width:var(--w,12%);height:var(--h,12%);left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.pl-ring-btn img{width:100%;height:100%;display:block;image-rendering:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.pl-ring-btn::before{content:"";position:absolute;inset:-22%;border-radius:50%;border:2px solid rgba(47,230,192,.0);transition:.35s}
.pl-ring-btn:hover{transform:translate(-50%,-50%) scale(1.12)}
.pl-ring-btn.on{transform:translate(-50%,-50%) scale(1.28);filter:brightness(1.18)}
.pl-ring-btn.on::before{border-color:rgba(47,230,192,.85);box-shadow:0 0 22px rgba(47,230,192,.65),inset 0 0 12px rgba(47,230,192,.4);animation:plPing 1.8s ease-out infinite}
.pl-ring-btn.dim{filter:grayscale(.4) brightness(.75)}
.pl-ring-btn:focus-visible{outline:2px solid #2fe6c0;outline-offset:3px}
@keyframes plPing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.pl-ring-fallback{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 20deg,#6b5530,#e8c777 12%,#7a5f30 25%,#d9b46a 40%,#5d4a2a 55%,#e8c777 70%,#6b5530 85%,#c9a24a);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 64%,transparent 65%);mask:radial-gradient(circle,transparent 58%,#000 59%,#000 64%,transparent 65%)}
.pl-ring-glow{position:absolute;inset:-18%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(47,230,192,.22),transparent 72%);filter:blur(10px)}
.pl-ring-label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#7fa6b1}
.pl-ring-label b{font-family:'Cinzel',serif;font-size:22px;letter-spacing:.04em;color:#eafdfb;text-transform:none}
.pl-ring-prog{width:170px;height:2px;background:rgba(127,166,177,.2);border-radius:2px;overflow:hidden}
.pl-ring-prog i{display:block;height:100%;width:calc(var(--k,0) * 100%);background:linear-gradient(90deg,#e8c777,#2fe6c0);transition:width .5s}

.pl-hud-stage{position:relative;min-height:min(80vh,720px);perspective:1600px}
.pl-hud-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;pointer-events:none}
.pl-hud-step.on{pointer-events:auto}
.pl-win{position:relative;margin:0;align-self:flex-start;max-width:100%}
.pl-win img{display:block;max-width:100%;height:auto;max-height:min(52vh,480px);width:auto;border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(232,199,119,.12)}
.pl-win::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(47,230,192,.16),transparent 75%);filter:blur(20px)}
.pl-win::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 48%,transparent 60%);background-size:250% 100%;background-position:120% 0}
.pl-hud-step.on .pl-win::after{animation:plGlint 1.6s .35s ease-out}
@keyframes plGlint{to{background-position:-120% 0}}
.pl-cap{max-width:560px}
.pl-cap-k{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#2fe6c0}
.pl-cap-k img{width:22px;height:22px}
.pl-cap h3{margin:8px 0 8px;font-family:'Cinzel',serif;font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.1;background:linear-gradient(180deg,#fff6de,#f0d38a 55%,#b58a43);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-cap p{margin:0;font-size:14.5px;line-height:1.65;color:#a9c7cf}
.pl-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pl-facts span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:30px;font-size:11.5px;font-weight:700;color:#dff2ee;background:rgba(10,22,30,.72);border:1px solid rgba(232,199,119,.22)}
.pl-facts span::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:#e8c777;box-shadow:0 0 6px #e8c777}

/* desktop: pinned, one window at a time, coming out of its button */
@media (min-width:981px){
  html.fx:not(.fx-rm) .pl-hud-track{height:calc(var(--n,7) * 62vh + 100vh)}
  html.fx:not(.fx-rm) .pl-hud-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  html.fx:not(.fx-rm) .pl-hud-grid{width:100%}
  html.fx:not(.fx-rm) .pl-hud-step .pl-win,html.fx:not(.fx-rm) .pl-hud-step .pl-cap{opacity:0;transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.15,1),filter .6s}
  html.fx:not(.fx-rm) .pl-hud-step .pl-win{transform:translate(var(--fx,-260px),var(--fy,0px)) scale(.22) rotateY(-24deg);filter:blur(10px)}
  html.fx:not(.fx-rm) .pl-hud-step .pl-cap{transform:translateY(24px)}
  html.fx:not(.fx-rm) .pl-hud-step.on .pl-win{opacity:1;transform:none;filter:none;transition-delay:.05s}
  html.fx:not(.fx-rm) .pl-hud-step.on .pl-cap{opacity:1;transform:none;transition-delay:.28s}
  html.fx:not(.fx-rm) .pl-hud-step.was .pl-win{transform:translateY(-30px) scale(1.04);filter:blur(8px)}
  .pl-beam{position:absolute;z-index:4;height:2px;transform-origin:0 50%;pointer-events:none;background:linear-gradient(90deg,rgba(234,255,251,.95),rgba(47,230,192,.6) 40%,transparent);box-shadow:0 0 12px rgba(47,230,192,.8);opacity:0}
  .pl-beam.go{animation:plBeam .75s cubic-bezier(.2,.8,.2,1)}
  @keyframes plBeam{0%{opacity:1;clip-path:inset(0 100% 0 0)}55%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 70%)}}
}
/* no pin (phones, reduced motion, no JS): the windows simply follow one another */
@media (max-width:980px){
  .pl-hud{padding-top:70px}
  .pl-hud-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .pl-ring{width:min(260px,66vw)}
  .pl-ring-label{display:none}
  .pl-hud-stage{min-height:0;display:flex;flex-direction:column;gap:56px;padding-bottom:40px}
  .pl-hud-step{position:relative;inset:auto;pointer-events:auto}
  .pl-win img{max-height:none;width:100%}
  .pl-beam{display:none}
}
html.fx-rm .pl-hud-stage,html:not(.fx) .pl-hud-stage{min-height:0;display:flex;flex-direction:column;gap:56px}
html.fx-rm .pl-hud-step,html:not(.fx) .pl-hud-step{position:relative;inset:auto;pointer-events:auto}

/* ====================================================================================
   "On your taskbar" — a horizontal gallery the scroll drives, over the real taskbar
   ==================================================================================== */
.pl-tools{position:relative;padding:90px 0 0}
.pl-tools-track{position:relative}
.pl-tools-pin{position:relative;display:flex;flex-direction:column;justify-content:center;gap:28px;overflow:hidden}
.pl-tools-rail{display:flex;gap:44px;padding:10px max(18px,calc(50% - min(300px,39vw))) 10px;will-change:transform}
.pl-tool{flex:none;width:min(600px,78vw);display:flex;flex-direction:column;gap:18px;opacity:.38;transform:scale(.92);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.6)}
.pl-tool.on{opacity:1;transform:none;filter:none}
.pl-tool-win{position:relative;border-radius:8px;display:flex;align-items:center;justify-content:center;aspect-ratio:716/508;background:radial-gradient(closest-side,rgba(232,199,119,.1),transparent 80%)}
.pl-tool-win img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,199,119,.1)}
.pl-tool.on .pl-tool-win::after{content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:24px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,199,119,.35),transparent);filter:blur(6px)}
.pl-tool-cap{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.pl-tool-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 38%,#26313a,#070c11 72%);box-shadow:0 0 0 1px rgba(217,180,106,.55),0 0 0 4px rgba(7,16,25,.9),0 0 0 5px rgba(232,199,119,.2)}
.pl-tool-ic img{width:32px;height:32px}
.pl-tool-cap h3{margin:2px 0 6px;font-family:'Cinzel',serif;font-size:22px;font-weight:800;color:#f3e2b4;line-height:1.15}
.pl-tool-cap p{margin:0;font-size:13.5px;line-height:1.6;color:#a9c7cf}

.pl-taskbar{position:relative;align-self:center;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 16px;max-width:100%}
.pl-tb-row{position:relative;display:flex;gap:5px;padding:7px 9px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#26221b,#14110d);box-shadow:inset 0 1px 0 rgba(255,230,170,.18),0 0 0 1px #3d3324,0 -10px 30px rgba(0,0,0,.4);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pl-tb-row::-webkit-scrollbar{display:none}
.pl-tb-btn{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:transform .3s,filter .3s}
.pl-tb-btn img{width:100%;height:100%;display:block}
.pl-tb-btn.classic{cursor:default;filter:saturate(.7) brightness(.8)}
.pl-tb-btn:not(.classic):hover{transform:translateY(-3px)}
.pl-tb-btn.on{transform:translateY(-5px) scale(1.08);filter:brightness(1.2) drop-shadow(0 0 10px rgba(232,199,119,.85))}
.pl-tb-btn.on::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;transform:rotate(45deg);background:#f3d98d;box-shadow:0 0 8px #f3d98d}
.pl-tb-btn:focus-visible{outline:2px solid #2fe6c0;outline-offset:2px}
.pl-tb-sep{flex:none;width:1px;margin:4px 4px;background:linear-gradient(180deg,transparent,rgba(232,199,119,.4),transparent)}
.pl-tb-bar{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#0e0d0b,#050505);box-shadow:0 0 0 1px #2c2519,0 18px 40px rgba(0,0,0,.6)}
.pl-tb-shop{position:relative;width:40px;height:40px;margin:-12px 10px -6px 0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:0 0 0 2px #2c2519,0 0 18px rgba(232,199,119,.25)}
.pl-coin{display:block;width:40px;height:40px;border-radius:50%;background-size:640px 40px;background-repeat:no-repeat;animation:plCoin 1.5s steps(16) infinite}
@keyframes plCoin{from{background-position:0 0}to{background-position:-640px 0}}
html.fx-rm .pl-coin{animation:none;background-position:-280px 0}
.pl-tb-shop.on{filter:brightness(1.25) drop-shadow(0 0 10px rgba(232,199,119,.9))}
.pl-tb-slot{width:30px;height:30px;border-radius:3px;background:linear-gradient(180deg,#191714,#0b0a09);box-shadow:inset 0 0 0 1px #3a3122;font-size:9px;font-weight:700;color:#8c7a58;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 3px}
.pl-tb-hint{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7fa6b1}
.pl-tb-tip{position:absolute;bottom:calc(100% + 12px);left:var(--tx,50%);transform:translateX(-50%);padding:6px 11px;border-radius:5px;background:#0b0a08;border:1px solid #5d4a2a;font-size:12px;font-weight:700;color:#f3e2b4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.pl-tb-tip.on{opacity:1}
.pl-tools-count{position:absolute;right:clamp(18px,6vw,90px);bottom:clamp(24px,6vh,60px);font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:#d9b46a;letter-spacing:.14em}

@media (min-width:981px){
  html.fx:not(.fx-rm) .pl-tools-track{height:calc(var(--len,4000px) + 100vh)}
  html.fx:not(.fx-rm) .pl-tools-pin{position:sticky;top:0;height:100vh}
  html.fx:not(.fx-rm) .pl-tools-rail{transform:translate3d(calc(var(--tx,0) * -1px),0,0)}
}
@media (max-width:980px){
  .pl-tools-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:20px;padding-left:8vw;padding-right:8vw}
  .pl-tools-rail::-webkit-scrollbar{display:none}
  .pl-tool{scroll-snap-align:center;width:84vw}
  .pl-tb-btn{width:36px;height:36px}
  .pl-tb-bar{display:none}
  .pl-tb-row{border-radius:6px}
  .pl-tools-count{display:none}
}
html.fx-rm .pl-tools-rail,html:not(.fx) .pl-tools-rail{overflow-x:auto;scroll-snap-type:x mandatory}
html.fx-rm .pl-tool,html:not(.fx) .pl-tool{scroll-snap-align:center}

/* ---------- calm (fx-rm: the OS asks for less motion, or the viewer chose it): still, nothing hidden; fades stay ---------- */
html.fx-rm :is(.pl-rune svg,.pl-fog,.pl-nebula,.pl-orbit,.pl-embers,.pl-ring-map img,.pl-ring-map::after,.pl-ring-btn.on::before,.pl-cue i::after,.pl-ring-me,.pl-coin){animation:none!important}
html.fx-rm .pl-h1 .w>span{transform:none;animation:none}
html.fx-rm [data-rv],html.fx-rm [data-rv="tilt"]{transform:none;filter:none}
html.fx-rm :is(.pl-zoomhead,.pl-ghost,.pl-rune,.pl-hero .pl-hero-bg,.pl-hero .pl-hero-copy,.pl-hero .pl-live,.pl-armsec .pl-arm,.pl-langsec .pl-lang-bg){transform:none!important;filter:none!important}
html.fx-rm .pl-rune{transform:translate(-50%,-50%)!important}
html.fx-rm .pl-zoomhead,html.fx-rm .pl-hero .pl-hero-copy,html.fx-rm .pl-hero .pl-live,html.fx-rm .pl-armsec .pl-arm{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  html:not(.fx) :is(.pl-rune svg,.pl-fog,.pl-nebula,.pl-orbit,.pl-embers,.pl-ring-map img,.pl-ring-map::after,.pl-ring-btn.on::before,.pl-cue i::after,.pl-coin){animation:none!important}
}
/* the page's Effects switch (in the chapter rail and the footer) */
.pl-motion{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:30px;border:1px solid rgba(232,199,119,.3);background:rgba(8,14,20,.8);color:#d9b46a;font:800 10px/1 'Manrope',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s}
.pl-motion:hover{border-color:rgba(232,199,119,.65);background:rgba(30,30,24,.9)}
.pl-motion b{color:#eafdfb;font-weight:800}
.pl-motion i{width:7px;height:7px;transform:rotate(45deg);background:#2fe6c0;box-shadow:0 0 8px #2fe6c0}
html.fx-rm .pl-motion i{background:#7fa6b1;box-shadow:none}
.pl-rail .pl-motion{margin-top:10px;align-self:flex-end}
.pl-motion:focus-visible{outline:2px solid #2fe6c0;outline-offset:3px}
@media (max-width:980px){.pl-rail{display:none}.pl-ghost{display:none}}
.pl-off .pl-rune svg,.pl-off .pl-fog,.pl-off .pl-nebula,.pl-off .pl-orbit,.pl-off .pl-embers,.pl-off .pl-ring-map img,.pl-off .pl-ring-map::after,.pl-off .pl-armsky,.pl-off .pl-armrays::before,.pl-off .pl-armrays::after{animation-play-state:paused}

/* ====================================================================================
   "Rebuilt from top to bottom" — a bento of the other rebuilt windows, tilting into place
   ==================================================================================== */
.pl-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;max-width:1180px;margin:0 auto;perspective:1400px}
.pl-bt{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:22px 22px 0;border-radius:20px;border:1px solid rgba(232,199,119,.16);
  background:linear-gradient(165deg,rgba(26,30,30,.86),rgba(8,13,19,.94));box-shadow:0 26px 60px rgba(0,0,0,.4);transition:border-color .35s,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pl-bt::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,199,119,.7),transparent)}
.pl-bt:hover{border-color:rgba(232,199,119,.4);box-shadow:0 34px 80px rgba(0,0,0,.5),0 0 40px rgba(232,199,119,.06)}
.pl-bt.b-wide{grid-column:span 8;grid-row:span 2}
.pl-bt.b-tall{grid-column:span 4;grid-row:span 2}
.pl-bt.b-third{grid-column:span 4}
.pl-bt-cap h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:'Cinzel',serif;font-size:20px;font-weight:800;color:#f3e2b4}
.pl-bt-cap kbd{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#04141e;background:linear-gradient(180deg,#f3e2b4,#c9a24a);border-radius:5px;padding:2px 7px;box-shadow:0 2px 0 #6b5530}
.pl-bt-cap p{margin:0;font-size:13px;line-height:1.55;color:#a9c7cf;max-width:52ch}
.pl-bt-img{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;margin:0 -4px}
.pl-bt-img img{display:block;max-width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);transform:translateY(8px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pl-bt:hover .pl-bt-img img{transform:translateY(0) scale(1.02)}
.pl-bt.b-tall .pl-bt-img img{max-width:88%}
html.fx [data-rv="tilt"]{transform:rotateX(16deg) translateY(60px) scale(.96);transform-origin:50% 100%}
html.fx [data-rv="tilt"].in{transform:none}
@media(max-width:980px){
  .pl-bt.b-wide,.pl-bt.b-tall{grid-column:span 12;grid-row:auto}
  .pl-bt.b-third{grid-column:span 6}
}
@media(max-width:640px){.pl-bt.b-third{grid-column:span 12}}
/* calm or no JS on a wide screen: the windows follow one another and the ring stays beside them */
@media (min-width:981px){
  html.fx-rm .pl-hud-grid,html:not(.fx) .pl-hud-grid{align-items:start}
  html.fx-rm .pl-ringwrap,html:not(.fx) .pl-ringwrap{position:sticky;top:14vh}
}