body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    #log {
      border: 1px solid #ccc;
      padding: 10px;
      height: 220px;
      overflow: auto;
      margin-bottom: 15px;
    }

	#board {
	  position: relative;
	  width: 95%;
	  height: 70vh;
	  margin: auto;
	  border: 1px solid #ccc;
	  background: #fafafa;
	  overflow: hidden;
	}

	.board-tile {
	  position: absolute;
	  margin: 0;
	  transform-origin: center center;
	}

    #hand {
      border: 1px solid #ccc;
      padding: 10px;
      min-height: 110px;
      margin-top: 15px;
      background: #f7f7f7;
    }

    #engineInfo {
      margin-top: 8px;
      font-size: 14px;
      color: #333;
    }

    input, button {
      padding: 8px;
    }

    #status {
      margin-top: 10px;
      font-weight: bold;
    }

    #passBtn {
      margin-top: 10px;
    }

	.domino-tile {

	  display: inline-flex;
	  align-items: center;
	  justify-content: center;

	  background: #fff;
	  border: 2px solid #222;
	  border-radius: 8px;

	  margin: 0px;

	  box-sizing: border-box;
	  user-select: none;
	  overflow: hidden;

	}

    .domino-tile.clickable {
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease;
    }

    .domino-tile.clickable:hover {
      transform: translateY(-3px);
      background: #f2f8ff;
    }

    /*
    Ficha parada (como en la mano del jugador)
    */
	.domino-standing {
	  width: 54px;
	  height: 96px;
	  flex-direction: column;
	}

	.domino-standing .domino-half {
	  width: 100%;
	  height: 50%;
	}

	.domino-standing .domino-half + .domino-half {
	  border-top: 2px solid #222;
	}

    /*
    Ficha acostada (como en la mesa)
    */
	.domino-flat {
	  width: 96px;
	  height: 54px;
	}

	.domino-flat .domino-half {
	  width: 50%;
	  height: 100%;
	}

	.domino-flat .domino-half + .domino-half {
	  border-left: 2px solid #222;
	}

	.domino-half {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  grid-template-rows: repeat(3, 1fr);
	  justify-items: center;
	  align-items: center;
	  gap: 4px;
	  padding: 6px;
	  box-sizing: border-box;
	}

	.domino-pip {
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	}

    .pip-hidden {
      visibility: hidden;
    }

	.board-row {
	  display: flex;
	  flex-wrap: nowrap;
	  justify-content: center;
	  align-items: center;
	  gap: 4px;
	}
	
	.board-tile {
	  margin: 0;
	}