/* Sled Dogs. A kennel yard at white midnight: flat polar sky, snow, and one plank board standing
   in it with tonight's field on it. Type is clean and heavy over pixel art, the way the plate he
   dropped sets it. Nothing here is a drawn object: every object on the page is a generated plate
   (art/*.webp), and this file only places them, sizes them and sets the words on them. */

:root {
  --sky: #3f97dd;
  --sky-low: #63b0ec;
  --snow: #f4f7fa;
  --cream: #ece7dc;
  --cream-deep: #d9d2c3;
  --ink: #0f1822;
  --ink-soft: #3d4f63;
  --orange: #f1641f;
  --brass: #d9a63e;
  --wood: #6f5637;
  --display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --edge: 3px solid var(--ink);
  --pad: clamp(14px, 3vw, 28px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--sky);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ the yard */

.yard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4vw, 40px) var(--pad) calc(env(safe-area-inset-bottom) + 40px);
  gap: clamp(12px, 2vw, 22px);
  position: relative;
  isolation: isolate;
}

/* the snow the whole yard stands in: a flat field under a flat sky, like the plate */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    url("art/snow.webp") bottom center / 100% 46% no-repeat,
    linear-gradient(var(--sky) 0 54%, var(--snow) 54% 100%);
}

/* ------------------------------------------------------------------ the doghouses (the nav) */

.houses {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.2vw, 16px);
  align-items: end;
}

.house {
  appearance: none;
  border: 0;
  background: url("art/house.webp") center bottom / contain no-repeat;
  background-color: transparent;
  cursor: pointer;
  min-height: 104px;
  padding: 0 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: 0.08em;
  color: var(--cream);
  filter: saturate(0.85) brightness(0.94);
  transition: filter 120ms ease, transform 120ms ease;
}

.house .word {
  background: var(--ink);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 2px;
}

.house:hover {
  filter: none;
}

.house[aria-selected="true"] {
  filter: none;
  transform: translateY(-4px);
}

.house[aria-selected="true"] .word {
  background: var(--orange);
  color: #fff;
}

/* ------------------------------------------------------------------ the board */

.board {
  width: min(1180px, 100%);
  position: relative;
  background: url("art/board.webp") center top / 100% 100% no-repeat, var(--cream);
  border: var(--edge);
  border-radius: 2px;
  padding: clamp(12px, 2vw, 22px);
  box-shadow: 0 18px 0 rgba(15, 24, 34, 0.18);
}

.plank {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.4vw, 18px);
  padding: 0 0 12px;
  border-bottom: var(--edge);
  margin-bottom: 12px;
}

.plank .cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plank strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: 0.02em;
  line-height: 1.05;
}

/* ------------------------------------------------------------------ the sheet */

.sheet {
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.empty {
  margin: 0;
  padding: 28px 4px;
  color: var(--ink-soft);
}

.row {
  display: grid;
  grid-template-columns: 56px 4.5em 1fr auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  padding: 8px 4px;
  border-bottom: 1px solid rgba(15, 24, 34, 0.18);
}

.row:last-child {
  border-bottom: 0;
}

.row.mine {
  background: rgba(241, 100, 31, 0.1);
}

.row.out {
  opacity: 0.55;
}

.row canvas {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

.row .no {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
}

.row .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  min-width: 0;
}

.row .stats b {
  color: var(--ink);
  font-weight: 700;
}

.podium .row {
  border-bottom: 0;
  background: rgba(217, 166, 62, 0.16);
  margin-bottom: 6px;
}

.place {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
}

button.act,
a.act {
  appearance: none;
  min-height: 48px;
  padding: 0 18px;
  border: var(--edge);
  border-radius: 2px;
  background: var(--orange);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 90ms ease;
}

button.act:active,
a.act:active {
  transform: translateY(2px);
}

button.act[disabled] {
  background: var(--cream-deep);
  color: var(--ink-soft);
  cursor: not-allowed;
}

button.act.small {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}

/* ------------------------------------------------------------------ panels inside the sheet */

.panel {
  padding: 6px 2px 14px;
  max-width: 62ch;
}

.panel h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  margin: 10px 0 6px;
}

.panel p,
.panel li {
  font-size: 16px;
  color: var(--ink-soft);
}

.panel p b,
.panel li b {
  color: var(--ink);
}

.panel ol,
.panel ul {
  padding-left: 1.1em;
}

.seedline {
  font-size: 13px;
  word-break: break-all;
  color: var(--ink-soft);
}

.mintrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}

.mintrow input {
  width: 92px;
  min-height: 48px;
  padding: 0 12px;
  border: var(--edge);
  border-radius: 2px;
  background: #fff;
  font-family: var(--mono);
  font-size: 17px;
}

.note {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.note.bad {
  color: #a3281a;
}

/* ------------------------------------------------------------------ the X plate on the upright */

.xplate {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 52px;
  height: 52px;
  border: var(--edge);
  border-radius: 2px;
  background: var(--cream);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 0 rgba(15, 24, 34, 0.3);
}

.xplate.off {
  width: auto;
  height: auto;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--cream-deep);
  box-shadow: none;
}

/* ------------------------------------------------------------------ the ground: sled and sack */

.ground {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(12px, 2vw, 26px);
  align-items: stretch;
}

.sled,
.sack {
  border: var(--edge);
  border-radius: 2px;
  padding: clamp(14px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.sled {
  background: url("art/sled.webp") center / 100% 100% no-repeat, var(--wood);
  color: var(--cream);
}

.sled h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--snow);
}

.sled .ticker {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--cream);
}

.brasstag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--edge);
  border-radius: 14px;
  background: var(--brass);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.brasstag.off {
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-weight: 400;
}

.sack {
  background: url("art/sack.webp") center / 100% 100% no-repeat, var(--cream);
}

.sacktitle {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 14px;
  text-transform: uppercase;
}

.lot {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.45;
  word-break: break-all;
  user-select: all;
  color: var(--ink);
}

.lot.empty-state {
  color: var(--ink-soft);
  user-select: none;
}

.sackrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.stamp {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border: var(--edge);
  border-radius: 2px;
  background: var(--snow);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.stamp[disabled] {
  color: var(--ink-soft);
  background: var(--cream-deep);
  cursor: not-allowed;
}

.sackrow .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: var(--edge);
  border-radius: 2px;
  background: var(--ink);
  color: var(--snow);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
}

.sackrow .label.off {
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-weight: 400;
}

.sackrow .chart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--snow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ------------------------------------------------------------------ the phone */

@media (max-width: 760px) {
  .houses {
    grid-template-columns: repeat(3, 1fr);
  }

  .house {
    min-height: 84px;
  }

  .plank {
    grid-template-columns: repeat(2, 1fr);
  }

  .ground {
    grid-template-columns: 1fr;
  }

  .row {
    grid-template-columns: 48px 3.6em 1fr;
    grid-template-areas: "dog no stats" "act act act";
    row-gap: 6px;
  }

  .row canvas {
    width: 48px;
    height: 48px;
    grid-area: dog;
  }

  .row .no {
    grid-area: no;
  }

  .row .stats {
    grid-area: stats;
  }

  .row .act {
    grid-area: act;
    width: 100%;
  }

  .sheet {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 380px) {
  .houses {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* the attribute means gone, whatever the display of the thing it sits on */
[hidden] {
  display: none !important;
}

/* a podium line carries its place and its share as well */
.row.withplace {
  grid-template-columns: 1.6em 56px 4.5em 1fr auto;
}

/* the kennel count is a sentence, not a number: it reads, it does not shout */
.plank strong.said {
  font-family: var(--mono);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.35;
}

.plank .sub {
  font-size: 13px;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .row.withplace {
    grid-template-columns: 1.6em 48px 3.6em 1fr;
    grid-template-areas: "place dog no stats" "share share share share";
  }

  .row.withplace .place {
    grid-area: place;
  }

  .row.withplace .stats:last-child {
    grid-area: share;
  }
}

/* the board's own head: the kennel's name burned into the plank, then the three numbers */
.plank {
  grid-template-columns: minmax(200px, 1.25fr) repeat(3, 1fr);
  align-items: end;
}

.plank .name h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}

.plank .name .ticker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.count {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* text wants a measure; a row of dogs wants the whole board */
.panel {
  max-width: none;
}

.panel h2,
.panel p,
.panel li {
  max-width: 62ch;
}

.panel .seedline {
  max-width: none;
}

.xplate {
  top: -16px;
  right: 18px;
}

.sled .sledline {
  margin: 0;
  font-size: 15px;
  color: var(--cream);
}

@media (max-width: 760px) {
  .plank {
    grid-template-columns: 1fr 1fr;
  }

  .plank .name {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ the phone, fixed by looking at it */
@media (max-width: 760px) {
  /* a label that gets cut is a label that lies: on a narrow board they wrap instead */
  .label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .house {
    min-height: 72px;
  }

  /* the enamel plate would sit over the name on a phone; it goes to the foot of the board */
  .xplate {
    position: static;
    margin: 10px 0 0 auto;
  }

  .xplate.off {
    display: inline-block;
  }
}

/* a hex address must break anywhere; a sentence must not break inside its words */
.lot {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ the plates arrived */

/* the sled is an object standing in the snow, not a panel: the plate carries its own edges */
.sled {
  background: url("art/sled.webp") center top / contain no-repeat;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  gap: 10px;
  justify-content: flex-start;
}

.sled::before {
  content: "";
  display: block;
  padding-top: 42.4%; /* the sled's own proportions, so nothing sits on top of it */
}

.sled .sledline {
  color: var(--ink-soft);
  max-width: 34ch;
}

/* the word is painted on the plank nailed over the door, which sits mid-house */
.house {
  align-items: center;
  padding: 0;
  background-position: center bottom;
  background-size: contain;
}

.house .word {
  transform: translateY(8%);
  box-shadow: 0 2px 0 rgba(15, 24, 34, 0.35);
}

/* the board's planks are pale: its own frame is the plate's, so the panel border goes quiet */
.board {
  border-width: 2px;
}


/* ------------------------------------------------------------------ the sheet is paper on wood */

/* the board is the wood; what you read is a sheet of paper pinned to it, corners and all */
.paper {
  border: 26px solid transparent;
  border-image: url("art/sheet.webp") 90 fill round;
  padding: clamp(10px, 1.4vw, 18px);
}

.board {
  padding: clamp(10px, 1.6vw, 18px);
}

@media (max-width: 760px) {
  .paper {
    border-width: 16px;
    border-image-width: 16px;
  }
}

/* ------------------------------------------------------------------ the horizon belongs to the yard */

/* The sky was pinned to the viewport, so the sled could end up floating in it as the page moved.
   The horizon now sits in the document instead: sky above it, snow below, and everything standing
   at the foot of the board stands on the ground. */
.yard {
  background:
    url("art/snow.webp") left 48vh / 1920px 22vh repeat-x,
    linear-gradient(var(--sky) 0 56vh, var(--snow) 56vh 100%);
}

.sky {
  display: none;
}

/* stencilled ink on jute: the weave is busy, so the letters carry their own lift */
.sack .sacktitle,
.sack .lot {
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.65);
}

.sack .lot {
  font-weight: 700;
}

.sack .lot.empty-state {
  font-weight: 400;
  color: #4a3f2e;
}

@media (max-width: 760px) {
  .yard {
    background:
      url("art/snow.webp") left 42vh / 1200px 18vh repeat-x,
      linear-gradient(var(--sky) 0 48vh, var(--snow) 48vh 100%);
  }
}