/* Stay Curious Workshop: "The Wonder Shelf". A lantern-lit workshop at dusk where each game
   sits on the shelf as a glowing glass globe. The workshop frames the games; it never upstages them. */
:root{
  --teal-1:#0e2635;--teal-2:#12364a;--teal-3:#1d5266;--indigo:#1a2140;
  --amber:#ffb94d;--amber-soft:#ffd98a;--cream:#fff3dc;--cream-soft:#f3e3c4;
  --wood:#8a5a3c;--wood-light:#b5794c;--brass:#d9a85b;
  --card:#0b1f2c99;--card-line:#ffd98a33;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--teal-1)}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,var(--teal-1) 0%,var(--teal-2) 40%,#162c48 75%,var(--indigo) 100%);color:var(--cream);font-family:ui-rounded,'SF Pro Rounded','Avenir Next',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--amber-soft);text-underline-offset:3px}
a:hover{color:#fff}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber-soft);outline-offset:4px;border-radius:10px}

/* Warm motes drifting in the lamplight, behind everything. */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#ffe2a8;box-shadow:0 0 8px #ffcf7a;opacity:.5;animation:mote var(--d) ease-in-out infinite}
@keyframes mote{0%,100%{opacity:.12;transform:translate(0,0)}50%{opacity:.75;transform:translate(6px,-16px)}}

.wrap{width:min(1080px,100% - 32px);margin:0 auto}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-weight:900;letter-spacing:.2px}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 2px #ffd98a44}
nav a{color:var(--cream-soft);text-decoration:none;font-weight:700;margin-left:18px;font-size:15px}
nav a:hover,nav a[aria-current=page]{color:#fff;text-decoration:underline}

/* The workshop: wall, hanging sign, and the shelf of globes. */
.workshop{position:relative;min-height:min(900px,calc(100vh - 64px));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 40px;background:#0e2635 url('shelf/workshop-wall-wide.webp') center top/cover no-repeat;overflow:hidden}
.workshop:after{content:'';position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(180deg,transparent,var(--teal-1));pointer-events:none}
/* The painted lanterns flicker softly. */
.lamplight{position:absolute;inset:0;pointer-events:none;background:radial-gradient(18% 22% at 12% 12%,#ffc66a33,transparent 70%),radial-gradient(18% 22% at 88% 12%,#ffc66a33,transparent 70%);mix-blend-mode:screen;animation:flicker 3.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.75}22%{opacity:1}40%{opacity:.82}63%{opacity:.96}80%{opacity:.7}}
.sign{margin:0;width:min(720px,84vw);line-height:0;position:relative;z-index:2;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;cursor:pointer}
.sign img{width:100%;height:auto;display:block;margin-top:-1.6%;filter:drop-shadow(0 14px 18px #06131c99)}
.sign.swing{animation:swing 1.6s cubic-bezier(.3,.6,.4,1)}
@keyframes sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
@keyframes swing{0%{transform:rotate(0)}18%{transform:rotate(5deg)}40%{transform:rotate(-3.5deg)}62%{transform:rotate(2deg)}82%{transform:rotate(-.8deg)}100%{transform:rotate(0)}}

.shelf-row{--w:min(1060px,94vw);position:relative;z-index:2;width:var(--w);height:calc(var(--w) * .49);margin-top:clamp(8px,3vh,36px)}
.shelf{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 18px 20px #04101899)}
/* Globe art is 1000x1150; its base touches the shelf 87% of the way down. The shelf's top surface
   sits a third of the way down its art, so each globe's bottom is lifted onto that surface. */
.globe{--gw:calc(var(--w) * .2);position:absolute;bottom:calc(var(--w) / 6 * .66 - var(--gw) * 1.15 * .13);left:calc(var(--x) - var(--gw) / 2);width:var(--gw);height:calc(var(--gw) * 1.15);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.globe>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.globe.covered{--x:17%;transform-origin:50% 87%}
.globe.covered.right{--x:83%}
.globe.covered:after{content:'';position:absolute;left:20%;right:20%;bottom:10%;height:9%;border-radius:50%;background:radial-gradient(#ffb94d66,transparent 70%);z-index:-1}
.globe.covered.wiggle{animation:wiggle .8s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}18%{transform:rotate(-6deg) scale(1.02,.98)}40%{transform:rotate(5deg) translateY(-4%)}62%{transform:rotate(-3deg)}82%{transform:rotate(1deg)}}

/* Little Worlds' globe: its own purple sky inside the glass, Twinkle, and friends orbiting. */
.globe.featured{--gw:calc(var(--w) * .36);--x:50%;cursor:default}
.globe.featured:before{content:'';position:absolute;left:-6%;right:-6%;top:-6%;bottom:16%;border-radius:50%;background:radial-gradient(#ffd98a66,transparent 64%);z-index:-1;animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.inside{position:absolute;left:13%;width:74%;top:9.8%;height:64.3%;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 20% 20%,#ff62d766,transparent 50%),radial-gradient(ellipse at 85% 75%,#38d9ed66,transparent 50%),linear-gradient(170deg,#472281,#863fb2 55%,#3e84c5)}
.inside:before{content:'';position:absolute;inset:18% -25% auto;height:120%;border-radius:50%;border-top:6px solid #ff85ca55;box-shadow:0 -6px #ffec7955,0 -12px #74edcf55;rotate:-12deg}
.inside i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff8d8;box-shadow:0 0 4px #fff3b0;animation:twinkle var(--d) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.inside .orbit{position:absolute;inset:0}
.inside .bubble{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.inside .bubble .window{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #ffffffcc,0 0 10px #fff6c8aa}
.inside .bubble .window img{width:100%;height:100%;object-fit:cover;display:block}
.inside .bubble .pet{position:absolute;left:50%;bottom:2%;width:96%;max-height:120%;object-fit:contain;translate:-50% 0;z-index:1;filter:drop-shadow(0 2px 3px #2a1248aa)}
.twinkle{position:absolute;left:50%;top:50%;width:36%;height:36%;margin:-18% 0 0 -18%;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 0 12px #ffe98a99);animation:hop 1.6s cubic-bezier(.3,0,.4,1) infinite;-webkit-tap-highlight-color:transparent;z-index:2}
.twinkle svg{width:100%;height:100%;overflow:visible}
.twinkle .wink{display:none}.twinkle.winking .eye-r{display:none}.twinkle.winking .wink{display:inline}
.twinkle.giggle{animation:twirl .95s cubic-bezier(.3,0,.25,1)}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-10%) scale(1.03,.97)}60%{transform:translateY(-10%)}}
@keyframes twirl{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-12deg) scale(.94)}55%{transform:rotate(300deg) scale(1.16) translateY(-6%)}80%{transform:rotate(372deg) scale(1.04)}100%{transform:rotate(360deg) scale(1)}}

/* Falling into a world: the globe's sky pours outward to fill the screen. */
.globe.featured{cursor:pointer}
.globe.featured.leaving{animation:swell 1.1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes swell{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.06) translateY(-2%);filter:brightness(1.35) drop-shadow(0 0 30px #ffd98a)}100%{transform:scale(1.25) translateY(-4%);filter:brightness(1.6) drop-shadow(0 0 60px #ffe9b0)}}
.portal{position:fixed;inset:0;z-index:50;pointer-events:none;background:radial-gradient(ellipse at 20% 20%,#ff62d799,transparent 45%),radial-gradient(ellipse at 85% 75%,#38d9ed99,transparent 45%),linear-gradient(160deg,#472281,#863fb2 50%,#3e84c5)}
.portal-stars i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c),0 0 4px #fff;opacity:0;animation:warp 1.1s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes warp{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1.6);opacity:0}}
.portal-twinkle{position:fixed;z-index:51;border:0;padding:0;background:none;filter:drop-shadow(0 0 18px #ffe98a)}
.portal-twinkle svg{width:100%;height:100%;overflow:visible}

/* A little hanging tag on the shelf names each game. */
.tag{position:absolute;bottom:calc(var(--w) / 6 * .04);left:calc(var(--x) - 72px);width:144px;text-align:center;padding:6px 10px 7px;border-radius:10px;background:var(--cream);color:#4a2f1e;font-weight:900;font-size:16px;line-height:1.15;text-decoration:none;box-shadow:0 6px 10px #04101866,inset 0 0 0 2px #e7d1a8;rotate:-2deg;z-index:3;transform-origin:50% 0}
.tag:hover{color:#4a2f1e;background:#fff8ea}
.tag small{display:block;font-weight:700;font-size:11px;color:#8a5a3c;letter-spacing:.3px}
.tag.soon{--x:17%;background:#e9dcc2;color:#6b5236;font-size:13px;rotate:2deg}
.tag.soon.right{--x:83%;rotate:-1.5deg}

.tagline{position:relative;z-index:2;margin:26px 16px 0;max-width:34ch;text-align:center;font-size:clamp(18px,2.4vmin,23px);font-weight:800;color:var(--cream);text-shadow:0 2px 10px #06131ccc}

.spark{position:fixed;z-index:20;pointer-events:none;font-size:20px;color:var(--c);text-shadow:0 0 6px #fff,0 0 12px var(--c)}

/* Content */
main section{padding:28px 0}
h2{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 12px;font-weight:900;letter-spacing:-.3px}
h3{font-size:20px;margin:0 0 6px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--cream-soft);max-width:62ch}
.app{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--card);border:1.5px solid var(--card-line);border-radius:28px;padding:28px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 40px #04101866;scroll-margin-top:24px}
.app-icon{width:132px;height:132px;border-radius:30px;box-shadow:0 10px 24px #04101888,0 0 0 3px #ffd98a55}
.soon-pill{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 16px;border-radius:999px;background:var(--cream);color:#4a2f1e;font-weight:800;font-size:15px}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:22px}
.promise{background:var(--card);border:1.5px solid var(--card-line);border-radius:22px;padding:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.promise .dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--c) 30%,transparent);border:2px solid var(--c);margin-bottom:10px}
.promise p{margin:0;color:var(--cream-soft)}

/* Long-form pages (privacy, support) on a calm readable card. */
.page{background:#fffaf0;color:#3b2a20;border-radius:28px;padding:clamp(22px,4vw,48px);margin:10px auto 40px;box-shadow:0 18px 40px #04101866;max-width:820px}
.page a{color:#9a4f1d}
.page h1{font-size:clamp(30px,5vw,44px);line-height:1.1;margin:0 0 6px;color:#12364a;font-weight:900}
.page h2{font-size:22px;margin:30px 0 8px;color:#1d5266}
.page .updated{color:#7a6a5c;margin:0 0 18px}
.page li{margin:6px 0}
.page details{border:1.5px solid #ecdcc0;border-radius:16px;padding:12px 16px;margin:10px 0;background:#fff}
.page summary{cursor:pointer;font-weight:800;color:#1d5266}
.page .contact{display:inline-block;margin-top:6px;padding:12px 20px;border-radius:999px;background:#12364a;color:#fff3dc;text-decoration:none;font-weight:800}
.page .contact:hover{background:#1d5266;color:#fff}

footer{padding:26px 0 40px;color:var(--cream-soft);font-size:14px;text-align:center}
footer nav a{margin:0 9px}

/* Upright screens: the tall wall, a bigger Little Worlds globe, and the covered globes beside it. */
@media (max-aspect-ratio:3/4){
  .workshop{background-image:url('shelf/workshop-wall-tall.webp');min-height:auto;padding-bottom:30px}
  .lamplight{background:radial-gradient(30% 14% at 18% 8%,#ffc66a33,transparent 70%),radial-gradient(30% 14% at 82% 8%,#ffc66a33,transparent 70%)}
  .shelf-row{height:calc(var(--w) * .66)}
  .globe.featured{--gw:calc(var(--w) * .5)}
  .globe.covered{--gw:calc(var(--w) * .22);--x:13%}
  .globe.covered.right{--x:87%}
  .tag{left:calc(var(--x) - 64px);width:128px;font-size:14px}
  .tag.soon{display:none}
}
@media (max-width:640px){
  nav a{margin-left:12px;font-size:14px}
  .brand span{display:none}
  .app{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px}
  .app-icon{width:110px;height:110px}
}
@media (prefers-reduced-motion:reduce){
  .globe.featured.leaving,.sign,.sign.swing,.lamplight,.twinkle,.twinkle.giggle,.globe.featured:before,.globe.covered.wiggle,.sky i,.inside i{animation:none!important}
}