/* Wick's one-pager, in the game's Moonlit Storybook look (docs/art-style.md).
   Picture-book night: the moon rearmost, warm light only from flames, everything hangs from or stands on something.
   Wick hangs from his hook on the cottage's porch, as in the game's first level; the pictures dry on a line beside it. */

@font-face {
  font-family: "Wick Lettering";
  src: url("art/wick-lettering.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Night sky */
  --night-top: #0B1128;
  --night: #0E1630;
  --midnight: #1B2A4A;
  --dusk: #2C4170;
  --haze: #3D5A8A;
  --rim: #B9CCF0;
  /* Warm light */
  --cream: #FFE9B8;
  --amber: #FFB347;
  --flame: #FF9A3C;
  /* Materials */
  --wood: #8A6A4A;
  --wood-light: #9C7A55;
  --wood-ink: #4A3826;
  --brass: #C4AE80;
  --brass-ink: #57452E;
  --peg: #C8B48C;
  --rope: #D8CBB0;
  --rope-ink: #6B5F4C;
  --grass-deep: #2D4D32; /* the grass tile's colour at its lower edge, so no seam shows */
  --soil: #141F24;
  /* Sizes */
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --shot-w: clamp(132px, 13.2vw, 220px);
  --porch-h: clamp(560px, 51vw, 680px);
}

* { box-sizing: border-box; }

html {
  background: var(--soil);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  background: linear-gradient(180deg, var(--night-top) 0, var(--night) 280px, var(--midnight) 74%, var(--dusk) 100%);
  font: 400 20px/1.35 "Wick Lettering", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- The sky: stars, the moon's glow, the moon, a cloud. Always behind everything. ---------- */

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("art/stars.webp") 0 0 / 560px 560px repeat;
}

.moon {
  --size: clamp(166px, 34vw, 440px);
  position: absolute;
  top: clamp(14px, 4vw, 56px);
  right: max(-34px, calc(50% - 600px));
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

/* The moon's glow, in the game's moonglow colour. */
.moon::before {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(189 209 255 / .55) 45%, rgb(189 209 255 / .2) 58%, rgb(189 209 255 / .07) 78%, rgb(189 209 255 / 0));
}

.moon img { position: relative; width: 100%; height: 100%; }

.cloud {
  position: absolute;
  top: clamp(150px, 27vw, 360px);
  right: max(120px, calc(50% - 300px));
  width: clamp(150px, 22vw, 300px);
  animation: drift 70s ease-in-out infinite alternate;
}

@keyframes drift { from { transform: translateX(-24px); } to { transform: translateX(38px); } }

/* ---------- The words ---------- */

.hero {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-block: clamp(36px, 7vw, 84px) clamp(28px, 4vw, 44px);
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: grid;
  justify-items: start;
  gap: clamp(16px, 2.4vw, 26px);
}

.name { margin: 0; font: inherit; display: grid; gap: 2px; }

.wordmark { width: clamp(230px, 34vw, 420px); margin-left: -6px; }

.subtitle {
  font-size: clamp(25px, 3.2vw, 38px);
  color: var(--cream);
  padding-left: 6px;
  text-shadow: 0 2px 10px rgb(11 17 40 / .85);
}

.line {
  margin: 0;
  max-width: 24em;
  font-size: clamp(20px, 2.1vw, 25px);
  color: var(--rim);
  text-wrap: balance;
  text-shadow: 0 1px 10px rgb(11 17 40 / .9);
}

/* Not buttons yet: they say where the game will be, and nothing to press. */
.stores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.soon {
  display: grid;
  min-width: 152px;
  padding: 9px 20px 10px;
  border-radius: 999px;
  border: 2px solid var(--brass-ink);
  background: linear-gradient(180deg, var(--midnight), var(--night));
  box-shadow: inset 0 1.5px 0 rgb(185 204 240 / .25);
}

.store { font-size: 21px; color: var(--cream); line-height: 1.15; }
.when { font-size: 16px; color: var(--amber); line-height: 1.2; }

/* The real badges, after launch. Apple: 40 px or taller, App Store first, a quarter of the height clear all round.
   Google: the same size or larger beside it. Neither may be animated or changed. */
.badge { display: block; padding: 11px; margin: -11px; }
.badge img { height: 44px; width: auto; }

/* ---------- The yard: the town, then whatever holds the pictures ---------- */

.yard {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.town {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px; /* its foot goes behind the grass */
  height: 170px;
  background: url("art/far-town.webp") 0 100% / 510px 170px repeat-x;
  opacity: .9;
  pointer-events: none;
}

.row-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  outline-offset: -4px;
}
.row-scroll::-webkit-scrollbar { display: none; }

/* The cottage stands against the page's left edge, and the line runs on beside it. */
.row {
  position: relative;
  min-width: 100%;
  width: max-content;
  display: flex;
  align-items: flex-end;
  padding-right: var(--gutter-r);
  padding-bottom: 35px; /* the part of the grass strip below the ground line */
}

/* The grass is part of the row, so the ground moves with the house and the laundry. */
.row::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background:
    url("art/groundedge-grass.webp") 0 0 / 256px 64px repeat-x,
    linear-gradient(180deg, transparent 0 40px, var(--grass-deep) 40px);
  pointer-events: none;
}

/* The porch picture's foot is the grass line. Its numbers come from tools/make_porch.py. */
.porch {
  position: relative;
  flex: none;
  height: var(--porch-h);
  aspect-ratio: 704 / 1448;
}
.porch-art { width: 100%; height: 100%; }

/* Wick hangs by his handle from the hook; his ring's inner top is 6.07 % down his picture. */
.wick {
  position: absolute;
  z-index: 2;
  left: 81.25%;
  top: 60.68%;
  width: 23%;
  margin-left: -11.5%;
  transform-origin: 50% 6%;
  animation: sway 6.5s ease-in-out infinite;
}
.wick img { position: relative; width: 100%; height: auto; }

/* The warm circle of Wick's light, on whatever is behind him. It's centred on his flame. */
.wick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 179 71 / .34), rgb(255 154 60 / .12) 52%, rgb(255 154 60 / 0));
  pointer-events: none;
}

/* The washing line: from post to post on the grass, not touching the porch. */
.laundry {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  justify-content: space-between;
  gap: clamp(14px, 1.8vw, 28px);
  margin-left: clamp(26px, 4vw, 56px);
  padding-top: 34px;
  padding-bottom: 66px;
}

.laundry::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 9px;
  right: 9px;
  height: 7px;
  border-radius: 4px;
  border: 1.5px solid var(--rope-ink);
  background: repeating-linear-gradient(115deg, var(--rope) 0 5px, #AFA188 5px 7px);
}

.post {
  position: relative;
  z-index: 2;
  flex: none;
  width: 18px;
  margin-top: -34px;
  margin-bottom: -66px;
  border-radius: 7px 7px 0 0;
  border: 2px solid var(--wood-ink);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--wood-light), var(--wood) 55%, #6E5339);
}

.shot {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 0;
  width: var(--shot-w);
  aspect-ratio: 645 / 1398; /* the phone's portrait shape */
  border-radius: 20px;
  border: 3px solid var(--brass-ink);
  background: var(--night);
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px var(--brass-ink), 0 10px 18px rgb(11 17 40 / .5);
  margin-top: 24px;
  transform-origin: 50% -24px;
  animation: sway 7.5s ease-in-out infinite;
}
.shot:nth-of-type(2n) { animation-duration: 8.6s; animation-delay: -3s; }
.shot:nth-of-type(3n) { animation-duration: 6.9s; animation-delay: -5s; }

/* Two wooden pegs clip each picture to the line. */
.shot::before,
.shot::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -32px;
  width: 15px;
  height: 46px;
  background: url("art/line-peg.svg") center / contain no-repeat;
}
.shot::before { left: 18%; }
.shot::after { right: 18%; }

@keyframes sway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }

.shot > img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

.empty {
  position: absolute;
  inset: 8px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 12px;
  border: 2.5px dashed rgb(185 204 240 / .4);
  background: linear-gradient(180deg, var(--midnight), var(--night));
  text-align: center;
}
.empty b { font-weight: 400; font-size: 21px; color: var(--rim); }
.empty small { font-size: 16px; color: var(--amber); }

/* ---------- The footer, on the soil under the grass ---------- */

.ground {
  position: relative;
  padding-block: 27px 26px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  background: linear-gradient(180deg, var(--grass-deep), var(--soil) 86px);
}

.ground nav { display: flex; justify-content: center; gap: 30px; }

.ground a {
  display: inline-block;
  padding: 8px 6px;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: rgb(255 233 184 / .4);
}
.ground a:hover { text-decoration-color: var(--amber); }
a:focus-visible, .row-scroll:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

/* ---------- The small pages: privacy, support ---------- */

.plain main {
  width: 100%;
  max-width: 34em;
  margin-inline: auto;
  padding-block: 32px 48px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.plain .wordmark { width: 170px; }
.plain h1 { font-size: 34px; font-weight: 400; margin: 20px 0 8px; }
.plain p { margin: 0; color: var(--rim); }

/* ---------- Phones: the moon keeps clear of the words, and the row slides sideways ---------- */

@media (max-width: 760px) {
  .moon { right: -38px; }
  .cloud { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .wick, .shot { animation: none !important; }
}