@charset "utf-8"; html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, big, del, em, font, img, ins, q, s, small, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tr, th, td {margin:0;padding:0;vertical-align:baseline}:focus{outline:0} ol, ul, li {list-style-type:none} html{font-size:100%} body{font-family:Arial,Helvetica,sans-serif;font-size:1.1em;line-height:1.6em} img{float:left} a{color:#e00;text-decoration:none;outline:none} a:hover{text-decoration:none}
body{width:1000px;height:940px;background:url(../gf0/9.png);-ms-touch-action:none;touch-action:none}
#hrl{position:absolute;top:212px;left:20px;width:960px}
#ban{position:absolute;width:1000px;height:217px}
#area{width:425px;height:45px;background:#dd0;position:absolute;top:18px;left:285px;box-shadow:6px 6px 6px 0 rgba(100,100,100,.8) inset,-6px -6px 6px 0 rgba(255,255,255,.8) inset;border:1px solid #cc0;border-radius:20px;overflow:hidden}
#move{position:absolute;left:430px;width:270px;height:45px;animation:move 5s linear infinite}
@keyframes move{95%, 100%{transform:translate(-700px)}}
#pre{position:absolute;top:850px;width:1000px;height:90px;background:url(../gf0/pre.png)}
#arrow{position:absolute;width:86px;height:90px;left:914px;background:url(../gf0/back.png)}
html, body {overflow:hidden}
canvas {display:block;background:black;position:absolute;top:120px;left:50%;transform:translateX(-50%)}
#startBtn {position:absolute;left:50%;transform:translateX(-50%);padding:9px 18px;font-family:'Arial', sans-serif;font-size:26px;font-weight:900;background:#007bff;color:white;border:ridge 9px #FFF;cursor:pointer;opacity:0;pointer-events:none;transition:background 0.4s ease, opacity 0.5s}
#startBtn {background-color:#007BFF;color:white;border:ridge 9px #AAA;padding:12px 28px;font-size:24px;cursor:pointer;opacity:0;pointer-events:none;position:absolute;left:50%;transform:translateX(-50%);transition:background-color 0.3s ease;animation:pulsuj 2.4s ease-in-out infinite}
@keyframes pulsuj {
0%   {background-color:#004444}
50%  {background-color:#22FF22}
100% {background-color:#004444}
}
#startBtn:hover {filter: brightness(0.5)}
#move{background:url(../gf3/tyt10.png)}
#tac{position:absolute;top:12px;left:12px;width:510;height:510px;background:url(../gf3/tac.png);z-index:5}
#s{position:absolute;top:-1px;left:-1px;width:960px;height:740px;background:url(../gf3/tic.png);border:solid 1px;z-index:15}
#gra{position:absolute;top:33px;left:37px;z-index:6}
#kolo{position:absolute;top:536px;left:10px;background:url(../gf3/kolo.png);width:950px;height:167px}
#rama{position:absolute;top:146px;left:548px;width:388px;height:364px;background:transparent;z-index:5}
.anim {-webkit-animation-duration:.5s;animation-duration:.5s;width:960px;height:740px;position:absolute;top:84px;left:20px;background:#050;border:solid 1px;z-index:5;-webkit-animation-name:zoom;animation-name:zoom}
@-webkit-keyframes zoom {
0% {-webkit-transform:scale(0)}
100% {-webkit-transform:scale(1)}}
@keyframes zoom {
0% {transform:scale(0)}
100% {transform:scale(1)
}