   .wrap {
       width: 100%;
       max-width: 650px;
       aspect-ratio: 227 / 192;
   }

   .controls {
       display: flex;
       gap: 8px;
       align-items: center;
       flex-wrap: wrap
   }

   .info {
       margin-left: auto;
       font-weight: 600;
       margin-top: 10px;
   }

   .grid {
       width: 100%;
       aspect-ratio: 227 / 192;
       display: grid;
       gap: 2px;
       background: #222;
       margin-top: 12px;
       user-select: none;
   }

   .tile {
       background-repeat: no-repeat;
       background-size: cover;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: transparent;
       /* se vuoi vedere numeri, metti visible */
       transition: transform .12s ease;
   }

   .tile.movable {
       cursor: pointer;
       filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
   }

   .tile.empty {
       background: #f3f3f3;
       cursor: default;
       filter: none;
   }

   .status {
       margin-top: 10px;
       display: flex;
       gap: 12px;
       align-items: center
   }

   .win {
       margin-top: 10px;
       background: linear-gradient(90deg, #16a34a, #059669);
       color: white;
       padding: 10px;
       border-radius: 8px;
       display: none
   }

   .win.show {
       display: block
   }

   .Puzzlecontrols {
       display: none;
   }