@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#301640;background:#271139}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#a855d6 0,transparent 35%),linear-gradient(145deg,#43216e,#20102d)}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.app{max-width:1240px;margin:auto;padding:18px}.top{display:flex;justify-content:space-between;align-items:center;gap:14px;color:white}.logo{font-size:clamp(24px,4vw,43px);font-weight:900;line-height:.9;text-shadow:3px 4px #2b1042,-2px -2px #ffca39;color:#ffcd42}.logo span{display:block;color:#ff78c8}.pill{border:2px solid #fbdcff;border-radius:40px;background:#572b7a;padding:10px 16px;color:#fff;font-weight:900}.panel{background:#fff0c8;border:4px solid #fff9e7;box-shadow:0 8px 0 #9d629c,0 16px 35px #1c0b2a80;border-radius:25px;padding:22px}.hero{text-align:center;padding:55px 10px;color:white}.hero h1{font-size:clamp(34px,6vw,72px);line-height:1.05;margin:0 0 18px;text-shadow:4px 5px #2b1042}.hero p{font-size:19px;max-width:650px;margin:0 auto 28px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.btn{background:linear-gradient(#ffde55,#ff9f20);color:#3b1c35;border:3px solid #fff6cb;border-radius:20px;padding:13px 23px;font-weight:900;box-shadow:0 5px 0 #b95b19}.btn.pink{background:linear-gradient(#ff95d7,#ed53a6);box-shadow:0 5px 0 #9b2d72}.btn.purple{background:linear-gradient(#b68af9,#7b3bc4);color:white;box-shadow:0 5px 0 #4a207d}.btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-2px)}.sectiontitle{text-align:center;color:white;font-size:clamp(24px,4vw,38px);margin:20px 0}.chaptergrid,.difficultygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:20px;margin:22px 0}.chapter{min-height:190px;text-align:left}.chapter h3{font-size:23px;margin:4px 0}.chapter p{margin:8px 0 16px}.muted{opacity:.75}.gamegrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:16px;margin-top:22px}.scene{min-height:440px;background:linear-gradient(150deg,#ffc87c,#f6a9b8 45%,#aa7dcb);position:relative;overflow:hidden;border:5px solid #f8d8a4;border-radius:26px;padding:20px}.scene:before{content:'✦  ✧   ✦   ✧  ✦';position:absolute;top:15px;right:15px;color:#fff8;letter-spacing:24px;font-size:30px}.scene h2{font-size:30px;margin:0;position:relative}.scene .subtitle{font-weight:900;color:#67326b}.people{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;margin-top:40px;position:relative}.person{width:32%;min-width:0;text-align:center}.portrait{width:100%;aspect-ratio:4/3;object-fit:cover;border:5px solid white;border-radius:24px;box-shadow:0 8px 0 #61315d;background:#a55eb8}.nametag{display:inline-block;background:#fff4cf;border:3px solid #f4c052;border-radius:16px;padding:7px 12px;font-weight:900;margin-top:12px;max-width:100%;overflow-wrap:anywhere}.prop{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#fff5d6;border:3px dashed #ab6a8b;border-radius:15px;padding:10px 20px;font-weight:900;text-align:center;max-width:92%}.side{display:flex;flex-direction:column;gap:16px}.side h3{font-size:25px;margin:0 0 12px}.side p{margin:8px 0;line-height:1.45}.quote{background:#fff9ed;border:2px solid #edc68b;border-radius:15px;padding:10px;margin:8px 0}.quote strong{color:#7338a3}.bottom{margin-top:20px;text-align:center}.answers{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.answer{min-width:155px;background:#ffe06d;border:3px solid white;border-radius:16px;padding:12px;font-weight:900;color:#34143b}.answer:nth-child(2){background:#f7a7d4}.answer:nth-child(3){background:#a8e5a0}.feedback{margin-top:20px;padding:20px;border-radius:18px;background:#fff9e8;text-align:left}.stars{font-size:28px;color:#f9b400}.small{font-size:13px}.navrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin:15px 0}.hint{background:#e9d9ff;border-left:5px solid #8339bf;border-radius:12px;padding:12px;margin:8px 0}.footer{text-align:center;color:#e8c8f5;padding:30px 10px;font-size:13px}@media(max-width:780px){.app{padding:10px}.gamegrid{grid-template-columns:1fr}.scene{min-height:370px;padding:14px}.people{margin-top:36px}.portrait{border-width:3px;border-radius:15px}.nametag{font-size:12px;padding:5px}.prop{font-size:12px}.panel{padding:15px}.top .pill{font-size:12px;padding:8px}.hero{padding:55px 10px}.scene h2{font-size:23px}}