:root {
     --cell-size: 32px;
     --gap: 2px;
     --piece-padding: 6px;
   }

   body {
     font-family: system-ui, Segoe UI, Roboto, Arial;
     margin: 18px;
     background: #f7f7fb;
     color: #111;
   }

   h1 {
     margin: 0 0 8px 0
   }

   .controls {
     display: flex;
     gap: 8px;
     flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 12px
   }

   ul {
     list-style: none;
   }

   button {
     padding: 8px 10px;
     border-radius: 6px;
     border: 1px solid #ccc;
     background: white;
     cursor: pointer
   }

   #app {
     display: flex;
     gap: 18px;
     align-items: flex-start;
     flex-direction: row;
   }



   #boardWrap {
     background: #fff;
     padding: 8px;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06)
   }

   #board {
     display: grid;
     gap: var(--gap);
     padding: 6px;
     user-select: none;
     position: relative;
     background: #fafafa
   }

   .cell {
     width: var(--cell-size);
     height: var(--cell-size);
     box-sizing: border-box;
     border-radius: 4px;
     transition: transform .08s
   }

   .cell.placeholder {
     background: rgba(0, 0, 0, 0.04);
     border: 1px dashed rgba(0, 0, 0, 0.04)
   }

   #piecesArea {
     display: flex;
     flex-direction: column;
     background: #fff;
     padding: 8px;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04)
   }


   #piecesStage {

     border-radius: 6px;
     background: linear-gradient(180deg, #fff, #fbfbff);
   }

   .piece {

     touch-action: none;
     user-select: none;
     cursor: grab;
     display: grid;
     gap: var(--gap);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
     border-radius: 6px;
     padding: var(--piece-padding);
   }

   .piece.dragging {
     cursor: grabbing;
     transform: scale(1.02);
     z-index: 9999
   }

   .piece .cell {
     width: calc(var(--cell-size));
     height: calc(var(--cell-size));
     border-radius: 3px
   }

   #message {
     margin-top: 12px;
     padding: 8px;
     border-radius: 6px;
     background: #e6ffef;
     color: #083;
     display: none
   }

   #status {
     margin-left: 8px
   }

   .piece {
     border-radius: 6px;
     border-style: dashed;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.334);
   }

   .piece .cell {
     border-radius: 6px;
     /* box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.223);*/
   }