:root {
  --tt-black: #000;
  --tt-white: #fff;
  --tt-red: #ff0000;
  --tt-green: #00ff00;
  --tt-yellow: #ffff00;
  --tt-blue: #0000ff;
  --tt-cyan: #00ffff;
  --tt-magenta: #ff00ff;
  --tt-grey: #cfcfcf;
  --tt-deep-blue: #1a1aff;
  --u: 10px;
  --canvas-w: 800px;
  --canvas-h: 750px;
  --scale: 1;
  --fs-1: calc(var(--u) * 2.15);
  --fs-2: calc(var(--u) * 2.85);
  --fs-3: calc(var(--u) * 8.3);
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
body {
  background:#000;
  color:#fff;
  font-family:"Noto Sans Mono","PT Mono","DejaVu Sans Mono","Liberation Mono",monospace;
  -webkit-font-smoothing:none;
  font-smooth:none;
  text-rendering:optimizeSpeed;
}
button, input, textarea, select { font: inherit; }
.app-shell { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; background:#000; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden; }
.teletext-screen { position:relative; width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3)); height:min(calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) * 3 / 4)); aspect-ratio:4 / 3; background:#000; overflow:hidden; image-rendering:pixelated; }
.teletext-canvas { position:absolute; left:50%; top:50%; width:var(--canvas-w); height:var(--canvas-h); transform:translate(-50%, -50%) scale(var(--scale)); transform-origin:center center; image-rendering:pixelated; }
.tt-header {
  position:absolute; left:calc(var(--u) * 3); right:calc(var(--u) * 3); top:0; height:calc(var(--u) * 5);
  display:grid; grid-template-columns: 3fr 29fr 9fr 13fr 18fr;
  align-items:center; padding:0;
  font-size:var(--fs-1); font-weight:700; line-height:1; z-index:5;
}
.hdr-left,.hdr-page,.hdr-date{ color:#fff; white-space:nowrap; }
.hdr-left{ visibility:hidden; }
.hdr-page{ text-align:center; }
.hdr-date{ text-align:right; }
.hdr-time{ color:var(--tt-yellow); text-align:right; white-space:nowrap; }
.hdr-centre { text-align:center; }
.teletext-pill {
  display:inline-block; background:var(--tt-blue); color:var(--tt-yellow);
  padding:0 calc(var(--u) * 4.6) calc(var(--u) * .2);
}
.screen,.screen-inner { width:100%; height:100%; }
.screen-inner { position:relative; }
.tt-page { background:#000; }
.main-title {
  position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 6);
  color:#d6d600; font-size:var(--fs-3); font-weight:700; letter-spacing:-0.1em; line-height:.8;
}
.title-image { width: calc(var(--u) * 74); height: calc(var(--u) * 10); }
.title-image img { width:100%; height:100%; display:block; image-rendering:pixelated; }
.red-rule { position:absolute; background:var(--tt-red); height:calc(var(--u) * .55); }
.red-rule.top { left:calc(var(--u) * 3); top:calc(var(--u) * 16); width:calc(var(--u) * 73); }
.rainbow-wrap { position:absolute; left:calc(var(--u) * 5); top:calc(var(--u) * 18); width:calc(var(--u) * 22); height:calc(var(--u) * 35); }
.stripe { position:absolute; bottom:0; width:calc(var(--u) * 4); transform:skewX(-28deg); transform-origin:bottom; }
.stripe.red{ left:0; background:var(--tt-red); height:calc(var(--u) * 27); }
.stripe.yellow{ left:calc(var(--u) * 4); background:var(--tt-yellow); height:calc(var(--u) * 30); }
.stripe.green{ left:calc(var(--u) * 8); background:var(--tt-green); height:calc(var(--u) * 33); }
.stripe.cyan{ left:calc(var(--u) * 12); background:var(--tt-cyan); height:calc(var(--u) * 36); }
.stripe.blue{ left:calc(var(--u) * 16); background:var(--tt-blue); height:calc(var(--u) * 36); }
.stripe.magenta{ left:calc(var(--u) * 20); background:var(--tt-magenta); height:calc(var(--u) * 36); }
.title-copy {
  position:absolute; left:calc(var(--u) * 48); top:calc(var(--u) * 18); width:calc(var(--u) * 24);
  font-weight:700; line-height:1.02; font-size:var(--fs-2); text-align:left;
  z-index:20;
}
.title-copy-top { color:#fff; }
.title-copy-bottom { color:var(--tt-yellow); margin-top:calc(var(--u) * 1.1); }

.title-link {
  background:none;
  border:none;
  padding:calc(var(--u) * 0.6) 0;
  margin:0;
  color:inherit;
  font:inherit;
  text-align:left;
  display:block;
  min-height:calc(var(--u) * 4.8);
  min-width:calc(var(--u) * 18);
  position:relative;
  z-index:21;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;
}
.title-link:focus,
.title-link:hover { outline:none; }
.bubble {
  position:absolute; background:#fff; color:#1938ff; font-weight:700; line-height:1.02;
}
.title-bubble {
  left:calc(var(--u) * 20.5); top:calc(var(--u) * 32.2); width:calc(var(--u) * 31); height:calc(var(--u) * 15.8);
  padding:calc(var(--u) * 1.1) calc(var(--u) * 1.4); font-size:calc(var(--u) * 2.15); line-height:1.03;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 64% 85%, 58% 100%, 54% 85%, 0 85%);
}
.host { position:absolute; }
.host img { width:100%; height:100%; display:block; image-rendering:pixelated; }
.host-title { left:calc(var(--u) * 52.6); top:calc(var(--u) * 30.2); width:calc(var(--u) * 24.6); height:calc(var(--u) * 24.6); }
.host-name-line { position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 51.2); width:calc(var(--u) * 44); height:calc(var(--u) * .55); background:#fff; }
.winner-line {
  position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 53); color:#fff; font-size:var(--fs-1); font-weight:700; line-height:1.05;
}
.nav-strip { display:none; }
.nav-option, .footer-key {
  background:none; border:none; padding:0; color:#fff; text-align:left; font-size:var(--fs-1); font-weight:700;
}
.nav-option span { color:var(--tt-cyan); }
.loan-strip {
  position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 68); width:calc(var(--u) * 72); height:calc(var(--u) * 6);
  background:var(--tt-cyan); color:var(--tt-blue); font-size:calc(var(--u) * 2.45); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 1.6);
}
.loan-strip span { color:var(--tt-red); }
.footer-links {
  position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 74); width:calc(var(--u) * 72);
  display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center;
  font-size:var(--fs-1); font-weight:700;
}
.footer-links .red{ color:var(--tt-red); }
.footer-links .green{ color:var(--tt-green); }
.footer-links .yellow{ color:var(--tt-yellow); }
.footer-links .cyan{ color:var(--tt-cyan); }
.footer-key { width:auto; display:block; text-align:center !important; justify-self:center; }
.footer-links > * { text-align:center !important; justify-self:center; }
.footer-key.red{ color:var(--tt-red); }
.footer-key.green{ color:var(--tt-green); }
.footer-key.yellow{ color:var(--tt-yellow); }
.footer-key.cyan{ color:var(--tt-cyan); }
.footer-key.yellow{ min-width:0; }
.form-heading {
  position:absolute; left:calc(var(--u) * 4); top:calc(var(--u) * 8); color:var(--tt-yellow); font-size:calc(var(--u) * 5); font-weight:700;
}
.form-info { position:absolute; left:calc(var(--u) * 4); top:calc(var(--u) * 14); right:calc(var(--u) * 4); color:#fff; font-size:var(--fs-1); font-weight:700; }
.tt-form { position:absolute; left:calc(var(--u) * 4); top:calc(var(--u) * 13.5); width:calc(var(--u) * 72); display:grid; gap:calc(var(--u) * .65); }
.tt-form label { display:grid; gap:calc(var(--u) * .4); }
.tt-form span { color:var(--tt-cyan); font-size:var(--fs-1); font-weight:700; }
.tt-form textarea,.tt-form input,.tt-form select {
  width:100%; background:#fff; color:#000; border:none; outline:none; resize:none; padding:calc(var(--u) * .55) calc(var(--u) * 1); font-size:var(--fs-1); height:calc(var(--u) * 4.2);
}
.tt-form textarea { height:calc(var(--u) * 5.8); }
.form-actions { display:flex; gap:calc(var(--u) * 2); margin-top:calc(var(--u) * .6); }
.tt-action { border:none; color:#fff; background:#333; padding:calc(var(--u) * .8) calc(var(--u) * 1.8); font-size:var(--fs-1); font-weight:700; }
.tt-action.red{ background:var(--tt-red); }
.tt-action.blue{ background:var(--tt-blue); }
.form-actions.single { position:absolute; left:calc(var(--u) * 4); top:calc(var(--u) * 34); }
.message-panel { position:absolute; left:calc(var(--u) * 4); top:calc(var(--u) * 18); width:calc(var(--u) * 70); background:#fff; color:#1938ff; padding:calc(var(--u) * 1.4); font-size:var(--fs-2); font-weight:700; line-height:1.1; }
.question-meta {
  position:absolute; left:calc(var(--u) * 8.2); top:calc(var(--u) * 7.2); width:calc(var(--u) * 37); color:#fff; font-size:var(--fs-1); font-weight:700;
}
.question-bubble {
  left:calc(var(--u) * 8); top:calc(var(--u) * 10); width:calc(var(--u) * 36); height:calc(var(--u) * 16);
  padding:calc(var(--u) * 1.1) calc(var(--u) * 1.5); font-size:var(--fs-1);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 59% 84%, 56% 100%, 52% 84%, 0 84%);
}
.host-question { left:calc(var(--u) * 47.2); top:calc(var(--u) * 6.2); width:calc(var(--u) * 25.8); height:calc(var(--u) * 25.8); }
.question-rule { left:calc(var(--u) * 3); top:calc(var(--u) * 33.2); width:calc(var(--u) * 74); }
.answers-list { position:absolute; left:calc(var(--u) * 11); top:calc(var(--u) * 35.2); width:calc(var(--u) * 52); display:grid; gap:calc(var(--u) * 2.4); }
.answer-row {
  display:grid; grid-template-columns:calc(var(--u) * 4.6) 1fr; align-items:center; gap:calc(var(--u) * 2.2);
  background:none; border:none; color:#fff; text-align:left; padding:0; font-size:calc(var(--u) * 3.2); line-height:1.05;
}
.answer-swatch { width:calc(var(--u) * 4.3); height:calc(var(--u) * 4); display:block; }
.answer-swatch.red{ background:var(--tt-red); }
.answer-swatch.green{ background:var(--tt-green); }
.answer-swatch.yellow{ background:var(--tt-yellow); }
.answer-swatch.blue{ background:var(--tt-cyan); }
.answer-row.selected-blue .answer-label{ color:var(--tt-blue); }
.answer-row.selected-blue .answer-swatch{ background:var(--tt-blue); }
.choice-prompt {
  position:absolute; left:calc(var(--u) * 20); top:calc(var(--u) * 61.8); color:#fff; background:var(--tt-blue); padding:calc(var(--u) * .3) calc(var(--u) * 1.8); font-size:var(--fs-1); font-weight:700;
}
.question-footer-links { left:calc(var(--u) * 8); width:calc(var(--u) * 61); top:calc(var(--u) * 69); }
.result-overlay { display:none; }
.hidden { display:none; }
.score-top-bubble {
  position:absolute; left:calc(var(--u) * 2); top:calc(var(--u) * 6); width:calc(var(--u) * 76); height:calc(var(--u) * 7.7);
  background:#fff; color:#1938ff; font-size:var(--fs-1); font-weight:700; line-height:1.04; padding:calc(var(--u) * .8) calc(var(--u) * 1.5);
}
.score-orb { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 17); width:calc(var(--u) * 10); height:calc(var(--u) * 10); background:var(--tt-cyan); border-radius:50%; }
.score-red-left,.score-red-right { position:absolute; top:calc(var(--u) * 30); height:calc(var(--u) * .55); background:var(--tt-red); width:calc(var(--u) * 13); }
.score-red-left { left:calc(var(--u) * 2); }
.score-red-right { right:calc(var(--u) * 2); }
.score-achieved { position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 33); width:calc(var(--u) * 71); color:var(--tt-yellow); font-size:calc(var(--u) * 3.1); font-weight:700; text-align:center; }
.score-panel-wrap { position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 36); width:calc(var(--u) * 71); }
.score-panel-top { height:calc(var(--u) * 1.7); background:var(--tt-red); }
.score-panel {
  background:#000; border-left:calc(var(--u) * 1) solid #fff; border-right:calc(var(--u) * 1) solid #fff; border-bottom:calc(var(--u) * 1) solid #fff;
  padding:calc(var(--u) * 1.1) calc(var(--u) * 2); color:var(--tt-cyan); font-size:calc(var(--u) * 2.45); font-weight:700; line-height:1.1; white-space:pre-line;
}
.score-panel .yellow { color:var(--tt-yellow); }
.bottom-action {
  position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 68.5); width:calc(var(--u) * 67); height:calc(var(--u) * 3.5); border:none; background:var(--tt-blue); color:#fff; font-size:var(--fs-1); font-weight:700;
}
.bottom-subtitle { position:absolute; left:calc(var(--u) * 34); top:calc(var(--u) * 72); color:var(--tt-yellow); font-size:var(--fs-1); font-weight:700; }
button { cursor:pointer; }
@media (pointer: coarse) {
  .answer-row { min-height: calc(var(--u) * 5.5); }
  .nav-option, .tt-action, .bottom-action, .footer-key { min-height: calc(var(--u) * 4.5); }
}


.title-bubble { z-index: 10; }
.host-title { z-index: 9; }
.loan-strip { z-index: 8; }