.active_tile {
  /* Includes the sheen and bevel; regenerate with script/render_board_textures.mjs. */
  --tile-sheen: url("/assets/board/tile-878e8ba2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  float: left;
  height: 28px;
  width: 28px;
  position: relative;
  cursor: default;
  border-radius: 2px;
  overflow: hidden;
  color: #000;

  .letter_value {
    font-family: 'Ubuntu Mono', Monospace;
    display: block;
    font-size: 30px;

    input[type='text'] {
      font-family: 'Ubuntu Mono', Monospace;
      position: static;
      width: 22px;
      height: 24px;
      box-sizing: border-box;
      border: 1px solid rgba(38, 63, 80, 0.25);
      border-radius: 4px;
      padding: 0;
      margin: 0;
      color: #203442;
      font-size: 22px;
      line-height: 22px;
      text-align: center;
      text-transform: uppercase;
      background: rgba(255, 255, 255, 0.75);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);

      &:focus {
        outline: none;
        border-color: #267da1;
        background: #fff;
        box-shadow: 0 0 0 1px rgba(38, 125, 161, 0.3);
      }
    }

  }
  .point_value {
    width: 12px;
    position: absolute;
    right: 0;
    top: 1px;
    text-align: center;
    font-size: 11px;
    font-family: 'Yanone Kaffeesatz';
  }

  .point_value {
    top: 1px;
  }
}
.ghosted {
  opacity: 0.3;
  filter: alpha(opacity = 30);
}

.active_tile {
  background-color: #ddd;
  background-image: var(--tile-sheen);
}

.cell_tile .active_tile {
  display: flex;
  align-items: center;
  justify-content: center;

  .letter_value {
    position: relative;
    top: auto;
    left: -3px;
  }

  .point_value {
    letter-spacing: -1px;
  }

  &[data-blank='true'] .letter_value {
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

.ui-selectee {
  background-color: var(--tile-selectable);
  background-image: var(--tile-sheen);
}
.player_1 {
  background-color: var(--player-1);
  background-image: var(--tile-sheen);
}
.player_2 {
  background-color: var(--player-2);
  background-image: var(--tile-sheen);
}
.white_tiles, .white_grey {
  background-color: #ddd;
  background-image: var(--tile-sheen);
}
.last_tile, .highlight, .ui-selected {
  background-color: var(--tile-highlight);
  background-image: var(--tile-sheen);
}
.bombed {
  background-color: #d8e0e5;
  background-image: url("/assets/board/tile-cracked-c5f6b7e9.png");
}
.bombed.last_tile, .bombed.highlight, .bombed.ui-selected {
  background-color: var(--tile-highlight);
}
.trans, .hoverable:hover {
  background: none !important;
}

.active_tile.trans, .active_tile.hoverable:hover {
  box-shadow: none;
}

.placed_tile.fortress {
  background-image: url("/assets/board/tile-fortress-21af18d9.png");
}

.placed_tile.fortress.bombed {
  background-image: url("/assets/board/tile-fortress-cracked-ea461018.png");
}