/* Poppis – poppis.algomate.se
   Same look as the game: Lilita One + Nunito, warm wood panels, chunky candy buttons, sky and hills. */
@font-face{font-family:"Lilita One";src:url(/fonts/lilita.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --ink:#2b1d14;--ink-2:#5a4636;--muted:#806b59;
  --paper:#fff8ec;--cream:#fbefd9;--cream-2:#f4e2c3;--line:#ead6b4;
  --wood-9:#24160d;--wood-8:#33221a;--wood-7:#43301f;--wood-6:#5a3f29;--wood-4:#a8703f;--wood-3:#d79a5a;
  --sky-1:#4fbfff;--sky-2:#c4f0ff;--grass-1:#9be07a;--grass-2:#6cc85f;--grass-3:#47a84f;
  --green:#5fd46a;--green-d:#2f9a3f;--orange:#ff9a3d;--orange-d:#d2621c;--gold:#ffd23f;--gold-d:#c99000;
  --pink:#ff6f91;--pink-d:#c83e62;--purple:#8b6cf0;--purple-d:#5a3fc0;--blue:#4aa8ff;
  --display:"Lilita One","Arial Rounded MT Bold","Nunito",system-ui,sans-serif;
  --sans:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
main{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;letter-spacing:.005em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.shell{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:720px){.shell{padding:0 32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{--c:var(--green);--d:var(--green-d);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:400 1.05rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));border-radius:16px;padding:.8rem 1.3rem .75rem;
  box-shadow:0 5px 0 var(--d),0 10px 18px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45);
  text-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--d),0 14px 22px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.sm{font-size:.9rem;padding:.62rem 1rem .58rem;border-radius:13px;box-shadow:0 4px 0 var(--d),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.gold{--c:var(--gold);--d:var(--gold-d);color:var(--ink);text-shadow:none}
.btn.orange{--c:var(--orange);--d:var(--orange-d)}
.btn.purple{--c:var(--purple);--d:var(--purple-d)}

/* App Store badge (coming soon state) */
.store{display:inline-flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem .7rem 1rem;border-radius:16px;background:#111;color:#fff;text-decoration:none;
  box-shadow:0 5px 0 #000,0 14px 24px -12px rgba(0,0,0,.6);transition:transform .2s var(--ease)}
.store svg{width:28px;height:28px;flex:none}
.store small{display:block;font:800 .66rem/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.store b{display:block;font:800 1.3rem/1.1 var(--sans);letter-spacing:-.01em}
a.store:hover{transform:translateY(-2px)}
.store.soon{cursor:default}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(36,22,13,.88);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.brand b{font:400 1.45rem/1 var(--display);letter-spacing:.01em}
.brand span{font:800 .78rem/1 var(--sans);opacity:.55;margin-left:.1rem;margin-top:.25rem}
.nav-links{display:none;gap:1.7rem;font-weight:800;font-size:.95rem}
.nav-links a{text-decoration:none;opacity:.75;transition:opacity .2s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-links a[aria-current]{box-shadow:0 3px 0 var(--gold)}
@media(min-width:860px){.nav-links{display:flex}}

/* ---------- sky scenery (hero + legal headers) ---------- */
.sky{position:relative;overflow:hidden;color:var(--ink);
  background:radial-gradient(60rem 30rem at 78% 8%,rgba(255,246,176,.9),rgba(255,246,176,0) 60%),linear-gradient(180deg,var(--sky-1) 0%,#8fd8ff 45%,var(--sky-2) 100%)}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.85;filter:drop-shadow(0 8px 0 rgba(120,190,230,.35));animation:drift 60s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:55%;height:180%;left:12%;bottom:20%}
.cloud::after{width:40%;height:140%;right:12%;bottom:25%}
.cloud.c1{width:180px;height:46px;top:16%;left:-4%}
.cloud.c2{width:130px;height:34px;top:34%;left:52%;animation-duration:80s;opacity:.7}
.cloud.c3{width:220px;height:54px;top:9%;left:70%;animation-duration:95s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120px)}}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;pointer-events:none}

/* ---------- hero ---------- */
.hero .shell{position:relative;z-index:2;display:grid;gap:2.5rem;padding-top:3rem;padding-bottom:7rem;align-items:center}
@media(min-width:900px){.hero .shell{grid-template-columns:1.08fr .92fr;padding-top:4.5rem;padding-bottom:8.5rem}}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.75);border:2px solid rgba(255,255,255,.9);color:var(--ink);border-radius:999px;padding:.35rem .9rem .35rem .45rem;font-weight:900;font-size:.85rem;box-shadow:0 6px 18px -10px rgba(0,60,120,.5)}
.pill img{width:26px;height:26px}
.wordmark{display:block;margin-top:1.1rem;font:400 clamp(4.4rem,13vw,8.6rem)/.86 var(--display);letter-spacing:.01em;
  background:linear-gradient(180deg,#ffb36b 0%,#ff7a8a 55%,#ff5d8f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 7px 0 rgba(43,29,20,.85)) drop-shadow(0 18px 18px rgba(0,60,120,.25))}
.hero h1{margin:0}
.tagline{display:block;margin-top:1.4rem;font:400 clamp(1.7rem,3.6vw,2.4rem)/1.08 var(--display);color:var(--ink)}
.hero .lede{margin-top:1.1rem;max-width:31rem;font-size:1.15rem;font-weight:700;color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.8rem}
.facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem;padding:0;list-style:none}
.facts li{background:rgba(255,255,255,.6);border-radius:999px;padding:.25rem .75rem;font-weight:900;font-size:.82rem;color:var(--ink-2)}

/* phone */
.stage{position:relative;display:flex;justify-content:center;padding:1rem 0}
.phone{position:relative;width:min(300px,72vw);aspect-ratio:1170/1992;border-radius:44px;padding:10px;
  background:linear-gradient(150deg,#3a3f48,#121418 60%);box-shadow:0 0 0 2px #0b0c0f,0 40px 60px -30px rgba(0,40,80,.75),inset 0 0 0 1.5px rgba(255,255,255,.12)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:35px}
.hero .phone{transform:rotate(3deg)}
.float{position:absolute;width:clamp(58px,9vw,92px);filter:drop-shadow(0 10px 10px rgba(0,50,90,.25));animation:bob 3.4s ease-in-out infinite}
.float.f1{left:2%;top:12%;animation-delay:-.4s;transform:rotate(-12deg)}
.float.f2{right:0;top:30%;animation-delay:-1.4s}
.float.f3{left:6%;bottom:12%;animation-delay:-2.2s;width:clamp(50px,7vw,74px)}
.float.f4{right:9%;bottom:3%;animation-delay:-.9s;width:clamp(46px,6vw,64px)}
@keyframes bob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -12px;rotate:4deg}}
.burst{position:absolute;right:-2%;top:6%;font:400 1.5rem/1 var(--display);color:#fff;background:var(--orange);padding:.5rem .8rem .45rem;border-radius:14px;transform:rotate(8deg);
  box-shadow:0 4px 0 var(--orange-d),0 14px 20px -10px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.2);animation:pulse 2.4s var(--spring) infinite}
@keyframes pulse{0%,70%,100%{scale:1}80%{scale:1.12}}
@media(max-width:520px){.float.f2{right:-4%}.burst{right:2%}}

/* ---------- sections ---------- */
section.block{position:relative;padding:clamp(4rem,9vw,7rem) 0}
.kicker{display:inline-block;font:900 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d)}
.h2{margin-top:.8rem;font-size:clamp(2.2rem,5.4vw,3.6rem);max-width:16ch}
.lede-2{margin-top:1rem;font-size:1.15rem;font-weight:700;color:var(--muted);max-width:36rem}
.center{text-align:center}.center .h2,.center .lede-2{margin-left:auto;margin-right:auto}

/* wood section */
.wood{background:radial-gradient(70rem 40rem at 50% -10%,var(--wood-6),var(--wood-8) 60%,var(--wood-9));color:#fff}
.wood .kicker{color:var(--gold)}
.wood .lede-2{color:rgba(255,255,255,.72)}

/* how-to with live board */
.how{display:grid;gap:3rem;align-items:center;margin-top:1rem}
@media(min-width:900px){.how{grid-template-columns:1fr 1fr}}
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1.1rem 1.2rem;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.steps li.on{background:rgba(255,210,63,.12);border-color:rgba(255,210,63,.45);transform:translateX(6px)}
.steps .n{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font:400 1.35rem/1 var(--display);color:#fff;background:var(--pink);box-shadow:0 4px 0 var(--pink-d)}
.steps li:nth-child(2) .n{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.steps li:nth-child(3) .n{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.steps h3{font-size:1.4rem}
.steps p{margin-top:.25rem;color:rgba(255,255,255,.72);font-weight:600}

.demo{position:relative;justify-self:center;width:min(440px,100%)}
.frame{position:relative;padding:14px;border-radius:30px;background:linear-gradient(180deg,#e2a868,#b9773d);box-shadow:0 6px 0 #7a4a22,0 30px 50px -24px rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.grid8{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:10px;border-radius:20px;background:#8e5a30;box-shadow:inset 0 4px 10px rgba(0,0,0,.35)}
.grid8 i{position:relative;aspect-ratio:1;border-radius:22%;background:#d4a06a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.25)}
.grid8 i img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none}
.grid8 i img.in{animation:drop .35s var(--spring) both}
.grid8 i img.pop{animation:pop .45s var(--ease) forwards}
.grid8 i.hint{background:#e9c08b}
@keyframes drop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pop{30%{transform:scale(1.25);filter:brightness(1.3)}100%{transform:scale(0);opacity:0}}
.tray{display:flex;justify-content:space-around;align-items:center;margin-top:12px;height:74px;border-radius:18px;background:rgba(0,0,0,.18)}
.tray .piece{display:grid;gap:2px;transition:opacity .3s,transform .3s var(--ease)}
.tray .piece img,.tray .piece span{width:22px;height:22px}
.tray .piece.used{opacity:.15;transform:scale(.8)}
.score{position:absolute;left:50%;top:44%;translate:-50% -50%;font:400 2.6rem/1 var(--display);color:#fff;text-shadow:0 4px 0 var(--orange-d),0 0 20px rgba(255,154,61,.6);pointer-events:none;opacity:0}
.score.go{animation:rise 1.1s var(--ease) forwards}
@keyframes rise{0%{opacity:0;transform:translateY(20px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1)}}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font:400 1rem/1 var(--display)}
.hud b{font-size:1.8rem;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hud span{background:rgba(0,0,0,.25);padding:.4rem .7rem;border-radius:10px;font-size:.85rem;letter-spacing:.04em}

/* feature rows */
.feature{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:4rem}.feature.flip .media{order:2}}
@media(max-width:600px){.media .phone.back{transform:translate(-34%,8%) rotate(-7deg)}.media .phone.front{transform:translate(16%,0) rotate(4deg)}}
.feature + .feature{margin-top:clamp(4rem,9vw,7rem)}
.media{position:relative;display:flex;justify-content:center}
.media .phone{width:min(290px,68vw)}
.media .phone.back{position:absolute;width:min(250px,56vw);transform:translate(-46%,8%) rotate(-7deg);opacity:.95;z-index:0}
.media .phone.front{z-index:1;transform:translate(22%,0) rotate(4deg)}
.blob{position:absolute;inset:6% 4%;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;z-index:-1}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;list-style:none;padding:0}
.chips li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem .45rem .5rem;border-radius:999px;background:#fff;font-weight:900;font-size:.92rem;box-shadow:0 3px 0 var(--line)}
.chips li i{width:22px;height:22px;border-radius:7px;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.8rem}
.ticks li{position:relative;padding-left:2.1rem;font-weight:700;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:1.4rem;height:1.4rem;border-radius:8px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 3px 0 var(--green-d)}
.ticks b{color:var(--ink)}

/* buddies */
.buddies-sec{background:linear-gradient(180deg,var(--paper),var(--cream))}
.worlds{display:grid;gap:.8rem;margin-top:3rem;grid-template-columns:repeat(2,1fr)}
.worlds .world:last-child{grid-column:1/-1;width:calc(50% - .4rem);justify-self:center}
@media(min-width:1000px){.worlds .world:last-child{grid-column:auto;width:auto}}
@media(min-width:1000px){.worlds{grid-template-columns:repeat(5,1fr)}}
.world{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:26px;padding:1rem 1rem 1.5rem;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.18),0 20px 30px -20px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.world:hover{transform:translateY(-6px) rotate(-1deg)}
.world::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-44px;height:84px;border-radius:50%;background:var(--h);opacity:.85}
.world .tag{position:relative;z-index:1;white-space:nowrap;font:900 clamp(.58rem,1.8vw,.68rem)/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;background:rgba(0,0,0,.22);color:#fff;padding:.4rem .65rem;border-radius:999px}
.world .crew{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;margin:.9rem 0 .5rem;width:100%}
.world .crew img{width:31%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.world .crew img:nth-child(n+4){margin-top:-7%}
.world h3{position:relative;z-index:1;font-size:clamp(1.3rem,4.5vw,1.7rem)}
.world p{position:relative;z-index:1;margin-top:.15rem;font-weight:900;font-size:.85rem;opacity:.9}

/* promises */
.promises{display:grid;gap:1rem;margin-top:2.8rem}
@media(min-width:820px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.5rem}
.promise .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--gold);box-shadow:0 4px 0 var(--gold-d)}
.promise:nth-child(2) .ico{background:var(--blue);box-shadow:0 4px 0 #1f6fc0}
.promise:nth-child(3) .ico{background:var(--pink);box-shadow:0 4px 0 var(--pink-d)}
.promise .ico svg{width:28px;height:28px}
.promise h3{margin-top:1.1rem;font-size:1.45rem}
.promise p{margin-top:.4rem;color:rgba(255,255,255,.72);font-weight:600}

/* faq */
.faq{max-width:48rem;margin:2.6rem auto 0;display:grid;gap:.8rem}
.faq details{background:#fff;border-radius:18px;box-shadow:0 4px 0 var(--line);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;font-weight:900;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d14' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.2rem;color:var(--ink-2);font-weight:600}
.faq a{color:var(--orange-d);font-weight:800}

/* final cta */
.final{padding:clamp(4.5rem,10vw,7rem) 0 clamp(8rem,14vw,11rem);text-align:center}
.final .h2{margin:0 auto;font-size:clamp(2.6rem,7vw,4.6rem);color:var(--ink);text-shadow:0 3px 0 #fff}
.final .lede-2{margin:1rem auto 0;color:#1c3a52}
.final .cta-row{justify-content:center}
.final .crowd{display:flex;justify-content:center;gap:clamp(.2rem,1.5vw,.8rem);margin-bottom:1.6rem}
.final .crowd img{width:clamp(48px,8vw,78px);animation:bob 3s ease-in-out infinite}
.final .crowd img:nth-child(2n){animation-delay:-1s}.final .crowd img:nth-child(3n){animation-delay:-2s}

/* ---------- footer ---------- */
footer{background:var(--wood-9);color:rgba(255,255,255,.62);font-size:.92rem;font-weight:700}
footer .shell{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center;justify-content:space-between;padding-top:2.4rem;padding-bottom:2.4rem}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--gold)}
footer .brand b{color:#fff;font-size:1.25rem}
footer .brand img{width:30px;height:30px}

/* ---------- legal / support pages ----------
   Same sky header as the rest of the site, then a calm, roomy reading layout:
   a light index on the left, one readable column (~68ch), sections as soft cards. */
.doc-head .shell{position:relative;z-index:2;padding-top:3rem;padding-bottom:6rem;max-width:1060px}
.doc-head h1{font-size:clamp(2.6rem,7vw,4.2rem);color:var(--ink);text-shadow:0 3px 0 #fff,0 10px 30px rgba(0,60,120,.2)}
.doc-head .lede{margin-top:.9rem;max-width:36rem;font-size:1.15rem;font-weight:700;color:#18344a}
.doc-head .stamp{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;background:rgba(255,255,255,.8);border-radius:999px;padding:.35rem .85rem;font-weight:900;font-size:.82rem;color:var(--ink-2)}
.doc-head .stamp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.doc-head .crumb{display:inline-flex;align-items:center;gap:.4rem;font-weight:900;font-size:.9rem;color:#18344a;text-decoration:none;margin-bottom:.9rem}
.doc-head .crumb:hover{text-decoration:underline}

.doc-wrap{background:var(--cream);padding:0 0 clamp(3rem,7vw,5rem)}
.doc-wrap .shell{max-width:1100px;display:grid;gap:2.2rem;align-items:start}
.doc-wrap .shell>*{min-width:0}
@media(min-width:960px){.doc-wrap .shell{grid-template-columns:240px minmax(0,1fr)}.paper{margin-top:-3rem}}
@media(max-width:959px){.doc-wrap .shell{gap:1rem}}

/* index */
.toc{position:relative;z-index:2;margin-top:-3rem;background:#fff;border:2px solid var(--line);border-radius:20px;padding:.9rem .8rem;box-shadow:0 4px 0 var(--line)}
@media(min-width:960px){.toc{position:sticky;top:90px;margin-top:2.2rem;background:var(--paper);box-shadow:none;padding:1.1rem .8rem 1rem}.toc summary{pointer-events:none}.toc summary::after{display:none}}
.toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:900 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.1rem .5rem}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:22px;height:22px;border-radius:7px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1d14' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .3s var(--ease)}
.toc details[open] summary::after{transform:rotate(180deg)}
.toc details[open] summary{margin-bottom:.7rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.55rem;align-items:baseline;text-decoration:none;font-weight:800;font-size:.9rem;padding:.42rem .55rem;border-radius:10px;color:var(--ink-2);line-height:1.3;transition:background .2s,color .2s}
.toc a::before{content:counter(t);flex:none;width:1.35rem;font:400 .85rem/1 var(--display);color:var(--wood-4);text-align:right}
.toc a:hover{background:var(--cream)}
.toc a.on{background:#fff3c4;color:var(--ink)}
.toc a.on::before{color:var(--orange-d)}

/* reading column */
.paper{position:relative;margin-top:0;max-width:760px;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;overflow-wrap:break-word}
.paper section{background:#fff;border-radius:22px;padding:clamp(1.4rem,3.5vw,2.2rem) clamp(1.25rem,4vw,2.5rem);box-shadow:0 4px 0 var(--line),0 18px 36px -30px rgba(80,50,20,.4)}
.paper h2{display:flex;align-items:center;gap:.75rem;font-size:clamp(1.45rem,3.2vw,1.8rem);line-height:1.15;color:var(--ink)}
.paper h2 .n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-size:1rem;color:var(--wood-6);background:var(--cream);border:2px solid var(--cream-2)}
.paper h3{margin-top:1.5rem;font:900 1.08rem/1.35 var(--sans);color:var(--ink)}
.paper p,.paper ul,.paper .table{margin-top:.95rem}
.paper p,.paper li{font-size:1.06rem;line-height:1.75;color:#3d2c20;font-weight:500}
.paper ul{list-style:none;padding:0}
.paper li{position:relative;padding-left:1.6rem;margin-top:.6rem}
.paper li::before{content:"";position:absolute;left:.2rem;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--wood-3)}
.paper strong,.paper b{color:var(--ink);font-weight:800}
.paper a{overflow-wrap:anywhere;color:var(--orange-d);font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px}

/* the short version: a friendly summary card */
.paper section#short{background:linear-gradient(180deg,#f2fbe9,#fff 70%);box-shadow:0 4px 0 #cfe9b8,0 18px 36px -30px rgba(40,90,30,.45)}
.paper #short h2 .n{color:#fff;background:var(--green);border-color:var(--green-d)}
.paper #short li{padding-left:2rem}
.paper #short li::before{left:0;top:.38em;width:1.2rem;height:1.2rem;border-radius:6px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/72% no-repeat}

/* data table: each row becomes an easy-to-scan card */
.paper .table{border:0;overflow:visible}
.paper table,.paper tbody,.paper tr,.paper td{display:block;width:100%}
.paper thead{display:none}
.paper tbody{display:grid;gap:.7rem}
.paper tr{background:var(--paper);border:2px solid var(--cream-2);border-radius:16px;padding:1rem 1.1rem}
.paper td{padding:0;border:0;font-size:.98rem;line-height:1.6;color:#3d2c20}
.paper td+td{margin-top:.55rem}
.paper td:first-child{font-weight:800;color:var(--ink);font-size:1.02rem}
.paper td:first-child::before{display:none}
.paper td::before{content:attr(data-label);display:block;font:900 .7rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--wood-4)}
@media(min-width:720px){.paper td:not(:first-child){display:grid;grid-template-columns:8.5rem 1fr;gap:1rem}.paper td::before{padding-top:.2rem}}

.note{margin-top:1rem;padding:1rem 1.2rem;border-radius:16px;background:#fff6d6;border:2px solid #ffe28a;font-weight:700;color:var(--ink-2)}
.docs-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem;padding:0 .2rem}
.docs-nav a{text-decoration:none}


/* ================= Game theme (2026-11-07) =================
   The site now wears the game's own materials: the bouncing multicolour logo with the buddy beside it,
   sky with sun rays, dark game panels (the home card), the tan wood board with its cells,
   HUD pills and ribbons. Sections alternate between dark panel and wood board, like the game screen. */
:root{--panel:#3b2a20;--panel2:#4d382b;--panel-edge:#6b4c38;--panel-low:#24170f;--frameA:#c98a4b;--frameB:#9b6233;--frameC:#6e4222;--cell:#d4a06a;--cell-hi:#e9c08b;--fg:#fffaf0;--fg-2:#e8dcc6}
.ink-stroke,.wood .h2,.board .h2,.final .h2,.doc-head h1,.tagline{text-shadow:0 4px 0 rgba(43,29,20,.55),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}

/* sky: sun rays like the store art */
.sky::before{content:"";position:absolute;left:50%;top:-40%;width:260vmax;height:260vmax;translate:-50% 0;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.13) 0 6deg,rgba(255,255,255,0) 6deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 0,#000 35%,transparent 70%);mask:radial-gradient(closest-side,#000 0,#000 35%,transparent 70%);animation:spin 160s linear infinite}
.hero.sky::before{left:78%;top:-120vmax}
.final.sky::before{top:-100vmax}
@keyframes spin{to{rotate:360deg}}
.sky .cloud{z-index:1}

/* ribbon (game "STAGE UP!" banner) */
.ribbon{display:inline-block;transform:rotate(-2deg);font:400 1.05rem/1 var(--display);letter-spacing:.02em;color:#fff;padding:.55rem 1.2rem .5rem;border-radius:13px;
  background:linear-gradient(#ff8a9a,#ff5d6c);box-shadow:0 5px 0 #b83246,0 12px 20px -10px rgba(120,20,40,.5);text-shadow:0 2px 0 rgba(0,0,0,.2);white-space:nowrap}
.ribbon.gold{background:linear-gradient(#ffe27a,#f5b52a);color:var(--ink);box-shadow:0 5px 0 #b8761c;text-shadow:none}
.ribbon.green{background:linear-gradient(#8fe58a,#3fb84a);box-shadow:0 5px 0 #23843a}

/* logo: one colour per letter, thick ink edge, gloss and a bounce wave (same as the game) */
.logo-row{position:relative;display:flex;align-items:flex-end;gap:.4rem;margin-top:3.4rem}
.wordmark{display:inline-flex;margin:0;font:400 clamp(3.6rem,16vw,8.4rem)/.9 var(--display);letter-spacing:-.01em;background:none;filter:none;color:inherit}
.wordmark i{display:inline-block;font-style:normal;transform-origin:50% 90%;animation:lgBob 2.6s cubic-bezier(.3,1.6,.5,1) infinite;
  text-shadow:0 8px 0 rgba(43,29,20,.75),0 14px 18px rgba(0,40,80,.3),4px 0 0 var(--ink),-4px 0 0 var(--ink),0 4px 0 var(--ink),0 -4px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink)}
.wordmark i:nth-child(odd){rotate:-3deg}.wordmark i:nth-child(even){rotate:3deg}
@keyframes lgBob{0%,62%,100%{transform:translateY(0) scale(1,1)}70%{transform:translateY(2px) scale(1.18,.8)}80%{transform:translateY(-16px) scale(.9,1.14)}90%{transform:translateY(1px) scale(1.08,.92)}}
.mascot{position:relative;flex:none;width:clamp(64px,10vw,104px);margin-bottom:.5rem;animation:bob 3.4s ease-in-out infinite}
.mascot img{width:100%;filter:drop-shadow(0 8px 6px rgba(0,50,90,.25))}
.mascot .say{position:absolute;z-index:3;left:38%;bottom:96%;white-space:nowrap;font:400 clamp(.85rem,1.6vw,1.05rem)/1 var(--display);color:var(--ink);background:#fff;padding:.5rem .75rem .45rem;border-radius:14px;box-shadow:0 4px 0 rgba(43,29,20,.25)}
.mascot .say::after{content:"";position:absolute;left:14px;bottom:-7px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.tagline{color:#fff;margin-top:1.3rem}
.hero .lede{color:#18344a}
.facts li{font:400 .85rem/1 var(--display);letter-spacing:.03em;color:var(--fg);background:rgba(43,29,20,.55);padding:.45rem .8rem .4rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.btn.gold{background:linear-gradient(#ffe27a,#f5b52a);box-shadow:0 5px 0 #b8761c,0 10px 18px -8px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.45)}

/* kicker = HUD pill */
.kicker{font:400 .85rem/1 var(--display);letter-spacing:.08em;color:var(--fg);background:rgba(43,29,20,.55);padding:.45rem .85rem .4rem;border-radius:999px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.wood .kicker{color:#ffdcae;background:rgba(0,0,0,.28)}
.h2{margin-top:1rem}
.h2 .hi{color:var(--gold)}

/* dark game panel sections */
.wood{background:radial-gradient(70rem 40rem at 50% -10%,#5a4334,var(--panel) 55%,#2a1c13);color:#fff}
.wood .h2{color:#fff}
.wood .lede-2{color:var(--fg-2)}
.gcard,.steps li,.promise,.faq details{background:linear-gradient(var(--panel2),var(--panel));border:3px solid var(--panel-edge);border-radius:24px;box-shadow:0 7px 0 var(--panel-low),0 22px 40px -22px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12)}
.steps li{padding:1rem 1.1rem}
.steps li.on{background:linear-gradient(#5f4632,#47331f);border-color:var(--gold);transform:translateX(6px)}
.steps p,.promise p{color:var(--fg-2)}

/* wood board sections: the tan board with its rounded cells */
.board{color:var(--ink);background-color:var(--frameA);
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 60%,rgba(255,255,255,0) 61%),
   linear-gradient(180deg,rgba(255,236,200,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(80,40,10,.18)),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='4' y='4' width='56' height='56' rx='13' fill='%23d4a06a'/%3E%3Crect x='4' y='4' width='56' height='5' rx='2.5' fill='%23e9c08b' opacity='.7'/%3E%3Crect x='4' y='54' width='56' height='6' rx='3' fill='%23000' opacity='.07'/%3E%3C/svg%3E");
  background-size:auto,auto,64px 64px;box-shadow:inset 0 10px 0 var(--frameB),inset 0 14px 0 var(--frameC),inset 0 -10px 0 var(--frameB),inset 0 -14px 0 var(--frameC)}
.board .h2{color:#fff}
.board .lede-2{color:#3d2716;font-weight:800}
.board .kicker{color:var(--fg)}
.board .feature>div:not(.media){background:linear-gradient(var(--panel2),var(--panel));border:3px solid var(--panel-edge);border-radius:28px;padding:clamp(1.4rem,3.5vw,2.2rem);
  box-shadow:0 8px 0 var(--panel-low),0 24px 40px -22px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12);color:#fff}
.board .feature .lede-2{color:var(--fg-2);font-weight:700}
.board .feature .kicker{background:rgba(0,0,0,.28);color:#ffdcae}
.board .blob{display:none}
.chips li{background:rgba(0,0,0,.28);color:var(--fg);font:400 .92rem/1 var(--display);letter-spacing:.02em;padding:.5rem .85rem .45rem .5rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.chips li i{box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 2px 0 rgba(0,0,0,.25)}
.ticks li{color:var(--fg-2)}
.ticks b{color:#fff}

/* buddies on the dark panel */
.world{box-shadow:0 7px 0 rgba(0,0,0,.35),0 20px 30px -20px rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.3);border:3px solid rgba(255,255,255,.18)}
.world h3{text-shadow:0 2px 0 rgba(0,0,0,.18)}

/* promises: dark cards resting on the board */
.board .promise h3{color:#fff}

/* faq: dark game cards */
.faq details{border-radius:20px}
.faq summary{font:400 1.15rem/1.2 var(--display);letter-spacing:.01em;color:#fff}
.faq summary::after{background-color:rgba(0,0,0,.3);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf3a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")}
.faq details p{color:var(--fg-2)}
.faq a,.more a{color:var(--gold);font-weight:900}

/* final */
.final .h2{color:#fff}
.final .lede-2{color:#18344a;font-weight:800}

/* footer + nav: dark panel */
.nav{background:rgba(43,29,20,.92);border-bottom:3px solid var(--panel-edge)}
footer{background:var(--panel-low)}

/* legal pages: board around white paper cards */
.doc-head h1{color:#fff}
.doc-wrap{background-color:var(--frameA);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='4' y='4' width='56' height='56' rx='13' fill='%23d4a06a'/%3E%3Crect x='4' y='4' width='56' height='5' rx='2.5' fill='%23e9c08b' opacity='.7'/%3E%3C/svg%3E");background-size:64px 64px}
.paper section{border:3px solid #f1dcb8;box-shadow:0 6px 0 var(--frameC),0 18px 36px -24px rgba(60,30,10,.6)}
.paper section#short{box-shadow:0 6px 0 var(--frameC),0 18px 36px -24px rgba(60,30,10,.6)}
.toc{border:3px solid #f1dcb8;box-shadow:0 6px 0 var(--frameC)}
@media(min-width:960px){.toc{background:#fff;box-shadow:0 6px 0 var(--frameC)}}
.paper .docs-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:0;padding:1.2rem clamp(1.25rem,4vw,2.5rem);background:#fff;border:3px solid #f1dcb8;border-radius:22px;box-shadow:0 6px 0 var(--frameC),0 18px 36px -24px rgba(60,30,10,.6)}
.paper .docs-nav .btn{text-decoration:none;font-weight:400;color:#fff;overflow-wrap:normal}
.paper .docs-nav .btn.brown{--c:#7a4e2b;--d:#3f2814;color:var(--cream);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.paper .docs-nav .btn.brown[aria-current]{--c:#5a3a20;--d:#2a1a0c;opacity:.6;pointer-events:none}
.paper .docs-nav .btn.gold{color:var(--ink);text-shadow:none}
.paper .docs-nav .home{margin-left:auto}
@media(max-width:600px){.paper .docs-nav .btn{flex:1 1 0;padding-left:.5rem;padding-right:.5rem}.paper .docs-nav .home{flex-basis:100%;margin-left:0}}

@media(max-width:520px){.wordmark i{text-shadow:0 6px 0 rgba(43,29,20,.75),0 10px 14px rgba(0,40,80,.3),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink)}
  .mascot .say{left:20%}}
@media(prefers-reduced-motion:reduce){.wordmark i,.mascot{animation:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}