: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:100dvh; display:flex; align-items:center; justify-content:center; background:#000; padding:0; overflow:hidden; }
.teletext-screen { position:relative; width:min(100vw, calc(100dvh * 4 / 3)); height:min(100dvh, calc(100vw * 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; }
/* Slightly tighter side margins to match Teletext's near-edge look on mobile */
.tt-header {
  position:absolute; left:calc(var(--u) * 1.1); right:calc(var(--u) * 1.1); 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) * 2); top:calc(var(--u) * 68); width:calc(var(--u) * 74); 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) * 2); top:calc(var(--u) * 74); width:calc(var(--u) * 74);
  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 {
  /* Reduce size slightly to prevent overlap with the first field label on mobile */
  position:absolute; left:calc(var(--u) * 3); top:calc(var(--u) * 7.2);
  color:var(--tt-yellow); font-size:calc(var(--u) * 4.2); 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) * 3);
  /* Move the form down a touch so CATEGORY does not sit under the big title */
  top:calc(var(--u) * 12.8);
  width:calc(var(--u) * 74);
  display:grid;
  gap:calc(var(--u) * .28);
}
.tt-form label { display:grid; gap:calc(var(--u) * .4); }
.tt-form span { color:var(--tt-cyan); font-size:calc(var(--u) * 1.85); 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) * .35) calc(var(--u) * .8); font-size:calc(var(--u) * 1.7); height:calc(var(--u) * 3.45);
}
.tt-form textarea { height:calc(var(--u) * 4.2); }
.form-actions { display:flex; gap:calc(var(--u) * 1.2); margin-top:calc(var(--u) * .35); }
.tt-action { border:none; color:#fff; background:#333; padding:calc(var(--u) * .45) calc(var(--u) * 1.2); font-size:calc(var(--u) * 1.7); 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) * 2); top:calc(var(--u) * 33.2); width:calc(var(--u) * 76); }
.answers-list { position:absolute; left:calc(var(--u) * 11); top:calc(var(--u) * 34.8); width:calc(var(--u) * 52); display:grid; gap:calc(var(--u) * 1.5); }
.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.0); line-height:1.0;
}
.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) * 65.2); 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) * 2); width:calc(var(--u) * 76); top:calc(var(--u) * 71.2); }
.question-footer-links { gap:0; }
.question-footer-links .footer-key { width:100%; }
.result-overlay { display:none; }
.hidden { display:none; }
.score-top-bubble {
  position:absolute; left:calc(var(--u) * 1.4); top:calc(var(--u) * 5.2); width:calc(var(--u) * 77.2); min-height:calc(var(--u) * 7.4);
  background:#fff; color:#1938ff; font-size:calc(var(--u) * 2.15); font-weight:700; line-height:1.04; padding:calc(var(--u) * 0.95) calc(var(--u) * 1.4);
  text-align:center; display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}
.host-score { left:calc(var(--u) * 23.6); top:calc(var(--u) * 13.1); width:calc(var(--u) * 32.8); height:calc(var(--u) * 21.4); z-index:3; }
.score-red-left,.score-red-right { right:calc(var(--u) * 1.2); }
.score-red-left { left:calc(var(--u) * 1.2); }
.score-red-right { right:calc(var(--u) * 1.2); }
.score-panel-wrap { position:absolute; left:calc(var(--u) * 2.0); top:calc(var(--u) * 34.4); width:calc(var(--u) * 76.0); z-index:4; }
.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.15) calc(var(--u) * 2.2); color:var(--tt-cyan); font-size:calc(var(--u) * 2.45); font-weight:700; line-height:1.06; white-space:pre-line;
}
.score-panel .yellow { color:var(--tt-yellow); }
.bottom-action {
  position:absolute; left:calc(var(--u) * 2.0); top:calc(var(--u) * 57.9); width:calc(var(--u) * 76.0); min-height:calc(var(--u) * 9.4);
  background:var(--tt-blue); color:#fff; font-size:calc(var(--u) * 1.9); font-weight:700;
  padding:calc(var(--u) * .55) calc(var(--u) * 1.0); line-height:1.1; text-align:center; white-space:normal;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:calc(var(--u) * .2); box-sizing:border-box;
}
.bottom-subtitle {
  position:absolute; left:0; right:0; top:calc(var(--u) * 67.8); background:none; border:none; padding:0;
  color:var(--tt-yellow); font-size:var(--fs-1); font-weight:700; text-align:center; -webkit-tap-highlight-color: transparent;
}
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; }

.score-summary-line { display:block; }
.score-summary-line.score-main { color: var(--tt-yellow); }
.score-summary-line.score-time { color: #fff; }

.score-summary-line.score-final { color: var(--tt-yellow); }

.score-footer-links { position:absolute; left:calc(var(--u) * 2.0); width:calc(var(--u) * 76.0); top:calc(var(--u) * 68.7); display:flex; justify-content:space-between; gap:calc(var(--u) * 2.0); }
.score-footer-links .footer-key { flex:1; text-align:center; font-size:var(--fs-1); }
.enter-name-screen .form-heading, .leaderboard-screen .form-heading { top:calc(var(--u) * 8); left:calc(var(--u) * 8); width:calc(var(--u) * 64); text-align:center; font-size:calc(var(--u) * 5.1); }
.name-prompt { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 18); color:var(--tt-cyan); font-size:calc(var(--u) * 2.8); font-weight:700; }
.name-display { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 22); width:calc(var(--u) * 68); min-height:calc(var(--u) * 6); background:#fff; color:var(--tt-blue); padding:calc(var(--u) * 1); font-size:calc(var(--u) * 4.2); font-weight:700; box-sizing:border-box; }
.name-input { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 31); width:calc(var(--u) * 68); height:calc(var(--u) * 6); background:#fff; color:#000; border:none; padding:calc(var(--u) * 1); font-family:inherit; font-size:calc(var(--u) * 3.4); text-transform:uppercase; box-sizing:border-box; }
.name-help { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 38.5); color:#fff; font-size:calc(var(--u) * 2); }
.enter-name-screen .form-actions.single { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 45); width:calc(var(--u) * 30); }
.leaderboard-head { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 18.2); width:calc(var(--u) * 68); color:var(--tt-yellow); font-size:calc(var(--u) * 2.15); display:grid; grid-template-columns:8% 30% 22% 18% 22%; align-items:center; }
.leaderboard-rows { position:absolute; left:calc(var(--u) * 6); top:calc(var(--u) * 22.3); width:calc(var(--u) * 68); min-height:calc(var(--u) * 35.5); border-top:calc(var(--u) * 1) solid var(--tt-red); border-bottom:calc(var(--u) * 1) solid var(--tt-red); padding:calc(var(--u) * 1.2) 0; box-sizing:border-box; }
.leaderboard-row { color:var(--tt-cyan); font-size:calc(var(--u) * 2.2); line-height:1.28; display:grid; grid-template-columns:8% 30% 22% 18% 22%; align-items:center; column-gap:calc(var(--u) * .8); padding:calc(var(--u) * .42) 0; }
.leaderboard-row.empty { color:#fff; text-align:center; white-space:normal; padding-top:calc(var(--u) * 10); display:block; }
.leaderboard-footer-links { position:absolute; left:calc(var(--u) * 6); width:calc(var(--u) * 68); top:calc(var(--u) * 61.4); display:flex; justify-content:space-between; gap:calc(var(--u) * 2.4); }
.leaderboard-footer-links .footer-key { flex:1; text-align:center; font-size:var(--fs-1); }

.leaderboard-head .lb-pos,.leaderboard-row .lb-pos { text-align:left; }
.leaderboard-head .lb-name,.leaderboard-row .lb-name { text-align:left; }
.leaderboard-head .lb-score,.leaderboard-row .lb-score,.leaderboard-head .lb-hits,.leaderboard-row .lb-hits,.leaderboard-head .lb-time,.leaderboard-row .lb-time { text-align:right; }

.leaderboard-row span, .leaderboard-head span { white-space: nowrap; }
.leaderboard-row .lb-name { overflow:hidden; text-overflow:ellipsis; padding-right:calc(var(--u) * .5); }
.score-screen .score-red-left, .score-screen .score-red-right { top:calc(var(--u) * 29.8); width:calc(var(--u) * 10.5); }
.score-screen .score-red-left { left:calc(var(--u) * 4.0); }
.score-screen .score-red-right { right:calc(var(--u) * 4.0); }
@media (max-aspect-ratio: 4/3) {
  .score-panel-wrap { left:calc(var(--u) * 1.2); width:calc(var(--u) * 77.6); top:calc(var(--u) * 34.8); }
  .bottom-action { left:calc(var(--u) * 1.2); width:calc(var(--u) * 77.6); top:calc(var(--u) * 58.2); min-height:calc(var(--u) * 9.7); }
  .score-footer-links { left:calc(var(--u) * 1.2); width:calc(var(--u) * 77.6); top:calc(var(--u) * 69.0); }
  .leaderboard-head, .leaderboard-rows, .leaderboard-footer-links { left:calc(var(--u) * 3); width:calc(var(--u) * 74); }
  .leaderboard-head { top:calc(var(--u) * 17.8); font-size:calc(var(--u) * 2.0); }
  .leaderboard-rows { top:calc(var(--u) * 21.5); min-height:calc(var(--u) * 37.0); }
  .leaderboard-row { font-size:calc(var(--u) * 2.05); }
  .leaderboard-footer-links { top:calc(var(--u) * 62.6); }
}

.score-summary-line { display:block; }
.score-summary-line.score-main { color: var(--tt-yellow); font-size: calc(var(--u) * 2.2); }
.score-summary-line.score-time { color: #fff; font-size: calc(var(--u) * 2.05); }
.score-summary-line.score-final { color: var(--tt-yellow); font-size: calc(var(--u) * 2.05); }


/* clean-fix 20260309a */
.enter-name-screen .name-input{margin-top:220px;}