@font-face {
  font-family: "Eightgon";
  src: url("Eightgon.woff2") format("woff2");
  font-display: block;
}

:root {
  --orange: #ff7f27;
  --pale: #c1dbbb;
  /* One mockup pixel. The designs are 1316x880; everything is measured from them. */
  --m: clamp(0.6px, min(calc(100vw / 1316), calc(100svh / 880)), 1.8px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  font-family: "Eightgon", ui-monospace, monospace;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- menu ---------- */

#menu {
  position: fixed;
  inset: 0;
  padding:
    calc(75.8 * var(--m) + env(safe-area-inset-top))
    0 0
    calc(74 * var(--m) + env(safe-area-inset-left));
  overflow: hidden auto;
}

.head {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange);
  font: inherit;
  font-size: calc(30 * var(--m));
  line-height: 1;
  cursor: default;
}
.head.back { cursor: pointer; }

#menu-body {
  position: relative;
  margin: calc(26.8 * var(--m)) 0 0 calc(6 * var(--m));
  padding-bottom: calc(40 * var(--m));
}

#menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-list li { display: block; }

#menu-list a {
  display: inline-block;
  color: var(--pale);
  text-decoration: none;
  white-space: nowrap;
  font-size: calc(62 * var(--m));
  line-height: calc(97 * var(--m));
  text-shadow: calc(-1 * var(--m)) var(--m) 0 var(--orange);
  transform-origin: 0 72.6%;
  transition: transform 0.14s ease-out, color 0.14s;
  outline: none;
}

#menu-list a.sel {
  color: var(--orange);
  text-shadow: none;
  transform: scale(1.07);
}

#menu-list.swap { animation: swap 0.22s ease-out; }
@keyframes swap {
  from { opacity: 0; transform: translateX(calc(-14 * var(--m))); }
}

#caret {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(28 * var(--m));
  height: calc(30 * var(--m));
  overflow: visible;
  pointer-events: none;
  transition: transform 0.16s cubic-bezier(0.3, 0.7, 0.3, 1);
}
#caret polyline {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.3;
  stroke-linejoin: miter;
}
#caret.hide { visibility: hidden; }

/* ---------- landing ---------- */

#landing {
  position: fixed;
  inset: 0;
  z-index: 2;
}

#peel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#enter {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
  outline: none;
}

#landing.gone { display: none; }