@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)}
@font-face {font-family:"Luckiest Guy";src:url("../fonts/Luckiest Guy.ttf") format("truetype")}
#move{background:url(../gf3/tyt12.png)}
#pic p{width:955px;height:718px;position:absolute;left:24px;top:85px;z-index:5;background:url(../gf3/suwak.png);cursor:pointer;border-radius:8px}
.anim {animation-name:zoom;animation-duration:.5s;width:960px;height:610px;position:absolute;top:0px;left:0px;z-index:5}
@keyframes zoom {
0% {transform:scale(0)}
100% {transform:scale(1)}
}
#rama{position:absolute;left:22px;top:88px;width:954px;height:718px;background:#FA4;border:solid 1px;border-radius:8px;box-shadow:9px 9px 9px 0 rgba(255,255,255,1) inset,-9px -9px 9px 0 rgba(100,100,100,1) inset}
#puzzle {width:500px;height:500px;margin:40px auto;border:ridge 20px #baa;overflow:hidden;position:relative}
.tile {float:left;width:125px;height:125px;background-image:url(../gf3/bibok.png);background-size:500px 500px;cursor:pointer;box-sizing:border-box}
.hidden {background:#040;cursor:default}
#message {position:absolute;top:600px;left:50%;transform:translateX(-50%) scale(0.8);font-family: 'Luckiest Guy', sans-serif;font-size:108px;font-weight:900;color:#FF0;background:#FA4;line-height:.8;text-shadow:-4px -4px 0 red, 4px -4px 0 red, -4px 4px 0 red, 4px 4px 0 red;letter-spacing:10px;opacity:0;transition:opacity 1s ease, transform 0.5s ease;pointer-events:none;z-index:2}
#message.show {opacity:1;transform:translateX(-50%) scale(1)}
#start {margin-left:405px;font-size:32px;font-weight:900;padding:8px 16px;border:2px solid #000;border-radius:10px;background:#0ff;cursor:pointer;margin-top:-7px}
#level-box {position:absolute;top:30px;right:60px;display:flex;flex-direction:row;align-items:center;gap:6px;font-size:24px;font-weight:bold;transform:rotate(-30deg);transform-origin:top right;box-shadow:4px 4px 8px rgba(0, 0, 0, 0.6);background:#fff;padding:4px 14px;border-radius:12px;min-height:50px}
#level-display {color:red;font-size:54px;font-weight:bold;-webkit-text-stroke:2px #00C;line-height:1}
.level-animated {animation:scale-flash 0.5s ease-in-out}
@keyframes scale-flash {
0% {transform:rotate(-30deg) scale(1)}
50% {transform:rotate(-30deg) scale(2.5)}
100% {transform:rotate(-30deg) scale(1)}
}