/* home.css — the under-construction home page: a sketch on grid paper. */
.home { max-width: 46rem; padding-top: 2.5rem; padding-bottom: 1rem; }

/* ---- hero: boxed heading + scribbled side note ---- */
.uc-hero { position: relative; margin-bottom: 2.2rem; }
.uc-sign { position: relative; display: inline-block; padding: 1.4rem 2.2rem 1.6rem; }
.uc-sign h1 {
  position: relative; margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1; color: var(--text);
}
.uc-box, .uc-arrow { overflow: visible; }
.uc-box { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-box path, .uc-arrow path {
  fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1600; stroke-dashoffset: 1600; /* just over the box perimeter, in screen px */
  animation: draw 0.9s ease-out forwards;
}
.uc-box path:nth-child(2) { stroke: var(--accent); stroke-width: 1.5; opacity: 0.7; animation-delay: 0.5s; }
.uc-arrow path { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 200; animation-delay: 0.9s; }
.uc-arrow path:nth-child(2) { animation-delay: 1.4s; animation-duration: 0.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.uc-note {
  display: flex; align-items: flex-start; gap: 0.3rem;
  margin: 0.4rem 0 0 auto; width: max-content; max-width: 100%;
  font-family: var(--font-hand); font-size: 1.25rem; color: var(--muted);
  transform: rotate(-3deg);
}
.uc-arrow { width: 5.5rem; height: 3.2rem; flex: none; transform: scaleY(-1); margin-top: -1.4rem; }
.uc-note span { padding-top: 0.4rem; opacity: 0; animation: appear 0.4s ease-out 1.6s forwards; }
@keyframes appear { to { opacity: 1; } }

/* ---- copy ---- */
.home-copy { font-size: 1.12rem; max-width: 38rem; }
.home-copy .lede { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.35; margin: 0 0 0.9rem; }
.home-copy p { margin: 0 0 1rem; }
mark {
  color: inherit; padding: 0 0.15em;
  background: linear-gradient(transparent 45%, var(--marker) 45%, var(--marker) 92%, transparent 92%);
}

/* ---- drawing board list ---- */
.board {
  margin-top: 2.4rem; padding: 1.2rem 1.6rem 1.3rem;
  border: 2px dashed var(--panel-edge); border-radius: var(--wobble);
  transform: rotate(0.4deg);
}
.board h2 { margin: 0 0 0.7rem; font-size: 1.5rem; color: var(--muted); }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem;
  padding: 0.35rem 0; font-family: var(--font-hand); font-size: 1.3rem;
}
.board-list li + li { border-top: 1px dashed var(--panel-edge); }
.board-game { color: var(--text); }
.board-state { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); }
.board-state::before { content: '— '; }
.board-state.is-live { color: var(--accent); }

@media (max-width: 720px) {
  .home { padding-top: 1.6rem; }
  .uc-sign { padding: 1.1rem 1.4rem 1.2rem; }
  .uc-note { margin-right: 0.5rem; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-box path, .uc-arrow path { animation: none; stroke-dashoffset: 0; }
  .uc-note span { animation: none; opacity: 1; }
}