:root {
  --phase-fill-duration: 1000;
  --phase-pause-duration: 2000;
  --letter-cycle-interval: 35;

  /* Colors */
  --bg: #7a7a7a;
  --obchao-green: #00ff7f;
  --practice-rose: #ff2e9f;
  --client-turquoise: #00c8c8;

  --font-size: 1.1rem;
  --line-height: 1.05;
  --letter-spacing: 0.08em;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--obchao-green);
  font-family: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow: hidden;
}

body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

#field {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1ch));
  grid-auto-rows: var(--cell-height, 1em);
  column-gap: 0;
  row-gap: 0;
  align-content: center;
  justify-content: center;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  min-height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  padding: 0.1rem 0.5rem calc(env(safe-area-inset-bottom, 0) + 0.2rem);
  user-select: none;
}

.cell {
  width: 100%;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing, 0);
  color: var(--obchao-green);
  opacity: 0.9;
  transition: color 90ms linear, opacity 90ms linear;
}

.cell.empty {
  color: transparent;
  opacity: 0.1;
}

.cell.practice {
  color: var(--practice-rose);
  font-weight: 600;
}

.cell.client {
  color: var(--client-turquoise);
}

.cell.contact {
  color: goldenrod;
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.8);
}

.cell.contact-copy {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.cell.contact-progress {
  color: #cccccc;
}

.cell.contact[data-link] {
  cursor: pointer;
}

.cell.overlap {
  color: #7af0ff;
  text-shadow: 0 0 6px rgba(122, 240, 255, 0.9);
}

.cell.obchao-hit {
  text-shadow: 0 0 6px var(--obchao-green);
}

@keyframes glitchPulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

.cell.jitter {
  animation: glitchPulse 180ms ease-in-out infinite alternate;
}

@media (max-width: 768px) {
  :root {
    --font-size: 1.3rem;
    --line-height: 1.1;
    --letter-spacing: 0.04em;
  }

  body {
    padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  }

  #field {
    padding: 0.05rem 0.4rem calc(env(safe-area-inset-bottom, 0) + 0.15rem);
  }
}