/* Prompt a Game: the Paper Sketch style.
   Notebook paper, blue marker, a red margin line. Headlines in handwriting (Caveat), everything you read in Inter.
   Rules of the house:
   - the name is written "Prompt a Game", with a plain lowercase a;
   - exactly ONE blinking cursor (.cursor) per page, where you type a prompt; never in the logo. */

:root{
  --paper:#f5f0e4; --ink:#2b2b33; --blue:#2c6bd1; --red:#e4473a; --yellow:#ffe066; --pencil:#6c6c76; --tape:#f7d36b; --card:#fffdf6;
  --hand:'Caveat','Comic Sans MS',cursive; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wob:255px 18px 225px 18px/18px 225px 18px 255px;     /* a wobbly, hand-drawn corner */
  --wob2:18px 235px 22px 245px/240px 20px 250px 22px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{color:var(--ink);font:400 17px/1.7 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:linear-gradient(rgba(44,107,209,.08) 1px,transparent 1px) 0 0/100% 34px,radial-gradient(circle at 20% 10%,#fff8,transparent 50%),var(--paper)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 30px;position:relative}
.wrap::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:rgba(228,71,58,.35)}   /* the margin line of a school notebook */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---- header ---- */
header.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:20px;flex-wrap:wrap}
.logo{display:block;line-height:0}
.logo svg{height:54px;width:auto;overflow:visible}
header.top nav ul{display:flex;gap:28px;list-style:none;font:600 26px var(--hand)}
header.top nav a{border-bottom:3px solid transparent}
header.top nav a:hover,header.top nav a[aria-current]{background:linear-gradient(transparent 55%,var(--yellow) 55%)}

/* ---- THE cursor: a prompt is a blinking cursor ---- */
.cursor{display:inline-block;animation:blink 1.06s steps(1,end) infinite}
.cursor.block{width:.46em;height:.78em;background:var(--blue);margin-left:.1em;border-radius:6px 3px 7px 3px;vertical-align:-.04em}
.cursor.us{width:.6em;height:.12em;background:var(--blue);margin-left:.15em;border-radius:99px;vertical-align:baseline}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}html{scroll-behavior:auto}}

/* ---- type ---- */
h1{font:700 clamp(54px,8vw,104px)/.92 var(--hand)}
h1 .u{color:var(--blue);position:relative;display:inline-block}
h1 .u::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-6px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 30 2 50 13 80 7 S 140 3 198 8' fill='none' stroke='%23e4473a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
h2{font:700 clamp(40px,5vw,62px)/1 var(--hand);color:var(--blue);margin-bottom:8px}
h3{font:700 36px/1.05 var(--hand)}
.note{font:600 26px/1 var(--hand);color:var(--pencil);transform:rotate(-2deg);display:inline-block;margin-bottom:14px}
.sub{font:500 26px/1.25 var(--hand);color:var(--pencil);margin-bottom:34px;max-width:620px}
.lead{margin:24px 0 30px;max-width:520px;font-size:18px;color:#45454f}
mark{background:linear-gradient(transparent 55%,var(--yellow) 55%);color:inherit;padding:0 2px}
section{padding:46px 0}
p+p{margin-top:12px}
.prose{max-width:720px}
.prose h2{margin-top:10px}
.prose ul,.prose ol{padding-left:22px;margin:10px 0}
.prose li{margin:4px 0}
code,kbd{font:500 .92em ui-monospace,SFMono-Regular,Menlo,monospace;background:#ece6d6;border-radius:5px;padding:1px 6px}

/* ---- buttons ---- */
.cta{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.btn{font:700 30px/1 var(--hand);padding:14px 30px 12px;border:3px solid var(--blue);border-radius:var(--wob);color:var(--blue);background:#fff9;transition:.15s;display:inline-block;cursor:pointer}
.btn:hover{background:var(--blue);color:#fff;transform:rotate(-1.5deg) scale(1.03)}
.btn.alt{border-color:var(--ink);color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:#fff}
.btn.big{font-size:36px;padding:18px 38px 16px}
.tags{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;font:600 22px var(--hand);color:var(--pencil)}
.tags span::before{content:"✓ ";color:var(--red)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:24px 0 70px}
.stage{position:relative;aspect-ratio:1/.9}
.stage svg{width:100%;height:100%;overflow:visible}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wob2);padding:30px 26px;position:relative;box-shadow:5px 6px 0 rgba(43,43,51,.12)}
.step:nth-child(1){transform:rotate(-1.4deg)}.step:nth-child(2){transform:rotate(1deg)}.step:nth-child(3){transform:rotate(-.7deg)}
.step::before,.card-tape::before{content:"";position:absolute;top:-14px;left:50%;width:92px;height:28px;margin-left:-46px;background:var(--tape);opacity:.85;transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.step .n{font:700 64px/1 var(--hand);color:var(--red)}
.step h3{color:var(--blue);margin:2px 0 8px;font-size:40px}
.step p{font-size:16px;color:#45454f}

/* ---- games ---- */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.game{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wob);padding:14px 14px 22px;box-shadow:5px 6px 0 rgba(43,43,51,.12);display:flex;flex-direction:column;position:relative}
.game:nth-child(odd){transform:rotate(-1deg)}.game:nth-child(even){transform:rotate(1.2deg)}
a.game{transition:.2s}a.game:hover{transform:rotate(0) scale(1.02)}
.shot{aspect-ratio:16/10;border:2px solid var(--blue);border-radius:10px;background:#fff;position:relative;overflow:hidden}
.shot svg{width:100%;height:100%;display:block}
.game .txt{padding:14px 10px 0;display:flex;flex-direction:column;flex:1}
.game h3{font-size:38px;margin-bottom:4px}
.game p{font-size:15.5px;color:#45454f}
.go{margin-top:auto;padding-top:12px;font:700 28px/1 var(--hand);color:var(--red)}
.go.soon{color:var(--pencil)}
.stamp{position:absolute;top:22px;right:-6px;z-index:2;font:700 24px/1 var(--hand);color:var(--red);border:2.5px solid var(--red);border-radius:8px;padding:5px 12px 3px;transform:rotate(7deg);background:#fffdf6e6}
.game.empty{border-style:dashed;border-color:var(--pencil);background:transparent;box-shadow:none;align-items:center;justify-content:center;text-align:center;min-height:150px;padding:24px 30px;grid-column:1/-1;transform:none!important}
.game.empty>div{display:flex;align-items:center;gap:26px;text-align:left;flex-wrap:wrap;justify-content:center}
.game.empty .plus{font:700 90px/.8 var(--hand);color:var(--red)}
.game.empty h3{margin:0}

/* ---- events ---- */
.events{background:var(--yellow);border:2.5px solid var(--ink);border-radius:var(--wob2);padding:34px 40px;display:flex;gap:30px;justify-content:space-between;align-items:center;flex-wrap:wrap;transform:rotate(-.6deg);box-shadow:6px 7px 0 rgba(43,43,51,.14)}
.events h3{font-size:46px;margin-bottom:6px}
.events p{max-width:540px}
.btn.w{border-color:var(--ink);color:var(--ink);background:#fff}
.btn.w:hover{background:var(--ink);color:#fff}

/* ---- handbook ---- */
.guide{display:grid;grid-template-columns:230px 1fr;gap:48px;padding:10px 0 40px;align-items:start}
.toc{position:sticky;top:20px;font:600 26px/1.15 var(--hand);display:flex;flex-direction:column;gap:6px}
.toc a{color:var(--pencil);padding:2px 0}
.toc a:hover{color:var(--blue)}
.toc small{font:600 15px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--pencil);margin-bottom:6px}
.chapter{padding:26px 0 8px;scroll-margin-top:20px}
.chapter .num{font:700 74px/.8 var(--hand);color:var(--red);display:block;margin-bottom:2px}
.chapter h2{font-size:clamp(38px,4.4vw,54px)}
.paper{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--wob2);padding:26px 28px;margin:18px 0;box-shadow:5px 6px 0 rgba(43,43,51,.12)}
.paper.tape{position:relative}.paper.tape::before{content:"";position:absolute;top:-14px;left:40px;width:92px;height:28px;background:var(--tape);opacity:.85;transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.paper h3{font-size:34px;color:var(--blue);margin-bottom:6px}
.needs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0}
.needs .paper{margin:0;padding:18px 22px}
.needs h3{font-size:30px}
.prompt{background:#1f2530;color:#e9eef7;border-radius:14px;padding:20px 24px 22px;margin:18px 0;font:500 16px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;position:relative;border:3px solid var(--ink);box-shadow:5px 6px 0 rgba(43,43,51,.18)}
.prompt .label{font:600 22px var(--hand);color:#ffe066;display:block;margin-bottom:6px}
.prompt .cursor.us,.prompt .cursor.block{background:#ffe066}
.prompt button{position:absolute;top:12px;right:12px;font:600 14px var(--body);background:#fff2;color:#fff;border:1px solid #fff6;border-radius:99px;padding:5px 14px;cursor:pointer}
.prompt button:hover{background:#fff4}
details{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:4px 20px;margin:12px 0;box-shadow:4px 5px 0 rgba(43,43,51,.1)}
details summary{font:700 28px/1.3 var(--hand);color:var(--blue);cursor:pointer;padding:8px 0;list-style:none}
details summary::before{content:"+ ";color:var(--red)}
details[open] summary::before{content:"– "}
details p,details ul{margin:2px 0 14px}
.callout{border-left:5px solid var(--red);background:#fff7d6;padding:12px 18px;border-radius:0 12px 12px 0;margin:16px 0;font-size:16px}
.download{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.download small{color:var(--pencil);font-size:14.5px;display:block;margin-top:6px}

/* ---- footer ---- */
footer.bottom{padding:50px 0 70px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:600 24px var(--hand);color:var(--pencil)}
footer.bottom a:hover{color:var(--blue)}

@media (max-width:900px){
  .hero,.steps,.games,.guide,.needs{grid-template-columns:1fr}
  header.top nav ul{gap:18px;font-size:23px}
  .step,.game{transform:none!important}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .toc small{width:100%}
  .events{padding:26px}
}
@media (max-width:520px){.wrap{padding:0 22px}.logo svg{height:46px}.btn{font-size:27px}}

/* the original drawing, pinned behind the stylised picture of a game (same height as a plain picture: 16:10) */
.shotwrap{position:relative;aspect-ratio:16/10}
.shotwrap .shot{position:absolute;right:0;bottom:0;width:62%;aspect-ratio:16/10;box-shadow:3px 4px 0 rgba(43,43,51,.18)}
.shotwrap.plain .shot{width:100%}
.shotwrap .orig{position:absolute;left:0;top:0;width:72%;height:auto;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink);border-radius:5px;background:#fff;transform:rotate(-3deg);box-shadow:2px 3px 0 rgba(43,43,51,.14)}
.origcap{position:absolute;right:4px;top:6px;max-width:30%;text-align:center;font:700 19px/1.05 var(--hand);color:var(--blue);transform:rotate(3deg)}

/* click the sketch: it opens large in the middle of the screen; click again and it goes back behind the picture */
.shotwrap .orig{cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease;transform-origin:50% 50%}
.shotwrap .shot{z-index:1}
.shotwrap.front .orig{z-index:5;cursor:zoom-out;transform:translate(var(--dx,0),var(--dy,0)) rotate(-1deg) scale(var(--s,1.4));box-shadow:8px 10px 0 rgba(43,43,51,.22),0 18px 40px rgba(43,43,51,.3)}
.shotwrap.front .origcap{opacity:0}
.origcap{transition:opacity .2s}
.game:has(.shotwrap.front){z-index:30}
.veil{position:fixed;inset:0;z-index:25;background:rgba(43,43,51,.42);opacity:0;pointer-events:none;transition:opacity .3s}
.veil.on{opacity:1;pointer-events:auto;cursor:zoom-out}
@media (prefers-reduced-motion:reduce){.shotwrap .orig,.veil{transition:none}}

/* the open-invitation card on the home page */
.game.empty .emptytxt h3 a{color:inherit}
.game.empty .emptytxt h3 a::after{content:'';position:absolute;inset:0}
.game.empty .emptytxt p.small{font-size:14px;color:#63636c;margin-top:6px;max-width:520px}
.game.empty .emptytxt p.small a{position:relative;z-index:1;text-decoration:underline}
/* the table of links on the instructions page */
.links{border-collapse:collapse;width:100%;margin:12px 0 16px;font-size:15px}
.links th,.links td{text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--pencil,#bbb);vertical-align:top}
.links th{font:700 20px/1 var(--hand)}
.links code{overflow-wrap:anywhere}
@media (max-width:720px){.links th:nth-child(2),.links td:nth-child(2){display:none}}

/* the set-up animation on the instructions page: one colour, line drawing */
.setup{margin:28px 0 36px}
.setup svg{width:100%;height:auto;display:block;overflow:visible;fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.setup text{fill:var(--blue);stroke:none;font:700 26px var(--hand)}
.setup .spin{transform-origin:0 0;animation:sway var(--d,5s) ease-in-out var(--l,0s) infinite}
.setup .drift{animation:drift var(--dd,7s) ease-in-out var(--l,0s) infinite alternate}
.setup .sig{stroke-width:2.5;stroke-dasharray:3 9;animation:flow 1.2s linear infinite}
.setup figcaption{margin-top:10px;text-align:center;font-size:15px;color:var(--pencil)}
@keyframes sway{0%,100%{transform:rotate(-42deg)}50%{transform:rotate(52deg)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,14px),var(--dy,-10px))}}
@keyframes flow{to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion:reduce){.setup .spin,.setup .drift,.setup .sig{animation:none}.setup .spin{transform:rotate(20deg)}}