/* Older engines are welcome here (the Xiaomi TV's WebView is Chrome 66): wherever a
   declaration uses inset, env(), clamp(), min() or color-mix(), a plain one comes just
   before it, and newer browsers simply take the later line. */

:root {
  --ink: #d4d0c6;
  --ground-ink: #d4d0c6; /* for words that sit over the grass */
  --bg: #04060c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  /* Latin from a book serif, Chinese from the system's Song face. No web fonts:
     nothing to wait for, and nothing that fails to load from mainland China. */
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "STSong",
    "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#plain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: block;
}

#line {
  position: fixed;
  left: 0;
  right: 0;
  top: 27%;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

#line p {
  font-size: 18px;
  font-size: clamp(16px, 1.85vw, 23px);
  line-height: 2.2;
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity 2.4s ease;
}

#line p.on { opacity: .92; }

html:not(:lang(zh)) #line p { letter-spacing: .04em; }

#hint {
  position: fixed;
  left: 0;
  right: 0;
  color: var(--ground-ink);
  bottom: 7%;
  bottom: calc(7% + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  letter-spacing: .32em;
  opacity: 0;
  transition: opacity 3s ease;
  pointer-events: none;
}

html:not(:lang(zh)) #hint { letter-spacing: .1em; }

#hint.on {
  opacity: .5;
  animation: breathe 5s ease-in-out infinite;
}

@keyframes breathe {
  50% { opacity: .22; }
}

#clock {
  position: fixed;
  top: 18px;
  top: calc(18px + env(safe-area-inset-top));
  left: 20px;
  left: calc(20px + env(safe-area-inset-left));
  font-size: 12px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  opacity: .42;
  pointer-events: none;
}

#styles {
  position: fixed;
  top: 36px;
  top: calc(36px + env(safe-area-inset-top));
  left: 14px;
  left: calc(14px + env(safe-area-inset-left));
  font-size: 12px;
  opacity: .42;
  transition: opacity .6s;
}

#styles:hover { opacity: .8; }

#styles button {
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: .08em;
  opacity: .55;
  cursor: pointer;
}

#styles button[aria-current="true"] { opacity: 1; }

[data-style="film"] #styles { color: var(--ground-ink); }

#langs {
  position: fixed;
  top: 10px;
  top: calc(10px + env(safe-area-inset-top));
  right: 12px;
  right: calc(12px + env(safe-area-inset-right));
  font-size: 12px;
  opacity: .42;
  transition: opacity .6s;
}

#langs:hover { opacity: .8; }

#langs button {
  padding: 8px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: .08em;
  opacity: .55;
  cursor: pointer;
}

#langs button[aria-current="true"] { opacity: 1; }

#langs .snd {
  margin-right: 8px;
  opacity: .8;
}

#langs .snd svg {
  display: block;
}

#draft {
  position: fixed;
  top: 46px;
  top: calc(46px + env(safe-area-inset-top));
  right: 18px;
  right: calc(18px + env(safe-area-inset-right));
  max-width: 320px;
  max-width: min(320px, 72vw);
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: .03em;
  text-align: right;
  opacity: .5;
}

#draft p + p { margin-top: .5em; }

#draft a,
#about a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

#draft a:hover,
#about a:hover { border-bottom-color: currentColor; }

#about {
  position: fixed;
  left: 20px;
  left: calc(20px + env(safe-area-inset-left));
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  color: var(--ground-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  max-width: calc(100% - 40px);
  font-size: 12px;
  line-height: 2;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity 4s ease;
  pointer-events: none;
}

#about.on {
  opacity: .72;
  pointer-events: auto;
}

#about .sep { margin: 0 .55em; opacity: .5; }

#about .credit {
  font-size: 11px;
  opacity: .75;
}

#veil {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 5s ease;
}

#veil.off {
  opacity: 0;
  pointer-events: none;
}

#open {
  padding: 0 24px;
  color: #cfcabf;
  font-size: 20px;
  font-size: clamp(17px, 2.1vw, 25px);
  letter-spacing: .2em;
  text-align: center;
  opacity: 0;
  transition: opacity 2.6s ease;
}

#open.on { opacity: .9; }

html:not(:lang(zh)) #open { letter-spacing: .05em; }

/* the film look — the plain through an old 16 mm documentary (film.js) */
[data-style="film"] #plain {
  filter: sepia(.2) saturate(.8) contrast(.9) brightness(1.04); /* faded blacks, warm stock */
}

/* the vignette darkens the corners, so what sits there turns light */
[data-style="film"] #clock,
[data-style="film"] #langs,
[data-style="film"] #draft {
  color: var(--ground-ink);
}

#vignette,
#grain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

[data-style="film"] #vignette,
[data-style="film"] #grain {
  display: block;
}

#vignette {
  background: radial-gradient(ellipse 75% 70% at 50% 55%, transparent 55%, rgba(0, 0, 0, .42) 100%);
}

#grain {
  mix-blend-mode: overlay;
  opacity: .45;
}

/* the rock look — the plain painted on stone (rock.js); words take the colour the lit stone needs */
[data-style="rock"] body,
[data-style="rock"] #hint,
[data-style="rock"] #about {
  color: var(--rock-ink, #2a221e);
  text-shadow: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

noscript .still {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cfcabf;
  line-height: 2.2;
  text-align: center;
  background: #000;
}

noscript a { color: inherit; }