*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: 1.15;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 4px solid var(--gem);
  outline-offset: 4px;
}

.pixel {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Notched corners: four outer shadows plus a top bevel. */
.px-box {
  background: var(--blue);
  margin: var(--px);
  padding: var(--s4);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    inset 0 var(--px) 0 var(--blue-hi);
}

.px-box--paper {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    inset 0 calc(var(--px) * -1) 0 var(--orange-hi);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  min-width: var(--tap);
  margin: var(--px) var(--px) calc(var(--px) * 2);
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: 0;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-s);
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--ink),
    0 calc(var(--px) * 2) 0 var(--ink),
    inset 0 var(--px) 0 var(--orange-hi);
  user-select: none;
  touch-action: manipulation;
}

.btn:active,
.btn.is-pressed {
  transform: translateY(var(--px));
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--ink);
}

.btn--big {
  font-size: var(--fs-pixel-m);
  min-height: 64px;
  width: calc(100% - var(--px) * 2);
}

.btn--blue {
  background: var(--blue-hi);
  color: var(--paper);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--blue),
    0 calc(var(--px) * 2) 0 var(--ink),
    inset 0 var(--px) 0 var(--gem);
}

.btn[disabled],
.btn[disabled]:active {
  background: var(--stone);
  color: var(--ink);
  cursor: default;
  transform: none;
}

.px-input {
  display: block;
  width: calc(100% - var(--px) * 2);
  min-height: 56px;
  margin: var(--px);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-m);
  text-transform: uppercase;
  caret-color: var(--orange);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--paper),
    0 var(--px) 0 var(--paper),
    calc(var(--px) * -1) 0 0 var(--paper),
    var(--px) 0 0 var(--paper);
}

.px-input::placeholder {
  color: var(--blue-hi);
}

.sprite {
  display: block;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.dialogue {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100% - var(--s4), var(--max-w) - var(--s4));
  transform: translateX(-50%);
  margin: 0 0 calc(var(--s3) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s3);
  align-items: start;
  min-height: 140px;
  cursor: pointer;
  user-select: none;
}

.dialogue__portrait {
  width: 64px;
  height: 64px;
  background: var(--night);
  box-shadow: 0 0 0 var(--px) var(--ink), inset 0 0 0 var(--px) var(--blue-hi);
  padding: 0;
  display: grid;
  place-items: center;
}

.dialogue__name {
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-s);
  color: var(--orange-hi);
  margin: 0 0 var(--s2);
}

.dialogue__text {
  margin: 0;
  min-height: 3.45em;
  font-size: var(--fs-text);
  white-space: pre-wrap;
}

/* Every character is laid out up front, so wrapping never jumps mid-line. */
.dialogue__text .ch { visibility: hidden; }
.dialogue__text .ch.is-on { visibility: visible; }
.dialogue__text .em { color: var(--orange-hi); }
.dialogue__text .aside { color: var(--stone); }

.dialogue__text .shake {
  display: inline-block;
  animation: tremble calc(var(--frame) * 2) steps(1, end) infinite;
}

@keyframes tremble {
  0% { transform: translate(2px, 0); }
  25% { transform: translate(-2px, 2px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-2px, 0); }
}

.dialogue__more {
  position: absolute;
  right: var(--s3);
  bottom: var(--s2);
  font-size: var(--fs-text);
  color: var(--orange);
  visibility: hidden;
}

.dialogue.is-done .dialogue__more {
  visibility: visible;
  animation: blink 0.8s steps(1, end) infinite;
}

.dialogue__choices {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.dialogue__choices:empty {
  display: none;
}

.hud {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  padding-top: calc(var(--s2) + env(safe-area-inset-top));
  background: var(--ink);
  border-bottom: var(--px) solid var(--blue-hi);
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-s);
}

.hud__bars {
  letter-spacing: -2px;
  color: var(--gem);
}

.hud__bars .off {
  color: var(--blue-hi);
}

.sound-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  background: none;
  color: var(--orange-hi);
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-m);
  cursor: pointer;
}

.sound-btn.is-muted {
  color: var(--blue-hi);
  text-decoration: line-through;
}

.sound-btn[aria-expanded="true"] {
  color: var(--ink);
  background: var(--orange-hi);
}

.hud__sound {
  margin: calc(var(--s2) * -1) calc(var(--s3) * -1) calc(var(--s2) * -1) 0;
}

.sound-panel {
  position: fixed;
  z-index: 30;
  top: calc(56px + env(safe-area-inset-top));
  right: max(var(--s2), calc((100vw - var(--max-w)) / 2 + var(--s2)));
  width: min(300px, 100vw - var(--s4));
  margin: 0;
  display: grid;
  gap: var(--s3);
}

.sound-panel[hidden] {
  display: none;
}

.sound-panel p {
  margin: 0;
}

.sound-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-pixel-s);
  color: var(--orange);
}

.sound-panel__close {
  min-width: var(--tap);
  min-height: var(--tap);
  margin: calc(var(--s3) * -1) calc(var(--s3) * -1) calc(var(--s3) * -1) 0;
  border: 0;
  background: none;
  color: var(--paper);
  font-size: var(--fs-pixel-s);
  cursor: pointer;
}

.sound-panel__label {
  font-size: 10px;
  color: var(--orange-hi);
}

.sound-panel__track {
  padding: var(--s2) var(--s3);
  background: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-s);
  color: var(--gem);
}

.sound-panel__track .note {
  display: inline-block;
}

.sound-panel__transport {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--s2);
}

.sound-panel__transport .btn {
  margin: var(--px) var(--px) calc(var(--px) * 2);
}

.sound-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 10px;
  color: var(--paper);
}

.btn--icon {
  padding: var(--s2);
}

.btn .sprite {
  pointer-events: none;
}

.btn--blue .sprite rect {
  fill: var(--paper);
}

.vol {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.vol__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}

.vol__bar {
  width: 6px;
  background: var(--blue-hi);
}

.vol__bar.is-on {
  background: var(--gem);
}

.sfx-toggle {
  min-width: 72px;
}

@keyframes blink {
  50% { visibility: hidden; }
}

@keyframes spin {
  0% { transform: scaleX(1); }
  25% { transform: scaleX(0.5); }
  50% { transform: scaleX(-1); }
  75% { transform: scaleX(-0.5); }
  100% { transform: scaleX(1); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--px) * -1)); }
}

.blink {
  animation: blink 1s steps(1, end) infinite;
}

.spin {
  animation: spin 1.2s steps(4, end) infinite;
}

.bob {
  animation: bob 1s steps(2, end) infinite;
}

.wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(14, 1fr);
}

.wipe span {
  background: var(--ink);
  transform: scale(0);
}

.wipe.is-in span {
  animation: wipe-in calc(var(--frame) * 4) steps(4, end) forwards;
}

.wipe.is-in span:nth-child(odd) {
  animation-delay: calc(var(--frame) * -1);
}

@keyframes wipe-in {
  to { transform: scale(1); }
}

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

@media (prefers-reduced-motion: reduce) {
  .blink,
  .spin,
  .bob,
  .dialogue.is-done .dialogue__more,
  .dialogue__text .shake {
    animation: none;
  }

  .wipe {
    display: none;
  }
}

.px-input--email {
  text-transform: none;
  font-size: var(--fs-pixel-s);
}

.fineprint {
  margin: var(--s3) var(--px) 0;
  font-size: 20px;
  color: var(--gem);
}

.form-row {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s3);
}

.form-row .btn {
  flex: 1;
}

.btn--green {
  background: var(--leaf);
  color: var(--ink);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--leaf-dk),
    0 calc(var(--px) * 2) 0 var(--ink),
    inset 0 var(--px) 0 var(--paper);
}

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--orange),
    0 calc(var(--px) * 2) 0 var(--ink),
    inset 0 var(--px) 0 var(--paper);
}

.btn--green:active,
.btn--gold:active {
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink),
    var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--ink);
}

.dialogue__name {
  color: var(--gold);
}

.px-input.is-wrong {
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--cherry),
    0 var(--px) 0 var(--cherry),
    calc(var(--px) * -1) 0 0 var(--cherry),
    var(--px) 0 0 var(--cherry);
  animation: shake calc(var(--frame) * 3) steps(3, end) 1;
}

@keyframes shake {
  0% { transform: translateX(calc(var(--px) * -2)); }
  33% { transform: translateX(calc(var(--px) * 2)); }
  66% { transform: translateX(calc(var(--px) * -1)); }
  100% { transform: translateX(0); }
}

.hud__world {
  padding: var(--s1) var(--s2);
  color: var(--ink);
  background: var(--orange-hi);
  box-shadow: 0 0 0 2px var(--paper);
}

.hud[data-act="1"] .hud__world { background: var(--blue); color: var(--paper); }
.hud[data-act="2"] .hud__world { background: var(--plum); color: var(--paper); }
.hud[data-act="3"] .hud__world { background: var(--gold); }
.hud[data-act="4"] .hud__world { background: var(--orange); }

.hud__gems {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .px-input.is-wrong {
    animation: none;
  }
}