/* ZXRay – zxray.win. The Spectrum palette of the emulator, the ROM font, hard pixel edges.
   Paleta Spectra z emulátoru, písmo z ROM, tvrdé hrany po bodech. */
@font-face{font-family:"ZX ROM";src:url("/assets/zxrom.woff") format("woff");font-display:block}

:root{
  --k:#000;--b:#0022c7;--B:#002cfb;--r:#d62816;--R:#ff3624;--m:#d433c5;--M:#ff40fc;
  --g:#00c525;--G:#00f92f;--c:#00c7c9;--C:#00fbfe;--y:#ccc82a;--Y:#fffc41;--w:#cacaca;--W:#fff;
  --dim:#8d8d99;--panel:#0d0d14;--line:#1d1d2a;--gut:16px;
  --rain:linear-gradient(90deg,var(--R) 0 25%,var(--Y) 0 50%,var(--G) 0 75%,var(--C) 0);
  --notch:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --notch8:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:#000;color:var(--w);font:12px/1.6 "ZX ROM",ui-monospace,Consolas,monospace;-webkit-font-smoothing:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (min-width:768px){html{font-size:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#000;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:var(--C);text-decoration:none}
a:hover{background:var(--C);color:#000}
:focus-visible{outline:2px solid var(--Y);outline-offset:2px}
h1,h2,h3{color:var(--W);font-weight:normal;line-height:1.45;margin:0 0 .75em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--Y);color:#000;padding:8px}
.skip:focus{left:8px}

/* header / hlavička */
.top{position:sticky;top:0;z-index:20;background:#000}
.top::after{content:"";display:block;height:4px;background:var(--rain)}
.top .wrap{display:flex;align-items:center;gap:12px;height:52px}
.brand{display:block;padding:4px 0}
.brand:hover{background:none}
.brand img{height:20px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.navlink{display:none;padding:4px 8px;color:var(--w)}
.navlink:hover{background:var(--W);color:#000}
.lang{padding:4px 8px;color:var(--w);border:2px solid var(--line)}
.lang:hover{background:var(--W);color:#000;border-color:var(--W)}
@media (min-width:768px){.brand img{height:24px}.top .wrap{height:60px}}
.brand{flex:none}
@media (min-width:1080px){.navlink{display:inline-block}}
/* support stays in the menu from 600 px (with the other links it would not fit on a phone)
   podpora zůstane v menu od 600 px (s ostatními odkazy by se na telefon nevešla) */
.nav-coin{color:var(--Y)}
@media (min-width:600px){.nav-coin{display:inline-block}}

/* buttons / tlačítka */
.btn{display:inline-block;padding:.75em 1.25em;background:var(--Y);color:#000;border:0;cursor:pointer;clip-path:var(--notch);line-height:1.5;text-align:center}
.btn:hover{background:var(--C);color:#000}
.btn:active{transform:translate(2px,2px)}
.btn-big{padding:1em 1.5em}
.btn-small{padding:.4em .9em}
.btn-ghost{background:#1e1e2b;color:var(--W)}
.btn-ghost:hover{background:var(--W);color:#000}
.btn[disabled]{cursor:progress;background:#3a3a46;color:var(--w)}

/* hero: the TV with the loading animation / úvod: televize s nahrávací animací */
.hero{padding:20px 0 48px;text-align:center;position:relative}
.tv{display:inline-block;margin:0 auto;padding:10px 10px 6px;background:#15151e;clip-path:var(--notch8);max-width:100%}
.tv canvas{width:100%;height:auto;aspect-ratio:4/3;image-rendering:pixelated;cursor:pointer;background:#000;margin:0 auto}
.tv-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:6px}
.tv-sound{background:none;border:0;padding:2px 6px;color:var(--dim);cursor:pointer}
.tv-sound:hover{background:var(--W);color:#000}
.badge{width:48px;height:12px;background:var(--rain);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.hero h1{font-size:18px;max-width:34ch;margin:28px auto 14px}
/* the flashing L cursor of the Spectrum, outside the text of the heading / blikající kurzor L Spectra, mimo text nadpisu */
.cursor::after{content:"L";display:inline-block;margin-left:.3em;padding:0 .1em;line-height:1.1;background:var(--W);color:#000;animation:flash .64s steps(1) infinite}
@keyframes flash{50%{background:#000;color:var(--W)}}
.lead{max-width:58ch;margin:0 auto 24px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
.cta.left{justify-content:flex-start;margin-top:24px}
.meta{color:var(--dim);margin-top:16px}
@media (min-width:768px){.hero{padding:32px 0 64px}.hero h1{font-size:32px}.tv{padding:16px 16px 8px}}
@media (prefers-reduced-motion:reduce){.cursor::after{animation:none}}

/* sections / sekce */
.sec{padding:48px 0;border-top:2px solid var(--line)}
.sec.first{border-top:0;padding-top:32px}
.kicker{color:var(--Y);margin-bottom:.6em}
.kicker b{font-weight:normal;color:var(--C)}
.sec h1,.sec h2{font-size:18px}
.intro{max-width:62ch}
.note{color:var(--dim);max-width:72ch}
@media (min-width:768px){.sec{padding:72px 0}.sec h1,.sec h2{font-size:32px}}

/* comparison: the ray between the original and ZXRay / srovnání: paprsek mezi originálem a ZXRay */
.cmp{margin-top:20px}
.cmp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tab{background:#1e1e2b;color:var(--W);border:0;padding:.45em .9em;cursor:pointer;clip-path:var(--notch)}
.tab:hover{background:var(--W);color:#000}
.tab[aria-pressed=true]{background:var(--Y);color:#000}
.tab.zoom{margin-left:auto}
.tab.zoom[aria-pressed=true]{background:var(--C)}
.cmp-view{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;--p:50%;--s:0px;--k:0rad;outline-offset:4px}
.cmp-layer{position:absolute;inset:0;overflow:hidden}
.cmp-layer img{width:100%;height:100%;transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .3s steps(5);pointer-events:none;-webkit-user-drag:none}
.cmp-view.zoomed .cmp-layer img{transform:scale(2.6)}
.px{image-rendering:pixelated}
.cmp-before{clip-path:polygon(0 0,calc(var(--p) + var(--s)) 0,calc(var(--p) - var(--s)) 100%,0 100%)}
.cmp-ray{position:absolute;top:-4%;bottom:-4%;left:var(--p);width:16px;margin-left:-8px;background:var(--rain);transform:skewX(var(--k));pointer-events:none}
.cmp-label{position:absolute;top:8px;padding:2px 6px;background:#000;color:var(--W);pointer-events:none}
.cmp-label.l{left:8px}
.cmp-label.r{right:8px;background:var(--Y);color:#000}
.cmp-note{color:var(--dim);margin:10px 0 4px}
.cmp-games{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px;scrollbar-color:#2a2a38 #000}
.cmp-games button{display:grid;justify-items:center;gap:6px;padding:6px;background:none;border:2px solid transparent;color:var(--w);cursor:pointer;min-width:144px}
.cmp-games button:hover{border-color:var(--W)}
.cmp-games button[aria-pressed=true]{border-color:var(--Y);color:var(--W)}
.cmp-games img{width:128px;height:96px}
.cmp-games span{font-size:12px;white-space:nowrap}
@media (min-width:768px){.cmp-label{top:12px}.cmp-label.l{left:12px}.cmp-label.r{right:12px}}

/* features / funkce */
.grid{display:grid;gap:12px;margin-top:24px}
.card{--a:var(--C);background:var(--panel);padding:20px;border-top:4px solid var(--a);clip-path:var(--notch)}
.card:nth-child(9n+1){--a:var(--C)}.card:nth-child(9n+2){--a:var(--M)}.card:nth-child(9n+3){--a:var(--Y)}
.card:nth-child(9n+4){--a:var(--R)}.card:nth-child(9n+5){--a:var(--G)}.card:nth-child(9n+6){--a:var(--C)}
.card:nth-child(9n+7){--a:var(--Y)}.card:nth-child(9n+8){--a:var(--M)}.card:nth-child(9n+9){--a:var(--G)}
.ico{width:32px;height:32px;color:var(--a);margin-bottom:14px}
.card h3{font-size:inherit;margin-bottom:.5em}
.card p{margin:0}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}.card{padding:24px}}

/* tech / technologie */
.tech{display:grid;gap:12px;margin-top:24px}
.tech li{--a:var(--C);background:var(--panel);padding:18px 20px;border-left:4px solid var(--a)}
.tech li:nth-child(6n+2){--a:var(--M)}.tech li:nth-child(6n+3){--a:var(--G)}
.tech li:nth-child(6n+4){--a:var(--Y)}.tech li:nth-child(6n+5){--a:var(--R)}.tech li:nth-child(6n+6){--a:var(--W)}
.tech h3{font-size:inherit;margin-bottom:.5em}
.tag{display:inline-block;margin-left:.5em;padding:0 .4em;background:var(--a);color:#000}
.tech p{margin:0}
@media (min-width:768px){.tech{grid-template-columns:repeat(2,1fr);gap:16px}}

/* video */
.video{margin-top:20px;clip-path:var(--notch8);padding:8px;background:#15151e}
.video video{width:100%;aspect-ratio:16/9;background:#000}

/* requirements / požadavky */
.req{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:24px 0 16px;max-width:720px}
.req dt{color:var(--Y)}
.req dd{margin:0;color:var(--W)}

/* download / stahování */
.dl-card{margin:24px 0;padding:20px;background:var(--panel);clip-path:var(--notch8);max-width:760px}
.dl-card h3{margin:0 0 6px}
.dl-card>p{margin:0 0 14px;color:var(--dim)}
.dl-rel{max-width:760px}
.dl-progress{display:none;position:relative;height:20px;margin-top:16px;background:#000;overflow:hidden}
.dl-progress.on{display:block}
.dl-progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(0deg,var(--B) 0 3px,var(--Y) 3px 5px);animation:tape .2s steps(2) infinite}
@keyframes tape{50%{background-position:0 3px}}
.dl-status{min-height:1.6em;margin:12px 0 0;color:var(--W)}
.dl-info{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0 0}
.dl-info dt{color:var(--dim)}
.dl-info dd{margin:0}
.sha{word-break:break-all;color:var(--dim)}
pre{white-space:pre-wrap;word-break:break-all;color:var(--W)}
.notes article{margin:24px 0 8px}
.notes h3{color:var(--C);font-size:inherit}
.notes h3 span{color:var(--dim);margin-left:.5em}
.notes li{position:relative;padding-left:1.5em;margin:.4em 0;max-width:80ch}
.notes li::before{content:"\25B6";position:absolute;left:0;color:var(--Y)}
@media (min-width:768px){.dl-card{padding:28px}}

/* support: the CONTINUE? of an arcade machine / podpora: CONTINUE? herního automatu */
.blink{animation:blink 1.28s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.coins{margin:24px 0 12px}
.coin .mail{margin-top:32px}
.dl-thanks{margin:12px 0 0;padding:10px 14px;border-left:4px solid var(--Y);background:#000;color:var(--W)}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}

/* footer / patička */
.foot{padding:0 0 40px;color:var(--dim)}
.foot::before{content:"";display:block;height:8px;background:var(--rain);margin-bottom:32px}
.foot img{height:20px;width:auto;margin-bottom:16px}
.foot p{margin:0 0 .6em}
.foot a{color:var(--w)}
.foot a:hover{background:var(--W);color:#000}
.tm{font-size:12px;max-width:80ch;margin-top:1em}

/* 404 */
.e404{min-height:100vh;display:grid;place-items:center;background:#000}
.err{text-align:center;padding:24px}
.err-msg{display:inline-block;background:var(--W);color:#000;padding:4px 10px;font-size:16px}
@media (min-width:768px){.err-msg{font-size:24px}}