:root {
  --playa: #d8c4a0;
  --playa-light: #f0e2c6;
  --playa-dark: #b89f78;
  --slate: #262b28;
  --chalk: #f1efe6;
  --wood: #6b4a2b;
  --wood-dark: #3f2a17;
  --sign: #9fd3cf;
  --sign-light: #c2e6e2;
  --sign-ink: #8e1f1a;
  --chalk-font: "Cabin Sketch", "Gochi Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem) 16px;
  background: radial-gradient(ellipse at top, var(--playa-light) 0%, var(--playa) 45%, var(--playa-dark) 100%) fixed;
  color: var(--wood-dark);
  font-family: var(--chalk-font);
}

.wall {
  /* As wide as possible while the board, sign and form still fit on one screen. */
  width: min(100%, max(22rem, min(1200px, (100vh - 15rem) * 1.6)));
  margin: 0 auto;
}

.sign {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.9rem;
  padding: 0.3em 1.2em;
  background: linear-gradient(var(--sign-light), var(--sign));
  color: var(--sign-ink);
  font-family: var(--chalk-font);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  border: 3px solid #eaf6f4;
  outline: 2px solid #5a7f7b;
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.25);
}

.frame {
  padding: clamp(8px, 1.4vw, 16px);
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.07) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 23px),
    linear-gradient(#7a5533, #5c3e22);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.35), 0 14px 30px rgb(0 0 0 / 0.35);
}

.board-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--slate);
  line-height: 0;
}

#board { display: block; }

.ledge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 clamp(0px, 2vw, 1.5rem);
  padding: 0.8rem clamp(0.8rem, 2vw, 1.2rem);
  background: linear-gradient(var(--wood), var(--wood-dark));
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.3);
}

.ledge #fear {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1.25rem;
  color: var(--chalk);
  background: var(--slate);
  border: 2px solid rgb(255 255 255 / 0.15);
  border-radius: 4px;
}

.ledge #fear::placeholder { color: rgb(241 239 230 / 0.45); }

.ledge :focus-visible {
  outline: 2px dashed var(--chalk);
  outline-offset: 2px;
}

.counter {
  min-width: 3.5rem;
  color: #e8d9c0;
  font-size: 0.95rem;
  text-align: right;
}

.ledge button {
  padding: 0.4rem 1.1rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--slate);
  background: var(--chalk);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 0 #bdb8a6;
  cursor: pointer;
}

.ledge button:hover { background: #fff; }
.ledge button:disabled { opacity: 0.6; cursor: progress; }

.message {
  min-height: 1.6em;
  margin: 0.9rem 0 0;
  font-size: 1.15rem;
  text-align: center;
}

.message.error { color: var(--sign-ink); }

.note {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  text-align: center;
  opacity: 0.75;
}

.note a { color: inherit; }

.sign a {
  color: inherit;
  text-decoration: none;
}

.page {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--slate);
  color: var(--chalk);
  font: 1.05rem/1.6 system-ui, sans-serif;
}

.page > :first-child { margin-top: 0; }
.page > :last-child { margin-bottom: 0; }

.page h1,
.page h2 {
  margin: 1.6em 0 0.4em;
  font-family: var(--chalk-font);
  font-weight: 700;
  line-height: 1.2;
}

.page h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.page h2 { font-size: clamp(1.3rem, 3.5vw, 1.6rem); }
.page p,
.page ul { max-width: 65ch; }
.page li + li { margin-top: 0.4em; }
.page a { color: var(--sign); }

.page .back {
  margin-top: 2em;
  font-family: var(--chalk-font);
  font-size: 1.2rem;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}