/* Same "dark toon" recipe as the game: ink outline, colored hard offset shadow, cel gloss,
       asymmetric corners with a slight tilt, chunky Baloo 2 + cursive Caveat headings, halftone dots. */
    :root {
      --bg:#141210; --panel:#1d1a26; --text:#ece8f4; --muted:#b1a9c4;
      --ink:#06060c; --lav:#c68bff; --rose:#ff7eb6; --teal:#5fd6c8;
      --sh1:#2f2150; --sh2:#4a1f38; --sh3:#1d3a42; --sh4:#43331a;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0; color:var(--text);
      font:17px/1.65 "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      background:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px) 0 0 / 16px 16px,
        radial-gradient(900px 500px at 50% -10%, #2a1d44 0%, transparent 70%),
        var(--bg);
    }
    a { color:var(--lav); }
    .wrap { max-width:1000px; margin:0 auto; padding:0 16px 8px; }

    header.hero { max-width:1000px; margin:16px auto 0; padding:0 16px; }
    header.hero img {
      width:100%; height:auto; display:block;
      border:3px solid var(--ink); border-radius:22px 10px 22px 10px;
      box-shadow:7px 7px 0 var(--sh1), inset 0 2px 0 rgba(255,255,255,.25);
    }

    h1 {
      font-size:clamp(1.9rem,5.2vw,2.9rem); line-height:1.12; font-weight:800; margin:30px 0 10px;
      -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:4px 4px 0 var(--sh1);
    }
    h2 {
      font-family:"Caveat","Baloo 2",cursive; font-weight:700;
      font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.1; margin:48px 0 14px; color:var(--rose);
      -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:3px 3px 0 var(--sh2);
    }
    h3 { font-weight:700; font-size:1.15rem; margin:0 0 6px; }
    p { margin:0 0 14px; }
    .lede { font-size:1.18rem; color:var(--muted); }

    .cta { display:flex; flex-wrap:wrap; gap:14px; margin:26px 0; }
    .btn {
      display:inline-block; padding:13px 26px; font-weight:800; font-size:1.05rem; text-decoration:none;
      border:3px solid var(--ink); border-radius:14px 8px 14px 8px; color:var(--text);
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .btn-primary {
      color:#1a1024; background:linear-gradient(135deg,var(--lav),var(--rose));
      box-shadow:0 6px 0 #6b3d8f, inset 0 2px 0 rgba(255,255,255,.5);
    }
    .btn-ghost { background:var(--panel); box-shadow:0 6px 0 var(--sh1), inset 0 2px 0 rgba(255,255,255,.14); }
    .btn:hover { transform:translateY(-3px) rotate(-1deg); }
    .btn:active { transform:translateY(5px); box-shadow:0 1px 0 var(--ink); }

    .notice, .card, details {
      background:var(--panel); border:3px solid var(--ink);
      box-shadow:6px 6px 0 var(--sh1), inset 0 2px 0 rgba(255,255,255,.12);
    }
    .notice { border-radius:20px 9px 20px 9px; padding:16px 20px; margin:20px 0; box-shadow:6px 6px 0 var(--sh2), inset 0 2px 0 rgba(255,255,255,.12); }
    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
    .card { border-radius:20px 9px 20px 9px; padding:16px 20px; transform:rotate(-1deg); transition:transform .15s ease; }
    .card:nth-child(4n+2) { border-radius:9px 20px 9px 20px; transform:rotate(1.2deg); box-shadow:6px 6px 0 var(--sh2), inset 0 2px 0 rgba(255,255,255,.12); }
    .card:nth-child(4n+3) { transform:rotate(.8deg); box-shadow:6px 6px 0 var(--sh3), inset 0 2px 0 rgba(255,255,255,.12); }
    .card:nth-child(4n+4) { border-radius:9px 20px 9px 20px; transform:rotate(-1.2deg); box-shadow:6px 6px 0 var(--sh4), inset 0 2px 0 rgba(255,255,255,.12); }
    .card:hover { transform:rotate(0) translateY(-4px) scale(1.02); }
    .card h3 { color:var(--teal); }
    .card p { margin:0; color:var(--muted); }

    ul.plain { padding-left:22px; }
    ul.plain li { margin-bottom:8px; }

    details { border-radius:16px 8px 16px 8px; padding:12px 18px; margin:14px 0; }
    details:nth-of-type(even) { box-shadow:6px 6px 0 var(--sh3), inset 0 2px 0 rgba(255,255,255,.12); }
    summary { cursor:pointer; font-weight:800; font-size:1.05rem; }
    details p { margin:10px 0 2px; color:var(--muted); }

    footer { margin:64px auto 40px; color:var(--muted); font-size:.95rem; padding-top:22px; }
    footer p { margin-bottom:8px; }

    @media (prefers-reduced-motion: reduce) {
      .card, .card:nth-child(n), .btn { transition:none; }
      .card:hover, .btn:hover { transform:none; }
    }
  

    /* shared nav + prose pages */
    nav.top { max-width:1000px; margin:0 auto; padding:14px 16px 0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
    nav.top a { font-weight:800; text-decoration:none; color:var(--text); }
    nav.top a:hover { color:var(--rose); }
    nav.top .brand { font-family:"Caveat","Baloo 2",cursive; font-size:1.7rem; color:var(--lav); margin-right:auto; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; }
    .prose h2 { margin-top:38px; }
    .prose ul { padding-left:22px; } .prose li { margin-bottom:8px; }
    .crumbs { color:var(--muted); font-size:.92rem; margin:22px 0 0; }
    .crumbs a { color:var(--muted); }
    .tags { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
    .tags li { border:2px solid var(--ink); background:var(--panel); border-radius:12px 6px 12px 6px; padding:4px 14px; font-weight:700; box-shadow:3px 3px 0 var(--sh2); }