@font-face {
  font-family: "VeraMono";
  src: url("https://static.nos.nl/teletekst/Android_VeraMono.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --tt-bg: #000;
  --tt-stage: #1a1a1a;
  --tt-blue: #1716dd;
  --tt-white: #fff;
  --tt-yellow: #ff0;
  --tt-cyan: #0ff;
  --tt-green: #0f0;
  --tt-red: #f00;
  --tt-magenta: #f0f;
  --tt-font: "VeraMono", "Menlo", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tt-stage);
  color: var(--tt-white);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.5rem;
  font-family: var(--tt-font);
}

#screen {
  width: 40ch;
  max-width: calc(100vw - 1rem);
  min-height: 25em;
  margin: 0;
  padding: 0;
  background: var(--tt-bg);
  color: var(--tt-white);
  white-space: pre;
  overflow: hidden;
  font-family: var(--tt-font);
  font-size: min(
    19px,
    calc((100vw - 1rem) / 40),
    calc((100vh - 1rem) / 31.25)
  );
  line-height: 1.25;
  font-variant-ligatures: none;
}

#screen a {
  color: inherit;
  text-decoration: none;
}

.white { color: var(--tt-white); }
.yellow { color: var(--tt-yellow); }
.cyan { color: var(--tt-cyan); }
.green { color: var(--tt-green); }
.red { color: var(--tt-red); }
.magenta { color: var(--tt-magenta); }

.bg-blue {
  color: var(--tt-yellow);
  background: var(--tt-blue);
}

.bg-yellow {
  color: var(--tt-bg);
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 24%,
      var(--tt-yellow) 24%,
      var(--tt-yellow) 76%,
      transparent 76%,
      transparent 100%
    );
}

#page-number-trigger {
  cursor: pointer;
}

.numpad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.numpad-overlay[hidden] {
  display: none;
}

.numpad {
  background: #000;
  border: 2px solid var(--tt-yellow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.numpad-display {
  color: var(--tt-yellow);
  font-size: 2rem;
  font-family: var(--tt-font);
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.4em;
  padding: 6px 12px;
  min-width: 120px;
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.numpad-btn {
  background: var(--tt-blue);
  color: var(--tt-white);
  border: none;
  font-family: var(--tt-font);
  font-size: 1.4rem;
  padding: 14px;
  cursor: pointer;
  min-width: 52px;
}

.numpad-btn:hover,
.numpad-btn:active {
  background: #0000ff;
}

.numpad-special {
  color: var(--tt-red);
}

@media (max-width: 430px) {
  body {
    min-height: 100dvh;
    padding:
      max(0px, env(safe-area-inset-top))
      max(0px, env(safe-area-inset-right))
      max(0px, env(safe-area-inset-bottom))
      max(0px, env(safe-area-inset-left));
    background: var(--tt-bg);
  }

  #screen {
    max-width: 100vw;
    min-height: 0;
    font-size: min(
      20px,
      calc(100vw / 24),
      calc(100dvh / 31.25)
    );
  }
}