/* Posiadówka: the page is a teletext page (docs/makiety/landing-a-telegazeta.html) — black, the eight teletext
   colours, one block typeface, page numbers and the four coloured keys of a remote. No images, no external requests. */
@font-face { font-family: 'VT323'; font-display: swap; src: url('/fonts/vt323-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VT323'; font-display: swap; src: url('/fonts/vt323-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --k: #000; --w: #fff; --y: #ffeb00; --c: #00e5ff; --g: #19e619; --m: #ff3df2; --r: #ff2a2a; --b: #1818ff;
  --dim: #8a8a8a; /* a game still in the works: 5.9:1 on black */
  --cell: clamp(17px, 2.9vw, 27px); /* one teletext row */
}
* { box-sizing: border-box; }
html { background: #0b0b0b; scroll-behavior: smooth; scroll-padding-bottom: 4em; }
body { margin: 0; font: var(--cell)/1.18 'VT323', 'Courier New', monospace; color: var(--w); letter-spacing: .02em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
[tabindex='-1']:focus { outline: none; } /* a page reached by its number: focus moves there, nothing to mark */

.screen { max-width: 40em; margin: 0 auto; background: var(--k); min-height: 100vh; padding: 0 .6em 5.2em; position: relative; }
/* scan lines */
.screen::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }

.status { display: flex; gap: 1em; justify-content: space-between; padding: .25em 0; white-space: nowrap; }
.status .name { color: var(--y); }
.status .clock { color: var(--c); }

.masthead { background: var(--b); padding: .5em .5em .45em; margin-top: .2em; }
/* double height, like a teletext headline */
.masthead h1 { margin: 0; font-weight: 400; font-size: 3.4em; line-height: .8; color: var(--y); transform: scaleY(1.45); transform-origin: top; letter-spacing: .04em; padding-bottom: .35em; }
.masthead p { margin: 0; }
.mosaic { height: .55em; margin: .1em 0 .8em; background: repeating-linear-gradient(90deg, var(--r) 0 2.5%, var(--g) 2.5% 5%, var(--y) 5% 7.5%, var(--b) 7.5% 10%); }

.lead { color: var(--c); margin: 0 0 1em; }
.lead b { font-weight: 400; color: var(--w); }

h2 { font-weight: 400; font-size: 1em; margin: 1.6em 0 .5em; background: var(--y); color: var(--k); padding: 0 .4em; display: flex; justify-content: space-between; }
h2 span { color: var(--b); }

.index { list-style: none; margin: 0; padding: 0; }
.index li { display: flex; }
.index a { text-decoration: none; display: flex; flex: 1; min-width: 0; align-items: baseline; gap: .4em; }
.index .title { white-space: nowrap; }
.index .dots { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--dim); }
.index .dots::before { content: '. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .'; }
.index .no { color: var(--y); }
.index .on .title { color: var(--g); }
.index .off, .index .off .no { color: var(--dim); }
.index a:hover .title { text-decoration: underline; }

.page { margin-top: 1.2em; }
.page header { display: flex; justify-content: space-between; background: var(--b); padding: 0 .4em; }
.page h3 { margin: 0; font-weight: 400; color: var(--y); font-size: 1.9em; line-height: 1; transform: scaleY(1.25); transform-origin: top; padding-bottom: .12em; }
.page header span { color: var(--c); }
.page p { margin: .5em 0; max-width: 36em; }
.page .fact { color: var(--c); }
.play { display: inline-block; text-decoration: none; background: var(--g); color: var(--k); padding: 0 .7em; margin-top: .2em; }
.play:hover { background: var(--y); }
.page.off header { background: #333; }
.page.off h3, .page.off header span, .page.off p { color: var(--dim); }
.page.off .soon { display: inline-block; background: #333; color: var(--w); padding: 0 .7em; }
/* a test card without its colours: no programme yet */
.bars { height: 1.6em; margin: .5em 0; background: linear-gradient(90deg, #bdbdbd 0 14.3%, #a8a8a8 14.3% 28.6%, #8c8c8c 28.6% 42.9%, #7a7a7a 42.9% 57.1%, #555 57.1% 71.4%, #3b3b3b 71.4% 85.7%, #1d1d1d 85.7%); }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2em 1fr; margin: .6em 0; }
.steps li::before { content: counter(s); background: var(--r); color: var(--w); text-align: center; font-size: 1.9em; line-height: 1.05; align-self: start; }
.steps b { font-weight: 400; color: var(--y); display: block; }
.steps div { padding-left: .6em; }

dl { margin: 0; }
dt { color: var(--y); margin-top: .7em; }
dt::before { content: '? '; color: var(--m); }
dd { margin: 0; max-width: 36em; }

.about { max-width: 36em; }
.about em { font-style: normal; color: var(--c); }

.goto { color: var(--dim); margin-top: 1.6em; }
.goto kbd { font: inherit; color: var(--w); background: #222; padding: 0 .3em; }
.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* the four coloured keys of the remote */
.fastext { position: fixed; left: 0; right: 0; bottom: 0; background: var(--k); z-index: 2; border-top: 2px solid #222; }
.fastext nav { max-width: 40em; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; padding: .35em .6em .45em; }
.fastext a { text-decoration: none; text-align: center; color: var(--k); padding: .12em 0; white-space: nowrap; }
.fastext a:nth-child(1) { background: var(--r); color: var(--w); }
.fastext a:nth-child(2) { background: var(--g); }
.fastext a:nth-child(3) { background: var(--y); }
.fastext a:nth-child(4) { background: var(--c); }

@media (hover: none) { .goto { display: none; } } /* no keyboard to type a page number on */
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } html { scroll-behavior: auto; } }