#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;          /* ⬅️ poziomy układ */
  align-items: center;          /* ⬅️ wyśrodkowanie pionowe */
  gap: 6px;                     /* ⬅️ odstęp między tekstem i cyfrą */
  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;     /* 🔴 Powiększona cyfra */
  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);
  }
}