/* Hungry Flytrap: the game's own cartoon look. Thick dark outlines, cream panels, plant red. */
:root {
  --bg: #fff3d1;
  --dot: rgba(112, 209, 77, 0.28);
  --panel: #fffaea;
  --ink: #3d141c;
  --muted: #7d4b53;
  --outline: #2e0d14;
  --red: #f02426;
  --red-text: #a30d1a;
  --green: #3d8c2e;
  --chip: #eaf7dc;
  --sting: #ffde33;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c0610;
    --dot: rgba(112, 209, 77, 0.14);
    --panel: #2c0c17;
    --ink: #fff3e6;
    --muted: #e0b4ba;
    --outline: #000000;
    --red: #ff3b36;
    --red-text: #ff9a8f;
    --green: #8be06a;
    --chip: #213a1a;
    --sting: #ffde33;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 2px, transparent 2.5px);
  background-size: 26px 26px;
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }

/* Chunky rounded type, like the game's menus (SF Rounded on Apple devices). */
h1, h2, .sub, nav a, .bug, .foot {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", -apple-system, sans-serif;
}

header { text-align: center; margin-bottom: 28px; }
.icon {
  width: 124px; height: 124px;
  border-radius: 28px;
  border: 4px solid var(--outline);
  box-shadow: 0 7px 0 var(--outline);
  transform: rotate(-4deg);
}
.page .icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 5px 0 var(--outline); }

h1 {
  margin: 18px 0 2px;
  font-size: clamp(38px, 11vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--red);
  -webkit-text-stroke: 8px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--outline);
}
h1 .small { display: block; font-size: 0.5em; color: var(--sting); margin-bottom: 4px; }
.page h1 { font-size: clamp(30px, 8vw, 40px); -webkit-text-stroke: 6px var(--outline); text-shadow: 0 4px 0 var(--outline); }

.sub {
  margin-top: 14px;
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.28em;
}

nav { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
nav a {
  padding: 9px 20px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--outline);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-decoration: none;
}
nav a:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--outline); }
nav a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--outline); }

h2 {
  margin: 34px 0 10px;
  color: var(--red-text);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.card {
  background: var(--panel);
  border: 3px solid var(--outline);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--outline);
  padding: 4px 22px;
  margin-top: 14px;
}
.card.lead { font-size: 18px; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--red-text); text-underline-offset: 3px; }
strong { color: inherit; }

.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bug {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.3;
  padding: 9px 14px 10px;
  background: var(--chip);
  border: 3px solid var(--outline);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--outline);
  font-weight: 800;
}
.bug b { font-weight: 900; font-size: 15px; color: var(--green); white-space: nowrap; }
.bug.sting { background: var(--sting); color: #2b1a0e; }
.bug.sting b { color: #b3000f; }
.note { color: var(--muted); font-size: 15px; margin-top: 14px; }

.lede { text-align: center; color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 14px; font-weight: 700; margin-top: 40px; }