/* Jason's Place premium storybook layer (GENERAL SUPERGROK 2026-10-06).
   Warm storybook night: plum dusk, teal, rose and lantern light. Never black-and-gold, never TOWNLINE.
   Shared by the landing page (/jasons-place/) and Play World (/jasons-place/play/). */
:root{
  --jp-night:#1d1335;--jp-dusk:#2e1f55;--jp-plum:#4a2a6e;--jp-teal:#1f5f6b;--jp-sea:#2b8f93;
  --jp-rose:#e46b86;--jp-coral:#f08a6c;--jp-peach:#ffc9a3;--jp-cream:#fff6e4;--jp-paper:#fffaf0;
  --jp-lamp:#ffd99a;--jp-ink:#2a2233;--jp-mute:#d2c7e6;
  --jp-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --jp-sans:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;
  --jp-ease:cubic-bezier(.2,.8,.2,1);--jp-pop:cubic-bezier(.34,1.56,.64,1);
}
.jpx{margin:0;background:var(--jp-night);color:var(--jp-cream);font:16px/1.55 var(--jp-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.jpx *,.jpx *::before,.jpx *::after{box-sizing:border-box}
.jpx img{max-width:100%;display:block}
.jpx a{color:inherit}
.jpx-wrap{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.jpx-skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--jp-cream);color:var(--jp-ink);padding:10px 14px;border-radius:12px}
.jpx-skip:focus{left:12px}

/* ---------- top bar ---------- */
.jpx-bar{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;transition:background .35s,box-shadow .35s}
.jpx-bar.solid{background:linear-gradient(180deg,rgba(29,19,53,.94),rgba(29,19,53,.8));-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 10px 30px rgba(10,4,24,.35)}
.jpx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.jpx-brand img{width:38px;height:38px;filter:drop-shadow(0 4px 12px rgba(255,190,140,.45))}
.jpx-brand b{display:block;font:700 19px/1 var(--jp-serif);letter-spacing:.02em;white-space:nowrap}
.jpx-brand small{display:block;margin-top:3px;font:800 9px/1.3 var(--jp-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--jp-peach);white-space:nowrap}
.jpx-bar nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.jpx-bar nav a.jpx-link{padding:10px 12px;border-radius:999px;text-decoration:none;font:800 13px var(--jp-sans);letter-spacing:.02em;color:var(--jp-cream);opacity:.92}
.jpx-bar nav a.jpx-link:hover{background:rgba(255,246,228,.1);opacity:1}
@media(max-width:900px){.jpx-bar nav a.jpx-link{display:none}}
@media(max-width:380px){.jpx-brand small{display:none}}

/* ---------- buttons ---------- */
.jpx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 24px;border:0;border-radius:999px;font:900 15px/1 var(--jp-sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff9a76 0%,#e8678a 55%,#b65ab8 100%);box-shadow:0 12px 30px rgba(228,107,134,.45),inset 0 1px 0 rgba(255,255,255,.45);overflow:hidden;isolation:isolate;transition:transform .25s var(--jp-pop),box-shadow .25s}
.jpx-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);animation:jpxSheen 5s ease-in-out infinite 1.5s}
.jpx-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 40px rgba(228,107,134,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.jpx-btn:active{transform:scale(.97)}
.jpx-btn.alt{color:#2b1f55;background:linear-gradient(135deg,#fff6e4,#ffe2c4);box-shadow:0 10px 26px rgba(255,201,163,.3),inset 0 1px 0 #fff}
.jpx-btn.teal{background:linear-gradient(135deg,#3bb3a8,#1f6f7d);box-shadow:0 12px 30px rgba(43,143,147,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.jpx-btn.sm{min-height:42px;padding:10px 16px;font-size:13px}
.jpx a:focus-visible,.jpx button:focus-visible{outline:3px solid var(--jp-lamp);outline-offset:3px}
@keyframes jpxSheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* ---------- section heads ---------- */
.jpx-sec{position:relative;padding:76px 0}
.jpx-eyebrow{display:inline-flex;align-items:center;gap:8px;font:900 11px/1 var(--jp-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--jp-peach)}
.jpx-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--jp-coral),var(--jp-rose))}
.jpx-h2{margin:12px 0 10px;font:700 clamp(32px,6.4vw,58px)/1.04 var(--jp-serif);letter-spacing:-.01em;color:var(--jp-cream);text-wrap:balance}
.jpx-h2 em{font-style:italic;background:linear-gradient(90deg,var(--jp-peach),var(--jp-rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.jpx-lead{max-width:640px;margin:0;color:var(--jp-mute);font-size:17px}
.jpx-head{margin-bottom:26px}
.jpx-head.center{text-align:center}.jpx-head.center .jpx-lead{margin-inline:auto}

/* sky backdrops */
.jpx-sky{background:radial-gradient(1200px 600px at 85% -10%,rgba(228,107,134,.22),transparent 60%),radial-gradient(900px 500px at 0% 20%,rgba(43,143,147,.22),transparent 60%),linear-gradient(180deg,#1d1335 0%,#2a1a4d 100%)}
.jpx-dawn{background:radial-gradient(900px 500px at 10% 0%,rgba(255,201,163,.2),transparent 60%),radial-gradient(900px 600px at 100% 100%,rgba(43,143,147,.25),transparent 60%),linear-gradient(180deg,#2a1a4d 0%,#3a2160 55%,#2b1f55 100%)}
.jpx-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 32% 68%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 58% 14%,#ffe9c799 50%,transparent 51%),radial-gradient(1px 1px at 78% 44%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 90% 80%,#ffd99a88 50%,transparent 51%),radial-gradient(1px 1px at 22% 88%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 46% 40%,#fff5 50%,transparent 51%);opacity:.8}
.jpx-sec>.jpx-wrap{position:relative}

/* ---------- reveal ---------- */
.jpx-rv{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .8s var(--jp-ease),transform .8s var(--jp-ease);transition-delay:calc(var(--i,0)*70ms)}
.jpx-rv.in{opacity:1;transform:none}
.jpx-norv .jpx-rv{opacity:1;transform:none}

/* ---------- picture cards / swipe rail ---------- */
.jpx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,340px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 18px 22px;margin:0 -18px;scroll-padding-inline:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jpx-rail::-webkit-scrollbar{display:none}
.jpx-rail>*{scroll-snap-align:start}
@media(min-width:900px){.jpx-rail.desk-grid{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:6px 0 10px}.jpx-rail.desk-grid.four{grid-template-columns:repeat(4,1fr)}}
.jpx-card{position:relative;display:block;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--jp-cream);background:#2a1c48;box-shadow:0 22px 50px rgba(8,3,22,.5),0 0 0 1px rgba(255,217,154,.14) inset;transform:translateZ(0);transition:transform .45s var(--jp-ease),box-shadow .45s}
.jpx-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--jp-ease)}
.jpx-card .cap{position:absolute;inset:auto 0 0;padding:56px 18px 18px;background:linear-gradient(180deg,transparent,rgba(24,12,44,.74) 42%,rgba(24,12,44,.95))}
.jpx-card .cap small{display:block;font:900 10px/1.2 var(--jp-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--jp-peach)}
.jpx-card .cap b{display:block;margin:6px 0 4px;font:700 24px/1.1 var(--jp-serif)}
.jpx-card .cap span{display:block;font-size:14px;color:#ece4f7}
.jpx-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(8,3,22,.6),0 0 0 1px rgba(255,217,154,.35) inset,0 0 40px rgba(255,170,140,.18)}
.jpx-card:hover img{transform:scale(1.06)}
.jpx-card:active{transform:scale(.98)}
.jpx-card.tall img{aspect-ratio:4/5}

/* ---------- character cards ---------- */
.jpx-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(min-width:1000px){.jpx-cast.six{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.jpx-cast{grid-template-columns:repeat(2,1fr);gap:12px}}
.jpx-char{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 12px;border:0;border-radius:28px;color:var(--jp-cream);font:inherit;text-decoration:none;cursor:pointer;background:radial-gradient(120% 80% at 50% 0%,rgba(255,217,154,.18),transparent 60%),linear-gradient(160deg,#3b2766,#24184a);box-shadow:0 18px 40px rgba(8,3,22,.45),0 0 0 1px rgba(255,217,154,.14) inset;transition:transform .35s var(--jp-pop),box-shadow .35s,background .35s}
.jpx-char .ph{position:relative;width:min(132px,100%);aspect-ratio:1;border-radius:50%;padding:4px;background:conic-gradient(from 200deg,#ffc9a3,#e46b86,#7c5cd6,#2b8f93,#ffc9a3);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.jpx-char .ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#2a1c48}
.jpx-char b{margin-top:10px;font:700 21px/1.1 var(--jp-serif)}
.jpx-char em{font-style:normal;font:800 11px/1.2 var(--jp-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jp-peach)}
.jpx-char span{font-size:14px;line-height:1.35;color:#e4daf2}
.jpx-char:hover{transform:translateY(-5px)}
.jpx-char[aria-pressed="true"]{box-shadow:0 0 0 2px var(--jp-lamp) inset,0 0 0 6px rgba(255,217,154,.18),0 20px 60px rgba(255,170,140,.35);background:radial-gradient(120% 90% at 50% 0%,rgba(255,217,154,.38),transparent 62%),linear-gradient(160deg,#5a3a8a,#2c1c58)}
.jpx-char[aria-pressed="true"] .ph{animation:jpxHalo 2.4s ease-in-out infinite}
.jpx-char.tap{animation:jpxBoing .55s var(--jp-pop)}
.jpx-char .pick{position:absolute;top:12px;right:12px;padding:5px 9px;border-radius:999px;background:var(--jp-lamp);color:#2b1f55;font:900 10px var(--jp-sans);letter-spacing:.1em;opacity:0;transform:scale(.6);transition:.3s var(--jp-pop)}
.jpx-char[aria-pressed="true"] .pick{opacity:1;transform:none}
@keyframes jpxHalo{50%{box-shadow:0 0 0 6px rgba(255,217,154,.25),0 0 36px rgba(255,190,140,.55)}}
@keyframes jpxBoing{0%{transform:scale(1)}30%{transform:scale(.92) rotate(-2deg)}60%{transform:scale(1.06) rotate(1.5deg)}100%{transform:scale(1)}}

/* ---------- game cards ---------- */
.jpx-game{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;color:var(--jp-cream);background:linear-gradient(180deg,#33225c,#24184a);box-shadow:0 22px 50px rgba(8,3,22,.5),0 0 0 1px rgba(255,217,154,.14) inset;transition:transform .45s var(--jp-ease),box-shadow .45s}
.jpx-game .art{position:relative;overflow:hidden}
.jpx-game .art img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.1s var(--jp-ease)}
.jpx-game .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#30205a)}
.jpx-game .tag{position:absolute;top:12px;left:12px;z-index:2;padding:6px 10px;border-radius:999px;font:900 10px var(--jp-sans);letter-spacing:.14em;color:#fff;background:linear-gradient(135deg,#ff9a76,#e8678a);box-shadow:0 6px 16px rgba(228,107,134,.45)}
.jpx-game .body{display:flex;flex-direction:column;flex:1;padding:4px 18px 18px}
.jpx-game h3{margin:0 0 6px;font:700 22px/1.15 var(--jp-serif)}
.jpx-game p{margin:0 0 12px;color:#e0d6ef;font-size:14.5px}
.jpx-game .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.jpx-game .meta span{padding:6px 10px;border-radius:999px;background:rgba(255,246,228,.1);font:800 11px var(--jp-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jp-peach)}
.jpx-game:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(8,3,22,.6),0 0 0 1px rgba(255,217,154,.35) inset}
.jpx-game:hover .art img{transform:scale(1.06)}
.jpx-games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.jpx-games{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.jpx-games{grid-template-columns:1fr}}

/* ---------- age doors ---------- */
.jpx-doors{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.jpx-doors{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.jpx-doors{grid-template-columns:1fr 1fr;gap:12px}}
.jpx-door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:18px 14px 16px;border-radius:999px 999px 24px 24px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;box-shadow:0 22px 50px rgba(8,3,22,.5),0 0 0 3px rgba(255,217,154,.22) inset;transition:transform .45s var(--jp-ease),box-shadow .45s}
.jpx-door img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--jp-ease)}
.jpx-door::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(29,19,53,0) 25%,rgba(29,19,53,.62) 58%,rgba(22,12,40,.95))}
.jpx-door::after{content:"";position:absolute;inset:8px;border-radius:999px 999px 18px 18px;border:1.5px solid rgba(255,217,154,.38);pointer-events:none}
.jpx-door b{font:700 22px/1.1 var(--jp-serif);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.jpx-door span{margin-top:6px;font-size:13px;line-height:1.35;color:#f6f0ff;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.jpx-door:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(8,3,22,.6),0 0 0 3px rgba(255,217,154,.5) inset,0 0 40px rgba(255,170,140,.2)}
.jpx-door:hover img{transform:scale(1.07)}
.jpx-door.wide{grid-column:span 2;border-radius:200px 200px 24px 24px}
.jpx-door.wide::after{border-radius:192px 192px 18px 18px}
@media(max-width:640px){.jpx-door{min-height:230px}.jpx-door b{font-size:20px}.jpx-door.wide-sm{grid-column:span 2;border-radius:200px 200px 24px 24px}.jpx-door.wide-sm::after{border-radius:192px 192px 18px 18px}}

/* ---------- glass panels ---------- */
.jpx-glass{border-radius:28px;background:linear-gradient(160deg,rgba(255,246,228,.12),rgba(255,246,228,.04));box-shadow:0 0 0 1px rgba(255,217,154,.16) inset,0 24px 60px rgba(8,3,22,.4)}

/* ---------- sparkles ---------- */
.jpx-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.jpx-sparkles i{position:absolute;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:radial-gradient(circle,#fff 0,#ffe6b8 35%,transparent 70%);opacity:0;animation:jpxFloat var(--d,9s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes jpxFloat{0%{transform:translate3d(0,20px,0) scale(.6);opacity:0}15%{opacity:.95}80%{opacity:.7}100%{transform:translate3d(var(--dx,20px),-160px,0) scale(1);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .jpx *,.jpx *::before,.jpx *::after{animation:none!important;transition:none!important}
  .jpx-rv{opacity:1;transform:none}
}

/* Kids footer (injected at build) in the premium plum style — shared by all .jpx pages */
body.jpx .jp-kids-footer{background:linear-gradient(180deg,#1d1335,#150d28);color:#d8cde9;border-top:0;box-shadow:0 -1px 0 rgba(255,217,154,.16);padding:40px 18px calc(40px + env(safe-area-inset-bottom,0px));font-family:var(--jp-sans)}
body.jpx .jp-kids-footer h2{font-family:var(--jp-serif);color:#fff6e4}
body.jpx .jp-kids-footer a{background:rgba(255,246,228,.08);border:0;box-shadow:0 0 0 1px rgba(255,217,154,.2) inset;color:#fff6e4}
body.jpx .jp-kids-footer p,body.jpx .jp-kids-footer__page,body.jpx .jp-press-imprint,body.jpx .jp-press-imprint span{color:#c9bedf}
body.jpx .jp-kids-footer__page a{background:none;box-shadow:none;color:var(--jp-peach)}