/* Scribble Games sketchbook look, laid over each game's own layout (its style.css sets --acc). */
:root{--desk:#f3eee4;--page:#fffdf8;--fg:#2b2a33;--mut:#615e6b;--card:#fbf7ee;--line:#e6dccb;
  --tape:rgba(232,214,170,.78);--tape-edge:rgba(170,150,100,.35);--shadow:0 1px 1px rgba(60,40,10,.10),0 8px 18px rgba(60,40,10,.12);
  --hand:"Schoolbell","Comic Sans MS","Marker Felt",cursive;--text:"Atkinson Hyperlegible",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--desk:#1b1a20;--page:#26252d;--fg:#f1eee6;--mut:#b9b4a8;--card:#2e2d36;--line:#3d3b46;
  --tape:rgba(210,190,140,.55);--tape-edge:rgba(255,240,200,.18);--shadow:0 1px 1px rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.45)}}
html{background:var(--desk)}
body{background:var(--desk);color:var(--fg);font-family:var(--text);overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{max-width:1100px}
header a.brand{font-family:var(--hand);font-weight:400;font-size:2.2rem;gap:14px}
header a.brand img{width:76px;height:76px;border-radius:18px;transform:rotate(-4deg);box-shadow:0 2px 0 rgba(0,0,0,.12)}
nav{font-family:var(--hand);font-size:1.25rem;gap:16px}
nav a{color:var(--fg);padding:0 3px;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 35%,transparent) 62%)}
nav a.home{background:none;display:inline-flex;align-items:center}
nav a.home img{width:118px;height:auto;transform:rotate(-3deg)}
/* the page itself: torn sketchbook paper taped to the desk */
main{position:relative;isolation:isolate;max-width:1060px;background:none;margin:26px auto 0;padding:40px clamp(18px,4vw,48px) 64px;transform:rotate(-.4deg);filter:drop-shadow(0 6px 10px rgba(60,40,10,.14))}
main::before{content:"";position:absolute;inset:0;background:var(--page);z-index:-1;clip-path:polygon(0 0,100% 0,100% 99.6%,96.4% 99.4%,92.9% 99.5%,89.3% 99.9%,85.7% 99.3%,82.1% 99.3%,78.6% 99.4%,75% 99.5%,71.4% 99.7%,67.9% 99.8%,64.3% 99.3%,60.7% 99.3%,57.1% 99.3%,53.6% 99.2%,50% 99.8%,46.4% 99.9%,42.9% 99.8%,39.3% 99.8%,35.7% 99.5%,32.1% 99.8%,28.6% 99.3%,25% 99.3%,21.4% 99.2%,17.9% 99.6%,14.3% 100%,10.7% 99.9%,7.1% 99.6%,3.6% 99.9%,0 99.8%)}
main>*{transform:rotate(.4deg)}
.tape{position:absolute;width:118px;height:30px;background:var(--tape);border-left:2px dashed var(--tape-edge);border-right:2px dashed var(--tape-edge);top:-6px;z-index:2}
.tape.a{left:8%;transform:rotate(-5deg)}.tape.b{right:8%;transform:rotate(6deg)}
h1,h2,h3{font-family:var(--hand);font-weight:400}
h1{font-size:clamp(2.2rem,5.5vw,3.2rem);line-height:1.05;color:var(--fg)}
h2{font-size:clamp(1.7rem,4vw,2.2rem);color:var(--acc);line-height:1.1}
h3{font-size:1.45rem;line-height:1.15}
h3 span{font-family:var(--hand)}
.lead{font-size:1.15rem}
a{color:var(--acc)}
/* crayon-outlined buttons */
.btn{position:relative;background:none!important;color:#fff;border:0!important;isolation:isolate;font-weight:700;border-radius:0}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);border:3px solid var(--acc);border-radius:6px 14px 8px 12px;filter:url(#wobble);z-index:-1}
.btn.off{color:var(--mut)}
.btn.off::before{background:transparent;border:3px dashed var(--mut)}
.card,details{background:var(--card);border:2px solid var(--line);border-radius:6px 14px 8px 12px}
summary{font-family:var(--hand);font-size:1.25rem;font-weight:400}
.gimg img,figure img{border-radius:4px}
.gimg{background:#fff;padding:8px 8px 10px;box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.gstep:nth-of-type(even) .gimg{transform:rotate(1.5deg)}
footer{max-width:1060px;margin-top:30px;border-top:0;justify-content:center;text-align:center}
footer .hand{font-family:var(--hand);font-size:1.2rem;width:100%;color:var(--fg)}
.sticker{position:absolute;width:clamp(56px,8vw,84px);filter:drop-shadow(0 3px 2px rgba(0,0,0,.18));z-index:3;pointer-events:none}
:focus-visible{outline:3px dashed var(--acc);outline-offset:4px}
@media(max-width:780px){main{transform:none}main>*{transform:none}header a.brand{font-size:1.8rem}header a.brand img{width:58px;height:58px}nav a.home img{width:92px}}