/* Teletext skin: black screen, the seven teletext colours, pixel font, boxed header, coloured Fastext line.
   Switched on by "theme": "teletext" in the quiz file (or ?theme=teletext to preview). */
@font-face{font-family:"CeefaxTeletext";src:url(fonts/ceefax/ceefax-teletext-1.otf.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/vt323-latin-400.woff2) format("woff2");font-display:swap}
/* same font scaled up, used only for the accented letters the Ceefax font does not have (é, á, Ó...) */
@font-face{font-family:"AccentFallback";src:url(fonts/vt323-latin-400.woff2) format("woff2");font-display:swap;size-adjust:138%}
body[data-theme=teletext]{
  --bg:#000;--card:#000;--ink:#fff;--muted:#0ff;--line:#fff;--accent:#0f0;--accent-ink:#000;--sel:#fff;--bad:#f00;--warn:#000;
  --tt:"CeefaxTeletext","AccentFallback","VT323","Lucida Console","Courier New",ui-monospace,Menlo,Consolas,monospace;
  background:#000;color:#fff;font:24px/1.15 var(--tt);letter-spacing:.02em;-webkit-font-smoothing:none;text-rendering:optimizeSpeed;
}
body[data-theme=teletext] main{max-width:640px;padding:4px 12px 100px}
/* header row: P100 [ QUIZ TEXT ] 100 THU 15 OCT 08:41/12 */
#ttx-head{max-width:640px;margin:0 auto;padding:10px 10px 6px;display:flex;align-items:center;gap:5px;font:15px/1 var(--tt);text-transform:uppercase;white-space:nowrap}
#ttx-head .p{color:#fff}
#ttx-head .t{background:#00f;color:#fff;padding:3px 8px 2px}
#ttx-head .d{color:#0ff;margin-left:auto}
#ttx-head .tm{color:#ff0}
/* title: chunky bitmap letters on blue, red rule underneath */
body[data-theme=teletext] h1{background:#00f;color:#ff0;margin:6px 0 0;padding:16px 12px;border-bottom:4px solid #f00;font-size:1rem;line-height:1}
body[data-theme=teletext] h1+.muted{color:#fff;font-size:1.25rem;line-height:1.15;margin:16px 0 8px}
body[data-theme=teletext] h2{color:#ff0;text-transform:uppercase;font-size:1.35rem;font-weight:400;margin:0 0 8px}
body[data-theme=teletext] .muted{color:#0ff;font-size:1.05rem}
body[data-theme=teletext] .card{background:#000;border:0;border-radius:0;padding:0;margin:22px 0;box-shadow:none}
body[data-theme=teletext] .qnum{display:block;background:#00f;color:#fff;font-size:1.1rem;padding:2px 10px 0;margin-bottom:10px;text-transform:uppercase}
body[data-theme=teletext] .qnum+p{color:#fff;font-size:1.4rem;line-height:1.1;margin:.3em 0 .6em}
body[data-theme=teletext] label{color:#0f0;text-transform:uppercase;font-size:1.1rem;font-weight:400;margin-top:14px}
body[data-theme=teletext] input[type=text],body[data-theme=teletext] input[type=password],body[data-theme=teletext] input[type=datetime-local]{background:#000;color:#fff;border:3px solid #0ff;border-radius:0;font:inherit;padding:8px 10px}
body[data-theme=teletext] input:focus-visible,body[data-theme=teletext] button:focus-visible{outline:3px solid #ff0;outline-offset:2px}
body[data-theme=teletext] button{background:#000;color:#fff;border:3px solid #fff;border-radius:0;font:inherit;font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 16px 6px}
body[data-theme=teletext] button.primary{background:#0f0;color:#000;border-color:#0f0}
body[data-theme=teletext] button.danger{color:#f00;border-color:#f00}
body[data-theme=teletext] .tabs button.on{background:#ff0;color:#000;border-color:#ff0}
/* notices read like the "■ E&W MIDLANDS ■" strapline */
body[data-theme=teletext] .notice{background:#000;color:#ff0;border:0;border-radius:0;padding:6px 0;margin:16px 0;text-align:center;text-transform:uppercase;font-size:1.1rem;letter-spacing:.08em;border-top:2px solid #f00;border-bottom:2px solid #f00}
body[data-theme=teletext] .err:not(:empty){background:#f00;color:#fff;padding:4px 8px}
body[data-theme=teletext] .sticky{background:#000;padding:8px 0 6px;border-bottom:2px solid #f00}
body[data-theme=teletext] .sticky strong{color:#ff0;font-weight:400}
body[data-theme=teletext] .bar{position:relative;height:16px;background:#222;border-radius:0;overflow:hidden;margin-top:6px}
body[data-theme=teletext] .bar>i{background:#0f0}
body[data-theme=teletext] .bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,#000 14px 16px)}
body[data-theme=teletext] .big{color:#ff0;font-size:3rem;line-height:1}
/* answers: coloured letter, text; chosen row is inverse video */
body[data-theme=teletext] .opt{display:flex;align-items:stretch;padding:0;margin:6px 0;border:0;background:#000;color:#fff;font:inherit;font-size:1.3rem;text-transform:none;letter-spacing:.02em;text-align:left;min-height:50px}
body[data-theme=teletext] .opt .ltr{flex:0 0 2.2em;display:flex;align-items:center;justify-content:center;font-weight:400;min-width:0;background:#000;color:#fff;font-size:1.3rem}
body[data-theme=teletext] .opt.o0{--c:#f00;--k:#fff}
body[data-theme=teletext] .opt.o1{--c:#0f0;--k:#000}
body[data-theme=teletext] .opt.o2{--c:#ff0;--k:#000}
body[data-theme=teletext] .opt.o3{--c:#0ff;--k:#000}
body[data-theme=teletext] .opt .ltr{color:var(--c)}
body[data-theme=teletext] .opt .txt{flex:1;display:flex;align-items:center;padding:6px 12px 4px;background:#000;color:var(--c);border:2px solid var(--c)}
body[data-theme=teletext] .opt.sel .ltr{background:var(--c);color:var(--k)}
body[data-theme=teletext] .opt.sel .txt{background:var(--c);color:var(--k)}
body[data-theme=teletext] .opt:disabled{opacity:1}
body[data-theme=teletext] .opt:disabled .ltr,body[data-theme=teletext] .opt:disabled .txt{opacity:.4}
body[data-theme=teletext] div.opt{display:block;padding:6px 12px 4px;border:2px solid #333;min-height:0;font-size:1.25rem}
body[data-theme=teletext] div.opt.good{background:#0f0;color:#000;border-color:#0f0}
body[data-theme=teletext] div.opt.bad{background:#f00;color:#fff;border-color:#f00}
/* Fastext line: coloured labels along the bottom */
#ttx-fast{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:20;background:#000;border-top:2px solid #00f}
#ttx-fast .fx{flex:1;border:0;border-radius:0;background:#000;min-height:52px;padding:6px 2px 4px;font:inherit;font-size:1.1rem;line-height:1;text-transform:none;white-space:nowrap;cursor:pointer}
body #ttx-fast .fx0{color:#f00}body #ttx-fast .fx1{color:#0f0}body #ttx-fast .fx2{color:#ff0}body #ttx-fast .fx3{color:#0ff}
#ttx-fast .fx:active{background:#222}
body[data-theme=teletext] .strap{margin:14px 0 0;text-align:center;text-transform:uppercase;font-weight:400;letter-spacing:.35em;color:#fff;font-size:1.15rem}
body[data-theme=teletext] .strap::before{content:"■ ";color:#f00;letter-spacing:0}
body[data-theme=teletext] .strap::after{content:" ■";color:#f00;letter-spacing:0}
@media (max-width:420px){#ttx-head .p2{display:none}#ttx-head{gap:5px;padding-left:8px;padding-right:8px}}
@media (max-width:340px){#ttx-head{font-size:13px}}