@font-face {
  font-family: "Lilita One";
  src: url(../fonts/lilita-one-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url(../fonts/fredoka-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url(../fonts/fredoka-latin-500-normal.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url(../fonts/fredoka-latin-600-normal.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --deep: #10261a;
  --bg: #1b4d2e;
  --moss: #2c6b3f;
  --plaque-top: #3d774e;
  --edge: #183b23;
  --outline: #0b2416;
  --leaf: #5fcb3c;
  --gold: #ffc933;
  --tiger: #ff8a1f;
  --red: #e5412d;
  --cream: #fff4d6;
  --muted: #c3cfa9;
  --title: "Lilita One", "Fredoka", system-ui, sans-serif;
  --body: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  font-family: var(--body);
  font-size: 1.1rem;
  color: var(--cream);
  line-height: 1.55;
  background-color: var(--deep);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
h1,
h2,
h3 {
  font-family: var(--title);
  font-weight: 400;
  letter-spacing: 0.4px;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--outline);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* chunky game button */
.btn {
  --top: #8cda73;
  --bottom: #54b335;
  --base: #347021;
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  text-align: center;
  font-family: var(--title);
  font-size: 1.15rem;
  color: var(--outline);
  border: 2.5px solid var(--outline);
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(var(--top), var(--bottom));
  box-shadow:
    0 5px 0 var(--base),
    0 5px 0 2.5px var(--outline),
    0 10px 12px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--base),
    0 1px 0 2.5px var(--outline),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.btn.small {
  padding: 8px 20px;
  font-size: 1.05rem;
}
.btn.red {
  --top: #ec7668;
  --bottom: #c93928;
  --base: #7e2419;
  color: var(--cream);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* green plaque, like the app's dialogs */
.plaque {
  background: linear-gradient(var(--plaque-top), var(--moss));
  border: 2.5px solid var(--outline);
  border-radius: 18px;
  padding: 30px 32px 32px;
  box-shadow:
    0 7px 0 var(--edge),
    0 7px 0 2.5px var(--outline),
    0 16px 24px rgba(0, 0, 0, 0.4);
}
.plaque h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 12px;
  text-shadow: 0 3px 0 var(--outline);
}
.plaque p {
  color: var(--cream);
}

@media (max-width: 860px) {
  .plaque {
    padding: 24px 22px 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn {
    transition: none;
  }
}