@font-face {
  font-family: 'Teletext';
  src: local('Bedstead'), local('Unscii'), local('Glass TTY VT220'),
       local('Perfect DOS VGA 437'), local('Fixedsys Excelsior');
}

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

body {
  background: #1a1a2e;
  color: #eee;
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  padding: 20px;
}

#app {
  max-width: 960px;
  width: 100%;
}

@media (min-width: 601px) {
  #app.wide-mode .teletext-screen {
    width: 40ch;
    margin: 0 auto;
    transform: scaleX(1.3);
    transform-origin: center top;
  }

  #app.tv-mode .teletext-screen {
    width: 40ch;
    margin: 0 auto;
    transform: scaleX(1.7);
    transform-origin: center top;
  }
}

/* Controls */
.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.controls select,
.controls input,
.controls button {
  padding: 6px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2a2a3e;
  color: #eee;
  font-size: 14px;
}

.controls input {
  width: 100px;
}

.controls button {
  cursor: pointer;
  background: #3a3a5e;
}

.controls button:hover {
  background: #4a4a7e;
}

.status {
  margin-left: auto;
  font-size: 12px;
  color: #888;
}

.status.connected {
  color: #0f0;
}

/* Teletext screen */
.teletext-display {
  background: #000;
  border: 4px solid #222;
  border-radius: 12px;
  padding: 16px 20px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(0, 0, 0, 0.3);
}

.teletext-screen {
  font-family: 'Teletext', 'Courier New', 'Consolas', 'Liberation Mono', monospace;
  font-size: 22px;
  min-width: 40ch;
  line-height: 1;
  white-space: pre;
  letter-spacing: 0;
  font-weight: bold;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  image-rendering: pixelated;
  -webkit-transform-style: preserve-3d;
}

.teletext-row {
  height: 1em;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.teletext-row.double-height-row {
  height: 2em;
}

.teletext-row.double-height-row > * {
  transform: scaleY(2);
  transform-origin: top;
  max-height: 1em;
}

.teletext-row.double-height-bottom {
  display: none;
}

/* Teletext colors — pure RGB as per ETS 300 706 */
.fg-black   { color: #000; }
.fg-red     { color: #f00; }
.fg-green   { color: #0f0; }
.fg-yellow  { color: #ff0; }
.fg-blue    { color: #00f; }
.fg-magenta { color: #f0f; }
.fg-cyan    { color: #0ff; }
.fg-white   { color: #fff; }

.bg-black   { background-color: #000; }
.bg-red     { background-color: #f00; }
.bg-green   { background-color: #0f0; }
.bg-yellow  { background-color: #ff0; }
.bg-blue    { background-color: #00f; }
.bg-magenta { background-color: #f0f; }
.bg-cyan    { background-color: #0ff; }
.bg-white   { background-color: #fff; }

/* Mosaic cells (CSS grid 2×3 sextant blocks) */
.mc {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 1ch;
}
.mc i {
  display: block;
}

/* Flash animation */
.flash {
  animation: teletext-flash 1s step-end infinite;
}

@keyframes teletext-flash {
  0%, 50% { visibility: visible; }
  51%, 100% { visibility: hidden; }
}

/* Clickable page numbers */
.page-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.page-link:hover {
  text-decoration: underline;
}

/* FLOF bar */
.flof-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.flof-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  font-family: 'Teletext', 'Courier New', monospace;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.flof-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.flof-red    { background: #cc0000; }
.flof-green  { background: #00aa00; }
.flof-yellow { background: #aaaa00; color: #000; text-shadow: none; }
.flof-cyan   { background: #00aaaa; color: #000; text-shadow: none; }

.flof-btn:not(:disabled):hover {
  filter: brightness(1.2);
}

/* Page list */
.page-list {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.page-list a {
  display: inline-block;
  padding: 2px 6px;
  background: #2a2a3e;
  color: #0ff;
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  font-family: monospace;
}

.page-list a:hover {
  background: #3a3a5e;
}

.page-list a.active {
  background: #0aa;
  color: #000;
}

/* Mobile responsive */
@media (max-width: 600px) {
  body {
    padding: 8px;
  }

  #display-mode {
    display: none;
  }

  .controls select {
    width: 100%;
  }

  .controls select,
  .controls input,
  .controls button {
    font-size: 16px;
    padding: 8px 10px;
  }

  .controls input {
    flex: 1;
    min-width: 0;
  }

  .teletext-display {
    padding: 8px 10px;
    border-width: 2px;
    border-radius: 8px;
  }

  .flof-btn {
    padding: 8px 4px;
    font-size: 13px;
  }

  .page-list a {
    padding: 4px 8px;
    font-size: 13px;
  }
}