/* 长卷: a handscroll. It opens on a stretch of Wang Ximeng's blue-green
   landscape, then a letter to friends where a colophon would be; each game
   is a further section, mounted on pale blue silk; a roller ends it. */

:root {
  --silk: #e4e9ea; /* 月白: the mounting */
  --silk-deep: #d3dadc;
  --ink: #182326;
  --muted: #536066;
  --azurite: #24527a; /* 石青 */
  --malachite: #2f6e5c; /* 石绿 */
  --ochre: #a88a55; /* the painting's silk */
  --rule: rgb(24 35 38 / 0.15);
  --seam: rgb(168 138 85 / 0.55); /* ochre separators between sections */
  --paper: #f3e6de; /* 薛涛笺, a pale red letter paper */
  --rule-red: rgb(178 66 44 / 0.4); /* 朱丝栏 */
  --serif-cjk: "Noto Serif SC", "Songti SC", "STSong", serif;
  --serif-latin: "Cormorant Garamond", Georgia, serif;
  --brush: "Ma Shan Zheng", "KaiTi", "STKaiti", "Kaiti SC", serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.75 var(--serif-cjk);
  background:
    /* a faint cloud damask woven into the silk */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='72'%3E%3Cpath d='M10 40c0-8 10-12 16-6 2-10 18-10 20 0 6-4 14 0 12 8M70 12c0-6 8-9 12-4 2-7 13-7 15 0 4-3 10 0 9 6' fill='none' stroke='%2324527a' stroke-opacity='0.06' stroke-width='1.2'/%3E%3C/svg%3E"),
    var(--silk);
  -webkit-font-smoothing: antialiased;
}

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

a:focus-visible {
  outline: 2px solid var(--azurite);
  outline-offset: 4px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 32px 20px;
}

.brand {
  font-family: var(--serif-latin);
  font-weight: 600;
  font-size: 22px;
}

.brand span {
  font-family: var(--serif-cjk);
  font-size: 16px;
  color: var(--muted);
  margin-left: 6px;
}

.nav {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.elsewhere {
  font-family: var(--serif-latin);
  font-style: italic;
  color: var(--muted);
}

.elsewhere:hover {
  color: var(--azurite);
}

.lang {
  padding: 3px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: 500 13px/1.6 var(--serif-cjk);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.lang:hover {
  border-color: var(--azurite);
  color: var(--azurite);
}

/* The painting, edge to edge, between two narrow ochre bands like the
   silk separators (隔水) of a real mounting. It drifts slowly by. */
.band {
  height: clamp(220px, 34vw, 420px);
  border-block: 6px solid var(--ochre);
  box-shadow:
    0 -12px 0 -6px var(--silk-deep),
    0 12px 0 -6px var(--silk-deep);
  background: url("/_hub/img/qianli.webp") 0% 50% / cover no-repeat;
  animation: drift 90s ease-in-out infinite alternate;
}

/* Percentages move exactly across the part of the painting that doesn't
   fit, whatever the screen width. */
@keyframes drift {
  to {
    background-position-x: 100%;
  }
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- The letter ----------
   Ruled letter paper held down by a paperweight. It sits straight: thin
   rules on a tilted element break into dashes on some screens. */

.letter {
  --col: 46px; /* one ruled column, or one ruled line */
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 76px auto 72px;
  padding: 58px 60px 40px;
  color: var(--ink);
  background:
    /* paper fibres */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E"),
    var(--paper);
  box-shadow:
    0 28px 44px -30px rgb(20 30 34 / 0.55),
    0 1px 3px rgb(20 30 34 / 0.16);
}

/* A paperweight (镇纸) across the top. */
.weight {
  position: absolute;
  top: -13px;
  left: 50%;
  width: min(72%, 420px);
  height: 24px;
  border-radius: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #5d4636 0%, #3c2c22 55%, #2b1f18 100%);
  box-shadow:
    0 9px 12px -6px rgb(20 12 8 / 0.5),
    inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.writing {
  font-family: var(--brush);
  font-size: 24px;
  line-height: var(--col);
}

.writing p,
.writing h1 {
  margin: 0;
  font: inherit;
}

/* Chinese: top to bottom, right to left, between red columns. Fourteen
   characters to a column, so each sentence falls well. */
html[data-lang="zh"] .writing {
  writing-mode: vertical-rl;
  height: 16.2em;
  letter-spacing: 0.1em;
  border-left: 1px solid var(--rule-red);
  background: repeating-linear-gradient(to left, var(--rule-red) 0 1px, transparent 1px var(--col));
}

/* Paragraphs start two characters down, as in a letter. */
html[data-lang="zh"] .writing h1,
html[data-lang="zh"] .writing p:not(.dear) {
  text-indent: 2.2em;
}

/* The brush font sets ，and 。 in the middle of the square, and has no
   column forms; the serif's sit where they should. */
.pu {
  font-family: var(--serif-cjk);
}

/* English: across the page, on red lines. */
html[data-lang="en"] .letter {
  width: auto;
  max-width: 640px;
}

html[data-lang="en"] .writing {
  font-family: var(--serif-latin);
  font-style: italic;
  font-size: 25px;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--col) - 1px), var(--rule-red) calc(var(--col) - 1px) var(--col));
}

html[data-lang="en"] .writing h1,
html[data-lang="en"] .writing p:not(.dear) {
  display: inline;
}

.sign {
  margin: 18px 0 0;
  font-family: var(--serif-latin);
  font-style: italic;
  font-size: 26px;
  color: var(--muted);
}

html[data-lang="en"] .sign {
  text-align: right;
}

html[data-lang="en"] .sign::before {
  content: "— ";
}

/* Each game: a further section of the scroll. Picture and words trade
   sides as you go down, and a separator runs between them. */
.games {
  display: grid;
}

.game {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-top: 3px double var(--seam);
}

.game:nth-child(even) .pic {
  order: 2;
}

.pic {
  display: block;
  aspect-ratio: 5 / 4;
  padding: 10px;
  background: var(--ochre);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.12),
    0 22px 36px -26px rgb(20 30 34 / 0.6);
}

.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.97);
  transition:
    filter 0.5s ease,
    transform 0.6s ease;
}

.pic {
  overflow: hidden;
}

.game:hover .pic img {
  filter: none;
  transform: scale(1.02);
}

.no {
  margin: 0 0 6px;
  color: var(--azurite);
  font-size: 14px;
  letter-spacing: 0.4em;
}

.game h2 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.game h2 small {
  margin-left: 10px;
  color: var(--muted);
  font-family: var(--serif-latin);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.line {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.story {
  margin: 0 0 16px;
  max-width: 30em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.guide {
  margin: -4px 0 18px;
  font-family: var(--serif-latin);
  font-style: italic;
  font-size: 18px;
}

.guide a {
  color: var(--azurite);
  border-bottom: 1px solid currentColor;
}

.guide a:hover {
  border-bottom-color: transparent;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 6px;
}

.enter {
  padding: 8px 34px;
  background: var(--azurite);
  color: var(--silk);
  font-size: 15px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  transition: background 0.25s ease;
}

.game:hover .enter,
.enter:focus-visible {
  background: var(--malachite);
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

[data-status="online"] .dot {
  background: var(--malachite);
  box-shadow: 0 0 0 4px rgb(47 110 92 / 0.18);
}

[data-status="offline"] .dot {
  background: var(--ochre);
}

[data-status="offline"] [data-play] {
  cursor: default;
}

[data-status="offline"] .enter,
[data-status="offline"]:hover .enter {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--muted);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

[data-status="offline"] .pic img,
[data-status="offline"]:hover .pic img {
  filter: grayscale(0.7) brightness(1.02);
  transform: none;
}

.more {
  margin: 0;
  padding: 36px 0 64px;
  border-top: 3px double var(--seam);
  text-align: center;
  color: var(--muted);
  font-family: var(--brush);
  font-size: 20px;
  letter-spacing: 0.1em;
}

/* The end of the scroll: rolled onto a wooden rod with jade caps. */
.foot {
  position: relative;
  padding: 34px 32px 30px;
  background: var(--silk-deep);
  border-top: 1px solid rgb(168 138 85 / 0.4);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.foot::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: min(1100px, calc(100% - 24px));
  height: 22px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #b7d3c3, #6f9c86 45%, #3f6b57) left center / 16px 22px no-repeat,
    linear-gradient(180deg, #b7d3c3, #6f9c86 45%, #3f6b57) right center / 16px 22px no-repeat,
    linear-gradient(180deg, #8a6848, #5b4029 45%, #2f2016) center / calc(100% - 30px) 14px no-repeat;
  filter: drop-shadow(0 4px 4px rgb(20 30 34 / 0.25));
}

.foot p {
  max-width: 1000px;
  margin: 0 auto 6px;
}

.foot a {
  border-bottom: 1px solid var(--rule);
}

/* English: the Latin serif for names and headings. */
html[data-lang="en"] .game h2 {
  font-family: var(--serif-latin);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: 0.01em;
}

html[data-lang="en"] .game h2 small {
  font-family: var(--serif-cjk);
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.2em;
}

html[data-lang="en"] .line {
  font-family: var(--serif-latin);
  font-size: 20px;
}

html[data-lang="en"] .story {
  font-family: var(--serif-latin);
  font-size: 18px;
  line-height: 1.55;
}

html[data-lang="en"] .more {
  font-family: var(--serif-latin);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.01em;
}

html[data-lang="en"] .enter {
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}


/* English text in the Latin serif (the Chinese font draws ’ full-width). */
html[data-lang="en"] body {
  font-family: var(--serif-latin), var(--serif-cjk);
}

html[data-lang="en"] .status {
  font-size: 15px;
}

html[data-lang="en"] .foot {
  font-size: 14px;
}

html[data-lang="en"] .enter {
  font-size: 17px;
}

/* Two languages, and which words show for a game's state. */
html[data-lang="zh"] [data-show="en"],
html[data-lang="en"] [data-show="zh"],
.game:not([data-status="checking"]) [data-state="checking"],
.game:not([data-status="online"]) .status [data-state="online"],
.game:not([data-status="offline"]) [data-state="offline"],
.game[data-status="offline"] [data-state="open"] {
  display: none;
}

@media (max-width: 760px) {
  .top,
  main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .letter {
    margin: 56px auto 48px;
    padding: 46px 26px 30px;
  }

  .writing {
    font-size: 21px;
  }

  .letter {
    --col: 40px;
  }

  html[data-lang="en"] .writing {
    font-size: 21px;
    --col: 38px;
  }

  .game {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 32px 0;
  }

  .game:nth-child(even) .pic {
    order: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .band {
    animation: none;
  }

  .pic img {
    transition: none;
  }
}