/* Stories and grown-up pages (added 2026-10-09). Same look as index.html:
   sky-blue top bar with a wooden edge, grass background, wooden sign title,
   Fredoka headings and chunky toy buttons. Body text is Inter for easy reading aloud. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:#c8e5a7; color:#0B3654; font-family:'Inter',"Helvetica Neue",Arial,sans-serif; -webkit-text-size-adjust:100%; }
#sim-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px;
  background:linear-gradient(#69bff3,#a9dcfa); border-bottom:4px solid #b9793f; box-shadow:0 3px 0 #8a5528; }
#sim-topbar .title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:21px; color:#0B3654; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.toybtn{ display:inline-block; font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; text-decoration:none; padding:8px 14px;
  border-radius:14px; border:3px solid var(--edge); color:var(--ink); background:linear-gradient(var(--c1),var(--c2)); box-shadow:0 4px 0 var(--edge);
  transition:transform .07s ease, box-shadow .07s ease; }
.toybtn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--edge); }
.toybtn.purple{ --c1:#d4b0ff; --c2:#9b6be6; --edge:#6a3fb0; --ink:#25104a; }
.toybtn.orange{ --c1:#ffc27a; --c2:#f5891f; --edge:#a8540a; --ink:#3d1d00; }
.toybtn.white{ --c1:#ffffff; --c2:#e2e5e8; --edge:#9aa0a6; --ink:#0B3654; }
.ypage{ max-width:820px; margin:0 auto; padding:18px 16px 40px; }
.crumbs{ font-size:13px; color:#2f4a1e; margin:2px 0 10px; }
.crumbs a{ color:#2f4a1e; font-weight:600; }
.sign-wrap{ text-align:center; margin:6px 0 14px; }
.sign{ display:inline-block; margin:0; font-family:'Fredoka',sans-serif; font-size:clamp(24px,4.6vw,36px); font-weight:700; color:#fff8e8;
  background:linear-gradient(#c98a4f,#a86a35); border:4px solid #6e4320; border-radius:16px; padding:8px 24px 10px;
  box-shadow:0 5px 0 #5a3519, 0 8px 16px rgba(0,0,0,.18); text-shadow:0 2px 0 rgba(0,0,0,.25); transform:rotate(-1deg); line-height:1.15; }
.chips{ text-align:center; margin:0 0 16px; }
.chip{ display:inline-block; margin:3px; padding:4px 12px; border-radius:999px; background:#fffdf6; border:2px solid #9fd178; font-size:13px; font-weight:600; color:#2f4a1e; }
.ycard{ background:#fffdf6; border:3px solid #d9c7a3; border-radius:22px; padding:24px 28px 26px; margin:0 0 18px; box-shadow:0 6px 0 #c9b48a, 0 10px 20px rgba(0,0,0,.10); }
.ycard h2{ font-family:'Fredoka',sans-serif; font-weight:700; color:#0B3654; font-size:24px; margin:26px 0 8px; }
.ycard h3{ font-family:'Fredoka',sans-serif; font-weight:600; color:#0B3654; font-size:19px; margin:20px 0 6px; }
.ycard h2:first-child, .ycard > svg + h2{ margin-top:0; }
.ycard p, .ycard li, .ycard td{ font-size:16.5px; line-height:1.65; color:#1f3442; }
.ycard p{ margin:0 0 12px; }
.ycard ul, .ycard ol{ margin:0 0 14px; padding-left:24px; }
.ycard li{ margin-bottom:6px; }
.ycard a{ color:#1f6aa6; font-weight:600; }
.story p{ font-size:18.5px; line-height:1.75; }
.story-art{ display:block; width:100%; height:auto; border-radius:16px; border:3px solid #686c71; margin:0 0 20px; }
.big-line{ text-align:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:34px !important; letter-spacing:.08em; color:#a86a35 !important; margin:14px 0 !important; }
.the-end{ text-align:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px !important; color:#3f8a4f !important; margin-top:20px !important; }
.grownups{ background:#eef8fe; border-color:#9fd3f3; box-shadow:0 6px 0 #7fbfe6, 0 10px 20px rgba(0,0,0,.08); }
.grownups h2{ margin-top:0; }
.grownups .note{ font-size:14px; color:#4a6070; }
.grownups table{ border-collapse:collapse; width:100%; margin:6px 0 14px; }
.grownups th, .grownups td{ text-align:left; padding:7px 10px; border-bottom:1px solid #c6e3f5; vertical-align:top; font-size:15px; }
.grownups th{ font-family:'Fredoka',sans-serif; font-weight:600; }
.grownups td:first-child{ font-family:ui-monospace,Menlo,Consolas,monospace; white-space:nowrap; font-weight:700; }
ul.ask{ list-style:none; padding:14px 16px; background:#fff6d6; border:2px solid #f7bb1c; border-radius:14px; }
ul.ask li{ padding-left:28px; position:relative; }
ul.ask li::before{ content:"💬"; position:absolute; left:0; }
.tip{ border-left:5px solid #f7bb1c; background:#fff6d6; padding:12px 16px; border-radius:0 12px 12px 0; margin:10px 0 16px; font-size:16px; line-height:1.6; }
.prose .note{ font-size:14px; color:#4a6070; border-top:1px dashed #d9c7a3; padding-top:12px; margin-top:20px; }
.next-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:6px 0 10px; }
.related{ margin-top:26px; padding-top:16px; border-top:2px dashed #d9c7a3; }
.related h2{ font-size:20px; margin-top:0; }
.related ul{ list-style:none; padding:0; }
.related li span{ display:block; font-size:14.5px; color:#4a6070; }
.intro p:last-child{ margin-bottom:0; }
.pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0 0 18px; }
.agrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0 0 18px; }
.pcard, .acard{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fffdf6; border:4px solid #686c71; border-radius:22px; overflow:hidden;
  box-shadow:0 6px 0 #6f7377, 0 10px 18px rgba(0,0,0,.18); transition:transform .08s ease, box-shadow .08s ease; }
.pcard:hover, .acard:hover{ transform:translateY(-2px); }
.pcard:active, .acard:active{ transform:translateY(5px); box-shadow:0 1px 0 #6f7377; }
.pcard-art{ display:block; width:100%; height:auto; border-bottom:4px solid #686c71; }
.pcard-body{ display:flex; flex-direction:column; gap:4px; padding:12px 16px 16px; }
.acard{ padding:16px 18px; gap:6px; border-width:3px; }
.pcard-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:21px; color:#0B3654; line-height:1.15; }
.pcard-sub{ font-size:14px; color:#3d5566; line-height:1.4; }
.center-note{ text-align:center; font-size:15px; color:#2f4a1e; }
.center-note a{ color:#1f4d12; font-weight:600; }
.yfoot{ text-align:center; margin-top:26px; font-size:13.5px; color:#2f4a1e; }
.yfoot a{ color:#1f4d12; font-weight:600; }
.yfoot p{ margin:8px 0 0; opacity:.8; }
@media (max-width:640px){
  .pgrid, .agrid{ grid-template-columns:1fr; }
  .ycard{ padding:18px 16px 20px; }
  .story p{ font-size:17.5px; }
  #sim-topbar .title{ font-size:18px; }
  .toybtn{ font-size:14.5px; padding:7px 11px; }
}
@media (prefers-reduced-motion: reduce){ .pcard:hover, .acard:hover{ transform:none; } }