/* The Backyard Arcade home page. Direction 3, Brand Notepad: a cream sheet on an ink desk. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.desk { max-width: 560px; margin: 0 auto; padding: 24px 14px 32px; }

/* The sheet, with a second sheet peeking out underneath */
.sheet {
  position: relative;
  background: var(--paper);
  border-radius: 3px;
  padding: 36px 22px 32px;
  box-shadow: 6px 7px 0 -1px var(--paper-under), 0 18px 40px rgba(0,0,0,.45);
  transform: rotate(-0.4deg);
}
.sheet > .bracket.tl { top: 12px; left: 12px; }
.sheet > .bracket.br { right: 12px; bottom: 12px; }
.sheet > * { transform: rotate(0.4deg); }
.sheet > .bracket { transform: none; }

.eyebrow { font-size: 11px; color: var(--ink-dark); }
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 10vw, 48px);
  line-height: .98;
  letter-spacing: -.01em;
  margin-top: 8px;
}
.lede { font-size: 18px; font-weight: 500; margin-top: 14px; max-width: 30ch; }

/* Four gnome hosts with their games, standing on a ruled line.
   Each .gn sets its figure's viewBox size in --w and --h. --k is screen px per art unit, the same
   for all four, so they stand at one scale. The feet are on the bottom edge of every viewBox,
   so lining up the bottoms puts every foot on the line. art/index.html has the numbers. */
.gnomes {
  --k: .18;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  gap: 4px;
  margin: 6px -6px 0;
  border-bottom: 2px solid var(--ink);
}
.gn {
  flex: none;
  width: calc(var(--w) * var(--k) * 1px);
  height: calc(var(--h) * var(--k) * 1px);
  margin-bottom: -1px; /* feet on the line */
  transform-origin: 50% 100%;
}
.gn img { display: block; width: 100%; height: 100%; max-width: none; }
/* A ticked game: its host hops once (arcade.js adds .hop the first time) */
.gn.hop { animation: gn-hop .3s cubic-bezier(.3, .7, .4, 1.3); }
.gn.hop:nth-child(2) { animation-delay: .06s; } .gn.hop:nth-child(3) { animation-delay: .12s; } .gn.hop:nth-child(4) { animation-delay: .18s; }
@keyframes gn-hop {
  0% { transform: scale(1.06, .92); }
  45% { transform: translateY(-14px) scale(.96, 1.05); }
  80% { transform: translateY(0) scale(1.04, .96); }
  100% { transform: none; }
}
.done-line {
  font-family: var(--font-hand); font-weight: 700; font-size: 28px; line-height: 1.1;
  text-align: center; margin-top: 10px;
}

.section-label { font-size: 11px; color: var(--ink-dark); margin-top: 28px; }

/* The list */
.list { list-style: none; margin-top: 8px; }
.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--ink-light);
}
.box {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--ink);
  border-radius: 3px;
}
.box svg { position: absolute; left: -6px; top: -14px; width: 44px; height: 40px; overflow: visible; pointer-events: none; }
.box svg path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* List icons are masks from art/, so the colour comes from here */
.icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  background: var(--ink);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
[data-game="snowbank-standoff"] .icon { --icon: url("art/icon-snowbank-standoff.svg"); }
[data-game="snip-a-snowflake"] .icon { --icon: url("art/icon-snip-a-snowflake.svg"); }
[data-game="cookie-rush"] .icon { --icon: url("art/icon-cookie-rush.svg"); }
[data-game="light-detangler"] .icon { --icon: url("art/icon-light-detangler.svg"); }
.text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.desc { font-size: 14px; color: var(--ink-dark); margin-top: 2px; }

.go {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 15px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-button);
  min-width: 64px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  transition: background .15s;
}
a.row:hover .go, a.row:focus-visible .go { background: var(--green-darker); }
a.row:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
a.row:active .go { transform: translateY(1px); }


.item-fun { border-bottom: 0; }
.item-fun .row { min-height: 64px; }
.name-fun { font-family: var(--font-hand); font-weight: 700; font-size: 32px; line-height: 1; }

/* After the games */
.next { margin-top: 12px; }
.plan {
  margin-top: 10px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 22px 20px 22px;
  position: relative;
}
.plan-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.05; }
.plan p { color: var(--ink-light); margin-top: 10px; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 18px;
  background: var(--green);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-button);
  text-decoration: none;
}
.btn:hover { background: var(--green-dark); }
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.guide {
  margin-top: 16px;
  border: 2px dashed var(--ink-mid);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
.guide-label { font-size: 10.5px; color: var(--ink-dark); }
.guide-title { font-family: var(--font-display); font-size: 21px; line-height: 1.1; margin-top: 6px; }
.guide p:last-child { font-size: 15px; color: var(--ink-dark); margin-top: 6px; }

.foot { text-align: center; padding: 34px 0 8px; }
.foot img { display: inline-block; width: 140px; height: auto; }
.foot .mono-label { font-size: 11px; color: var(--ink-light); margin-top: 10px; }

/* Every game done: the 2027 call to action lifts off the page */
.next.is-raised .plan { box-shadow: 0 0 0 4px var(--green); transform: translateY(-3px); transition: transform .3s, box-shadow .3s; }

/* A tick drawing itself on */
.box svg.draw path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: tick-draw .45s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .box svg.draw path { animation: none; stroke-dashoffset: 0; }
  .gn.hop { animation: none; }
  .next.is-raised .plan { transform: none; transition: none; }
}

/* Phones: a tighter header, so the first two games show above the fold at 375 x 667 */
@media (max-width: 599px) {
  .desk { padding-top: 10px; }
  .sheet { padding-top: 22px; }
  .title { margin-top: 6px; }
  .lede { font-size: 16px; margin-top: 8px; max-width: 32ch; }
  .section-label { margin-top: 14px; }
  .row { min-height: 66px; padding: 10px 0; }
}

@media (min-width: 600px) {
  .desk { padding-top: 48px; }
  .sheet { padding: 48px 44px 40px; }
  .gnomes { --k: .25; margin-top: 14px; }
}