.playerLayout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.boardArea {
  flex: 1 1 auto;
}

.notesArea {
  width: 320px;
  flex: 0 0 320px;
}

.metaPanel {
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.metaBlock + .metaBlock {
  margin-top: 14px;
}

.notesText {
  margin-top: 6px;
  white-space: pre-wrap;
  color: #333;
}

.playerInfo {
  margin-bottom: 12px;
}

.thermoBoardWrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-items: start;
}

.spacerCorner {
  width: 44px;
  height: 44px;
}

.colCounts {
  display: grid;
  gap: 2px;
}

.rowCounts {
  display: grid;
  gap: 2px;
}

.countCell {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f5f5;
  color: #444;
  font-weight: 600;
}

.countCell.ok {
  background: #e8f7e8;
  color: #216b21;
}

.countCell.over {
  background: #fdeaea;
  color: #a02020;
}

.board {
  display: grid;
  gap: 1px;
  background: #d9d9d9;
  padding: 1px;
  border-radius: 10px;
}

.thermo-cell {
  position: relative;
  width: 44px;
  height: 44px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.thermo-cell.invalid {
  outline: 2px solid crimson;
  outline-offset: -2px;
}

/* layer base */
.thermo-cell .thermo-empty,
.thermo-cell .thermo-fill,
.thermo-cell .thermo-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.thermo-cell .thermo-fill {
  opacity: 0;
}

.thermo-cell.filled .thermo-fill {
  opacity: 1;
}

.thermo-cell.blocked .thermo-mark::before,
.thermo-cell.blocked .thermo-mark::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 21px;
  height: 2px;
  background: #9b9b9b;
  border-radius: 99px;
}

.thermo-cell.blocked .thermo-mark::before {
  transform: rotate(45deg);
}

.thermo-cell.blocked .thermo-mark::after {
  transform: rotate(-45deg);
}

/* palette */
.thermo-empty-piece {
  position: absolute;
  background: #e7e7e7;
}

.thermo-fill-piece {
  position: absolute;
  background: #5f5f5f;
}

/* straight */
.shape-straight-h {
  left: -2px;
  right: -2px;
  top: 16px;
  height: 12px;
  border-radius: 99px;
}

.shape-straight-v {
  top: -2px;
  bottom: -2px;
  left: 16px;
  width: 12px;
  border-radius: 99px;
}

/* bulb base */
.shape-bulb-right,
.shape-bulb-left,
.shape-bulb-up,
.shape-bulb-down {
  border-radius: 999px;
}

/* corpo del bulbo */
.shape-bulb-right {
  left: 4px;
  top: 8px;
  width: 26px;
  height: 28px;
  border-radius: 999px;
}

.shape-bulb-left {
  left: 14px;
  top: 8px;
  width: 26px;
  height: 28px;
  border-radius: 999px;
}

.shape-bulb-up {
  left: 8px;
  top: 14px;
  width: 28px;
  height: 26px;
  border-radius: 999px;
}

.shape-bulb-down {
  left: 8px;
  top: 4px;
  width: 28px;
  height: 26px;
  border-radius: 999px;
}

/* ends */
.shape-end-right {
  left: 16px;
  right: -2px;
  top: 16px;
  height: 12px;
  border-radius: 99px;
}

.shape-end-left {
  left: -2px;
  right: 16px;
  top: 16px;
  height: 12px;
  border-radius: 99px;
}

.shape-end-up {
  top: -2px;
  bottom: 16px;
  left: 16px;
  width: 12px;
  border-radius: 99px;
}

.shape-end-down {
  top: 16px;
  bottom: -2px;
  left: 16px;
  width: 12px;
  border-radius: 99px;
}
/* raccordo bulbo -> tubo */
.thermo-empty .shape-bulb-right::after,
.thermo-fill .shape-bulb-right::after,
.thermo-empty .shape-bulb-left::after,
.thermo-fill .shape-bulb-left::after,
.thermo-empty .shape-bulb-up::after,
.thermo-fill .shape-bulb-up::after,
.thermo-empty .shape-bulb-down::after,
.thermo-fill .shape-bulb-down::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}

/* colori layer */
.thermo-empty .shape-bulb-right,
.thermo-empty .shape-bulb-left,
.thermo-empty .shape-bulb-up,
.thermo-empty .shape-bulb-down {
  background: #e7e7e7;
  color: #e7e7e7;
}

.thermo-fill .shape-bulb-right,
.thermo-fill .shape-bulb-left,
.thermo-fill .shape-bulb-up,
.thermo-fill .shape-bulb-down {
  background: #5f5f5f;
  color: #5f5f5f;
}

/* right */
.shape-bulb-right::after {
  right: -18px;
  top: 8px;
  width: 22px;
  height: 12px;
}

/* left */
.shape-bulb-left::after {
  left: -18px;
  top: 8px;
  width: 22px;
  height: 12px;
}

/* up */
.shape-bulb-up::after {
  left: 8px;
  top: -18px;
  width: 12px;
  height: 22px;
}

/* down */
.shape-bulb-down::after {
  left: 8px;
  bottom: -18px;
  width: 12px;
  height: 22px;
}
/* turns */
.shape-turn-ur,
.shape-turn-rd,
.shape-turn-dl,
.shape-turn-lu {
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  border: 12px solid transparent;
  box-sizing: border-box;
}

.shape-turn-ur {
  right: -1px;
  top: -1px;
  border-top-color: currentColor;
  border-right-color: currentColor;
}

.shape-turn-rd {
  right: -1px;
  bottom: -1px;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}

.shape-turn-dl {
  left: -1px;
  bottom: -1px;
  border-left-color: currentColor;
  border-bottom-color: currentColor;
}

.shape-turn-lu {
  left: -1px;
  top: -1px;
  border-left-color: currentColor;
  border-top-color: currentColor;
}

.thermo-empty .shape-turn-ur,
.thermo-empty .shape-turn-rd,
.thermo-empty .shape-turn-dl,
.thermo-empty .shape-turn-lu {
  color: #e7e7e7;
}

.thermo-fill .shape-turn-ur,
.thermo-fill .shape-turn-rd,
.thermo-fill .shape-turn-dl,
.thermo-fill .shape-turn-lu {
  color: #5f5f5f;
}

/* single */
.shape-single {
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

@media (max-width: 980px) {
  .playerLayout {
    flex-direction: column;
  }

  .notesArea {
    width: 100%;
    flex: 1 1 auto;
  }
}