@font-face {
  font-family: 'DotGothic16';
  src: url('../assets/fonts/DotGothic16-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BestTen DOT';
  src: url('../assets/fonts/BestTen-DOT.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #030203;
  --reddish: #d7004e;
  --puppol: #6518c8;
  --litegrey: #888888;
  --mintgreen: #30d595;
  --koraal: #ff6379;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --split: -1px 0 0 var(--puppol), 1px 0 0 var(--mintgreen);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--koraal);
  font-family: 'DotGothic16', monospace;
}

/* Phone-shaped on every screen: on a laptop it's a column in the middle. */
#stage {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  width: min(100vw, 62vh);
  width: min(100vw, 62dvh);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip; /* hidden can still be scrolled by focus, and the phone hangs off the bottom */
  touch-action: none;
  background: var(--bg);
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* HUD */
#hud {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  pointer-events: none;
  text-shadow: var(--split);
}

#hud[hidden] {
  display: none;
}

#clock {
  justify-self: start;
  padding: 2px 6px 0;
  background: var(--bg);
  font-family: 'BestTen DOT', monospace;
  font-size: 26px;
  line-height: 1;
}

#meters {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.meter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 3px 1px 6px;
  background: var(--bg);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.meter i {
  display: block;
  width: 72px;
  height: 7px;
  border: 1px solid var(--koraal);
  background: var(--bg);
}

.meter b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--koraal);
}

#track {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  padding: 1px 6px;
  background: var(--bg);
  font-size: 12px;
  color: var(--mintgreen);
  text-shadow: none;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#track.show {
  animation: track 6s steps(12) forwards;
}

@keyframes track {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Bottom: subtitle and buttons */
#bottom {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  bottom: calc(var(--safe-b) + 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
}

#line,
#hint {
  display: none;
  max-width: 100%;
  padding: 3px 8px;
  background: var(--bg);
  font-size: 17px;
  line-height: 1.25;
  text-shadow: var(--split);
}

#line.show,
#hint.show {
  display: block;
}

#hint {
  color: var(--mintgreen);
  text-shadow: none;
  animation: blink 1.1s steps(2) infinite;
}

@keyframes blink {
  50% { opacity: 0.35; }
}

#actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

button {
  font-family: 'BestTen DOT', monospace;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  color: var(--koraal);
  background: var(--bg);
  border: 2px solid var(--koraal);
  border-radius: 0;
  min-height: 52px;
  padding: 8px 22px;
  font-size: 22px;
  text-shadow: var(--split);
}

button:active {
  color: var(--bg);
  background: var(--koraal);
  text-shadow: none;
}

button.quiet {
  min-height: 40px;
  padding: 4px 14px;
  font-size: 15px;
  color: var(--litegrey);
  border-color: transparent;
  background: var(--bg);
  text-shadow: none;
}

button:disabled {
  color: var(--litegrey);
  border-color: var(--litegrey);
  text-shadow: none;
}

#pop {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  font-family: 'BestTen DOT', monospace;
  font-size: 40px;
  color: var(--koraal);
  text-shadow: -3px 0 0 var(--puppol), 3px 0 0 var(--mintgreen);
  opacity: 0;
}

#pop.show {
  animation: pop 0.55s steps(6) forwards;
}

@keyframes pop {
  0% { opacity: 1; transform: scale(1.3); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Thumbstick: appears wherever your finger lands on the floor */
#stick {
  position: absolute;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border: 2px solid var(--koraal);
  pointer-events: none;
  opacity: 0;
}

#stick.on {
  opacity: 0.7;
}

#stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: var(--koraal);
}

/* Start screen */
#boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(var(--safe-t) + 20px) 22px calc(var(--safe-b) + 20px);
  text-align: center;
  background: rgba(3, 2, 3, 0.72);
}

#boot[hidden] {
  display: none;
}

#boot img {
  width: 100%;
  max-width: 420px;
  height: auto;
  image-rendering: pixelated;
}

#boot h1 {
  font-family: 'BestTen DOT', monospace;
  font-weight: normal;
  font-size: 30px;
  line-height: 1.1;
  text-shadow: -2px 0 0 var(--puppol), 2px 0 0 var(--mintgreen);
}

#boot-tagline {
  font-size: 15px;
  color: var(--mintgreen);
}

#boot-notes {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  justify-items: center;
  font-size: 13px;
  line-height: 1.3;
  color: var(--litegrey);
}

#enter {
  min-width: 190px;
  min-height: 62px;
  font-size: 30px;
}

#boot-credit {
  margin-top: 8px;
  font-size: 12px;
  color: var(--litegrey);
}

/* At the door: only the fever and the queue, the phone has its own clock */
#queue-meter {
  display: none;
}

#queue-meter em {
  min-width: 2.2em;
  font-style: normal;
  text-align: right;
}

#stage[data-scene='door'] #clock,
#stage[data-scene='door'] #track,
#stage[data-scene='door'] .meter:not(#koorts-meter):not(#queue-meter) {
  display: none;
}

#stage[data-scene='door'] #queue-meter {
  display: flex;
}

#stage[data-scene='door'] #meters {
  grid-column: 1 / -1;
}

/* With the phone up, what people say moves above it */
#stage[data-phone='up'] #line {
  position: absolute;
  bottom: calc(75% + 8px);
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  font-size: 15px;
}

/* The fake phone, in the chopchop window style */
#phone {
  --fever: 0;
  --row: 50px;
  --tag: rgba(215, 0, 78, 0.82);
  position: absolute;
  top: 25%;
  left: 5%;
  right: 5%;
  bottom: -14px;
  transform: translateY(110%); /* phone.js slides it from here */
  pointer-events: none;
  font-size: 15px;
}

#phone.up {
  pointer-events: auto;
}

.phone-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 calc(var(--safe-b) + 14px);
  border: 3px solid var(--koraal);
  border-bottom: 0;
  border-radius: 1px;
  background: var(--bg);
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.28);
  will-change: transform;
  text-shadow: calc(var(--fever) * -2px) 0 0 var(--puppol), calc(var(--fever) * 2px) 0 0 var(--mintgreen);
}

.phone-status {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  font-family: 'BestTen DOT', monospace;
  font-size: 15px;
}

.phone-warn {
  flex: 1;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.phone-battery.low {
  color: var(--bg);
  background: var(--reddish);
  padding: 0 4px;
  text-shadow: none;
}

.phone-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.phone-dead {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  background: var(--bg);
  color: var(--litegrey);
  text-shadow: none;
}

.phone-body.is-dead .phone-dead {
  display: grid;
}

#phone button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-shadow: inherit;
}

/* Home screen */
.phone-home {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: center;
  padding: 18px;
}

#phone .app {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 10px 0;
  font-size: 18px;
}

.app i {
  display: block;
  width: 62px;
  height: 62px;
  border: 3px solid var(--tag);
  background: rgba(215, 0, 78, 0.16);
  box-shadow: 4px 5px 0 rgba(101, 24, 200, 0.45);
}

#phone .app:active i {
  background: var(--tag);
}

.app-photos i {
  background: linear-gradient(135deg, rgba(101, 24, 200, 0.6), rgba(215, 0, 78, 0.3));
}

.app-wallet i {
  background: linear-gradient(transparent 38%, var(--tag) 38%, var(--tag) 54%, transparent 54%);
}

.app-chat i {
  background: radial-gradient(circle at 50% 50%, rgba(48, 213, 149, 0.6) 0, transparent 44%);
}

.app.nudged i {
  border-color: var(--mintgreen);
  box-shadow: 4px 5px 0 var(--mintgreen);
  animation: blink 1.1s steps(2) infinite;
}

/* A window stacks on top of the last one, a little further in each time */
.win {
  position: absolute;
  top: calc(var(--depth) * 7px);
  left: calc(var(--depth) * 5px);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--tag);
  border-right: 0;
  border-bottom: 0;
  background: var(--bg);
  box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.28);
}

.win-bar {
  flex: none;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 34px;
  padding-left: 8px;
  background: var(--tag);
  color: #000;
  font-family: 'BestTen DOT', monospace;
  font-size: 18px;
  line-height: 34px;
  text-transform: uppercase;
  text-shadow: none;
}

.win-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#phone .win-x {
  flex: none;
  width: 44px;
  border-left: 3px solid var(--bg);
  color: #000;
  font-size: 20px;
  text-shadow: none;
}

.win-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list,
.photos,
.bubbles {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.list[hidden] {
  display: none;
}

#phone .row {
  display: block;
  width: 100%;
  height: var(--row);
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 99, 121, 0.28);
  text-align: left;
  font-family: 'DotGothic16', monospace;
}

.row span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 19px;
}

.row-a {
  font-size: 12px;
  color: var(--litegrey);
}

.row-b {
  font-size: 15px;
}

.row.card .row-a {
  font-size: 16px;
  line-height: 38px;
  color: inherit;
}

.row.is-ticket .row-a,
.row.is-ticket .row-b {
  color: var(--mintgreen);
}

#phone .row:active {
  background: rgba(215, 0, 78, 0.3);
}

/* Mail search */
.search {
  flex: none;
  margin: 8px;
  padding: 6px 8px;
  border: 2px solid var(--koraal);
  line-height: 1.2;
}

.search.empty {
  color: var(--litegrey);
}

.keyboard {
  flex: none;
  margin-top: auto;
  display: grid;
  gap: 5px;
  padding: 8px 4px;
  border-top: 2px solid var(--tag);
}

.keys {
  display: flex;
  justify-content: center;
  gap: 3px;
}

#phone .key {
  flex: 0 1 34px;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--koraal);
  font-family: 'DotGothic16', monospace;
  font-size: 15px;
}

#phone .key:active {
  background: var(--koraal);
  color: var(--bg);
}

/* Photos */
.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 86px;
  gap: 4px;
  padding: 4px;
}

#phone .thumb {
  background-size: cover;
  background-position: center;
}

.photo {
  flex: 1;
  min-height: 0;
  margin: 8px;
}

/* Things to read */
.note,
.note-title {
  padding: 8px;
  line-height: 1.3;
}

.note-title {
  color: var(--litegrey);
}

.bubbles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 8px;
}

.bubble {
  max-width: 85%;
  padding: 6px 8px;
  border: 1px solid var(--koraal);
  line-height: 1.25;
}

#phone .bubble.file {
  padding: 10px 12px;
  border: 2px solid var(--mintgreen);
  color: var(--mintgreen);
  font-family: 'DotGothic16', monospace;
}

/* The ticket. Nothing else in the game can be long-pressed: this has to be, so that a
   phone can read its own QR code. */
.ticket {
  align-items: center;
  padding-top: 12px;
}

.qr {
  flex: none;
  display: block;
  width: min(92%, 300px);
  aspect-ratio: 1;
  image-rendering: pixelated;
  -webkit-touch-callout: default;
  user-select: auto;
  -webkit-user-select: auto;
}

.ticket .note {
  color: var(--mintgreen);
  text-align: center;
}

/* Same tap flash as chopchop.it */
#click-flash {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: var(--puppol);
  opacity: 0;
  mix-blend-mode: screen;
}

#click-flash.on {
  opacity: 0.6;
  transition: opacity 40ms linear;
}

#click-flash.fade {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

#debug {
  position: absolute;
  top: 60px;
  left: 4px;
  z-index: 90;
  padding: 4px;
  font: 10px/1.2 monospace;
  color: var(--mintgreen);
  background: rgba(3, 2, 3, 0.7);
  pointer-events: none;
}

#debug[hidden] {
  display: none;
}