:root {
  --page-gutter: clamp(1.25rem, 6vw, 3rem);
  --sky: #eaf7ff;
  --water: #0b5d73;
  --waterline: 80dvh;
  color-scheme: light;
  font-family: serif;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
  background: var(--sky);
}

body {
  margin: 0;
  background: linear-gradient(
    to bottom,
    var(--sky) 0,
    var(--sky) var(--waterline),
    var(--water) var(--waterline),
    var(--water) 100dvh
  ) fixed;
}

main {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 36rem);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2rem, 10vh, 6rem) var(--page-gutter);
}

h1 {
  margin-top: 0;
  margin-left: -4px;
  font-size: 2rem;
}

#game {
  margin-top: 3rem;
}

#game:is([data-state="caught"], [data-state="releasing"]) {
  margin-top: 1.5rem;
}

#copy-status:empty {
  display: none;
}

#catch {
  margin: 1.5rem 0 1rem;
}

#catch-intro {
  margin: 0 0 1rem;
}

#catch-emoji {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: clamp(5rem, 28vw, 8rem);
  line-height: 1;
}

#catch-name {
  margin: 0.75rem 0 0;
  font-size: 1.2rem;
}

#line-control {
  margin: 2rem 0;
  min-height: 1.5em;
}

#game:is([data-state="dropping"], [data-state="waiting"], [data-state="moving"], [data-state="reeling"], [data-state="release-dropping"], [data-state="release-water"]) #line-control {
  margin: 0;
  min-height: 0;
}

#game:is([data-state="dropping"], [data-state="waiting"], [data-state="moving"], [data-state="reeling"], [data-state="release-dropping"]) #line-mark {
  position: absolute;
  top: var(--line-origin, 12rem);
  left: var(--page-gutter);
  padding-top: 0.25rem;
  line-height: var(--line-step, 3rem);
}

#game:is([data-state="waiting"], [data-state="moving"], [data-state="release-water"]) #waiting-mark {
  position: absolute;
  top: calc(var(--waterline) + 1.25rem);
  left: var(--page-gutter);
  color: #fff;
}

#line-mark:not([hidden]),
#waiting-mark:not([hidden]) {
  display: block;
  width: 4ch;
  overflow: hidden;
  font-size: 1.5rem;
  line-height: 1;
  white-space: pre;
}

.line-emoji {
  font-size: 1rem;
}

a:link,
a:visited {
  color: #0000ee;
}

a:active {
  color: #f00;
}