/* Pages around the game (contact, privacy) wear the same flyer look as the menu. */
:root {
  --red: #E30613;
  --red-deep: #9C1006;
  --red-night: #5b0a05;
  --yellow: #FFED00;
  --ink: #1d1a17;
  --paper: #fffdf5;
  --muted: #6d625a;
  --line: #e6d9ca;
  --green: #2e9e44;
  --f-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--red-night); }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, var(--red) 0%, var(--red-deep) 70%, var(--red-night) 100%) top / 100% 100vh no-repeat, var(--red-night);
  color: var(--ink);
  font: 600 16px/1.55 var(--f-body);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: var(--red); }
h1, h2, h3 { text-wrap: balance; }
.page {
  max-width: 640px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px));
}

/* header: the ladybug, the name and what this page is */
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.top .bug { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }
.brand { margin: 0; font: 800 34px/.86 var(--f-display); color: var(--yellow); text-shadow: 2px 3px 0 var(--red-night); }
.brand span { color: #fff; }
.chip {
  display: inline-block; margin-top: 5px; padding: 5px 9px 4px; border-radius: 6px; transform: rotate(-2deg);
  background: var(--yellow); color: var(--red); font: 800 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase;
}
.back {
  margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .65);
  color: #fff; font: 800 15px/1.1 var(--f-display); text-decoration: none; white-space: nowrap;
}
.back:active { transform: translateY(1px); }

/* the white sheet everything sits on */
.card { background: var(--paper); border-radius: 18px; padding: 20px 18px 22px; box-shadow: 0 6px 0 var(--red-night); }
.card h1 { margin: 0 0 6px; font: 800 30px/1.05 var(--f-display); color: var(--red); }
.card h2 { margin: 26px 0 4px; font: 800 21px/1.15 var(--f-display); }
.card p, .card li { margin: 6px 0; }
.card ul { padding-left: 22px; }
.lead { margin: 0; color: #4a423c; }
.muted { color: var(--muted); font-size: 14px; }
.box { margin: 10px 0; padding: 4px 14px; border-radius: 12px; background: #fff7d1; border: 2px solid #f1e3a0; }
.foot { margin: 18px 4px 0; text-align: center; font: 600 13px/1.45 var(--f-body); color: #f3b8b1; }
.foot a { color: inherit; }

/* buttons, as in the game */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 20px; border: 0; border-radius: 999px;
  font: 800 17px/1.1 var(--f-display); text-decoration: none; cursor: pointer; transition: transform .08s;
}
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-yellow { background: var(--yellow); color: var(--red); box-shadow: 0 3px 0 var(--red-deep); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-night); }
.btn-line { background: transparent; color: var(--ink); border: 2px solid rgba(29, 26, 23, .3); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.card button:focus-visible, .card a:focus-visible { outline-color: var(--red); }