@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
:root{
  --paper:#FFF1B8; --paper-deep:#FFE58A; --ink:#2B1D4F; --ink-soft:#5A4B7A;
  --crayon:#FF5A5F; --white:#FFFDF6;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Fredoka,"Comic Sans MS","Segoe UI Rounded",system-ui,sans-serif;font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* hero: the dictation itself */
.hero{padding:40px 0 28px}
.brand{margin:0 0 36px;font-weight:600;font-size:18px;letter-spacing:.01em}
.brand a{text-decoration:none}
.brand span{display:inline-block;background:var(--ink);color:var(--paper);padding:4px 12px;border-radius:999px;transform:rotate(-2deg)}
.dictation{margin:0;max-width:20ch;font-weight:700;font-size:clamp(34px,6.4vw,76px);line-height:1.04;letter-spacing:-.015em;cursor:pointer;user-select:none}
.dictation q{quotes:"\201C" "\201D"}
.dictation q::before,.dictation q::after{color:var(--crayon)}
.dictation cite{display:block;margin-top:22px;font-style:normal;font-weight:500;font-size:clamp(17px,2vw,22px);color:var(--ink-soft);letter-spacing:0}
.dictation cite b{font-weight:600;color:var(--ink)}
.hint{margin:10px 0 0;font-size:15px;color:var(--ink-soft)}
.hint:before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--crayon);margin-right:8px;vertical-align:baseline}

/* shelf of games */
.shelf-title{margin:36px 0 18px;font-size:28px;font-weight:700}
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:34px 28px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tile{--c:var(--crayon);position:relative;background:var(--white);border:4px solid var(--ink);border-radius:22px;padding:14px 14px 18px;transform:rotate(var(--tilt,0deg));box-shadow:8px 8px 0 var(--c)}
.tile:nth-child(odd){--tilt:-.9deg}.tile:nth-child(even){--tilt:.8deg}.tile:nth-child(3n){--tilt:-.4deg}
.shot{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--c);border:3px solid var(--ink)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.tile h3{margin:16px 2px 4px;font-size:26px;line-height:1.1;font-weight:700}
.tile .tag{margin:0 2px 10px;color:var(--ink-soft);font-size:16px;line-height:1.35}
.tile .meta{margin:0 2px 14px;font-size:15px;font-weight:500}
.tile .meta em{font-style:normal;background:var(--c);color:var(--ink);padding:2px 9px;border-radius:999px;margin-right:6px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.play{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;font-size:19px;padding:10px 22px;border-radius:999px;border:3px solid var(--ink)}
.play:hover{background:var(--c);color:var(--ink)}
.play:active{transform:translateY(2px)}
.made{font-size:16px;font-weight:500;text-decoration-thickness:2px;text-underline-offset:3px}

/* the story */
.story{margin:64px 0 40px;padding:28px 0 0;border-top:4px dashed var(--ink);max-width:62ch}
.story h2{margin:0 0 12px;font-size:28px}
.story p{margin:0 0 14px}
.story .model{display:inline-block;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:600;font-size:16px}
footer{padding:0 0 40px;font-size:15px;color:var(--ink-soft)}

/* about pages */
.about-head{padding:32px 0 8px}
.about-head .back{display:inline-block;margin-bottom:26px;font-weight:500;text-decoration-thickness:2px;text-underline-offset:3px}
.about-head h1{margin:0 0 8px;font-size:clamp(34px,5vw,58px);line-height:1.05;font-weight:700;letter-spacing:-.01em}
.about-head .tag{margin:0 0 18px;font-size:20px;color:var(--ink-soft);max-width:44ch}
.facts{margin:0 0 6px;padding:0;list-style:none;display:flex;gap:10px 22px;flex-wrap:wrap;font-size:16px}
.facts li b{font-weight:600}
.transcript{margin:36px 0 40px;max-width:62ch}
.transcript h2{font-size:24px;margin:0 0 6px}
.transcript>p{margin:0 0 26px;color:var(--ink-soft)}
.turn{position:relative;margin:0 0 22px;padding-left:22px;border-left:6px solid var(--c)}
.turn time{display:block;font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.turn .who{font-weight:600;font-size:15px;color:var(--ink);margin:0 0 6px}
.turn p{margin:0 0 10px;font-size:19px}
.turn.answers{border-left-style:dotted}
.turn.answers .qa{margin:0;padding:0;list-style:none}
.turn.answers .qa li{margin:0 0 6px;font-size:17px}
.turn.answers .qa li b{font-weight:600}
.turn.answers .qa li span{color:var(--ink-soft)}
.reply{margin:0 0 22px 28px;padding:12px 16px;background:var(--white);border:3px solid var(--ink);border-radius:16px;font-size:16px;max-width:52ch}
.reply b{font-weight:600}
.playbar{margin:8px 0 0}

@media (max-width:520px){.tile{--tilt:0deg!important;box-shadow:6px 6px 0 var(--c)}.hero{padding-top:28px}.dictation cite{margin-top:16px}}
@media (prefers-reduced-motion:no-preference){.dictation q{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}}