:root {
  /* The same palette the game is drawn in, so the card you read before you
     fly and the sky you fly in are the same place. Chalk on a warm dark,
     sand for anything you can press, a cool blue for anything measured.
     It replaces a phosphor green on black, which was the right colour for a
     tribute to a 1987 monitor and the wrong one for anything restful. */
  --ink: #e8e3d6;
  --sand: #e0bd8a;
  --sky: #9dc3d4;
  --dim: #9a9c96;
  --edge: rgba(232, 227, 214, .22);
  --soft: rgba(232, 227, 214, .10);
  --deep: #12131a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--deep);
  color: var(--ink);
  /* Not a terminal typeface. The HUD inside the game is a bitmap font and
     always will be; everything outside it is prose, and prose set in a
     monospace reads as output rather than as writing. */
  font: 15px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  touch-action: none;
}

/* The canvas is drawn at the size it is shown at -- see Renderer.resize().
   The game is still written in a 586x256 space, but that is a coordinate
   system now rather than a number of pixels, so the edges come out as edges
   rather than as staircases. */
#screen {
  display: block;
  width: 100%;
  height: auto;
  max-width: calc(100vh * var(--screen-aspect, 1.781));
  max-height: 100vh;
  background: var(--deep);
  cursor: none;
  touch-action: none;
}

/* ---- touch pad ---- */

#touch[hidden] { display: none; }

#touch {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0));
  pointer-events: none;
}

.padbtn {
  pointer-events: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--soft);
  color: var(--ink);
  font: 500 13px/1 inherit;
  letter-spacing: .06em;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

.padbtn:active,
.padbtn[data-on] {
  background: rgba(224, 189, 138, .30);
  border-color: var(--sand);
}

/* ---- title / pause overlay ---- */

/* Centred by auto margins rather than by place-items.
   A grid or flex box that centres its child has nowhere to put the overflow
   when the child is taller than the box: it hangs off both ends and the top
   of it cannot be scrolled to. On a phone held sideways -- three hundred and
   something pixels of height, most of it spent before you reach a button --
   that meant the title was cut off and, in a browser that does not extend the
   scroll region backwards, unreachable. Auto margins collapse to nothing when
   there is no room to give away, so the card simply starts at the top and
   scrolls normally. */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* A wash rather than a blackout: the landscape stays faintly visible
     behind the card, which is friendlier than dropping the lights. */
  background: linear-gradient(170deg, rgba(18, 20, 32, .86), rgba(38, 28, 30, .90));
  padding: 24px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
}

#overlay[hidden] { display: none; }

/* Near the top rather than centred: the pages are different heights, and a
   centred card jumped up and down as you moved between them. */
#panel {
  margin: 0 auto auto;
  padding-top: clamp(0px, 6vh, 64px);
  width: 100%;
  max-width: 36em;
  text-align: center;
}

#head h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--ink);
  /* A glow off the title, the colour of the phoenix. */
  text-shadow: 0 0 24px rgba(255, 140, 50, .28);
}

#subtitle {
  margin: .1em 0 0;
  color: var(--sand);
  font-size: .95em;
  letter-spacing: .04em;
}

#panel p { margin: .5em 0; }
#panel b { color: var(--sand); font-weight: 600; }
#panel a { color: var(--sky); }
.dim { color: var(--dim); font-size: .92em; }

/* ---- the buttons ---- */

#actions { margin: 1.4em 0 0; }

#start {
  display: block;
  margin: 0 auto;
  min-width: 13em;
  padding: .85em 2.4em;
  font: 600 16px/1 inherit;
  letter-spacing: .08em;
  color: #241f1a;
  background: var(--sand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(224, 189, 138, .0);
  transition: background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}

#start:hover, #start:focus-visible {
  background: #eed2a6;
  box-shadow: 0 0 0 4px rgba(224, 189, 138, .22);
  outline: none;
}

.ghost {
  display: block;
  margin: .7em auto 0;
  padding: .6em 1.8em;
  font: 500 14px/1 inherit;
  letter-spacing: .06em;
  color: var(--ink);
  background: none;
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ghost[hidden] { display: none; }
.ghost:hover, .ghost:focus-visible { border-color: var(--sand); color: var(--sand); outline: none; }
.ghost.small { display: inline-block; margin: 0; padding: .4em 1.1em; font-size: 13px; }

/* ---- tabs ---- */

#tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 1.2em auto 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--edge);
}

.tab {
  padding: .6em .9em;
  font: 500 14px/1 inherit;
  color: var(--dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab:hover, .tab:focus-visible { color: var(--ink); outline: none; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sand); }

.iconbtn {
  width: 36px;
  height: 36px;
  margin-left: 6px;
  padding: 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.iconbtn:hover, .iconbtn:focus-visible { color: var(--ink); border-color: var(--edge); outline: none; }
.iconbtn svg { width: 100%; height: 100%; display: block; }
.iconbtn path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .spk { fill: currentColor; }
#mute .off { display: none; }
#mute[aria-pressed="true"] { color: #d98b76; }
#mute[aria-pressed="true"] .on { display: none; }
#mute[aria-pressed="true"] .off { display: inline; }

/* ---- the pages ---- */

#pages { margin-top: 1.1em; text-align: left; }
.page[hidden] { display: none; }

.goals {
  margin: .8em 0;
  padding: 0;
  list-style: none;
}
.goals li {
  position: relative;
  margin: .55em 0;
  padding-left: 1.4em;
}
/* A small flame for a bullet. */
.goals li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .45em;
  width: .5em;
  height: .72em;
  background: linear-gradient(180deg, #ffe39a, #ff8a2a 60%, #c2400f);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.best {
  margin-top: 1em !important;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.best:empty { display: none; }

table.keys {
  width: 100%;
  margin: .4em 0 .8em;
  border-collapse: collapse;
  font-size: .94em;
}
.keys th, .keys td {
  padding: .32em .5em;
  border-bottom: 1px solid var(--soft);
  text-align: left;
  vertical-align: top;
}
.keys thead th { color: var(--dim); font-weight: 500; font-size: .9em; letter-spacing: .05em; }
.keys tbody th { color: var(--sand); font-weight: 500; white-space: nowrap; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: .05em .4em;
  font: 600 .86em/1.4 ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ---- awards ---- */

.awardsum { margin: .2em 0 .4em !important; color: var(--sand); }
.awardbar { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-bottom: .8em; }
.awardbar span { display: block; height: 100%; background: linear-gradient(90deg, #ff8a2a, #ffd27a); }
.awards { list-style: none; margin: 0; padding: 0; }
.awards li {
  display: grid;
  grid-template-columns: 1.5em 1fr auto;
  column-gap: .6em;
  align-items: baseline;
  padding: .38em 0;
  border-bottom: 1px solid var(--soft);
  color: var(--dim);
}
.awards .tick {
  width: 1.1em;
  height: 1.1em;
  align-self: center;
  border: 1.5px solid var(--edge);
  border-radius: 50%;
}
.awards li.done { color: var(--ink); }
.awards li.done .tick {
  border-color: var(--sand);
  background: var(--sand) no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23241f1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.awards .aname { font-weight: 600; }
.awards li.done .aname { color: var(--sand); }
.awards .adesc { display: block; font-size: .88em; font-weight: 400; color: var(--dim); }
.awards .aprog { font-size: .85em; font-variant-numeric: tabular-nums; color: var(--dim); }

/* ---- settings ---- */

.set {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 2.6em;
  border-bottom: 1px solid var(--soft);
}
.set-label { flex: 0 0 6.5em; color: var(--sand); }
.set input[type="range"] { flex: 1; min-width: 0; accent-color: var(--sand); }
.set output { flex: 0 0 3em; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

/* The platform's own controls are kept -- a range is a range everywhere --
   but coloured to match. A switch is a button styled as one, since there is
   no native switch. */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform .15s, background .15s;
}
.switch[aria-checked="true"] { background: rgba(224, 189, 138, .35); border-color: var(--sand); }
.switch[aria-checked="true"] span { transform: translateX(20px); background: var(--sand); }
.switch:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

.segs {
  display: inline-flex;
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
}

.seg {
  padding: .5em .95em;
  font: 500 13px/1 inherit;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seg + .seg { border-left: 1px solid var(--edge); }
.seg:focus-visible { outline: none; color: var(--ink); }
.seg[aria-pressed="true"] { color: #241f1a; background: var(--sand); }

/* Which kind of device the card is showing, set on the body by main.js. */
body.touch .desk-only, body:not(.touch) .touch-only { display: none; }

.read {
  margin: .5em 0 0;
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Which build is running, small and out of the way at the foot. */
.build { color: var(--dim); font: 11px/1.2 ui-monospace, Menlo, Consolas, monospace; opacity: .6; margin-top: 1.4em !important; }

/* ---- the pause button, on touch ---- */

#pausebtn {
  position: fixed;
  top: calc(4px + env(safe-area-inset-top, 0));
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgba(18, 19, 26, .35);
  color: var(--ink);
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#pausebtn[hidden] { display: none; }
#pausebtn svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---- short screens ------------------------------------------------------ */

/* A phone in landscape, or a small window: everything gets tighter. */
@media (max-height: 560px) {
  #overlay { padding: 12px 16px; }
  #head h1 { font-size: clamp(22px, 5.4vh, 34px); }
  #panel p { margin: .3em 0; }
  #actions { margin-top: .9em; }
  #start { padding: .75em 2em; }
  #tabs { margin-top: .8em; }
  .tab { padding: .5em .7em; }
  #pages { margin-top: .8em; }
  .set { min-height: 2.3em; }
}

/* ... and when it is short *and* wide there is room to put the reading and
   the pressing side by side, which is what gets the buttons on screen without
   scrolling at all. */
@media (orientation: landscape) and (max-height: 560px) {
  #panel {
    max-width: 58em;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11em, 15em);
    grid-template-rows: auto 1fr auto;
    column-gap: 28px;
    text-align: left;
  }
  #head { grid-column: 1; grid-row: 1; }
  #pages { grid-column: 1; grid-row: 2; margin-top: .6em; }
  /* Pinned in view, however long the page beside it: centred against a
     long page it ended up below the fold. */
  #actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: start; position: sticky; top: 8px; padding-top: 12px; text-align: center; }
  #build { grid-column: 1 / span 2; grid-row: 3; }
  #panel { padding-top: 0; grid-template-columns: minmax(0, 1fr) minmax(12em, 18em); }
  #start { width: 100%; min-width: 0; padding: .8em .6em; }
  #tabs { gap: 0; flex-wrap: nowrap; }
  .tab { padding: .45em .45em; font-size: 13px; }
  .iconbtn { width: 30px; height: 30px; padding: 5px; margin-left: 2px; }
}

/* Shorter still -- a small phone in landscape with the browser's own bars
   taking their cut, which leaves about three hundred pixels. */
@media (max-height: 420px) {
  #panel p { margin: .2em 0; }
  #head h1 { font-size: clamp(20px, 5vh, 28px); }
  #subtitle { font-size: .85em; }
  .goals li { margin: .3em 0; }
}