:root {
  --paper: #f2dfb8;
  --ink: #10253d;
  --blue: #0752c9;
  --red: #ed3e18;
  --yellow: #f6bf19;
  --teal: #00606a;
  --shadow: rgba(15, 33, 49, .18);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font-family: "Arial Narrow", "Aptos Narrow", "Helvetica Neue", Arial, sans-serif;
}

body { position: fixed; inset: 0; }

button, canvas { -webkit-tap-highlight-color: transparent; }

#app {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.78), transparent 31%),
    linear-gradient(132deg, #f7e8c8 0%, #eed5a4 100%);
}

#field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}

#field:focus-visible { box-shadow: inset 0 0 0 4px rgba(7,82,201,.42); }

.paper-grain {
  position: absolute;
  inset: -5%;
  z-index: 2;
  pointer-events: none;
  background-image: url("field-texture.webp");
  background-size: cover;
  background-position: center;
  opacity: .10;
  mix-blend-mode: multiply;
  filter: contrast(1.15) saturate(.85);
}

.mast {
  position: absolute;
  z-index: 4;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(16,37,61,.66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}

.intro {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: max(76px, env(safe-area-inset-top)) 24px max(50px, env(safe-area-inset-bottom));
  text-align: center;
  transition: opacity .48s ease, transform .48s ease;
}

.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(92vw, 780px);
  height: min(66vh, 500px);
  border-radius: 50%;
  background: rgba(247,232,200,.74);
  filter: blur(24px);
}

.intro.departed { opacity: 0; transform: scale(1.04); pointer-events: none; }

.eyebrow {
  margin: 0 0 13px;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 1000px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 9.3vw, 142px);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .72;
}

h1 span { display: block; }
h1 span:last-child { color: var(--red); font-style: italic; transform: translateX(.09em); }

.lede {
  margin: clamp(22px, 4vh, 38px) 0 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1.35;
}

button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 13px 23px;
  background: var(--ink);
  color: #fff7df;
  font: 800 13px/1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px var(--shadow);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

button:hover { transform: translateY(-2px) rotate(-.5deg); }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:active { transform: translateY(1px); }

.micro {
  margin: 17px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .62;
}

.play-copy {
  position: absolute;
  z-index: 4;
  top: max(62px, calc(env(safe-area-inset-top) + 48px));
  left: max(20px, env(safe-area-inset-left));
  width: min(380px, calc(100vw - 40px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
  text-shadow: 0 1px rgba(255,255,255,.45);
}

.play-copy.visible { opacity: 1; transform: none; }

.chapter {
  margin: 0 0 5px;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.play-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.4vw, 50px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .95;
}

.aside {
  width: min(310px, 78vw);
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  opacity: .68;
}

.progress {
  position: absolute;
  z-index: 5;
  right: max(20px, env(safe-area-inset-right));
  top: max(61px, calc(env(safe-area-inset-top) + 47px));
  display: flex;
  gap: 7px;
  opacity: 0;
  transition: opacity .3s ease;
}

.progress.visible { opacity: 1; }
.progress i { width: 22px; height: 6px; background: rgba(16,37,61,.18); transform: skewX(-18deg); }
.progress i.past { background: var(--ink); }
.progress i.now { background: var(--red); }

.field-actions {
  position: absolute;
  z-index: 6;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
}

button.quiet {
  min-width: 110px;
  background: rgba(247,232,200,.9);
  color: var(--ink);
  border: 1px solid rgba(16,37,61,.28);
  box-shadow: 0 5px 18px rgba(16,37,61,.10);
  backdrop-filter: blur(6px);
}

[hidden] { display: none !important; }

.ending {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 70px 24px 120px;
  text-align: center;
  color: var(--ink);
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(255,248,233,.72), 0 12px 40px rgba(255,248,233,.5);
  opacity: 0;
}

.ending.revealed { animation: arrive .7s ease both; }

.ending h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 6.6vw, 98px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .82;
}

.ending .eyebrow { color: var(--red); }
.ending h2 em { color: var(--red); }
.ending > p:last-child { font-weight: 800; letter-spacing: .04em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes arrive {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .mast { font-size: 9px; letter-spacing: .12em; }
  .mast #roundLabel { max-width: 54%; text-align: right; }
  .intro { align-content: start; padding-top: max(138px, calc(env(safe-area-inset-top) + 128px)); }
  h1 { font-size: clamp(48px, 17vw, 76px); line-height: .76; }
  .lede { font-size: 17px; }
  .play-copy { top: max(72px, calc(env(safe-area-inset-top) + 54px)); }
  .play-copy h2 { font-size: 27px; max-width: 280px; }
  .aside { font-size: 11px; max-width: 245px; }
  .progress { top: auto; right: auto; left: max(20px, env(safe-area-inset-left)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); }
  .field-actions { bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px)); }
  button.quiet { min-width: 0; padding-inline: 17px; }
  .ending { padding-bottom: 160px; }
  .ending h2 { font-size: clamp(42px, 11.5vw, 58px); }
  .ending > p:last-child { max-width: 280px; font-size: 12px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  button:hover { transform: none; }
}